Today I Learned https://www.blindemanwebsites.com/today-i-learned HTML, CSS, JavaScript & PHP Thu, 25 Jun 2020 15:43:58 +0000 en-US hourly 1 Removing Spaces from Filenames on Windows https://www.blindemanwebsites.com/today-i-learned/2020/removing-spaces-from-filenames-on-windows/ https://www.blindemanwebsites.com/today-i-learned/2020/removing-spaces-from-filenames-on-windows/#respond Wed, 17 Jun 2020 19:40:17 +0000 https://www.blindemanwebsites.com/today-i-learned/?p=1005 Read moreRemoving Spaces from Filenames on Windows

]]>
I received 60 documents to put online, beautifully named, but with SPACES!!! Aaaah!

Thankfully, you can bulk remove them in a powershell: hooray! This simple, understandable and beautiful solution on Stack Overflow shows you how:

  • Open the command prompt, by searching for CMD
  • Open a powershell by typing in powershell
  • cd to the folder the files are in
  • and try this command
    get-childitem *.pdf | foreach {rename-item $_ $_.name.replace(" ","")}
    replace pdf with whatever the relevant extension is

That’s it, works beautifully!

Photo credit: de moi, 2020.
]]>
https://www.blindemanwebsites.com/today-i-learned/2020/removing-spaces-from-filenames-on-windows/feed/ 0
Database Storage Engine https://www.blindemanwebsites.com/today-i-learned/2020/database-storage-engine/ https://www.blindemanwebsites.com/today-i-learned/2020/database-storage-engine/#respond Tue, 16 Jun 2020 01:01:00 +0000 https://www.blindemanwebsites.com/today-i-learned/?p=1002 Read moreDatabase Storage Engine

]]>
I have run into more than one database that has both MyISAM and InnoDB tables and I’m very happy to know that I can change all of them into InnoDB–providing it’s at least MySQL 5.6.4.

This little, practical article from Kinsta tells how and has more detail, but basically, you can just change it from a dropdown once you’re in phpMyAdmin, or you can use:

ALTER TABLE wp_comments ENGINE=InnoDB;

using wp_comments as an example.

This will help me streamline some old DBs! \o/

If you want to read more about databases and WordPress, Delicious Brains has a nice article about it, which is also where I got the link to the Kinsta one.

Photo credit: de moi, 2020
]]>
https://www.blindemanwebsites.com/today-i-learned/2020/database-storage-engine/feed/ 0
Free Software for Animation https://www.blindemanwebsites.com/today-i-learned/2020/free-software-for-animation/ https://www.blindemanwebsites.com/today-i-learned/2020/free-software-for-animation/#respond Sat, 06 Jun 2020 19:36:13 +0000 https://www.blindemanwebsites.com/today-i-learned/?p=993 Read moreFree Software for Animation

]]>
Once a year I teach Animation & Interaction at MKstart in Amsterdam. When I started teaching this class over 10 years ago, I used Flash. I’d make some very tiny animations with them during the first few classes and then some mini games during the last few classes. I loved it, they loved it, it was great. When Flash died, eventually I switched to Animate. The brush tool is still the same, the regular crashes are the same, but working in Canvas has made Animate more buggy and unreliable. I haven’t found any good alternatives so I use it anyway.

The students are not expected to have the software themselves. They use the school laptops during class. This year, because Corona, I was in New York, my students were at home–without school laptops…

The students do not have a lot of money, they do not have very fancy computers and the school doesn’t have enough money to fix those problems. The first thing I decided was to focus on one of the two subjects. The second thing was that it would be animation.

I made a website for them where they would be able to find all the classes online with examples and were they could upload what they’d made if they wanted to. I also added a list of free software that might come in handy and instead of just copying and pasting from everyone else’s lists of free software, I tried all of them to see if they would work for my class.

What did I look for?

  • suitable for 2D drawing / animation
  • options for people who can’t install any software on their machine
  • software for turning a series of photos into a movie
  • software that doesn’t rely on a webcam
  • flipbook software
  • software with timelines
  • drawing software
  • image manipulation software
  • easy and intuitive to use because if they’re all using different software, I won’t have time to explain it all

The list

Animation – online

  • Make a video from pictures, StopMotion: Kapwing
  • Very simple animation software: Brush Ninja
  • Make a digital flipbook, also very simple: FlipAnim
  • Make a pixel animation with Piskel
  • Converting a series of PNGs is also possible at imagetovideo.com
  • You can also convert a series of pictures to an animated GIF, for example with EZGIF
  • At EZGIF you can also make a APNG (Animated PNG), which sometimes leads to a more lightweight file with good or better quality than a GIF: worth a try
  • Another service that converts pictures to a GIF: Make a GIF

Image editing online

  • Doka.Photo | Free Online Image Editor | Powered by Doka.js – A free photo editor, nice to use
  • Another online photo editing app: Fotor
  • Online vector / drawing app: Gravit Designer (not just for designing apps or websites!) works in most browsers but you can download it as well
  • Online vector / drawing app Vectr is a little simpler than Gravit but also good. Can be used in the browser but I think it can be downloaded as well.
  • Online vector / drawing app Boxy SVG works in Chrome and Chrome-based browsers (Opera, Vivaldi, Brave, new Edge).
  • Online vector / drawing app Method Vector Editor
  • Photopea is a Photoshop clone online
  • The free version of Pixlr E has some limitations but a lot of options as well and it’s really nice to use

Animation and image editing online

  • Krita is wonderful software for drawing and animation, it has vector options and very good brushes
  • Inkscape is vector drawing software
  • Gimp is photo editing software in which you can also draw and make some very simple animations
  • Pencil2D Animation is 2D animation software
  • Synfig is also 2D animation software
  • Blender is very extensive animation software (though 3D, just to good not to mention)
  • OpenToonz is also 2D animation software
  • MorevnaProject OpenToonz is a different version of the same software as OpenToonz

Those are my lists. One of my students really liked using Krita although he didn’t use the timeline, he would just string the separate drawings together in the video software that came with his computer.

At least two student drew the frames by hand, took photos of their drawings with their phones and made them into a movie using Kapwing or free video editing software. Some of them used FlipAnim some used Pixlr.

Some students had crappy computers, but they did have iPads with Apple pens and Procreate (or their parents or sisters did), which has some timeline options that work pretty good for simple animations.

]]>
https://www.blindemanwebsites.com/today-i-learned/2020/free-software-for-animation/feed/ 0
Jittery Scrolling https://www.blindemanwebsites.com/today-i-learned/2020/jittery-scrolling/ https://www.blindemanwebsites.com/today-i-learned/2020/jittery-scrolling/#respond Sat, 25 Apr 2020 20:23:39 +0000 https://www.blindemanwebsites.com/today-i-learned/?p=979 Read moreJittery Scrolling

]]>
What: Jittery Scrolling, or very slow scrolling in Chrome-based browsers. It’s caused by too many paint operations when scrolling, in my particular case caused by an SVG set as a background-image with background-size: cover and background-attachment: fixed.

How: Remove the background-attachment: fixed and use a pseudo-element with position: fixed and will-change: transform, like so:

body {
  min-height: 100vh;
  position: relative;
}
body::before {
  background-image: background.svg;
  background-size: cover;
  content: "";
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  will-change: transform;
  z-index: -1;
}

Where: Blog post at Four Kitchens with links to more information.

Thoughts: It feels like a complete hack to me that I have to use a pseudo-element to use position: fixed with a 40kb SVG image to get Chrome to scroll normally. What it feels like is regression. More and more Chrome just really does not seem like a particularly good browser to me and I don’t understand why people like it so much.

Photo Credit: Photo of an abandoned train in Garibaldi Oregon. By me.

]]>
https://www.blindemanwebsites.com/today-i-learned/2020/jittery-scrolling/feed/ 0
Media Queries for Input Devices https://www.blindemanwebsites.com/today-i-learned/2020/media-queries-for-input-devices/ https://www.blindemanwebsites.com/today-i-learned/2020/media-queries-for-input-devices/#respond Fri, 17 Apr 2020 18:44:15 +0000 https://www.blindemanwebsites.com/today-i-learned/?p=972 Read moreMedia Queries for Input Devices

]]>
What: Since not every touch enabled device is a handheld device, checking for size and checking for touch should be handled separately, since the changes to the design and functionality they require are not the same.

How: You can use media queries.

@media( pointer: coarse | fine | none ){ ... }
/* Primary input device is a finger | a mouse, touchpad or stylus | there is 
no primary pointing device */

@media( hover: hover | none ){ ... }
/* Primary input device can hover | it cannot hover or there is no primary 
pointing device */

@media( any-pointer: coarse | fine | none ){ ... }
/* Any input device (not necessarily the primary one) is a finger | a mouse,
touchpad or stylus | there is no pointing device at all */

@media( any-hover: hover | on-demand | none ){ ... }
/* Any input device (not necessarily the primary one) can hover | shows hover 
state without hovering (with a prolonged tap for example) | no input device 
has any ability to show hover state or there is no pointing device at all */

Where: You can read more at CSS-Tricks. The article is over 3 years old but still good.
You can check support at Can I use…

Thoughts: I haven’t been using these enough and they can be a big help in making user experience better. Support is excellent, the only exception is IE, but at least you can assume that IE will rarely be used on a touch screen. But if you want to play it safe, I guess you could always design for touch screens with coarse control first, and add hover options etc through media queries.

Photo credit: Photo of the Empire State Building lit up in red from the Hudson. By me.

]]>
https://www.blindemanwebsites.com/today-i-learned/2020/media-queries-for-input-devices/feed/ 0
Taking My WordPress Class Online https://www.blindemanwebsites.com/today-i-learned/2020/taking-my-wp-class-online/ https://www.blindemanwebsites.com/today-i-learned/2020/taking-my-wp-class-online/#respond Tue, 17 Mar 2020 23:49:26 +0000 https://www.blindemanwebsites.com/today-i-learned/?p=958 Read moreTaking My WordPress Class Online

]]>
Because of the pandemic I too have to start teaching online. I’ve been setting everything up and I’m going to track my progress and findings under the teaching online-tag. This post is about my preparations to make this class available online.

The Class

The course students are taking consists of one class every week for (nearly) the entire school year, they get different subjects during this year and my subject, WordPress, is one of the last ones. It is not a straight-up, plain-old, WordPress class. During the year they have worked on a project and made a design for a website or an app, during my class those designs will be turned into actual sites or webapps with WordPress.

The Situation

The class is in Amsterdam at MK24 and I was going to fly back there on March 19 but now I’m staying in New York City. Not a bad deal by any stretch of the imagination but let’s say I’m very glad that my class is an evening class. With the time difference between Amsterdam and New York, it will be 1 or 2pm in New York (depending on whether the clocks have changed in Amsterdam as well) when class starts.

The Tools

All the content for the classes will be on one WordPress website and each student will get their own WordPress site in a folder of the main site.

Since I’m being paid by MK24 to teach this class, I cannot show you all of it. You can look at the public part at digitaldesignyear.nl but most of the information for students, the classes, the video conferencing, is restricted to students.

Students can log into the main site. Their roll, in WordPress terms, is Subscriber. Once logged in, they will never see the admin area of the site or the WordPress toolbar at the top but they will be able to see a lot more content, including the page with the video conferencing embedded and all the classes and resources for the classes.

What I’m using to build this site:

  • GeneratePress – a solid, fast, neutral and versatile theme.
  • BuddyMeet – to embed an instance of jitsi.org. I like the thought of having the video conferencing software be part of the website that contains everything about their class. I provide a link so they can use Jitsi directly if they prefer but they can also log into the site and go to the “Meeting online” page and that will add them to the conference call automatically.
  • Custom Post Type UI – I’ve added the custom post type Classes and the taxonomy Subject. All of my classes are under the subject WordPress, just in case one of the other teachers wants to add their own classes.
  • GP Premium – the premium version of GeneratePress, not because this theme is perfect but because it gives me such a solid foundation to build almost any website on, and because they are so helpful on their forums.
  • Koko Analytics – so I can keep an eye on whether students are actually looking at all the material. It doesn’t collect any identifying information but if none of them ever looks at the Resources page, I know I need to direct them more forcefully.
  • Link Library – to easily add to the Resources page. (For an idea of what I’m putting on that list, you can take a look at my Resources page on my Today I Learned blog.)
  • Login Widget with Shortcode – so I can easily add the login form to the home page of the site.
  • Restrict User Access – this plugin allows me to make the content only accessible to my students. Pretty easy to use and lightweight.
  • WP Show Posts – I’m using the free version of this plugin to have a little more control over the archive page for my custom post type Classes.

I’m using some other plugins as well but nothing that is specific to teaching online.

Thoughts so far

Based on my recommendation the teacher of this week’s class (I start next week) tried out Jitsi and send me a quick email to tell me that though it changed the dynamic of course, it worked well, so that makes me hopeful. He is going to tell me more later this week.

One of the reasons I chose Jitsi is because it is open source and has a good community and because you don’t have to have an account or install any software. It is particular though about the browser you use. I put a list together for my students and I thought I would add it here for you:

Jitsi Supported Browsers

  • Chrome – Optimal experience. Windows, Mac, Linux. [Tested by me]
  • Brave – I had an optimal experience when I used this on the jitsi.org site itself once I allowed autoplay. But if you try the embedded version on this site, it doesn’t work because of Brave’s focus on privacy. If you would prefer to use Brave, please go directly to the Jitsi website. Windows, Mac, Linux. [Tested by me]
  • Opera – It doesn’t support screen sharing, aside from that it works well. Windows, Mac, Linux. [Tested by me]
  • Vivaldi – Should work at least as well as Opera but I haven’t tested it. Windows, Mac, Linux.
  • Chromium – Should be an optimal experience but is best suited for Linux. Find it through the repository.
  • Firefox – You get a warning when you connect, and I had some weird connectivity issues. I had to restart the browser. Chat didn’t work. Windows, Mac, Linux. [Tested by me]
  • Safari – Only sound, no video or screen sharing, but the chat works. Mac. [Tested by me]
  • Edge – Not supported. Windows. [Tested by me]
  • New Edge – Might work because it is based on Chromium/Chrome. Windows, Mac.
  • IE11 – Not supported. Windows. [Tested by me]

If you have any questions, thoughts or suggestions, I would love to hear them!

]]>
https://www.blindemanwebsites.com/today-i-learned/2020/taking-my-wp-class-online/feed/ 0
scroll-margin-top https://www.blindemanwebsites.com/today-i-learned/2020/scroll-margin-top/ https://www.blindemanwebsites.com/today-i-learned/2020/scroll-margin-top/#respond Tue, 25 Feb 2020 23:40:20 +0000 https://www.blindemanwebsites.com/today-i-learned/?p=925 Read morescroll-margin-top

]]>
What: CSS-Tricks just posted about this last Friday and since I could have used this that day (!) but didn’t find it until now, I’m adding a note here for myself:

You have a page with a table of contents (with links), or you have a one page website with in-page navigation and you have a fixed header — when you click a link the content scrolls up too far and is hidden by the fixed header. This is not a good user experience, and you can improve it with scroll-margin-top in Firefox and Chrome-based browsers…

How: Use scroll-margin-top on the item that is being covered by the fixed header, like so:

The CSS

header { position: fixed; top: 0; width: 100%; height: 6em; }
h3 { scroll-margin-top: 6em; }

The HTML

<header>My fab website</header>
<main>
  <nav class="table-of-contents">
    <ul>
      <li><a href="#topic-1">Topic 1</a></li>
      <li><a href="#topic-2">Topic 2</a></li>
      <li><a href="#topic-3">Topic 3</a></li>
    </ul>
  </nav>
  <section>
    <h3 id="topic-1">Topic 1</h3>
    <p>A whole bunch of text.</p>
  </section>
  <section>
    <h3 id="topic-2">Topic 2</h3>
    <p>A whole bunch of text.</p>
  </section>
  <section>
    <h3 id="topic-3">Topic 3</h3>
    <p>A whole bunch of text.</p>
  </section>
</main>

Where: as said, Chris Coyier wrote about it @ CSS-Tricks

Thoughts: Support is not very good: IE, Safari, iOS and old Edge all have no support.

On Friday I decided, since it was a rush job and I didn’t have time for complex hacks or prolonged research, that in this case the table of contents was more important than the fixed header and I nixed the fixed header. Since cross-browser support is not very good, I still think that is the best solution in this case, but I might add some scroll-margin-top anyway, just to make it look a bit nicer, when people scroll–not quite as cramped.

Photo credit: Photo of dusk at the Hudson River, NY NY, looking towards New Jersey. By me.

EDITS: As a lovely person pointed out, I actually wrote margin-scroll-top in one instance instead of scroll-margin-top.

The same lovely person also asked if I knew how to make this work in iOS and … that stopped me because I had in my mind that browser support was good. I checked this post and that was in fact what it said “Support is very good” even with a link to Can I Use which, when I looked again, yes, the Safari and iOS boxes where vaguely green but with those little numbers in them implying caveats… and the caveats mean, in this case, that it doesn’t work in Safari or iOS.

You would have to use scroll-snap-margin-top instead of scroll-margin-top and this is because Safari has implemented it as part of the CSS scroll snap module, which means it is only to be used with scroll snap containers. Since that’s not what we’re doing here, it won’t work in Safari or iOS, I am sad to say.

I am very sorry for my earlier sloppiness and I updated this post to make it clear right away.

Also: thank you very much, lovely person who let me know! I’m sorry I don’t have better news, but I appreciate you emailing me about this.

In general, comments and emails to let me know things like this, or to ask me anything, are always welcome!

]]>
https://www.blindemanwebsites.com/today-i-learned/2020/scroll-margin-top/feed/ 0
Counting Down an Unordered List https://www.blindemanwebsites.com/today-i-learned/2020/counting-down-an-unordered-list/ https://www.blindemanwebsites.com/today-i-learned/2020/counting-down-an-unordered-list/#respond Fri, 14 Feb 2020 17:47:02 +0000 https://www.blindemanwebsites.com/today-i-learned/?p=891 Read moreCounting Down an Unordered List

]]>
What: You have an unordered list and you want to turn it into an ordered one through CSS

How: You can do this with CSS 2.1 and the counter element. Yay! I love CSS.

#koko-analytics-most-viewed-posts-2 ul {
	list-style: none;
	counter-reset: li;
}

#koko-analytics-most-viewed-posts-2 li::before {
	content: counter(li);
	counter-increment: li;
}

Why: I can image you’re wondering WHY?! Just use an ordered list!!! Yes, I know, I agree, however…sometimes you can’t. Koko Analytics, a privacy-conscious WordPress plugin that does simple site analytics extremely well and I love this sweet plugin for it, now has a wonderful widget that lets you show your most popular posts.

The HTML for it, like with any widget, is generated for me and it’s giving me an ul to work with. I have no control over that (well… I do, but you know what I mean) but I can easily add some CSS in the customizer. And I think a top 5 of anything is a good moment to turn an ul into an ol. So I did.

Where: There is a good and clear article by Roger Johansson on the adjacent topic Styling ordered list numbers

Thoughts: As said before, this is not how I would usually make an ordered list, of course! This post is just a good excuse to celebrate the existence of the CSS counter because it is awesome and you can use it for fabulous things like numbered chapters, numbered steps in a form, numbered anything!


Photo of viking ship inside the viking museum in Oslo, Norway by me
]]>
https://www.blindemanwebsites.com/today-i-learned/2020/counting-down-an-unordered-list/feed/ 0
Hosting Assets: Do It Yourself? https://www.blindemanwebsites.com/today-i-learned/2020/hosting-assets-do-it-yourself/ https://www.blindemanwebsites.com/today-i-learned/2020/hosting-assets-do-it-yourself/#respond Wed, 12 Feb 2020 22:31:17 +0000 https://www.blindemanwebsites.com/today-i-learned/?p=880 Read moreHosting Assets: Do It Yourself?

]]>
I have started hosting more and more of the assets for sites, like web-fonts and JavaScripts libraries, stats, with the sites themselves instead of using a CDN / third-party service, largely because I was starting to feel squeamish about my role in helping tech giants follow you across the internet.

This is a process and I’m not a purist, yet. So on this site, as an example, I’m still using Google fonts, served to you directly from Google. This is a WordPress site and I’m using GeneratePress rather than a custom-build theme, because of the time gain it gave me when I set it up. This blog, when I started it a few months ago, was an experiment. I wanted to see if the format would work for me, before I invested my time in designing it. But theme customizers in themes like this rarely allow for custom fonts. And on the rare occasion that they do, Astra has an integrated plugin for example, it has been a hassle to get it to work.

So doing things manually, like with this beautiful service: Google Webfonts Helper, or Font Squirrel (that I always used before most of my sites were made with WordPress), and then adding your own CSS is the best option, but I haven’t yet had a chance to make that change for every single website I have ever used Google Webfonts on, including this one.

And then I came across the article Should you self-host Google fonts? by Barry Pollard and things became a whole lot more interesting.

As another reason to self host he adds speed, of course; loading times matter. There’s more to it, but he makes a good point about HTTP/2:

The theory behind this was that browsers limited the number of connections to each domain (typically to 6 connections) so using another domain gave you 6 more connections. While that may have been true in the past (particularly when browsers limited it to less than 6 domains) and before HTTPS became the norm, now connections are expensive to create. Additionally HTTP/2 actually benefits from one connection (mostly!) so using other domains is often a performance cost rather than gain.

Barry Pollard

This, I’ve found, is true, but when I saw the increase in loading times Barry had from switching to self-hosted, I was still a bit shocked: 3 seconds!

Anyway, he does a little more than just a straight up switch, as I’ve been doing, but the biggest improvement is no longer having to wait for Google’s stylesheet.

If you want to know more, definitely read his article, he has all the nitty-gritty worth knowing and it’s a good read!


Photo of Central Park from a top appartment in the Dakota, by me
]]>
https://www.blindemanwebsites.com/today-i-learned/2020/hosting-assets-do-it-yourself/feed/ 0
Always Include Widows and Orphans https://www.blindemanwebsites.com/today-i-learned/2020/always-include-widows-and-orphans/ https://www.blindemanwebsites.com/today-i-learned/2020/always-include-widows-and-orphans/#respond Tue, 11 Feb 2020 17:38:08 +0000 https://www.blindemanwebsites.com/today-i-learned/?p=868 Read moreAlways Include Widows and Orphans

]]>
What: Widows and orphans in CSS refer to leftover lines at the beginning or ending of a page, when you’re printing a website, or to the leftover lines at the beginning or ending of a column when you’re using multicol.

How: You suggest the number of lines left on a page if a paragraph is split across a page or column. For example:

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

Where: The article Orphans and Widows in CSS by Toby Osbourn on tosbourn.com

Thoughts: Support is good across browsers, except, oddly, in Firefox, there is a 16 year old open bug report that got some attention two years ago and there doesn’t seem to be any reason why this hasn’t been implemented, except that it just hasn’t. I have to say I’m disappointed in my favorite browser.

On a more personal note, I came across this in one of my own stylesheets for a website I hadn’t spend any time on in the last two / three years and I have no memory of putting them in. I had to look up what it was.

Good article on multicol by Rachel Andrew can be found at Smashing Magazine.


Photo of Haystack Rock at Pacific City, Oregon by me
]]>
https://www.blindemanwebsites.com/today-i-learned/2020/always-include-widows-and-orphans/feed/ 0