Home / Newsletters /

#187

Ever heard of the scroll-margin-top CSS property?

Neither had I! Perhaps its most useful ability is for when you have a fixed header on a website and want to use jump links. This way you can nudge the content so that it’s always visible, like this:

There’s been a bunch of times in the past when I’ve clicked on a link on a website and the fixed header has messed with the new scroll position so thankfully this solves that problem entirely!

Also, there’s an interesting new feature coming in Chrome called Text fragments that let you link to any highlighted text on a page. (Note how it scrolls you to the middle of the page… interesting eh?)

data-*

Just the other day we published our complete guide to data attributes. They look like this, if you haven’t seen them before:

<div data-size="large"></div>
<div data-style="expanded"></div>
<aside data-some-long-attribute-name><aside>

They’re effectively custom HTML attributes that we can make up entirely on our own and they’re handy for a bunch of reasons. One way I’ve used them in the past is for props in React. So, instead of us toggling a class like is-open, we toggle the data-open attribute instead, which can make things a little bit nicer to read.

Theconsole.log()function…

…in JavaScript is perhaps one of the best tools that we have at our disposal for finding errors, bugs, and other potential issues with our code. In this guide to console commands, Travis Almand digs into all the various ways we can use them to our benefit.

One interesting note from this piece: I didn’t know that it was possible to style the console, which might be useful in some cases.

CSS Zen Garden would have been even cooler if CSS grid was around

The design explorations above here are by Ahmad Shadeed where he shows how much is possible by keeping the HTML of a design the same but changing the styles. Most of the time this is unnecessary but I’ve found there’s been some cases in legacy codebases where I’ve been unable to change the markup and so this is wonderful!

It shows just how much CSS has progressed in recent years, too. And this certainly reminds me of the CSS Zen Garden that shows how much design variety is possible by keeping the HTML the same.

This nifty Figma plugin…

…by the type foundry type.today looks great for looking through their library of fonts and shows just how easy it all is. I think this is really exciting stuff because I feel that buying fonts and experimenting with a design should never leave your design tool of choice.

I especially like that you can test these fonts for free before buying them as well. I hope to see a lot of stuff like this in more design tools soon because it’s just so darn useful.

The math behind color accessibility

Here’s a piece by Stacie Arellano about understanding web accessibility color contrast guidelines and ratios that I found interesting. She digs into the WCAG thinking behind those ratios you might’ve seen before and how they work:

The guidelines were created for anyone using a standard browser, with no additional assistive technology. The contrast ratios that the WCAG suggests were based initially on earlier contrast standards and adjusted to accommodate newer display technologies, like antialiased text, so content would be readable by people with a variety of visual or cognitive difficulties, whether it be due to age, sickness, or other losses of visual acuity.

Here’s a great website that will help you test the accessibility of your color choices that I’d highly recommend for the next time you need it:

HTML & CSS are still magic

Stephanie Stimac wrote this heartwarming piece the other day about teaching students the basics of HTML and CSS. She shows them all that they can build websites, too:

[…] the response from that class of high school students delighted me and grounded me in a way I haven’t experienced before. What I view as a simple code was absolute magic to them. And for all of us who code, I think we forget it is magic. Computational magic but still magic. HTML and CSS are magic.

I couldn’t agree more! And it’s worth reminding ourselves of that fact as often as we can.

Cloudways

Now quit worrying about server management issues and focus on building awesome websites. Cloudways offers you the flexibility and choice of five cloud providers, free SSL and your choice of PHP application for your peace of mind.

Looking to Level Up?

Frontend Masters is the best place to do it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, from Testing to Security… and much, more more. There’s something for everyone at any skill level.