When working with Javascript there will be times when we need to change the CSS we apply to the web pages we're working on. Javascript provides two methods to manipulate an HTML element's classes: classNamehttps://developer.mozilla.org/en-US/docs/Web/API/Element/className and classListhttps://developer.mozilla.org/en-US/docs/Web/API/Element/classList. For this post we'll concentrate in classList since it provides methods to manipulate the class attribute and it avoids the string manipulation that you'd have to do when working with className. classList is a read-only property that returns a live space-separated list of the class attributes of the element that we can manipulate using classList methods The classList methods are: addhttps://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add : Adds...
Starting in Node 20.6.0https://nodejs.org/en/blog/release/v20.6.0 there is built-in support for loading environment variables from a .env file into process.envhttps://nodejs.org/docs/latest/api/process.htmlprocessprocessenv as recommended in The Twelve-Factor Apphttp://12factor.net/config methodology. In this post we'll talk about .env, what it is, why use it, and how it works in Node. What is .env file and why use it? An .env file contains all configuration files for your application like passwords, API keys and other potentially sensitive information. The idea comes from the Twelve-Factor App Methodologyhttps://12factor.net/ that suggest that we store config in environment variables. These environment variables are easy to change and they won't be checked...
I can use Google Earth Web and get the satellite image. I can’t get detailed resolution and the satellite image I get doesn’t show anything about the current war on either side. If it has been disabled, do you know who asked Google to disable satellite imagery? You’re assuming it was Google’s decision when it might not have been. ^1 Unclassified or commercial satellite imagery is not good enough for you to be able to see what’s going on in the ground, it is also very expensive. You’d need aircraft-generated imagery to get to high-resolution images. The reasons why that...
@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...
