Forem: Abdurrahman Fadhil

Some CSS tricks I found useful

Abdurrahman Fadhil — Tue, 29 Jul 2025 11:48:33 +0000

Originally posted on my blog.

It's been a while since I've done any software development. I miss the good old days when I could just sit down and build stuff, without having to worry about consumer optimization problems and ordinary least squares. So, I updated my blog, a static site generated by Hugo. No JavaScript frameworks, no pre-processors. Just markdown, HTML, and CSS. This constraint forced me to relearn modern CSS, and it's quite remarkable to see how much can be accomplished with CSS alone today.

I wanted to share a few techniques I've implemented. These aren't groundbreaking inventions, but they are elegant solutions (I think) to common web design problems.

Custom CSS properties for theming

Dark themes are somewhat expected these days. To implement automatic light and dark mode theming that respects your operating system preference, I use CSS variables (custom properties) and the prefers-color-scheme media query.

The approach is straightforward. First, define all colors as variables in the :root selector. These will be the default (light theme) values.

:root {
  /* Light Theme (Default) */
  --color-bg: oklch(96.7% 0.001 286.375);
  --color-text: oklch(14.1% 0.005 285.823);
  --color-border: oklch(87.1% 0.006 286.286);
  --color-link: #0369a1;
  --color-card-bg: oklch(100% 0 0);
  /* ... more variables */
}

Then, use a media query to check if the user prefers a dark color scheme. If they do, simply redefine the same set of variables with their dark-theme equivalents.

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Theme Overrides */
    --color-bg: #0d1117;
    --color-text: #c9d1d9;
    --color-border: #30363d;
    --color-link: #58a6ff;
    --color-card-bg: #161b22;
    /* ... more variables */
  }
}

Everywhere else in the stylesheet, colors are referenced using these variables (e.g., background-color: var(--color-bg);). This centralizes theme management and makes the site adapt automatically without a single line of JS.

Mixing colors with `color-mix()`

color-mix() allows you to programmatically mix two colors. I use this to generate my link hover and underline colors directly from the base link and background colors.

:root {
  --color-link: #0369a1;
  --color-link-hover: color-mix(in srgb, var(--color-link) 75%, #000 25%);
  --color-link-underline: color-mix(
    in srgb,
    var(--color-link) 50%,
    var(--color-bg)
  );
}

Here, --color-link-hover is created by mixing the base link color with black, and the underline color is a 50/50 mix of the link color and the background color. If I change --color-link, the hover and underline states update automatically. This makes the color system more relational and easier to maintain.

Automatic numbering with CSS counters

For technical articles, numbered headings are essential for structure and readability. Instead of manually numbering them in Markdown, which is tedious and error-prone, you can automate it entirely with CSS Counters.

The logic involves three steps:

Reset a counter on a parent element (article).
Increment the counter on the heading you want to number (h2).
Display the counter using a ::before pseudo-element.

Here's how it's implemented for headings:

article {
  counter-reset: h2 figure; /* Reset h2 and figure counters */
}

article h2 {
  counter-increment: h2;
  counter-reset: h3; /* Reset h3 when we see a new h2 */
}

article h3 {
  counter-increment: h3;
}

article h2::before {
  content: counter(h2) ".";
}

article h3::before {
  content: counter(h2) "." counter(h3) ".";
}

This system nests perfectly, creating section numbers like 1., 1.1., 1.2., etc., all automatically. The same technique is used for figures, incrementing a separate figure counter.

The "full-bleed" card component

A common design pattern is to have a main content column with a set width, but to have certain elements (like images or cards) break out of that container to span the full width of the viewport, especially on mobile.

My .card component does this on smaller screens. The layout is based on a .container class that sets a max-width and padding-inline.

.container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

The card is normally constrained by this padding. However, in the mobile media query we apply a negative margin equal to the container's padding.

@media (max-width: 768px) {
  .card {
    /* This pulls the card out to the viewport edges */
    margin-inline: calc(-1 * var(--container-padding));

    /* We then remove the side borders that are now off-screen */
    border-inline: none;
  }
}

The calc(-1 * var(--container-padding)) perfectly cancels out the container's padding, making the card "bleed" to the edges of the screen.

Selecting parent elements with `:has()`

The :has() pseudo-class, often called the "parent selector," is a game-changer. It allows you to style an element based on what it contains. This solves many problems that previously required JavaScript or brittle class names.

For example, on my blog page, blog post titles in cards are <h1> tags. But on the post's actual page, the <h1> is the main title. I wanted the card titles to be smaller. With :has(), I can style an h1 differently only if it contains a link (<a>), which is true for cards but not the main article title.

article.card h1:has(a) {
  font-size: var(--text-h2);
}

This rule reads: "Select any <h1> inside an article.card that has an <a> element as a child, and apply a smaller font size to it." This is far more elegant than adding a special class (.post-list-title). It allows you to style elements based on hierarchy and content rather than just class names.

It's exciting to see how much can be achieved with pure CSS these days. Less truly is more.

The Ultimate JavaScript Promise Tutorial

Abdurrahman Fadhil — Thu, 20 Aug 2020 22:38:02 +0000

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.

What is Promise?

In a nutshell, Promise is an object in JavaScript that may produce a value some time in the future.

One of the most common use cases of Promise is fetching data from an API. It happens a lot of times, especially in dynamic web applications. Take a look at this example.

console.log(fetch("https://jsonplaceholder.com/posts/1"))

Here, we're using the JavaScript Fetch API to fetch a fake blog post from JSONPlaceholder. If you run this code on your browser, here is what you'll get.

Promise { <state>: "pending" }

When we're trying to fetch data from somewhere else on the internet. We don't get the data eventually, because it really depends on the user's internet connection.

Even though we don't know exactly when the data will arrive, we can add a then handler to our promise so that we can do something about it once it has arrived.

fetch("https://jsonplaceholder.typicode.com/posts/1").then((response) => {
  console.log("status:", response.statusText)
})

If you run it, the result should look like this.

status: OK

Handling Errors

In JavaScript, Promise has three states, pending, rejected, and fulfilled.

The pending state happens right after we create a new promise. This can take some time depending on the task that the promise is running. Once the task is done, it will change to either fulfilled or rejected.

Let's go back to the fetch example.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => {
    console.log(response.ok)
  })
  .catch((err) => {
    console.error("Failed to fetch post!")
  })

In some circumstances, fetching data over the internet can fail. Things like the interrupted internet connection or the unexpected server error might happen to our users.

We can add a function to handle those errors by ourselves by adding a catch method to our promise. Just like then, catch method expects a function as a parameter which will be triggered when bad things happened during the request.

Creating Promise

Most of the time, you don't need to create a Promise by yourself, since the JavaScript APIs and third-party libraries already provide the Promise for you. But, you still can make your own Promise using the Promise constructor.

const myPromise = new Promise((resolve, reject) => {
  resolve("Success!")
})

myPromise.then((data) => console.log(data))

A Promise object requires a callback function.

The callback function gets two parameters. The first one is to resolve the promise so that it executes the given then handler. The second one, however, is to reject the promise so that it goes to the catch handler.

Both functions can accept a value that will be given to the handler.

Success!

Chaining Promises

Sometimes, you want to wait until an asynchronous operation is finished before you jump into another async code. This happens a lot when you're trying to fetch JSON data using fetch.

Take a look at this example:

fetch("https://jsonplaceholder.typicode.com/posts/1").then((response) => {
  response.json().then((data) => {
    console.log(data)
  })
})

Here, we're trying to fetch JSON data from an API, and once we get the raw response, we want to transform it into an object. Because both of these operations are asynchronous, we need to wait until we get the response before we can transform it.

This code works well, but it doesn't look good. However, if you just return the response.json result in the callback and add another then method next to that, you'll get the same result.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => {
    console.log(data)
  })

Now, we get the exact same result but with much cleaner code.

Object {
  userId: 1,
  id: 1,
  title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

Async & Await

Most programming languages have async and await in their syntax. Basically, they are just an alternate syntax to handle asynchronous code like Promises to make it looks cleaner and readable. Let me give you an example.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => {
    console.log(response.ok)
  })
  .catch((err) => {
    console.error("Failed to fetch post!")
  })

When using the traditional then and catch method, we're forced to wrap our code inside callbacks which makes our code.

Remember this piece of code? Well, this function looks okay, but we actually can improve this code using async and await syntax to flatten the code hierarchy.

async function fetchPosts() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1")
  const data = await response.json()
  console.log(data)
}

To catch the errors, you can wrap all asynchronous operations you want to catch inside a try block. What's cool about this is that you can handle the errors of multiple promises in a single code block.

async function fetchPosts() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1")
    const data = await response.json()
    console.log(data)
  } catch (err) {
    console.error("Failed to fetch post!")
  }
}

I'm Building an ORM for Deno!

Abdurrahman Fadhil — Fri, 29 May 2020 14:57:40 +0000

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.

Honestly, the reason why I start this project is not because I can. Shit, I don't even know how to write a raw SQL query to join two different tables.

Over the past years, I feel like I didn't do anything for the open-source community, even though I use open-source all the time. And I feel kind of bad about it.

So, I decided to contribute to the project that I currently fell in love with, which is Deno.

How I build it?

The hardest part of building this project is that there is no tutorial on the internet that teaches you about "how to build an ORM". So, the only way I can learn about this is by reading hundreds of lines of existing ORMs on GitHub, such as TypeORM (TypeScript), Eloquent (PHP), and ActiveRecord (Ruby).

I finally understood that these gigantic tools can be separated into three main parts.

Query Builder
Database Adapter
Model

I know, most of them have their own unique and complicated structure, but at least here is what I can start with.

Query Builder

Query builder is a class whose main task is to construct raw SQL queries. This is the building block of any ORMs, so it is one of the most important parts to understand.

You probably have seen one these. In Laravel for instance, this code will be transformed into an executable SQL query, which makes the development process much easier.

DB::table('users')->where('name', 'John')->first();
// SELECT * FROM users WHERE name = 'John' LIMIT 1;

SQL is complicated, and as a developer, we don't want to work with complicated stuff. Just let the library do the heavy-lifting for us.

Writing query builder is the first thing I did for this project. For sure, it's not an easy thing to do. There are a lot of things that I need to learn about SQL to just implement this feature. But overall, I really enjoy it.

The first version of Cotton's query builder can only build queries with WHERE and LIMIT constraints, which is very terrible. But this feature is growing very quickly and more and more constraints are implemented to Cotton as time goes by.

Turns out, making the query builder itself is not as hard as I imagine. The difficult part, however, is implementing all available query constraints to it. But for me, it's just a matter of time until we cover them all.

In Cotton, the query builder is accessible via queryBuilder once you connected to your database using the connect function.

const db = await connect({
    type: 'sqlite',
    database: './db.sqlite3'
})

// SELECT * FROM users WHERE email = 'a@b.com' LIMIT 5;
await db.queryBuilder('users')
    .where('email', 'a@b.com')
    .limit(5)
    .execute()

If you don't want to execute the query and only want to get the raw SQL statement, you can use the toSQL method.

// SELECT * FROM users WHERE email = 'a@b.com' LIMIT 5;
const sql: string = db.queryBuilder('users')
    .where('email', 'a@b.com')
    .limit(5)
    .toSQL()

Database Adapter

The database adapter allows you to work with different types of databases while using the same code structure. Sometimes, you want to develop your apps on your local machine using SQLite, because it's very convenient to setup. However, when you deploy your app to the production environment, you want to use a different kind of database that can handle more heavy stuff such as PostgreSQL or MySQL.

Each database has its own unique way to connect and perform queries, even though they use the same query language, which is SQL.

So the job of the database adapter is to handle that thing for you. You write your code once but use it anywhere without needing to change anything.

Currently, Cotton supports 3 popular databases: MySQL, PostgreSQL, and SQLite. At this point I'm going to focus on these three before jumping to things like Oracle.

To implement this feature in Cotton, I'm using some of the existing database drivers for Deno.

SQLite3 (via sqlite)
MySQL and MariaDB (via deno_mysql)
PostgresQL (via postgres)

Because these drivers have a different set of APIs, I wrote an adapter class that can handle common database operations such as connect, disconnect, execute to run SQL statement, and query to fetch records from the database.

export abstract class BaseAdapter {
  /**
   * Run SQL query and get the result
   * 
   * @param query SQL query to run (ex: "SELECT * FROM users;")
   * @param values Bind values to query to prevent SQL injection
   */
  public abstract query<T>(query: string, values?: any[]): Promise<T[]>;

  /**
   * Execute SQL statement and save changes to database
   * 
   * @param query SQL query to run (ex: "INSERT INTO users (email) VALUES ('a@b.com');")
   * @param values Bind values to query to prevent SQL injection
   */
  public abstract execute(query: string, values?: any[]): Promise<void>;

  /**
   * Connect database
   */
  public abstract connect(): Promise<void>;

  /**
   * Disconnect database
   */
  public abstract disconnect(): Promise<void>;
}

Each database adapter needs to conform to this BaseAdapter class, which essentially makes us able to stick with the same set of APIs. So, I ended up creating three database driver classes which implement the same methods. Each class looks pretty much like this:

// Mysql
const adapter = new MysqlAdapter({
  database: 'test',
  password: 'test',
  hostname: '127.0.0.1'
  // other config...
})

// Postgres
const adapter = new PostgresAdapter({
  database: 'test',
  password: 'test',
  hostname: '127.0.0.1'
  // other config...
})

// Sqlite
const adapter = new SqliteAdapter({
  database: './db.sqlite3'
  // other config...
})

Because these adapters are conforming to the same abstract class, we can use the same method to interact with different kinds of databases.

await adapter.execute(`
  CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    email VARCHAR(255),
  );
`)

Now, I can create a helper function called connect which automatically decide which adapter to use only by passing a single parameter.

const db = await connect({
  type: "sqlite", // available type: 'mysql', 'postgres', and 'sqlite'
  database: "./db.sqlite3",
  // other...
});

Model

Finally, the last building block of an ORM is model. It's built on top of query builder, and this is what the developers will be working on most of the time.

If you are already familiar with the MVC pattern, model is the M of MVC. A model is responsible for handling CRUD operations on a single database table. Every ORM out there implements their model differently, and here are some examples.

ActiveRecord

# Post model
class Post < ApplicationRecord
end

# Fetch all posts
Post.all

Eloquent ORM

// Post model
class Post extends Model {}

// Fetch all posts
Post::all();

TypeORM

// Post model
@Entity()
class Post extends BaseEntity {
  @Field()
  public title: string;

  @Field()
  public content: string;
}

// Fetch all posts
const posts = await Post.find()

Once, I've built the MVP query builder and MVP database adapter, I can combine those two to execute CRUD operations via a single object.

Here is how I did it:

class User extends Model {
  static tableName = 'users';

  email: string;
}

db.addModel(User)

const users = await User.find()

First, you need to create your model which extends the Model class. You need to specify the table name for that model. There are other optional configurations available such as primaryKey to set the default primary key field.

Then, register the model class using addModel method. This allows your model to execute SQL queries to your database. Finally, you can do CRUD operations to your users table via this model.

Conclusion

Even though this sounds like a lot of things, it actually has tons of crucial features that I haven't implemented yet. Things like schema migration, caching, or even the basic ones like model and query builder are not finished yet.

I will try to keep you posted on this interesting project. And, if you're the kind of person who wants to learn something new, let's improve this project together!

Any contributions means a lot.

Everyone writes bad code, but as long as we keep improving each other's, good things happen.

Finally, what do you think about this? Let me know in the comments below!

How to Generate Unique ID in JavaScript

Abdurrahman Fadhil — Sun, 22 Dec 2019 07:33:00 +0000

Read the original article here

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.

I personally prefer this approach in any case. In JavaScript, we can use a library called uuid to generate UUID.

$ npm install uuid

const uuidv4 = require("uuid/v4")

uuidv4()

UUID has several versions, but the version that appropriate for generating unique id is version 4. And, that code will generate something like this.

1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed

Using Math.random

Math.random is a JavaScript built-in function which allows us to generate a random number. Which means that everytime we run it, it will return a unique combination of numbers.

Math.floor(Math.random() * 100)

Math.random always returns a decimal number, so we need to rounding off that number first. By multiply it with 100, it will return any number between 0 to 99. You can increase the number if you want to get better result.

Result:

Using Date.now

Date.now is another JavaScript built-in function which allows us to get the number of miliseconds elapsed since January 1, 1970.

Date.now()

Result:

1576996323453

How to CRUD an Array in JavaScript

Abdurrahman Fadhil — Thu, 19 Dec 2019 04:47:58 +0000

Read the original article here

There are two ways to create, update, and delete items to an array in JavaScript. The first approach is by using the destructive methods which will change the object 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 any other state management library.

Let's say we have an array contains a some items like below.

const list = ["Item 1", "Item 2", "Item 3"]

Create item

The mutable way:

const newItem = "Item 4"

list.push(newItem)

The immutable way:

const newItem = "Item 4"

const newList = list.concat([newItem])

Result:

[
  "Item 1",
  "Item 2",
  "Item 3",
  "Item 4"
]

Update item

The mutable way:

const itemIndex = 1
const newItem = "Item 2 (updated)"

list[itemIndex] = newItem

The immutable way:

const itemIndex = 1
const newItem = "Item 2 (updated)"

const newList = list.map((item, index) => {
  return index === itemIndex ? newItem : item
})

Result:

[
  "Item 1",
  "Item 2 (updated)",
  "Item 3"
]

Delete item

The mutable way:

const itemIndex = 1

list.splice(itemIndex, 1)

The immutable way:

const itemIndex = 1

const newList = list.filter((item, index) => {
  return index !== itemIndex
})

Result:

[
  "Item 1",
  "Item 3"
]

How to Fetch Data with React Suspense

Abdurrahman Fadhil — Mon, 16 Dec 2019 10:05:49 +0000

Read the original article here

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.

Even though they are not yet available in the stable release, we can still enjoy these features by using the experimental builds.

Getting Started

First, you need to have a React application. If you don't have one already, you can easily use create-react-app by running this command.

$ npx create-react-app learn-suspense

Once your project has been created, we need to install the experimental version of our react and react-dom package.

$ npm install react@experimental react-dom@experimental

I also have published the source code of this entire project on my GitHub. Go ahead and clone it into your computer.

$ git clone https://github.com/rahmanfadhil/learn-suspense.git

Enable concurrent mode

Before we get started using Suspense, we need to enable the concurrent mode first. We can do that by using the createRoot method to render our App component in the index.js file.

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

const element = document.getElementById("root")
ReactDOM.createRoot(element).render(<App />)

Fetch data

Now, let's create file called resource.js.

Here, we're going to write a new function to make an HTTP request. In this example, we're going to use JSONPlaceholder. An easy-to-use, open-source, fake REST API for testing front-end applications.

async function fetchPosts() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts")
  const data = await response.json()
  return data
}

Here, we're using the JavaScript Fetch API to fetch some fake blog posts, and return the result.

We also need to create a function called createResource.

// ...

export default function createResource() {
  let status = "loading"
  let result
  let suspender = fetchPosts().then(
    data => {
      status = "success"
      result = data
    },
    error => {
      status = "error"
      result = error
    }
  )

  return {
    read() {
      if (status === "loading") {
        throw suspender
      } else if (status === "error") {
        throw result
      } else if (status === "success") {
        return result
      }
    }
  }
}

We will use this function to display the blog posts in our React components. This allows us to tell React that we want to "wait" for our component gets rendered until we have done fetching data from the server.

So, when we execute this function, it will run the fetchPosts function where we fetch our blog posts. Then, whenever the promise is completed or rejected, we change the status of the status variable.

The read method will be used to get the data which will be displayed into the browser. When the promise is still pending, we need to throw the suspender variable, which contains our promise. If it gets rejected, we throw our error that lives inside the suspender variable. Finally, we just return the result when the data has fetched successfully.

Display fetched data

Now, let's create a component that will display our blog posts. We'll call it PostList component. Let's put it inside PostList.js file.

import React from "react"

export default function PostList({ resource }) {
  const posts = resource.read()

  return (
    <ul>
      {posts.map((post, i) => (
        <li key={i}>{post.title}</li>
      ))}
    </ul>
  )
}

Here, we are accepting a resource props which contains our resource. Then, we display an unordered list and loop through the blog posts that we have just fetched.

Now in our App.js, we can use the PostList component.

import React, { Suspense } from "react"
import PostList from "./PostList"
import createResource from "./resource"

const resource = createResource()

export default function App() {
  return (
    <div>
      <h1>Blog Posts</h1>
      <Suspense fallback={<h1>Loading...</h1>}>
        <PostList resource={resource} />
      </Suspense>
    </div>
  )
}

Here, we're fetching the blog posts by executing the createResource function. Then, we render our PostList component and wrap it inside the Suspense component. This component takes a fallback prop, where we display the loading component.

We also need pass the resource into our PostList component, so that it can display the result.

Cool! we can finally test our app to make sure everything is running as expected.

Fetch multiple data

There are a lot of cases where you want to fetch multiple data at once. But for now, we need to rewrite the createResource function over and over again to fetch a different endpoint or server.

We can prevent this by extracting the createResource function into something like this.

// ...

function wrapPromise(promise) {
  let status = "loading"
  let result
  let suspender = promise.then(
    data => {
      status = "success"
      result = data
    },
    error => {
      status = "error"
      result = error
    }
  )

  return {
    read() {
      if (status === "loading") {
        throw suspender
      } else if (status === "error") {
        throw result
      } else if (status === "success") {
        return result
      }
    }
  }
}

export default function createResource() {
  return {
    posts: wrapPromise(fetchPosts())
    // add here
  }
}

Now, with this approach, you can add more data into your resource by simply wrap your promises with wrapPromise function.

We also need to do some adjustment into your PostList component.

import React from "react"

function PostList({ resource }) {
  const posts = resource.posts.read() // change this

  return (
    <ul>
      {posts.map((post, i) => (
        <li key={i}>{post.title}</li>
      ))}
    </ul>
  )
}

Cool, so that's basically how you can fetch data with React suspense. If you don't want to implement this code by yourself, especially the resource and wrapPromise part, you can use this awesome library called SWR. It offers some additional features like loading state, error catching, and custom fetcher.

Build REST API with Express & Mongoose

Abdurrahman Fadhil — Sun, 15 Dec 2019 07:03:00 +0000

This post is originally published here

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, lets create one!

$ mkdir learn-express
$ cd learn-express
$ npm init -y

Now, lets install some useful packages.

$ npm install express mongoose body-parser

Here, we're installing Express for our web framework, mongoose to interact with our MongoDB database, and body-parser to parse our request body.

I also have published the source-code of this entire project on my GitHub. Go ahead and clone this into your computer.

$ git clone https://github.com/rahmanfadhil/learn-express-mongoose

Basic Express Server

We can now start to create index.js and create a simple Express server.

const express = require("express")

const app = express()

app.listen(5000, () => {
  console.log("Server has started!")
})

We first import our express package that we've just installed. Then, create a new express instance and put it into app variable. This app variable let us do everything we need to configure our REST API, like registering our routes, installing necessary middlewares, and much more.

Try to run our server by running this command below.

$ node index.js
Server has started!

Alternatively, we can setup a new npm script to make our workflow much more easier.

{
  "scripts": {
    "start": "node index.js"
  }
}

Then, we can run our server by executing npm start.

$ npm start
Server has started!

Setup mongoose

Mongoose is the most preferred MongoDB wrapper for Node.js. It allows us to interact with MongoDB database with ease. We can start connecting our server into our MongoDB database.

const express = require("express")
const mongoose = require("mongoose") // new

// Connect to MongoDB database
mongoose
  .connect("mongodb://localhost:27017/acmedb", { useNewUrlParser: true })
  .then(() => {
    const app = express()

    app.listen(5000, () => {
      console.log("Server has started!")
    })
  })

Here, we're importing mongoose package and use it to connect into our database called acmedb, but you can name it whatever you want though. If you haven't created that database, don't worry, mongoose will create it for ya.

The connect method returns a promise, so we can wait until it resolved, and run our Express server.

Run the server again, and make sure there is no error.

$ npm start
Server has started!

Now, we have successfully connect our server with the database, now it's time to create our first model.

Mongoose model

In NoSQL world, every single data stored inside a single document. And multiple documents with the same type can be put together inside a collection.

Model is a class, that lets us interact with a specific collection of a database.

Defining a model also requires us to define a schema. Schema is basically tells the model how our document should look like. Even though in NoSQL world, the document schema is flexible, mongoose helps us to keep our data more consistent.

Let's say we have a blog API. So, we obviously going to have a Post model. And the post model has a schema that contains the fields that can be added into a single document. For this example, we will simply have a title and content field.

So, let's add a new folder in our project called models, and create a file called Post.js inside it.

const mongoose = require("mongoose")

const schema = mongoose.Schema({
  title: String,
  content: String
})

module.exports = mongoose.model("Post", schema)

Here, we're constructing a schema with mongoose.Schema, and define the fields as well as the data types. Then, we create a new model by using the mongoose.model based on the schema that we've just created.

Get all posts

Here, we can create a new file called routes.js which will contains our Express routes.

const express = require("express")
const router = express.Router()

module.exports = router

We also need to import express but this time, we want to use the express.Router. It lets us register the routes and use it in our application (in index.js).

Now, we're ready to create our first route in Express that actually do something!

Let's create a route that can get a list of the existing posts.

const express = require("express")
const Post = require("./models/Post") // new
const router = express.Router()

// Get all posts
router.get("/posts", async (req, res) => {
  const posts = await Post.find()
  res.send(posts)
})

module.exports = router

Here, we're importing the Post model and create a new GET route with router.get method. This method will accept the endpoint of the route, and the route handler to define what data should be sent to the client. In this case, we're going to fetch all of our posts with the find from our model and send the result with res.send method.

Because fetching documents from the database is asynchronous, we need to use await to wait until the operation is finished. So, don't forget to tag your function as async. Then, after the data is completely fetched, we can send it to the client.

Now, we can install our routes in our index.js.

const express = require("express")
const mongoose = require("mongoose")
const routes = require("./routes") // new

mongoose
  .connect("mongodb://localhost:27017/acmedb", { useNewUrlParser: true })
  .then(() => {
    const app = express()
    app.use("/api", routes) // new

    app.listen(5000, () => {
      console.log("Server has started!")
    })
  })

First, we import the ./routes.js file to get all the routes, and register it with app.use method with the prefix of /api, So, all of our posts can be accessed in /api/posts.

Try to run our server and fetch /api/posts, let's see what we got.

$ curl http://localhost:5000/api/posts
[]

Now, we got an empty array from our server. That's because we haven't create any post yet. So, why not create one?

Create Post

To create a post, we need to accept POST requests from /api/posts.

// ...

router.post("/posts", async (req, res) => {
  const post = new Post({
    title: req.body.title,
    content: req.body.content
  })
  await post.save()
  res.send(post)
})

Here, we're creating a new Post object and populate the fields from the req.body property. The req object contains the client request data, and the body is one of them.

Then, we also need to save our record with the save method. Saving data is also asynchronous, so we need to use async/await syntax.

By default, Express doesn't know how to read the request body. That's why we need to use body-parser to parse our request body into a JavaScript object.

const express = require("express")
const mongoose = require("mongoose")
const routes = require("./routes")
const bodyParser = require("body-parser") // new

mongoose
  .connect("mongodb://localhost:27017/acmedb", { useNewUrlParser: true })
  .then(() => {
    const app = express()
    app.use("/api", routes)
    app.use(bodyParser.json()) // new

    app.listen(5000, () => {
      console.log("Server has started!")
    })
  })

Here, we're using the body-parser library as a middleware to parse the JSON body so that we can access it via req.body in our route handler.

Let's test out the create post feature that we have just created!

$ curl http://localhost:5000/api/posts \
    -X POST \
    -H "Content-Type: application/json" \
    -d '{"title":"Post 1", "content":"Lorem ipsum"}'
{
    "_v": 0,
    "_id": <OBJECT_ID>,
    "title": "Post 1",
    "content": "Lorem ipsum"
}

You also can test it with Postman as well.

Get individual post

To grab individual post, we need to create a new route with GET method.

// ...

router.get("/posts/:id", async (req, res) => {
  const post = await Post.findOne({ _id: req.params.id })
  res.send(post)
})

Here, we're registering a new route with the endpoint of /posts/:id. This is called the URL parameter, it lets us grab the id of our post in our route handler. Because, every single document that we stored into our database has their own uniqe identifier called ObjectID. And we can find it using the findOne method and pass the id from req.params object.

Cool, now try to fetch a single blog post with our HTTP client.

$ curl http://localhost:5000/api/posts/<OBJECT_ID>
{
  "_id": <OBJECT_ID>,
  "title": "Post 1",
  "content": "Lorem ipsum"
}

Looks like its working, but there is one thing though.

If we to the this route and pass the wrong ObjectID, our server is crashed. And the reason why its not working is because when we fetch a single post with an ObjectID that doesn't exist, the promise rejects and our application is stop working.

To prevent this, we can wrap our code with try/catch block, so that we can send a custom error whenever the client request a data that doesn't exist.

// ...

router.get("/posts/:id", async (req, res) => {
  try {
    const post = await Post.findOne({ _id: req.params.id })
    res.send(post)
  } catch {
    res.status(404)
    res.send({ error: "Post doesn't exist!" })
  }
})

Now, if we try to fetch a post that doesn't exist, our server still behaves as it should be.

$ curl http://localhost:5000/api/posts/<OBJECT_ID>
{
  "error": "Post doesn't exist!"
}

Update post

Usually, the preferred HTTP method to do an update operation into a single record is PATCH. So, let's create one!

// ...

router.patch("/posts/:id", async (req, res) => {
  try {
    const post = await Post.findOne({ _id: req.params.id })

    if (req.body.title) {
      post.title = req.body.title
    }

    if (req.body.content) {
      post.content = req.body.content
    }

    await post.save()
    res.send(post)
  } catch {
    res.status(404)
    res.send({ error: "Post doesn't exist!" })
  }
})

Our update post route relatively similar to the get single post route. We're looking for a post by based on the id, and throw a custom error if the post doesn't exist. But this time, we also update every single field of the post object by populating it with the data provided by the client inside the req.body.

We also want to save our post object with save method, and send the update post data to the client.

Now, we can run a PATCH method to our /api/posts/<OBJECT_ID> endpoint.

$ curl http://localhost:5000/api/posts/<OBJECT_ID> \
    -X PATCH \
    -H "Content-Type: application/json" \
    -d '{"title":"Updated Post", "content":"Updated post content"}'
{
    "__v": 0,
    "_id": <OBJECT_ID>,
    "title": "Updated Post"
    "content": "Updated Post content",
}

Delete post

Finally, our last step is to finish the CRUD feature by add the delete functionality.

// ...

router.delete("/posts/:id", async (req, res) => {
  try {
    await Post.deleteOne({ _id: req.params.id })
    res.status(204).send()
  } catch {
    res.status(404)
    res.send({ error: "Post doesn't exist!" })
  }
})

In the delete post route, we basically just run the delete operation directly to the database with deleteOne method and pass the document id. And we return nothing to the user.

$ curl http://localhost:5000/posts/<OBJECT_ID> -X DELETE -I
HTTP/1.0 204 NO CONTENT
...

How to Fetch Data with React Hooks

Abdurrahman Fadhil — Sat, 14 Dec 2019 09:03:35 +0000

Read the original article here

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.

$ npx create-react-app <YOUR_APP_NAME>

Or, I have already publish the source code of this entire project. Go ahead and clone this repo from my GitHub.

$ git clone https://github.com/rahmanfadhil/react-hook-fetch

Fetch when component has loaded

Inside the component where you want to fetch a data, you need to add a useEffect hook.

import React, { useEffect } from "react"

export default function Example() {
  useEffect(() => {
    // Fetch data right here!
  }, [])

  return (
    <div>
      <h1>Cool app</h1>
    </div>
  )
}

Notice that I put an empty array at the second parameter. By default, useEffect gets called whenever a state in our component has changed. In this practicular scenario, we want to run this code once. So, the empty array tells our useEffect to run this code only when our component has rendered to the screen.

Then, we want to fetch our data by using the fetch API. You can use any HTTP client you want, but here, I just want to make things simple.

For this example, we're going to use JSONPlaceholder, an fake REST API that allows us to test our front-end applications. It's open-source, easy to use, and comes with a lot of resources already.

import React, { useEffect } from "react"

export default function Example() {
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => console.log(data))
  }, [])

  return (
    <div>
      <h1>Cool app</h1>
    </div>
  )
}

Now we're trying to fetch the posts data from our fake API, transform the JSON respose into a JavaScript object, and for now, we just print out the final result into our console.

Open up your console tab, and you can see a bunch of fake posts that we just fetched from the API.

That's a good start!

Fetch result state

After we have successfully fetched our data, we need to store it somewhere in our component so that we can show the result to the screen. And the component state is the best place for it.

To setup a state for our component with Hooks, we can use the useState hook from React. You can read more about it here.

import React, { useEffect, setState } from "react"

export default function Example() {
  const [posts, setPosts] = useState([]) // new

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => console.log(data))
  }, [])

  return (
    <div>
      <h1>Cool app</h1>
    </div>
  )
}

Because our posts that we fetch is an array, we can define the default value of our state to be an empty array.

Cool! now we can store the posts that we just fetch by using the setPosts function.

import React, { useEffect, useState } from "react"

export default function Example() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => {
        setPosts(data) // new
      })
  }, [])

  return (
    <div>
      <h1>Cool app</h1>
    </div>
  )
}

Then, the last thing we want to do is to display our data to the screen. We can loop through our posts array and display each item with HTML list.

import React, { useEffect, useState } from "react"

export default function Example() {
  // ...

  return (
    <div>
      <h1>Cool app</h1>
      {posts.map(item => (
        <li>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </li>
      ))}
    </div>
  )
}

We also can add a placeholder into our list so that the user will see a loading bar or something instead of just a blank screen.

import React, { useEffect, useState } from "react"

export default function Example() {
  // ...

  return (
    <div>
      <h1>Cool app</h1>
      {posts.length > 0 ? (
        posts.map(item => (
          <li>
            <h2>{item.title}</h2>
            <p>{item.description}</p>
          </li>
        ))
      ) : (
        <h1>Loading posts...</h1>
      )}
    </div>
  )
}

Custom hook

We have successfully fetch a data and display it into the browser.

But here, I just want to show you how we can improve our code that we just write. So far, we put all of our code into a single component, this approach is not reusable, because if we want to do the same thing in a different component somewhere in our application, we need to rewrite this code over and over again. Or a bit better, copy-paste... 🤣

So, to prevent that, we can create a custom hook that we can use across components where we want to fetch the same data.

function usePosts() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => {
        setPosts(data)
      })
  }, [])

  return posts
}

A custom hook is just a plain JavaScript function that contains hooks provided by React. So, the only thing we need to do is to extract our Example component logic into a reusable function

Finally, we can use this usePosts hook inside our Example component to get the current posts data.

import React, { useEffect, useState } from "react"

// ...

export default function Example() {
  const posts = usePosts() // new

  return (
    <div>
      <h1>Cool app</h1>
      {posts.length > 0 ? (
        posts.map(item => (
          <li>
            <h2>{item.title}</h2>
            <p>{item.description}</p>
          </li>
        ))
      ) : (
        <h1>Loading posts...</h1>
      )}
    </div>
  )
}

Now, your application works the same as before, but the code is much more cleaner and readable.

Quick note

If you want to have more advanced feature for data fetching with React Hooks, consider using SWR. An awesome React Hooks library for data fetching by zeit. It offers some additional features like loading state, error catching, custom fetcher, even React Suspense integeration!

Build REST API with Flask & SQLAlchemy

Abdurrahman Fadhil — Sat, 09 Nov 2019 10:40:01 +0000

Read the original article here

Flask is a great framework that enables you to build web applications quickly with Python. It's fast, small, and fun to work with. In this tutorial, we're going to build a RESTful API with Flask framework, and some other supporting tools.

The objective of this tutorial is to understand the concept of building a Flask server from the ground up, learn how to commuticate with SQL databases via object-relational mapper, as well as design a RESTful API with object-oriented design pattern.

By the end of this tutorial, you will be able to build a REST API that can manage blog posts data with create, read, update, and delete functionality.

Getting Started

I have published the finished project of this tutorial on my GitHub, you can check it out here or clone it into your machine by running the command below.

$ git clone https://github.com/rahmanfadhil/flask-rest-api.git

Then, create a new Python virtual environment and install the dependencies with Pip.

$ python -m venv env
$ source env/bin/activate
(env) $ pip install -r requirements.txt

Dependencies

According to its documentation, Flask is a micro-framework. This means, unlike any other web frameworks out there, Flask doesn't come with a lot of fancy stuff out of the box.

This makes Flask simpler and easier to learn than others. But at the same time, we often forced to find our own solutions to solve common problems. For instance, connecting to a database, implementing an authentication system, and so on.

Even though, the Flask community has provided some useful open-source extensions that allow us to rapidly solve those problems, only by installing and configuring them.

Here are some third-party packages we will use to build our API:

Flask SQLAlchemy: A Flask extension that adds support for SQLAlchemy, an object-relational mapper which makes us easier to interact with SQL databases.
Flask RESTful: Another Flask extension for quickly building REST APIs with object-oriented design pattern.
Flask Marshmallow: Yet another Flask extension that integrates with Marshmallow, a python library for object serialization.

Flask project from ground up

We can start our project by initializing a new virtual environment with Python venv module.

$ python3 -m venv env
$ source env/bin/activate

Second, install our we can install our dependencies via Pip by running this command.

$ pip install Flask \
    Flask-SQLAlchemy \
    Flask-RESTful \
    flask-marshmallow

Finally, Create a new Python file called main.py (or whatever you want to name it). Here, we setup our brand new Flask server.

from flask import Flask

app = Flask(__name__)

if __name__ == '__main__':
    app.run(debug=True)

To test it out, we can execute our Python script with the command below.

(env) $ python main.py

Open http://localhost:5000, and you will see a 404 page.

Database setup

Here, we're going to use an SQL database to store our blog posts data.

For learning purposes, I'm going to use SQLite, a small SQL database implementation which very easy to get up and running. Keep in mind that you might want to consider a more reliable database like PostgreSQL or MySQL in production environment.

To setup SQLAlchemy in a Flask project, we can import the flask_sqlalchemy package (which we've installed earlier), and wrap our Flask app variable in a new SQLAlchemy object. We also want to setup SQLALCHEMY_DATABASE_URI in our flask app configuration to specify which database we want to use and how to access it.

from flask import Flask
from flask_sqlalchemy import SQLAlchemy # new

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db' # new
db = SQLAlchemy(app) # new

if __name__ == '__main__':
    app.run(debug=True)

Database model

A model is nothing more than a representation of your database, where you can store, fetch, and manipulate your data from it. Think of it as the middleman of your app and database. And its usually represents a single table/collection.

It lets you do everything to that specific table directly from your python code. So that you don’t need to mess around with SQL queries anymore.

Let's create a model that represents our blog post data.

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(50))
    content = db.Column(db.String(255))

    def __repr__(self):
        return '<Post %s>' % self.title

Here, we have an id property which is an auto-generated primary key field. Then, we also have a title and content field, just an ordinary string field with maximum length defined.

This part is optional, but to make sure that everything is obvious, we can set a __repr__ method to make every single post object is printable to the console.

Then, we need to setup the schema for our model. This is necessary because we want to parse our post object(s) into a JSON response. In this case, we can make use of flask_marshmallow package.

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_marshmallow import Marshmallow # new

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
db = SQLAlchemy(app)
ma = Marshmallow(app) # new

# ...

if __name__ == '__main__':
    app.run(debug=True)

Create a new marshmallow schema based on our Post model.

class PostSchema(ma.Schema):
    class Meta:
        fields = ("id", "title", "content")

post_schema = PostSchema()
posts_schema = PostSchema(many=True)

In this schema we can choose what fields to expose to our users. If your model has some sensitive data, you may want to exclude it here. Then, we also instantiate it in posts_schema and post_schema. Use posts_schema to serialize an array of posts. Otherwise, use post_schema.

The next important part which most people usually forget (including myself) is to initialize our database schema by invoking the db.create_all function from our SQLAchemy instance inside a Python interactive shell (REPL). The reason why we do this in a REPL is because we only need to initialize our schema once.

Also, make sure you are in the right Python environment.

(env) $ python
>>> from main import db
>>> db.create_all()
>>> exit()

RESTful Routes

Finally, we can start to define our RESTful handler. We will make use of Flask-RESTful package, a set of tools that help us to construct a RESTful routes with object-oriented design.

We need to setup Flask-RESTful extension to get up and running in our Flask server.

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_restful import Api, Resource # new

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
db = SQLAlchemy(app)
api = Api(app) # new

# ...

if __name__ == '__main__':
    app.run(debug=True)

Create a new RESTful resource, in that way, we define our business logic like how to fetch our data from the database, how to do authentication, and so on.

class PostListResource(Resource):
    def get(self):
        posts = Post.query.all()
        return posts_schema.dump(posts)

api.add_resource(PostListResource, '/posts')

Here, we accept a GET request and make query to fetch all posts with Post model. Then, we take advantage of posts_schema to serialize the data from database and return it as a response to the client.

Finally, we register our resource by using api.add_resource method and define the rouute endpoint.

Start the server, send a request to /posts endpoint, and you will get an empty array.

$ curl http://localhost:5000/posts
[]

Cool, now it's time to work with the create operation.

# ...
from flask import Flask, request # change

# ...

class PostListResource(Resource):
    def get(self):
        posts = Post.query.all()
        return posts_schema.dump(posts)

    # new
    def post(self):
        new_post = Post(
            title=request.json['title'],
            content=request.json['content']
        )
        db.session.add(new_post)
        db.session.commit()
        return post_schema.dump(new_post)

# ...

We create a new post method in our resource, instantiate a new post object with the request data, and save the record to the database. Finally, we return the post data as the response to the client.

Try to send a POST request to /todos endpoint with a post data.

$ curl http://localhost:5000/posts \
    -X POST \
    -H "Content-Type: application/json" \
    -d '{"title":"Post 1", "content":"Lorem ipsum"}'
{
    "content": "Lorem ipsum",
    "id": 1,
    "title": "Post 1"
}

Let's create a new resource to fetch individual post.

class PostResource(Resource):
    def get(self, post_id):
        post = Post.query.get_or_404(post_id)
        return post_schema.dump(post)

api.add_resource(PostResource, '/posts/<int:post_id>')

Here, we also have accept a GET request, but instead of querying all posts, we just fetch a single post with the given id. If it not exist, it will raise a 404 error.

Try to fetch /todos/<int:id>, and you will get the post that we're just created.

$ curl http://localhost:5000/posts/1
{
    "title": "Post 1",
    "content": "Lorem ipsum",
    "id": 1
}

And, if you request a post with an id that doesn't exist, you will get a 404 error.

$ curl http://localhost:5000/posts/12 -I
HTTP/1.0 404 NOT FOUND
...

Now, let's add the remaining CRUD operations, update and delete.

class PostResource(Resource):
    # ...

    def patch(self, post_id):
        post = Post.query.get_or_404(post_id)

        if 'title' in request.json:
            post.title = request.json['title']
        if 'content' in request.json:
            post.content = request.json['content']

        db.session.commit()
        return post_schema.dump(post)

    def delete(self, post_id):
        post = Post.query.get_or_404(post_id)
        post.delete()
        db.session.commit()
        return '', 204

In the patch method, we first get the post object if exist, then we update the properties which defined in the request body (request.json). That's why we need to check both properties with in expression. Save the changes to the database by using the db.session.commit() and send the update data to the client.

In the delete method, we also get the post object. But this time, we just delete the object with delete method from the post object. Save the changes and return nothing to the client (because there's nothing to show for).

Now, we have all the functionalities up and running, let's test it out!

Update post:

$ curl http://localhost:5000/posts/1 \
    -X PATCH \
    -H "Content-Type: application/json" \
    -d '{"title":"Updated Post", "content":"Updated post content"}'
{
    "content": "Updated post content",
    "id": 1,
    "title": "Updated Post"
}

Delete post:

$ curl http://localhost:5000/posts/1 -X DELETE -I
HTTP/1.0 204 NO CONTENT
...

Data Fetching Basics in Flutter

Abdurrahman Fadhil — Wed, 06 Nov 2019 13:52:46 +0000

Read the original article here

Great applications should provide useful information to their users. Therefore, displaying data from other source (server) is necessary for most application. Fortunately, Flutter gives us convenient tools out of the box to do such thing.

In Dart language, we can use a package called http. It‚Äôs a package that contains useful functions to send and retrieve data from HTTP server.

To install http package, add the following package to your pubspec.yaml file on your Flutter project.

# ...

dependencies:
  http: <latest_version> # add this

In this tutorial, we will fetch some data from JSONPlaceholder. It's an open-source REST API that contains useful fake resources like blog posts, comments, photos, users, etc.

First, we can create a function that returns the response of our HTTP request. This function is asynchronous, so it should return a Future. Then, we need to check wether the response is successful or not by checking the HTTP status code. Finally, we decode our response body to with jsonDecode function and return it.

We also want to use the http package which we installed earlier.

import 'package:http/http.dart' as http;

Future<List<dynamic>> fetchPost() async {
  final response = await http.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    List<dynamic> post = jsonDecode(response.body);
    return post;
  } else {
    throw Exception('Failed to load post');
  }
}

Now, look back to you Flutter widget where you want to make a request to the server. If your widget is now stateless, change it to stateful. Because, we want to store the response data to display it in our widget.

import 'package:flutter/material.dart';

class PostDetail extends StatefulWidget {
  @override
  _PostDetailState createState() => _PostDetailState();
}

class _PostDetailState extends State<PostDetail> {
  @override
  Widget build(BuildContext context) {
    // Your widgets
  }
}

Create an initState method in your widget. This method will be invoked whenever your flutter widget is ready to be displayed on the screen. From there, we will fetch our data and save the response to the widget state.

// ...

class _PostDetailState extends State<PostDetail> {
  Future<List<dynamic>> _post;

  @override
  void initState() {
    super.initState();

    _post = fetchPost();
  }

  @override
  Widget build(BuildContext context) {
    // Your widgets
  }
}

From there, we invoke our fetchPost function and store the response to the post widget state.

Remember, this data is asynchronous. So we can't just put the post state inside our build method directly.

One way to display asynchronous data is by using a widget called FutureBuilder. It's a widget provided by Flutter inside the Flutter Material Library. This widget makes us very easy to work with asynchronous data. It let us determine what to display when the data is loaded.

When using FutureBuilder widget, we need to define our Future, obviously, and a function that returns a widget.

// ...

class _PostDetailState extends State<PostDetail> {
  Future<List<dynamic>> _post;

  @override
  void initState() {
    super.initState();

    _post = fetchPost();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _post,
      builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
        if (snapshot.hasData) {
          // Data fetched successfully, display your data here
          return Column(
            children: <Widget>[
              Text(snapshot.data['title']),
              Text(snapshot.data['content'])
            ],
          );
        } else if (snapshot.hasError) {
          // If something went wrong
          return Text('Something went wrong...');
        }

        // While fetching, show a loading spinner.
        return CircularProgressIndicator();
      }
    )
  }
}

The builder function gets two parameters. The BuildContext, and an AsyncSnapshot. The AsyncSnaphot object, which we defined as snapshot, has the hasData and hasError properties, which very useful to check if there is an error. Finally, while the request is still going on, we can display a loading spinner.

How to Test Your Express APIs with Supertest

Abdurrahman Fadhil — Sat, 24 Aug 2019 13:19:16 +0000

Read the original article here

Introduction

Express is the most popular Node.js framework for building web applications, especially REST APIs. And in this article, I'm going to show you how you can test your API endpoints with a cool library called SuperTest.

SuperTest is an HTTP assertions library that allows you to test your Node.js HTTP servers. It is built on top of SuperAgent library, wich is an HTTP client for Node.js.

Getting Started

Let's start by creating a simple Express server with a single endpoint that returns a simple json.

// index.js

const express = require("express")
const app = express()

app.get("/", (req, res) => {
  res.send({ name: "John Doe" })
})

app.listen(8000, () => {
  console.log("Server has started!")
})

To test it manually, you can simply run node index.js and send a request to http://localhost:8000 with Postman or cURL.

$ curl http://localhost:8000
{"name":"John Doe"}

To make our code testable, we need to separate our listen method to another file, so that we can require our express instance without starting the server.

// index.js

const server = require("./server.js")

server.listen(8000, () => {
  console.log("Server has started!")
})

// server.js

const express = require("express")

const app = express()

app.get("/", (req, res) => {
  res.send({ name: "John Doe" })
})

module.exports = app

We have our server up and running, now it's time to write some test.

SuperTest Basic Usage

Before we get started with SuperTest, we need to install a testing framework. It's a handy tool to write automated tests, so that you'll know what part of your application went wrong.

In this tutorial, we will going to use Jest. Which is by far the easiest testing framework for JavaScript I've ever used.

$ npm install --save-dev jest

Then, we need to setup our test command by adding a test script inside our package.json.

{
  // ...
  "scripts": {
    "test": "jest"
  }
  // ...
}

After Jest installed and configured, we now can write our first test by creating new test file.

// server.test.js

const app = require("./server")

test("GET /", done => {
  supertest(app)
    .get("/")
    .expect(200, JSON.stringify({ name: "John Doe" }))
    .end(done)
})

Here we require our server.js file to get our Express.js server instance. Then, create a new test called "GET /", run a GET request to / endpoint and expect the result to be the defined object. We also want to make sure that the response has 200 HTTP status, which means that our request is OK.

If you notice, when we're asserting our response, we are stringifying our JSON object. That's because by default, supertest will compare our response as a string.

We can now run our tests by running npm test or npm run test.

Using Callbacks

There are other approach to assert your server response. Instead of passing the expected result as an argument, we can pass a callback to get and assert our response.

supertest(app)
  .get("/")
  .expect(response => {
    expect(response.status).toBe(200)
    expect(response.body).toEqual({ name: "John Doe" })
    done()
  })

By using the callback approach, we're asserting your response body and status code directly inside our response callback. We also need to run Jest done function to finish our test when our assertion is completed.

We also get our response body as a JavaScript Object, so we can compare it directly with toEqual method provided by Jest matchers.

Send Form Data

Form input is the most essential feature of dynamic web applications nowadays. And testing a endpoint with form data is a piece of cake in SuperTest.

To handle form data, we need to install another third-party library called Body Parser. Body Parser is an Express middleware that we can use to handle form data inside our Express app.

If you don't know what middlware is, essentially, it's just a function that can intercept users request. In this can we use it to get our form data.

We can install Body Parser by running the command below.

$ npm install body-parser

Then, we can use Body Parser middleware inside our server.js file.

// server.js

const express = require("express")
const bodyParser = require("body-parser")

const app = express()
app.use(bodyParser.urlencoded({ extended: false }))

// ...

We can now access users form data inside our route handler by accessing req.body variable.

// server.js

// ...

app.post("/form-data", (req, res) => {
  const formData = {
    name: req.body.name,
    age: req.body.age,
  }

  res.send(formData)
})

// ...

To test it out, we can send our form data by calling the field method for every field in our form inside our supertest request.

supertest(app)
  .get("/form-data")
  .field("name", "John Doe")
  .field("age", "25")
  .expect(response => {
    expect(response.status).toBe(200)
    expect(response.body).toEqual({ name: "John Doe", age: "24" })
    done()
  })

JSON Request Body

By default, supertest will send your form data with Content-Type of application/x-www-form-urlencoded. If the client wants to send a more complex data types, you way want to use JSON format, which is application/json. To do that we can use another method from supertest called send.

send method lets you send a request with body that has a Content-Type of application/json. So that you can send a more complex data like numbers, arrays, nested objects, etc.

const formData = {
  name: "John Doe",
  age: 25,
  fruits: ["Apple", "Orange"],
}

supertest(app)
  .get("/form-data")
  .send(formData)
  .expect(response => {
    expect(response.status).toBe(200)
    expect(response.body).toEqual(formData)
    done()
  })

Then, you need to add another express middleware from body-parser package, which lets you decode request body with the Content-Type of application/json.

// server.js

const express = require("express")
const bodyParser = require("body-parser")

const app = express()
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

// ...

File Upload

We also can upload files to our server with SuperTest!

To do this, we need to setup our server first, so that we can handle file upload from the client. The easiest way to handle file upload in Express is by using another third-party library called Multer. So, lets install it first!

$ npm install multer

Then, we can initialize a new Multer object and specify our upload directory.

// server.js

const express = require("express")
const multer = require("multer")

const app = express()
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

const upload = multer({ dest: "uploads/" })

// ...

Finally, we can handle the file upload by adding the Multer middleware from our Multer instance. This let us upload the file inside avatar field in our client side form.

// server.js

// ...

app.post("/upload", upload.single("avatar"), (req, res) => {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})

// ...

We can test it out by using the attach method where we can specify the field name and the file path we want to upload.

supertest(app)
  .get("/")
  .field("name", "John Doe")
  .attach("avatar", "/path/to/file.png")
  .expect(response => {
    expect(response.status).toBe(200)
    done()
  })

By default, our form data will be sent with Content-Type of multipart/form-data.

Asynchronous Programming in Dart

Abdurrahman Fadhil — Sat, 27 Jul 2019 11:33:48 +0000

Read the original article here

Flutter is getting more popular than ever! But before you start learning the framework, you need to learn the programming language first. I know that's annoying and it seems like a waste of time. But, that's the challenge that every developer must face.

Dart is a powerful programming language by Google that aims to help developers to build web applications for both client and server, and now mobile apps with Flutter. Just like JavaScript, Dart is an asynchronous programming language. It means that you can run a piece of code without blocking any other tasks, even though, it runs in a single thread.

Dart also use something called an event loop to make the asynchronous code works. Actually, you don't to really care about this because the Dart VM is doing everything for you, but at least you guys understand how it works and why does it exist.

Future

One of the basic implementation of asynchronous coding pattern in Dart is Future. If you already familiar with JavaScript, Future have the exact same concept with Promise. Basically, you have a piece of code that you want to run whenever some event is triggered.

Once your function gets a Future, you need to decide what do you want to do when the Future is not completed yet, what do you want to do when it's completed, and what do you want to do when it's completed with an error.

How Future Works.

Take a look at this code below.

void fetchPost() {
  http.get('https://jsonplaceholder.typicode.com/posts/1')
    .then((response) {
      print(response);
    });
}

In this example, we have a function that use the http library make an http request from an API. The http.get method returns a Future. So, we use then to register a callback that will be triggered when the request is completed.

When you run this function, the event loop gets it, and it started to make a request. While waiting for the response from the API, the event loop still doing its job. Maybe some other events come in, or user do some stuff, your Future still waiting for either a data or an error.

When the data arrives, the callback that we register with then method gets triggered. Now, your piece of code get executed and print the response to the console.

Handling Errors

Now we know that we can use the then method to tell the Future what we want to do when the data arrives successfully. But, how about if the there is something wrong in our request like; connection is interrupted, or the form data is not valid?

Well, we can use the catchError method to tell Dart what we want to do when the Future is throwing an error.

void fetchPost() {
  http.get('https://jsonplaceholder.typicode.com/posts/1')
    .then((response) {
      print(response);
    })
    .catchError((error) {
      print("Something went wrong: ${error.message}");
    });
}

catchError callback gets an error as the first parameter. So, you know what's exactly went wrong.

So far so good! Now I'm going to show you how to make your own instance of the Future.

Create Our Own Future

Most of the time, you don't need to create your own Future. That's because many third-party libraries already generates a Future for you. For instance, network library, accessing device camera, and many other. But still, you can build your own Future by using the Future constructor.

Let me show you what I'm talking about.

import 'dart:async';

void main() {
  final myFuture = Future(() {
    print("Hello from the future!");
    return true;
  });

  print("Done!");
}

If you run this code, you will see that the "Done!" string is printed first. Why? because the code inside our Future runs asynchronously. If you already have the value of the Future, you can just use the Future.value method to return a Future with the given value like the example below. Sometimes it's very helpful for testing.

final myFuture = Future.value("Hello from the future!");

Or, if you want to return an error, you can just use the Future.error method.

final myFuture = Future.error(Exception());

Async & Await

Most programming languages have async and await in their syntax. Basically, their are just an alternate syntax to handle asynchronous code like Future and Streams to make it looks cleaner and readable. Let me gives you an example.

void fetchPost() {
  http.get('https://jsonplaceholder.typicode.com/posts/1')
    .then((response) {
      print(response);
    })
}

Remember this piece of code right? Well, this function looks OK. But actually, this code will look a lot messier if we want to use more than one asynchronous function.

First of all, we need to add async keyword to the function you want to use await. If you don't, the Dart compiler will five you a syntax error.

void fetchPost() async {
  // ...
}

Then, add the await keyword to the asynchronous function that returns a Future and store the result value inside a variable like below.

void fetchPost() async {
  final result = await http.get('https://jsonplaceholder.typicode.com/posts/1');
}

Finally, you can directly print the result value to the console right after the request function.

void fetchPost() async {
  final result = await http.get('https://jsonplaceholder.typicode.com/posts/1');
  print(result);
}

The only thing to keep in mind is you only can use await keyword inside async function. That's it!

The big difference by using async & await and not using it is when we want to handle more than one Future at the same time

Using async & await:

import 'dart:convert';
import 'package:http/http.dart';

void fetchUserPosts(token) async {
  // Fetch user data
  final userResponse = await http.get('https://yourapi.com/user?token=$token');
  final user = json.decode(userResponse.body);

  // Fetch posts data
  final postsResponse = await http.get("https://yourapi.com/posts?userId=${user['id']}");
  final userPosts = json.decode(postsResponse.body);

  print(userPosts);
}

Using then and catch:

import 'dart:convert';
import 'package:http/http.dart';

void fetchUserPosts(token) {
  http.get('https://yourapi.com/user?token=$token')
    .then((userResponse) {
      final user = json.decode(userResponse.body);

      http.get("https://yourapi.com/posts?userId=${user['id']}")
        .then((postsResponse) {
          final userPosts = json.decode(postsResponse.body);
          print(userPosts);
        });
    });
}

Forem: Abdurrahman Fadhil

Some CSS tricks I found useful

Custom CSS properties for theming

Mixing colors with color-mix()

Automatic numbering with CSS counters

The "full-bleed" card component

Selecting parent elements with :has()

The Ultimate JavaScript Promise Tutorial

What is Promise?

Handling Errors

Creating Promise

Chaining Promises

Async & Await

I'm Building an ORM for Deno!

How I build it?

Query Builder

Database Adapter

Model

Conclusion

How to Generate Unique ID in JavaScript

Using UUID

Using Math.random

Using Date.now

How to CRUD an Array in JavaScript

Create item

Update item

Delete item

How to Fetch Data with React Suspense

Getting Started

Enable concurrent mode

Fetch data

Display fetched data

Fetch multiple data

Build REST API with Express & Mongoose

Prerequisites

Getting Started

Basic Express Server

Setup mongoose

Mongoose model

Get all posts

Create Post

Get individual post

Update post

Delete post

How to Fetch Data with React Hooks

Getting Started

Fetch when component has loaded

Fetch result state

Custom hook

Quick note

Build REST API with Flask & SQLAlchemy

Getting Started

Dependencies

Flask project from ground up

Database setup

Database model

RESTful Routes

Data Fetching Basics in Flutter

How to Test Your Express APIs with Supertest

Introduction

Getting Started

SuperTest Basic Usage

Using Callbacks

Send Form Data

JSON Request Body

File Upload

Asynchronous Programming in Dart

Future

How Future Works.

Handling Errors

Create Our Own Future

Async & Await

Mixing colors with `color-mix()`

Selecting parent elements with `:has()`