I explain what hashing, blocks and blockchains are in this article, with simple JavaScript simulations. Meant to be a quick 101 to understand some of the key concepts in blockchain technology.
So far, all we've really done is to code a static webpage in React, which isn't much of an app. We are now in a good position to look at how to insert "handler functions" - these are functions that respond to certain events occuring in the browser.
What happened to composability? What happened to writing webpages and apps in convenient code components? Why is everything just App.js? Hold your horses boy. We're creating your second component today.
Worried about how to track your object IDs? Don't worry, in the world of coding, there's a library for everything. Today, we look at how to use the UUID package for effective object ID control in React.
In the previous post, we spoke about map, filter and reduce functions. So today we're going to be using these functions to iterate the construction of html elements in JSX, within the App.js component.
map, filter & reduce Functions in React
Let's talk declarative vs imperative coding today. It's something that I've been trying to change about myself when coding in React, because I've found it to be highly efficient, and it'd be great to talk you guys through it. What better way to explain this than through the map, filter & reduce functions in JS?
Using JS Objects in React Components
You've likely come across the term "state" when reading up on React. While it's too early to go into what state management is, it suffices for now to know that each React app has a JS object with various items within it, that define the current state of the React app. And that's why today, we'll be focussing on the use of JS objects within React components.
Your First React Component: App.js
React components are simply snippets of JS code, but with some portion written in the unique React syntax we know as JSX. Let's begin understanding what React components are by looking at the simplest one we've seen thus far in our app directory: the app.js file.
Remember my post about how modern JS essentially has you just downloading a bare bones html file and a JS script that renders your app in your browser? Today we're going to see how it works by tearing apart these two index files.
Today, we're going to be creating our very first React app. And boy, is it going to be a lame app. What did you expect, we're beginners, right? Zero to hero, here we go!
NPM - Because It Comes With NodeJS
NodeJS actually comes packaged with a library manager called NPM, which stands for Node Package Manager. NPM is used to install external node libraries via the commandline or terminal - if your app uses these libraries, these libraries are the so-called "dependencies" of your app.
I've found NodeJS to be very useful - in fact, it seems to be the industry standard when it comes to library management, server management and app deployment. It's something that I found out about only after learning React for a while, so I think it's worth writing a post on.
A starter article to begin my journey in React. The what, why and hows of React, at high-level.
How a Pandemic Works - And What Stops It?
We explore how to simulate the transmission mechanics of a pandemic on a grid. Written in JavaScript.
Reproducing Infographics from The Straits Times
A short post to document what I learnt about reproducing infographics produced by The Straits Times, a Singapore mainstream media reporting body.
Today we look at how this phrase it to be understood in trading as a trade made during a retracement, and what a retracement is.
I explain how to draw candlestick charts using Plotly. Unlike previous posts, the rangeslider for the x-axis is replaced by a far more useful volume chart feature, which allows you to gauge the strength of the trading candlesticks.
We explore the concept of a candlestick to display multiple data points of a trading asset. All diagrams drawn in HTML & CSS.
In this post, we're going to work off our previous post on basic line charts, and explore a nifty way to toggle the price trends of several stocks through a simple dropdown menu. This will prove very useful when presenting a set of charts for different stocks.
If you want to understand the market, chances are you'll need a customised visualisation with some tools. We explore that today.
Setting Up Your Technical Analysis Toolbox
Before you run off on your horses to learn about technical analysis, you need access to data. Real market data. I talk basic API calls in this post.
My first attempt at creating a useful application in React. A simple to-do list that's a spin-off of Todoist.
A relaxing workspace to key in your "to-do"s, listen to music and watch time float by. Dynamic background and greeting changes according to the time of day.