25 JavaScript tutorials to take your skills to the next level - Heart Internet Blog - Focusing on all aspects of the web

JavaScript has evolved from being a derided “toy language” into the language that powers the web. It’s pretty much everywhere these days.

It’s in internet-connected devices, it’s used to ensure we can read websites when we’re offline, and it helps with web animations. JavaScript is also the main component in the many frameworks that are behind our websites and apps.

In this article, we round up the best JavaScript tutorials from around the web. We’ll start with some learning-by-doing walkthroughs. We’ll dive into web performance and how to ensure your site loads fast, and we’ll explore how to write better JavaScript code. We’ll finish with a look at two of the most popular JavaScript frameworks right now: React and Vue.

Happy learning!

Projects

How to Make a Drag-and-Drop File Uploader with Vanilla JavaScript
This thorough walkthrough on Smashing Magazine uses the APIs given to us by the browser to implement a drag-and-drop file selector and uploader with “vanilla” ES2015+ JavaScript (no frameworks or libraries).

An animated preview of the drag-and-drop file selector and uploader created with JavaScript

How to Add a CSS and JavaScript Sticky Menu
This article walks through two ways to go about adding a Sticky Menu to your site: using the new CSS position:sticky property or, alternatively, JavaScript to implement the sticky logic. There are also seven beautiful sticky menu examples to inspire you.

An animated preview of a sticky menu on a website

Animate a Container on Mouse Over Using Perspective and Transform
A step-by-step tutorial on how to get those depth-y 3D hover effects on a container with CSS and JavaScript, which can be used for images, forms, modals, or just about any other content you drop in the container.

See the Pen Animate a Container on Mouse Over Using Perspective and Transform by Mihai (@MihaiIonescu) on CodePen.

Animating Elements Along SVG Paths with JavaScript
Discover how to move elements along an SVG path with almost no effort, using a small library called Pathslider, created by the article’s author, Luis Manuel, which is based on anime.js.

See the Pen Path Slider Basic Demo by lmgonzalves (@lmgonzalves) on CodePen.

How to Build a Calculator
In this three-part series designer and developer Zell Liew, who runs the excellent Learn JavaScript course, explains how to build components with JavaScript from scratch. At the end you’ll have a calculator that functions exactly like the one on the iPhone. Also check out Zell’s article on whether to use CSS or JavaScript for web animations here on the Heart Internet blog.

An animated example of Zell Liew's JavaScript calculator in action

Performance

20 Best Practices for Improving JavaScript Performance

Proper JavaScript performance is vital for ensuring that your website loads fast. This guide explores the causes of JavaScript performance issues and provides a list of best practices for optimising JavaScript code.

Lazy Loading JavaScript Modules with ConditionerJS
This article looks at the JavaScript initialisation logic that is often used to link UI components to a webpage and how to improve this logic by replacing it with ConditionerJS, which can help make websites more flexible and user-oriented.

Loading Third-Party JavaScript
Often, performance problems slowing pages down are due to third-party scripts: ads, analytics, trackers, social-media buttons, and so on. Addy Osmani and Arthur Evans explain how to optimise the loading of third-party scripts to reduce their impact on performance.

How JavaScript Works: the Rendering Engine and Tips to Optimize Its Performance
Alexander Zlatkov’s 11th article in a series dedicated to exploring JavaScript and its building components focuses on the rendering engine, which handles the parsing and the visualisation of the HTML and the CSS, something that most JavaScript apps are constantly interacting with.

A chart showing how components are rendered in the browser

Writing better JavaScript code

How to Keep Your JavaScript Code Simple and Increase Its Readability
This article walks you through applying the SOLID principles to your codebase. The author starts the code review session with a 35-lines JavaScript Class and finishes with a beautiful 11-lines code piece using only slick functions. All you need is patience and resilience.

Approaches to Deprecating Code in JavaScript
All code gets old and creaky, so what’s the best way to deprecate it? This post on CSS-Tricks goes over some good practices when it’s time to mark a JavaScript method obsolete and will probably help you write more resilient code in the future.

Elegant Patterns in Modern JavaScript
DevMastery.com consultant and teacher Bill Sourour shares several coding patterns that lead to cleaner, more testable, more expressive code. So far he’s covered RORO (Receive an Object, Return an Object) and Ice Factory, a powerful function that creates and returns a frozen object.

A Comprehensive Guide to JavaScript Design Patterns
Design patterns are reusable solutions to commonly occurring problems in software design. This article reviews some JavaScript basics before exploring different design pattern categories and examples, complete with code snippets.

Object Oriented Programming in JavaScript
Zell Liew addresses the absolute basics of Object Oriented Programming in JavaScript: creating individual objects from a common object. Also check out Zell’s article on 20 things to consider when creating your first Node.js application.

Write Better JavaScript with Webpack
This introductory post explores why Webpack is the right choice for bundling your JavaScript application. It compares Webpack with Gulp, explains how to write modular code, how to configure Webpack and use NPM scripts and more.

React

Diving into ReactJS — The Minimalist Guide to Getting Started with React
Here’s a little introduction to NextJS – a framework for creating server-rendered React applications, developed by Zeit, which makes you focus on React and leaves all the trouble of configuring webpack and Babel to the experts.

A Comprehensive Guide to Learning React.js in 2018
A classic, interactive ‘from scratch’ tutorial by Tyler McGinnis (also check out his courses), originally published in January 2015, that’s just been upgraded to React 16.3 standards. It covers fundamentals and creating your first component.

Getting Started with Web Accessibility in React
Final year computer science student Emily Mears explains some of the basic accessibility features that React enables or supports, as well as some basic implementations. She covers keyboard focus, ARIA, and more, and also lists some useful development and testing tools.

Bringing Together React, D3, and Their Ecosystem
In this post, Marcos Iglesias explores how to approach building React projects that need the powerful charting goodness of D3 and covers various approaches and D3 libraries. Also check out Marcos’ article on performance budgets in our free web performance guide.

A chart indicating the timeline for bringing together D3 and React

Data Visualisation with react-vis
In this article, Shyianovska Nataliia, a front-end developer from Amsterdam, walks through getting started with react-vis, a simple and flexible React visualisation library created by Uber, to build a simple line chart.

Vue

Replacing jQuery with Vue.js: No Build Step Necessary
This article by Sarah Drasner covers some common use cases in jQuery and how we’d switch them over to Vue, and why we’d even want to do so. It serves to show that Vue is also a pretty nice abstraction for small sites that don’t need a lot of overhead, and it’s very flexible.

Building PWAs with Vue.js
Want to get started developing Progressive Web Apps? Start right here with this introductory article and learn how to you can build them quickly with Vue.js, one of the most popular JavaScript frameworks around at the moment.

A screenshot of two browser windows showing how to develop with Vue.js

How to Make Netflix-like Swipers in Vue
Swipers always seem to have a mind of their own. In this tutorial Chris Nwamba explains how to use Vue and an Awesome Swiper Module to create swipers that are just as elegant and fluid as Netflix’s movie swipers.

Hit the Ground Running with Vue.js and Firestore
In this article, you’ll learn how to set up the basics of a web app using Vue.js and Firestore, a new data storage approach from Google Firebase. The goal is to build the core of the app as fast as possible so you can show it to users and get feedback and analyse usage.

Vue Design Systems
Vue Design System is a set of organised tools, patterns, and practices that work as the foundation for Vue.js application development. In this article, its creator, Viljami Salminen, sheds some light on the processes and workflows he uses to get started with a new project.

Also check out ‘5 reasons developers are switching to Vue.js’ by Ray Villalobos here on our blog.

Subscribe to our monthly Heart Internet newsletter, filled with the latest articles about web design, development, building your business, and exclusive offers.

Subscribe now!

Comments

Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

Leave a reply

Drop us a line 0330 660 0255 or email sales@heartinternet.uk