WebP provides smaller files and better quality than equivalent JPG or PNG files. The problem is that not all browser support the WebP format, only Chromium-based browsers like Chrome, Opera, plus Edge and Firefox according to caniuse.comhttps://caniuse.com/feat=webp. There is no easy way to support browsers that support WebP and those that don't on the same page without modifying the HTML on the pages. Another option is to let the server replace images with their WebP versions for those browsers that support it. By configuring the server to replace the images, where supported, without having to change the HTML on your...
The problem Statement: I want the server to deliver the right document variant based on the browser's language preferences. Browsers send an Accept-Language header which lists their preferred languages. Apache Before we configure our language negotiation parameters we need to set up things on the server. You can set this on the default httpd.conf configuration file meaning that it'll work in all virtual hosts or you can set in in each virtual host configuration meaning it'll only work for that virtual host The two items are: - LanguagePriority allows you the language precedence during content negotiation. If more than one...
One thing that has always bugged me about WordPress is that it has a GUI only administrator interface and it made it more cumbersome than it needs to be, even for simple publishing workflows like mine where I copy the Markdown text, spell check it, preview it, fix any problems in the preview and scheduled publication. WordPress CLI wp-cli adds some flexibility for command line operations for WordPress installations. It also allows you to manage remote installations of WordPress. It's not a perfect solution but it beats having to do everything through the GUI hands down. Installing As a Mac...
Streams are a very interesting concept and a new set of tools for the web. The idea is that we can read and write, depending on the type of stream we're using, chunks of content... either write them to a location or read them from a location. This will improve performance because we can start showing things to the user before it has completed loading. The example below how we can asynchronously download and display content to the user. The problem with this, if you can call it that, is that fetch will wait to download the entire file before...
Responsive images seek to answer the following question: How can we incorporate images in responsive layouts that are appropriate for a device and its resolution without loading unnecessarily large images for mobile devices? It is not always intuitive and it has taken me years to get my head wrapped around the responsive images concepts and how to build the images. The idea is that we have images sized for each type of device and we let the browser decide which one is most appropriate for the device, resolution and screen size combination like the image below shows. !How responsive images...
I've been working on a project where I want to convey the idea of pages spread out on a table or post-it notes pasted randomly against a wall or another surface. It took me a while to reason through it but I ended happy with the result. It also shows the interaction between stylesheets and inline styles generated with JavaScript. The HTML for the project is fairly simple. It doesn't matter what's inside the story elements... for the purpose of the movement we only care about the story elements. html The first block of CSS provides styles for the container,...
Lazy loading allows you to delay loading images until the user actually scrolls the page to where the image or video is visible to the user. This post will describe why lazy loading is important, one way to lazy load images and videos and alternatives for browsers that don't support intersection observers. > This is a more polished version of Intersection Observers: Making it easier to lazy load contenthttps://publishing-project.rivendellweb.net/intersection-observers-making-it-easier-to-lazy-load-content/ Why is lazyloading important Images are the largest part of a web page, whether site or app. The median number of images requested per page, according to the HTTP Archive is...
I posted this as an answer to this questionhttps://www.quora.com/What-are-the-best-practices-for-optimizing-resources-JavaScript-CSS-images-used-by-an-HTML-page/ in Quora and I thought I would post it here and expand on it a little bit with things I thought about after I wrote the answer. This is not an exhaustive list of performance best practices. It's what I use and how I use them. You may have others and some of these may not apply to you. I'd love to hear what works for you... you can contact me via Twitter elrond25https://twitter.com/elrond25. The question: What are the best practices for optimizing resources JavaScript, CSS, images used by an HTML...
When working with Javascript we can add default values to our function parameters so they will work if we forget to pass them when declaring the function. In this post, we'll discuss why we should and how to give default values to our function parameters. Why give defaults to function parameters The simplest reason, for me, is that I tend to forget to do so when using the function I just declared. Take the function below that, in theory, should just fetch the file at the given URL and display it inside the body of the page js async function...
Most of the time, starting a Node project involves a lot of typing, copying and pasting and typing data into your repository. This post lists some ways to automate the process in the command line and via scripts. Thanks to Phil Nashhttps://twitter.com/philnash and Tienery Cyrenhttps://twitter.com/bitandbang for the information. : How to start any new Node.js project:$ npx license mit > LICENSE$ npx gitignore node$ npx covgen YOUREMAILADDRESS$ npm init -yYou're ready to start coding.— Tierney Cyren @bitandbang January 7, 2019 npx license mit uses the license packagehttps://www.npmjs.com/package/license to download a license of your choice for the project, in this case,...
