DEV Community: Amirul Abu

Learning Update: May 2020

Amirul Abu — Wed, 27 May 2020 00:00:00 +0000

Starting this month, I want to record and track all my learnings in this blog. I have been learning so many things, but I did not track or wrote it down systematically in one place. This is my attempt to capture all my learnings or at least what are the subjects that I read or practice.

Since this is the first in this series, I want to record things that I have learned since Jan 2020.

Serverless framework #

I did an endpoint using serverless framework with NodeJS runtime. It does have quite tight integration with AWS Lambda so deploying to AWS is as easy as running a deploy command.

Nuxt.js #

Nuxt is a Javascript frontend framework using Vue. It does have interesting modes to suit your use cases. Assuming your content is stored in a database, here are some of the modes and use cases:

Server Rendered (Universal SSR)

Loads content in the HTML then served to the client.
Usually picked to improve SEO.
Suitable for user-generated content, new content will be available instantly.
Deploy as a separate service alongside your backend API.

Single Page Applications (SPA)

Loads an empty HTML, then populates the content via Javascript, some web crawlers might have a problem recognizing the content.
Suitable for user-generated content, new content will be available instantly.
Deploy as static file, less complexity.

Static Generated (Pre Rendering)

Using nuxt generate command to generate all the content in the HTML when deployed.
Suitable for content that does not change frequently and/or user-generated. Any changes in content need to regenerate the web app.
Deploy as static file, less complexity.
Cannot use dynamic routes eg. example.com/product/:id (well you can, but need to keep in mind the changes is only reflected when you regenerate the web app).

GraphQL subscriptions #

Made a simple project to test out GraphQL subscriptions. It is kinda a twitter clone that live updates the feed.

Code is done using VueJS SPA as frontend with Vue Apollo for integrating GraphQL in Vue, and GraphQL Yoga as backend.

https://github.com/amirulabu/twotter, https://twotter.mirul.xyz/

Strapi CMS #

I did a side gig for my friend and decided I do not want to build the backend from scratch using KoaJS, so I tried using Strapi CMS instead. It very fun to work with and I would say Strapi is quite flexible to add functionality. Among additional features I have added for the project:

ReCaptcha for the contact form
Facebook login to save long-lived page access token for background tasks
send telegram message when new content is added.

Clean Code #

I started reading and watching the video series Clean Code, right now I am at chapter 4, Function Structures. I was very glad I started reading Clean Code since there are lots of gems that I can apply for my day to day task as a software engineer. I probably will write a separate blog post on the summary and my opinions on Clean Code.

Now I realize why certain frameworks and libraries write code in a certain way. Why they have certain naming, and how to pick a good name for a class, variable or function.

Eleventy #

This blog is made using Eleventy. It is always a good idea to start with a starter project rather than starting from scratch with any static site generator.

originally posted at mirul.xyz

2019 Résumé Review

Amirul Abu — Sat, 09 May 2020 00:00:00 +0000

Let us review my 2019 résumé before I quit my job at PetChem. I did this résumé following this very concise guide from freecodecamp blog.

As I am changing my career from a non-tech to a software engineer, I want to emphasize what can I do by listing my projects first. My advice for Computer Science graduates, better put your qualifications on top, do not follow me.

HabitBot was an idea from my friend, who needs to be disciplined by having a telegram bot remind his everyday schedule. The habits can be added via the web application or by the bot. The bot was taken down since I am not using that bot anymore.

The work process dashboard was one attempt to simplify my daily task at my previous job. I need to track a lot of documents in various stages, therefore I built a web application with a dashboard to easily report to management.

So far both of these project I built using Django, because that time, I just finished the Python Crash Course book and was familiar with Django. Belajar Python Bot, now in its 3rd iteration, previously was using Serverless framework, then I rewrote it using Flask with Zappa and deploy to AWS Lambda. BelajarPythonBot is the longest Python project, that is still up.

I also got some little gigs for doing static websites for short rental houses (homestay). This demonstrates that I already have the basics of HTML, CSS, and JS in place.

Then I continue my résumé with my job experience. I did not put any description on my job at PetChem since it would be not related to any jobs that I was applying to. For the part-time online seller, I put that in, just to show I have that entrepreneurial experience and as a side project, I did while I was in Uni. I also got a side gig to build a website for a printing shop. Surprisingly, the website is still up an alive till today. I occasionally log in to the admin area and update some plugins here and there. The owner of the printing shop still contacts me from time to time. However, I do think the years I work as a web developer is somewhat misleading since I did the website while having an end of semester holiday during Uni. That's why I put the job title as a part-time web developer.

To summarize my skills from my projects above, I list down all the keywords that I deem important to emphasize for the person looking at this resume. My current thoughts today is, I still have a lot to learn about Linux Server Administration, and should not list that there.

Lastly, the education section, where I back up my skills and instill a bit more confidence to the recruiter that I am capable to become a software developer. I completed the CS50 course(and bought the certificate) and did most of Freecodecamp's front-end javascript challenges.

About the web development boot camp, I was lucky since they were just starting up and I am their 2nd or 3rd batch. I also got sponsorship by MAGIC to learn web development, so I joined the class right after I finished my degree in Uni. Although nowadays I do not use Ruby on Rails, through this boot camp I have the confidence to start programming, learn more programming things by myself, and build pet projects.

Should you take CS50?

Amirul Abu — Thu, 28 Mar 2019 15:59:58 +0000

There are lots of praises around the web on how Harvard University's Introduction to Computer Science CS50 is great, especially for people without prior computer science education. In this post I explain what are the stuff that intrigue me as a self-learner.

But before we go through the new things that I learned, I would like to help you answer, should you take the CS50 course? If there are some things below that you are not really familiar, or have heard but never tried it out and do it yourself, sure, CS50 is a great resource for that. On the other hand, if you are familiar and can explain what are these items below, I would recommend you to skip this course. 😁

Here are some of the items that is new to me that I learned and applied in CS50:

Scratch
- I have heard about scratch in the past, but not curious enough to try since it is always branded as a beginners tool to understand programming.
- When i was much younger, I played a lot of simple flash games on Miniclip, and one of it is 2D racing game like this.
- So, I did this as my project for week 0(2D Racing Game), it is not perfect, but I had fun.
Sort algorithms and Big O
- Prior doing CS50, I can program a simple Python script to sort things in an list, but I found out it is actually called insertion sort and there are already a few other sorting algorithms.
- There is also a metric that measure the time taken to solve as the items to be sorted becomes bigger which is Big O.
Reading files bit by bit
- Now i understand what actually makes up the type of file. You cannot simply change a file type just by changing its file extension.
- There are a few bits at the header of the files that contain information about the file and that what makes, for example, a .jpg file different than .png file.
Pointers, Linked List, Hash Tables
- Appreciation on memory usage when running a program and what is the difference of heap and stack in memory.
- Doing in programming in Python before, I do not really care about memory as I do not need to malloc and free memory.
- Also I can brag that I know how to do linked list in C. Yay.

From week 4 forward, most of it I have already read and do in the past so it is really smooth sailing from there. If you want to just skim through the syllabus , do check out the CS50 lecture notes here.

JavaScript Higher Order Example

Amirul Abu — Sat, 23 Feb 2019 09:18:18 +0000

This is an excerpt from Learning React


var createScream = function(logger) {
    return function(message) {
        logger(message.toUpperCase() + "!!!")
    }
}
const scream = createScream(message => console.log(message))

scream('functions can be returned from other functions')
scream('createScream returns a function')
scream('scream invokes that returned function')

It is a daunting task to really understand what is happening here. One of the immediate question is, how does the string in scream() can be passed all the way to logger then toUpperCase() then console.log()?

It is much clearer to understand using ES6 fat arrows


const createScream = (logger) => (message) => {logger(message.toUpperCase() + "!!!")}
const scream = createScream(message => console.log(message))
scream('functions can be returned from other functions')
scream('createScream returns a function')
scream('scream invokes that returned function')

If you don't understand it by now, don't worry. I will to break it down for you.

Here's another way of writing the code above, but skipping the higher order function, instead we hard-code the console.log() functionality.


const scream2 = (message) => {console.log(message.toUpperCase() + "!!!")}

scream2('the string is passed to message')

The string 'the string is passed to message' will go the scream2() parameter, then changed to uppercase and concatenated with exclaimation marks. This will happen first since they are in a bracket. Then the answer is console.log() out.

Another way of looking at it is by separating the functions.


function scream3(message) {
  return message.toUpperCase() + "!!!"
}

function logger(message){
    return console.log(message)
}

logger(scream3("this is another test"))