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...
Differential loading is the technique where you load different content for different browsers that support different sets of Javascript features and APIs. html This works awesome with modern browsers that understand type="module" and that will happily ignore nomodule. The problem is that we can't make that assumption safely. Some browsers will download the nomodule script twice and others that will download both scripts, even when they will only execute one of them. Jeremy Wagner's article A Less Risky Differential Serving Patternhttps://jeremy.codes/blog/a-less-risky-differential-serving-pattern/ proposes the following hack to make sure that all browsers will load a single version of the code for...
In working on another idea how to allow users to select their preferred reading configuration on a web page I came across another issue: How do we allow users to save their preferences so they don't have to redo their work every time they visit the content. I remembered an old project that I worked on to test the same hypothesis from a different point of view. Rather than use that project, I've created the full project in Githubhttps://caraya.github.io/localstorage-settings-demo/. I will only highlight details that I think are important. The idea is that after the user changes the settings, the...
Wgethttps://www.gnu.org/software/wget/ is the GNU/FSF alternative to CURLhttps://curl.haxx.se/ used to retrieve files from the network via command line. Getting a single file is easy but trying to get an entire directory it's not so easy. I've used a similar version to this command in the past but it turned into huge downloads that would take forever to complete. I found this version in Guy Rutenberg's sitehttps://www.guyrutenberg.com/2014/05/02/make-offline-mirror-of-a-site-using-wget/ and liked it after I used it to mirror a site. The command is: bash wget --mirror \ --convert-links \ --adjust-extension \ --page-requisites --no-parent http://example.org These are flags we're using: - \--mirror – Mirrors a...
I was browsing through Brad Neuberg's bloghttp://codinginparadise.org/ I came across stretchtext.jshttp://codinginparadise.org/ebooks/html/blog/stretchtext.html and I found it interesting enough to take a deeper look. Stretchtext is a Javascript implementation of a hypertext going back to the work of Ted Nelson in 1967. Taken from Neuberg's article: > Stretchtext consists of ordinary continuous text which can be "stretched", or made longer and more detailed. By pointing at specific areas and pulling the throttle in the "magnify" direction, the reader may obtain greater detail on a specific subject, or area of the text. The text stretches, becoming longer, with replacement phrases, new details, and...
I've spent a lot of time trying to figure out if Prism.js will run inside a worker to highlight syntax on the web page. The answer is sort of. Given the way that Prism uses web workers, it still would not work in AMP pages. You still need to call this snippet of Javascript in the page that needs syntax highlighting. js Prism.highlightAlltrue, function { console.log'Syntax highlight completed'; }; Furthermore, the async functionality of Prism.js is off by default. The Prism.js FAQ explains whyhttps://prismjs.com/faq.htmlwhy-is-asynchronous-highlighting-disabled-by-default: > \...\\Furthermore, using Web Workers is actually slower than synchronously highlighting, due to the overhead of...
I've always loved the work that Andy Clarke has done over the years with art direction on the web. I came across another of his ideas in Inspired Design Decisions For The Web 3 that was part of my Smashing Magazines membership. In it, he talks about how we can make the same basic layout more interesting for our readers without having too many additional libraries. It doesn't have to be boring For ages, we've blamed CSS frameworks for the sameness of our designs. We think that Bootstrap or Foundation are what make our designs bland and repetitive. I haven't...
This post will look at technologies allow us to create fully encapsulated and accessible web content. - Custom Elements allows developers to create specialized elements for the web - Shadow DOM gives us encapsulated styles that won't bleed into the parent document - Templates provide inert chunks of HTML content that we can instantiate after creation - Custom Properties provides a way to create reusable styles that will work through the shadow DOM Reviewing Custom elements The idea behind custom elements is to allow developers to create their valid HTML elements that encapsulate HTML content, CSS styles and Javascript behavior...
When we print web pages we see links as underlined text either black or, if we printed in a color printer, blue or whatever color we made our links. That doesn't help us know what the actual links are. A possible solution is to use generated content for paged media and the :after selector to insert the text of the URL after the link. The code We're saving all the code in this section in a print.css file. Why we're doing this will become clear when we use the styles. The easiest way to start is to tell the browser...
