Ready for a little inside baseball stuff? This is the first newsletter for CSS-Tricks that we’re writing from inside CSS-Tricks website itself. There are a number of reasons for that. A major one is that it’s nice to have the content that we create be written in a place that’s primarily a CMS, and then to take that content and syndicate it elsewhere. In this case, written in the CMS, syndicated to email subscribers, and also to our own website in a clean way.
Before this, we authored our emails directly in MailChimp. MailChimp is great, even for that, but it meant that the newsletter content was primarily an email and not really set up to syndicate in other ways. In order to even get it into our own CMS database, we copy and
Now, we’re authoring this email right in WordPress, using the new Gutenberg editor, and sending it out via email through MailChimp and MailChimp’s ability to send email it sucks in via RSS.
We’ll write more about this soon, but for now, know that there might be a few kinks along the way. (Hopefully not.)
? Robin’s Corner
This week there have been a number of super interesting things I’ve stumbled upon. First up there’s this neat trick from Andy Bell where if you set the height and width of your SVG icons to 1em then it will scale proportionally to the text when you increase its font-size.
Here’s an example of that at work in Andy’s demo:
Pretty neat huh? And although this trick seems obvious in hindsight, I’m sure I’ll be using it in a million different projects in the future. I also wonder what else we could use this font-size trick on that might be helpful too…
Also this week I was reading a lot about Mu-An Chiou’s work at GitHub to make menus work in a progressively enhanced way so that you don’t need JavaScript to open/close things. Marcus Herrmann explained this approach and shows how it uses the details and summary elements.
Chris wrote about these elements last year and showed how they’re by far the easiest way to make an accordion. It works like this in HTML:
<details>
<summary>What is the population of New Orleans?</summary>
According to 2010 Census Bureau estimates, New Orleans' population is made up of approximately 343,829 residents.
</details>
And here’s one last thing that I read this week that I thought was super interesting: Violet Peña walks through how to use CSS Grid the right way:
“Learning” CSS Grid requires developing working knowledge of many new properties that don’t just describe one aspect of appearance or behavior, but feed into a completely new layout system. This system includes around 18 properties which use paradigms and syntax rarely (or never) seen anywhere else in the CSS spec.
This means that CSS Grid has a pretty high skill floor — a developer needs to learn and internalize lots of new information in order to be effective with it. Once you’re above that skill floor, Grid is an amazing ally in layout creation. Below that skill floor, Grid is an encumbrance. You wonder why you’re bothering to use it at all, since it seems to require lots of additional work for little reward.
She then walks us through three ways to make working with Grid a lot easier:
- name your grid columns/rows for easy re-use
- use the fr flexible unit for setting grid column/row sizes
- don’t use a grid system
I love this advice but #3 is certainly the most challenging bit of advice to read here. I think at least on the giant kind of projects I’ve worked on in the past we’ve desperately needed a grid system but when it comes to smaller projects then I most certainly agree. Grid systems can definitely be overkill at the beginning of a small project.
? Hot Links from This Week
- Just in case you didn’t know, there are quite a few services that allow you to do
cross browser testing right within your favorite browser. - Ben Evan’s Pure CSS Still Life will do a little mind blowin’ if you haven’t gotten your share today.
? From the Blog
Social Cards as a Service
It’s such a cool idea to essentially create a design in HTML/CSS that is the perfect size for social media, then turn it into a JPG via a headless browser programatically. It’s getting pretty easy to do thanks to serverless functions.
Writing Animations That Bring Your Site to Life
Prasanjit Singh writes in to help us all make better animations that bring our websites to life. This is the little application that he walks us through building:
Prasanjit also gives a couple of reasons why animations are so important to our work:
- Animations enhance the way users interact with an interface. For example, smart animations can reduce cognitive load by giving users better context between page transitions.
- They can provide clear cues to users, like where we want them to focus attention.
- Animations serve as another design pattern in and of themselves, helping users to get emotionally attached to and engage with the interface.
- Another benefit of using animations is that they can create a perception that a site or app loads faster than it actually does.
I think that last point about animations impacting perceived performance is my favorite reason for using them. A few weeks ago I was working on a problem where a user would click a button and then we’d have to wait for the server to get back with data. The issue? It was horribly slow. So what we did was make an animation that made it feel as if we’d already processed that data and it immediately felt so much better.
Perceived performance is certainly a big deal indeed.
What Hooks Mean for Vue
Sarah Drasner looks into how Hooks work with Vue, as even though they were recently introduced in React there’s also a proof of concept of it working in Vue as well. Sarah argues why Hooks are a useful concept across the JavaScript ecosystem:
Hooks offer a more explicit way to think of reusable patterns — one that avoids rewrites to the components themselves and allows disparate pieces of the stateful logic to seamlessly work together.
Sarah has also built a couple of demos to show how hooks work and how they can pass values between one another which is super nifty:
Animate a Blob of Text with SVG and Text Clipping
Zach Saucier has written this outstanding tutorial about how to make an animation where several blobs appear on screen to reveal the text sitting on top, just like this:
I really like this effect and it’s super neat to see how we can use text to mask these SVG blogs underneath. But I think I prefer the more subtle and cute effect that Zach shows at the end where these SVG shapes just slowly rotate behind the text instead:
Either way, this is a super cool technique that I can’t wait to use on a side project soon. Using animated SVG elements to make typography stand out is so neat!
