Image for post
Image for post
Photo by Anna Tukhfatullina Food Photographer/Stylist on Unsplash

As part of a personal project, I was working on a page where the user could add new posts about beers they tried. And in the form for the new post, I added the option to rate the beer via star rating.


Image for post
Image for post
Photo by Ivan Timov on Unsplash

useEffect is for side effects

useEffect is to functional components what componentDidMount , componentDidUpdate , and componentWillUnmount are, combined, to class components. It is a method responsible for all the so-called side effects that occur during the lifecycle of a React component.

Whether you want to make a call to an API, manipulate the DOM, or set up a subscription to sockets, useEffect is where all of that should take place.

useEffect is invoked on every render

Every single time your component re-renders, the useEffect hook is invoked anew. But what if you don’t want that to happen? What if you want to skip effects?

You can achieve that by instructing React to watch if certain values have changed between re-renders. …


Image for post
Image for post
Photo by James Harrison on Unsplash

If you’ve ever set up a Github Actions workflow on a repository, you will recognize the YAML file that executes steps upon any code you push to the repository.

These steps could entail building and deploying your code for production, for instance.

Above we define the steps for Github Actions to build the code in a node environment and deploy it to Netlify. This workflow is for my Gatsby code for my website. But what happens if I want to trigger the steps above on events other than pushing code?

Invoking a Repository Dispatch Event From a CMS

I used Strapi CMS to manage content for my website. And I realized that I needed to trigger the workflow above every time I updated the content on Strapi. I needed to update my site every time I changed the content. …


Image for post
Image for post
Photo by Sean Lim on Unsplash

I wanted to build my website and have some semblance of a CI/CD pipeline in place to push changes from local development to production easily. I wanted to have a frontend and a backend deployed separately, communicating with each other.

I set up the Gatsby frontend site on Netlify, while the content was managed by Strapi deployed on Heroku. I also added customized webhooks to Strapi to trigger builds of the site via Github Actions workflows. …


Image for post
Image for post
Photo by Brett Jordan on Unsplash

I maintain this view as a beginner to intermediate programmer. Senior programmers, or programmers that are more gifted, are more in shape to design a solid code architecture before they proceed with any line of code, due to their sheer experience or talent. I am writing this for us average programmers.

I really believe that getting a minimum viable piece of code working quickly, despite being ridden with some flaws, is invaluable and preferable to thoroughly planning your code structure at the outset. There is an immediate sense of gratification. …


Image for post
Image for post
Photo by Michael Dziedzic on Unsplash

Memoization is the technique of storing the results of computationally expensive operations. When the operation is invoked again with similar inputs, the stored/cached results are returned, rather than executing the function anew.

In React, memoization can be utilized to optimize calculations every time a component is updated and re-rendered.

UseMemo is a React hook that was made exactly for that.

const memoizedValue = React.useMemo(() => computeSomething(a,b),[a,b]);

useMemo receives two arguments.

The first is the expensive function to be executed, and the second is an array of dependencies. …


I have only read about two thirds, maybe less, of the books I currently have at home, yet I still keep buying new books from Indigo and loaning books from my local library.

Image for post
Image for post
Photo by Zaini Izzuddin on Unsplash

I love books. I don’t think I can name many places I like to visit more than libraries or book stores. Walking into them gives me a huge sense of awe and inspiration. All this knowledge lying on the shelves, readily available for me to digest.

Until recently I was certain I had an extremely bad habit. …


A mixture of box-shadows with the CSS transition property to breath some life into your elements on a web page.

Image for post
Image for post
Photo by Mildlee on Unsplash

Box-Shadow

This property in CSS would look something like:

box-shadow: 1px 2px 3px 3px rgba(0,0,0,0.14);// What each inner property does
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  • Horizontal Offset (required): It sets a shadow on either the right or left side of an element. If you set the property to a positive 1px there will be a shadow of 1px on the right side of the box, if you set it as -1px there will be a shadow of 1px on the left side of the box. …


It seems to me that dark mode is offered everywhere nowadays. And it feels good on the eye. So I added the option to my website.

Many websites I browse offer the dark mode option, and sooner than later I switch to it. Both my WhatsApp and Notion are in dark mode.

Image for post
Image for post
Create React App Documentation in Dark Mode

I decided to make sure my personal website offered a darker theme as well.


Image for post
Image for post
Photo By Halacious on Unsplash

I wanted the footer of my web applications to always stick to the bottom of the page, regardless of the size of the content of the page.

I didn’t want the footer to be displayed in the middle of the page, when the height of the content was small.

About

Sanjar Kairosh

Full Stack Engineer. Love reading and learning about code. sanjar.ca

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