Code Computerlove logo Front End Tools & Docs

The Bestest Base Font Size

Here's a great blog post on why it might not be a good idea to change the base font size to 62.5% just to make those rems easier to add. Adrian Roselli talks through the reason this isn't a good idea but also offers some really good advice on how to handle (and properly normalise) form fields.

I would also recommend giving his Under-engineered Textboxen article a read too. It goes into much more depth about how to normalise form fields in a simple and effective way without all the usual normalisation stuff that we often throw in our CSS.

Normalise form fields
textarea,
input {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

JavaScript Execution Contexts Visualised

Lydia Hallie has posted another great video in the amazingly simple-to-understand style of the previous one on the Callstack. This time you can learn how Execution Contexts work in JavaScript.

I'd say this one is a bit more complex and difficult to wrap your head around but with the nice transitions and gentle pace of the video Lydia breaks it down really nicely.

New Chrome Devtools Update!

There are some really nice new things in the latest Chrome Devtools Update that you should be able to play with today. These include:

  • New Autofill panel - The new Autofill panel lets you inspect the mapping between your form fields, predicted autofill values, and saved data.
  • Scroll-driven animations support in the Animations panel - A big one: the Animations panel now lets you inspect scroll-driven animations.
  • Improved CSS nesting support in Elements > Styles - The Elements > Styles tab improves CSS nesting support and now shows nested styles with indentation and in braces. CSS nesting is a way to group CSS rules together and make things less verbose and more structured.
  • Enhanced Performance panel - These include the ability to hide functions and their children in the flame chart and showing arrows from selected initiators to events they initiated
  • Lighthouse updated - The Lighthouse panel is now running version 11.6.0.
  • Plenty of other bits and pieces!

How to properly contain margins

Jake Archibald Tweeted this week about a little-known CSS property that allows you to clear floats (yes, those ancient things) and contain margins without needing any 'hacks', such as overflow: hidden;. Introducing:

Contain margins
.container {
   display: flow-root;
}

The benefit of flow-root over using the old overflow method is that it doesn't hide your focus indicator! Observe:

Example of flow-root not hiding focus indicators over using overflow: hidden.

Jhey's Spot

This week, to make up for no Jhey content last week I have two things for you! What a lucky day. Firstly, a lovely example of using CSS scroll-driven animations to create a simple, but effective 3D image gallery:

See the Pen CSS Scroll-Driven Image Carousel by Jhey (@jh3y) on CodePen.

Note that this one has a smattering of JS too for some of the options and to add a bit more polish but the main animations all come from CSS. I love how you can simply convert it to vertical scroll too using the options.

Also from Jhey: a little tip using Chrome Devtools that allows you to copy the changes you made so you can use them in your actual CSS! If you make any tweaks to CSS properties you can copy directly from the Styles panel but it can be difficult to know what you've changed after a while. You can use the command pallet to show a diff-style panel of changes you've made to the CSS write inside devtools!

You might not need jQuery

Yes, yes, I know. We know you probably don't need or use jQuery these days but it had its place on the web for a long time and made JS development so much easier until browsers decided to catch up and implement some of the features the library gave you. Indeed, jQuery is the reason that some of the most handy DOM manipulations are available in native JS now!

You May Not Need jQuery is a site dedicated to showing you all the ways you can do the things that jQuery was known for, natively. Not only is it a good resource for those that grew up knowing jQuery more than vanilla JS, but it's also a great place to learn how to use some of the newest features in vanilla JS (and some you may not even know are there!).

Example of jQuery vs Vanilla JS
$(el).clone(); => el.cloneNode(true);


$(el).closest(sel); => el.closest(sel);


$.contains(el, child); => node.contains(anotherNode);


$("div:contains('my text')");
// Becomes
[...document.querySelectorAll('div')].filter((el) =>
  el.textContent.includes('my text')
);

And now a bit of fun: uwu

I'm too old to get the meme but here's something quite fun: if you type ?uwu=true after the URL on some of your favourite dev-related websites you may get a bit of a surprise!

Here's a list of some of the ones I've seen people post about:

These are all done by Sawaratsuki on Twitter and they look so good! If you want one doing I think you can ask and if they have time you might just get one! There are also some for some sites that haven't implemented them (yet), but might do in the future.

My projects on the go

  • Front End tools upgrade - need to get the tools working properly on the live site
  • Front End challenges website
  • API flattener tool needs upgrading
  • Keeping the starters upgraded!