Links from around the web
This week Cassie Evans walks us through how she made the animated logo on her ever-so-wonderful website. There’s a lot of super nifty notes here about SVG stroke animation and using Greensock, too.
I especially love the bouncy, fun jump at the end with the dot on the i! It kinda makes all the difference in the world, that one tiny animation.
Andy Bell and Heydon Pickering’s Every Layout is now available for purchase! In the book, Andy and Heydon walk through all the joys and difficulties of building layouts in CSS and if you’re just getting started with front-end development then it’s probably the best book you can get right now to get a sense of the fundamentals.
But! I think there’s a lot of useful stuff in here for more experienced folks, too. For example:
One thing we highly recommend is not including utility classes until you need them. You don’t want to send users any unused or redundant data. For this project, we maintain a helpers.css file and add utilities as we find ourselves reaching for them. If we find the text-align:center class isn’t taking effect, we must not have added it in the CSS yet — so we put it in our helpers.css file for present and future use.
I would go one step further and argue that we need to make sure that all of our CSS is actually being used because it’s pretty common in large codebases for there to be thousands and thousands of declarations that are effectively doing nothing.
The folks at Vox wrote about some of their recent work improving the accessibility of Chorus. In one section that caught my eye, Nicole Zhu writes about the work the team did to make sure that their form fields for newsletter sign ups were accessible for everyone:
We added required field indicators both visually and in the HTML with the
requiredattribute. We removed all use of HTML placeholder attributes, and added consistent form field labels. For people using assistive technology, we’ve improved the way newsletter signup forms are described. When you navigate to the start of the component, the specific newsletter title is announced in a more descriptive way, and the legal terms are read aloud before you can submit the form.
All of this is surprising in a number of ways. The first is that investing this much time on accessibility is simply wondrous. The second thing is that although this is a pretty lengthy post that details their work, it still probably only scratches the surface of everything that was done during these accessibility projects.
Earlier this week, Figma announced that they’re launching plugins so that developers and designers can extend the core set of features that come out of the box. It’s one of the major missing features that other design tools such as Sketch have had for a pretty long time already but now that they’re in my favorite design tool I think it’s worth digging into a few of them.
For example, the Unsplash plugin will allow you to select from a vast library of stock images which can be pretty handy when designing UI. All you have to do is install it, right click on the page, select Plugins > Unsplash and that’s it! No more aimless searching around for stock photography.
It works a little like this:
Another one of my favorite plugins that I’ve been needing for a good long while without realizing it is Autoflow. If you select two frames with this plugin it will simply draw a line between them. But this is handy because I’m often making wireframes and complex flows that require a bit of explanation and drawing all these arrows by hand can get tiresome quick. So that prevents me having to do all that work!
Content Reel is where things get real interesting though. It’s a plugin by Microsoft that allows us to quickly drop in realistic names, phone numbers, user names and email addresses. Here’s one example I made in a quick mockup of a Contacts screen:
I do a lot of clicking in this example to drive home the point but if you type
And this is only the beginning! There are a lot of other super nifty and interesting plugins out there but so far I’ve found that these are the few that I find myself constantly using in my day-to-day work.
From the Blog
Using Netlify Forms and Netlify Functions to Build an Email Sign-Up Widget
Matthew Ström has written a lovely piece about how to get started with serverless functions. He walks us through building a mailing list sign up form with 11ty, Netlify, and the emailing service Buttondown:
All in all, I only had to write about 50 lines of code to have a functional email newsletter sign-up form available on my website. I wrote it all in HTML, CSS, and JavaScript, without having to fret with the server side of the equation. The form handles spam, and my readers get a nice experience whether they have JavaScript enabled or not.
As Matthew notes, it’s completely wild that these services are free – at least at the base tiers. And so it kinda shows just how much power and how many wonderful tools that us front-end developers now have at our fingertips.
Weekly Platform News
Šime Vidas has the hot scoops of the week, from preventing image loading with the picture element to showcasing The Web We Want, which happens to be a nifty website that lets you send in features you’d like to see in browsers.
I’d also make a quick note here that in the latest version of Chrome there is now support for the backdrop-filter CSS property that we wrote about a while back. It lets us add filters to the background of an element without changing the text or elements inside, like this recreation of iOS notifications:
See how the background blurs slightly? That’s the backdrop-filter property at work! It makes this kinda neat frosted glass effect.
Making a Realistic Glass Effect with SVG
Speaking of posted glass, Dave Fitzgibbon has written up how to make a similar effect with SVG alone. He builds a demo that looks like this:
At the beginning of the post Dave argues that we should try to make writing SVG easy on ourselves, as it’s easy to get lost within the dense code:
SVG code is dense so I like to use two or three new lines to space things out. It makes the code easier to read and helps me see how different pieces are separated with less visual distraction. Oh, and use comments to mark where you are in the document, too. That can help organize your thoughts and document your findings.
I think this is a pretty darn good suggestion for whenever writing code: don’t over-optimize for machines to read your code, make sure you can read it first and foremost. And if that means adding a little space between things then that’s what you should probably do.
Treat yo self!
Fullstack Academy of Code
Want to become a software engineer, launch a start-up, or take the next step in your career? Fullstack Academy has your customized path to success.