One of the things you can do with CSS is to layer content and have the layers perform different tasks. Some of these techniques are inherited from and used together with, SVG and others are specific to CSS. CSS Background Images The first way I learned to layer content was using an image as the lowest item on the stack and then position text or other images on top of our 'base layer'. html Santiago, Chile The background image has to have a size, in this case, I chose to use viewport unitshttps://alligator.io/css/viewport-units/ to make sure that it'll work the...
As I learn how to be more flexible in working with art direction for web content, I'm documenting some of the cool things I've learned. Because I'm using flexbox, I'm relying on CSS Trick's A Complete Guide to Flexboxhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/ to reference the Flexbox aspects fo the elements. Figures as flex containers If we make a figurehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure into a flex container we gain a lot of flexibility in how we place captions around the image. This is the image that we'll play with. html Pablo Neruda Facts Pablo Neruda, original name Neftalí Ricardo Reyes Basoalto, born July 12, 1904, Parral, Chile...
For a long time I've seen icons attached to links to help users figure out what type of links they are. This was particularly important in the days of plugins because users haad to have the right plugins to view different types of content. Taking the following HTML fragment, html Stats We can use the following css to add an icon after the string Stats: css data-icon:after { font-family: icons; content: attrdata-icon; speak: none; } For modern browsers, we can use attribute selectors to change add the icon as a background image and then move it to where we need...
The idea is that using this tab we can check how our page loading and troubleshoot loading issues as they happen with a visual representation of the loading process 1. Make sure that you are running in Incognito Mode to prevent extensions from causing any problems 2. Open DevTools Command + Option + I on Macintosh or Control + Shift + I or F12 on Windows 3. Go to the Network tab The image below shows the result of running the Network tab in Chrome 78 Canary when the article was written. !Network Panel Showing Results of a runhttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/devtools-network-run The...
Material Designhttps://material.io/ is Google's Design System. It started as a Google-only system that you bought into the wholesale design system with little to no chance of customizing it. The new iteration of Material Design does several things that the original did not do well or at all, including framework integrations. The "new Material" also allows for easier customization and provides SASS/SCSS mixins and functions to do so. In this post, we'll look at the typography options available to Material Design, both standard and customized. Setting up There are two ways to set up a Material Design project. We'll talk about...
Developers who, like me, like Google Fonts have been frustrated by their not having Variable Fonts available. That has changed in the last few weeks. Google has released an experimental API, available at fonts.googleapis.com/css2. The API has a limited selection of fonts available and the syntax takes a little while to get used to it. Google font developers make the following assertion: This version of the API isn’t completely stable. It’s best for experimental work while we document the new endpoint. Syntax and Limitations The new API announced in this codepenhttps://codepen.io/nlwilliams/full/JjPJewp shows examples of how to use the new API...
Javascript does a lot of things decently enough but one of its biggest drawbacks is that it's single-threaded. All scripts that run on a page or application run in the same execution context. Web Workers provide one way to work around Javascript's single-threaded execution model. The idea is that we have two scripts. According to Surmahttps://dassur.ma/things/when-workers/: > Web Workers, also called “Dedicated Workers”, are JavaScript’s take on threads. JavaScript engines have been built with the assumption that there is a single thread, and consequently there is no concurrent access JavaScript object memory, which absolves the need for any synchronization mechanism....
Based on Andreas Bovens' article Responsive Images: Use Cases and Documented Code Snippets to Get You Startedhttps://dev.opera.com/articles/responsive-/images/ we will look at four use cases for responsive images: - Change image sizes based on responsive design rules the sizes use case - Optimize for high-dpi screens the dpi use case - Serve images in different image formats to browsers that support them the mime use case - Serve different art depending on certain contextual factors the art direction use case We'll look at some example native responsive images and how they apply to these use cases. Viewport Size Based The most...
In working through automating image compression and responsive image generation I wanted to add more areas to the conversation about responsive images without cluttering the post about automation. How should we get our source images? The first thing to consider is what should be the ideal format for our source images. The Gulp task with manipulates the size of the images so it pays to have the largest possible image available to process. It's always better to shrink an image than it is to enlarge it, besides you will compress the images later anyways. There are ways to use Machine...
Since we are unlikely to compress images and less likely to create the individual images necessary to do a good job with responsive images, we have to leverage technologies to do it for us. I use Gulp to build sites so I've incorporated image processing into my development and production pipeline. There are two tasks for working with images in Gulp. I will cover them separately and explain the decisions I've made about them. Install and configure the plugins All these plugins are installed with Node. Like we do in all Node projects we first initialize an empty package.json. The...
