Welcome to my development blog

Scaling / Resizing Responsive Retina CSS Sprite Icon in React

Images are crucial elements that will bring a strong visual power to a web page. Too many images, however, will deteriorate the performance of a web page due to too many requests to the server. One of the optimisation technique we can use is CSS Sprite, which basically combining multiple images into one image. Then, … Continue reading “Scaling / Resizing Responsive Retina CSS Sprite Icon in React”

Create React App v5 is now comes with TailwindCSS v3

Great news people! Create React App v5 is just released with a bunch of upgrades such as support for Webpack 5, PostCSS 8, and one of my favourites is that it comes with TailwindCSS v3. You are no longer in need of craco or react-app-rewired to get TailwindCSS work with CRA. All you need is … Continue reading “Create React App v5 is now comes with TailwindCSS v3”

Translate Your React app with react-i18next

Localisation is very important for every web application to bring a better user experience to all the users from around the globe and not lose your potential customers. Today, we will look into how to integrate localisation into your React web app including how to handle language changes, formatting, as well as how to load … Continue reading “Translate Your React app with react-i18next”

Tailwind CSS v3.0 – New Just-in-Time (JIT) Engine

Tailwind CSS has recently released a new version of 3.0 and it has included many great and powerful new features including new just-in-time (JIT), scroll snap API, new modifier and etc. Today, we will take a quick look at what is the new Just-in-time engine and why it is so important for all Tailwind CSS’s … Continue reading “Tailwind CSS v3.0 – New Just-in-Time (JIT) Engine”

Testing with React-Redux Hooks

With the rise of React Hooks, many developers have added hooks into their open source libraries. If you are using react-redux libraries, they also provided hooks such as useSelector and useDispatch as well. Although hooks allow us to use redux with ease in React, however, there is not much documentation about unit testing with hooks. … Continue reading “Testing with React-Redux Hooks”

Monitor Apollo GraphQL with Graph Manager (Part 1)

GraphQL has been rapidly gaining the popularity due to its flexibility of giving the clients to ask what they need and the power of evolving the APIs with ease. There are 2 major libraries that allow us to integrate GraphQL into your web and mobile applications, which are Relay and Apollo. These libraries provide a … Continue reading “Monitor Apollo GraphQL with Graph Manager (Part 1)”

Using Custom Fonts in React Native

If you are looking for the guide to use custom fonts in your React Native apps, this is the right place for you. Adding custom fonts to your React Native apps is not a difficult task, but there are few tweaks that you need to do to make sure the custom fonts are set up … Continue reading “Using Custom Fonts in React Native”

How to turn on Dark Mode in iOS 13 Simulator

iOS 13 is finally supported dark mode and here is how you turn on dark mode on your iOS iOS 13 simulator. Open Settings app. Go to Developer at the most bottom. Toggle on “Dark Appearance”. Now you have your dark mode.

React Native Searchable FlatList with React Hooks

If you have been using a mobile app or building one, you must be very familiar with the content of a very long list such as merchandise products, contacts, friends, countries, etc. It is very inconvenient for the user to find the required record by scrolling the whole list. Most of the mobile apps will … Continue reading “React Native Searchable FlatList with React Hooks”

Supercharge React Native Android app with Hermes

Facebook officially released the Hermes engine as an opt-in feature on Android. By enabling Hermes, Facebook claims that it will improve startup time, decrease memory usage and reduce app size. Let’s find out! Prerequisite To enable Hermes, your app needs to be at least using React Native 0.60.4 and above. If you are using the … Continue reading “Supercharge React Native Android app with Hermes”

React Native Continuous Delivery with Github Actions and Fastlane

Github Actions is the workflow automation tool with CI/CD that allows you to do some tasks, such as running test suite, deploying code and etc based on the Github Events and Types. When an event is triggered, your defined workflow will be run and help you to do some awesome jobs. Today, I’m going to … Continue reading “React Native Continuous Delivery with Github Actions and Fastlane”

Optimizing For MongoDB Atlas And AWS Lambda

If you want to use MongoDB for your AWS Lambda serverless app, MongoDB Atlas may be a good option for you to start with. MongoDB Atlas has been generously offering 500MB storage for free and it is very easy to setup with just a few clicks. Recently, I have migrated my databases to MongoDB Atlas … Continue reading “Optimizing For MongoDB Atlas And AWS Lambda”

Testing React Native With Jest, react-test-renderer And react-native-testing-library

React Native is a great framework for you to write once and build mobile app with Javascript and React to both Android and iOS platform. Everything is pretty easy until your superior telling you, “We need to start practice TDD approach because there are too many bugs surfaced in production to capture the error early”. Sounds … Continue reading “Testing React Native With Jest, react-test-renderer And react-native-testing-library”

Shareable ESLint Config For React Native

A wise programmer once said, “You don’t write code for yourself, you write for others or your future-self”. Imagine that you are working on a project which everyone is writing in their own style and standard. Everyday, you need to spend some times to get familiar with the code before you can start coding. It’s … Continue reading “Shareable ESLint Config For React Native”

Automatically Set iOS Build Number And Android Version Code In Unity Cloud Build

Did you ever have an experience where you automate the build of your games with Unity Cloud Build, but eventually you realise that you forgot to update the build number for iOS and version code for Android? Then, you have to edit the PlayerSettings and wait for the build again…. If you have a same … Continue reading “Automatically Set iOS Build Number And Android Version Code In Unity Cloud Build”

Transparency Sort Axis For 2D Top Down Games

You may want to read our previous blog about Sorting Layer and Sorting Group before continue reading this. If you are developing for 2D top down games where the sprites will move from top to bottom or vice versa, sorting layer and sorting group may not enough for you. You will probably face some problem when one … Continue reading “Transparency Sort Axis For 2D Top Down Games”

Sorting Layer And Sorting Group For 2D Games In Unity 3D

When building on 2D games with Unity3D, one common issue that we will be dealing with is the sorting the layer of the sprites. In the common way, we can use Sorting Layer and Order in layer to solve most of the 2D game sorting issues. You can find the sorting layer and order in the Sprite Renderer component … Continue reading “Sorting Layer And Sorting Group For 2D Games In Unity 3D”

Tile-Based Movement Using iTween

Shiba’s Adventure is the new roguelike RPG game that we developed in iOS and Android that using tile-based movement. The tile-based movement is very easy to implement and today we would like to share with you how do we achieve the movement like this: The secret recipe that we use is iTween! (Oopsss…it’s no longer secret now). iTween is lightning fast, … Continue reading “Tile-Based Movement Using iTween”

Taking High Quality Screenshots From Unity 3D Editor

Sometimes, you may need to take a good looking screenshot of your game for successful press kit or artwork. It can be tricky and tedious to take a high-resolution from your Unity 3D editor. But don’t worry now, we found a great Unity plugin that can help you solve the problem. Install the Instant Screenshot by Saad … Continue reading “Taking High Quality Screenshots From Unity 3D Editor”

Unity 3D Project Folder Structure Practice

Greetings everyone, today I would like to share with you regarding my experience on Unity 3D project structure when I develop Color Fiesta. Initially I created all the folders under Assets folder just like this: I distribute the folder based on the type of files such as Animations, Prefabs, Sprites and etc. Everything is so neat … Continue reading “Unity 3D Project Folder Structure Practice”

Follow My Blog

Get new content delivered directly to your inbox.

%d bloggers like this: