Coding endeavors: What to do when you have a mental roadblock?

So… I had a mental roadblock for the 5 hours today on this algorithm for a project that I am working on. I was so close but yet felt so far away. As any coder would do, I kept on asking myself: “What did I do wrong? What am I not seeing? What am I missing?”. Even started doing this:

I started to panic, and the worst thing you could ever do is to start acting out of fear. Of course, my instinctive response was to start changing codes around with trial and error, just “hoping” the code would magically work. As expected, it just kept on creating more bugs, and became a disaster!

Therefore, a lesson for me and any one of you who do the same thing above:  “NO, people! This is not how you should approach problem solving, you need to try another approach”.

Here are 5 things that I learned today and eventually got the solution to work:

1. WRITE YOUR THOUGHT PROCESS ON A PIECE OF PAPER OR SAY IT OUT LOUD FROM SCRATCH
   • Seriously, I started to grab some paper and started doodling on how each step should look like. I used examples on how the algorithm should work out and started to draw/write every single step down. It started to make sense for me when I saw it visually.
2. PSEUDO CODE AND CONSOLE.LOG() ARE YOUR BFFS
   • They are both equally important. Pseudo code allows you to write down the story login before you start coding or explain what your code does, and console.log can keep track of the steps/responses in your code when you run it.
3. DROP YOUR EGO AND TAKE A STEP BACK
   • Shoot, this is one was a main blocker for me. That’s because I tell myself that I’ve already spent so much time and thoughts into the first approach that I didn’t want to “waste” it. But because I was afraid to waste the code and restart again, I disallowed myself to see other possible approaches that could be so much better. So, chillax and take a step back, you can always save the previous solution in another file and you might need bits and pieces from there to work out your solution.
4. DROP YOUR EGO AND ASK FOR HELP OR OPINIONS
   •  There are times where I refused to ask for other opinions on problem solving because I didn’t feel the need to “bother” others. This is not true, an extra brain gives you extra inspiration to be even closer to your solution. Don’t be afraid to ask for help. Remember how Pied Piper figured out their data storage algorithm from Silicon Valley? YES, the dick jerk algorithm. Shoot, you never know how others can contribute in coming up with a super awesome solution!
5. DON’T FORGET TO TAKE BREAKS OR YOUR EYE OFF FROM THE COMPUTER
   • This is important, or else you will drive yourself insane.

 

 

I am happy to say that I was able to solve my problem and the actual answer was 1000 times easier and shorter than I initially thought it would be! I just cleared my brain, took a step back, and coded with Ed Sheeran on. I can finally move on to my next task!!!!!!!!! I am so happy. I can finally sleep in peace. This is all have to say about my experience today. Until next time!

Kthxbai,

Lav

 

 

React Shop Adventure 1: Planning and wireframing

I am currently building an e-commerce application for a client. One of the cool things about this is that I get to choose what frameworks and libraries to use(MERN stack of course😁), since this application will be built from scratch! It’s a learning opportunity for me, and I also get to add this project to my portfolio too. Yay!

For any projects, planning and wireframing is super important.  Spending quality time with the client by discussing and planning the functionality and features of the app ensures both parties are on the same page.

I built a basic wireframe after (just the products page and checkout page), so to give the client an idea of how the app will look like.

Some wireframe websites you can use that are free:

https://wireframe.cc/

https://gomockingbird.com/

And many more if you google “wireframes”.

I decided to go with gomockingbird because of it’s minimalist UI feel to it. Although it doesn’t have as many other features as the other sites do, I like using it because it gets the job done quickly using the “drag and drop” methods.

Here is a snapshot of the products page:

Here is a snapshot of the view carts page:

Here is a snapshot of the payments page:

Building any websites is not easy. It requires extensive amount of research. I had to reference to other ecommerce websites just to see how they have implemented their checkout and payments page just to come up with this wireframe. Just like Picasso said: “Good artists copy; great artists steal“. You can take nits and bits(good parts of course) from websites to create masterpieces!

Some of the features that I will be implementing in this app :

• user profile that can save their carts so they can come back and shop next time
• rating and comments system for each product (will create wireframe soon)

To plan your workflow, most agile development teams use scrum. This blog shows a good explanation on what agile development and scrum means. In this case, I planned my workflow using a scrum board. A super popular application for a scrum board would be trello. It keeps my tasks on check and allows me plan my to dos for the day and add, edit, delete tasks if need be. You can even attach memes just to spice up the mood of your workflow, hehe. Here’s an example of my trello board:

Whenever I am done with an item on the checklist I’ve created for that card, trello crosses it out and displays the percentage for my finish line. When I am finished with that  card, I usually move it over to a “Finished” list. There are so many other ways to customize it to your own needs, that’s what’s awesome about trello and what makes it so popular for teams these days.

So far I’ve built the basic main products page with the cart functionality using React, Redux, and dummy json data. I will document the journey in my next blog and some lessons I’ve learned from the past and applied to this project.

Anyhow, it’s time for me to charge up and continue to fight tomorrow! I will see you in the next blog.

First post ever!

Happy New Year! It’s 2017, the year of the Rooster, which is the year that I am born on. This will be the year that I will rock as a developer/engineer!

This blog focuses on my journey as a javascript web developer! In this blog, you will find posts related and not limited to:

• React.js
• Node
• Angular
• Mongo/Mongoose
• Express
• Javascript
• HTML5
• CSS
• Algorithms
• Common learning issues and solutions
• Walkthrough
•  Job application process
• Interview process
• Memorable experiences

I hope you will enjoy my content as much as I enjoy this adventure! Ahhh…This reminds me of a game I used to play, called “Adventure Islands”. I hope I will be able to grow more knowledgable and experienced with coding kiwis,  jump over coding challenges with my javascript skateboard smoothly without tripping, eating up by firing snakes, or falling into coding potholes! Hehe!

See you in a bit!

Lav