Forem: Jesse Wei

A Hands-On Guide to Figma's Component Properties

Jesse Wei — Fri, 05 May 2023 10:00:00 +0000

The component properties feature of Figma is powerful but can feel somewhat unintuitive at first.

While there are quite some resources online and offline about this topic, few give real-world examples to help us truly understand it. So I created this hands-on tutorial to show you how this feature can boost your design workflow.

Prerequisites
What Are Component Properties
Types of Component Properties
- Boolean Property
- Example
- Instance Swap Property
- Example
- Text Property
- Example
- Variant Property
- Example
A Challenge
Conclusion

Prerequisites

To follow along, you should have some basic knowledge on Figma in general. You should understand what a component is and how to create one in Figma.

If you're new to Figma, don't worry, check out this beginner guide before getting back to this tutorial.

What Are Component Properties

Component properties are styles and/or content of a component that can be changed to create variations of the component.

They can be the content of some text, having or not having a nested component, the specific type of the nested component and so on.

By applying those properties, we can create sophisticated component libraries out of limited number of components, which is a great time-saver.

Types of Component Properties

There are four types of component properties:

Boolean Property
Instance Swap Property
Text Property
Variant Property

We'll examine each of them closely.

Boolean Property

This property controls whether something is visible or not. To be precise, it shows or hides a layer of a component. So anything of the component that appears in the Layers panel can have this property applied.

Example

Suppose we have componentized a button with a text label and an icon. We want to be able to create variations of the button with or without the icon.

Example of adding boolean property

Breakdown

1). Double-click the icon to select it. In the Layer section of the right sidebar, click the Create boolean property button.

2). Give it a self-explanatory name, such as Show Icon, leave the Value as it is and hit Create property.

3). Now the property is added to the icon layer and appears in the Layer section of the right sidebar.

4). Create an instance from the button component. A switch for the property appears under the component name in the right sidebar. We can use it to toggle the showing and hiding of the icon.

Instance Swap Property

If Boolean property controls show or hide, then Instance Swap property controls what to show. In the button component example above, we may want to change the icon in practice to fit our needs and this is where the Instance Swap property comes in handy.

Example

Let's build upon our button component example. But before we start, as a pre-step, add a couple of icons to our canvas and componentize them (you can go to Plugins, search for icons, pick a library and arbitarily add a few icons to the canvas).

Example of adding instance swap property

Breakdown

1). Double-click the icon to select it. In the right sidebar and next to the name of the selected icon name, click the Create instance swap property button.

2). In the modal that appears, feel free to give the new property a proper name, choose the default icon (I'll leave both as they are here) and hit Create property.

3). Now we see from the right sidebar that our new property is successfully created.

4). Create an instance from our button component and from the right sidebar and under the instance name, we can see our new instance property is availabe. Click the dropdown button.

5). Finally, from the dropdown menu, choose another icon and we're done.

Please note that, Instance Swap property only applies to components. If we want to choose an icon from a list of icons, for example, we must first componentize them for them to appear in the instance list.

Text Property

Text property is pretty straightforward. As the name suggests, it controls the content of text. Whenever we want the text of a component to be customizable, we can add a text property to it.

Example

We'll keep building upon our button component example.

Example of adding text property

Breakdown

1). Double-click the text to select it. In the Content section of the right sidebar, click the Create text property button.

2). In the modal that appears, feel free to give the new property a proper name, set the default text (I'll leave both as they are here) and hit Create property.

3). Now we see from the right sidebar that our new property is successfully created.

4). Create an instance from our button component and from the right sidebar and under the instance name, we can see our new instance property is availabe. We can change the text from the text box here (or you can choose to edit the text directly on the button instance).

5). Finally, change the text to something like Submit and we're done.

Variant Property

Simply put, a variant property is one that is out of the reach of all the component properties we saw above. We cannot use any of the Boolean, Instance Swap or Text properties to control the size or background color, for example, of our button. If we want to have buttons of different sizes and different background colors, we need to create variants of that button.

Example

We'll add a type and a size property to our button component and create a variant for each of the new properties. Follow these steps:

1). Select our button component and click Add Variant from the top menu. First, we want to make the new variant an outline type of button. So we give it an Outline value and rename the default Property 1 to Type from the right sidebar. Change its style to make it an outline button.

2). Next, we want to create a smaller-sized variant for each of the existing variant. Select our component set by clicking the Button tag and drag the border to make it wider. Then, with the component set still selected, click the Create component property button from the Properties section in the right sidebar and select Variant from the menu. Name it Size and hit Create property.

3). Select both of the existing variants, press and hold Option/Alt and drag to duplicate them. In the focused text box in the right sidebar, change the text to Small. Then, with the new variants still selected, resize them in the Auto layout section by giving them smaller paddings and we're done.

4). Now, create a button instance and try out all the properties we've created.

A Challenge

Now we'll get some practice by building a profile card component using our button component. It has an avatar, a title, some description text and a button. It allows us to change the avatar image, the title and the text dynamically and we can access all of the properties we added to the button from within the card component.

Here is what it looks like when finished:

And here are some instances created from it:

Make sure to try building it out yourself but if you're stuck, try these steps:

1). Use the UI Faces Figma plugin to generate a few avatar images and componentize them.

2). Create a rectangle, set its background color to white and give it a shadow if you want. Don't worry about the size or aspect ratio of it.

3). Drag an avatar and a button instance from the Assets of the left sidebar onto the new rectangle, and add title and description text to it too. Don't worry about the positions of the elements as we'll align them later.

4). Now select the rectangle along with everything inside it and componentize it.

5). To be able to access all of the properties of our button, we need to expose properties from nested instances. If you are not familiar with it, check out Figma docs on this. In this case, with the card component selected, click the Create component property button from the Properties section in the right sidebar and select Nested instances from the menu.

Then, check in Button.

6). Now we can tweak the property values of our button.

Follow the steps introduced in this tutorial to create an Instance Swap property on the avatar, a Text property on the title and another Text property on the description text.

7). Finally, align the elements with Auto Layout which is out of the scope of this post. If you are not familiar with it, take a look at Figma docs on this (I'm considering creating a tutorial on Auto Layout so stay tuned). The completed design should look something like this:

Conclusion

In this tutorial, we learned what component properties are in Figma and how to use them to create dynamic and flexible UI. There are 4 types of component properties: Boolean, Instance Swap, Text and Variant properties.

Each of the first 3 properties provides a specific control over a part of a componet while Variant property allows us to tweak the size, the color, the state or other aspects of a component that are beyond the reach of the first 3 properties.

Figma is easy to get started but hard to truly master. I'm considering creating more tutorials covering other important topics on it, so please stay tuned!

Implement Click-And-Copy With Clipboard API

Jesse Wei — Mon, 06 Mar 2023 10:00:00 +0000

Click-and-copy is everywhere these days. By simplifying a multi-step action to a single-step one, this functionality makes web users happy so as a UI/UX designer, you don't want to miss out on it.

At the core of the implementation is the Clipboard API. It may sound daunting at first, but the logic is actually quite straightforward. I'll help you get familiar with it by building a real world example together in this tutorial.

What We Will Build
HTML & CSS
Clipboard API
- An Overview
- Elements and Event Listeners
- Click-and-Copy Handler
- Form Submission Handler
Conclusion

What We Will Build

Our example will look and work like this when finished:

Click-and-copy example

When you click a coupon code, it will be selected and highlighted, and a tooltip with the copied coupon code will appear. You can then paste the content to the coupon code input to apply it, which mimics how we work with coupon code in the real world.

For brevity, I will only show the code that's relevant to the step in the description below. You can find the full code of the example here.

HTML & CSS

Let's start by creating a index.html and style.css file at our project root.

Give index.html the following content (full code can be found here)

<div class="container">
  <div class="coupons">
    <div class="coupon">
      <small class="coupon-label">Coupon Code: </small>
      <input type="text" name="coupon-code-1" id="coupon-code-1" size="10" value="ABC12345" readonly>
      <small class="tooltip"><span class="copied-code"></span> Copied</small>
    </div>
    <div class="coupon">
      <small class="coupon-label">Coupon Code: </small>
      <input type="text" name="coupon-code-2" id="coupon-code-2" size="10" value="XYZ098765" readonly>
      <small class="tooltip"><span class="copied-code"></span> Copied</small>
    </div>
  </div>
  <form autocomplete="off">
    <label for="code-input">Your Coupon Code: </label>
    <div>
      <input type="text" name="code-input" id="code-input">
      <button type="submit">Apply</button>
    </div>
  </form>
</div>

Then give style.css the following content (full code can be found here)

body {
  height: 50vh;
  background-color: beige;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.coupons {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .coupons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2%;
  }
}
.coupon {
  background-color: white;
  border: 2px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 10px;
  margin-bottom: 20px;
}
.coupon:last-child {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .coupon {
    margin-bottom: 0;
  }
}
.coupon-label {
  white-space: nowrap;
  margin-right: 5px;
}
input[name^='coupon-code-'] {
  border: none;
  outline: none;
  font-size: large;
  font-weight: bold;
  text-align: center;
}
.tooltip {
  background-color:darkslategray;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -6px);
  display: none;
}
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  border-top: 5px solid darkslategray;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
form {
  width: 100%;
}
form div {
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2%;
}
label[for='code-input'] {
  display: block;
  margin-bottom: 10px;
}
input[name='code-input'] {
  grid-column: span 3 / span 3;
  padding: 10px;
  border: 1px solid black;
}
button[type='submit'] {
  grid-column: span 1 / span 1;
  border: 2px solid black;
  background-color: transparent;
  padding: 10px 20px;
}

Clipboard API

An Overview

Before implementing the API, let's take a quick look at what we can do with it.

This API allows us to access the system clipboard through the following methods:

read(). Get the data (not limited to text) from the clipboard.
readText(). Get the text data from the clipboard.
write(). Write data (not limited to text) to the clipboard.
writeText(). Write text data to the clipboard. Now let's implement the Clipboard API in Javascript to give our example the expected behavior.

All the methods return a Promise. For the read* methods, the promise is resolved with the data of the clipboard and for the write* methods, the promise is resolved when the data is copied to the clipboard.

Note that,

We access the Clipboard object through the navigator.clipboard global.
The support of the API varies across browsers. Check out browser compatibility to see if your browser supports it.
Permission is required for the API to access the system clipboard, so an alert may appear that asks for your permission when calling the API for the first time (if that's the case, click allow).

Elements and Event Listeners

Now let's get started coding! First, create a script.js file at the project root. Then, let's select and store the elements we'll use in variables and prepare our event listeners:

const codeEls = document.querySelectorAll('input[name^="coupon-code-"]')
const tooltips = document.querySelectorAll('.tooltip')
const form = document.querySelector('form')
const codeInput = document.querySelector('input[name=code-input]')

/**
 * todo: define handleCopy and handleSubmit methods
 */

for (const codeEl of codeEls) {
  codeEl.addEventListener('click', handleCopy(codeEl))
}

form.addEventListener('submit', handleSubmit)

Click-and-Copy Handler

The handleCopy() method contains the core business logic for the click-and-copy action. In our example, we only deal with text data, so we use readText() and writeText() here.

let timeout

const handleCopy = el => {
  return () => {
    /**
     * 1. copy coupon code to clipboard
     */
    navigator.clipboard.writeText(el.value)
      .then(() => {
        /**
         * 2. select and highlight clicked coupon code
         */
        el.setSelectionRange(0, -1)
        /**
         * 3. hide all currently displayed tooltips
         *    if there is any
         */
        tooltips.forEach(tooltip => tooltip.style.display = 'none')
        /**
         * 4. select the tooltip for the clicked coupon
         */
        const tooltip = el.nextElementSibling
        /**
         * 5. insert the copied code to the tooltip
         *    before displaying the tooltip
         */
        const copiedCodeEl = tooltip.querySelector('.copied-code')
        navigator.clipboard.readText()
          .then(code => copiedCodeEl.textContent = code)
        tooltip.style.display = 'block'
        /**
         * 6. clear any existing timeout
         *    before assigning a new one to the variable
         */
        if (typeof timeout === 'number') {
          clearTimeout(timeout)
        }
        /**
         * 7. display the tooltip for 2 seconds
         */
        timeout = setTimeout(() => {
          tooltip.style.display = 'none'
          copiedCodeEl.textContent = ''
        }, 2000)
      })
  }
}

Form Submission Handler

In handleSubmit, we'll just get the input value of the text field and display it in an alert:

const handleSubmit = (event) => {
  event.preventDefault()
  const formData = new FormData(form)
  const code = formData.get('code-input')
  /**
   * clearing the text field after form submission
   * makes great UX
   */
  formData.set('code-input', '')
  codeInput.value = ''
  alert(`Coupon Code ${code} has been applied successfully.`)
}

And that's it. Make sure to get your hands dirty and write the code line by line to really understand the concept.

The full Javascript code can be found here.

And the final and live example can be found here.

Conclusion

In this tutoria, we learned how to implement a click-and-copy component by building an example that can be used out of the box in your next project.

We looked at the Clipboard API which is the core to our implementation. The Javascript code looks somewhat lengthy but the idea is not that complex, especially when we break the steps down.

Supercharge Your HTML&CSS Workflow With Pug and TailwindCSS

Jesse Wei — Fri, 03 Mar 2023 21:00:00 +0000

Coding in HTML and CSS can be time-consuming. For large HTML and CSS files, they can be hard to maintain as well.

A much better approach is to use HTML templating languages, such as Pug and CSS frameworks, such as Tailwind CSS, to generate your HTML and CSS code on the fly.

In this tutorial, I'll show you how to bootstrap such a project in no time using the create-pug-tailwindcss-app package I built and how to really leverage the power of Pug and Tailwind CSS to make your life easier.

Prerequisites
How Pug Works
How Tailwind CSS Works
Build an Example in <10 Minutes
- Get Started
- Pug to HTML
- Add Tailwind CSS Classes
- Go to Production
Conclusion

Prerequisites

You're expected to have basic knowledge about HTML templating languages. If not, I have a post covering the basics of Pug so feel free to check it out. You can also take a look at the official docs of Pug. I'll cover some more advanced usage of Pug in this tutorial too.
You're expected to have basic knowledge about Tailwind CSS. If not, check out its official docs, especially the Get Started and Core Concepts sections. They also have an interactive playground where you can try Tailwind CSS out easily.
I use VSCode as my editor with the Live Server extension installed. Any other editors that the extension supports should work as well. But if there's no compatible Live Server extension for your editor, you'd need to do a bit research to find a dev server with hot reload support.

How Pug Works

Pug is a templating language that when compiled, outputs HTML code. So instead of writing HTML directly, you write Pug code and then compile it to generate HTML.

For example, this Pug snippet,



doctype html
html
  head
    title My Site
  body
    h1 Hello, World!
    p This is my site.

generates the following HTML:



<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my site.</p>
  </body>
</html>

If you want to know more about Pug, check out my post.

How Tailwind CSS Works

Tailwind CSS is a utility-first CSS framework. It provides a set of pre-defined CSS classes that can be used directly in HTML markup without having to write any CSS code from scratch (mostly).

Let's say I want to give the p element in the following markup a font size of 20px and a color of dark red, I can do,



<p class="text-xl text-red-900">Hello World</p>

When compiled, Tailwind CSS adds the text-xl and text-red-900 classes to the output stylesheet (the CSS file we link in the head of our HTML) where the CSS of the classes are specified:



.text-xl {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
}

.text-red-900 {
  color: rgb(124 45 18);
}

You can see it's no magic here. We're still using CSS to style our page, just that instead of defining the classes and writing the CSS ourselves, Tailwind CSS does the heavy lifting for us.

Build and Deploy an Example in <10 Minutes

Now we've seen how Pug and Tailwind CSS work separately, it's time to put the pieces together. We'll build a sample page and this is how it looks like when finished:

Sample page to build(Photo by Marek Piwnicki on Unsplash)

It's simple but looks good enough. More importantly, you can build it in less than 10 minutes without writing a single line of HTML or CSS!

Get Started

Bootstrapping a project that uses Pug and Tailwind CSS for the first time can be a bit tricky, so I created an npx tool to make your life easier.

To get started, just run the following command in your terminal (remember to replace your-project-name with your real project name):



npx create-pug-tailwindcss-app your-project-name

Now, your project structure should look like this:



.
├── README.md
├── bin
│   └── cli.js
├── images
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── index.pug
│   └── input.css
└── tailwind.config.js

You would work with,

src/. This is where your Pug files and input CSS file (the CSS file to be compiled) reside.
images/. This is where you put your images.
tailwind.config.js. This is where you configure your Tailwind CSS or add global styles, if necessary.

You can ignore all the other directories and files in the project.

Pug to HTML

Open the src/index.pug file and replace its content with the following:



//- 1. We can define variables in Pug just like we do in Javascript
- var navItems = ['Top', 'Services', 'About Us', 'Contact'] 

doctype html
html(lang='ja')
  head
    meta(name="viewport", content="width=device-width, initial-scale=1")
    title Foo Company
    link(rel="stylesheet" href="style.css")
  body
    header
      div
        a(href="#") Foo Company
        nav 
          ul
            //- 2. Iteration makes code more concise and readable
            each item in navItems
              li
                a(href="#")= item
    main
      section
        img(src="kv.jpg", alt="key visual of Foo Company")
        h1 Foo Company
      section
        h2 Our Services
        div
          div
            h3 Service 1
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan, sem et porttitor placerat, lacus risus molestie ligula, congue venenatis augue ante ac dui. Aliquam ipsum neque, tempus id magna eget, fringilla sollicitudin nunc. Phasellus non eros maximus, posuere elit in, vestibulum orci. Phasellus eget pellentesque ligula.
          div
            h3 Service 2
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan, sem et porttitor placerat, lacus risus molestie ligula, congue venenatis augue ante ac dui. Aliquam ipsum neque, tempus id magna eget, fringilla sollicitudin nunc. Phasellus non eros maximus, posuere elit in, vestibulum orci. Phasellus eget pellentesque ligula.
          div
            h3 Service 3
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan, sem et porttitor placerat, lacus risus molestie ligula, congue venenatis augue ante ac dui. Aliquam ipsum neque, tempus id magna eget, fringilla sollicitudin nunc. Phasellus non eros maximus, posuere elit in, vestibulum orci. Phasellus eget pellentesque ligula.
    footer
      div
        a(href="#") Foo Company 
        nav 
          ul
            each item in navItems
              li
                a(href="#")= item
      small Copyright © 2023 Foo Company

Some interesting points to be noted:

At 1, we defined the items of our nav in an array just like we'd normally do in Javascript.
At 2, we used each expression to iterate our navItems variable which made the code much more concise and readable.

Now download the key visual image here, rename it as kv.jpg and put into the images/ directory.

Then run this command in your terminal to compile our Pug file into HTML:



npm start

You should notice a dist/ directory is generated automatically in our project root. Within it, there is the compiled index.html and style.css files along with our key visual image.

Start your editor's Live Server extension and in the opened browser, click the dist directory. Our page should be displayed and should look like this by this point:

Sample page before CSS is applied

Add Tailwind CSS Classes

Now it's time to add Tailwind CSS classes to our markup to give our page a cool style. Due to the limit of the length of this tutorial, I cannot go through all the classes used to style our page. But as an example, let's give our header a light grey background color:



...
header.bg-slate-100
...

Save your changes and the background color of the header should be changed in real-time in the browser. You can find more about the default colors you can use out of the box here.

As you saw above, styling our page is as easy as attaching Tailwind CSS classes to Pug tags. Our final src/index.pug looks like this:



- var navItems = ['Top', 'Services', 'About Us', 'Contact'] 

doctype html
html(lang='ja')
  head
    meta(name="viewport", content="width=device-width, initial-scale=1")
    title Foo Company
    link(rel="stylesheet" href="style.css")
  body
    header.w-full.bg-slate-100.fixed.top-0.left-0.z-10
      .container.flex.justify-between.items-center
        a.font-bold(href="#") Foo Company
        nav 
          ul.flex.justify-end
            each item in navItems
              li
                a.block.p-4(href="#")= item
    main
      section.relative.mb-12
        img.w-full.h-screen.object-cover.brightness-50(src="kv.jpg", alt="key visual of Foo Company")
        h1(class="text-6xl font-bold text-white absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2") Foo Company
      section.container.mb-12
        h2.text-4xl.font-bold.mb-6 Our Services
        .grid.grid-cols-3.gap-12
          div
            h3.text-2xl.font-bold.mb-3 Service 1
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan, sem et porttitor placerat, lacus risus molestie ligula, congue venenatis augue ante ac dui. Aliquam ipsum neque, tempus id magna eget, fringilla sollicitudin nunc. Phasellus non eros maximus, posuere elit in, vestibulum orci. Phasellus eget pellentesque ligula.
          div
            h3.text-2xl.font-bold.mb-3 Service 2
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan, sem et porttitor placerat, lacus risus molestie ligula, congue venenatis augue ante ac dui. Aliquam ipsum neque, tempus id magna eget, fringilla sollicitudin nunc. Phasellus non eros maximus, posuere elit in, vestibulum orci. Phasellus eget pellentesque ligula.
          div
            h3.text-2xl.font-bold.mb-3 Service 3
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan, sem et porttitor placerat, lacus risus molestie ligula, congue venenatis augue ante ac dui. Aliquam ipsum neque, tempus id magna eget, fringilla sollicitudin nunc. Phasellus non eros maximus, posuere elit in, vestibulum orci. Phasellus eget pellentesque ligula.
    footer.w-full.bg-slate-900.text-white
      .container.flex.justify-between.items-center.mb-6
        a.font-bold(href="#") Foo Company 
        nav 
          ul.flex.justify-end
            each item in navItems
              li
                a.block.p-4(href="#")= item
      small.block.text-center Copyright © 2023 Foo Company

For the other classes I used in the page, check out Tailwind CSS docs. Just hit CMD + / (Mac OS) or Ctrl + / (Windows) and type in the property you want style (e.g. text color).

Go to Production

To bring our page to production, just run:



npm run build:prod

The dist/ directory is re-generated. The only difference of this version of dist/ and the dev version is the index.html in the production dist/ is minified.

Now you can pick your favorite hosting service and upload the generated HTML, CSS and image files to it to publish your page.

Conclusion

It can sound daunting to build a website using multiple new technologies other than HTML and CSS. But as I showed you in this tutorial, with a bit of good tooling, we can create a modern page times faster with Pug and Tailwind CSS than with traditional HTML and CSS workflow.

The benefit of generating HTML and CSS dynamically doesn't stop here. When the codebase of your page is large, for example, it makes sense to componentize your page. This involves creating reusable partials and mixins which Pug supports out of the box. This way, when you want to make a change to a part which is used in multiple places across the page, you only have to make the change once to the relevant partial or mixin. This makes your code much more maintainable.

Also, by leveraging the functionality of Pug to pass data or data file to the compiler, you can separate the data and UI layer of your code, which makes it far easier to generate versions of the same page in different languages, for example.

Implement a Dynamically Displayed Header With Window & Element Scroll Positions

Jesse Wei — Mon, 27 Feb 2023 12:00:00 +0000

One of the most frequently seen patterns in web design is to hide the header on page load until the user scrolls and when the page hits a specific point.

You may choose to use jQuery or vanilla Javascript to implement this but whichever tool you use, you need to be able to obtain the top/bottom positon of the target element relative to the scroll position of the page.

In this tutorial, we'll get our hands dirty and build a simple page with a header and some content. The header is not shown at page load but when the user scrolls the page to a certain point, it appears. When he/she scrolls past a certain point, the header becomes invisible again.

An Overview of Our Example
HTML & CSS
Query and Store Elements
Element.getBoundingClientRect()
window.scrollY
Event Listener
Conclusion

An Overview of Our Example

This is what we'll build:

The example we'll build

The header is only visible when the page is scrolled within a range.

The behavior of the header

HTML & CSS

Let's prepare our html code and give it some CSS first.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    section {
      margin-bottom: 100px;
    }
    div {
      background-color: black;
      color: white;
      display: flex;
      justify-content: center;
      padding: 300px 0;
    }
    ul {
      list-style: none;
      display: flex;
      justify-content: flex-end;
      margin: 0;
      padding: 0;
    }
    li a {
      display: block;
      padding: 20px;
    }
    header {
      width: 100%;
      visibility: hidden;
      opacity: 0;
      position: fixed;
      top: 0;
      left: 0;
      background-color: white;
      transition: all 0.5s ease-in-out;
    }
    header.show {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li>
        <a href="#section1">Section1</a>
      </li>
      <li>
        <a href="#section2">Section2</a>
      </li>
      <li>
        <a href="#section3">Section3</a>
      </li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="section1">
      <div>Section 1</div>
    </section>
    <section id="section2">
      <div>Section 2</div>
    </section>
    <section id="section3">
      <div>Section 3</div>
    </section>
    <section id="section4">
      <div>Section 4</div>
    </section>
    <section id="section5">
      <div>Section 5</div>
    </section>
  </main>
  <script>
    // todo: implement header behavior.
  </script>
</body>
</html>

At this point, nothing will happen when you scroll the page because we haven't implemented our Javascript code yet. We'll do this in the next steps.

Query and Store Elements

Let's start by querying and storing the relevant elements in variables as we'll need them later.

...
<script>
  const section2 = document.querySelector('#section2')
  const section3 = document.querySelector('#section3')
  const header = document.querySelector('header')
</script>

Next comes one of the key steps in our implementation. We want to add the show class name to our header when the top of section2 hits the top of the window as we scroll and remove the class name when the bottom of section3 reaches the top of the window. To achieve this, we need 3 values:

The y position of the top of section2
The y position of the bottom of section3
How much the document is scrolled

To obtain value 1 and 2, I'm going to call the getBoundingClientRect() method on section2 and section3 elements and to get value 3, I'll use scrollY of the window object.

Element.getBoundingClientRect()

This method returns an object containing the following properties:

left: pixels from the left of the viewport to the left of the element
top: pixels from the top of the viewport to the top of the element
right: pixels from the left of the viewport to the right of the element
bottom: pixels from the top of the viewport to the bottom of the element
x: equal to the value of left
y: equal to the value of top
width: width of the element including padding and border
height: height of the element including padding and border

You can see that this method is very powerful because we can get the position and size of an element in one shot. Check out MDN to learn more about it.

We'll need the top value of section2 and bottom value of section3. Add the following code:

...
<script>
  ...
  // add these
  const {top: top_} = section2.getBoundingClientRect()
  const {bottom: bottom_} = section3.getBoundingClientRect()
</script>

window.scrollY

This property of the window object gives us the number of pixels the document is scrolled vertically.

To achieve the expected behavior of our header, we'll check window.scrollY against the top_ and bottom_ to decide whether to add or remove the show class name in the next step.

Event Listener

Now it's time to wire up our scroll event listener.

...
<script>
  ...
  // add these
  window.addEventListener('scroll', function() {
    if (window.scrollY >= top_ && window.scrollY <= bottom_) {
      if (!header.classList.contains('show')) {
        header.classList.add('show')
      }
    } else {
      if (header.classList.contains('show')) {
        header.classList.remove('show')
      }
    }
  })
</script>

And the full Javascript code looks like this.

<script>
  const section2 = document.querySelector('#section2')
  const section3 = document.querySelector('#section3')
  const header = document.querySelector('header')

  const {top: top_} = section2.getBoundingClientRect()
  const {bottom: bottom_} = section3.getBoundingClientRect()

  window.addEventListener('scroll', function() {
    if (window.scrollY >= top_ && window.scrollY <= bottom_) {
      if (!header.classList.contains('show')) {
        header.classList.add('show')
      }
    } else {
      if (header.classList.contains('show')) {
        header.classList.remove('show')
      }
    }
  })
</script>

That's it. Open the page in your browser and make sure it works as expected. If anything goes wrong, double check your code.

Conclusion

In this tutorial, we built a simple page with a dynamic header that appears and disappears based on the scroll position of the document.

At the core of the implementation are the Element.getBoundingClientRect() method and the window.scrollY property. You can also make use of them to implement things like back-to-top button which only appears when user scrolls past a certain point.

Understanding Assignment and Reactivity in Svelte

Jesse Wei — Mon, 30 Jan 2023 10:00:00 +0000

Svelte's reactivity is built into the language as this post noted. Despite limited experiece with svelte yet, I feel more comfortable working with reactivity in svelte than in other frontend frameworks I've used so far.

In this post, I want to share a question I had on the topic and my effort to find the answer.

My Question
Assignment With Side-Effect
$$invalidate and Indirect Assignment
Conclusion

My Question

When I first picked up svelte a month ago after working with React for a few years, I made a simple todo app to play with.

<script>
  let todos = [
    {id: 0, name: 'buy milk', done: false},
    {id: 1, name: 'buy food', done: false}
  ]

  function toggle() {
    // TODO: implement toggle
  }
</script>

<ul>
{#each todos as todo (todo.id)}
  <li>
    Name: {todo.name}  Done: {todo.done}
  </li>
{/each}
</ul>

<button on:click={toggle}>Toggle</button>

I tried implementing two versions of the toggle function as the following and was surprised to see the different outcomes produced by them when I hit the button:

// version 1
function toggle() {
  todos.forEach((todo, i) => {
    todo.done = true
    console.log(todos)
  })
}

// version 2
function toggle() {
  todos.forEach((_, i) => {
    todos[i].done = true
    console.log(todos) 
  })
}

Output for toggle version 1

Output for toggle version 2

Obviously, both toggles updated the data but only version 2 triggered an update of the UI, in which case we say, in the frontend development world, the app is reactive to toggle version 2 but not version 1.

Why?

Assignment With Side-Effect

To answer the question, I realized I had first to understand how reactivity works in svelte.

According to the docs, svelte's reactivity is based on assignments. But what are the implications of this? Both of my implementations of the toggle function include an assignment statement and a further check indicated that both todo in version 1 and todos[i] in version 2 point to the same object as expected:

function toggle() {
  todos.forEach((todo, i) => {
    console.log(todo === todos[i]) // => true
  })
}

This explained why the data, todos, was correctly updated in both cases as the console outputs showed and made it clear that there must have been a side-effect(as svelte creator Rich Harris mentioned in this video) coming along with the version 2 of toggle that triggered a re-rendering of the UI.

$$invalidate and Indirect Assignment

One thing I love about svelte most is the highly interactive REPL. It makes playing around with the code much easier and of much more fun.

I checked out the compiled JS of both versions of the toggle function and found they were not nearly the same:

// version 1: compiled
function toggle() {
  todos.forEach((todo, i) => {
    todo.done = true;
  });
}

// version 2: compiled
function toggle() {
  todos.forEach((_, i) => {
    $$invalidate(0, todos[i].done = true, todos);
  });
}

The alien-looking $$invalidate function in the second snippet turned out to be the source of all the magic. It is the side-effect generated by assignment that triggers an update of the screen.

You don't need to know the implementation details of $$invalidate to understand reactivity in svelte, but for those who are curious, feel free to take a look at this amazing post by svelte's maintainer Tan Li Hau before diving deep into the source code of svelte.

Now, the question becomes why did one assignment generate $$invalidate and another fail to? The answer has something to do with indirect assignment.

In the official tutorial, it's pointed out that indirect assignments won't trigger reactivity.

Just as this code, used in the tutorial, won't trigger reactivity:

const foo = obj.foo;
foo.bar = 'baz';

The first implementation of toggle won't either, because fundamentally, it is an indirect assignment:

// version 1
function toggle() {
  todos.forEach((todo, i) => {
    todo.done = true
  })
}

// is equivalent to
function toggle() {
  todos.forEach((_, i) => {
    const todo = todos[i]
    todo.done = true
  })
}

Svelte checks if the updated variable or any of its properties is assigned a new value to determine whether $$invalidate should be generated. This is how reactivity in svelte is implemented under the hood. If you wonder HOW it is implemented, again, go ahead and read its docs.

Based on what we've found, if I'm so stubborn as to insist on using the first version of toggle but want all the reactive magic to happen at the same time, I can just add a legitimate assignment like the following to generate the $$invalidate side-effect:

// version 1
function toggle() {
  todos.forEach((todo, i) => {
    todo.done = true
    todos = todos // add this line
  })
}

todos[i] = todos[i] also does the trick:

// version 1
function toggle() {
  todos.forEach((todo, i) => {
    todo.done = true
    todos[i] = todos[i] // this works too
  })
}

Conclusion

The answer to my question turned out to be that the code, which failed to trigger a re-rendering of the UI, had an indirect assignment and indirect assignment does not trigger reactivity in svelte.

We looked at the $$invalidate side-effect which is the source of reactive magic behind svelte. We realized that to make a variable reactive, we must assign a value to itself or its properties if the variable is an object, otherwise $$invalidate won't be generated.

Slim: A HTML Templating Language

Jesse Wei — Mon, 09 Jan 2023 10:00:00 +0000

In this part of the series, let's explore another popular templating language, Slim.

It is developed in the Ruby language and is often used to create view templates for Ruby on Rails projects. But apart from that, it is very similar to Pug as well as other templating languages.

A Basic Example
Start a Slim Project
- Compile From Command Line
- Use Slim in Ruby Frameworks
A More Advanced Example
Conclusion

A Basic Example

Here's an example of a simple Slim template that generates an HTML page with a heading and a paragraph:

doctype html
html
  head
    title My Site
  body
    h1 Hello, World!
    p This is my site.

You may have noticed that it looks EXACTLY the same as the basic example of Pug we saw in part 1 of the series. If you understand another templating language like Pug, you'll be comfortable using Slim too.

And it would be compiled into the exactly same HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my site.</p>
  </body>
</html>

The rendered page from the HTML looks like this:

Rendered page from basic example

Also as we discussed in part 1 of the series, templates writen in languages other than HTML must be compiled into HTML files before being served to the browser for rendering and this applies to Slim as well.

How Slim works

Start a Slim Project

There are many different ways to start a Slim project depending on how you want to use it.

Compile From Command Line

The easiest way to start is to install the slimrb command-line tool and use it to compile your Slim files into HTML files.

To install slimrb, we use gem install:

gem install slim

If you have not yet had gem installed on your computer, you may need to install ruby first. If you need help, check out Ruby docs.

Then, we can create a Slim file at a location of your choice:

touch index.slim

Add some code to the new file. I'll use code from our basic example here:

doctype html
html
  head
    title My Site
  body
    h1 Hello, World!
    p This is my site.

Finally, compile the file to HTML file from command line:

slimrb index.slim -p > index.html

The -p option tells slimrb to output a pretty (formatted) index.html file.

Use Slim in Ruby Frameworks

Most often, we want to use Slim in Ruby Frameworks such as Rails. In such cases, we can just write view templates in Slim (often with the help of a Slim template generator) instead of HTML and the built-in renderer of the framework will do the rest for us.

Slim can be also used in projects of other languages such as Javascript with the help of proper packages.

A More Advanced Example

This example demonstrates how to use variables, how to loop over a list, conditional rendering and css styling in Slim templates:

- heading = "My Shop"
- items = [{name: 'Calculator', price: 10, available: true}, {name: 'Note Pad', price: 2.5, available: false}, {name: 'Pen', price: 6, available: true}]

doctype html
html
  head
    title My Shop
  body
    h1= heading
    table
      thead
        tr
          th Item Name
          th Item Price
          th Availability
      tbody
        - items.each do |item|
          tr
            td= item[:name]
            td= item[:price]
            - if item[:available]
              td In Stock
            - else
              td.alert Out of Stock

css:
  table, th, td {
    border: 1px solid grey;
    border-collapse: collapse;
  }
  th, td {
    padding: 10px;
  }
  .alert {
    color: red;
  }

This template is compiled to the following HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>My Shop</title>
  </head>
  <body>
    <h1>
      My Shop
    </h1>
    <table>
      <thead>
        <tr>
          <th>
            Item Name
          </th>
          <th>
            Item Price
          </th>
          <th>
            Availability
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            Calculator
          </td>
          <td>
            10
          </td>
          <td>
            In Stock
          </td>
        </tr>
        <tr>
          <td>
            Note Pad
          </td>
          <td>
            2.5
          </td>
          <td class="alert">
            Out of Stock
          </td>
        </tr>
        <tr>
          <td>
            Pen
          </td>
          <td>
            6
          </td>
          <td>
            In Stock
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
<style type="text/css">
  table, th, td {
    border: 1px solid grey;
    border-collapse: collapse;
  }
  th, td {
    padding: 10px;
  }
  .alert {
    color: red;
  }
</style>

And our page should look like this:

An advanced example of Slim template

Please note that,

Spreading variable definition on multiple lines causes syntax error and that's why I kept the items definition on a single line (I haven't found a way to spread without an error yet).
We can also link external stylesheets instead of specifying css rules directly in the template. Suppose we have a styles.css in the same directory as our Slim template and we can link the style file like this, which is how we normally do in HTML files:

...
head
  / we can also use an external stylesheet like this↓
  link href="styles.css" rel='stylesheet' type='text/css'
...

Slim can do even more than the advanced example has demonstrated. For example, if you're working on a Rails project, it's likely you would want to create multiple partial templates and include them in other templates. This is when we'd want to use the = render method:

doctype html
html
  head
    title My Shop
  body
    = render 'header'
    div
      p This is my shop
    = render 'footer'

Note that the = render method is provided by frameworks like Rails but not available if you're using Slim as standalone template engine.

Conclusion

In this part of the series, we learned the basics of Slim, another templating language that is widely used in Ruby frameworks.

It shares a lot similarities with other templating languages like Pug in terms of general concepts and syntax. Thanks to its high expressiveness, it helps speed up development and improve code readability.

And that's it. If you have any questions or feedback on the series, please comment below. Thank you.

Pug: A HTML Templating Language

Jesse Wei — Tue, 03 Jan 2023 10:00:00 +0000

This series builds on my post, Supercharge Your Web Dev Workflow With Emmet, to which Maciek Fitzner posted a comment mentioning Pug.

Templating languages are widely used in Web development and two of the most popular ones are Pug and Slim. In this series, we're going to learn the basics of these two and hopefully they would help improve your workflow further.

Emmet vs. Templating Languages
Meet Pug
- An Overview
- How It Works
Start a Pug Project
Next Steps

Emmet vs. Templating Languages

The fundamental difference between Emmet and templating languages like Pug and Slim is that,

With the former which is just an editor extension, we write abbreviations which expand to full HTML code instantly when we press TAB. So we're basically still writing in HTML.
The latter, however, are different languages than HTML and have their own syntax. This means these template files must be converted (compiled, as we call it in the programming world) to HTML before being forwarded to browsers to render.

It should be noted that many templating languages do not only support HTML, but can generate other types of files as well. In this series, however, we'll focus on HTML.

Meet Pug

An Overview

Pug is a templating language for Node.js and the browser. It is often used to generate HTML, but it can also be used to generate XML or other types of documents.

How It Works

Here's an example of a simple Pug template that generates an HTML page with a heading and a paragraph:



doctype html
html
  head
    title My Site
  body
    h1 Hello, World!
    p This is my site.

This template would be compiled into the following HTML:



<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my site.</p>
  </body>
</html>

The rendered page from the HTML looks like this:

Rendered page from sample

As the example demonstrates, Pug uses a combination of whitespace, indentation, and special characters to distinguish between HTML elements, code blocks, and other constructs.

The Pug file is then compiled into HTML files before being served to the browser for rendering. In fact, all templating languages work in similar manner because browers can only read HTML.

How Pug works

Start a Pug Project

Before starting a pug project, make sure you have Node.js installed in your computer. Installation of Node.js is beyond this post, so do a bit of googling if you need any help.

Follow these steps to start a new Pug project:

Step 1:

Create a new directory for your project and navigate to it in the terminal. For example:



mkdir ~/my-pug-project
cd ~/my-pug-project

Step 2:

Initialize the project by creating a package.json file in your project root and install the Pug package. For example:



npm init -y
npm install pug

Or if you choose to use yarn:



yarn init -y
yarn add pug

Step 3:

Create a directory in your project root to hold your Pug templates and create a pug file in it:



mkdir views
touch views/index.pug

Then give the new file the following content:



doctype html
html
  head
    title My Site
  body
    - var name = 'Jesse'
    h1 Hello, #{name}!
    p
      | This is my site. It is powered by
      |
      strong Pug
      | .
    - var users = ['Alice', 'Bob', 'Charlie', 'Dan']
    ul
      each user in users
        li= user
    if users.length > 3
      p There are more than 3 users in the list.
    else
      p There are 3 or fewer users in the list.

In this pug file, we used some more advanced features of Pug such as variables, piped text, iteration and conditionals. If you want to further familiarize yourself with these concepts, check out the links.

Our pug template generates the following HTML code:



<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>Hello, Jesse!</h1>
    <p>This is my site. It is powered by
      <strong>Pug</strong>.
    </p>
    <ul>
      <li>Alice</li>
      <li>Bob</li>
      <li>Charlie</li>
      <li>Dan</li>
    </ul>
    <p>There are more than 3 users in the list.</p>
  </body>
</html>

Step 4:

We need a server to compile our Pug file into HTML file, so at our project root, create a server.js file:



touch server.js

And add the following content to it:



const express = require('express');
const app = express();

// Set the view engine to pug
app.set('view engine', 'pug');

// Set the views directory
app.set('views', './views');

// Define a route for the home page
app.get('/', (req, res) => {
  res.render('index');
});

// Start the server
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Listening on port ${port}...`);
});

As we're using the express package here, we need to install it:



npm install express

Or:



yarn add express

If you need help with express or want to learn more about it, check out its official docs.

Step 5:

Start the server by running:



node server.js

Now go to http://localhost:3000 and boom! Our page should be rendered properly like this:

Rendered page from advanced example

Next Steps

In the first part of the series, we learned the basics of Pug, a popular templating language for generating HTML. We saw some simple but inspiring examples that should be enough to help you get started.

If you want to dive a bit deeper into Pug, I'd recommend you have a look at their docs. Each of the topics is explained with code examples that you can try out instantly.

In the next part, I'll walk you through another templating language, Slim. So please follow me to stay tuned.

Supercharge Your Web Dev Workflow With Emmet

Jesse Wei — Thu, 29 Dec 2022 10:00:00 +0000

Emmet is a tool that allows you to quickly generate HTML and CSS code by using abbreviations and expanding them into full code.

It is built into many popular code editors, including Visual Studio Code, Sublime Text and Atom.

Today, let's take a look at how to use Emmet to boost your web development speed. I'll use VSCode as my editor, but feel free to pick up your favorite. You'll need to check out editor-specific docs of Emmet for the configuration part of the post if you choose something other than VSCode, but that should not be a problem for you to follow along.

Example Usage for HTML
- Represent relationships
- Represent attributes
- Represent Repeating Snippets
Example Usage for CSS
Advanced Configuration
Conclusion

Example Usage for HTML

The best part of coding HTML involves writing (deeply) nested structures with attributes such as classes and ids attached to tags. Emmet can help us generating highly complicated HTML structures with a single line of code.

To achieve that, Emmet use concise syntax to represent:

Relationships between tags
Attributes attached to tags
Repeating snippets

Represent relationships

One of the most common use cases of Emmet is to generate HTML tag hierarchy. Here is a quick example:

Emmet generating nested tags with > mark

We use > to represent parent-child relationship in Emmet. To represent sibling-sibling relationship, we use +:

Emmet generating sibling tags with + mark

We can even climb up from current level to upper level using ^:

Climb up to upper level with ^ mark

Here, we generated a p with two spans inside and a ul at the same level as the p.

Please note we can also achieve the same result by using grouping:

Same result by using grouping

We grouped the p and its children in a pair of parentheses and replaced climb-up mark (^) with sibling mark (+) for ul (it seems same structure can still be correctly generated even if you don't replace ^ with + here, but for semantic reasons, I think + is more appropriate in this case).

Represent attributes

HTML tags usually have attributes such as classes and ids. In Emmet, we use .classname and #id to represent classes and ids respectively:

Specify class with dot and id with sharp mark

It's as easy as that. For abbrevations for other attributes, check out the official Emmet cheat sheet.

Represent Repeating Snippets

Repeating structures usually take the most time to write and fortunately with Emmet, such snippets cannot be generated more easily:

Generate repeating tags with asterisk mark

To generate auto-incrementing ids, for example, we can combine asterisk with $ (dollar sign):

Generate auto-incrementing ids with * and $

Here is a more advanced example demonstrating auto-incrementing ids along with auto-incrementing text:

Generate auto-incrementing ids and text

Example Usage for CSS

Emmet makes coding with CSS just as easy as HTML. Each CSS rule has corresponding abbreviations and once you understand the patterns of abbreviations, you don't need to remember them:

Generating CSS code is as easy using Emmet

Please note that,

I wrote db, for example, instead of d:b as the cheat sheet suggests. It seems either way works, although it's not clear why. So choose the convention that suits you best.
While the cheat sheet does not mention, you can expand shorthand CSS rules, e.g. margin: 10px auto with m10:a or m:10:a as I did in the screenshot above.

Advanced Configuration

While Emmet is available by default for common file types such as html, slim, css and sass, you'll need to manually enable it if you're working on a different file type where Emmet is not activated by default.

For example, Emmet is not enabled by default for Ruby on Rails view files with the .erb extension. If I want to write HTML code in these files, I can update the emmet.includeLanguages setting in my VSCode's settings.json file like this:

{
  "emmet.includeLanguages": {
        "erb": "html",
  },
}

The key ("erb") on the left side is the target file type where I want Emmet to be available while the value ("html") is a file type that Emmet already supports. See VSCode docs on this for more information.

Conclusion

In this post, we took a quick look at some of the most common scenarios where Emmet can help us write HTML and CSS code times faster.

As I said, there's more Emmet can do for us than I demonstrated here. It has an amazing, super comprehensive cheat sheet which you can use as a reference.

Manage Node.js Versions With n

Jesse Wei — Wed, 28 Dec 2022 00:00:00 +0000

One of the first challenges you may come across when starting to learn Javascript is how to deal with multiple versions of Node.js.

Today, let's find out why you would need multiple versions of Node.js in the first place and how to manage them efficiently with n, a Node.js version manager that is very developer-friendly.

Why Multiple Versions of Node.js?

The main reason why you may need multiple versions of Node.js is compatibility.

Different versions of Node.js can be incompatible with certain packages or libraries and different projects are usually developed using different versions of Node.js.

For example, a package that was built for Node.js version 8 might not work with version 12. Also, you may have to work on a project that is developed with Node.js version 14 but you only have version 18 installed in your local computer.

By managing multiple versions of Node.js, you can ensure that your application is compatible with the packages and libraries it depends on and you can choose the right version to use for a particular project.

How to Manage Node.js Versions: Meet n

Now that we see why we may need multiple versions of Node.js, let's take a look at how to manage them.

Although we can just head to the official website of Node.js, download and install it, it is only one version and we cannot keep multiple versions of Node.js on our computer this way.

That's where Node.js managers come into play. A Node.js manager is itself a package, but it can help us install multiple versions of Node.js and switch between the versions easily.

The Node.js manager I want to introduce today is n, which is super easy to install and use.

Installation

If you have Node.js installed, you can just run:

npm install -g n

to install n.

If you haven't had Node.js installed yet, you can run these commands to first install the latest version of Node.js (to make npm available) and then install n with npm:

curl -L https://raw.githubusercontent.com/tj/n/master/bin/n -o n
bash n lts
npm install -g n

Other installation options include installing with brew or port for Mac users and installing from github. Check out the README of the n repo for more information.

After Installation

After n is installed, let's run:

sudo mkdir -p /usr/local/n
sudo chown -R $(whoami) /usr/local/n
sudo mkdir -p /usr/local/bin /usr/local/lib /usr/local/include /usr/local/share
sudo chown -R $(whoami) /usr/local/bin /usr/local/lib /usr/local/include /usr/local/share

These commands look daunting but basically what we're doing here is just take ownership of the n directory as well as other relevant system directories. This way, we don't have to use sudo to install packages with n or npm. Find out more about this from the installation guide.

Try It Out

To see versions of Node.js available for downloading:

n ls-remote

This lists the latest 20 versions, but if you want to list all versions, add the --all option:

n ls-remote --all

To see downloaded versions of Node.js:

It's as simple as that. This command output all versions that you've downloaded with the active version highlighted.

To download a specific version of Node.js:

n <version>

To download the latest version of Node.js:

n lts

To switch versions of Node.js, output downloaded versions first with:

and then, use arrow keys to select a version and press Enter (Return) to confirm:

  ο node/14.18.1
    node/19.2.0

For more information on the usage of n, check out its docs.

Conclusion

In this post, we took a quick look at why we might want to manage multiple versions of Node.js and how we can do it by using the n manager.

There are a couple of other alternatives to n, but I find n the easiest to get used to and its docs are great. Try it out now and I think you'll like it.

Javascript Prototype: Prototype Chain and Shadowing

Jesse Wei — Sat, 24 Dec 2022 10:00:00 +0000

In part 1 of the series, we learned the basics of Javascript prototype. We saw why it is important to understand it, what a prototype really is and looked at some relevant terms.

In this part, we'll continue our journey by diving a bit deeper into prototype and have a look at what prototype chain and property shadowing are.

Prototype Chain
Property Shadowing
Conclusion

Prototype Chain

Every object in JavaScript has a prototype, which is either an object itself or null. When a property or method is accessed on an object, JavaScript will first look for that property on the object itself. If it is not found, it will search its prototype. This continues until the property is found or the uppermost prototype, which is null, is reached. This process is called prototype chain.

As an example, let's say we have the following code:

let vehicle = {
  run() {
    return 'run, run, run!'
  }
}
let car = {
  drive() {
    return 'drive, drive, drive!'
  }
}
let myCar = {
  broken: true
}

myCar.drive() // TypeError: myCar.drive is not a function
myCar.run() // TypeError: myCar.run is not a function

When we try to access the drive() and run() methods on myCar, we get an error. This is no surprise, as myCar does not have these methods defined on it.

Let's add the following code before calling the methods:

...
Object.setPrototypeOf(car, vehicle) // add this
Object.setPrototypeOf(myCar, car) // and this

myCar.drive() // => 'drive, drive, drive!'
myCar.run() // => 'run, run, run!'

Now the errors are gone and we get the expected results from calling the methods. But wait, myCar still does not have these methods defined on it, does it?

Because we set the prototype of car to vehicle and the prototype of myCar to car, now when Javascript does not find the method drive() on myCar, it traverses up to its prototype (car) where it finds and calls the method. This is prototype chain in action and Javascript follows the chain to find and call run() too.

Prototype chain

Please note that the image above does not show the full story. The prototype chain can actually go even further beyond vehicle until it reaches null.

Full prototype chain

Near the top of the chain we have Object.prototype which is itself an object with methods like hasOwnProperty, toString and valueOf. As any objects down the chain inherit these methods, we can access these methods on vehicle, car and myCar.

For example,

myCar.hasOwnProperty('broken') // => true
myCar.hasOwnProperty('drive') // => false

Please note that setting the prototype of an object with Object.setPrototypeOf() is slow as explained here. Instead, it's recommended we create new objects with the desired prototype using Object.create().

const myNewCar = Object.create(car)
Object.getPrototypeOf(myNewCar) === car // => true

Property Shadowing

Property shadowing sounds abstract and daunting but it is actually a very simple concept. It basically describes what happens when an object and its prototype both define a property with the same name.

Because in a prototype chain the object is traversed before its prototype, we know the property defined on the object itself will be accessed or called (in case of a function) before Javascript reaches its prototype.

Considering the previous example after the prototype of myCar is set to car:

car = {
  drive() { // body of drive method },
  price: 100000 // add this
}
myCar = {
  broken: true,
  price: 50000 // add this
}
myCar.price // => 50000

In this case, we say the price on myCar shadowed the price property on the prototype of myCar.

Conclusion

In this part of the series, we looked at how prototype chain works and what property shadowing is.

If you followed along, you should've had a pretty solid idea on Javascript prototype. But there's just much more about it and in the next part, let's explore concepts like constructors, classes and inheritance which are all built upon the concept of prototype.

Javascript Prototype: The Basics

Jesse Wei — Sun, 18 Dec 2022 10:00:00 +0000

I think prototype is one of the hardest concepts to understand in Javascript. Some of the reasons for that may be:

More and more developers are using Javascript frameworks these days and most developers can get their job done without touching prototype.
There are a few terms about prototype that are just confusing, e.g. __proto__, getPrototypeOf and prototype.

So why bother even talking about it then? Because understanding how prototypes work can help you develop more efficient and organized code in JavaScript. If you want to become an experienced Javascript developer, you cannot escape it.

In this series, I want to share with you what I learned about prototype and hope it helps you a bit in your journey to Javascript mastery.

A Glimpse of Prototype
__proto__, Object.getPrototypeOf() and prototype
- __proto__ and Object.getPrototypeOf()
- prototype
Conclusion

A Glimpse of Prototype

In JavaScript, a prototype is an object that serves as a template for creating new objects. When a new object is created, it inherits the properties and methods of its prototype. This makes it easy to organize and extend your code.

This example demonstrates how to create an object with a particular prototype and how to access the object's prototype and (don't worry about the code at this point, we'll get to it later).

class Person {
  constructor(age) {
    this.age = age;
  }

  canDrive() {
    return this.age >= 18;
  }
}

const andy = new Person(10)
// check the prototype of the new object: andy
Object.getPrototypeOf(andy) === Person.prototype // => true
// call the method defined on the object's prototype
andy.canDrive() // => false

proto, Object.getPrototypeOf() and prototype

Now that we had a basic idea on prototype, it's time to clarify a few terms that cause most confusion: __proto__, Object.getPrototypeOf() and prototype.

proto and Object.getPrototypeOf()

To get the prototype of an object in JavaScript, we have two options:

Use the __proto__ property
Or the Object.getPrototypeOf() method

While many modern browser supports it, __proto__ is deprecated and it's recommended we use Object.getPrototypeOf().

Here is an example using both approaches:

const foo = {
  // properties and methods go here
};

// These two are equivalent↓
const fooPrototype = foo.__proto__;
const fooPrototype = Object.getPrototypeOf(foo);

prototype

Every function has a prototype property in Javascript. It's important to distinguish it from the notion, every object has a prototype.

The prototype of an object is in fact a property too, only that it cannot be accessed via someObject.prototype. Instead, we use someObject.__proto__ as we've seen above. In other words, it is the __proto__ property that points to the actual prototype of an object.

The prototype property of a function, on the other hand, serves as the prototype of new objects created using the function as constructor (that is, with the new keyword).

function foo() {}

const myObj = new foo() // call foo as constructor
Object.getPrototypeOf(myObj) === foo.prototype // => true

Is foo.prototype the prototype of foo? Certainly not. I said foo.prototype is the prototype of new objects created via new foo(), so it cannot be the prototype of foo itself.

What is the prototype of foo then? It is Function.prototype in most cases (by which I mean if you didn't assign a new prototype to it), because functions are all created calling Function as constructor (via new Function(args)) under the hood.

Object.getPrototypeOf(foo) === Function.prototype // => true

Please remember that the prototype property is itself an object whose prototype is Object.prototype (if you didn't override it).

Object.getPrototypeOf(foo.prototype) === Object.prototype // => true

To summerize,

The prototype of an object is a property that can be accessed via __proto__ and Object.getPrototypeOf().
prototype is a property that every function has. It is the prototype of new objects created by calling the function as constructor.
The actual prototype of a function (as distinguished from the prototype property) is Function.prototype (if you didn't override it).
The prototype property is itself an object whose prototype is Object.prototype (if you didn't override it).

Conclusion

In the first part of the series, we had an overview of prototype, clarified some key terms about it and saw some code samples to help us get an initial impression on how prototype works.

In part 2, we'll take a closer look at concepts like prototype chain and shadowing.

Fix Error: Cannot Redeclare Block-Scoped Variable in TypeScript

Jesse Wei — Thu, 15 Dec 2022 06:31:51 +0000

If you're using Typescript, it's likely you've run into this error, "Cannot redeclare block-scoped variable" a couple of times.

Although the issue is discussed widely online across multiple platforms, I could not find a comprehensive source explaing the why and the fix in depth.

So I wrote this article to help you understand the problem in context, look at different scenarios where you can run into the error and how to fix it in each scenario.

The Concept of Scope
Understanding the Error
Fixing the Error
- Scenario 1: Same variable in same block
- Scenario 2: Same variable in same project
Conclusion

The Concept of Scope

To understand the error and come up with a fix for it, we need to understand the concept of scope first.

Scope refers to the visibility and accessibility of variables and functions in different parts of your code. There are two main types of scope in JavaScript (Typescript): global scope and local scope.

Global scope refers to the scope where variables and functions can be accessed throughout your entire file or project. Variables and functions that are declared at the top level of your code, outside of any functions or blocks, are considered to be in global scope.

Local scope, on the other hand, refers to the visibility and accessibility of variables and functions within a specific block of code, such as within a function or a block of code delimited by curly braces ({}). Variables and functions that are declared within a block of code are considered to be in local scope and are only accessible within that block of code.

Understanding the Error

Now that we learned what a scope is, we can better understand the error "Cannot redeclare block-scoped variable 'foo'". As you may have realized, it basically says we're trying to declare a variable named foo in the same scope where a variable named foo already exists.

Fixing the Error

There can be a couple of different scenarios where you might run into this error and so we need to take a look at how to fix it in those scenarios.

Scenario 1: Same variable in same block

For example, this code throws the error mentioned because the variable foo is declared twice in the same function block:

function myFunction() {
  let foo = 1;
  let foo = 2;
}

You can fix it by either renaming the second foo variable:

function myFunction() {
  let foo = 1;
  let bar = 2; // renamed to bar
}

Or by moving the declaration of the second foo variable to a different block of code:

function myFunction() {
  let foo = 1;

  if (foo === 1) {
    let foo = 2; // a different scope
  }
}

Scenario 2: Same variable in same project

Say we have a simple project with the following hierarchy.

.
├── main.js
├── main.ts
├── node_modules
├── package-lock.json
└── package.json

In main.ts, we have this code:

let foo = 1;

Then, we compile main.ts to main.js and now, main.js has the following code:

var foo = 1;

Now back to the main.ts file and we get the error saying, "Cannot redeclare block-scoped variable 'foo'", even though we only declared foo once in our file.

This is because variables declared in a file, which does not have a top-level import or export, are available in the entire project. According to Typescript Docs,

Any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope.

Since we have another foo in main.js, Typescript complained with the error.

To fix this, we have a couple of options. First, we can just rename one of the foos to something else as we did in scenario 1, but most likely this is not desirable as we don't want to rename every variable after compilation.

Then, we can just add an export to main.ts to make it a module:

let foo  = 1;
export {}; // add this line

Or we can also wrap the variable with {} to move it into a local scope:

{
  let foo  = 1;
}

Another option to get rid of the error is, if you have tsconfig.json in your project root, adding the following setting:

{
  "compilerOptions": {
    "lib": ["ES6"]
  }
}

I googled multiple sources to find out why this works but unfortunately could not get a persuasive answer. Some argue it's about opting out Typescript's DOM typings (check out this answer and this thread), but no error is thrown even if I KEEP the DOM typings:

{
  "compilerOptions": {
    "lib": ["DOM", "ES6"]
  }
}

If you've got a better answer, feel free to share in the comments below.

Conclusion

In this post, I shared with you a common error in Typescript, the cause of it and how to fix it in different scenarios.

Even though there are quite a few answers and blog posts on this topic, very few of them explored the why in depth and discussed the different cases where you could run into the error.

I hope this article helps and if you have got an idea why this setting,

{
  "compilerOptions": {
    "lib": ["ES6"]
  }
}

did the trick, please comment below. Thank you.

Forem: Jesse Wei

A Hands-On Guide to Figma's Component Properties

Table of Contents

Prerequisites

What Are Component Properties

Types of Component Properties

Boolean Property

Example

Instance Swap Property

Example

Text Property

Example

Variant Property

Example

A Challenge

Conclusion

Implement Click-And-Copy With Clipboard API

Table of Contents

What We Will Build

HTML & CSS

Clipboard API

An Overview

Elements and Event Listeners

Click-and-Copy Handler

Form Submission Handler

Conclusion

Supercharge Your HTML&CSS Workflow With Pug and TailwindCSS

Table of Contents

Prerequisites

How Pug Works

How Tailwind CSS Works

Build and Deploy an Example in <10 Minutes

Get Started

Pug to HTML

Add Tailwind CSS Classes

Go to Production

Conclusion

Implement a Dynamically Displayed Header With Window & Element Scroll Positions

Table of Contents

An Overview of Our Example

HTML & CSS

Query and Store Elements

Element.getBoundingClientRect()

window.scrollY

Event Listener

Conclusion

Understanding Assignment and Reactivity in Svelte

Table of Contents

My Question

Assignment With Side-Effect

$$invalidate and Indirect Assignment

Conclusion

Slim: A HTML Templating Language

Table of Contents

A Basic Example

Start a Slim Project

Compile From Command Line

Use Slim in Ruby Frameworks

A More Advanced Example

Conclusion

Pug: A HTML Templating Language

Table of Contents

Emmet vs. Templating Languages

Meet Pug

An Overview

How It Works

Start a Pug Project

Next Steps

Supercharge Your Web Dev Workflow With Emmet

Table of Contents

Example Usage for HTML

Represent relationships

Represent attributes

Represent Repeating Snippets

Example Usage for CSS

Advanced Configuration

Conclusion

Manage Node.js Versions With n

Why Multiple Versions of Node.js?

How to Manage Node.js Versions: Meet n

proto, Object.getPrototypeOf() and prototype

proto and Object.getPrototypeOf()