“Be curious. Read widely. Try new things.”
I have always been very curious about the whole web frontend development ecosystem. It seems to me technology and developer tooling evolve very fast, and people have done a lot of creative things in this space in the last several years.
Being completely ignorant to frontend it also added motivation for me to make a commitment this year (new year resolution!🎉) to become proficient at frontend development.
I was thinking what I could do to keep myself more motivated and accountable and decided to write down my goals, plan and updates here as I make progress.
My main goals are:
Here is a basic breakdown of the key components in the tech stack that I know of so far. I will keep adding sections as I learn more. Under each section, I will also add updates (with dates) later on progress made or adjusted views.
I'll summarize the outcome in Notes and Projects sections at the bottom of this page. I plan to write posts to document my learning - some posts will be "learning notes" documenting something I learned or how I figured something out, other posts will be about some standalone projects. I hope writing help me develop more clear understanding of the subjects and create useful future reference.
I considered it to be pretty self explanatory and didn't dedicated anytime here, I'll trust Google / StackOverflow moving forward 🤞
Here is a quick 1.5-hr crash course that's pretty fast paced, but fairly minimal / basic. I'd expect a ton of Googling later.
I found these courses much lengthier than necessary, and can't really recommended them to others. I skipped most of the exercises and some topics - I plan to leave that experience to actual projects. It was still good to get some context on practical applications and tooling setup.
New frontend frameworks show up every year, but Vue and React seem popular and here to stay. More recently Svelte seems to be gaining a lot of popularity. Overall, I feel React is more mature / well-supported, decided to go with it.
For an quick comparison of other frameworks see the chart below from State of JS 2020.
Regarding learning resources: I was attempting to go through this course on Udemy but too fed up with the lengthiness and verbosity and decided to just read the docs on reactjs.org, which is excellent.
Some problems with React:
React seems to be completely client-side rendered and is geared towards SPAs (Single Page App). This brings some difficulties.
A complete web app / website will have some app pages and some content pages (like its landing page, blog content, FAQ etc). Client-side rendering these static pages that don't really have much UX / interactivity will be both unnecessary and probably catastrophic for SEO - slow page load speed compared to server-rendered/pre-rendered static pages, and crawler might have trouble executing client side JS.
One solution is to complete separate these static/content pages from the app. But for these content pages, it would be nice to reuse the same set of UI components from the React app (buttons, navbar etc). So completely separating also isn't a great option.
Here is where Next.js comes in.
Next.js (still using React, but better)
After reading about what Next.js offers in terms of hybrid static & server rendering it does, I was so impressed and think this is thing I was looking for.
Also to note, I tried out the deployment tooling at Vercel and really liked it. Previously to make a web app, we'd need to host the backend server somewhere (say AWS or Heroku), and deploy the frontend bundle somewhere (e.g. Netlify or S3 with some CDN). So there are always kind of two places to deploy to and to pay for - a bit of a hassle especially for small projects.
With Vercel, it handles the CDN for all the static assets, and hosts all the server side logic (api routes) as serverless functions executed on AWS Lambda (I think), so you really have zero hosting infra to worry about.
I want to give a big shoutout to Lee Robinson for putting out a lot of great content on Next.js, check out his courses, repos and content.
UI Framework / Design System
After some tinkering with Material UI, it just felt a bit too convoluted. Perhaps I just didn't get it. After watching that React 2025 course videos, I decided to go with Chakra UI, will see how it goes and report back.
The comfort and confidence writing with Typescript is excellent, and I can see for a bigger project / bigger team this is going to be super useful / mandatory, something I'll revisit as my project get bigger. The adoption can be incremental anyways.
In the process of setting up TypeScript project I also got to learn a bit about Webpack. When we write client side code with lots of dependencies, we need to somehow build them into something (a bundle) the browser can run), there are many browsers to accommodate.
One reality though is that the modern frameworks such as React or Next already provided build script and you largely don't need to deal with Webpack directly, but in various project if you want to customize things a little bit (like add an post-proccessing step, or copying some files somewhere), knowing a bit about Webpack comes in handy.
I haven't really done much here, it seems Mocha, Jest and Cypress are good to check out. Another super high satisfaction but currently lower usage one is Testing Library.
Previously published here.
Create your free account to unlock your custom reading experience.