It looks like CSS containmenthttps://publishing-project.rivendellweb.net/css-containment/ will finally bring container queries into browsers without the need for a polyfill. This post will discuss the current implementation in Chromium browsers. Note: The specification for container queries hasn't been finalized. It is possible but unlikely that the specification and the corresponding CSS will change. Don't use @container in production until the feature is finalized. What problem do container queries solve? Container queries give developers finer control over the layout of components. Rather than using media querieshttps://developer.mozilla.org/en-US/docs/Web/CSS/MediaQueries/Usingmediaqueries that provide responsiveness based on the viewport state, they give responsiveness based on the parent container or...
There are times when you're using an API when it would be nice to know what's the permission status is for a given API. The Permission APIhttps://w3c.github.io/permissions/ works around two concepts: permissions and "powerful features" The spec defines a powerful feature as: > A feature of a UA that some code might not be allowed to access, for example, because its environment settings object doesn’t satisfy some criteria, or because the user hasn’t given permission. Permissionshttps://w3c.github.io/permissions/definitions To describe the features, the API provides a registryhttps://w3c.github.io/permissions/permission-registry for the features and their descriptors. Currently only Pushhttps://w3c.github.io/permissions/h-push and midihttps://w3c.github.io/permissions/h-midi have additional parameters specific...
Tree shakinghttps://webpack.js.org/guides/tree-shaking/ has become one of the most popular performance features when working with bundlers. The idea behind tree shanking is that: 1. You declare all of your imports and exports for each of your modules 2. Your bundler Webpack, Rollup, and so on analyzes your dependency tree during the compilation step 3. Any code that appears not to be used is dropped from the final bundle, or ‘tree-shaken’. That means that our library code should export individual functions rather than classes. It would be tempting to do something like this: js export class Number { constructornum { this.num =...
One of the outstanding issues about web components is CSS reuse. Right now we either have to use ::part to create an external stylesheet to match the specified parts of the document or encapsulate styles inside each custom element. ::part works well if all custom elements use the ::part attribute and if all the names are unique accross the document, otherwise we may get unexpected results. We've always been able to create style sheets in Javascript but it's not always a straightforward process. It involves creating a style element, using innerHTML to insert a string containing the CSS we want...
Web Components are a set of specifications that address one of the biggest shortcomings of HTML. We're stuck with what the spec says we have and the browser implementors decide to give us... At least that's the theory. Web Components allow developers to create their own elements along with the styles and scripts associated with the elements. These custom elements would be treated the same as the built-in elements available on browsers, as long as the browser supports the APIs. The early version of the web components family of specifications included the following specifications: Custom Elements HTML Imports Shadow DOM...
Before jumping into writing our own Markdown elements and all the complexity that goes with them, let's stop and see where we are. Markdown rule customization gives you a lot of flexibility regarding customizing built-in rules and elements. It's an all or nothing proposition, either all elements have the attributes you're customizing or you code around to make sure only some do like the link example where we only add attributes to external links. Most of the time, these customizations will be enough, but not always. There may be times when we want an element that is not available on...
Markdown gives you two options to work with specialized content: You can write it as HTML directly or you can use plugins for your Markdown tools that will produce the same result from some specific combination of text symbols. Until now I've always used HTML for things like figures and video embeds from YouTube or Codepen. It's easier, I've created snippets in VSCode to handle them and my muscle memory already knows the shortcuts and how to write the code by hand. For security reasons this may not always be a good idea, especially if you accept third-party contributions. There's...
The Temporal code is not ready for production, it is still possible but not likely that it'll change in incompatible ways before the final version is added to the ECMAScript specification, and because of that, it shouldn't be used in production until it reaches stage 4 in the TC39 process. However, you can test how it works now and decide if you want to use it in future projects. One of the most infuriating things to do in Javascript is date manipulation. The default Javascript Datehttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Date object is hard to work with. This has lead to a proliferation of third-party...
Ever since I started to work with Markdown as my authoring language, I've used Gulp as a conversion tool, when needed. The problem is that gulp-remarkablehttps://github.com/johno/gulp-remarkable/ is poorly documented and has poor support for plugins because of it... I have yet to figure out how to implement the plugins. Using Markdown-ithttps://github.com/markdown-it/markdown-it as my Markdown parser and gulp-markdownithttps://github.com/trwolfe13/gulp-markdownit seems to be more forgiving and easier to use, still no Markdown-it plugins but the standalone tool works fine as we'll describe later. It is not perfect... the leadership of the project leaves a lot to be desired the reason why I'm not...
Foundries have this insane idea that people creating ebooks can afford the fees that they charge for use in a single format, much less for multiple delivery methods. I have an opinion about font licensing but I'm trying to stay neutral as I analyze different aspects of font usage online The web fonts we need Any use of web fonts requires at least 4 weights for the font used to prevent synthetic bold and italic font faces: - Regular - Italics - Bold - Bold-Italics I normally add 1 additional font and weight, a monospace font at regular weight for...
