Setting text inside a circle with CSS
I totally forgot that this is possible with the shape-outside CSS property. As Kerry Smyth shows in this demo, we can use that property twice to force text to float around two different paths, giving us shape on both sides (in this case, a circle). It’s neat that browser tools have come so far as to give us this really nice visual representation as we build it, too:
As Kerry mentions in this post, I’m excited for shape-inside which will let us create a shape to wrap the content within an element more naturally, too.
The Hero Generator
To get things started, Sarah Edo made a wonderful Hero Generator that lets you modify a ton of options like the gradient, the image, and the positioning of elements like this:
Once you’ve messed about with the options you can generate all the code at the flick of a switch. Super neat.
Oh, that reminds me: the CSS Grid Generator is super neat, too.
Not so long ago Sarah made another handy generator but this time all about CSS Grid: this one lets you draw columns and rows on a grid and then export the styles and markup.
In the description for that demo Sarah makes note of the CSS Grid Garden which is a tool I saw a long time ago but forgot to return to. It’s pretty dang fantastic as it walks you through how to build very simple grid layouts and first — until by the end you’re wielding space and time like a wizard.
We try and have your back at CSS-Tricks as well with our complete guide to grid and a collection of starter layouts.
generic-components is wondrous!
Not so long ago I remember ranting to a pal that the most annoying thing about third-party component libraries is the fact that they come bundled with styles. Because every time I want to just make sure I have a baseline understanding of the accessibility issues of, say, a tab component or an accordion.
Having all the styles bundled without a component is frustrating to me because I never want to keep something the same visually. And this will then involve me going down a rabbit hole of either replicating the accessibility features that component has or hacking the styles on top of it and just calling it a day.
Well! My prayers have been answered with the generic-components project. It’s a collection of web components with accessibility in mind and they’re super easy to style.
Here’s a look at styling and animating the progress element
See how in the progress of the video below there’s a fancy gradient from orange to pink? That’s what Geoff builds in this fun post about HTML video:
Geoff then walks us through how to grab the current time of the video and display it as a percentage in the progress HTML element. It’s nifty stuff.
Have you heard about Alpine.js?
If not, no fear! Hugo Di Francesco has written up his thoughts about this interesting new framework that’s “used like jQuery, written like Vue, and inspired by Tailwind CSS”. Here’s the super brief intro from Hugo:
Alpine.js is not designed to build SPAs, but rather enhance your templates with a little bit of JavaScript.
After thinking about it for all of two seconds, I love that it mirrors a lot of the Vue syntax and the fact that it is so much smaller than jQuery (only 23% the size!) makes it a pretty compelling tool to pick up the next time I need something like this.
Formik can help handle forms for us in React
In the docs for Formik it states that:
Formik is a small library that helps you with the 3 most annoying parts:
- Getting values in and out of form state
- Validation and error messages
- Handling form submission
But how should we go about getting started? Well, Adebiyi Adedotun has the scoop on this and why Formik is so gosh darn helpful. This is because when using React forms can get complicated real quick. There’s so much state to manage—errors, data, etc.—that it gets overwhelming to deal with.
Advice for writing a technical resume
Sarah has a bunch of thoughts about resumes, as she’s been on both sides of the table. If you’re looking for a new gig it might be a good idea to take a quick look at this list to make sure you’re not making some common mistakes.
I’d also quickly underline what Sarah mentions at the end of this post: everyone gets turned down for a job, no matter how smart and brilliant they are. It’s really hard though not to let the stress of finding a new gig get to you. And I would know! I just ended months and months of interviews and got turned down by an embarrassing number of folks to find myself with a new gig that I genuinely love.
You just have to keep trying and apply for every gig that comes your way, ignoring every devastating no that comes your way
Sponsor
WordPress.com has even more blocks and ways to build the perfect website
Seems like the WordPress.com team is shipping tons of new features for the already fantastic Block Editor lately. Six new blocks that connect with Eventbrite, Pinterest, Mapbox, and more just came out this week. Last week, they released a slick new way to build complete page layouts with block patterns. There’s even an event all about blocks that’s posted on WordPress.tv!
Point is, WordPress.com is constantly evolving and continues to be the gold standard for hosted sites. Give the new blocks a try by signing up. It’s free and takes just a few clicks to get going.
To cap things off this week, have you seen 98.css? I’ve seen it linked up six ways to Sunday so I bet you have, but just in case you haven’t it’s a real pleasure. to look through. It’s a CSS library emulating the look of Windows 98, which is an aesthetic I bet a lot of people have in their brain somewhere even if you weren’t an active user.
The bevel-and-emboss to “sink” <textarea>s and “rise” <button>s is so classic. I’m sure that the modern aesthetic of barely indicating if something is a button at all kinda helps us feel nostalgic for this. Now that’s a button!
What doesn’t feel right anymore is how tight everything is. That probably didn’t feel so tight when monitors were generally smaller and much less pixel dense.
The font used for more components is “ms_sans_serif.woff2”, which in following the links in the license from the repo, leads to MS Sans Serif which is Creative Commons Attribution-ShareAlike 👍.