Includes a technical summary for each one

Photo by Jonas Denil on Unsplash

From time to time I would read some ML/AI/DL papers just to keep up with what’s going on in the tech industry these days — and I thought it might be a good idea to collate some interesting ones and share them with you guys in an article (coupled with some key technical concepts). So here’s a few research projects that I (personally) really like and I hope you will too:


Part 2 of 2 — Editing the flex item’s properties

Cover image from Unsplash that shows two cardboard boxes
Cover image from Unsplash that shows two cardboard boxes
Photo by Mildlee on Unsplash

Okay so this article is a continuation of the previous article — link. Just like how it’s divided in this guide to flexbox, we’ll be looking what what happens when we edit the flex item’s properties.

This property is probably pretty self-explanatory. When you define a few flex items within a flex container, it’ll render in the same order. But by specifying the specific order for a flex item, you can render the flex items in a different order.


Part 1 of 2— Editing the flex container’s properties

This is the cover image for the article from unsplash — shows a cute cat in a cardboard box
This is the cover image for the article from unsplash — shows a cute cat in a cardboard box
Photo by Luku Muffin on Unsplash

I thought of writing this quick guide when I was going through this super famous “Complete Guide to Flexbox”. I thought maybe people working with Material-UI and React might want a similar guide too — if that’s the case, do read on! ʕ•́ᴥ•̀ʔっ♡

Note: In the next article, we’ll be looking at examples where we edit the flex item’s properties. It was moved to this article because this one’s getting too long.

Assuming you already have a React app, simply run $ npm install @material-ui/core to start using Material-UI components. …


Easy-To-Follow Tutorials

A simple tutorial on using React-Three-Fiber with React.

A header image from Unsplash — shows a pineapple with balloons
A header image from Unsplash — shows a pineapple with balloons
Photo by Pineapple Supply Co. on Unsplash

I love fun websites. ʕ•́ᴥ•̀ʔっ♡

When there are some cool effects that add in some element of surprise and interactivity, I always get a little surge of delight when I scroll through it.

Even though vanilla CSS and JavaScript can go a looong way towards creating awesome experiences for your users (see link), today we’re going to be looking at how we can render 3D objects in your browser with React-Three-Fiber.

Here’s the end product:


Easy-To-Follow Tutorials

Includes — User Sign Up, Sign In, Activation, Authentication, Log Out, Forget Password, and Reset Password services

Photo by Franck on Unsplash

So…someone tagged me in Awais’s YouTube video and that kind of prompted me to write this user authentication tutorial (see below).


Easy-To-Follow Tutorials

A short tutorial of using Plotly.js in React

Photo by Lukas Blazek on Unsplash

I’ve written a tutorial on how to visualize interactive 3D networks (or data) with Python Plotly a few months ago and thought maybe it’ll be a good idea to write another one for Plotly.js.

One of the reasons why someone might prefer Plotly.js over Python Plotly could be because of loading speeds — I’ve once written a React + Flask application (where the datasets and Plotly figures are on Flask) and when I compared it to my React + Plotly.js application, interactivity and loading speeds are much better with Plotly.js.

So here’s a quick tutorial on how to use Plotly.js…


The latest tool-kits available for semantic image segmentation

Photo by Jack Kaminski on Unsplash

Semantic Image Segmentation tasks are some of the most widely-researched yet difficult to tackle issues in Computer Vision.

Every single pixel in the image will have to be categorized to a specific label — this is a step up from just using bounding boxes in object detection as illustrated by the image below:


Easy-To-Follow Tutorials

A quick and simple script to resize all your images in a folder to your desired dimensions

Photo by Joanna Kosinska on Unsplash

Imagine this — you have TONS of images in a folder on your computer and you want to resize all of them to certain dimensions (change the height or width).

You could either —

  1. Individually upload them to some resizing tool one by one, or
  2. Uhh...bulk resize them with some resizing tool (yes I know they exist)

I do realize that these two methods basically covers everything when it comes to simple resizing of images — HOWEVER, what you can’t get (from the methods above) is the sense of satisfaction after completing a task by coding a script all by…


Easy-to-Follow Tutorials

Probably the most simple and concise guide

Photo by Zan on Unsplash

I managed to find various tutorials online when I was trying to figure out how to build and then deploy my React + Flask App. What I did was, I first Googled and figured out how to build the React+Flask App, then I tried searching around for how to deploy it.

Unfortunately, most tutorials I managed to find were TOO complicated (personal opinion). If you Google “How to build a React Flask App”, here’s my top three results: link, link, link.

They might be great tutorials but if you don’t wanna bother with Nginx, various configurations and extra packages for…


Concise and Simple

Image from link

Note: If you’d like to read about building + deploying your React-Flask project, do check out this tutorial.

I mostly did AI related stuff back in my undergrad years but haven’t had the chance to go into web development until my final semester of school. Even though AI was really interesting, I figured that the only way I can show others what I’m doing with it is to put it on the web.

With that thought, I learned Flask and React separately and these days I wanted to figure out how to use both Flask in conjunction with React so…

I live for days when I can watch skies of blue, while enjoying the view. Most other days I’m a city rat who scuttles between Art and Coding. SG NTU CS Grad.

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