Performance is one of the hottest topics and, in my experience, one of the hardest to get right. There are tools that will help developers measure and improve a site's performance. The idea behind Lighthouse is that by running it against your site, either staging or production periodically you can get a good overview of your site's performance in the categories that lighthouse measures. It will give you a baseline to measure against, find areas to improve on and track any regression that may have snuck by your testing. Lighthouse Lighthouse is an automated tool for improving the quality of...
While at the Chrome Dev Summithttps://developer.chrome.com/devsummit/ I learned several things that made me really happy, one of them is about video: You can play AV1https://aomedia.org/av1-features/get-started/video in browsers currently Chrome, Opera, Firefox, and Edge using the video element. Firefox and Bitmovin have had a demo for AV1 playbackhttps://demo.bitmovin.com/public/firefox/av1/ for a while but it's hardcoded to play in Firefox nightly so it wasn't a good way to test playback capabilities. The supported browsers each come with caveats. - As of this writing, AV1 supports only works in Firefox Nightly - Must enable media.av1.enabled in about:config - Works in Chrome 70 and newer...
During Chrome Dev Summit I learned an interesting trick when working with variable fonts. Rather than use the default values for the font properties you need to specify the boundaries upper and lower for each font property: weight, width, and style. Using Roboto and its values as an example, the @font-face declaration looks like this css @font-face: Roboto; src: url'../../fonts/Roboto-min-VF.woff' format'woff' url'../../fonts/Roboto-min-VF.woff2' format'woff2'; font-weight: 250 900; font-width: 75 100; font-style: -12 0; We can then use the attributes as we would normally do but using the values in the range we defined in the declaration: css .semibold { font-weight: 575.25;...
For most of my web work, I use Font Face Observerhttps://fontfaceobserver.com to handle checking that the fonts have loaded. Using the following @fontface declarations: scss @font-face { font-family: 'Roboto'; src: url'../../fonts/Roboto-min-VF.woff2' format'woff2'; font-weight: normal; font-style: normal; font-display: swap; } I can use the following script to make sure the font loaded and provide a fallback when it doesn't. Assuming that fontfaceobserver.js is already loaded I use the following script to add classes based on whether the font loaded js const roboto = new FontFaceObserver'Roboto'; let html = document.documentElement; html.classList.add'fonts-loading'; Promise.all roboto.load, .then => { html.classList.remove'fonts-loading'; html.classList.add'fonts-loaded'; console.log'All fonts have loaded.';...
Using the default fonts for the operating system saves bandwidth we don't have to download the font since it's already installed in the system and improves performance fewer assets to download but it requires testing in all the platforms you're targetting. These are not the browsers you're targetting, those may have their own issues when working with system fonts particularly Chrome on Mac that needs a special declaration for the system font. The browser looks for each successive font and will use the first font that it finds either on the system or defined in CSS. The font-family declaration looks...
For most of the web's content whitespace is not significant. Browsers will collapse multiple spaces or tabs into a single space and will only insert line breaks when they encounter the element or at the end of a paragraph either with the closing tag or when they encounter a new element. But there are times when whitespace is significant. Take poetry... depending on the type of poem you're typesetting you may find different indentations and characters in different columns and things like that A summary of the ways to handle white space is shown below taken from CSS Trickshttps://css-tricks.com/almanac/properties/w/whitespace/ |...
I've been become more comfortable playing with CSS features that are beyond just making sure that typography works well in all form factors. Rotate On Hover One of the things that I like is the subtle and fun rotation that Smashing Magazine does with the author's photo when you first visit an article and how it moves to a fully vertical position when you hover over the image. I've always thought that that's backward and that it should move to the diagonal position when you hover over the image… so let's try to do it that way. The default state...
I was working on typesetting poems when I thought what it would take to center a piece of content both vertically and horizontally? For image and smaller blocks of text like poems, I choose to work with flexboxhttps://www.w3.org/TR/css-flexbox-1/ as it provides, in my opinion, the simplest way to center content on both axes without scripting. The code looks like this: css .container { height: 100vh; display: flex; flex-flow: column; justify-content: center; align-items: center; } Some caveats: - You must set an explicit height for the container, in this case, 100vh. Otherwise, there is no height to center to - Because...
As I was working on my last post about paged media I discovered one thing we can do to make footnotes for the web a little more user-friendly. Paged Media has a way to hide the text of the footnote from being displayed on the page... wouldn't it be nice to do that with web content as well without having to change the document we're working with? CSS on its own will take you part of the way there... so let's explore how can Javascript help. What we want to accomplish: 1. Hide all the elements with class footnotes 2....
One thing that the web is sorely lacking is the ability to create print-ready content from our web pages. CSS provides specifications for paged media but the support in browsers leaves a lot to be desired, forcing people into tools that accomplish the goals of creating high-quality print content. In many instances, I will cut pieces of the code where they are not relevant. You can find the full stylesheet along with the resulting PDF from the Github Repohttps://github.com/caraya/new-paged-media One thing we need to remember is that for this particular project we're doing everything in the command line so download...
