JavaScript

How To Debug React Components Using React Developer Tools — step-by-step Javascript tutorial on Progressive Robot

How To Debug React Components Using React Developer Tools

The React Developer Tools browser extension gives you an interface for exploring the React component tree of your JavaScript app, along with the current props, state, and context for individual components. It can also show you which components are re-rendering and can generate graphs to show how long individual components take to render. In this tutorial, you will install React Developer Tools on the Google Chrome, then use it to analyze the performance of a sample app that analyzes text.

Read more
How To Handle CPU-Bound Tasks with Web Workers — step-by-step Javascript tutorial on Progressive Robot

How To Handle CPU-Bound Tasks with Web Workers

In this tutorial, you will create a CPU-bound task that blocks the main thread in the browser and observe how it affects the web app. You will then unsuccessfully attempt to make a CPU-bound task non-blocking using promises. Finally, you will create a Web Worker to offload a CPU-bound task to another thread to prevent it from blocking the main thread.

Read more
Ubuntu 20.04にNode.jsをインストールする方法 — step-by-step Linux tutorial on Progressive Robot

Ubuntu 20.04にNode.jsをインストールする方法

このガイドでは、Ubuntu 20.04サーバーにNode.jsをインストールする3種類の方法を示します。 ひとつは、Ubuntuのデフォルトのソフトウェアリポジトリからaptを使用してnodejsパッケージをインストールする方法、次に、代替PPAソフトウェアリポジトリからaptを使用して指定したバージョンのnodejsパッケージをインストールする方法、最後に、Nodeバージョンマネージャーをインストールし、これを使って複数のバージョンのnodejsをインストール・管理する方法について説明します。

Read more
How To Make Your Vue.js Application DRY with Slots, Mixins, and Composition API — step-by-step Javascript tutorial on Progressive Robot

How To Make Your Vue.js Application DRY with Slots, Mixins, and Composition API

DRY is a programming strategy that stands for “Don’t Repeat Yourself”. It encourages code re-usability through modular architecture. Vue.js includes several strategies to modularize and re-use repeated snippets of code. In this tutorial, you will try out layout components with slots, mixins, and the new Composition API to implement the DRY strategy in an example app.

Read more
How To Scrape a Website Using Node.js and Puppeteer — step-by-step Javascript tutorial on Progressive Robot

How To Scrape a Website Using Node.js and Puppeteer

In this tutorial, you will build a web scraping application using Node.js and Puppeteer. Your app will grow in complexity as you progress. First, you will code your app to open Chromium and load a special website designed as a web-scraping sandbox: [books.toscrape.com](books.toscrape.com). In the next two steps, you will scrape all the books on a single page of books.toscrape and then all the books across multiple pages. Then you will filter your scraping by category and save your data as JSON.

Read more
How To Style React Components — step-by-step Javascript tutorial on Progressive Robot

How To Style React Components

In this tutorial, you’ll learn three different ways to style React components: plain Cascading Style Sheets (CSS), inline styles with JavaScript-style objects, and JSS, a library for creating CSS with JavaScript. To illustrate these methods, you’ll build an example Alert component that will either show a success style or an error style depending on the prop. You will then refactor it using each of the styling options to see the similarities and differences between each.

Read more
How To Use Classes in TypeScript — step-by-step Javascript tutorial on Progressive Robot

How To Use Classes in TypeScript

Classes are a common abstraction used in object-oriented programming (OOP) languages to describe data structures known as objects. TypeScript has full support for class syntax and also adds features on top of it, like member visibility, abstract classes, generic classes, arrow function methods, and a few others. This tutorial will go through the syntax used to create classes, the different features available, and how classes are treated in TypeScript during the compile-time type-check.

Read more
ReactでFont Awesome 5を使用する方法 — step-by-step Javascript tutorial on Progressive Robot

ReactでFont Awesome 5を使用する方法

Font Awesomeはウェブサイトでアイコンやソーシャルロゴを表示できるようにしてくれるツールキットです。Reactはユーザーインターフェースの作成に使用するJavaScriptのコードライブラリです。 Font AwesomeチームはReactのコンポーネントを組み込んでいますが、Font Awesome 5とその構造について、基本を理解しておくとよいでしょう。このチュートリアルでは、React Font Awesomeコンポーネントの使い方について学びます。

Read more
How To Use Static Files in Gatsby — step-by-step Javascript tutorial on Progressive Robot

How To Use Static Files in Gatsby

Like many popular Static Site Generators, Gatsby embraces the use of dynamic web frameworks, using React on the frontend and Node.js on the backend. But Gatsby can also pull in static files and assets, like images, CSS files, and JavaScript files. This tutorial will show you how to best go about adding images, stylesheets globally and as modules, JavaScript files, and arbitrary files like PDFs for your users to download.

Read more
CHAT