JavaScript

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