Learn To Code, One Line At A Time

What is Parcel Bundler?

What is Parcel Bundler and why is it the future? For years now javascript bundlers have become the norm for frontend development workflows. But it is almost a cliche to say that they are difficult to set up and configure. Parcel Bundler aims to solve that by giving you a zero configuration option with all the power of the currently accepted tooling.

What Are Styled Components?

CSS in JS is taking the javascript world by storm and Styled Components is leading the charge. Learning styled components is almost a requirement for modern react developers. In this article we will take a look at the basics of styled components to get you started.

How To Deploy a Library to NPM Using Travis CI

Let's learn to publish an NPM package automatically using travis continuous integration and deployment. We will set up travis to automatically publish our library to NPM when we add a new release git tag on our repo.

ESLint and Prettier with Husky Git Hooks

Using eslint and prettier have become standard best practices for javascript projects to maintain consitency in the code base. Enforcing eslint and prettier using husky git hooks is a great way to ensure that quality with minimal developer effort.

Writing tests for the Parallax Library

With the parallax library javascript code written we want to deploy it to NPM. But before we do we have to make sure that everything is working as it should and future proof the projects by adding tests. We will be using the jest testing library to achieve that.

Using the Parallax Library

Let's take the hacky parallax website code we wrote before and rewrite it to use our shiny new parallax library.

Writing an NPM Library (Parallax Provider)

In this tutorial we will take the hacky parallax code we wrote before and turn it into a nice generalised library that can be used to implement arbitrary parallax website. Ultimately we will publish the library to NPM.

Amazing Parallax Effect in Pure JS

Let's create a simple 3d parallax effect. No libraries, just pure vanilla javascript. Interacting with user scroll can often be annoying, but not this time. This time the experience wouldn't make any sense without it.

Build your own Link Shortener with Netlify

Learn to build your own link shortener using git and netlify. Sending out long links to people can be annoying and you will never remember them. Using your own custom short links is a great way around the problem.

Adding MongoDB to ExpressJS | Quiz API Tutorial

The time has come to stop using hard coded data and add in a database to the project. We will be using MongoDB to store the data.

Serving Data With ExpressJS | Quiz API Tutorial

It's finally time to serve some actual data via our API. We will take the data from the Angular Quiz app and serve it to users via API routes.

Using ExpressJS Router | Quiz API Tutorial

Express Router allows us to split up the handling of requests into multiple files to keep our code more modular and clean.

Create an API with Express JS

Let's create a basic API using the ExpressJS framework built on top of Node.js. Using the data from the angular quiz app we will use express and mongodb to fetch the data from an API.

Debug() – Javascript Debugging Tips

Debug() – The Death Of Ctrl+f If you are anything like me, you have wasted countless hours of your life using ctrl+f to find functions inside your code. If you only have one file, ctrl+f is still going to be …

Console.time() – Javascript Debugging Tips

Just In Time – Console.time I have seen some amazing ways of timing how long javascript code takes to run. Taking timestamps and comparing them is a common way. But console.time is method in the console API that allows you …