Photo by Safar Safarov on Unsplash
I have recently embarked on the wonderful journey of studying programming on my own. It has been a fulfilling challenge, and I intend to keep learning more.
Here are the resources that I used in my learning:
- Udemy courses by Andrei Neagoie: Zero-to-Mastery and a follow-up intermediate course. Andrei has written a great article on how to learning coding from scratch. His courses are great for beginners like me, and he has built a strong and growing community of students / alumni that serves as a great learning / networking resource.
- freeCodeCamp – a free and great platform to learn. I used it sometimes to reinforce certain concepts that I was weak at.
- YouTube – I went through a few tutorials building small projects and picked up some best practices in how to approach common problems.
To me, there are some parallels between learning programming and learning a new spoken language.
Both require a tremendous amount of muscle memories.
Understanding new vocabs from a book and knowing how to repeat a sentence after your teacher is one thing; being able to speak and effectively apply what you’ve learned in a real conversation is a totally different ball game.
Similarly, after finishing the courses, even though I have learned a great deal intellectually, I still found myself struggling when coding without tutorial and making the most simple of mistakes.
As such, I decided to work on a real-world project to help build up more experience and muscle memory.
I chose to build from scratch a front-end only partial replica of a friend’s e-commerce (Boxgreen.co) as it has features that I want to get more practice on, and their website looks good.
Here are my experience doing it:
- React, Create-React-App
- Redux, for state management
- React-router-dom, for client-side routing
- Backend, no backend for now, just a json file for products
- Design: plain CSS, button and form elements from Bootstrap, icons from Font Awesome
- All images and asset taken from Boxgreen
- Other tools used: redux-logger, redux-thunk
- Git repo: https://github.com/yinhowlew/boxgreen-ecommerce-replica
- URL: https://boxgreen.web.app/
- Concepts practised:
- React hooks: useState, useEffect
- React-redux hooks: useSelector, useDispatch
- Dynamic import: react.lazy/suspense
- localStorage for cart
- Functional programming
- edit: integrated Firebase Auth and Firestore for signup/login/profile
- Timeline (put in about 3-8 hours each day while wife is asleep):
- Day 1 – Navbar; Landing layout
- Day 2 – Shop layout; Product Listing mapping; Redux setup
- Day 3 – Filter; Search
- Day 4 – Cart page layout and redux
- Day 5 – Product Details page; Routing; stuck at Routing issue for hours; Product Recommendation;
- Day 6 – Bug-fixing; Mobile-responsive;
- Day 7 – Refactor some code – separating logic away from components to Redux; Footer; Bug-fixing; more mobile-responsive;
- Day 8 – Error page; Ingredient toggle at Filter; some Code Splitting; Price Sort;
- Day 9 – Polish; Publish on Github Pages; Fixed routing issue caused by GH Pages;
Some learnings along the way – tips for beginners like me:
- Planning out the application and components well at the start is crucial.
- I wasted quite a few hours on simple mistakes such as using the wrong variable names and typos. To avoid that, I should have coded and tested incrementally with console.log instead of writing a whole chunk of code and trying to figure out what’s wrong at the end.
- Below is a rather accurate break-down of what I did – googling errors, debugging, Stack Overview, and just a whole lot of googling:
-1% actually coding
-15% coffee breaks
-30% googling errors
–9% staring with your colleagues at the screen
–5% trying copy/pasted solutions from Stack Overflow
— Catalin Pit (@catalinmpit) March 16, 2020
- When building the UI of a component, I found it a lot more effective when I planned out on a paper all the layers of containers and and their class names before going ahead with the coding. Using temporary background colors for different layers/sections also helped in fixing CSS issues.
- On the first few days, sometimes I did my CSS Styling like a Vegas gambler – randomly adding in margin, justify-content, align-content, align-item, width, etc, and hoping that one of them would work. Towards the end, I started to get a better grip and was able to identify the exact CSS properties to use.
- Debugging with console.log and redux-logger is essential. Helped in figuring out why certain data is not showing, which state is not updating correctly, whether I have passed a data mistakenly in object instead of in string, etc.
- If your application’s states are large and complex enough, using Redux to manage state felt much more elegant than prop-drilling. As a bonus, for any component you need to connect to the Store, you can use Hooks from react-redux such as useSelector and useDispatch in place of mapStateToProps, mapDispatchToProps, and Connect.
- As much as I can, I used Functional/Pure components instead of Class components, and used Hooks such as useEffect in place of componentDidMount. For local states, I use useState Hook which removes the need for constructor() and super(). It felt more simple and straightforward syntactically, and it reduced complexity and potential for bugs caused by Class component.
- A good practice is separating business logic from user interface code. I tried to put most logic in the action creators of Redux, but I still have some ways to go.
Above all, the most important take-away is this:
Nothing beats building things on your own to truly accelerate your learning.
Every mistake, every fumble, every misstep you made will now be viscerally etched in your muscle memory; no amount of tutorials / code walkthroughs can replace that.