Blog
Writing has always been a way for me to learn new things and share my thoughts. Here, you’ll find articles on coding, economics, and other topics I find interesting. Feel free to browse through my posts below.
Reflexivity in Confidence and Competence
Confidence vs. Competence
Confidence is often based on perception and expectation, while competence is the actual reality or fundamentals. I truly believe that competence should be prioritized, as genuine confidence is a natural byproduct of true competence—not the other way around. However, the relationship between confidence and competence is more complicated due to their reflexive nature.
Reflexivity
Confidence and competence are reflexive, meaning they influence and reinforce each other. Competence stimulates confidence, and confidence can further motivate us to improve our competence, creating a positive feedback loop. However, this reflexive relationship implies that confidence might—perhaps more often than not—grow faster than competence, creating a large gap between perception and reality.
Comparing Autoregressive Time-Series Models to Forecast GDP
I’m currently taking an intro to econometrics course this semester. Over the last two weeks, the topic was about time-series regressions. Although I’m pretty skeptical about the ability of mankind to predict the future, it’s quite fascinating to see how much money analysts and forecasters in big firms can make in a year. So, I decided to take it a shot.
In this article, we will discuss briefly about the most basic time-series econometrics models called autoregressive models. We will also learn a little bit about data management in STATA, especially for time-series data. Our objective here is to learn STATA by example, and hopefully, we will be able to figure out how these models would perform against each other using the data of world countries’ GDP.
How to Display an Image Picker in Swift
In this tutorial, I’m going to show you how you can add an image picker component on your iOS apps using UIImagePickerController, a view controller provided by the UIKit framework that can be used to get an image from your users. The image can be obtained from different types of sources, such as the user’s photo library or their phone’s camera.
Prerequisites
Before you get started, make sure that you:
Getting started
Here, we’re going to start from scratch. So, go ahead and create a new blank iOS application using your XCode.
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 Build a REST API with Golang using Gin and Gorm
This article was originally written for LogRocket.
Go is a very popular language for good reason. It offers similar performance to other “low-level” programming languages such as Java and C++, but its also incredibly simple, which makes the development experience delightful. Put simply, Go is a powerful language that puts together the best of both worlds.
What if we could combine a fast programming language with a speedy web framework to build a high-performance RESTful API that can handle a crazy amount of traffic?
Enable Login with Email in Django
Django is currently my favorite framework for building web applications. Despite its simplicity and delightful development experience, one of the things that I personally don’t like about Django is its default authentication system. I don’t know why they’re doing this, but for me, log in with username doesn’t meet the web industry standards.
Apparently, this problem can be fixed solved easily with some hacks. Let’s take a look at the steps on how to enable your users to login with their emails in your Django apps.
How to Build a GraphQL API with TypeGraphQL and TypeORM
This article was originally written for LogRocket.
GraphQL’s popularity is constantly growing, and it’s no mystery as to why: it’s a great tool that solves many common problems developers encounter with RESTful APIs. GraphQL allows us to easily fetch data relations, but it also prevents us from overfetching that data. Put simply, GraphQL improves the development experience and makes frontend apps faster.
Despite its many advantages, however, building a GraphQL API can occasionally present challenges. How can we minimize the headaches we encounter in our projects?
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.
How to Build a REST API with Flask and SQLAlchemy
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.
How to Fetch an API in Flutter
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.
How to Build a Realtime Chat App with Node.js
In this tutorial, we are going to build a basic chat application with Node.js. Before we get started, I assume that you have little bit knowledge of JavaScript and Node.js.
Here, we will be using an awesome tool called Socket.io. If you don’t know what that is, basically it’s a JavaScript library that allows you to handle realtime data on front-end and back-end side. We also going to use Express which is by far the most popular Node.js framework for building web-based applications.
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.
How to Test Your Express API with SuperTest
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
The best way to learn how to write tests is by testing an existing app. So, in this tutorial we’re going to use the blog REST API I built using Express and Mongoose which you can read more in this article. You can clone the repo onto your computer using the command below.
Run External Program with Subprocess in Python
There are many scenarios where you want to write a small programs that are designed to automate simple tasks. For instance, you want to resize thousands of images in your computer to a smaller sizes, or send email to multiple user whenever a row of data added into a csv file.
This is what people usually called scripting. And Python is a powerful programming language for this kind of job. Because, there are a bunch of built-in modules and third-party libraries that helps you to do some cool automation stuff with Python.
Asynchronous Programming in Dart
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.
Automate App Deployment with Google Cloud Build
Automation is one of the most important aspects in web development. Cause everyone wants to deliver scalable and reliable web application to their users without thinking about building, testing, and deploying their apps.
This is called the Continuous Integration (CI) and Continuous Delivery (CD). Basically, you want all parts of making and publishing your app go to one place. Because, it’s saves you a lot of time as a developer focus on building apps instead of publishing it.
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.
Render Bootstrap Form in Django
Dealing with user input is a very common task in modern web applications. Luckily, Django offers a convenient way to handle user input through forms. You can just build your form schema in your logic and render it through the template context without thinking about it.
By default, Django renders your form fields without any CSS class or styling. That is a great thing if you want to use your custom CSS styling. But in some cases, you want to use CSS libraries like Bootstrap to increase your productivity.
Automate Docker Deployment with Dokku
Docker is a piece of software to simplify the creation, deployment, and execution of your applications by using containers. Containers allows you to package your application outside of your operating system environment. Instead of running different apps on different machines, you can run your container inside your machine without screwing up your operating system.
Its just like Virtual Machine. But the big difference is that Virtual Machine have a full OS with its own memory management installed. On the other hand, Docker containers are executed with the Docker Engine rather than hypervisor. Therefore, Docker containers are smaller and faster than Virtual Machines.
Build Secure GraphQL API and Deploy to AWS
Building a secure APIs is the main job as a backend developer. But how does it works when using GraphQL? And how to deploy it to AWS Lambda? Well, there are several approaches that we will dive into in this course. Will will learn how to build a simple API with GraphQL. Then, we will implement Authorization to our API, and deploy it to AWS Lambda with Serverless Platform.
Prerequisites
- A bit knowledge of Javascript & NodeJS
- Serverless CLI Installed on your machine
- An AWS account
Getting started
I have prepared the boilerplate of this project. You can clone it, or you can follow along this tutorial step by step if you want.
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: