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...
I'm documenting behaviors that I take for granted and then forget just when I need them. The question is How do I generate screenshots of what I'm working on? The answer is It depends How to generate screenshots will depend on what tool you're using. Both Windows and Macintosh systems offer you ways to generate files from screenshots and, a surprise to me, Chrome DevTools will let you do it too Windows 10 Windows 10 gives you two options to capture screenshots. Which one you use will depend on whether you need to keep a file of the screenshot for...
As developers, we are fixated with performance and rightly so. But we also tend to put web performance in a vacuum and not worry how our site's performance got to where it is today. In this post, we'll talk about using Chrome DevTools to measure performance using Lighthouse from the Audits panel. The idea is that, through testing, you'll get actionable items to fix for performance improvement as you start and later you can measure the impact of specific loading strategies and pieces of your content. Warning: Make sure that you run the test in Incognito Mode create a blank...
We've had DRM in browsers for a while now in the shape of EMEhttps://developers.google.com/web/fundamentals/media/eme and its associated technologies but we haven't asked ourselves what does it do or if it works or not. To help frame the issue I've taken a section of Henri Sivonen's article What is EMEhttps://hsivonen.fi/eme/ to frame the post. > TL;DR EME is a JavaScript API that is part of a larger system for playing DRMed content in HTML video/audio. EME doesn’t define the whole system. EME only specifies the JS API that implies some things about the overall system. A DRM component called a Content...
I've written about Houdini before and how awesome it is. The articles I've written are: - CSS Houdini: Present and Future of CSShttps://publishing-project.rivendellweb.net/css-houdini-present-and-future-of-css/ - CSS Houdini: Properties & Valueshttps://publishing-project.rivendellweb.net/css-houdini-properties-values/ - CSS Houdini: CSS Typed Object Modelhttps://publishing-project.rivendellweb.net/css-houdini-css-typed-object-model/ But, because it's not widely deployed and not all APIs have an equal level of support in the browsers where they work, it's hard to get something that works well without having to rely on writing two versions of the code. It wasn't until I saw Design System Magic with CSS Houdinihttps://css-houdini.web.app/talks/design-systems//0 that I realized that you can combine the different APIs and make...
I finally decided to update my build to work with Gulp 4.x instead of 3. I'm familiar with gulp.series and gulp.parallel changes that are necessary for the build file to work in the new format. What I wasn't aware of was that tasks are no longer the preferred way to create build commands. Instead, you're expected to create each task as its own function and then export it to make it available to the CLI. The Gulp team claims that the task way of defining work units still works but I spent several hours trying to get it working on...
Note: This post discusses the compilation process in a Macintosh. Instructions for other operating systems can be found at Get the codehttps://chromium.googlesource.com/chromium/src/+/master/docs/getthecode.md A few months ago Quora started posting questions about the difference between Chromium and Chrome. A lot of the questions assumed that it would be easy to add the missing features to Chromium and just start it up and you would have a clone of Chrome without any further hassle. Sadly this is not true. The majority of the features require compilation time flags to be enabled or disabled and some, like Widevine DRM support, require contacting the...
In the time I've been researching performance I've become even more convinced that it's not just an issue with Javascript, CSS, images, HTML or what framework you're using, although any one of those items, if not used carefully, can have a negative impact on your users' experience. We have to think deeper than just the tools and ask ourselves why are we using these technologies and how to leverage them to improve the user experience of our sites and applications. What technology stack to use I will not preach one technology over another one, particularly frameworks. I have an opinion...
