Javascript
The Ultimate JavaScript Promise Tutorial
One of the features that make JavaScript stands out from other high-level programming languages is its asynchronicity. JavaScript makes us very easy to run multiple tasks without blocking each other.
Traditionally, this thing can be achieved in other programming languages by using “threading”. In Python, for instance, we can run a separate thread to do some heavy tasks without blocking the main thread, and get notified when the job is finished. But since JavaScript is “non-blocking” by its nature, we don’t need to do such things. Instead, we can use something called Promise.
I'm Building an ORM for Deno!
This article was originally posted on DEV.
Hey developers! I hope you’re doing well.
I just want to let you know that I’m currently working on an open-source project which I think is really cool.
I’m building an ORM library for one of the hottest yet immature technologies this year: Deno.
It’s called Cotton, but don’t ask me why I come up with this name, I have no idea.
I’m super excited about this project, and I want to share my experience with you.
A Practical Guide to TypeScript Decorators
This article was originally written for LogRocket.
We can all agree that JavaScript is an amazing programming language that allows you to build apps on almost any platform. Although it comes with its own fair share of drawbacks, TypeScript has done a great job of covering up some gaps inherent in JavaScript. Not only does it add type safety to a dynamic language, but it also comes with some cool features that don’t exist yet in JavaScript, such as decorators.
How to Upload Files with Multer
Uploading files is an essential feature for web applications these days. This tutorial will cover how to upload files into a server from the browser as well as create an API with Node.js to handle those uploads.
To simplify everything, we are going to use Express to build our API. And to handle file uploads, we are going to use Multer. Multer is an official Express middleware for handling multipart/form-data requests, which primarily used to upload files.
How to Generate Unique ID in JavaScript
There are several ways to generate unique identifier in JavaScript. This could very useful in many cases, such as rendering list efficiently, or storing documents or records in database.
Using UUID
UUID is the abbreviation of univerally unique identifier, which is an identification number to uniquely identify something. The main idea of this thing is everytime we generate this numbers, it will be universally unique, which means no one could generate the exact same id as yours.
Full-Text Searching with Lunr.js
Lunr.js is a full-text search library for JavaScript. It allows us to perform a complex search to a collection of data. Its small, powerful, and most importantly, easy to use.
Full-text search is an advanced technique to search a database. This technique is usually used to quickly find documents or records based on a keyword. It also allows us to rank which document is more relevant than the others using a scoring system.
How to Search an Array in JavaScript
In the previous tutorial, we learn about how we can do CRUD operations to an array in JavaScript. In this tutorial, we are going to learn how to search a single item or multiple items inside an array.
Let’s say that we have an array of todos.
const todos = [
"Learn React",
"Learn Java",
"Learn JavaScript",
"Learn Vue"
]
Using find
The find method allows us to find a specific item inside an array based on the value. The callback should returns either true or false. You can read more about it here.
How to CRUD an Array in JavaScript
There are two ways to create, update, and delete items to an array in JavaScript. The first approach is by using the mutable methods which will change the array itself.
The second approach is by using the immutable methods, which will return a new array that contains a new updated value. This could be very useful if your using Redux or changing component state in React.
Let’s say we have an array that contains a few items.
How to Use Formik
Formik has just released the version 2.x, which is a major release that has some breaking changes in its API. It offers some additional features like checkboxes support, select multiple fields, and most importantly, React Hooks integration 🎉.
In this tutorial, we’re going to learn how to use this awesome library that helps you to easily build your forms in React without tears 😭.
Getting Started
First, you need to have a React application. You can use an existing one, or create a new one with create-react-app by running this command.
How to Use GraphQL DataLoader
GraphQL offers a very convenient way to handle database relations. But with this simplicity comes with an issue that actually easy to fix, but sometimes people forget about it. And that issue is known as the “N+1” problem. In this tutorial, we will learn on how to fix this problem using DataLoader.
Getting Started
The only thing we need to get started with this project is a blank folder with npm package initialized. So, lets create one!
How to Fetch Data with React Suspense
A while ago, React introduces a new set of features called “Concurrent Mode”. And its basically allows you to interrupt the rendering process of your React components. And, with this feature comes the React Suspense.
Traditionally, data fetching in React looks like this:
import React from "react"
class Example extends React.Component {
componentDidMount() {
const data = fetchSomething() // Fetch data here
}
// ...
}
It’s very obvious that the request happened whenever this component is being rendered or mounted. Suspense allows us to “wait” until we get the data that being fetched asynchronously before we render our component.
How to Build a REST API with Express and Mongoose
This tutorial will guide you to build a RESTful API with Node.js, Express, and Mongoose with CRUD functionalities. I expect that you have the basic knowledge of Node.js and JavaScript. If you do, you’re good to go!
Prerequisites
These software need to be installed on your machine first:
Getting Started
The only thing we need to get started with this project is a blank folder with npm package initialized. So, let’s create one!
How to Fetch Data with React Hooks
In this tutorial, we’re going to learn about new React feature called “Hooks”. Well, I have written a lot of tutorials about React Hooks itself, but in this practicular post, we’re going to learn how we can send an HTTP request asynchronously with this awesome React feature.
Getting Started
First, you obviously need a React application!
If you don’t have it already, you can easily use create-react-app by running this command below.
Build Quotes App with React Native in 5 Minutes
Three days ago, I just give my first tech talk about “How to Get Started as a Mobile Developer” in Jakarta. I talk about what’s going on with React Native this year, the good and bad things about it, what will change in the future, and how to get started with it. It was a very great experience and pretty much successful.
In the live coding session, I decided to build a quotes app with React Native, so that you can be inspired everyday with popular quotes. It’s not a tutorial, but I just want to demonstrate people that they can build an app very fast (five minutes) with React Native.
A Brief Guide to Test React Components with Hooks
Testing is a fundamental skill for every web developer to build high quality and stable web applications. But, it’s also intimidating especially for those who just getting started with web development. But it turns out: with modern frameworks and libraries, testing is not that hard.
A lot of developers avoid to test their applications, and you shouldn’t!
Getting started
To get started with this tutorial, you need to have a good understanding about the basics of React and React Hooks (e.g. useState and useEffect).
Global State with React Hooks
React Hooks let you use state and other React features in functional components. On the other hand, React Context provides a way to pass data around components tree having without pass props down manually.
With both features combined, we can now build our very own state management without using third-party libraries. Besides making our web applications lighter, our code is much more efficient and readable.
Disclaimer
First disclaimer, these methods are not the best practice to manage global state (use Redux instead). Second, there some third party libraries out there that are similar to what we are doing in this tutorial. If those are what you’re looking for, definitely check out something like Unstated Next or Easy Peasy.
How to Optimize React Hooks Performance
Hooks are one of React’s most influential features that redefine the way we write components in React. They let you use the majority of class-based component features within a functional component, which leads us to smaller boilerplate and easier to test.
To get the most out of this feature, let’s take a look at how we can optimize our React apps performance that uses hooks.
Getting started
Let’s get started by initializing a React application with Create React App.
Build Server Rendered React App from Scratch
If you have played around with React for a while, and you are planning to build a production web app, you may need to consider the performance and SEO for your web app. And that problem can be solved by server-side rendering. Even there are many different approach to achieve better performance on client-side rendering, it might not be a good solution for low-powered devices such as an old phone.
What makes it so fast?
On the client-side rendering, also known as single page app, A typical response sent by the server when requesting a React site will look something like this: