Web on dev notes

What are template literal types in TypeScript?

Thu, 21 Apr 2022 00:00:00 +0000

Before diving into template literal types, we first need to discuss string literal types

In TypeScript, string literal types are types that constrain the type of a variable to a string or a union of strings.

type Greeting = "hello world";

const text1: Greeting = "hello world"; // ✅  This is ok
const text2: Greeting = "hello"; // ❌ Type '"hello"' is not assignable to type '"hello world"'.

Constraining the value of a variable to a single string is not that useful but a union of strings is something you’ll see often.

Hidden gems of the Chrome DevTools, Part 2: CSS tools

Fri, 25 Jun 2021 23:59:01 +0000

In the last article on the series we looked into some features on the Chrome Console API. This time we’ll see some of the tools Chrome has to offer when working with CSS and layouts.

Inspect layout

Chrome developer tools include handy tools for inspecting and debugging grid and flexbox layouts. When we open Chrome developer tools on the Elements tab, you’ll find a Layout tab right next to Styles and Computed. Under Layout we will see a listing of all the grids and all the flexbox layouts on the current page.

Hidden gems of the Chrome DevTools, Part 2: CSS tools

Mon, 21 Jun 2021 09:33:01 +0000

Accessibility features

accesibility tab

debugger

Experimental

font editor in styles
CSS overview
flex box debugging
accessibility tree

Create a retro text effect with CSS

Tue, 13 Apr 2021 09:33:01 +0000

In this article, we’re going to create an 80’s style text effect with CSS. The effect uses multiple text-shadow, background-clip, filter, linear gradients and -webkit-text-stroke to achieve a cool metallic effect.

Before we dive into the actual CSS you probably want to see the end result.

Let’s start by defining our HTML markup that we will be using.

Hidden gems of the Chrome DevTools, Part 1: The Console API

Sat, 03 Apr 2021 09:33:01 +0000

Debugging, or finding the reason why your code doesn’t work, is one of the most important skills a software developer needs. If you can debug effectively, you’ll catch problems faster and even gain a better understanding of how things work under the hood.

In frontend development, we have a variety of tools available to debug our code. We can use a debugger to step through our code, we can log values to the browser console and we can use the DevTools of our browser.

Use box-sizing: border-box for simpler element sizing

Mon, 04 Jan 2021 09:33:01 +0000

The CSS property box-sizing defines how the width and height properties behave on a element with border or padding. Normally, when box-sizing has its defualt value of content-box, width and height affect the size of the content. This means that if you have a element with padding: 10px, border: 8px and width: 100px then full width of the element will be 136px. This also affects elements which have a relative width or height.