Your future self will thank you.

What is a commit message?

As you write, edit, and refactor your code, it can be hard to keep track of all these changes, what the changes are doing, and why you’re making these changes. A commit saves your changes to a local repository, and adding a clear message will help you keep track of those changes.

Why is it important to write good commit messages?

A good commit message communicates the context of a change to other developers and your future self. It not only tells you changed, but . Whether you’re working on a personal project, working with a team, or contributing to open source, it’s a good habit to keep…

Simplifying DOM manipulations, Data fetching and other effects

Use Cases

As a web developer you should be comfortable manipulating the DOM and performing other side effects now and then. With React’s useEffect hook, you can easily manage and perform side effects in function components. Examples of side effects in React include:

  • Data fetching
  • Setting up a subscription
  • Manually changing the DOM
  • Other mutations, timers, logging, etc.

How Does it Work?

useEffect accepts a function, and runs this function after every completed render. It also accepts an optional second argument, a dependency array. If a dependency array is passed in, React will know to re-run the effect only when values (state/props) inside the dependency array…

Learn how to use state in a functional component.

What are Hooks?

With the introduction of Hooks in React 16.8 (released February 16, 2019), you can now use state in a functional component. These built-in functions “hook” into React’s state and lifecycle methods — no more complicated “this”, binding, passing state around in class components!

The 3 basic built-in hooks are useState, useEffect, and useContext. You can also write your own custom hooks to use state. In this post we’ll be focusing on the most useful hook, useState that will greatly simplify reading and writing code in React.

Use cases:

  • An array of items you want to buy in an e-commerce store

The two JavaScript types that are not primitive values.

JavaScript is comprised of 9 fundamental types of values. Of the 9 types, 7 are primitive. My last article covered the importance of understanding primitive values here. The remaining 2 types are Objects and Functions, and I will go into detail about them here.

  • Objects ({}, []) used to group related data and code.
  • Functions (x => x * 2), used to refer to code.


When you think about objects, you typically think curly braces {} but arrays, dates, regular expressions and any other non-primitive values are objects as well. You can check using the typeof() operator.

typeof({}); // “object”

Pre/Post Increment/Decrement Operators Explained.

Increment Operator ++

If you have a basic understanding of any programming language then you’re likely familiar with for loops and have probably used the ‘++’ operator. The increment operator written as ‘++’ one to its operand and the decrement operator ‘ — — ’ one from its operand.

Languages that support the ++/ — — increment/decrement operators include: C++, C#, Go, Java, JavaScript, PHP and more.

for (var i = 0; i < 3; i++) {
0 // i = 0, increment by 1 => i = 1
1 //…

What is a Function and What is its Purpose?

A is a type of procedure or routine used to perform a specific task. Imagine you needed to convert measurements of baking ingredients every time you needed a new ingredient or used a new recipe. If you could simply plug in your measurement into a conversion table that has already done the work for you, wouldn’t you? Functions are useful when you need to do the same task over and over again.

How Do You Read it? (JS Function Syntax)

A is declared with the function keyword “function”, followed by the identifier — what you choose to name the function and a set of parentheses ()…

Project ideas, resources, awesome public APIs, and more

Looking to be productive and build a project during this downturn but don’t know where to start? I’ve broken down the thought process of how to drill down and decide on a project idea that you would be both passionate about and proud of!

Find your Passion [Project]

To decide on a project that you would be passionate about, you need to first find your passion. If you’re passionate about your project, you’ll be excited and naturally driven to put in the energy and effort needed to make an awesome app that you would be proud of. …

How to host images on Cloudinary with React SDK, forand directly transform your images without additional photo-editing tools.

So, you added the super cool functionality for users to upload their own images to your app (using local Storage if you built your app with Ruby on Rails) and it no longer works on Heroku? At first glance, it may seem to work but those images won’t persist and will not be there the next time you access your app, so you now need a different storage solution. Cloudinary to the rescue!

A note on SDKs

A software development kit (SDK) is a…

Using Git and the Heroku CLI for macOS, including continuous delivery with pipelines.

The most exciting part of a project by far is seeing it come to life, live, online, for the world to see. That feeling of accomplishment after weeks on end of frustration as each new feature breaks and wrestling with debugging day after day finally comes to a close (..for the time being). But most importantly, being able to share and interact virtually in times like these is a gift, and the new way of life. …

What is a Grid System?

Bootstrap 4 is a mobile-first grid system, that is built for easy viewing on mobile phones. Bootstrap’s grid system uses containers, rows, and columns to align content and build layouts of all shapes and sizes. It’s built with flexbox and is fully responsive.

Grid System Features:

  • Automatic Layout
  • Column Wrapping
  • Reordering Columns
  • Horizontal & Vertical Alignment + Flex Grid
  • Column Height


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store