@font-face has been around for a while and it works fine for the existing monochrome, one file per style fonts that we've been using so far. CSS Fonts level 4https://w3c.github.io/csswg-drafts/css-fonts/ introduced two new properties to the src attribute the of @font-face at-rule. These attributes are tech and format. We will discuss each of these in turn. format This attribute specifies the font format of the font it is attached to. If the value for format is not supported or invalid, the browser will not download the resource, potentially saving bandwidth and improving performance. If omitted, the browser will always download...
With new CSS technologies, it's good to look at new or updates descriptors inside the @font-face at-rule. font-weight, font-style and font-stretch font-weight,font-style, and font-stretch can now take one or two values. font-weighthttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight and font-stretchhttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch can take two values to represent the lower and upper boundaries of the variable font range for the descriptor. font-stylehttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style can also use ranges but it's a little more complex than font-weight and font-stretch. The possible values for the descriptor are: normal : Selects the normal version of the font-family : If you use this value then it must be the only value for font-style italic...
We're used to a set of viewport units that represent the size of the browser's viewport. vw: 1% of the width of the viewport size vh: 1% of the height of the viewport size vmin: the smaller of vw or vh vmax: the larger of vw or vh The existing viewport units deal with physical properties. In this post we will look at the new variable units, how they would work and why they are necessary when working in mobile. New viewport units for mobile Give an element a width of 100vw and a height of 100vh, and it will...
Bind, call and apply are old concepts in Javascript. They are likely the subject of many interview questions, blog posts and tutorials but I still find it hard to understand these functions, how they work and how they are different from each other. This post is my attempt at understanding and explaining how these concepts work. General observations These functions provide a basic level of composability to Javascript. They perform the same task creating a bound function in different ways. Bind Bindhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Function/bind lets you specify the object that thishttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this references inside the bound function. The simplest use of bind is...
Javascript also has a set of map/reduce/filter functions. I've always curious about how they work. From what I see, these functions are closer to Functional programming than to data processing. They create new arrays from their input, keeping the source intact rather than replacing it. This allows for further operations on the original array. As an overall note. These functions are not a replacement for for and for of loops. There may be times when using for loops is more efficient than using these methods. Map The Maphttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Array/map method of the Arrayhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Array creates a new array with the result of...
Rest and spread operators are two ways to manipulate arrays and objects in Javascript. In this post we'll review what they are and how to use them. Spread Parameters The spread syntaxhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spreadsyntax expands an array or objects into its individual elements. For example, with the following array: js const obj = { a: 1, b: 2, c: 3 }; We can use the spread operator to assign the values of the array into a new array js const newObj = { ...obj }; js console.lognewObj; // {a: 1, b: 2, c: 3} We can also use the spread operator in...
This is an interesting trick to help consolidate assets and reduce the number of network requests you need to make. Let's assume that your project depends on one big library like jQuery or Backbone to work properly. Instead of depending on the network which may or may not be available or caches where you're at the mercy of the user and the browser you want to have control of the entire dependency tree for the build. The explanation for the code below is as follows: 1. We request the latest jQuery version from the jQuery CDN using the request library....
There is more to writing defensive CSS than what I thought. This post will look at feature queries the @supports at rule and CSS support for OS-level accessibility rules. Feature queries Before Feature Queries, we used to code multiple values for the same rules and relying on the order of the values to what will be rendered. In this example the browser supports both color spaces so the last one defined is the one that the browser will use. css .demo { background-color: 2632c2; background-color: oklch0.42 0.22 269; } This works for a single element or a single set of...
There are a couple of additional items that I though were important enough to cover: generics and DOM manipulation. Generics One of the things I find most interesting about Typescript is the idea of generic types. There are times when we don't know the type of the parameters we want to use, whether the kind of parameters we want to use wil change over time, or whether we want to use the same function in different contexts. For example, we may want the ID to be a string, or a number but we won't know which one it is until...
