JSON-LDhttps://json-ld.org/ is a set of extensions to JSONhttps://www.json.org/json-en.html that allows for creating and exchanging linked data on the web. Perhaps the best-known use of JSON-LD outside semantic web users is using schema.org's JSON-LD structured data for Google's search engine. The following example gives the structured data snippet to accompany a recipe web page. The example is taken from Understand how structured data workshttps://developers.google.com/search/docs/guides/intro-structured-data. html Party Coffee Cake { "@context": "https://schema.org/", "@type": "Recipe", "name": "Party Coffee Cake", "author": { "@type": "Person", "name": "Mary Stone" }, "datePublished": "2018-03-10", "description": "This coffee cake is awesome and perfect for parties.", "prepTime": "PT20M" } Party...
CSS has had to deal with vendor prefixes from very early on and some of those prefixes are still in use today. This post will look at how to use prefixes and how to automate the process, and how to use @supports to test if a feature is supported. Adding CSS prefixes That we're still dealing with vendor prefixes shows how long some of them have lasted and provides an object lesson on how to handle features in development Developers didn't think of vendor prefixes as a way to preview features, they shipped them in production, something the CSS Working...
One thing that makes the web difficult to work with is that a given feature may or may not be available in all your target browsers either because of the version of EcmaScript the Javascript standard it was introduced in or because browsers haven't gotten around to implement them and may not do so at all or worse, they may have poor implementations of a given API the initial implementation of Indexed DB in Safari comes to mind. In the old days, we would do browser detection and assume that if the browser was Netscape they would support a given...
Homebrew is good but it introduces some complexity to your development, particularly if you've installed tools manually before they were available via Homebrew. One of the really problematic tools to move to Homebrew was Go. Because it is installed as a package, removing it is not trivial and may require a lot of manual work after the removal is complete. Run the following command in a terminal to see if Go was installed using the macOS package bash pkgutil --pkgs Go macOS package is presented as com.googlecode.go in the result list. macOS package stores files in the predefined location. For...
A pair of new pseudo-class selectors have made it easier to write CSS in a way that is easier to read and to reason through. :is and :where allow you to combine selectors that have the same styles. For example, to identify the headers inside an article you'd normally do this: css article, h1, article, h2, article, h3, article, h4, article, h5, article, h6 { background: black; color: white; } Instead, you could use :is and improve legibility while avoiding a long selector and potential typos associated with it: css article :ish1, h2, h3, h4, h5, h6 { background: black;...
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...
