DEV Community: Timothy Miller

My Favorite Thing about Obsidian

Timothy Miller — Fri, 12 Aug 2022 00:00:00 +0000

The last year I’ve been obsessed with a new tool called Obsidian. I’ve spent countless hours with it, gleefully creating and refining. It has revolutionized every aspect of how I work and live, and I want to talk about why.

What is Obsidian?

Obsidian is ostensibly a note taking app. But it’s so much more than a note taking app.

It’s the best note taking app I’ve ever used, and it has gradually taken over many different aspects of my work. In fact, it has really become an entire operating system for my life.

Obsidian has become my personal operating system

Obsidian has become:

My personal assistant
My project manager
My writing and brainstorming tool
My friendship tracker
My system for remembering important dates and events
My second brain
My guard dog, keeping safe all my most important dreams, goals, and ideas

Much of this has been revolutionary and life-changing. But most importantly, Obsidian has saved me from the nightmare that is information overload.

Information Overload

We all consume too much information in the 21st century. The internet is a wonderful tool, but it has evolved to encourage gross consumption, and it’s making us all mentally obese.

Information gluttony can be just as harmful to your health as overeating, and it has similar side effects: when you consume too much, you cease to enjoy it. It becomes something you do rather than something you enjoy.

Even the most entertaining YouTube channel ceases to entertain when you overdo it.

And I’m guilty of it. The act of creation is far more difficult than consumption. It’s so much easier to sit and watch a video than it is to create one. But satisfaction and fulfillment ultimately rests in creation, not in consumption.

Writing improves memory

When you consume too much, you also start to forget things. You become a college student again, cramming too much information into your head, and forgetting it all after the test.

I recently wrote about a new-ish CSS technique that I haven’t been using as often as I should. I wrote that article specifically to try to change my own behavior, because I know myself: when I run into a problem that I solved years ago, I tend not to think about it. I use the old solution, rather than looking to see if there’s a better way to do it now.

But now that I’ve written about it, I don’t think I’ll forget it. Next time I search my brain for the solution to that problem, I hope that I’ll remember the new solution, rather than the old one.

This is the magic of writing. When you write about something, you’re forced to really think about it, and that helps you to remember it. Writing makes you a better problem solver and sharpens your memory.

And you don’t need a blog to write. You can write for yourself, which not only improves your memory, it has a host of other benefits. I personally do both: I start my writing projects in Obsidian, and if they seem useful for other people, I publish them elsewhere.

Association improves memory

But writing isn’t enough. Our brains work by association, and whatever you write about has to be connected to another idea in order to remember it.

Obsidian also works by association, and that’s one of its most powerful features. You can connect any note to any other note by using [[wiki-style links]]. This feature alone is incredibly powerful.

Coupling related ideas helps you to create a cognitive scaffolding that reinforces your own hardwired memories. This is why people often refer to these types of tools as a “second brain”, because they truly are attempting to create a structure similar to your own hardwired brain.

Is Obsidian a second brain?

Honestly I was skeptical of this claim when I first heard it. How could any tool come close to matching our own incredibly powerful (if a bit lazy) brains?

But now I see what they mean. Obsidian has become an extension of my brain. Not only does it safeguard important ideas that I want to keep, but it helps to clarify and strengthen my own thoughts, memories, and associations.

Writing alone can do this, but the associations between thoughts takes it to the next level. I clarify my thoughts through writing, and then I remember them by connecting them to my web of existing ideas. Then if I do forget something down the road, I can always find that idea again by looking through my web of related ideas.

Obsidian also has a visualizer that shows you a representation of your current web of ideas. Here’s what mine currently looks like:

My personal graph view in Obsidian. It can be chaotic, but surprisingly useful.

Getting Started with Obsidian

If any of this sounds interesting or valuable to you, then you can try it yourself! It's free for personal use. Download it here, and start by creating a home note. There are many different styles of home notes, but you can start with a simple list of linked notes.

Nick Milo has an excellent beginner’s tutorial here, which I recommend watching. He walks you through the interface and how to get your first vault set up.

Additionally, I’ll be sharing more details about how I’ve created my own “Life Operating System” over at Obsidian Rocks.

Stop Using the Padding Hack (for videos)

Timothy Miller — Fri, 05 Aug 2022 00:00:00 +0000

This is a PSA for myself more than anyone. CSS has come a long way since I started using it.

Most of the “hacks” we used in CSS back in 2010 have been replaced with better alternatives. Off the top of my head, here are a few paradigm shifts we’ve made in the last decade:

We used to use…	Now we use…
Floats, absolute positioning, and tables	Flexbox and CSS grids
PHP and Sass variables	CSS custom properties
JS animation libraries	CSS animations and transitions
Magical numbers for padding	`box-sizing: border-box`
Flexible font sizing with JS	Viewport units

Today is a great day to be a CSS developer. I used to spend hours (sometimes days) wrestling with layouts in CSS, but no longer. Most of my layout problems in CSS are resolved with no more than five lines of CSS, and it’s a beautiful thing.

Centering something in CSS? No longer a meme. Using Flexbox, centering things is effortless.

It’s not easy to learn new things constantly and re-learn your profession every year or two, but in the case of CSS, it’s worth it. Nearly everything is easier and faster today than it was five years ago. ^[1]

But there’s a few new CSS features that I haven’t managed to integrate into my head yet. One of the most obviously beneficial is aspect ratio. For many years now we’ve used a padding hack to simulate aspect ratio. This is often used for embedded videos, such as YouTube videos, and it looks like this:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

This technique was pioneered in ALA back in 2009. It’s a good trick, and even today if you search for “responsive videos css” the top results are all this same trick.

But it’s no longer necessary! The padding hack above simulates a 16 / 9 aspect ratio. We use that because that’s what most YouTube videos use. Rather than using the semi-magical 56.25% padding hack, these days you can spell out the exact aspect ratio that you want:

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

This is supported everywhere (except IE, of course).

Gosh it's lovely to reduce an 11 line hack down to two easy-to-remember lines. ^[2]

I have undoubtedly searched “responsive videos css” hundreds of times, because the padding hack was dense, hard to remember, and hard to write. It was always easier to copy/paste from the CSS Tricks article. But no more!

CSS continues to get better and better over time, and I’m always so happy to leave clunky (albeit brilliant) hacks like the above in the historical dustbin.

I’m not sold on Logical Properties though. In contrast to everything else on this list, Logical Properties are denser, harder to understand, and seem to serve little purpose in most situations. But I digress. ↩︎
No container element required, either. ↩︎

I’m done with LocalWP

Timothy Miller — Tue, 28 Jun 2022 00:00:00 +0000

I hate to say it, but I am abandoning Local WP (formerly by Flywheel). I used it the last couple of years, but I can’t do it anymore. I’m done.

Why?

One big reason: databases. It is a huge pain in the neck importing databases into Local. I don’t have to do it very often, but every time I do it drives me nuts. Database imports have required nasty hacks for at least four years, so I don’t expect it to be fixed anytime soon.

It also seems like the focus of the app has changed. It used to be a great tool for developing WordPress sites locally, now it seems more like a great integration for its parent company, WPEngine. I love WPEngine as a platform, but many of my clients use other WordPress hosts, and Local simply isn’t the best option for sites that aren’t using WPEngine. Even for WPEngine sites, the connector utility is sketchy at best. It’s great when it works, awful when it doesn’t.

What do you use instead?

I’m back to my old Docker Compose setup, which I made a video about several years ago. I have a boilerplate docker-compose template that I use in every WordPress site, and this allows me to create and destroy my local servers with very simple commands:

# firing up the server
docker-compose up

# shutting down the server
docker-compose stop

# destroying the server
docker-compose rm

In case you’re curious, here’s what my typical docker compose file looks like:

version: '2'

services:
   mysql:
     image: mysql:5.6
     volumes:
  # this line automatically imports .sql files
  # all I do is drop them into a /db folder
  # and Docker does the rest!
       - ./db:/docker-entrypoint-initdb.d
       - ./db/conf:/etc/mysql/conf.d
     restart: always
     ports:
         - "3306:3306"
     environment:
       MYSQL_ROOT_PASSWORD: wordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   # I usually leave PHP MyAdmin disabled unless I need it
   # myadmin:
   #    image: phpmyadmin/phpmyadmin
   #    ports:
   #       - "8888:80"
   #    depends_on:
   #       - mysql
   #    restart: always
   #    links:
   #       - mysql:db
   #    environment:
   #       MYSQL_USERNAME: wordpress
   #       MYSQL_PASSWORD: wordpress
   #       MYSQL_ROOT_PASSWORD: wordpress

   wordpress:
     depends_on:
       - mysql
     image: wordpress:php7.3
     links:
       - mysql:mysql
     volumes:
       - ./:/var/www/html
     ports:
     # I use a unique port number for each client
     # (you only change the first number, "8000")
       - 8000:80
     restart: always
     environment:
       WORDPRESS_DB_PASSWORD: wordpress

As long as you have Docker installed and running, you can place this file inside your root directory (name it docker-compose.yml), run docker-compose up and Docker will do the rest. It will automatically spin up a new server and database, and import any SQL files that it finds in the /db folder. It works like magic, no more frustrations with Local.

If Docker is so great, why did I stop using Docker?

Partially because Local was new and shiny, and everyone else was using it. It’s a pretty app, and I like to use pretty apps.

I also tried it because Docker can be slow on Macs. Locals wasn’t really much better—they probably use similar tech behind the hood—but I hoped Locals would be better on Macs.

Now I use a Linux computer full time, and Docker works like a dream on Linux, so there’s really no downside to switching back to Docker.

Six HTML5 Elements I Should Use More

Timothy Miller — Fri, 17 Apr 2020 09:49:38 +0000

HTML5 is a large language, but not a massive language. I’m not sure if the MDN HTML elements reference is comprehensive or not, but if so it looks like there are about 100 valid HTML tags. It’s entirely possible to learn and use all of the valid elements in HTML5, but few of us do.

Most of these elements are useful on most sites, but if you're like me, you might just forget that they exist. Here are a few elements that I often forget, and strive to use more often.

<address> #

My personal rule: almost every website should have an <address> element. The <address> element provides contact information, and many of the limitations it used to have no longer apply in HTML5. You can use it for any contact info, in any context.

Most of the time I would use this in the footer of the page, where companies usually put their contact info. You can add a physical address, an email address, a phone number, anything that would allow someone to get in touch with the website owner.

You could also use this at the bottom of articles, to show people how to get in touch with the article author. Contact information is vitally important to have on your site, and <address> gives you a semantic way to mark it as such.

Accessibility tip: headers aren't allowed in address elements, so keep that in mind when you're working with these.

<details> #

<details> elements are neat. They have so much potential, and yet I rarely see them used on the web.

Here's what a details element looks like (click for more) Neat, huh?

<details> gives you a bit of interactivity for free. It allows you to hide content behind a single click.

There are some limitations on what you're able to do styling-wise with these. There are several transitions that you aren't able to animate, such as the open/close animation, which annoys me a bit. But in a pinch, <details> elements work incredibly well and take way less effort than any of the alternatives. If you're looking for this kind of open/close functionality, you could do a lot worse than a <details> element.

<map> #

Gosh I haven’t used a <map> element in years. This is another element that adds interactivity to HTML without requiring JavaScript, which automatically makes it a powerful tool.

The <map> element allows you to add special click targets to images, in any shape you want. So rather than having one link per image, you can have any number of links in any shape you want. For example, you could have a triangle with oddly shaped bricks.

The details are a little too complex to go over here, but if you want to try it out, check out the MDN article.

<dialog> #

The <dialog> element, also known as a pop-up. Ah, how I love and hate thee so.

The dialog element is a native way to do pop-ups. If you're like me you've probably built more than a few pop-ups in your day, and you would like a way to do it more easily. <dialog> is that way.

But wait! The <dialog> element has poor browser support right now. Safari doesn't support it at all, and Firefox only supports it if you turn it on.

So there’s a good reason not to use the <dialog> element for now. But someday soon, hopefully!

<abbr> #

The <abbr> element is a great way to make sure your writing is accessible for all. There are a lot of abbreviations in our industry, and trust me, you do not want people checking Urban Dictionary to figure out what your abbreviation means. Far better to use an <abbr> element and explicitly tell them.

I often forget to do this, but it's such great way to keep our content beginner-friendly. Even abbreviations that are easy to find, such as HTML and CSS can benefit from an <abbr> tag. Just don’t forget to use the "title" attribute on these, that syntax always throws me off:

<abbr title="Hypertext Markup Language">HTML</abbr>

<template> #

To be honest, TIL about the <template> element. When building things with JavaScript I pretty often need a small bit of reusable HTML, and that is what the <template> tag is for. This is how I used to do that:

<script type="html/template">An old trick that is no longer necessary</script>

But using an actual <template> tag is better. More details on its usage over at MDN.

One thing to keep in mind: this tag is not supported in IE, so you'll probably want to hide the element with CSS to prevent it from showing up in those browsers.

Also, from an accessibility standpoint, you might want an aria-hidden on there. I would think screen readers would automatically skip template content, but I haven’t tested that, and better safe than sorry.

Switching to an Ergonomic Colmak Keyboard

Timothy Miller — Fri, 14 Feb 2020 00:00:00 +0000

I have been programming for over a decade. I have worked with many people who used all sorts of keyboards, from the nerdiest to the normal-est. Never did I think I would become a keyboard nerd. It just isn't something that ever really interested me. I mean it’s just a keyboard, right?

But then I began to struggle with wrist pain. I’ve probably averaged 6+ hours typing every day for over a decade now, and it turns out that all of that typing has taken its toll.

I documented much of the history of my wrist pain in a previous post, which you can read here. Now that I’ve been typing both on a mechanical and Colemak keyboard for a few months now, I am prepared to answer a few of the questions I had back when I was thinking of making this switch. If you are considering switching keyboard layouts or switching to a more ergonomic keyboard, perhaps some of your questions will be answered here.

What is an alternate keyboard layout? #

Qwerty is the standard keyboard layout that most U.S. computers come with. It’s called Qwerty because the top row of keys spells out "qwertyuiop", and Qwerty is easier to say than that.

Qwerty was originally designed for typewriters. Typewriters were mechanical machines that occasionally got jammed if you typed letters that were too close together, so the inventors came up with a clever solution: place the most commonly used keys as far apart as usual.

This was a good design for a typewriter, but a poor one for computers. Qwerty wasn't designed for the work we do today, and many alternate layouts have been devised by clever people. One of the best known is called Dvorak. The one I chose to learn is called Colemak.

Why learn Colemak? #

As mentioned above, I have been struggling with wrist pain for a few years now. Part of that is just the sheer number of words I type each week.

Dvorak was invented in order to help people type more efficiently. It was designed to divide the stain of typing between both hands equally, and to avoid stretching where possible. It is simply more efficient for your hands, and helps you work less.

Colemak was created for the same reasons, to reduce strain and give people a more comfortable typing experience for the modern age. But it was also designed to be as similar to Qwerty as possible, so it’s easier for long-time Qwerty users (like me) to learn. It’s still far more efficient than Qwerty, and possibly more efficient than Dvorak (although they're very similar), but easier to learn. Also, the most commonly used keyboard shortcuts stay the same, which is a big win for a keyboard shortcut junkie like me. All of this is why I decided to go with Colemak.

Can you still type Qwerty after switching to another layout? #

The short answer is: yes! The longer answer:

It has now been just over two months since I switched to typing a Colemak keyboard layout. To be honest, at the moment I’m not as proficient with either keyboard layout as I was with Qwerty. I used to type about 90-110 WPM, now I can type about 60 WPM with either Qwerty or Colemak.

It’s a very strange experience, learning a new keyboard layout after typing your whole life on Qwerty. At first your brain will rebel, and it will feel like you're trying to write with your off hand. You'll feel clumsy and awkward, and you'll be lucky if you just type the right keys, never mind typing with any speed.

But as you retrain your brain, it will learn to accept its new role. For me it took about three weeks of conscious effort for the pain to subside. After the third week, my brain accepted its new role more readily, and I was able to type again. Very slowly, but I could at least type on Colemak. It took another month before I could type with a consistent speed.

As for my Qwerty skills, they went through a metamorphosis as well. In the first three weeks I was forced to type Qwerty at times in order to keep doing my work, but after the third week I switched over to Colemak full-time. It was at this point that I realized I couldn't type Qwerty anymore. If I tried, my brain tried to use Colemak, and only gibberish came out. Once I was able to type Colemak without as much conscious effort, my Qwerty skills came back, but slower than before. I can now type Qwerty about as quickly as I can type Colemak, but since it isn't my main driver I have lost some speed. Oh well. I’ll get it back one way or another.

Advocates of Colemak also say it allows you to type faster in the long term. I have yet to see evidence of that, but that wasn't the reason I switched, so I’m not that worried about it. I think my speed will come back with time.

Has Colemak helped your wrist pain? #

Yes, I’m happy to report that it has. However, I made many changes in addition to changing my keyboard layout, so I can't say that this is necessarily what "cured me". I have less pain now due to many different life and work factors outlined in a previous article, and Colemak was one part of that.

What's the deal with mechanical keyboards? #

While I was frustratedly learning Colemak, I was also learning to use a new ergonomic keyboard, called a Keyboardio. This was a very difficult transition for my poor brain to make, but after putting in the effort, I love where I ended up.

My beautiful new Keyboardio.

The Keyboardio has helped me in many ways:

It’s super customizable. It has numerous plugins, some of which have been invaluable in my journey to heal my wrists. In particular, they have a one-shot plugin that is magical: instead of holding down keys and modifiers to do keyboard shortcuts, you can type them consecutively, allowing you to type ⌘, C, instead of ⌘+C. This is just strictly better for your hands. No more twister for your fingers.
It is a split keyboard. I have fairly wide shoulders, and I keep the two halves of my keyboard at shoulder width, with a trackball mouse in the middle. I think this has been a big factor allowing my wrists to heal. Typing on a regular keyboard forced my wrists to bend outward, which in the long run wasn't good for them.
You can also "tent" the keyboard up, so your hands can sit in a more natural position. I have mine tented up as high as it will go.
Due to the customizability, it’s much easier to add and remove keyboard shortcuts. I use far more shortcuts than I ever have before, which helps me resort to the mouse less, which helps my wrists.

The Keyboardio is quite an investment at $329 (I got mine on sale for $280, and you can often get them used on the forum), and there are definitely cheaper options that give you many of the same results. But now that I’ve switched, I wouldn't go back for anything. I think the Keyboardio, and the improvements it has allowed me to make, took me 75% of the way to healing my wrists, and for that I am grateful.

So... What's the deal with mechanical keyboards? #

I honestly don’t know. 😂 I like mine for the ergonomic comforts. I know some like them for the hardware, and get super nerdy about switches and hardware mods and such. I know nothing about that, although I respect those who do. I just like mine because it’s comfortable, and helps with my wrist pain.

Are mechanical keyboards better than normal ones? #

I would say, generally speaking, no. Mechanical keyboards are not inherently better as far as I can tell, they're just different. Mechanical keyboards are more customizable in general, they give you better feedback which can make touch typing easier (just think how hard it is to touch type on an iPad screen. Regular keyboards feel like that after typing on a mechanical for a while).

But there are perks to regular keyboards as well. They're usually thinner, more portable, often times cordless, and ubiquitous. If you're happy with a regular keyboard, there’s really little reason to go mechanical, in my view.

If you weren't typing 6+ hours a day, would you learn a new keyboard layout? #

Probably not. I learned it because my wrists hurt and I was desperate for a change. If I didn't type so much, typed a lot on other people's computers, or didn't experience pain from typing, I probably wouldn't switch. I happen to be in a position where I mainly use my own computer, I use it a lot, and my wrists hurt because of that. In this situation, I believe a few weeks of frustrated typing was worth less wear and tear on my arms.

Knowing Qwerty is important though, because you need to be able to use computers that aren't your own. This is why I never switched before, and why I thought about it very seriously before I did. It’s a pretty big inconvenience to not be able to use other keyboards, and it requires more time to maintain the skills to type with two keyboard layouts. This is a downside, but one I’m willing to live with at this point in my career. For now, I’ll just make sure to use both layouts every week, so that I can maintain my skills with both.

What's the best ergonomic keyboard? #

I don’t know. I really like my Keyboardio, but it is the only mechanical keyboard I have ever used, I am no expert.

However, if you're like me and need one to help with wrist pain, there are a few must-haves:

The keys should be in columns, not staggered. This takes more work to get used to, but it’s far easier on the fingers.
The keyboard should have split capability. The ability to type with your hands at shoulder width is a game changer.
Related, you should be able to "tent" the two halves. Some ergo keyboards are just built like this, others are adjustable. Adjustable is better, because everyone's hands are unique.
100% customizable keys is also very useful, if you want to use your mouse less. This way you can customize your board to work smarter instead of harder.

The keyboardio checks all of these boxes, but so does the ErgoDox, and many others check most of these boxes. Many ergo keyboards have staggered keys, which I think is unfortunate.

In Summary #

If you struggle with wrist or arm pain, and your career depends on typing, ergonomic keyboards and alternate keyboard layouts are definitely worth investigating. I’ve had good results using them, and I hope they will keep my arms in good shape for many years to come.

Any questions you have that I didn't answer here? Write a comment below or hit me up on Twitter, always happy to share what I know.

CSS4

Timothy Miller — Fri, 07 Feb 2020 00:00:00 +0000

Here's a really fascinating idea from PPK and Chris Coyier. The idea is that we should promote and think about CSS4 as if it were an actual thing, even though it’s not.

I think many of us who love CSS as a language can relate to this idea, especially those of us who lived through the heyday of CSS3. CSS as a language used to get more attention than it currently does, and it’s easy to hope that we could turn that around with a little more TLC.

I do think CSS deserves more attention, especially with all the excellent work going into the language right now. It’s a more robust language than it’s ever been, and it just keeps getting better, and yet it seems we as an industry are moving away from it.

Two questions I have: would it be worthwhile to try to artificially create more attention for CSS as a language? And if yes, would creating a fictitious name for it help? Let's talk about that.

A little history, as I remember it:

CSS3 was popularized shortly after I started my career in web development, and I remember the thrill of working with "new HTML5 and CSS3 features". HTML5 and CSS3 promised to make our lives a lot easier, and at one time many of us were counting down the days until we could make use of this simplicity in real-world projects.

As I remember it, many of the features that were brought to the table were things we were already doing, and CSS3 was just going to make it much easier than before. For example, let's take border radius: we certainly had round corners on the web before border-radius was added to CSS, but we had to use a collection of hacks and images to accomplish it. It worked, but not nearly as effortlessly as simply typing border-radius: 3px;. CSS3 made things easier.

I think that this is really why most of us were excited to have these features. Not only did these features save us time and effort in development, but they also made the web faster and more accessible. All we had to do was learn to use these features, and our work would be better and easier as a result.

It was a fun time to be a web developer, especially for those of us who truly love CSS as a language. CSS was still relatively young and innocent, but this was the beginning, the beginning of a much bigger story.

Would a new CSS3 help the industry?

Many of the things stated above were not only true of CSS3, they're also true of CSS progress today.

Many of the new CSS features coming down the pipe are just reflections of things we’ve already done, just streamlined methods for achieving the same results. But there’s one big difference between now and ten years ago: layout on the web just simply isn't as painful as it used to be.

However, the industry is vastly different than it was in the CSS3 days. Everything has changed. Sure you can still write vanilla HTML5 and CSS3 and it will work, but most people don't.

Let's reframe the question:

Has web development gotten easier since CSS3?

As a whole, it's hard to say. But we can safely say one thing: CSS has become much easier to use in recent years. And not only that, there are so many more ways to use CSS.

Building websites is drastically different now. You really don’t have to work in the core languages (HTML5, CSS, and JS) at all, if you don’t want to. There are so many frameworks, toolkits, pre and post CSS processors, design tools that export CSS, CSS-in-JS solutions, and more: most of these tools promise to solve specific pain points that people see in CSS, JS, and HTML.

This is a good thing, and helps push the web forward just like CSS3 did, albeit not as directly. All of this tooling truly gives us more options than we’ve ever had before, but it also means less and less interest in the core features of the web.

Very few people write websites from scratch anymore, so the benefits of core language updates are less tangible to most of us. I honestly think many web developers would be more excited to hear of a new version of React than a new version of CSS: that’s the reality, and that’s okay.

All of this makes me think that the glory days of CSS are over, and there’s no going back. Just like there was a gold rush for iOS apps back when the iPhone came out, CSS had its time in the sun, and now it has to grow up and get a real job. No marketing push, no matter how big, is going to make people pay attention to a technology that they simply don’t use anymore.

However...

That doesn't mean we should hang CSS up to dry. I do think we could manufacture a smaller movement. The CSS community has become more stagnant over the years. Fewer people truly care about it. Those of us that do care need to be more diligent about learning and teaching new CSS features that might otherwise fly under the radar. If we don’t learn and teach it, who will?

And as Chris notes in his CSS4 article, there are plenty of new and exciting things to talk about. We just don’t talk about them as much, because there are so many other exciting things to talk about.

As noted on CSS-Tricks, the W3C is semi-annually posting "CSS Snapshots" that describe a year's worth of progress on CSS the language. The latest one is right here, CSS Snapshot 2018.

This would be a good way to focus our attentions, to make sure nothing flies under the radar. It also gives us a rolling number to use, similar to how JavaScript is now versioned. We would have CSS 2018, CSS 2020, and so on and so forth. Definitely not as pithy as CSS4, but it would have many of the same benefits, plus it's accurate. We can write about the shiny new "up and coming" CSS features in CSS 2020, just like we would write about the nonexistent "CSS4".

I do think that this alone would be tremendously helpful. Just looking through the CSS 2018 Snapshot, here are a few of the features that I haven’t seen or read much about:

Logical Properties
Fonts Level 3
CSS3 Colors
CSS3 Namespaces
CSS4 Media Queries (!!)

This is an excellent place to start. And while I do like the pithiness of CSS4, I do think in the long run it would be better to go with the CSS 2018 vernacular. That way we always have a new version to aspire to, rather than slowly watching CSS4 fade into the background, like we saw with CSS3.

CSS is dead, long live CSS!

You Are Being Tracked

Timothy Miller — Sat, 25 Jan 2020 17:51:22 +0000

I have never been a big fan of online tracking. I believe that online tracking fundamentally breaks many of the precepts the web was built on, however as of today, for the first time ever, I am tracking the traffic on my own personal website.

To explain how I got here, let me tell you some of the main issues I've seen with online tracking.

Tracking is slow

Online trackers are breathtakingly slow. Using the internet with an ad-blocker has become common specifically for this reason, I think: people got tired of waiting for their webpages to load. The internet is a noticably nicer place with ad-blockers and privacy blockers on.

I don't think this is the fault of any one tracker or tool. It's generally the combination of many trackers that creates these problems.

This is a huge failing for all of us, and we only have ourselves to blame. The sheer number of trackers on most websites are actively breaking the internet, but we continue to add them to every webpage like they're candy. Like candy though, they create serious health issues for our websites, and we should treat them with more caution than we are.

Most trackers dig too deep

Online trackers can be an invasion of privacy, especially when taken to their logical extreme. Simple anonomous traffic info is one thing, but many companies believe that more data is always better, and this contributes to many of the other issues with online tracking. The more we track, the more unnecessary problems we create.

In the last couple of years I have worked for dozens of companes, and every single one of them has a Google Analytics account that they barely use. Google Analytics is an incredible tool, but let's just be honest here: the vast majority of people have no idea how to use all of that data. Most people care about which pages get the most traffic, and maybe some simple e-commerce and email signup metrics. That's it. We don't need to be collecting nearly as much information as we do.

Most trackers “phone home”

Your Google Analytics data is not truly private. Your Facebook tracker is not truly private. Both tools have major marketing companies behind them, and the more they're able to track about a person's online identity, the better they can advertise to them.

There's nothing inherently wrong with them doing this: they provide incredible tools for free, and as payment they harvest whatever information they need. That's just how it works. But most people don't seem to know that's how this works. I've heard many people rail against retargeted ads—ads that take your browsing history into account—and then they slap a Facebook pixel on their site, enabling the same behavior they reportedly dislike.

Despite the downsides though, data can be useful...

Which is why I now have a GoatCounter on my own website.

Up until today I had no idea if anyone was reading my blog or not, but I've always been curious. I've had my eyes peeled for a simple privacy aware tracker, and GoatCounter seems to fit the bill. A few things I like about it:

It's open source. Security through transparency, I call this. If nothing is hidden, surely there's nothing to hide, right?
Privacy aware. The creator of this tool has written articles on his views about online tracking, and his judgement seems sound.
It's fast, light, and asynchronous. No extra bloat.
It only tracks four metrics: page views, browser, rough screen size, and rough location. Nothing even remotely identifiable, and each metrics that are easy to use and apply to your project.
I own my own data. It is fully exportable and deletable at any time. No phoning home, no perpetually saved data. Full control.

This is an experiment, but a good one, I think. I'm excited to see if GoatCounter will be a tool I will continue to use for years to come.

One more thing about GoatCounter

A fun thing: you can also make your GoatCounter dashboard public. I don't know if I want to do that or not, but it would be a fun feature for specific projects, I think.

This post was also published at timothymiller.dev

Spend too much time on social media? Try RSS.

Timothy Miller — Sat, 18 Jan 2020 13:35:09 +0000

This post was originally published on timothymiller.dev

Here is a noteworthy thing: RSS, a decades old technology, is still alive and well. And after many years away, I am using it once again.

Inspired by Chris, I decided to download NetNewsWire and start with a clean slate. I also picked up Feedbin for syncing between devices. Best decision I’ve made all year.

RSS stands for Really Simple Syndication. It became very popular maybe 15 years ago, when Google Reader was a thing. Google Reader allowed you to follow your favorite blogs, and it would notify you whenever a new post appeared. The technology was very simple, and that was part of why it was so effective: anyone could understand it, anyone could use it, and by its very nature it only ever showed you what you specifically asked to see.

In our modern day of algorithms and media moguls deciding what we see and read on a day to day basis, it feels like a breath of fresh air.

RSS is not only liberating because I get to choose my own content; it also helps me to consume a far more diverse set of content. Most of my reading, for the last several years anyway, has come through social media. This is a problem, because social media likes to show us content that we like (or that makes us angry), because then we’ll spent more time on social media.

RSS doesn't give a darn. All content is equal in the mind of an RSS reader, and thus you see a wider range of content, even content you might disagree with (gasp). This is a very good thing: it broadens your horizons and exercises your mind.

If you haven’t already, I would encourage you to give RSS a try. If you want to join me on the RSS train, I have a few tips for you:

Find an app that is clean and as simple as possible. If the app isn't easy to use, you probably won’t use it, so make sure it’s nice. Spend a few dollars if you can afford it. I used Feedly for a while but it didn't really click, if your first choice doesn't work for you, try something else.
Subscribe to lots of feeds at first, even if they don’t look that interesting to you. Unsubscribing is easy if it isn't a good fit, but you won’t know if it fits until you read a few articles to get a feel for it.
Jump on your social media and if you see any links that interest you, check if the website has a feed. The more interesting things you can move to your reader, the less time you'll need to spend on social media, and the more actual reading you'll do.
If you do any reading online, some (or all) of the sites you regularly read probably have feeds. News networks, blogs, cooking sites, many businesses, most of them have feeds you can follow with RSS. Add your most commonly visited sites into your reader, and you'll get even more out of them.
You can even get RSS of YouTube channels, if, like me, you often avoid YouTube to avoid the algorithm pulling you in. RSS solves that! You can RSS your favorite channels, and cut out the algorithmic middle man.

In addition, here's a few websites with feeds that I enjoy to prime the pump:

Let me know what your favorites are below!

Killing Cmd-Tab. Your Path to Better Application Switching

Timothy Miller — Fri, 10 Jan 2020 15:38:40 +0000

This post was first published on timothymiller.dev

Last week we talked about creating our own keyboard shortcut "namespace" by creating a "Hyper" key. The hyper key doesn't actually exist on Macs, but we were able to fabricate it by using other modifiers that are supported by the OS.

This gave us a whole keyboard of shortcuts all to ourselves, and now we just have to figure out what to do with it.

One of my favorite uses for the Hyper key is what I call painless application switching. What do I mean by "painless"? Why is regular app switching "painful"? Let me explain.

There are essentially three ways to change applications built in to the Mac operating system: Cmd+Tab, Mission Control, and the Dock. Let's talk about each of them.

Cmd+Tab

This was the best screenshot I could get. It's surprisingly difficult!

Cmd-tab is a very finicky way to swap applications. It isn't consistent. The order of the applications changes all the time depending on what app you used most recently. This means that there are only two ways to use the tool: either remember what order you last used your apps at all times, so you can switch without looking. OR you can press cmd+tab, wait for a second, look at the UI, and then continue tabbing until you reach the desired application. Both of these methods use more of your brain than they should, and the second method is also slow and breaks you out of your flow.

Cmd+Tab works well if you're only using two applications. Beyond that, it breaks. I stopped using cmd+tab when I became a professional developer, because it wasn't a good enough tool for the job. I needed something better.

Mission Control

For many years I used Mission Control instead. Mission Control is okay, I would say it requires less thought than cmd+tab in general. But it too has a fatal flaw: it isn't keyboard driven. Mouse driven productivity tools can be helpful, but they're never going to have the pure speed that a keyboard driven solution has. Mission Control is useful in a pinch, but not a reliable productivity tool.

Dock

You all know the dock. For most of us it sits at the bottom of our screen, with all the currently running apps, and possibly others of our choosing. The dock has many virtues: it is more consistent than cmd+tab, and has many more actions available than either of the previous solutions. But again, it is not keyboard driven. It’s a good tool to have, but not fast or efficient when it comes to swapping back and forth between applications.

There Has to be A Better Way

Back to the Hyper key. Thanks to having this key available to us, we can now set up truly fast and predictable application switching. The concept is simple: take your most recently used apps, and assign memorable shortcuts to them using BetterTouchTool, or your application of choice.

For me, here's my short list of apps I swap between frequently, and my chosen shortcuts:

Firefox: hyper+f
Mail: hyper+m
Safari: hyper+s
Sublime Text: hyper+c
OmniFocus: hyper+o

The beauty of this approach is its simplicity. You can assign apps as you need them, and give them the most obvious shortcut you can think of. This makes the change to your process small, and the benefits substantial.

In BetterTouchTool, here's what that configuration looks like:

Click to enlarge.

Setting it up is pretty intuitive. Go to "keyboard shortcuts", add a new shortcut of your choosing, pick the "Launch Application" action, and choose the application you want to launch/switch to. Then rinse and repeat as needed.

One perk to doing this with BTT is that it will also launch the app if it isn't already open. Not only better app switching, but better app launching too.

There is much more we can do with the Hyper key and BTT, but this is one of my favorite uses. Next week we will talk about window management, which has been a thorn in my side for many years until recently.

Creating Worry-Free Keyboard Shortcuts with the "Hyper" Key

Timothy Miller — Fri, 03 Jan 2020 15:11:42 +0000

This post was first published on timothymiller.dev

Custom keyboard shortcuts have always been an itch I’ve felt unable to scratch.

I just never quite felt up to the task. I have seen and known people who have customized their computers to the point where they don’t even touch their mouse. Watching these people work is like watching a magician: windows moving of their own accord, applications launching automatically, whole build processes seemingly materializing out of thin air. Frankly it’s a very intimidating mental image, and one that I’ve never felt I could live up to.

So I didn't even try. I used a stock keyboard most of my life, and used a mouse whenever it was convenient. Sure I learned some keyboard shortcuts here and there, but for the most part, I just did what was obvious. I never really put in the time or effort to work smarter, instead opting to just work longer hours, and spend less time on social media than most people.

This was a decent strategy, but a suboptimal one. Anyone who spends more than a few hours a day on a computer should put in the effort to make their work experience better. It only makes sense: even if you only shave a few seconds off of your daily routine, it could save you hours or even days when compounded over years and years. Not only does it save you time, it also leaves your brain free to think about more important things, like your work.

You cannot afford to drive your computer sub-optimally for years. Put in the effort to make your computer work for you, and your output in the long term will be drastically higher. Like changing the oil in your car, this is work that just has to be done, or it will fuel the burn out of your engine. Trust me, I’ve been there done that. Changing your oil may be a hassle, but it’s better than the alternative.

Changing the oil

So, we know we need to give the computer skills a tune-up, but where do we start?

Let me tell you what has held me back for years on this front: I’ve always hesitated to change keyboard shortcuts that don’t work well for me. I’ve always been afraid to change anything, because I feel like I will overwrite an already existing shortcut: something that I use, or something I should be using.

This isn't just an idle worry; many times I have made up my mind to add my own custom shortcut, only to realize 15 minutes later that I overwrote something that I use all the time. For some reason it’s just very difficult for me to remember all the shortcuts that I use on a daily basis. They're all in muscle memory, but muscle memory doesn't help much with recall.

Now, you can use an application like KeyCue to tell you all the shortcuts on your system. Or you could scour your preferences to make sure you aren't missing anything. But both of these solutions are error prone and slow.

Here is an important idea: you need to be able to add shortcuts to your computer quickly and effortlessly, without thinking about it. Let me tell you why: keyboard shortcuts are the key to speeding up any workflow. But our brains aren't very good at figuring out the best way to implement or use them. The best keyboard shortcuts come to you while you're working, anytime you are needlessly repeating your actions, and in the back of your mind you think "there’s got to be a better way to do this". This is exactly the best time to create a keyboard shortcut, while it’s fresh in your mind. If your process for creating keyboard shortcuts isn't effortless, then you're going to ignore that intuition, and miss out on the biggest workflow wins you've ever seen.

But how do we make creating keyboard shortcuts effortless? How can we leave behind the problem of managing and overwriting existing shortcuts?

Enter the hyper key.

The Hyper Key

Modern OS X only supports four "modifier" keys, Command, Control, Option, and Shift. This is all we have to work with when creating keyboard shortcuts. Command is certainly the most-often used key for the OS, but the other modifier keys are used fairly frequently as well, for other purposes.

As we’ve discussed, it’s difficult to come up with many good key combinations with these four modifiers that haven’t already been taken by some system default, or an app on your system. However, as far as I know, there are no system defaults that use all four modifier keys at once. If we follow that logic, it stands to reason that we have an entire keyboard of potential shortcuts at our fingers if we simply use all four modifiers at once.

This doesn't 100% solve our problem, but it comes close. Only the most nimble fingered typist can press all those modifiers at the same time, in addition to whatever other key you use for your shortcut. Even if you can press all of those keys, it certainly will contort your hand and not give you a very comfortable experience, which is another barrier that we must overcome. So we need to find an easier way to press these modifiers.

Unfortunately this isn't something we can do with BetterTouchTool, as far as I can tell. However there is a very nice piece of free software that will allow us to do this, called Karabiner-Elements. If you don’t already have it, I would recommend downloading and installing it.

Karabiner is a very powerful and flexible piece of software, and has a whole list of different modifications you can make to the modifier keys on your machine. The only one I use, and the one I recommend, is the "change_caps_lock key" rule, which allows you to easily use the hyper key by holding down the caps lock key. There are plenty of other command modifications, but if you want the one I use, you can download it at this link (just click the "import" button after downloading Karabiner).

Once you've imported that ruleset, congratulations! You now have a Hyper key on your keyboard, ready to accept any custom shortcuts you send its way. This is the first step towards the freedom to truly customize your keyboard.

In the next article we will talk about just one of the improvements this allows us to make to our system: faster and more predictable application switching.

Let's Level Up with BetterTouchTool

Timothy Miller — Fri, 27 Dec 2019 22:42:05 +0000

BetterTouchTool is likely the first Mac productivity app I ever downloaded. A good friend of mine started using a Mac long before I did, and he introduced me to the wonders of BTT. Ever since my first Mac purchase, BTT has loyally sat on my computer, hiding in the background, only showing its face when asked and wanted. (If only all software could be so discrete cough Adobe cough)

In a word I would call BTT "polite software". It really does stay out of your way, and even if you use it every day, you can easily forget about it. That is certainly one of its strengths, but also perhaps a weakness. After all, I have used BTT for nearly a decade, and yet I’ve only used it for one thing: switching tabs.

My one use for BTT

I use and switch tabs a lot. In both my web browser and my code editor, I consistently have more than a dozen tabs open, and I switch between them frequently. I use my mouse quite a bit—more than I should—so I needed a way to switch tabs while using a mouse or a trackpad. BTT makes this very easy. I created four shortcuts for this:

Trackpad TipTap Left: ⇧⌘[
Trackpad TipTap Right: ⇧⌘]
Mouse Button 4: ⇧⌘[
Mouse Button 3: ⇧⌘]

That’s it. That is all I’ve done with BTT in nearly a decade. It may not seem like much, but those four shortcuts alone have apparently done me a lot of good over the years:

(Note that this is just over the last year. 63,000 tab switches in one year!)

There must be more

I've always been aware that BTT can do far more than these simple shortcuts. But honestly I am terrible at working to improve my working conditions.

I’ve always been this way: I willingly power through difficult work just to prove I can, without any thought towards how I could improve the process. Like a child playing in the mud a few feet from a beach, I tend to try to make the most of my current situation, rather than trying to change it. It doesn't matter how much change we’re talking about: I tend to focus on what I consider the "real" work while ignoring simple ways in which I could make my work/life easier.

But that changes today! I have spent the last couple of months digging into BetterTouchTool. The forums, the documentation, and the app itself, and let me be the first to tell you: this app is tremendously powerful. I had no idea just how much this app can do.

A small roadmap

This is the start of a series, where I will document many of the things I’ve discovered and found useful about BTT. Consider this article the introduction, and we’ll get down and dirty with the tool starting next week. Just to give you a taste of what is to come, here is a rough outline of some of the topics we will be discussing:

Creating worry-free keyboard shortcuts with the "hyper" key
Killing alt-tab: your path to better application switching.
BetterSnapTool: window management you can really sink your keys into.
The BTT way of expanding text.
Stop working for your Touchbar: it’s time to make it work for you.
Your mouse needs help: tweaks to make your mouse hand more useful.
...and more to come: this tool is so. dang. powerful.

(Links to be included as the articles are published)

If you have any interest in BetterTouchTool, follow along! This series will live here on this site, as well as my personal site. Feel free to join in on the conversation, throw your own ideas my way, and let's create a better, more efficient work environment for all of us.

Implementing Dark Mode from the Beginning

Timothy Miller — Thu, 26 Dec 2019 14:21:06 +0000

This post was originally published on timothymiller.dev

Dark mode. Possibly one of the most developer-flexy features of 2019, now available for viewing on my personal website.

Before I talk about Dark Mode, I need to talk about the shoulders I’m standing on: I first read about implementing Dark Mode on CSS-Tricks from the indomitable Robin Rendle.

I also read about designing for dark mode on Stuff & Nonsense (best name ever) by Andy Clarke.

Those two articles are the main inspiration for this article. With that said, let’s talk dark mode.

Why Does This Exist?

First of all, Dark Mode is the “common” name for a feature popularized* by Apple, more technically referred to as the “prefers color scheme” media query. Introduced in Media Queries Level 5, this media query allows people to specify if they prefer light backgrounds or dark backgrounds. And it allows us, as website creators, to define what our website looks like with a light or a dark background.

Dark Mode is intended for use as an accessibility feature, and it’s important to remember that. There are certainly other reasons to use it—I use it, and I have no disability that forces me to do so—but we need to remember that this is an important accessibility tool and we shouldn't hijack it for our own purposes. Dark mode should make our websites easier to browse at a lower contrast, it should not be a flashier, edgier, “darker” version of our website.

Implementation

Implementing “dark mode” is fairly simple, but it has far reaching implications all across your website. There are simple ways to do this,
such as cleverly using a blend mode, but there’s only one way to make sure your colors are accessible and look good, and that’s by developing your own theme, using your own hand-picked colors.

For me, my site only had a couple of colors, so this wasn't difficult. I took the blue that I’ve been using for links, and used that for my background color. Then I substantially lightened that same blue color, and used it for links.

Simple:

Next up, readability.

You may have noticed in the past, when visiting websites with dark backgrounds, that white text on a dark background is hard to read. It starts to look "fuzzy" after a while, where your eyes have trouble focusing on the text. This is generally just a contrast issue,
light text on a dark background generally appears higher contrast than the reverse. So you want to lower your contrast ratios in dark mode,
because again, this is an accessibility feature for people looking for lower contrast. It is a tricky line to walk though, and you need to make sure your contrast isn’t too low, so you’ll want to use a tool to help you. Lea Verou’s Contrast Ratio tool is perfect for this, or if you want more info, WebAim has a nice tool as well.

For accessibility sake you always want at least a 1:5 ratio for text. But for dark mode, you also don’t want that number to go too high, I would say somewhere between a 1:5 and a 1:15 is going to give you the best results. So I'll quickly run through the colors I have chosen:

/* dark mode colors: */
--background: #082840;
--text-color: #FFFFFF; /* contrast ratio: 15.13 */
--link-color-normal: #75BAED; /* contrast ratio: 7.2 */
--link-color-visited: #5EAFEA; /* contrast ratio: 6.33 */

Contrast-wise I'm looking good, although the plain text color is still a little high for me. I'll try an off-white:

--text-color: #E0E0E0; /* contrast ratio: 11.46;

I like it. The off-white looks a little “softer”, easier on the eyes.

Now implementing dark mode should involve more than just colors. I also made a few typographic changes for dark mode. Using a light-weight font makes a huge difference when it comes to dark mode, and I also added a tiny bit of word spacing, just to give things a little more breathing room.

Here’s what those changes look like:

Looks like pretty minor stuff, but it makes a huge difference, especially when reading long articles.

Varinception!

To wrap it all up, here’s how I structured my CSS variables. I like to be able to use real color names for my variables—I’ve never been a big fan of the --primary-color and --secondary-color school of thought—but I also wanted logical names for links, headings, copy fonts, etc. So I ended up using variables in variables, a concept I affectionately call varinception.

Here’s what that looks like:

:root {
    /* add all colors up front */
  --red: #C5004A;
  --darkred: #7F0036;
  --lightgray: #e0e0e0;
  --gray: #C0C0C0;
  --darkgray: #333;
  --navy: #17050F;
  --blue: #082840;
  --mid-blue: #5EAFEA;
  --light-blue: #75BAED;
  --white: #E0E0E0;

  /* varinception! */
  --text-color-normal: var(--darkgray);
  --bg-color-normal: var(--white);
  --link-color-normal: var(--blue);
  --link-color-visited: var(--navy);

  --header-weight: 700;
  --header-line-height: 1.5;
  --header-letter-spacing: 0;

  --copy-weight: 400;
  --copy-line-height: 1.5;
  --copy-word-spacing: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* I find this readable and easily maintainable */
    --text-color-normal: var(--white);
    --bg-color-normal: var(--blue);
    --link-color-normal: var(--light-blue);
    --link-color-visited: var(--mid-blue);

    --header-weight: 700;
    --header-line-height: 1.7;
    --header-letter-spacing: .025em;

    --copy-weight: 100;
    --copy-line-height: 1.7;
    --copy-word-spacing: .05em;
  }
}

Using these variables now requires very little code:

html,
body {
  color: var(--text-color-normal);
  background-color: var(--bg-color-normal);
}
h1,h2,h3,h4,h5,h6 {
  font-weight: var(--header-weight);
  line-height: var(--header-line-height);
  letter-spacing: var(--header-letter-spacing);
}
p {
  max-width: 37.5em;
  font-weight: var(--copy-weight);
  line-height: var(--copy-line-height);
  word-spacing: var(--copy-word-spacing);
}

And that's that! We now have a fully function and accessible dark theme for our website.