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...
I'm an old school developer. The first website I made dates back to 1995 when a friend and I built our school's first website for independent study credit. The web has come a long way from those early days but with all the good has come to, some separation and arguments that never seem to end. The latest one seems to be about the role of a front-end developer and what is front-end development as a discipline. The rest of the post will work on the following assumptions: - Front-end developers should be equally proficient with HTML, CSS and vanilla...
There have been new additions to the promise arsenal that warrants a deeper look so we're ready to use them when they are stable enough to do so. What we started with promise.allhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Promise/all returns a single Promise that resolves when all of the promises passed resolve. It rejects with the reason for the first promise that rejects. Promise.racehttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Promise/race returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise. What we got recently Promise.finallyhttps://publishing-project.rivendellweb.net/promise-finally-finally/ Promise.finally ensures that code will run once, regardless of...
