A couple weeks ago, I got an email from a subscriber, Karen S:
By the way, your twitter is so good that I kind of expected you to be sending some sort of ‘top picks’ to your email subscribers.
I realized that I've been operating under a faulty assumption: that everyone on this newsletter also follows me on Twitter, and has seen the tips I share!
When Twitter was first released, I rememeber people called it a "microblogging platform". And that's kinda how I use it — if I learn a neat trick, and it's short enough to fit in a tweet, I share it on Twitter instead of my blog.
In this “New Years Edition” newsletter, I thought it'd be fun to share some of my Twitter tips from 2020! Even if you happen to follow me on Twitter, I bet some of these will be new to you (Twitter is so ephemeral!).
I've broken them down into categories, for easy browsing 😄 You'll find code snippets and other resources in the linked tweets.
As its name implies, box-shadow is only really useful when you have a box, and want to give it a shadow. But what if you have a shape that isn't a box?
CSS filters to the rescue! filter: drop-shadow works just like box-shadow, but it applies to the element's contents. If that element is a .png or a .gif, it'll add the shadow to the non-transparent pixels in the image!
filter: drop-shadow is just one of many awesome CSS filters! They can be helpful in all kinds of situations. I used one recently to create a neat hover animation, by rotating the hue to shift a button to a new color!
I've known that accessibility is important for a long time, but my experience this year with my nerve injury has really driven the point home.
Accessibility is hard, but there is definitely some low-hanging fruit. One of the best places to start is to make sure we aren't actively making HTML/CSS less accessible.
A lot of designers want us to remove the blue "focus" outlines when we click on things, since they aren't always so aesthetic. If we do that, though, we'll make it impossible for keyboard users to use our product!
This twitter thread dives into some of the ways we can solve this problem. There are some modern APIs that give us more options. It's possible to solve our problem and satisfy our design team!
Some other cool stuff:
It's common practice to add a dark overlay to a large hero image, but how dark should it be to ensure legible text? I share a link to a tool that can help you figure it out!
Do you know if folks with color-blindness or other visual disorders can use your products? Chrome now includes built-in visual emulation, so you can see your site/app as they do. It's eye-opening.
Even after so many years of doing web development, I still discover new stuff about HTML all the time!
I learned this year that HTML has native elements for progress bars. They're not quite as flexible as building a custom one with JS, but you get a lot of stuff for free with them (including good accessibility!)
I made a conscious decision a year or two ago to share what I learn on Twitter and my blog. It helps me deepen my understanding — in order to teach something, you really need to understand it! It's also a great way to "spread the wealth" and help others. I highly recommend this practice. The next time you learn something cool, share it online!
It's so easy to assume that everyone already knows everything you do, but it's so far from the truth. I bet you already know a bunch of neat tricks that others would find valuable!
I'd love to hear if any of the tricks I shared in this email were especially useful — anything in particular make you think "Oh I know exactly where I can use this!"? As always, you can reply to this email and let me know. I read every response 😄
All the best in the new year ✌ -Josh
PS. I actually tweeted quite a few more tips than this, but I didn't want it to be too overwhelming 😅 if you want to be a completionist, or if you're looking to kill some time, here are the searchqueries to find the complete set of tips and tricks.