Sponsored by
Frontend Masters
Amber Wilson has some CSS Tips for New Devs, like:
It’s not a good idea to fix shortcomings in your HTML with CSS. Fix your HTML first!
And…
… Read article “CSS Tips for New Devs”You can change CSS right in your browser’s DevTools (to open them, right-click the browser window and choose “inspect” or “inspect element”). The great thing is, none of the styles will be saved so you can experiment here! Another great thing about the DevTools is the “computed styles” tab, because this
SEO is often considered the snake oil of the web. How many times have you scrolled through attention-grabbing headlines on know how to improve your SEO? Everyone and their uncle seems to have some “magic” cure to land high in search results and turn impressions into conversions. Sifting through so much noise on the topic can cause us to miss true gems that might be right under our nose.
We’re going to look at one such gem in this article: … Read article “Using Structured Data to Enhance Search Engine Optimization”
The prototyping app Framer just launched the web version of their design tool and it looks pretty darn neat. I particularly love the design of the marketing site that explains how to use Framer and what sets it apart from other design tools. They have a ton of examples that you can pop open to explore as well, like this demo for how to make hover tooltips in the app:
I have to say that I love how the UI … Read article “Framer Web”
This is the second video in 3-video series on using Notion. In Part 1 we covered a lot of ground on what Notion is how it’s great for any team, and web development teams in particular.
In this video, we’ll take a look at the two absolute biggest things I do in Notion:
I was reading this article by Chris where he talks about block links — you know, like wrapping an entire card element inside an anchor — being a bad idea. It’s bad accessibility because of how it affects screen readers. And it’s bad UX because it prevents simple user tasks, like selecting text.
But maybe there’s something else at play. Maybe it’s less an issue with the pattern than the implementation of it. That led me to believe that this … Read article “Block Links: The Search for a Perfect Solution”
I’ll be the first to admit that I’m writing this article, in part, because it’s something I look up often and want to be able to find it next time. Formatting a date string that you get from an API in JavaScript can take many shapes — anything from loading all of Moment.js to have very finite control, or just using a couple of lines to update it. This article is not meant to be comprehensive, but aims to show … Read article “How to Convert a Date String into a Human-Readable Format”
A couple of interesting articles making the rounds:
Apple is well-known for the sleek animations on their product pages. For example, as you scroll down the page products may slide into view, MacBooks fold open and iPhones spin, all while showing off the hardware, demonstrating the software and telling interactive stories of how the products are used.… Read article “Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages”
When you use font-display: swap;, which Google Fonts does when you use the default &display=swap part of the URL , you’re already saying, “I’m cool with FOUT,” which is another way of saying web text is displayed right away, and when the web font is ready, “swap” to it.
There is already an async nature to what you are doing, so you might as well extend that async-ness to the rest of the font loading. Harry Roberts… Read article “The Fastest Google Fonts”
You know those times you get a horizontal scrollbar when accidentally placing an element off the right edge of the browser window? It might be a menu that slides in or the like. Sometimes we to overflow-x: hidden; on the body to fix that, but that can sometimes wreck stuff like position: sticky;.
Well, you know how if you place an element off the left edge of a browser window, it doesn’t do that? That’s “data loss” and just … Read article “A “new direction” in the struggle against rightward scrolling”
Take your JavaScript to the next level and find out what it’s fully capable of with the JavaScript path on Frontend Masters.
