Sign in

Just putting a note here because I kept forgetting how to setup swipe controls using ControlFreak2. It’s a really good mobile (and desktop) controls library for Unity, but if you forget how to use it, it won’t exactly be a smooth ride to re-learn its over-complex looking settings.

Key bindings

To start, right click in Hierarchy and select Control Freak 2 > Total Package (Event System + Rig + Gamepad Manager).

Next, in Hierarchy, navigate to the GameObject named “CF2-Rig”, expand it and its subsequent child until you reach “CF2-Panel”.


CODEX

Part 1: https://medium.com/codex/hygen-the-sh-t-out-of-your-react-application-part-1-6b7cf9442a15

Part 2: https://medium.com/codex/hygen-the-sh-t-out-of-your-react-application-part-2-ce004d9bab45

Yes or No

Imagine a scenario where some of the pages in our application are required to display a list of data of the same type in a List or Grid view, kinda like an E-commerce store displaying the list of products. Such feature can be achieve by first creating a Card component with its own title, description (and/or image), then populate the page with these Cards:


CODEX

Part 1: https://medium.com/codex/hygen-the-sh-t-out-of-your-react-application-part-1-6b7cf9442a15

User Defined Values

In Part 1, we uses hygen to automate the creation of a React component, which bears a H1 title that shares the same value as the component’s name, as well as a simple Lorem Ipsum subtitle:


Photo by Lenny Kuhne on Unsplash

CODEX

Source Materials: https://github.com/zhifez/hygen-react

Preface

From the perspective of ex-game developer, the thing I love about cross-platform web/mobile dev the most is how easily replicable all the components are, whilst having high reusability, when you code it right.

The idea of automating the creation of React components have been in my mind for awhile but I never got around to doing it until early this year when I stumble upon hygen.

After spending an entire weekend to experiment with it, I successfully automated my React workflow for existing project using hygen from generating simple React components, to setting up complex foundation for…


Photo by Markus Winkler on Unsplash

CODEX

Part 1: https://medium.com/codex/react-redux-for-the-uninitiated-feat-redux-saga-part-1-8cff10003e00

Part 2: https://medium.com/codex/react-redux-for-the-uninitiated-feat-redux-saga-part-2-2a747c74ba91

Part 3: https://medium.com/codex/react-redux-for-the-uninitiated-feat-redux-saga-part-3-c068e95e634c

Summary

In this final part, I’ll summarise everything in bite sized format so that it’s easier for you to recap when you need another refresher with much lesser words.

Hierarchy

The goto hierarchy for my Redux states are as follows:

+--/src
| +--/redux
| | +--/actions
| | +--/reducers
| | +--/sagas

There are other ways to go about this folder structure, such as organising them by functions:

+--/src | +--/redux | | +--/authentication | | | +--/auth.action.js | | | +--/auth.reducer.js | | | +--/auth.saga.js | | +--/users | | | +--/users.action.js…


Photo by Jase Bloor on Unsplash

Been wanting to get this off my chest in a while.

The incident

Somewhere around August 2017, while on a tour to Hokkaido, Japan with my family, I decided to visit a Jazz bar in Sapporo on my own, because the rest of my family aren’t into Jazz. It was around 11pm when the last Jazz performance ended, when I decided to head back to my hotel which was some 30 minutes away from the bar. I walked the same way I took from the hotel, and while at a junction, I saw a couple of Japanese adults in their 20s, carrying…


Photo by Arnold Francisca on Unsplash

CODEX

Part 1: https://medium.com/codex/react-redux-for-the-uninitiated-feat-redux-saga-part-1-8cff10003e00

Part 2: https://medium.com/codex/react-redux-for-the-uninitiated-feat-redux-saga-part-2-2a747c74ba91

I’ve added a repo for the source material of this series, check it out here: https://github.com/zhifez/react-redux-for-the-uninitiated

When do you use Saga?

For me, it was when I have to handle the data returned from an API, and pushing them into the Reducer.

If you remember how Reducer works:

1. An Action is first triggered by Redux dispatch. The Action usually comes in the form of an object that has a type and one or more optional parameters.

2. A Reducer then intercepts the type value, and provide a response — updating the states with whatever parameter that’s being…


Photo by Michael Dziedzic on Unsplash

Part 1: https://medium.com/codex/react-redux-for-the-uninitiated-feat-redux-saga-part-1-8cff10003e00

I’ve added a repo for the source material of this series, check it out here: https://github.com/zhifez/react-redux-for-the-uninitiated

In Part 2, we’ll focus on setting up Redux in a React project.

Let’s start by creating a React project using the create-react-app:

$ create-react-app test-project

Then, install the following libraries:

$ yarn add redux react-redux redux-saga

Open the folder in your IDE and clear out all the codes in App.js (located at the root folder), and replace it with the following:

By default updateTodo, deleteTodo and createNewTodo are empty functions and will be updated later. …


Photo by Markus Spiske on Unsplash

Redux is hard for first-timer, no doubt about it. If you’re just starting to explore React and have decided to use Redux as your goto state management and find it insanely hard to understand how it really works, I hope this tutorial will help you understand it better.

When do I use Redux?

One rule of thumb for using Redux is when you have a large scale software that encompasses multiple modules and you’d want each module to have access to specific, if not all of the stored states, such as authenticated user data, shopping cart, etc.

For me personally, though, I use Redux in…


A checklist for things you should do before you run a ReactNative project.

1. Setup Android SDK location in your local.properties

Create a file named “local.properties” at the root of your project folder, and insert the following (if file already exists, check if the line exists, or else just add it in the next line):

$ sdk.dir = /Users/USERNAME/Library/Android/sdk

Remember to include local.properties into .gitignore so that it doesn’t get included in the source.

2. Install the dependencies

Using yarn:

$ yarn

Using npm:

$ npm install

3. Link assets to project

Run the following code:

$ react-native link

For…

zhifez

Software developer, web/mobile dev evangelist. Enthusiast of: NodeJS, React, Redux, Flutter, Unity, Golang, Django, etc.

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