These little darling units allow for some really nice effects and typographical work. We'll explore what they are and a couple effects we can use them on. vh and vw The two basic units for viewport measurement are vh and vw which track like so: - vw: 1/100th 1% viewport width - vh: 1/100th 1% viewport height The units will remain constant. 1/100th of the viewport width will remain 1/100th regardless of how wide or narrow the viewport becomes. to make an element span half the screen horizontally we could do something like this: css hero { width: 50vw; }...
One of the most frustrating things of working with Variable Fonts is that we have no real way short of bugging the font creator to provide them for you to detect what values work for each scale, how they scale and what, if any, pre-defined values are available for each font. Axis Praxishttps://www.axis-praxis.org/ is a good starting point. It provides you with a way to test and play with Variable Fonts but you get only one experiment at a time. !Axis Praxis App on Firefox Nightly 61.0ahttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/axis-praxis Axis Praxis App on Firefox Nightly 61.0a Wakamai Fonduehttps://wakamaifondue.com/ funny way of saying...
CSS Shapes are an awesome way to make our designs look less like boxes inside boxes inside boxes. It let us wrap text around an image regardless of its shape. I've written before about shapes. The posts, in reverse chronological order: - Getting fancy: Shapes and maskshttps://publishing-project.rivendellweb.net/getting-fancy-shapes-masks-and-clip-paths/ - SVG Clip Path and Shapes. An interesting alternativehttps://publishing-project.rivendellweb.net/svg-clip-path-and-shapes-an-interesting-alternative/ - CSS shapes: an update and an expansionhttps://publishing-project.rivendellweb.net/css-shapes-an-update-and-an-expansion/ - CSS regions, exclusions, shapes and new publishing paradigmshttps://publishing-project.rivendellweb.net/css-regions-exclusions-shapes-and-new-publishing-paradigms/ There are news and new tools to use with shapes and that got me excited again so here we go again. : So What Are CSS Shapes?...
We've looked at a lot of server-side tricks to reduce the page load and improve users' experience when accessing our content. Now we'll look at client-side client hints and tools to optimize our content. Client side resource hints The basic way to preload a resource is to use the element with three attributes: - rel tells the browser the relationship between the current page and the resourced linked to - href gives the location of the resource to preload - as specifies the type of content being loaded. This is necessary for content prioritization, request matching, application of correct content...
One thing we as developers tend to forget is that not all web experiences are equal. One of the positive things I've found about AMP is that it reduces the fat of your web content by reducing the number of requests, reducing the amount of CSS that you can use and, mostly, by eliminating Javascript. That's good but I don't think we need a whole new platform or library to do that. We need to be smarter about how we pack and serve our content. This is not new, some of the tools and tricks we'll discuss in this section...
We've set up 1-pass encoding for all our target codecs and we have the resulting videos to compare. Do a 2-pass encoding changes file size and video quality? Hardware Specs - Model Name: MacBook Pro - OS Version: MacOS 10.13 High Sierra - Processor Name: Intel Core i7 - Processor Speed: 3.1 GHz - Number of Processors: 1 - Total Number of Cores: 4 - L2 Cache per Core: 256 KB - L3 Cache: 8 MB - Memory: 16 GB Codecs to test The idea is to test the following codecs, both old and new, to get a better idea...
Warning Message Date: 04/12/2018 The alliance for Open Media froze bitstream format on March 28, 2018 and announced version 1.0 of the codechttps://aomedia.org/the-alliance-for-open-media-kickstarts-video-innovation-era-with-av1-release/ on the same day. It is not clear if the bitstream work has actually been finalized or if this was done to present a "finished" product at NAB. VLC has support for AV1 playback but it doesn't work with the latest build of the encoder reference implementation. I have yet to play an AV1 file that I encoded or downloadded from third parties successfully in a release 3.0.1 on MacOS or nightly 041218 on MacOS. As of...
Hat Tip to : CSS Trickshttps://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/. An accordion is a UX element to group related items like Frequently asked questions. Most libraries give you a way to create accordions. But there is an easier way to accomplish the same goal, use the details and summary elements. The detailshttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/details element creates a disclosure widget where information is visible only in its "open" state. A summary or label can be provided using the element. The companion summaryhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary element specifies a summary, caption, or legend for a element's disclosure box. Clicking the element toggles the state of the parent element open and closed....
In reading Measuring the Hard-to-Measurehttps://csswizardry.com/2018/03/measuring-the-hard-to-measure/ I found his idea to track how many people are actually browsing your site without Javascript. It's this little image inside a noscript element. markup The idea behind it is that this will only trigger if Javascript is not enabled in the browser visiting the page and then you can use your analytics and server logs to track how many people got the no-script pixel beacon and customize your content accordingly.
If you've been following the CSS specifications you will see that several of the more recent ones have adopted start and end as values for the properties and I wondered why was this, wasn't it enough to work with top, bottom, left and right? It wasn't until I started working with and learning about writing modes that the reasoning became clear. when working from top to bottom and left to right then it's easier to think about the layout in the way we normally do, it also saves us from code duplication by eliminating code that we'd use to handle...
