One of the most effective ways to learn something, is having hands-on experience. The **ABC** (Always Be Coding) will teach you far more than any other course or book.

🌟 **Related**: [Learn to Code For Free And Get a Job](https://spacebro.io/articles/learn-code-free-get-a-job)

We, as developers, are prone to fall into the [tutorial hell](https://www.urbandictionary.com/define.php?term=Tutorial%20Hell). We watch tutorial after tutorial, trying to learn something new, but we never put what we learn in practice, which ends in a very poor learning process. If you are trying to learn something new, you can follow these steps to drastically improve your process:

- 💡 **Dive into the subject** you want to learn. Is it a programming language or framework? Go to the documentation and skim through it. Read the basics and look for a **Getting started** section.
- 📚 Learn **JUST ENOUGH** to get started. And I mean just enough. There's no need to specialize when you're starting out. For example, if you want to learn a new programming language, focus on learning how to declare variables, lists, arrays, how to loop collections, control sentences and that's it.
- ✅ **Take action**. Stop watching/reading tutorials and create projects. You can clone popular websites, or come up with your own ideas.
- 🥇 Repeat until you feel comfortable with what you know.

## The 30 Days of JavaScript Coding Challenge

The purpose of this challenge, is to **create one JavaScript project per day**, for 30 days straight. That strategy would help people to take action and see results almost immediately.

By the end of the challenge, not only you'll feel more comfortable with core JavaScript concepts, but you will have a set of projects you can add to your **coding portfolio**. That's a double win!

### Rules
- I will create **one project per day**, until completing 30 projects.
- I will **update the GitHub repo with the code**. You will find the  starter code, and the solution.
- I will update this post with the list of projects once they're completed.
- 👀 If you see a bug, feel free to submit a Pull Request!

### Join The Challenge
Show the world your progress! Use the hashtag `#30DaysOfJS` and let me know how you're progressing. You can [mention me on Twitter](https://twitter.com/spacebromx), and I will retweet you ⚡️

### Project List
This list will be updated daily!
- [How To Create A Multi-Step Form in Vanilla JavaScript](https://spacebro.io/articles/crate-multistep-form-vanilla-js)
- [How To Create An Animated Sidebar With CSS and JavaScript](https://spacebro.io/articles/create-animated-sidebar-css-javascript)
- [How To Create An Analog Clock With CSS and JS](https://spacebro.io/articles/create-analog-clock-css-javascript)
- [How To Create A Digital Clock WIth CSS and JS](https://spacebro.io/articles/create-digital-clock-css-js)
- [How To Create A Tip Calculator With CSS and JS](https://spacebro.io/articles/create-tip-calculator-javascript)

### Further resources
- [JavaScript 30](https://javascript30.com/) by Wes Bos.
- [100 days, 100 projects](https://www.florin-pop.com/blog/2019/09/100-days-100-projects/) by Florin Pop.

Become a JavaScript master by creating 30 projects in 30 days. Learn the basics, improve your skills and build your coding portfolio with this collection of cool projects you can showcase.

30 Days of JavaScript Coding

## Table of Contents

Speed is very important when it comes to user experience. Not only the average attention span of Internet [users is decreasing](https://www.digitalinformationworld.com/2018/09/the-human-attention-span-infographic.html), but people also expect things to happen almost instantly. Back in 2015, you only had **around 8 seconds to grab and hold the attention** of a person, and if we talk about e-commerce, I'm pretty sure that number is even lower.

> The 100ms rule of latency
> The rule states that every interaction should be faster than 100ms. Why? 100ms is the threshold “where interactions feel instantaneous.”

Paul Buchheit, the creator of Gmail.

But what am I writing about this? Well, I've already written about ways to improve the loading time of your website: you can [subset your web fonts](https://spacebro.io/articles/subset-web-fonts-make-site-fly) or [lazy load](https://spacebro.io/articles/lazy-loading-content-javascript) the content to deliver a better experience to your users.

But there's another cool trick you can use if your site was created using NextJS or React. The main goal is to replace React, which itself is an amazing framework, with , a lightweight alternative that barely accounts for 3 Kb of your total bundle size. It has a great performance and it can handle most of the things you'd need React for.

Certainly, there are some [differences to React](https://preactjs.com/guide/v8/differences-to-react/) but in most cases, you can find a workaround.

## React vs Preact for NextJS

In order to use [Preact](https://preactjs.com/), we need to install it as a dependency:

```bash:bash.sh
# Use your favorite package manager
yarn add preact
npm i preact
```

Then, we need to configure NextJS to use Preact for the production build. We need to tweak the `next.conf.js` file as follows:

```js:next.conf.js
webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat',
      })
    }

    return config
  },
```

Now, the next time we run `next build`, we will see a big difference in the size of the bundle.

Take a look at the image below. It is the result of running `next build` with React. The first load JS shared by all the chunks is **85.2 kB**. Not bad at all, but let's see if we can improve a little bit.

![NextJS and React](https://spacebro.info/assets/a558fd26-37a0-4d66-8f79-da94b2045d8f)

By running the same command `next build`, but this time with Preact, I got the following results:

![NextJS and Preact](https://spacebro.info/assets/29d93d6f-452e-4ce0-a254-edc761946f17)

The first load JS shared by all the chunks is **51.5 kB**. That's a big difference in the size of the bundle. After switching libraries, I was able to **save around 60% of the bundle size**. Amazing.

If you find a feature that is not supported by Preact yet, you can take a look at [preact-compat](https://github.com/preactjs/preact-compat), a compatibility layer that makes React-based modules work with Preact, without any code changes.

Thanks to [Lee Robinson](https://leerob.io/), the person I learned this trick from.

Learn how to improve the loading time of your NextJS or React-based website by using Preact, a high-performance and lightweight alternative to React.

Make Your NextJS Site Even Faster By Replacing React With Preact

In this project will **create an animated sidebar with CSS and vanilla JavaScript**. We'll start with a basic layout. A left sidebar that hosts a menu, and a content section. When the user press a button, the left sidebar will be revealed with a smooth animation.

If the button is clicked again, the sidebar will hide, also with a cool animation.

## Table of Contents

## Step 1: Create the HTML Markup

You need the HTML to build the layout: the menu and the content. I chose to use [BEM](http://getbem.com/introduction/) to name my classes, but feel free to use your own naming convention.

```html:index.html

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<div class="main">
	<div class="sidebar sidebar--isHidden">
		<ul class="sidebar-menu">
			<li class="sidebar-menu__item"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
			<li class="sidebar-menu__item"><a href="#"><i class="fa fa-rss" aria-hidden="true"></i> News</a></li>
			<li class="sidebar-menu__item"><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i> Contact</a></li>
			<li class="sidebar-menu__item"><a href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> About</a></li>
		</ul>
	</div>
	<div class="content">
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum neque facere enim vero quia hic, exercitationem doloribus qui reiciendis cum, voluptates iure nobis aperiam earum, reprehenderit quos voluptate eum inventore!
		<div style="text-align: center; margin-top: 2rem">
			<button id="toggle">Show Sidebar</button>
		</div>
	</div>
</div>
```

## Step 2: Add the CSS

I chose colors from a trending palette that I found via [coolors](https://coolors.co/palettes/trending). Also added basic styling to the links and the buttons to make it look a little bit nicer. Experiment with your own styles!

Note: I'm using SCSS, because I like it more 🚀

```css:styles.css
*,
html {
	margin: 0;
	padding: 0;
}

.main {
	font-family: Arial, Verdana, sans-serif;
}

.sidebar {
	background-color: #264653;
	width: 12rem;
	height: 100vh;
	padding: 0;
	position: fixed;
	transition: transform 300ms ease-in;

	&--isHidden {
		transform: translateX(-12rem);
		transition: transform 300ms ease-out;
	}

	&-menu {
		list-style: none;
		padding: 1.5rem;
		margin-top: 0;

		&__item {
			display: block;
			cursor: pointer;
			margin-bottom: 0.5rem;

			a {
				color: #e9c46a;
				text-decoration: none;
				display: block;

				&:hover {
					color: #e76f51;
					transition: color 150ms linear;
				}
			}
		}
	}
}

.content {
	background-color: #2a9d8f;
	padding: 2rem;
	height: 100vh;
	color: white;
}

#toggle {
	background-color: #e9c46a;
	border: 2px solid #f4a261;
	padding: 0.5rem 2rem;
	cursor: pointer;
	transition: all 150ms linear;

	&:hover {
		background-color: #f4a261;
		transition: all 150ms ease-in;
	}
}
```

## Step 3: Add the JavaScript

We will use JavaScript to dynamically add/remove a CSS class. If  you click a button, the sidebar will get a new class: `sidebar--isHidden`. If you click the button again, and the sidebar already has the class `sidebar--isHidden` attached, then the class will be removed.

To add a nice little touch, we will change the text of the button, depending on whether the sidebar is visible or not.

```js:index.js
window.addEventListener("DOMContentLoaded", () => {
	document.getElementById("toggle").addEventListener("click", () => {
		const sidebarEl = document.getElementsByClassName("sidebar")[0];
		sidebarEl.classList.toggle("sidebar--isHidden");

		document.getElementById("toggle").innerHTML = sidebarEl.classList.contains(
			"sidebar--isHidden"
		)
			? "Show Sidebar"
			: "Hide Sidebar";
	});
});
```

And that's it for today. You can go directly to [Codepen](https://codepen.io/spacebromx/pen/JjyJeLB) to see a working demo, or get the code from [GitHub](https://github.com/spacebromx/30-days-of-javascript-coding). I'm also adding an embedded view of the codepen sandbox down below.

<CodePen codePenId="JjyJeLB" />

I hope you're having fun creating these little projects. This is part of the series [30 Days of JavaScript Coding](https://spacebro.io/articles/30-days-javascript-coding). If you like it, please share it with your friends ⭐️

Learn how to create an animated sidebar with CSS and JavaScript. We will use CSS animations and translations to show / hide the sidebar

How To Create An Animated Sidebar With CSS and JavaScript

Coding has become a very valuable skill nowadays, specially after the start of the COVID-19 pandemic. More and more job opportunities in the field of IT are created every single day, and the good news is that anyone can have a coding job. You don't need a Computer Science degree anymore. And that's why I decided to create this collection of resources that will help you to **learn to code for free and get a job**. All the investment you need is your time!

## Table of Contents

## School-like Platforms
These platforms require you to sign up (at no cost), and then, you can progress through the course, at your own pace. Sometimes, you'll be required to submit some kind of homework or assignment, and at the end of the course, you can even get a certificate of completion.

### [Coursera](https://www.coursera.org/)

They have a lot of courses, under a lot of subjects: Data Science, Computer Science, Business, Health, etc. Some of them are paid, but the majority are free. You can filter by subject, language, duration and skills.

![](https://spacebro.info/assets/0a5efa48-b85e-4d2f-9037-0b19c09f977f)

**Pros ✅**

- Lots of free content
- Courses by top universities like University of Houston, University of Tokyo, and more
- Content available in multiple languages

**Cons 🔴**

- Can be a little intimidating at first, due to the content volume
- You need to signup to track your progress

### [edX](https://www.edx.org/)

This is very similar to **Coursera**, because there's a lot of free content, spanning across multiple fields. At this moment, there are around 700 courses about Computer Science alone, and there are lectures that explain the basics (algebra, data structures, algorithms, etc). IBM is a big supported of the platform, so you can expect quality content.

![](https://spacebro.info/assets/52a88e5c-fa12-4836-a3ae-6f57faafdf34)

**Pros ✅**

- Lots of free content
- Courses by ivy-league universities like Harvard, Berkley, MIT and more
- Content available in multiple languages
- Content available either as a course or a program (Programs are more in-depth courses, structured, and commonly they are paid)

**Cons 🔴**

- Some content is theory intense, so you'll need to put more time to grasp the core concepts
- You need to signup to track your progress

### [MIT OpenCourseware](https://ocw.mit.edu/index.htm)

This is a platform created by the MIT, with tons of content that was used in real on campus classes. They are very formal, and theory dense, so expect to go through the lessons more than once in order to understand the concepts.

![](https://spacebro.info/assets/803c98a1-0e64-4988-accb-3b267572f33c)

**Pros ✅**

- Top quality content, taught by world renowned professors
- Deep and solid foundations. They teach the science behind every concept, and how it is applied on the industry
- You can download the course material, and watch the sessions on demand

**Cons 🔴**

- The content is not that easy to digest. After all, we're talking about the MIT here. Probably you'll need to watch a session more than once to get the most out of the courses
- The UI is not that great, compared to other platforms

### [Khan Academy](https://www.khanacademy.org/)

Khan Academy was created with the intention of providing useful learning resources to kids, middle and high school students, and people who want to learn new skills. They offer courses in different areas like Economics, Biology, and of course, Computing, where they have wonderful courses that will teach you  how to create websites with HTML and CSS, JavaScript, SQL and more.

![](https://spacebro.info/assets/c1b761f5-8695-4e8f-9c3e-055e659ed7c7)

**Pros ✅**

- The content is great, and is divided by school grade
- The interface is slick, and easy to navigate
- The courses contain quizzes and challenges that will help you to digest the material better

**Cons 🔴**

- The content is not as expense as in other platforms
- The courses are available in English only

### [Udacity](https://www.udacity.com/)

Udacity offers a great collection of courses in different topics within the IT field. From Web Development to Machine Learning, you can find a wide variety of material. Besides offering courses for free, they have a more robust learning path called Nano degree, which is not free, but will prepare you to get a job faster.

![](https://spacebro.info/assets/6921f23f-dc4a-4462-b9a8-d6dd4a6f11c6)

**Pros ✅**

- The main focus of the content is IT
- Big companies like Google, IBM, Amazon, Microsoft, Intel, and many more, either upload content, or sponsor it, so the quality of the courses is great
- They offer different specialization paths within the IT industry

**Cons 🔴**

- The courses are available in English only
- The nano degree content is not free. Usually it ranges from $250 to $1,000+ USD, depending on the topic. This is not a bad thing *per se*, because it comes with more benefits.

### Can I Learn Coding on My Own And Get a Job?

If after checking out the platforms that I suggested, you're still unsure about the possibility of learning to code on your own, I'm going to share even more resources with you, so you can go and find the method / course that fits your style better.

## Bootcamp-like Platforms

Bootcamps are intensive courses, with an emphasis on practical skills. They give you a syllabus, you study a lit bit of theory, and the rest is on-hands experience. The goal is to make you as efficient as possible in the shortest amount of time. You have to complete a lot of projects, and for sure there will be times when you feel discouraged, but you have to understand that **is okay to feel this way**.

Feeling frustrated and disoriented is part of the learning process. Every time you feel challenged, it means you're out of your comfort zone, and you're growing, so keep up, take a breath, and keep coding.

### [freeCodeCamp](https://www.freecodecamp.org/)

This is my favorite site in the world ⭐ . If I had to start over again, I would go to freeCodeCamp and learn as much as I could. It's free and they have a lot of courses in a lot of topics like web development, SQL, Machine Learning, Serverless, etc.

![](https://spacebro.info/assets/5e89c11b-4514-4a26-996c-e14c355f43c1)

If you're more of a visual person, they have a [YouTube channel](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ) where they publish full courses, **for free**. You will learn a lot from this source if you put the time and effort.

### [GA Dash](https://dash.generalassemb.ly/)

This is another free resource, where you can learn the basics of web development. Quoting from their website:

> Dash is a fun and free online course that teaches you the basics of web development through projects you can do in your browser.

![](https://spacebro.info/assets/a7ea9c31-9086-4251-bccb-a188124faa67)

They focus on **HTML5**, **CSS3** and **JavaScript**, which is 90% of what you need to become a web developer. Their site is slick, and easy to navigate, and you only need an account to track your progress.

### [The Odin Project](https://www.theodinproject.com/)

This one is special for me too. I used it back in the day when I was learning full-stack development and I really liked the way they teach. The supporting material is of high quality, and contains a lot of very good, useful content.

![](https://spacebro.info/assets/74a6aa8a-d00e-47ba-9335-905208c92b56)

You can choose between 2 paths: fullstack with Ruby on Rails, or fullstack with JavaScript. After completing either path, you'll know not only frontend development, but also backend development. They offer a **Getting hired** module where they teach you how to apply to jobs, and how to prepare for the interviews.

### [Sololearn](https://www.sololearn.com/)

I wasn't aware of this platform, until very recently. They offer different courses, very well structured, and easy to follow. You can find language basics like JavaScript, or Python, or more specific courses for example: responsive design, React, SQL or R. They offer a Pro subscription that will remove ads from the platform, and will let you set learning goals.

![](https://spacebro.info/assets/dc613f06-e190-4ddf-aac4-0ce97bcf64cc)

The free version gives you access to all the courses, so that's probably enough for most of the people.

## YouTube Channels to Learn to Code For Free

There are hundreds, if not thousands of YouTube channels dedicated to teach people how to code. Every day, more channels are created, so is really hard to keep up, and that's why I'm going to recommend the ones I enjoy the most.

Probably I am not mentioning a lot of good channels, but feel free to [tag me on Twitter](https://twitter.com/spacebromx) and I will update this list:

- [Traversy Media](https://www.youtube.com/c/TraversyMedia). 📈1.6 M subs. Web Development in general.
- [Fireship](https://www.youtube.com/c/Fireship). 📈866k M subs. Web Development in general. Quick videos.
- [Sonny Sangha](https://www.youtube.com/c/SonnySangha). 📈89.3 k subs. Web Development in general. Create clones of popular apps.
- [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified). 📈693 K subs. Web Development in general.
- [James Q Quick](https://www.youtube.com/channel/UC-T8W79DN6PBnzomelvqJYw). 📈108 K subs. Web Development in general.
- [Stefan Mischook](https://www.youtube.com/user/killerphp). 📈197 K subs. Software Development and freelancing.
- [LearnCode.academy](https://www.youtube.com/user/learncodeacademy). 📈748 K subs. Web Development.
- [RealToughCandy](https://www.youtube.com/channel/UC54NcJvLCvM2CNaBjd5j6HA). 📈46.7 K subs. Web Development and freelancing.
- [Kent C Dodds](https://www.youtube.com/c/KentCDodds-vids). 📈38.7 K subs. Web Development focused in React.
- [Chris Sean](https://www.youtube.com/channel/UCu1xbgCV5o48h_BYCQD7KJg). 📈97.1 K subs. The life of a self-taught web developer.

Have you asked yourself: can I teach myself code and get a job? Well, the answer is YES, YOU CAN. Take a look at this list of free resources that will teach you how to code

Learn to Code For Free And Get a Job

## Table of Contents

Forgive me for this *click-baity* title. I've been re-reading [JavaScript: The Good Parts](https://www.oreilly.com/library/view/javascript-the-good/9780596517748/) lately and the title stuck on my head. Now that you're here, I promise you will learn something new, just like I did when I prepared my notes to write this article.

## Lazy what?

We're talking about [lazy-loading](https://en.wikipedia.org/wiki/Lazy_loading#:~:text=Lazy%20loading%20%28also%20known%20as,if%20properly%20and%20appropriately%20used.). Or in other words, loading content asynchronously. That technique gives us the chance to deliver faster sites and apps because we don't have to load all the content when the page loads for the first time. 

Instead, we want the content to be loaded on-demand, just when we need it. There's no point in loading things that are out of our sight, right?

This is especially useful when you have a lot of assets to load (think of a directory, a gallery view, etc), or when you have something happening in the background, like playing a track or a video.

Using **vanilla JS only** we can lazy load assets.

### The Old-Fashioned (and Non-Performant) Way

The `window.onscroll` event allows us to watch how many pixels the user has scrolled. We can even determine if an element is inside the viewport by getting its coordinates. This is how was done in the past:

```js:js-vanilla-old-school.js
function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);

    return isVisible;
```

Thanks [StackOverflow](https://stackoverflow.com/a/22480938).

But, what's the problem with that solution?
- What if there are items sent out of the flow (fixed or sticky positioned elements)?
- What if we resize the window?
- What if I want to know if the element is **partially visible**?
- Are these calculations even cached?

For a long time, this is how we could tell if an element
were in the viewport. Good old JS.

### The Modern (And Performant) Way

![intersection](https://spacebro.info/assets/d3461b94-5443-43d9-a1f3-4f8d94a2f9dd)

Instead of manually calculating the position of an element, and compare it to the height of the screen, now we have a new weapon in the arsenal. [The Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). It not only sounds cool. It is cool.

Let's say that you have some images loaded in your document. And you want to lazy-load them because they're heavy and will impact the performance of your site.

```html:page.html
<div class="content">
  <p>
    <img
      src="http://sample.com/small-placeholder-image.jpg"
      data-src="http://sample.com/original-big-image.jpg"
    />
  </p>
  <p>
    <img
      src="http://sample.com/small-placeholder-image.jpg"
      data-src="http://sample.com/original-big-image.jpg"
    />
  </p>
  <p>
    <img
      src="http://sample.com/small-placeholder-image.jpg"
      data-src="http://sample.com/original-big-image.jpg"
    />
  </p>
</div>
```

Notice how, by default, we're loading a very small placeholder image, rather than the full-res asset. Also notice that I'm using the `data-src` attribute to store the URL of the original asset.

Now it's time to user an `observer` to tell us whether an item is inside the viewport or not:

```js:sample.js
if ('IntersectionObserver' in window) {
    // just to be safe, we check if the browser supports the observer API
    const images = document.querySelectorAll('.content img')

    let observer = new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return
          const image = entry.target
          const newURL = image.getAttribute('data-src')
          image.src = newURL
          observer.unobserve(image)
        })
      },
      {
        threshold: [1],
      },
    )

    images.forEach((image) => {
      observer.observe(image)
    })
  }
```

Wow, there's a lot going on here. Let's break down the code above to understand better what's happening.

First, you have to know that an `IntersectionObserver` is like a sentinel; whenever an item intersects an element, the `observer` will perform whatever you tell it.

So, we have that the `IntersectionObserver` receives 2 parameters here. The first one is a `callback` function that is executed whenever an element you wish to monitor enters or exits another element (the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) by default). The second one is an object with [options](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer).

Inside the callback, first, **we verify that the current element is being visible** in the viewport (isIntersecting is `true`).

```js:sample.js
...
(entries, observer) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return
      const image = entry.target
      const newURL = image.getAttribute('data-src')
      image.src = newURL
      observer.unobserve(image)
    })
  },
  {
    threshold: [1],
  },
```

**Once we've confirmed that the element is visible**, we will replace the `src` attribute with the value of `data-src` . It means that instead of loading the small placeholder, we'll see the full-res image.

![](https://spacebro.info/assets/a0ac5ff6-0a4a-48f5-82a1-64c9d0ceeaa9)

Lastly, you'll notice that we passed the property `threshold`. It controls what percentage of the item needs to be intersected before it's considered visible. A threshold of `1.0` means that when 100% of the target is visible within the element specified by the root option, the callback is invoked.

Probably it doesn't make too much sense right now, but if you want to dig deeper into the threshold property, I recommend you to [check out this article](https://css-tricks.com/a-few-functional-uses-for-intersection-observer-to-know-when-an-element-is-in-view/) by CSS-Tricks, where visually, they explain how it works.

You can see the finished example in the following pen:

<CodePen codePenId="mdOazGm" tabs={['js', 'result']} />

Not only we leveraged a built-in feature of your browser, but we also managed to detect when an item is visible by using a fast, performant and elegant tool.

James Q. Quick explains this concept in a very cool, concise video. I also recommend you to watch it:

<YouTube youTubeId="BmRZi4ryiMQ" />

There are many more interesting articles where you can find gold nuggets regarding the IntersectionObserver API:
- [Lazy Loading Images using the Intersection Observer API](https://blog.bitsrc.io/lazy-loading-images-using-the-intersection-observer-api-5a913ee226d)
- [How to Implement Lazy Loading in React with Intersection Observer](https://levelup.gitconnected.com/how-to-implement-lazy-loading-in-react-with-intersection-observer-61c0e53ec8d)
- [How To Defer, Lazy-Load And Act With IntersectionObserver](https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/)

If you're using **Next.js**, there's no need to worry because Next Image is a component that takes care of lazy loading and responsive images. If you're using React, definitely you should take a look at [this article](https://medium.com/walmartglobaltech/lazy-loading-images-intersectionobserver-8c5bff730920), written by Joon Park, a Software Engineer who works at Walmart Labs.

### Compatibility

If you're using IE or Opera Mini, I'm sorry to tell you that you are out of luck, because the Intersection Observer is not supported in those browsers. Luckily, we have some [polyfills](https://github.com/w3c/IntersectionObserver/tree/main/polyfill) available to support older browsers.

![compatibility](https://spacebro.info/assets/be0b0725-bd5a-46ca-8646-d663aae8fd60)

You can check the compatibility chart in more detail by visiting the [can I use?](https://caniuse.com/intersectionobserver) page.

Credit: The top image was taken from [@mciastek's article](https://medium.com/@mciastek/animate-on-scroll-with-intersection-observer-ea744cddb876).

Learn how to implement lazy-loading in Javascript by using the Intersection Observer. In a few, easy steps, you'll be able to understand and master this feature and make your sites even better by loading assets on-demand.

Lazy Loading Content In JavaScript: The Good Parts

Have you tried using **Fullcalendar with Next.js 10 or higher?** If so, chances are that you have encountered some issues that probably made you want to pull your hair more than once. Fortunately, there's an easy workaround that involves installing a couple of dependencies and tweaking your `next.config.js file`. 

## Table of Contents

When I faced this problem, I couldn't find a working solution for recent versions of Next.js. I tried looking into Next.js and [Fullcalendar](https://fullcalendar.io/)'s repos on Github, but I didn't manage to make it work properly.

## Requisites

We will be working with Next.js `11.0.2` (the latest stable version as of October 2021), and React `17.2`. That combination should work for most cases but feel free to experiment with different versions to match your environment.

## 1. Install Fullcalendar

First, you'll need to add Fullcalendar to your project. Copy and paste the following command in your terminal:

```bash
# yarn
yarn add @fullcalendar/common @fullcalendar/interaction @fullcalendar/react @fullcalendar/timegrid

# npm
npm i @fullcalendar/common @fullcalendar/interaction @fullcalendar/react @fullcalendar/timegrid
```

That will install the Fullcalendar core, along some dependencies.

If you were using plain React, this would suffice. However, Next.js handles the imports in a different way. Go to your `pages/index.js` file, and import the following:

```jsx:pages/index.js
import FullCalendar from "@fullcalendar/react";
// The import order DOES MATTER here. If you change it, you'll get an error!
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
```

Immediately after, you would see an error like this:

> ./node_modules/@fullcalendar/common/main.css
> Global CSS cannot be imported from within node_modules.
> Read more: https://err.sh/next.js/css-npm
> Location: node_modules/@fullcalendar/common/main.js

This happens when a package inside `node_modules` tries to import a `CSS` or `SCSS` file directly. Currently, Next.js does not support this behavior ([as stated in the docs](https://nextjs.org/docs/messages/css-npm)). Either you need to find an alternative to this package, or bypass the restrictions imposed by Next.js. Of course, we will choose the second option 🚀

## 2. Install next-transpile-modules

In the terminal, copy and paste the following command:

```bash
# yarn
yarn add next-transpile-modules @babel/preset-react

# npm
npm i next-transpile-modules @babel/preset-react
```

[next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules) is used, among other things, to transpile CSS included in transpiled packages. In other words, it allows packages inside `node_modules` to include CSS/SCSS files.

## 3. Create a custom config file for Next.js

Now create a file called `next.config.js` in the root of your project. If you already have one, modify it to match the following:

```js:next.config.js
/** @type {import('next').NextConfig} */
const withTM = require("next-transpile-modules")([
  "@fullcalendar/common",
  "@babel/preset-react",
  "@fullcalendar/common",
  "@fullcalendar/daygrid",
  "@fullcalendar/interaction",
  "@fullcalendar/react",
  "@fullcalendar/timegrid",
]);

module.exports = withTM({
  // your custom config goes here
});

```

That would enable the packages in the list to be able to include CSS/SCSS files.

The last part would be to include the CSS files in your app. Inside your `_app.js` file, import these files at the top:

```js:_app.js
import "@fullcalendar/common/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
```

And that's it. Now the only part missing is adding the `Calendar` component itself. Here's an example:

```jsx:calendar.jsx
import FullCalendar from "@fullcalendar/react";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import { useRef } from "react";

const Calendar = () => {
  const calendarRef = useRef(null);
  return (
    <FullCalendar
      innerRef={calendarRef}
      plugins={[timeGridPlugin, interactionPlugin]}
      editable
      selectable
    />
  );
};

export default Calendar;
```

Now you can use this amazing library in your Next.js projects. If you want to take a look, I will embed a sandbox with the required configuration. Feel free to browse the code and fork it.

<CodeSandbox codeSandboxId="fullcalendar-nextjs-10-10qnj" />

I hope this helps you! If so, [let me know on Twitter](https://twitter.com/spacebromx)!



Use Fullcalendar and Next.js (10 or higher) together. Get rid of the ⟨⟨ Global CSS cannot be imported from within node_modules ⟩⟩ error

How To Use Fullcalendar With Next.js (v10 or higher)

Web Fonts are a vital part of both design and UX. With so many fonts and options like Google Fonts, we have more flexibility than ever. But as they [Peter Parker principle](https://en.wikipedia.org/wiki/With_great_power_comes_great_responsibility) says:

> With great power comes great responsibility

## Table of Contents

And that's precisely why we need to be mindful of the implications of using, and misusing, web fonts. Did you know that [Web Design is 95% Typography](https://ia.net/topics/the-web-is-all-about-typography-period)?

There are a lot of things related to web fonts optimization. Great developers have talked extensively about this matter, so I'm going to recommend you to first, [read this article](https://leerob.io/blog/fonts) on Lee Robinson's blog. 

If you read the article that I shared, by now you know that:

- Fonts should be **self-hosted**, when possible.
- You must **preload your critical assets** (fonts included).
- Use the CSS prop `font-display` wisely. TL: DR `font-display: optional` is your best bet.
- You should use variable fonts.
- And least, but not last: subset your fonts.

## Web Fonts Subsetting

**Subsetting** is the practice of stripping down a font to make it lighter to download. If your content is written in a language that uses the Latin alphabet (English, Spanish, Italian, etc), then you don't need glyphs belonging to the [Cyrillic alphabet](https://en.wikipedia.org/wiki/Cyrillic_script), unless you want to throw some Russian words into the mix.

By removing unused glyphs you can save quite a lot of network resources, and make your visitor's experience better.

### How To Subset Web Fonts?

There are quite a few options to accomplish this, but I'm going to share how I did it. It involves a little bit of use of the command line to run a few scripts but don't worry, it's easy to follow along.

**Requisites**

1. You'll need to know **what layout features you want to use**: they represent different special features like ligatures, fractions, denominators, glyphs. etc. If you want to know more, there's a big list of [all the registered features](https://docs.microsoft.com/en-us/typography/opentype/spec/features_ae#tag-cswh) a web font can have. **:zap: Extra tip**: you can inspect the features of any web font by using an online, free tool called [wakamaifondue](https://wakamaifondue.com/). Download any font from [Google Fonts](https://fonts.google.com/), upload it to wakamaifondue, and inspect the font to learn more.
2. [Python](https://www.python.org/downloads/) (at least version 3.6)
3. The [font tools](https://github.com/fonttools/fonttools) library.
4. The web fonts you want to subset (OTF, TTF, etc).

Once you have **Python** and **fonttools** installed, copy the web fonts you want to subset and open a command-line interface in that folder. For example, let's pretend that my fonts are stored in the directory `~/fonts`.

Issue the following command in your command line:

```bash:example.sh
pyftsubset Your-Webfont.otf --unicodes="U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD" --flavor="woff2" --output-file="Your-Webfont.woff2"
```

Be sure to replace `Your-Webfont.otf` with the actual name of the font you want to subset. I chose the [WOFF2](https://www.w3.org/TR/WOFF2/) format because it can save up to 30% more compared to WOFF. However, not all the browsers (especially the old ones) support this format, so make sure to deliver fallback versions too.

You'll end up with `.woff2` files that you can use with CSS:

```css:style.css
@font-face {
  font-family: 'My Font';
  src: url(/fonts/Your-Webfont.woff2) format('woff2');
  font-style: normal;
  font-display: optional;
  font-weight: 600;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
```

I copied the `unicode-range`  value from Lee Robinson's [own CSS file](https://github.com/leerob/leerob.io/blob/main/styles/global.css#L11). Unless you have a very specific use case, this should cover almost all your scenarios.

Finally, preload your fonts inside the `<head>` tag in your site:

```html:index.html
<link
  rel="preload"
	href="/fonts/Your-Webfont.woff2"
	as="font"
	type="font/woff2"
	crossOrigin="anonymous"
/>
```

And that should be enough.

I went **from around 3.4 MB of web fonts payloads to around 900 KB** by using subsetting.

If you use all the techniques that I mentioned here, your performance will increase and you'll feel proud of what you have accomplished.
 
**Useful links**
- [Three Techniques for Performant Custom Font Usage](https://css-tricks.com/three-techniques-performant-custom-font-usage/)
- [Creating font subsets](https://markoskon.com/creating-font-subsets/)

Learn how to subset web fonts to increase the performance (part of the core web vitals) and improve your users' UX. Follow this little tutorial and shrink your fonts file size by 70%

Subset Your Web Fonts And Make Your Sites Fly

I'm working with the Patreon team on creating internal tools for other departments. These tools will help the staff to automate some parts of the process and will make things a little bit easier for everyone.

We created the applications from scratch, and we were given the freedom to use whatever stack we wanted. It was decided by my team that we would use React on the frontend, and Python on the backend.

The apps we needed to create had some requirements like routing, authentication handling, image optimization and they needed to be responsive and performant because we wanted to deliver a great UX/UI experience for everyone. In the end, we decided to use [Next.js](https://nextjs.org/) as the foundation for the web app, because it has included by default, a lot of things we required.

The styling part was not key on the first phase of the project. We didn't have a UX/UI designer to guide us through the process, so we focused on delivering usable and tidy interfaces. Fortunately, we had access to [Tailwind UI](https://tailwindui.com/) (by the creators of [Tailwind CSS](https://tailwindcss.com/)), which reduced the development time a lot and made our lives easier.

Regarding the integration with the backend, we used [GraphQL](https://graphql.org/). I think 90% of the time, a RESTful API is enough, and this was no exception. GraphQL was chosen by the management team, and we moved from there. Since our needs are quite basic at this point, we used a tiny GraphQL client called [graphql-request](https://github.com/prisma-labs/graphql-request), and we've been enjoying it so far.

When it comes to deployment and backend development, we're making great and constant use of AWS. I love the way Amazon provides you with all the tools you need to create from little apps to complex platforms, all within the same ecosystem. On the other side, it can get quite expensive once you start adding more and more services to your architecture.

I'm learning new things every day, and I enjoy working at Patreon, creating tools that help others to do the job better, and faster.



As part of Patreon, I was part of a team dedicated to building internal tools for other departments. We built everything from scratch, based on requirements and feedback from other Patreon's employees. OUr main goal was to help them automatize part of their processes.

Patreon

When I was part of the **Hulu Development team**, I was assigned to a team responsible for building an internal tool to help other departments to accomplish their goals.

We bootstrapped an application using [CRA](https://reactjs.org/docs/create-a-new-react-app.html), some libraries like [lodash](https://lodash.com/) and started building the flow from scratch. Since it's an internal tool, we gave UX priority since our colleagues were the ones who used the application several hours a day.

The app state was not big enough to think about a more complex solution to manage the state, and that's why chose to use `useState`, `useReducer`, and the React `Context`.

When the data started to grow, we implemented a client cache with [React Query](https://react-query.tanstack.com/).

We wrote CSS in [SCSS](https://sass-lang.com/). Although there was not a naming convention, we agreed to stick to BEM as much as we could, and it turned out to be really good.

## Main Takeaways
- If the state is simple enough, it's okay to use React's internals.
- A client-based cache for the API requests helps a lot.
- CSS frameworks are a good use case for this kind of project.

For legal reasons, I'm not allowed to show you how the app looked, but it was a very minimalistic UI.



When I was part of the Hulu Development team, I was assigned to a team responsible for building an internal tool to help other departments to accomplish their goals. We bootstrapped an application using CRA and some other libraries like lodash.

Hulu

[IHG](https://www.ihg.com/hotels/us/es/reservation) is a world-wide known chain of hotels with important brands like HolidayInn, Regent, Crowne Plaza, or Intercontinental. I was part of a team of developers in charge of improving the pre-existing booking platform, which was build using AngularJS.

As an expansion strategy, the platform needed to grow: not only hotels should be able to be booked: cars, activities, and packages also were part of the offering.

Later down the line, we managed to integrate [Grubhub](https://www.grubhub.com/) and [OpenTable](https://www.opentable.com/) into the platform, increasing the value for the visitors.

![](https://spacebro.info/assets/3e9f2049-9168-4d61-9033-29ab52d0b82f)

## Moving from AngularJS to React

When I got into the project, the re-built phase was starting, and it was decided that [React](https://reactjs.org/) was going to power the new platform. Angular was very popular (around 2017), but React had just started getting more traction and since it is backed by Facebook, the team decided to give it a try.

We used React 14.x, which means that components were created with functions that emulated classes.

The state was managed with [Immutable](https://immutable-js.github.io/immutable-js/) and [Morearty.js](https://github.com/moreartyjs/moreartyjs), a very peculiar library based on *mixins*: the [flux pattern](https://www.freecodecamp.org/news/an-introduction-to-the-flux-architectural-pattern-674ea74775c9/) was not supported here.

[Redux](https://redux.js.org/) was, perhaps, too new to consider, but I don't know the real reason behind choosing Morearty over Redux.

![](https://spacebro.info/assets/f4391aca-e4a2-4544-8da0-930f50389a88)

## Main Challenges
- Managing the state with MoreartyJS and Immutable was something new to me. Took a while for things to click on my head.
- The legacy code relied too much on proprietary libraries that were not available for React.
- A lot of features started to emerge in the React ecosystem. The library changed so much that was impossible to think about adapting things like ES6 classes.
- Poorly written documentation can hurt as much as poor performant code. The amount of time wasted trying to reverse engineering things is ridiculous.

![](https://spacebro.info/assets/e7efe0df-1480-4d7e-8281-b0b46e6795f7)

## Main Takeaways
- I was introduced to the concept of state management in React. I was fairly new to using this library so it was groundbreaking for me.
- I was introduced to the concept of immutability for state calculation.
- I was required to write unit tests for each task that I took.
- I was exposed to the PR culture and I learned a lot thanks to that.
- I learned valuable lessons like **do not mutate the state directly** or else you can cause bugs hard to track down.

I was part of the Engineering team responsible for migrating the IHG platform from AngularJS, to React. We used Immutable, Morearty, lodash, and many other cool libraries that still hold up today. Click here and learn more.

Alan Medina - spacebro | Software Engineer

30 Days of JavaScript Coding

Make Your NextJS Site Even Faster By Replacing React With Preact

How To Create An Animated Sidebar With CSS and JavaScript

Learn to Code For Free And Get a Job

Lazy Loading Content In JavaScript: The Good Parts

How To Use Fullcalendar With Next.js (v10 or higher)

Subset Your Web Fonts And Make Your Sites Fly

Recent Projects

Patreon

Hulu

IHG Booking Platform

Sections

Social

Legal

Cool