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...
In 2012 Rebeca Murphey wrote A baseline for front-end developershttp://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers as a minimum of what people should know to work in front-end development back in the day. I went back to the article and was surprised at how well it holds up 7 years after it was written; the tools may have changed but we need to keep the discussion going. What does it take to do front-end development in 2019? What tools we need to do it?. Javascript I won't advocate specific frameworks or technologies. I believe we should all start from a basic understanding of the language in...
CSS Custom Properties, also known as CSS Variables allow you to do awesome things. In this post, we'll explore the different types of CSS Custom properties, what they are, how they work and which one to use in what circumstances. The current version The current version of CSS Custom Properties is a W3C Candidate Recommendationhttps://drafts.csswg.org/css-variables/ that define a way to set custom properties for our CSS content that we might want to dynamically change or that we want to reuse throughout the stylesheet. What they are and how they work The idea behind custom properties is to give developers the...
One of the things I've always had a problem understanding is the CSS box model. I'm writing this, based on content from MDN to try and understand it better. When laying out a document, the browser treats each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties of these boxes. Every box is composed of four areas: content, padding, border, and margin. !https://www.w3.org/TR/css-box-3/images/box.png Different box models in CSS The content area contains the "real" content of the element, such as text, an image, or a video player. Its dimensions...
