Javascript on Freshman — Articles and Tutorials on Software Development

Creating Your First Chrome Extension (With Built-in AI Features)

Sat, 15 Nov 2025 22:00:00 +0100

Chrome extensions let you add new features to your browser, from password managers to privacy tools and productivity helpers. If you’ve ever wondered what it takes to build one yourself, this tutorial will guide you through the process step by step and show that creating your own extension is far more approachable than it might seem.

Book Summary: A Philosophy of Software Design

Tue, 15 Jun 2021 20:41:00 +0100

Written by John Ousterhout, a Professor of Computer Science at Stanford University, this book’s central idea is all about managing and reducing complexity in software projects. It draws upon his experience as an academic, but also from his various commercial endeavours, and his work on the Tcl scripting language. It’s a short and light read (about 170 pages) that discusses several principles which can be applied during the development of software systems to achieve cleanly designed abstractions. It also highlights several red flags that can indicate major design problems and what to do about them. Most importantly, the author acknowledges that all design principles can be taken too far, and gives some advice on what not to do.

A Complete Guide to Linting Go Programs

Wed, 02 Jun 2021 18:40:00 +0100

Linting is the process of identifying and reporting on patterns found in code, with the aim of improving consistency, and catching bugs early in the development cycle. This is particularly useful when working in a team as it helps to make all code look the same no matter who’s writing it, which reduces complexity, and makes the code easier to maintain. In this article, I’ll demonstrate a comprehensive linting setup for Go programs, and talk about the best way to introduce it into an existing project.

A Guide to Customising the Windows Terminal

Mon, 07 Dec 2020 13:20:00 +0100

The Windows Terminal provides a much improved command line experience in Windows 10 and 11. It’s packed with useful features like GPU acceleration, tabs, panes, themes, and shortcuts, along with full support for different environments such as PowerShell, Command Prompt, and Windows Subsystem for Linux. In this article, I’ll describe a few ways to tailor the terminal experience to your needs along with tips and tricks to make your experience smooth and productive.

How to process file uploads in Go

Wed, 14 Oct 2020 09:30:00 +0100

Processing user uploaded files is a common task in web development and it’s quite likely that you’ll need to develop a service that handles this task from time to time. This article will guide you through the process of handling file uploads on a Go web server and discuss common requirements such as multiple file uploads, progress reporting, and restricting file sizes.

How to build a Pomodoro Timer App with JavaScript

Sun, 02 Aug 2020 22:00:00 +0100

Pomodoro is a time management technique developed in the 1980s which uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks. In this tutorial, you’ll learn how to create such a timer in the browser with JavaScript.

How to build a Simon Game with JavaScript

Sun, 19 Jul 2020 09:30:00 +0100

Creating games in the browser is a great way to practice your JavaScript skills and have fun at the same time!

Migrating away from Google Analytics

Sat, 11 Jul 2020 16:44:00 +0100

I switched away from Google Analytics to Plausible for a better user experience, privacy and performance. As an added advantage, the accuracy of the reported metrics for my website has improved by 30-40%.

The quickfix and location lists in Vim

Thu, 18 Jun 2020 00:00:00 +0000

The quickfix and location lists are essential navigation components in Vim. This article will consider the similarities and differences between the two lists and provide examples for when each one is typically used.

How to work with Data Types in Go

Thu, 21 May 2020 00:00:00 +0000

Go is a statically typed programming language which means that every value in Go is of a particular type and these types must be known at compile time so that the compiler can ensure that the program is working with the values in a safe way. This article will consider the most important built-in types in the language that you need to be aware of.

Working with Variables in Go

Fri, 08 May 2020 00:00:00 +0000

Can you program without variables? Maybe in some esoteric languages, but in Go, you can’t. So it’s important to get acquainted with how variables work in the language so that you can write effective programs. And that’s what this article is all about.

How to program a guessing game with Go

Fri, 01 May 2020 22:30:00 +0000

Let’s jump into Go by working through a hands-on project together. This tutorial will introduce you to a few common Go concepts such as variabes, error handling, loops, packages, and more by showing you how to use them to tackle a classic beginner programming problem.

Introduction to the Go programming language and why you should learn it

Fri, 01 May 2020 00:00:00 +0000

Since its first release in 2009, Go (also known as Golang) has continuously increased in popularity and has been adopted by big and small companies alike mostly in place of dynamic environments such as Python, Ruby, and Node.js. The language has a lot to offer and is well worth learning in 2020 and beyond.

How to build a Custom HTML5 Video Player with JavaScript

Wed, 23 Oct 2019 00:00:00 +0000

This guide will teach you how to create a cross-browser HTML5 video player with JavaScript using the Media and Fullscreen APIs.

How to Build Your First Web Application with Go

Thu, 22 Aug 2019 00:00:00 +0000

One of Go’s greatest strengths lies in the its suitability for developing web applications. It offers great performance out of the box, is easy to deploy, and has many of the necessary tools you need to build and deploy a scalable web service in its standard library. This tutorial will walk you through a practical example of building a web application with Go and deploying it to production. It will cover the basics of using Go’s built-in HTTP server and templating language, and how to interact with external APIs.

How to build an Unsplash Search App with Svelte 3

Mon, 15 Jul 2019 00:00:00 +0000

In this article, we’ll pick up from the previous post that introduced the Svelte 3 library and tackle another exercise that teaches a little more about the features Svelte has to offer.

During the course of working through this tutorial, you will build an application that searches Unsplash and presents the results in an infinitly scrolling list.

Here’s what the completed project will look like:

Sorry, your browser doesn't support HTML5 video, but don't worry, you can download it and watch it with your favourite video player!

GIF

Prerequistes

This tutorial assumes you have a little bit of prior experience with Svelte 3. It should also be easy enough to follow if you are experienced with React, Vue or other similar JavaScript libraries.

Learn Svelte 3 by building a Todo List App

Tue, 09 Jul 2019 00:00:00 +0000

Why is Svelte gaining popularity, and do we really need another JavaScript framework? In this article, we’ll take a look the value proposition of Svelte compared to other mainstream frameworks, and get some hands on experience by building a todo list application

A guide to setting up Vim for JavaScript development

Mon, 06 May 2019 00:00:00 +0000

I’ve been using Vim for close to two years now, and do all my JavaScript development work in it. In the process, I’ve tweaked my configuration several times until I finally achieved a setup that I can say I’m really happy with. So, in this article, I want to talk about some of the plugins and tools that I’ve taken advantage of to make writing JavaScript a more pleasurable experience in Vim.

How to build a Countdown Timer with Golang

Fri, 03 May 2019 00:00:00 +0000

In this tutorial, we’ll go over how to build a countdown timer in Golang. The object of the program is quite simple. We’ll specify a deadline date while running the program and then it prints out the number of days, hours, minutes and seconds from the current moment to the deadline, and it continues to do so every second until the deadline is reached.

Prerequisites

This tutorial assumes a beginner level understanding of the Go programming language. It also assumes that you have a set up your Golang environment. If you’ve never written a Go program before, this article might be a good place to start.

How to build a Todo List App with JavaScript

Mon, 18 Mar 2019 00:00:00 +0000

Some people claim building a todo list app is a boring activity since so many exist already but I think it remains a great exercise for learning useful concepts that are widely applicable in many programming contexts.

Learn Node.js and MongoDB by Building a URL Shortener App

Thu, 24 Jan 2019 00:00:00 +0000

In this article, you’ll learn how to build a URL Shortener application with Node.js and MongoDB. Here’s a live demo of what we’ll be building. You can find the complete source code for this project in this GitHub repo.

Prerequisites

I assume basic familiarity with JavaScript as well as the command line. If you haven’t built a basic Node application before, you might want to start here first, then return to this tutorial at a later time.

How to build a Mobile App Layout with CSS Flexbox

Mon, 07 Jan 2019 00:00:00 +0000

I’ve described how to build a few web components with Flexbox here, here and here. Let’s kick things up a notch by building a full mobile app layout with Flexbox.

I’ll show you some some really neat ways you can leverage the power of Flexbox in your websites and applications by recreating a layout from Spotify’s mobile app.

Here’s a live demo of what we’ll be building.

Getting started

Open up this fiddle and click the Fork button to create your own instance of the fiddle.

Learn Node.js by Building a Timestamp Microservice App

Thu, 22 Nov 2018 00:00:00 +0000

One of the reasons why Node.js is such a great platform for building applications is the abundance of libraries that have been developed by the community for practically all the common use cases. This makes it really easy to go from idea to a production-ready application in a relatively short space of time.

That said, at least understanding Node.js’s standard libraries will always be beneficial to you, especially if you want to gain a deeper understanding of how Node.js works.

How to build a responsive feature list with CSS Flexbox

Wed, 21 Nov 2018 00:00:00 +0000

In this tutorial, you will learn how to build a common component on product landing pages. Have you seen marketing pages that display feature images and their descriptions in alternating order? Flexbox makes this pattern really easy to build out, and no, you don’t have to change the HTML in order to achieve this.

The feature list on alfredapp.com

The particular feature list we’ll be building is the one found on alfredapp.com. If you inspect the elements on that site via your browser’s DevTools, you will see that the layout was achieved using floats. I’ll show you how to achieve the exact same layout with Flexbox and how to make it responsive too!

How to build a Navigation Bar with CSS Flexbox

Sat, 10 Nov 2018 00:00:00 +0000

In the previous article, I introduced the Flexbox layout model and demonstrated how it can be used to build a photo card component, which is identical to the one found on the Unsplash homepage.

This tutorial will take you through building another real-world component with Flexbox. This time, we will recreate the navigation bar that is found on freeCodeCamp.

Here’s how it looks like:

As usual, I have added the basic HTML and CSS for the project to JSFiddle. You can fork the code to a new fiddle or copy and paste it to your local code editor if you prefer.

Learn CSS Flexbox by building a photo card component

Tue, 23 Oct 2018 00:00:00 +0000

CSS Flexbox has been around for quite a while now, and is well supported, but I still see a lot of upcoming web developers resorting to frameworks like Bootstrap in order to achieve simple layouts in the browser, perhaps because Flexbox introduces many new concepts that can make it difficult to use.

This article will introduce you to Flexbox by walking you through a photo card component and will teach you just enough so that you can start using it right away. I’ve got some other tutorials lined up that will go into even more detail on the subject.

A Guide to Responsive Images on the Web

Sat, 04 Aug 2018 00:00:00 +0000

The process of optimising images for the web does not stop at using tools like MozJPEG or pngquant. You also need to make sure that you are serving the right images to your users depending on their device capabilities.

The concept of responsive images refers to a system for adapting images to fit the resolution, viewport and layout for any device, and it goes farther than just applying a max-width: 100% rule to the img tag.

How Image Optimisation Decreased my Website's Page Weight by 62%

Sun, 15 Jul 2018 00:00:00 +0000

Images are one of the most fundamental types of content that is served on the web. They say an image is worth a thousand words, but it can also be worth quite a few megabytes too if you’re not careful.

So although web images need to be clear and crisp, they must also be delivered at manageable sizes so that load times are kept small and data use is kept at acceptable levels.

How to build a Calculator App with JavaScript

Fri, 06 Jul 2018 00:00:00 +0000

This epic tutorial provides a solid workout for JavaScript newbies by describing how a simple calculator application can be developed with the language.

Learn CSS Grid by building a simple Calculator Layout

Tue, 29 May 2018 00:00:00 +0000

CSS Grid is a new way of defining the structure of a webpage. It helps developers create complex layouts on the web easily without resulting to old methods such as floats or complicated frameworks which introduced all sorts of problems.

The introduction of Grid provides a system of laying out webpages that is native to web browsers and even more powerful than what you can achieve with CSS Frameworks such as Bootstrap.

How to Build Your First Node.js Website with Express and Pug

Thu, 17 May 2018 00:00:00 +0000

For most of my career as a Web Developer, I worked on the frontend of websites and applications consuming APIs made by other people. Recently, I decided to learn Node.js properly and do some server-side programming as well.

I decided to write this introductory tutorial for anyone who is interested in learning Node after realising that it’s not so easy to read the documentation and figure out how to go about building stuff with Node.

How to choose an editor for JavaScript

Wed, 11 Apr 2018 00:00:00 +0000

There are a lot of options out there as far as text editors go, but I’m here to help you traverse the wide landscape of coding editors for JavaScript.

Why I switched to Vim from Visual Studio Code

Mon, 02 Apr 2018 00:00:00 +0000

I discuss my history with text editors, what led me to switch to Vim six months ago and why I’m sticking with it

HTTPS blind spots

Thu, 01 Feb 2018 00:00:00 +0000

In the first three parts of this series, I discussed the value proposition of HTTPS, what SSL certificates are and how to get one for free, and additional things you can do to secure your website even further.

It’s time to wrap up the series by taking a look at some HTTPS blind spots and why securing your website does not stop at serving content securely.

HTTPS does not secure a website

HTTPS does protect against many common attacks often spawned by a Man In The Middle, but it cannot stop hackers from breaking into your web server or network. The “Secure” part in HTTPS only refers to the security of your connection to a website. It’s got nothing to do with the security of the infrastructure that a website has on its back end.

Securing your website

Wed, 31 Jan 2018 00:00:00 +0000

There’s more to deploying HTTPS than just obtaining a certificate, slapping it on your server and calling it a day. Even for brand new websites, and especially for legacy websites, you need to be absolutely sure that under no circumstances can any content on your website be served over HTTP.

Today’s post takes a look at a few things you can do to secure your HTTPS website even further.

301 redirects for HTTP Traffic

Users will often make requests to your website over HTTP, such as when typing the URL in the browser’s address bar. You need to make sure that these HTTP requests are properly 301 redirected to the equivalent HTTPS version.

SSL Certificates

Sun, 28 Jan 2018 00:00:00 +0000

The first part of this series covered what HTTPS is and why it’s important for every website. In part 2, I want to talk about how HTTPS works, what certificates are, and how to deploy HTTPS on your website for free.

How does HTTPS work?

HTTPS adds a secure layer to the regular HTTP protocol using TLS or SSL. Clients and Servers still use the regular HTTP conventions, but over a secure connection where the requests and responses are encrypted and decrypted appropriately.

The value of HTTPS

Fri, 26 Jan 2018 00:00:00 +0000

Security on the web is more important than ever. With new vulnerabilities and data breaches being reported on a daily basis, it is crucial for us to do a better job of securing the stuff that we make so that we can protect users from various attacks.

I’ve been learning a lot about security on the web, so I wanted to bring together some of what I’ve learned thus far into a four-part series focused on HTTPS and why it’s important for every website.

How to build a Wikipedia Search App with JavaScript

Tue, 12 Sep 2017 00:00:00 +0000

Let’s jump into web application development by working through a hands-on project together! In this article, you’ll practice the fundamentals of building a web application. Things like making AJAX requests, manipulating DOM nodes, handling errors and displaying alerts.

Build your first JavaScript App — A Random Quote Generator

Fri, 08 Sep 2017 00:00:00 +0000

If you’re learning JavaScript as your first programming language, this tutorial provides a good opportunity to learn how it is used in the real world. It will help you understand how JavaScript, HTML and CSS work together to create applications in the browser.

Let's learn HTTP Status Codes

Sun, 30 Apr 2017 00:00:00 +0000

HTTP status codes are a set of standard responses sent by a web server to a client (such as a web browser) indicating whether a specific HTTP request was completed successfully or not.

We have 5 categories under which these responses are classified:

1xx Informational - The request was received but is still processing.
2xx Success - The request was received, accepted and processed successfully.
3xx Redirection - The client needs to take additional action to complete the request.
4xx Client Error - An error occurred on the client side.
5xx Server Error - An error occurred on the server side.

There are quite a number of HTTP status codes available but I’m not going to cover all in this article. I’ll only go over the ones that frequently occur in the course of web application development.