News Every time

This article was created in partnership with Mekanism . Thank you for supporting the partners who make SitePoint possible. Black Friday is one of the best opportunities of the year to get all kinds of new stuff, including digital web tools and services. Some companies are offering huge discounts to heavily increase their sales, while others already have excellent offers for their customers and partners. In this article, you’ll find free and premium web tools and services, and also some of the best Black Friday WordPress deals . We included website builders, UI Kits, Admins themes, WordPress themes, effective logo and brand identity creators, and much more. There’s a web tool or service for everyone in this showcase of 38 excellent solutions. Let’s start. 1. Free and Premium Bootstrap 4 Admin Themes and UI Kits DashboardPack is one of the main suppliers of free and premium Bootstrap 4 admin themes and UI kits, being used by tens of thousands of people with great success. Here you’

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. Understanding JavaScript's Execution Model Before we get going, it's important to make sure we understand JavaScript's execution model correctly. Consider the following Ruby code: require 'net/http' require 'json' url = 'https://api.github.com/users/jameshibbard' uri = URI(url) response = JSON.parse(Net::HTTP.get(uri)) puts response['public_repos'] puts "Hello!" As one might expect, this code makes a request to the GitHub API to fetch my user data. It then parses the response, outputs the number of public repos attributed to my GitHub account and finally prints "Hello!" to the screen. Execution

In programming, modules are self-contained units of functionality that can be shared and reused across projects. They make our lives as developers easier, as we can use them to augment our applications with functionality that we haven't had to write ourselves. They also allow us to organize and decouple our code, leading to applications that are easier to understand, debug and maintain. In this article, I'll examine how to work with modules in Node.js, focusing on how to export and consume them. Different Module Formats As JavaScript originally had no concept of modules, a variety of competing formats have emerged over time. Here's a list of the main ones to be aware of: The Asynchronous Module Definition (AMD) format is used in browsers and uses a define function to define modules. The CommonJS (CJS) format is used in Node.js and uses require and module.exports to define dependencies and modules. The npm ecosystem is built upon this format. The ES Module (ESM)

If you have an array of objects that you need to sort into a certain order, you might be tempted to reach for a JavaScript library. But before you do, remember that you can do some pretty neat sorting with the native Array.sort function. In this article, we'll show you how to sort an array of objects in JavaScript with no fuss or bother. To follow along, you'll need a knowledge of basic JavaScript concepts, such as declaring variables, writing functions, and conditional statements. We'll also be using ES6 syntax. You can get a refresher on that via our extensive collection of ES6 guides . This popular article was updated in November 2019. Basic Array Sorting By default, the JavaScript Array.sort function converts each element in the array that needs to be sorted into a string, and compares them in Unicode code point order. const foo = [9, 1, 4, 'zebroid', 'afterdeck']; foo.sort(); // returns [ 1, 4, 9, 'afterdeck', 'zebroid' ] const

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 — such as yes or no , true or false , enable or disable , on or off , etc. Although some modern interface designs steer away from form fields when creating toggle switches, I'll stick with them here due to their greater accessibility. Here's a screenshot of the component we'll be building: Getting Started We can start with a basic HTML checkbox input form element with its necessary properties set: <input type="checkbox" name="name" id="id"

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 be beneficial. Primitives vs Reference Types JavaScript defines two overarching groups of data types : Primitives: low-level values that are immutable (e.g. strings, numbers, booleans etc.) References: collections of properties, representing identifiable heap memory, that are mutable (e.g. objects, arrays, Map etc.) Say we declare a constant, to which we assign a string: const message = 'hello'; Given that strings ar

Browser developer tools provide an amazing array of options for delving under the hood of websites and web apps. These capabilities can be further enhanced and automated by third-party tools. In this article, we'll look at Puppeteer , a Node-based library for use with Chrome/Chromium. The puppeteer website describes Puppeteer as a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium. Puppeteer is made by the team behind Google Chrome, so you can be pretty sure it will be well maintained. It lets us perform common actions on the Chromium browser, programmatically through JavaScript, via a simple and easy-to-use API. With Puppeteer, you can: scrape websites generate screenshots of websites including SVG and Canvas create PDFs of websites crawl an SPA (single-page application) access web pages and extract information usin