We use <input type=”file”> to trigger the OS browser dialogue for the user to select a file from his computer for file upload. However, the look of the control is too primitive to be used directly in most applications and you cannot modify much about the control itself. In this article, I will share a way to create a custom file upload control in React.

Talk is cheap, show me the code.

Let’s go over some points in the code.

  1. We hide the <input type=”file” /> using CSS, so that the user cannot see the default file upload control;

The side drawer pattern is one of the most widely used navigation patterns in mobile applications. The drawer panel allows you to hide the content beyond the left edge of the screen and reveal it only upon a user’s action. In this article, we will create a drawer panel and at the end of this article, we will have a drawer panel that works like the one in the video below.

This drawer panel has the following features:

  • The drawer panel is hidden by default
  • The user clicks on the hamburger button to reveal it
  • as the drawer slides in…

Animations are ubiquitous nowadays as it becomes more and more trivial for our devices to handle them. When animations are used appropriately, they not only make the UI more interesting but also convey necessary information to the user better. In this article, I will talk about how we can add animations in SwiftUI by using Lottie.

Lottie is an open-source animation file format created by Airbnb. It has following advantages over the traditional animation file format, such as gif and flash.

  • it is 600% smaller, so it is much faster to load Lottie animations
  • it is resolution independent and can…

The collapsable panel is a very popular UI component, and it has been included in many UI libraries, so it is not that difficult to find one when you need to use it. But as a curious developer, sometimes I just want to re-invent the wheel and this time, it is the collapsable panel.

A collapsable panel can be collapsed or expanded, and we can use a React state called ‘isCollapsed’ to keep track of this UI state information and render the UI accordingly, just like the code below:

It is quite simple and anyone who has a basic…

React Native Reanimated is a reimplementation of React Native’s Animated library. It is powerful and removes many limitations the latter has. However, it lacks good documentation and is difficult for beginners to start. In the past couple of weeks, I spent some time playing with this library to see when an animated node gets evaluated / updated in different scenarios. After many experiments, I figured several things out. Let’s have a look at them.

In Animated.useCode

Based on the official documentation, Animated.useCode hook is used in this way

As you can see, the first parameter in useCode hook is a factory…

Docker Compose enables us to create and start all services from the configuration in a single YAML file and each container for a service can be reachable by other containers and discoverable by them at a hostname identical to the container name. Normally, different microservices for an application have their own repositories and each microservice has its own Docker Compose file. …

In jQuery, if a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML (i.e., it starts with <tag … >. If the string appears to be an HTML snippet, jQuery will attempt to create a new DOM element as described by the HTML by using document.createElement(tag). In this article, I will talk about the regular expression jQuery uses to extract the tag name from an HTML string.

The regular expression is called rsingleTag in jQuery source code and it looks like the code below.

var rsingleTag = (/^<([\w-]+)\s*\/?>(?:<\/\1>|)$/);

In order…

In a project I recently worked on, I needed to do a lot of manipulation on date in Australian format (DD/MM/YYYY). In this article, I will share some code about how to do it easily with Moment.js

What the above code does is:

  • Create a Moment.js object with the date string and its format information
  • Once we have a Moment.js object, we are able to create a new date string with provided format information with .format() method.

Recently, I worked on a side project using the Star Wars API (https://swapi.co/). One of the project’s requirements is to list all planets on one page. However, you can not get all planets in a single API call. Instead, you need to make multiple API calls with the correct pagination information to get all planets. In this article, I will talk about how I achieved this.

Let’s look at the returned JSON data when we call the following API endpoint: https://swapi.co/api/planets

{    "count": 61,    "next": "https://swapi.co/api/planets/?page=2",    "previous": null,    "results": [        {            "name": "Alderaan",            "rotation_period": "24",            "orbital_period": "364",            "diameter": "12500",            "climate"…

Spencer Feng

Full-stack developer in Sydney

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store