JavaScript

How to Cancel a Fetch Request – Website Design Article

JavaScript promises have always been a major win for the language — they’ve led to a revolution of asynchronous coding that has vastly improved performance on the web. One shortcoming of native promises is that there’s no true way to cancel a fetch…until now. A new AbortController has been added to the JavaScript specification that will allow developers to use a signal to abort one or multiple fetch calls. Here’s the flow of how canceling a fetch call works: Create…

Read More

Managing Dates and Times Using Moment.js – Website Design Article

Working with dates and times in JavaScript has always been a bit cumbersome. Native date methods are verbose and the API is often inconsistent. That’s why if you ask a date-related question on StackOverflow, you’ll often hear the reply “Use Moment.js”. What Is Moment.js? Moment.js is a Swiss Army knife for working with dates in JavaScript. It allows you to parse, validate, manipulate, and display dates and times using a clean and concise API. In this article I’ll show you…

Read More

Override window.alert – Website Design Article

For years the only bit of feedback web developers could get was via alert(“{str}”) calls. These days we have the web console but, in rare cases, we don’t have a console and alert calls are our only window into a value at a given time. One problem: if an alert sneaks into production code, your site looks like it’s been hacked. Your site looks like it’s malware! To prevent any of those issues, you can add this snippet to your…

Read More

How to Migrate a React App to TypeScript — SitePoint – Website Design Article

When I first started learning TypeScript, one of the suggestions I often heard was, “convert one of your existing projects! It’s the best way to learn!” Soon after, a friend from Twitter offered to do just that — show me how to migrate a React app to TypeScript. The purpose of this article is to be that friend for you and help you migrate your own project to TypeScript. For context, I will be using pieces from a personal project…

Read More

Build a Native Desktop GIF Searcher App Using NodeGui — SitePoint – Website Design Article

NodeGui is an open-source library for building cross-platform, native desktop apps with Node.js. NodeGui apps can run on macOS, Windows, and Linux. The apps built with NodeGui are written using JavaScript, styled with CSS and rendered as native desktop widgets using the Qt framework. Some of the features of NodeGui are: native widgets with built-in support for dark mode low CPU and memory footprint styling with CSS including complete support for Flexbox layout complete Node.js API support and access to…

Read More

An Introduction to MongoDB — SitePoint – Website Design Article

MongoDB is a cross-platform, open-source, NoSQL database, used by many modern Node-based web applications to persist data. In this beginner-friendly tutorial, I’ll demonstrate how to install Mongo, then start using it to store and query data. I’ll also look at how to interact with a Mongo database from within a Node program, and also highlight some of the differences between Mongo and a traditional relational database (such as MySQL) along the way. What Is MongoDB? MongoDB is a document-oriented database.…

Read More

Lazy Object Initialization – Website Design Article

The Firefox DevTools underlying code, which is written with JavaScript and HTML, is a complex application. Due to the complexity and amount of work going on, the DevTools team has done everything they can to load as little as possible. Furthermore the team has a system of lazily importing and initializing objects when they’re needed. I’ve taken a bit of time to reduce the initializer, let’s take a look! The system relies on taking advantage of Object.defineProperty’s get function to…

Read More

How to Make a Simple JavaScript Quiz — SitePoint – Website Design Article

“How do I make a JavaScript quiz?” is one of the most common questions asked by people learning web development, and for good reason. Quizzes are fun! They’re a great way of learning about new subjects, and they allow you to engage your audience with something fun and playful. This popular article was updated in 2020 to reflect the current best practices in JavaScript. Coding your own JavaScript quiz is also a fantastic learning exercise. It teaches you how to…

Read More

Practical Ways to Advance Your TypeScript Skills — SitePoint – Website Design Article

As a programmer, it can feel like you know something well enough to be dangerous. For some situations, this is fine. All you need to know are these three methods in this programming language. Other times we want to develop expertise. In this article, we’ll cover ways to advance your TypeScript skills to that next level. Below are various ways you can further your TypeScript abilities. These are in no particular order. Learn in Public One of my favorite movements…

Read More

Do You Know What a REST API Is? — SitePoint – Website Design Article

REST is an acronym for Representational State Transfer — an almost meaningless description of the most-used web service technology! REST is a way for two computer systems to communicate over HTTP in a similar way to web browsers and servers. Sharing data between two or more systems has always been a fundamental requirement of software development. For example, consider buying motor insurance. Your insurer must obtain information about you and your vehicle so they request data from car registration authorities,…

Read More

Les #UI #UX incontournables de janvier 2020 – Website Design Article

Janvier commence fort avec des réalisations immersives, à la direction artistique bien léchée et aux interactions maîtrisées. Idéale pour ne pas manquer le meilleur, la sélection des incontournables vous attend de pied ferme ! Mélangeant toutes sortes de réalisations, du portfolio aux sites produits, les incontournables ont toujours la même mission : compiler les réalisations qui ont marqué durablement le mois. Sans en dire plus, je vous laisse en prendre plein les yeux ! Vous en voulez encore ? On…

Read More

React with TypeScript: Best Practices — SitePoint – Website Design Article

React and TypeScript are two awesome technologies used by a lot of developers these days. Knowing how to do things can get tricky, and sometimes it’s hard to find the right answer. Not to worry. We’ve put together the best practices along with examples to clarify any doubts you may have. Let’s dive in! How React and TypeScript Work Together Before we begin, let’s revisit how React and TypeScript work together. React is a “JavaScript library for building user interfaces”,…

Read More

8 Fantastic Examples of Audio Visualization CSS & JavaScript Code Snippets – Website Design Article

At the turn of the 21st century, MP3 audio was just hitting the mainstream. Certainly, the portability of these sound files was a big part of their allure. But there was also the unique side benefit of being able to visualize the sound on our computer screens. Audio players such as WinAMP came with visualization plugins, making the experience of listening to our favorite tunes even more engaging. Not only could we hear the music, but we could also see…

Read More

JavaScript’s New Private Class Fields, and How to Use Them — SitePoint – Website Design Article

ES6 introduced classes to JavaScript, but they can be too simplistic for complex applications. Class fields (also referred to as class properties) aim to deliver simpler constructors with private and static members. The proposal is currently a TC39 stage 3: candidate and is likely to be added to ES2019 (ES10). Private fields are currently supported in Node.js 12, Chrome 74, and Babel. A quick recap of ES6 classes is useful before we look at how class fields are implemented. ES6…

Read More

Duplicated Argument Names – Website Design Article

Oftentimes we override or monkey patch functions and, in many cases, there are arguments we don’t care too much about. A common practice for those arguments is using _ for argument names — it’s a generally accepted and known practice for “this isn’t important”. I started thinking about multiple useless arguments and if you could use the same name for the sake of minification — you can. So what happens when you use the same argument name more than once?…

Read More

How to Edit Source Files Directly in Chrome — SitePoint – Website Design Article

This popular article was updated in 2020. A web developer’s typical day involves creating HTML web pages with associated CSS and JavaScript in their favorite editor. The workflow: Open the locally hosted page in a browser. Swear. Open DevTools to investigate the layout and functionality problems. Tweak the HTML elements, CSS properties, and JavaScript code to fix the issues. Copy those changes back into the editor and return to step #1. While tools such as live reloading have made this…

Read More

Tutorial: Use Angular and Electron to Create a Desktop App – Website Design Article

Developing apps using web technologies has certain advantages. For example, you can use various platforms to run the software of your choice, such as JavaScript, HTML, and CSS. However, developing with web technologies also comes with limitations, like the interoperability with an operating system is restricted and web apps can only be accessed through the browser. Whereas for desktop apps, you can access the features of the operating system directly. You can quickly add to a start menu or the…

Read More

How To Properly Add jQuery Scripts To WordPress – WordPress Website Design Article

WordPress has been in our lives for over 16 years, yet the method of adding scripts to themes and plugins still remains a mystery for many developers. In this article we finally put the confusion to rest. Since it’s one of the most commonly used Javascript libraries, today we’re discussing how to add simple jQuery scripts to your WordPress themes or plugins. But first… About jQuery’s Compatibility Mode Before we start attaching scripts to WordPress, it’s important to understand jQuery’s…

Read More

Code Snippets Inspired by Star Wars – Website Design Article

Perhaps no movie franchise has more fans than Star Wars. For over 40 years, each new episode has generated great anticipation – not to mention monster profits. Both the movies and their long list of unforgettable characters have also served as a great inspiration to popular culture. Web design is no exception, as it seemed like the minute people started building websites, online tributes to the franchise began popping up. Naturally, CodePen is teeming with Star Wars-related creations. Everything from…

Read More

A Modern Developer’s Guide — SitePoint – Website Design Article

This article was created in partnership with Sencha. Thank you for supporting the partners who make SitePoint possible. JavaScript application source code has traditionally been hard to understand, due to code being spread across JavaScript, HTML, and CSS files, as well as events and data flowing through a number of non intuitive paths. Like all software, the JavaScript development environment includes bundlers, package managers, version control systems, and test tools. Each of these requires some learning curve. Inconsistencies and incompatibilities…

Read More

The Transitional roles of JavaScript, HTML and CSS – Website Design Article

JavaScript’s role in creative web design had long been seen as the main driving force behind web pages’ animated and interactive elements; in comparison, HTML and CSS had generally been seen as the files that supply a page’s content and static styling, respectively. As all three languages evolved and expanded over the most recent decade, however, their ability to achieve their respective roles bled into each other. There are now many examples on the Internet of web animations constructed and…

Read More

Add Scroll Effects & Utilities to Your Website with These CSS & JS Snippets – Website Design Article

Scrolling is among the most basic tasks we ask of users. And, judging from the amount of scrolling on websites and apps these days – we’re asking a lot. Adding scroll-based effects can be a great way to enhance user experience. That is, so long as they don’t interfere with the ability to navigate through long stretches of content. If anything, effects should make things easier and add a bit of flair to the mix. Here is a collection of…

Read More

How to Divert Traffic Using IP2Location in a Next.js Website — SitePoint – Website Design Article

This article was created in partnership with IP2Location. Thank you for supporting the partners who make SitePoint possible. In a world where online commerce has become the norm, we need to build websites that are faster, user friendly and more secure than ever. In this article, you’ll learn how to set up a Node.js powered website that’s capable of directing traffic to relevant landing pages based on a visitor’s country. You’ll also learn how to block anonymous traffic (e.g. Tor)…

Read More

The Silly Side of Code Snippets – Website Design Article

Sometimes the daily grind of web design can make us take things a little too seriously. While that’s good for getting things done, it can also drain us of the passion we have for our work. It’s not a place where you want to be for the long term. Creating something fun is a great way to rediscover that joy. It’s often the most casual experiments that can relieve stress and bring about excitement. And it’s also an opportunity to…

Read More

Image Lazy Loading – Website Design Article

Lazy loading images is a practice that’s been popular for a decade and for good reason: images are usually the heaviest downloads on a given webpage and avoiding unloading images that are never seen saves the user bandwidth. There are plugins for lazy loading images in every JavaScript framework, or you could use Intersection Observer API, but it’s become such a common practice that there should probably be a browser API to accommodate it…and Chrome is implementing just that. Let’s…

Read More

Delay, Sleep, Pause, & Wait in JavaScript — SitePoint – Website Design Article

Many programming languages have a sleep function that will delay a program’s execution for a given number of seconds. This functionality is absent from JavaScript, however, owing to its asynchronous nature. In this article, we’ll look briefly at why this might be, then how we can implement a sleep function ourselves. We’ve rewritten this popular guide from scratch to provide the best and most up-to-date advice. This article was updated in November 2019. Understanding JavaScript’s Execution Model Before we get…

Read More

Instafeedjs LIbrary to Show Off Instagram Photos on Website – Website Design Article

Sometimes we want to display our photos on instagram on a website, exactly personal website. Or if you are a photographer and want to display uploaded photos on instagram on a website as a porfolio, maybe this javascript libraries is suitable for you. Instafeedjs created by  steven schobert which is useful for displaying instagram photos easily. This library already supports hastag and username. So, you can display photos based on hashtag or username.   This is only a snippet of a…

Read More

A Guide to Understanding GSAP JavaScript Animation – Website Design Article

The use of animation is one of the best ways to make your website stand out. When smartly implemented, it can dazzle users and call attention to your most important content. Of course, web animation has been around for years. But it’s really taken off with the spread of HTML5, CSS3 and JavaScript. Adding movement to your site has never been easier – or looked better. Among the most powerful and fascinating tools for creating animation is the GreenSock Animation…

Read More

Compile-time Immutability in TypeScript — SitePoint – Website Design Article

TypeScript allows us to decorate specification-compliant ECMAScript with type information that we can analyze and output as plain JavaScript using a dedicated compiler. In large-scale projects, this sort of static analysis can catch potential bugs ahead of resorting to lengthy debugging sessions, let alone deploying to production. However, reference types in TypeScript are still mutable, which can lead to unintended side effects in our software. In this article, we’ll look at possible constructs where prohibiting references from being mutated can…

Read More

Create a Toggle Switch in React as a Reusable Component — SitePoint – Website Design Article

In this article, we’re going to create an iOS-inspired toggle switch using React components. By the end, we’ll have built a simple demo React App that uses our custom toggle switch component. We could use third-party libraries for this, but building from scratch allows us to better understand how our code is working and allows us to customize our component completely. Forms provide a major means for enabling user interactions. The checkbox is traditionally used for collecting binary data —…

Read More