When doing web development, one of the biggest pains is to have a local server where we can run the code without having to manually reload the page. This post will explore both third-party packages and built-in HTTP servers in multiple languages. Node For a variety of reasons, I've chosen Vitehttps://vitejs.dev/ as my base development environment. You can choose whether to use Typescript or a framework. In this example, we'll create a new workspace using Typescript and no framework. To start a new project with Vite, the command will depend on the version of NPM you're using. If you're using...
data attributes give developers a very powerful tool to create custom code on both CSS and Javascript. This post will look at three things: What are data attributes How to use data attributes in CSS How to use data attributes in javascript What are data attributes datahttps://developer.mozilla.org/en-US/docs/Web/HTML/Globalattributes/data- attributes allow you to insert arbitrary data on your HTML without hacks, and then use it in CSS and Javascript. The names of data attributes have the following restrictions The name must not start with the string xml case-insensitive The name must not contain any colon characters : The name must not contain...
I've been working on learning more about Grids used in book design and publishing and how it may be possible to apply them to web layouts. Grids are not without challenges when working on the web. There are many form factors to consider which means we may have to use media queries to modify the layout But let's start with the types of grids we may want to build or, in other words, what would we build grids for. I've always said that there is no reason why the web can't be like print and newer CSS tools like grid,...
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...
