DEV Community: Jonnie Oak

Introducing Abstract — A React Prototyping Tool, Designed for Mobile.

Jonnie Oak — Thu, 07 Oct 2021 15:56:06 +0000

Enter Abstract — a mobile-first progressive web application focused on improving the developer experience. Create mobile first application prototypes in real-time with proven UI frameworks such as React Bootstrap.

Abstract allows you to:

Develop from anywhere
Lighten developer workload when prototyping
Focus on more complex engineering issues

The world is moving towards mobile

When analyzing market trends, we find that mobile usage on the web has gradually increased every year, while desktop usage is slowly declining by the year. Mobile devices are taking over modern-day web browsing, likely due to the increasing accessibility of smartphones. Nowadays creating an application only optimized for desktop devices will greatly hinder your application from being viewed by a large majority of users.

Mobile-first philosophy

“Mobile first”, simply means that we start product design with mobile users in mind because of their limitations.
From a technical standpoint, when engineering a product, mobile is your limiting factor due to size, bandwidth, and hardware constraints. A mobile oriented design can scale to a desktop size and maintain full functionality, but a desktop design can’t scale down to mobile without removing and editing some features.
Mobile first design approach allows for progressive advancement, which means you start designing for your most basic platform and then optimize for more advanced platforms later down the road.
For developers this is a very efficient and lean strategy to build a product from scratch because they can push out a minimum viable product with core features while still reaching a majority of users.

There’s a demand for mobile developer tools

QuickEdit — 35,000 ratings on Google App Store
Dcoder — 32,000 ratings on Google App Store
DroidEdit — 17,000 ratings on Google App Store
These are a few of the many developer tools on the mobile app store; however, they are strictly mobile code editors. The market currently lacks mobile prototyping tools for mobile-first development.

Abstract adopts mobile-first design and streamlines prototyping

Our main priority is ease-of-use. With this in mind, we designed a simple interface targeted towards mobile users for easy navigation. We want developers to be able to work from anywhere, anytime, on any device. Elevating the developer experience with accessibility to useful tools streamlines the design stage during the product lifecycle and shortens turnaround time between product iterations.
Here are some of Abstract’s core features:

Install on any device to prototype at home or on the go.
Design for iPad and iPhone resolutions to accommodate more users.
Utilize React Bootstrap components, avoiding early design bottlenecks in premature product stages.
Preview generated React code synchronized with the prototype render view.
Quickly export React code to GitHub for easy code review and collaboration.

Abstract away from the tedious process of coding a prototype from scratch with our simplified, design based workflow that leverages hot reloading and code preview.

Demo

Select Device Resolution for the Canvas

Render Components on the Canvas

Review Code

Export Code

We hope you enjoy Abstract as much as we enjoyed creating it. Stay tuned for future updates!

Additional Resources

Abstract is an open-sourced product. Interested in contributing or viewing?

Visit our Github project page.
Visit Abstract’s website.
Visit the live Abstract web-app.

Meet the Team! —

Jonnie Oak @Github @Linkedin
Brian Cheng @Github @Linkedin
Raymond Hu @Github @Linkedin
Omar Brown @Github @Linkedin

How to fetch an external API with useEffect()

Jonnie Oak — Wed, 03 Mar 2021 07:54:09 +0000

I just had a day full of headaches while trying to debug code while browsing StackOverflow, Reddit and Discord channels...

This post is for my future self but also for anyone who's having issues making external API calls in React. Specifically using fetch inside of useEffect.

TLDR: This is how you do it.

    const fetchWeather = async (url) => {
        const response = await fetch(url)
        const json = await response.json()
        setForecast({ data:json, loading:false })
    }

    useEffect(() => {
        if (search !== '') {
            fetchWeather(url)
        }
    }, [search])

In this post I will be going over the following topics.

Why useEffect for fetching an api?
What's with the if statement inside the useEffect?
What's happening inside fetchWeather?
Why async/await?

Why useEffect for fetching an api?

useEffect is the functional version of ComponentDidMount, ComponentDidUpdate and ComponentWillUnmount
When making an API call, typically you don't want to make a call to the API with every render. In the example above, useEffect will invoke the callback (first argument) ONLY WHEN an item inside the array of dependencies (second argument) is changed

What's with the if statement inside the useEffect?

Without the if statement, useEffect will always run in the initial render
This was an issue in my code because the initial value for search (a dependency for the url) is ''. This results in a failed API call because there is a missing query to the API.
Skipping the initial render allows the user to input a query to the API which then re-renders the app with the API data.

What's happening inside fetchWeather?

fetchWeather takes a url as an argument
It then uses fetch to make an http request with the url
Next line parses the http response into json
setForecast updates the forecast state with the new data and also sets loading to false so that the data can be rendered

Why async await?
Fetch is promise based so you have to "await" for the promise to be resolved before moving on to the next line of code. E.g. you can't parse the response to json until the response is resolved. Another option is to use .then() and .catch() syntax to perform actions after a promise is resolved.

My (almost) self-taught journey to code

Jonnie Oak — Thu, 28 Jan 2021 07:21:28 +0000

Introduction

I wasn't happy at my job. In September of 2020, I decided that I needed to make a change. After 5 years of working as an electrical engineer I bit the bullet and left my job to pursue coding. This is my journey. I hope that my journey can be used as a guide for anyone that wants to take on a similar path. It's never too late to learn how to code!

In the past 4.5 months, I have learned so much. It makes me so happy to share this experience with the world. It also acts as a reminder for how far I've come and to not be too hard on myself when I feel like I'm not progressing fast enough. I hope people will find this useful. If it is - feel free to come a long on the journey by giving a follow!

September 2020

9/8/20:
I start my Python class and my SQL class at Bunker Hill Community College.

I learned a lot from these classes but it's definitely not required. Actually, I recommend new coders to AVOID taking classes (unless it's low cost). Make sure to check back in for a future blog post where I go into detail on my experience and when structured classes are worth it!

9/18/20:
I start a Udemy course. The Complete Web Developer in 2020: Zero to Mastery by Andrei Neagoie. I highly recommend this course for any beginner interested in the world of web development. This course goes over everything: how the web works, HTML, CSS, JavaScript, React, databases, http requests and more. It also talks about coding environments. At this point I start using VSCode. To this day VSCode is still my favorite code editor.

I'll go into detail on my experience and if this course is right for you in a future blog post.

October 2020

10/5/20 - 10/9/20:
I participate in live webinars for Springboards conference "RISE". Springboard is a coding boot camp and RISE is their annual conference that discusses the software engineering and data science industries. At this point I was still trying to see if a boot camp was right for me.

November 2020

11/6/20-11/8/20:
I participate in Liquid Hacks. This is my first "test" to see what I have learned. I tried building a website called "a team liquid story". Honestly it was supposed to be extremely simple. I fail at completing the project by the deadline and I end up not submitting. Even though I wasn't able to complete a project. I don't regret participating. It showed me how much I still didn't know.

11/30/20:
Back to The Complete Web Developer by Andrei Neagoie. At this point I did every exercise up to the React section. I felt like I needed to focus on the fundamentals. I "finished" the course by watching the rest of the videos. Finishing the course without completing the exercises helped me learn broad pictures of what other tools are used and how they are used. It gave me a good idea of what to expect in the future so that I wouldn't be completely lost.

I start grinding FreeCodeCamp - Javascript Algorithms and Data Structures Certification.

December 2020

12/1/20:
I complete my semester project for my Python class. A program that takes a summoner name from the game League of Legends and outputs the user's match history and charts the frequency of each champion played. The program is coded in Python using Jupyter notebook.

12/16/20:
I finish FreeCodeCamp - Javascript Algorithms and Data Structures Certification

12/16/20 - 12/24/20:
I start learning React by working through the tutorial in the official docs. I can't find quality material on how to learn React until 12/28/20.

12/18/20
My Python and SQL classes end

12/28/20 - 1/20/21:
I start going through Pure React by Dave Ceddia. This was easily one of my best coding investments. I highly recommend this book for anyone that knows HTML/CSS/JavaScript and wants to jump into React. React is a framework that has many many many tools. It can be very overwhelming to figure out where to start. Pure React is a book that teaches... well.... pure React. All of the extra tools can be learned later.

January 2021

1/20/21 - 1/22/21:
I finish going through Pure React. At this point I feel comfortable and I decide that I am ready to build a web app from "scratch". Scratch is in quotes because I actually decide to build a Discord clone in React. I decide to build a Discord clone because building an actual app from scratch would involve designing UI/UX which is not the current goal. I want to test my developer knowledge.

I start off by prototyping the frontend.

1/22/21-1/26/21:
Frontend prototype is complete. I start thinking about the backend. After some research, I end up going with Firebase. I have some familiarity with databases from my SQL class and The Complete Web Developer course but Firestore is a noSQL database so there is a a bit of a learning curve. I end up buying Fireship's course Firestore Data Modeling Master Course. This course is perfect for someone that has some database knowledge because it's short and sweet. It covers everything you need to know quickly. It shouldn't be used as your first course in databases.

I have some familiarity from fetching data from my Python project where I fetched data from Riot Games API. I build my first feature that combines both frontend and backend: a side bar that fetches real time data and outputs the community name and avatar links as a list.

1/27/21:
This brings me to dev community and my first post. I've learned a lot... enough to where I felt like I needed to share my experience.

updates coming...

Money spent so far
Worth it
The Complete Web Developer by Andrei Neagoie	$13.99
Pure React by Dave Ceddia	$59.00
Fireship's Firestore Data Modeling Course	$19.00
Total:	$91.99
Not worth it
Python at Bunker Hill Community College	$1248.00
SQL at Bunker Hill Community College	$1248.00
Total:	$2496.00