One of the most interesting new CSS features coming into browsers is color-mixhttps://developer.chrome.com/blog/css-color-mix/. We will look at two uses of color-mix: - Mixing colors - Lightening and darkening a color We will also discuss some of the drawbacks of the color-mix function and how it relates to relative colors Mixing Colors It allows you to combine two colors, the percentages that we want to mix them and output the result. The default colorspace is oklabhttps://w3c.github.io/csswg-drafts/css-color-4/ok-lab and we can change the color space when defining the mix. The basic use of color-mix is to actually mix the colors. The structure of...
Dropcaps have been around for a long time both in printed media and the web. On the web it used to be a pain to do it but, hopefully, this is changing with the introduction of the initial-letter property to work alongside the ::first-letter pseudo-element. The initial letter property takes one or two values numbers or percentages. Using one value tells the browser how many lines the drop cap should take. The top of the drop cap letter will be aligned with the top of the first line of text and will drop down as many lines as specified. The...
Design tokens provide a way to create representations of design assets like colors, fonts, spacing, animations, assets, etc., for styling and building cross-platform user interfaces. One of the challenges with cross-platform product development is that operating systems use different style properties and formats to represent the same data. For example, the following code represents the same colors on different platforms: HEX CSS: FCC821 RGB CSS: rgb252, 200, 33 RGBA CSS: rgba252, 200, 33, 1 LCH CSS: lch83.525%, 53.373%, 83.39% Octal Android/Flutter: 77144041 Instead of using these individual properties, designers and engineers reference a token like color.palette.primary representing all four color...
The most frequent uses of border-radius I see are to make images round without modifying the image. css .circle-radius { border-radius: 50%; } or to round the corners of a rectangular box. css .round-corners { border-radius: 20px; } But there is more that you can do with border-radius. The shorthand property can take one to four values that will produce different results. If we provide one value for border-radius then all border radius elements will have the same value. css .example { border-radius: 15px; } / equivalent individual attributes / .example { border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px...
I love NVM. It allows me to keep multiple versions of Node installed and available to run as needed for testing and development. However, it is not free of problems and footguns. Some packages are version specific and will crash if you're running a different version looking at you, SASS and others are compiled against specific Node versions. I saw this happen with a package from libsquoosh, my image manipulation tool of choice, so I decided to take a look at how to switch versions to a specific one when changing directories. The first step is to create a .nvmrc...
There are some very interesting things you can do with SVG and, more recently, with CSS to manipulate the way text looks on screen. This post will explore how to do text on a path using SVG and CSS, some of the difficulties and what we can do with the technology We will also look at how to animate text on a path. Text in a path !Example of text on a pathhttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/text-on-a-path-svg Figure 1 shows a basic example of text on a path. This is what we want to emulate. SVG SVG is the easier way to create text...
One of the coolest things I see in tutorials and demos is the automatic reload when files change. This post will explore three ways of setting auto-reload for your front-end projects. These three projects will start from scratch. Integrating tooling into an existing project is not trivial and will depend a lot on your skills and the type of project you're working on. Vite Vitehttps://vitejs.dev/ created by Evan Yu, the creator of Vue.js, Vite provides a fast and consistent experience: To start a new project with Vite, the command will depend on the version of NPM you're using. If you're...
One of the first things that caught my attention when ES2015 was first released in 2015 were promises. They provide a nice alternative to callbacks and made the code easier for me to reason through. In 2017 TC39 the group in charge of Javascript standardization added async/await, a way to make promise code easier to read and reason through, to the ECMA262 specification, essentially writing promise-based asynchronous code as it was synchronous blocks of code that, as developers, we're already familiar with. The idea sounds simple enough but I always trip on the execution. This post is my attempt at...
The Wakelock API presents a way to prevent devices from dimming or locking the screen when an application needs to keep running. For example: Applications like Art Space Tokyohttps://read.artspacetokyo.com/ would benefit from the browser not going to sleep while using maps to reach the different art spaces and museums discussed in the book. Recipe applications would benefit from the screen not going to sleep while you work on the recipe with dirty hands. Looking at the code We first create a variable to hold the status of the wakeLock request. we default it to null since the request hasn't been...
In previous posts we've looked at the theoryhttps://publishing-project.rivendellweb.net/video-on-the-web-part-1-the-theory/ behind the different formats and codecs you can use for your videos and how to encode videohttps://publishing-project.rivendellweb.net/video-on-the-web-part-2-encoding-video/ for use on the web. This post will cover the HTML necessary to embed a set of theoretical videos that we encoded for the project. 1. MP4 container, AV1 video, and Opus audio 2. WebM container, VP9 video, and Opus audio 3. MP4 container, x264 video, and AAC audio 4. OGG container, OGG video, and Vorbis audio Building the element The basic element embeds and plays video a single version of the video. It also...
