DEV Community: Stanley Azi

The Power of git reflog: Fix Broken Git History

Stanley Azi — Sun, 15 Jun 2025 16:16:58 +0000

Ever experienced a moment when your code editor or terminal crashes and you lose the changes you’ve just made? Or a scenario where you are about to reset a Git HEAD, amend or rebase a commit, and suddenly your Git history is out of control because your editor or terminal crashed?

In this article I will walk you through the power of git reflog.

Hinting at the power of Git

Git is a tool that helps developers maintain version control and track every change in a codebase. It enables collaboration, simplifies code review, and provides a safety net when things go wrong. It is essential for every developer to know how to use Git commands effectively.

What is `git reflog`?

While git log shows the history of all finalised commits in your branch, git reflog records every change to HEAD and branch tips, even if those commits are no longer reachable by any branch. It shows you exactly when you started a rebase or reset, which commits were applied or skipped, and when the rebase or other operations finished.

Why is `git reflog` helpful?

Take a look at the screenshot below of a git rebase. You can see the start of the rebase, each step where a commit was picked, and the finish when the operation completed, all labeled by entries like HEAD@{15}.

git reflog becomes extremely useful because it lets you checkout any of those HEAD states and recover your code exactly as it was before a crash or unintended change. You can jump back to where you need to be, even if the commit is no longer part of your visible history.

When do you need `git reflog`?

Here is a real example from my own experience:

I made a commit, then realized I needed to adjust part of it.
I ran git reset --soft HEAD^ to go back and make those changes.
In the middle of editing, my code editor froze. When I restarted, I discovered a rebase had started on another branch without my input.
I aborted the rebase, but lost the uncommitted changes I was working on.

At this point I ran git reflog and saw the exact entries for the rebase start and finish. I found the HEAD state just before the rebase began (even though it had the same commit hash) and reset back to it. Thanks to git reflog, I recovered all my changes without losing a single line of code.

That is why git reflog is so powerful. It shows you every HEAD movement for at least 30 days by default. You can see where a rebase started, where it ended, and every reset or checkout in between.

Scenarios when you may need git reflog

You ran a git reset or git rebase and realise you reset too far.
Your editor or terminal crashed during a Git operation.
You accidentally amended or squashed a commit you still needed.
You switched branches and then realised you needed the unmerged work.
You want to recover lost references after a forced push or merge conflict.

Other useful Git commands

There are many Git commands that complement git reflog and help you manage your history safely:

git stash to save uncommitted changes before switching tasks.
git reset --soft to move HEAD without losing your working directory changes.
git cherry-pick to apply a single commit from another branch.
git revert to create a new commit that undoes a previous one.

Learning these commands gives you fine-grained control over your history and workflow.

Leverage Git like a superpower

When you master Git, you can recover from almost any mistake. You gain confidence to try daring refactors, experiment without fear, and fix critical bugs under pressure.

Always push to a remote branch

While git reflog can save you locally, it is still best practice to push your work to a remote repository frequently. If you are mid-feature, add a WIP prefix (Work In Progress) to your commit messages so teammates know it is not final. When the feature is complete, squash or clean up your commits before merging.

I once had my PC die without warning on a Monday morning and I had few days left to deadline. Fortunately I had pushed every change to a remote branch. I cloned the repo on another machine and continued coding immediately. I lost only the hardware, not my work.

Conclusion

git reflog is your safety net when Git operations go sideways. It records every HEAD movement so you can recover lost commits, undone changes, and interrupted rebases. Combine it with git stash, git reset, and regular pushes to a remote repo, and you will never have to fear losing your code again.

Thank you for reading. I hope this makes you more confident in handling Git. Share your own stories or questions in the comments, I would love to hear how git reflog or a similar git command has saved your day.

You can always reach out if you have any gigs, offers, or questions!

Stanley Azi
Full‑Stack Engineer | Frontend Specialist

“It’s clear you are better than the reviewer” - said a Senior Software Engineer

Stanley Azi — Fri, 16 May 2025 16:13:45 +0000

I got selected to move forward for a Software Engineer (Frontend) role with a foreign company from a cold DM and was given a test assignment. I delivered beyond the expected result, only to receive feedback from a review that seemed out of touch with current web development best practices, especially within the Vue 3 and Nuxt 3 ecosystem. A senior engineer who looked over my work remarked, “It’s clear you are better than the reviewer,” which inspired me to share this story.

The Flawed Review

The review listed several shortcomings:

No Composition API usage.
No project architecture.
Code repetitiveness.
No cards stored in localStorage.
Not following the Figma design.
Bugs.

Many of these points were vague or incorrect. Let’s examine each claim.

1. Composition API Usage

Reviewer’s Claim: “No composition (Vue 3)”

Reality: Every component in the assignment used Vue 3’s Composition API with <script setup>, defineProps, defineEmits, reactive ref(), and other variables. This is idiomatic Vue 3 by design, enabling cleaner logic and better type inference with TypeScript.

Vue's official documentation recommends <script setup> for Vue 3 and Nuxt 3.

The below component clearly shows the use of composition API which was used in every single vue component in the codebase with typescript.

Lesson: Always verify the reviewer’s technical context before accepting their conclusions.

2. Project Architecture

Reviewer’s Claim: “No project architecture”

Reality: The project follows Nuxt 3’s opinionated file-based architecture, which is industry-standard and recommended in the official documentation. The structure includes:

components/, composables/, stores/, utils/, types/, pages/, and server/
Type safety with TypeScript
Organized assets and server logic

Calling this “no architecture” is, frankly, misleading.

This structure aligns perfectly with Nuxt’s official guidelines and scales well for large applications.

Approach Hint: Embrace framework conventions to streamline setup and reduce boilerplate.

3. Code Repetitiveness

Reviewer’s Claim: “Code repetitiveness”

Reality: I built reusable components to avoid duplication wherever practical. Any repetition, such as Tailwind utility classes or minimal logic blocks, is contextually appropriate and does not constitute a flaw without concrete examples.

Hint at Organization: Group similar UI elements into shared components; use design tokens or helper functions for common patterns.

4. Card Persistence (LocalStorage)

Reviewer’s Claim: “No cards storing (local storage)”

Reality: The assignment’s Technical Requirements specified using the Composition API and Pinia for state management; it did not mandate data persistence. I implemented every requested feature; UI interactions, CRUD workflows, and design fidelity. If localStorage persistence was expected, it should have been explicitly outlined.

Using localStorage would be a reasonable enhancement, but the task did not explicitly require persistence. The Technical Requirements section clearly mentions using the Composition API and Pinia store, both of which were implemented. The task primarily focused on UI functionality, the CRUD workflow, and accurate design implementation, all of which were completed. If persistence was an expectation, it should have been clearly stated in the task description.

5. Design Fidelity

Reviewer’s Claim: “Not following Figma design”

Reality: I matched structure, colors, spacing, and typography to the Figma mockups. Minor pixel adjustments may vary across environments, but no significant deviations occurred. All UI screenshots that were attached to the feedback were basic to fix and the feedback got me wondering what the use of 'code-review before merging to main' is for?

How on earth could a good reviewer point out inline padding on a closely implemented button that functions perfectly as a flaw, while ignoring everything else; pixel-perfect UIs, 100% functional implementation, ~100% performance, accessibility, SEO, best practices, speed, and animations? I mean, just look at what the reviewer is pointing out:

Not a single review mentions key functionalities, performance, Git branching and commit messages, best practices, or the cool transitions shown below.

Scored ~100/100 scores on both Lighthouse and PageSpeed performance, accessibility, best practices, and SEO:
Git branching and commit messages best practice:

I mean, look at the performance stats, near-perfect Core Web Vitals, optimised asset loading, and a responsive, accessible layout. Yet the review chose to ignore all of that and instead pointed out something like button padding as a flaw.

It’s critical to understand that web development is far more than what you see on the surface. Good reviews go beyond static visuals and evaluate architecture, performance, maintainability, and user experience holistically.

Tip for Collaboration: If you spot a potential mismatch, always provide annotated screenshots, clear examples, or Git-style code review comments referencing the specific line or component, it saves everyone time and confusion. Also, know the weight of what you're pointing out. A slight inline padding difference is not a breaking change and should be treated as a minor refinement, not a critical flaw. Context matters when reviewing work, not all mismatches are created equal.

6. Bugs

Reviewer’s Claim: “Bugs”

Reality: The only minor issue involved checkbox selection logic, a trivial fix by targeting checkboxes via unique IDs. Moreover, displaying a fallback message when a card ID doesn’t exist is a deliberate, user-friendly enhancement, not a defect.

Best Practice: Provide meaningful defaults for nonexistent data to avoid blank screens.

Takeaways & Moving Forward

Verify feedback with examples: Vague criticisms aren’t actionable.
Leverage framework conventions for rapid, maintainable development.
Communicate clearly about expected features vs. nice-to-haves.
Embrace constructive critique while standing by correct implementations.

When a senior engineer affirms your strength, it’s a reminder to trust your expertise and seek reviewers who understand the technologies you use. Stay confident, keep learning, and always aim for clarity in both code and communication.

Thank you for reading this part of my story-turned-article. What are your thoughts on my experience?

Let’s keep building amazing things and expanding our skills.

Have any gig, offer, or questions for me? You can always hit me up.

Stanley Azi,
Full-Stack Engineer | Frontend Specialist

From Side Projects to Job Offers: The Hidden Value of Your First Tech Projects and Articles

Stanley Azi — Wed, 12 Mar 2025 06:59:13 +0000

The projects you built and the articles you wrote in the early stages of your tech career could be the ones that speak for you and help you land more contracts when you finally reach the stage of seeking gigs and offers.

Early projects serve as real evidence of your skills. They show potential employers or clients that you are more than just a list of technical abilities on a resume. Instead of merely claiming to have knowledge in HTML, CSS, JavaScript, and accessibility, you provide tangible proof that you can apply these skills to build engaging and effective solutions.

For example, I built ScissorCut, a project that has always stood out for its excellent front end user interfaces and astonishing animations. I have had clients mention that this project caught their eye and prompted them to reach out. However, I still remember that ScissorCut was just a small project I built while learning HTML, CSS and JavaScript, the very fundamentals of a successful tech (frontend) career. I am amazed by how this project consistently receives positive feedback, even though it is simply a landing page featuring impressive pure CSS animations. This is a testament to the power of project-based learning. Don’t just watch tutorials, attend classes and read documentation. Build projects with what you have learned!

Beyond projects, technical articles can be game-changers in interviews. Writing about a topic means you’ve broken it down, researched it deeply, and explained it in a way others can understand. My article "Rendering Images the Good Way in Your React Application" has repeatedly served as a powerful asset in interviews. When asked about optimising images for performance, I don’t just answer, I reference my article, detailing how I’ve tackled the issue in real-world applications like Sabinus.meme, where I optimised and rendered high-quality images efficiently. This immediately convinces interviewers or clients that I don’t just understand the topic, I’ve applied it at a professional level.

These proofs have helped me land promising gigs. During a recent Upwork interview, I showcased my work and discussed how I solved similar challenges in the past. The discussion was convincing and played a significant role in securing the gig. This experience reinforces the idea that a portfolio of early projects and well researched articles can truly be the key to opening doors in the competitive tech industry.

Although my articles represent my personal opinions and serve as a reminder for me to put in more work, I enjoy sharing them with the public because my followers appreciate the insights. If you find this article insightful, give it a thumbs up and follow for more tech tips.

I am open to frontend and full-stack engineering roles and gigs. Let’s work on your project.

Thanks for reading through to the end!

Let’s keep learning and improving our tech skills by building projects and showcasing our work.

Properly Structure HTML for Easy CSS Styling

Stanley Azi — Sun, 09 Mar 2025 23:25:20 +0000

How to structure HTML effectively for seamless CSS styling?

This is a fundamental aspect of web development that can significantly enhance both the maintainability and scalability of your projects. Let's look at some essential practices to achieve this.

Firstly, It's worth noting that getting good at these technologies is not rocket science. Following roadmaps and useful resources available on the internet can help.

Master the Basics of HTML

It's crucial to approach HTML with the seriousness it deserves. Despite common misconceptions that HTML is overly simplistic or not a "real" programming language, understanding its intricacies is vital for any web developer. Familiarise yourself with every HTML5 element and its specific purpose to avoid the common pitfall of overusing generic <div> tags. This knowledge forms the foundation upon which efficient and effective web pages are built.

Understand Document Structure

A well-structured HTML document is divided into two main sections: the <head> and the <body>. The <head> contains meta-information, links to stylesheets, and scripts, while the <body> encompasses the content visible to users. Grasping this distinction ensures that you place elements in their appropriate locations, leading to better organisation and easier styling.

Embrace Semantic HTML

Semantic HTML involves using elements that convey meaning about the content they contain, such as <header>, <nav>, <article>, and <footer>. This practice not only enhances accessibility but also provides clear hooks for CSS styling. For instance, wrapping navigation links (<a>) within a <nav> tag inside a <header> that also contains your logo allows for targeted and efficient CSS rules.

Apply Logical Structuring

When organising your HTML, think critically about the hierarchy and relationship between elements. Consider whether wrapping certain elements in additional containers, such as <div> tags, is necessary for styling purposes. This logical structuring facilitates more straightforward and effective CSS application.

Prioritise Accessibility (a11y)

Accessibility is a crucial aspect of web development that benefits all users, including those relying on assistive technologies. Incorporating accessibility features can also simplify CSS styling by allowing you to target elements based on accessibility attributes without additional JavaScript. Applying more accessibility practices enhances both the usability and style-ability of your web pages.

Leverage Modern CSS Features

CSS has evolved significantly, introducing features that simplify complex styling tasks. Familiarising yourself with modern CSS capabilities, such as Flexbox, Grid Layout, and custom properties (variables), can drastically improve your styling efficiency and effectiveness.

Continuous Learning and Resource Utilisation

The field of web development is ever-evolving, making continuous learning essential. Utilise reputable resources to stay updated and deepen your understanding. Some valuable resources include:

Formal education opportunities are also worth considering, such as courses offered by AltSchool Africa, to further enhance your skills.

By implementing these practices and committing to learning more to improve your skills, you'll observe significant improvements in your web development capabilities over time. Remember, progress is a gradual process, advance at your own pace, filter out discouragement, and maintain focus on mastering your craft.

Rendering Images The Good Way In Your React Application

Stanley Azi — Mon, 17 Jun 2024 21:36:45 +0000

Introduction

Most times on my initial visit to a website, I take my time to observe and enjoy how images are rendered. In fact, if the website happens to include an image on their hero section, that is what first catches my attention before I go ahead to read the texts on the page.

Visual appealing images aids good User Experience (UX) while browsing a web or mobile application. It also play a crucial role in beautifying the User Interface (UI). In some cases, images speaks louder than the texts associated with it.

Rendering images poorly in your application could harm your UI, thereby causing bad UX. In this article, I will walk you through "rendering images the good way in your react application".

Prerequisites

This article is for everyone who loves building and beautifying web and mobile applications, and those who use them. However, having basic understanding of the below tools and concepts in web development is a plus as we would write some code to better explain some concepts.

Basic knowledge of Frontend Development (HTML/CSS/JS)
Basic Knowledge of React

What does Image Rendering mean?

Image Rendering is the process of displaying images on the UI of an application for the users to see and interact with them. When you visit an application and an image gets loaded on the screen, that process of the image loading is what is referred to as Image Rendering.

Why should we care about how images are rendered?

There are more to Image Rendering than just loading images on the User Interface (UI). If images are not properly rendered, they tend to make a bad UI and even harm User Experience (UX). This is why proper image rendering is considered a critical skill every Frontend Developer should possess.

How to render images the good way in a react app?

The basic rendering of images in most Frontend Web Development languages, libraries and frameworks follow a simply convention where the HTML img element is used. The img tag primarily consists of two major standard attributes; src and alt attributes. The src attribute takes a string of the url or the relative path of the image to be rendered, while the alt attribute takes a string containing a description of the image to be rendered. The description provided in the alt attribute is what would be rendered if the image is broken or failed to render. The alt attribute also aids accessibility (a11y) by describing to screen readers what the image is. Other img tag standard attributes include srcset, sizes, loading, crossorigin, usemap, etc.

React renders HTML elements using JSX. The JSX translates to HTML under the hood.

In order to render images the good way in a react application, below are the tips and tricks that would magnify how they are rendered by react:

1. Emphases on the alt attribute

The alt attribute is very important and should never be omitted when rendering images with the img tag. The alt attribute does not only display the provided description when the image failed to load, but also play a crucial role in aiding a11y by providing screen readers contents to read out to the user about the image. I have once debugged someone's code and discovered that all img tags in the entire code base does not have alt attribute, I had to include it and provide good description for each each image. Not including the alt attribute is a bad practice and should be avoided at all times.

Do: <img src="imageURL/relativePath" alt="a good image description" />

Don't: ~~<img src="imageURL/relativePath" />~~

2. Best image format and file size

Generally, the image file format and size matters a lot. They determine the clarity and the speed at which the image is loaded.

The smaller the image size, the faster it would render.

It is highly recommended that the file format for icons and small graphics should always be SVG as they are usually smaller in size and scalable.
<img src="iconUrl.svg" alt="a good icon description" />

The WebP format is one of the best formats to save and render images of high quality and size. It is a modern format that provides great compression and high quality when compared to old formats like JPEG and PNG.
<img src="imageUrl.webp" alt="a good image description" />

The image above shows an image format conversion from JPG to WebP using Squoosh.app. In this conversion, the 2.79MB JPG image (see bottom-left corner of the image) was converted to a 705kB WebP format, saving 75% of the file size while still maintaining the image quality (see bottom-right). You can further adjust the quality and compare the difference by dragging the divider left-right to get smaller size. Squoosh.app is a great tool for image conversion that does not upload your image elsewhere as you are basically doing all your conversion offline and with your computer, and it has a download button that you can click to simply save your file after conversion. The Squoosh.app also converts to other image formats which you can explore.

Other image formats (e.g, JPEG and PNG) are still valid and can be used if the image size is small, but should be used with caution. Since WebP saves us a lot image size while still maintaining high quality, why not just use it all the time in your application? Its support across browsers as at the date of the publish of this article is 96.9%, which means it has good support across all major browsers.

3. Proper image box sizing

Providing a proper size for the image to be rendered should be practiced. This backs the certainty of the image fitting the available space for it across screens as desired. The intrinsic sizing being discussed in this case include width, height and aspect-ratio.

<img src="imageURL/relativePath" alt="a good image description" width="200px" height="300px" />

The image sizing, just like every other HTML element, could be styled inline, internally or with an external css file.
<img src="imageURL/relativePath" alt="a good image description" />

img {
  width: 200px;
  height: 300px;
}

If the image is wrapped with a container, e.g div or span, and the desire is to make it cover the container, in most cases the container would take the size of the img tag. But if the container has a specified width and height, the img tag could be given a relative value (e.g width="100%"), although this should be applied with careful examination as the aspect-ratio of the image may affect the styling and should be adjusted accordingly.

<div width="200px" height="300px">
  <img src="imageURL/relativePath" alt="a good image description" width="100%" height="100%" />
</div>

In order for aspect-ratio to take effect, at least one of the image sizes must be auto.

<img src="imageUrl/relativePath" alt="a good image description" width="200px" height="auto" aspect-ratio="1/1" />

Sizing the image is one of the basic good practice that aids good User Interface (UI). When an image is properly sized, you are certain as a Frontend Developer that its shape across screens gives a pleasing view to the user.

4. Lazy loading

Diving deeper into "rendering images the good way", one of the critical aspect to be considered is how the image is rendered. One of the key ways to render an image wholly is to lazy-load it. This ensures that the image is in the viewport and has fully been loaded before displaying it on the UI. To achieve this, you can use the img tag loading attribute where you set the value to "lazy", or you can use other small-size React image lazy-loading libraries that may include extra loading features.

- The loading attribute

The loading attribute gives us the ability to control how the image is rendered. It helps to command the image to either load immediately the UI is loaded regardless of whether the image is in the viewport (loading="eager"), or load only when the image reaches a certain viewport (loading="lazy"). This means that the loading attribute can take values, eager and lazy. By default, images are rendered eagerly (loading="eager").

<img src="imageURL/relativePath" alt="a good image description" loading="eager" />

<img src="imageURL/relativePath" alt="a good image description" loading="lazy" />

Lazy-loading images generally improves image rendering. It ensures that the image only loads when needed, and in most cases, it forces the image to only display when it is fully ready, thereby preventing the image from rendering part-by-part on slow or poor network.

- React lazy-loading libraries

Using a third-party library to lazy-load images is also an option. One may prefer to use a library which simply involves installing and importing the library, and then using it to control the img tag in your application as the library's documentation suggests. Although in most cases, using the loading attribute works just fine rather than importing a third-party library if you are rendering a few simple images with less configurations. Using a third-party library was preferred due to its extra features and poor browser support for the loading attribute in the past, but as at the time of the publish of this article, the img tag loading attribute is 95.73% supported across all major browsers, which means it's safe to simple use the loading attribute to lazy-load images.

Further more on the third-party library option, there are two React lazy-loading libraries I recommend for use; they are react-lazyload and react-lazy-load-image-component. Both libraries supports lazy-loading images and components.

react-lazyload:

Installation:
pnpm install --save react-lazyload

Basic Usage

import LazyLoad from 'react-lazyload';

function App() {
  return (
    <>
     <h1>Lazy loaded image</h1>

     <LazyLoad height="100%" placeholder={ <p>Loading...</p> }>
      <img 
        src="imageURL/relativePath" 
        alt="a good image description" 
        width="200px"
        height="300px"
      />
     </LazyLoad> 
    </>
  )
}

export default App;

The react-lazyload library wraps the img tag with it's LazyLoad component just as shown in the code block above. It can only wrap one child img tag at a time. This library performs well with speed at which it renders images. Its simplicity and features makes it unique. Some of the props the LazyLoad component can take include placeholder, once, height, unmountIfInvisible, debounce/throttle, overflow, etc.

react-lazy-load-image-component library:

Installation:
pnpm i --save react-lazy-load-image-component

Basic Usage

import { LazyLoadImage } from 'react-lazy-load-image-component';

function App() {
  return (
    <>
     <h1>Lazy loaded image</h1>

     <LazyLoadImage
        src="imageURL/relativePath"
        placeholder={ <p>Loading...</p> }
        alt="a good image description"
        height="400px"
        width="600px" 
      />   
    </>
  )
}

export default App;

The features of this library makes it easier to handle the loading state of the image. Unlike react-lazyload library which wraps the img tag with an opening and closing tag (<LazyLoad><img src=“” alt=“” /></LazyLoad>), this library makes it seem as though you are still using the img tag, you simply replace the img with LazyLoadImage and all the attributes of img tag can be passed to the LazyLoadImage component as props. React-lazy-load-image-component library performs great when the images to be rendered are many, it ensures that only images that would fit the viewport are fetched, the more you scroll, the more it fetches, saving the amount of network requests that would have been made if all images were to be fetched at once. The props that could be passed to this component aside all img tag attributes include placeholderSrc, threshold, effect, useIntersectionObserver, debounce/throttle, onLoad, beforeLoad, afterLoad, placeholder, etc.

5. Responsive Images

Generally, responsiveness is a very important aspect of Frontend Development that ensures that all UI components and elements of an application are displayed in correct sizes across devices. The concept of displaying the correct size of an element with respect to the device's screen size can be applied to the img tag with the srcset attribute for image rendering, where different sizes are passed to the sizes attribute with respect to the number of image URL passed to the srcset attribute.

<img 
  src="imageURL-small" 
  srcSet="imageURL-small 500w, imageURL-medium 1000w, imageURL-large 1500w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
  alt="a good image description" 
/>

The above code block shows a basic application of responsive image where different image URLs were provided in the srcset attribute, and their respective sizes were provided and separated with commas (,) in the sizes attribute. This ensures that the correct size of the device screen size is loaded, which improves rendering speed with respect to the image file size. A default URL is passed to the src attribute.

6. Progressive Image Loading

The concept of progressive image loading involves rendering a low-quality image placeholders (LQIP) or a blurred version of the original image to be displayed while it is loading. A typical example of this type of image rendering is seem on unsplash.com and pexels.com.

I personally recommend rending images progressively as it gives your users/visitors a picture of what is expected to be loaded. This improves both UI and UX because it initially occupy a space for the loading image which prevents Cumulative Layout Shift (CLS), and also provide the user a hint of what is loading.

Implementation of Progressive Image Loading with BlurHash in React

BlurHash is a compact representation of a placeholder for an image.

Installation:
pnpm install --save blurhash react-blurhash

Basic Structure of React Blurhash component

<Blurhash
  hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
  width={350}
  height={323}
  resolutionX={32}
  resolutionY={32}
  punch={1}
/>

The React Blurhash components takes hash, width, height, resolutionX, resolutionY, and punch as props.
The hash prop's value is a string of the encoded hash of the original image to be rendered. The width and height props can be a valid CSS string or number value for width and height of the Blurhash image. The resolutionX, resolutionY controls the horizontal axis and vertical axis resolution of the blurred image, while the punch takes care of contrast of the blurred image.

To generate a BlurHash string, we would simply use the generator on the BlurHash website (blurha.sh) for this article. On blurha.sh, scroll down to find the image upload button, upload the image you need the BlurHash string for and copy the generated hash.

Basic Usage

import { useState, useEffect } from "react";
import { Blurhash } from "react-blurhash";

const [imageLoaded, setImageLoaded] = useState(false);
const [imageError, setImageError] = useState(false);
const [imageSrc, setImageSrc] = useState(null);

useEffect(() => {
  const img = new Image();
  img.onload = () => {
    setImageSrc(img.src);
    setImageLoaded(true);
  };
  img.onerror = () => {
    setImageError(true);
  };
  img.src = "imageUrl/relativePath";
}, []);

function App() {
  return (
    <div>
      {!imageLoaded && !imageError && (
         <div>
           <Blurhash
             hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
             width="100%"
             height="100%"
             resolutionX={32}
             resolutionY={32}
             punch={1}
           />
         </div>
      )}
      {imageError && <div>Error loading image</div>}
      {imageSrc && <img src={imageSrc} alt="a good image description" loading="lazy" />}
    </div>
  )
}

export default App;

In the above use case of the React BlurHash component, I manually handled the loading state and error state of the image without using a React library. The code simply uses useEffect() to watch updates of the state of the rendering image. When the loading is true, the BlurHash component is shown, but when the image is fully loaded, the original image is shown to replace the the BlurHash component, and on error, the error state becomes true and an error message is displayed instead (in our case 'Error loading image').

You may be asking why all these lines of code just to display an image?. The desire to better handle image rendering in React got us here. Although we can use a React library to save our time and reduce the lines of code.

Using react-lazy-load-image-component library with BlurHash
The react-lazy-load-image-component performs well with BlurHash when you simply pass the Bluhash component to its placeholder prop.

import { LazyLoadImage } from 'react-lazy-load-image-component';
import { Blurhash } from 'react-blurhash'

function App() {
  return (
    <>
      <h1>Lazy loaded image</h1>
      <LazyLoadImage
          src="imageUrl/relativePath"
          placeholder={
            <Blurhash 
              hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
              height={400}
              width={600}
              resolutionX={32}
              resolutionY={32}
              punch={1}
            />
          }
          alt="a good image description"
          height="400px"
          width="600px"
        />   
    </>
  )
}

export default App;

The above code block greatly reduced lines of code compared to when the image state was controlled manually. You can also decide to observe the loading state of the LazyLoadImage component with the onLoad prop and update the state when the image is loaded (e.g, const [loading, setLoading] = useState(true)) rather than using the placeholder prop. The onLoad prop can be assigned a function that updates the loading state (e.g, () => setLoading(false)), which then gives the ability to conditionally display the Blurhash component based on the loading state of the image. Although the option of using the onLoad prop to manually manage loading state can cause Cumulative Layout Shift (CLS) if the wrapper div or span containing the Blurhash component and the LazyLoadImage component is not properly styled.

7. Other Ways Of Rendering Images Efficiently

There are lots of good ways of rendering images. This means we have options as developers. These options include, but are not limited to Preloading Key Images, Using Image CDN, Using Background Images for Decorative Images, and Exploring Other Methods Of Progressive Image Rendering.

Conclusion

Effectively rendering images in your application is crucial for optimizing performance and greatly improving User Experience (UX). Also, this great act makes your User Interface (UI) more charming and lovely to visit regularly.

"When images are properly rendered on the UI of your application, kindly note that the joy I have in heart as your dearest user and frequent visitor is beyond imagination".

Always enable code analysis tools like ESLint in your coding environment to alert you when you make mistakes like forgetting to include the almighty important alt attribute in your img tag.

As a Frontend Developer or a UI Engineer, make it a priority to render images following best practices that would greatly improve how fast they are rendered by firstly considering the sizes and formats of your images before using them in your application.

Thank you for reading through to this part of the article!
Let's keep following best practices while coding! 🚀

Resources

1. React lazy-loading libriries

2. Example websites that uses Progressive Image Loading

3. BlurHash

4. Image format converter

Squoosh

DEV Community: Stanley Azi

The Power of git reflog: Fix Broken Git History

Hinting at the power of Git

What is git reflog?

Why is git reflog helpful?

When do you need git reflog?

Scenarios when you may need git reflog

Other useful Git commands

Leverage Git like a superpower

Always push to a remote branch

Conclusion

“It’s clear you are better than the reviewer” - said a Senior Software Engineer

The Flawed Review

1. Composition API Usage

2. Project Architecture

3. Code Repetitiveness

4. Card Persistence (LocalStorage)

5. Design Fidelity

6. Bugs

Takeaways & Moving Forward

From Side Projects to Job Offers: The Hidden Value of Your First Tech Projects and Articles

Properly Structure HTML for Easy CSS Styling

Master the Basics of HTML

Understand Document Structure

Embrace Semantic HTML

Apply Logical Structuring

Prioritise Accessibility (a11y)

Leverage Modern CSS Features

Continuous Learning and Resource Utilisation

Rendering Images The Good Way In Your React Application

Introduction

Prerequisites

What does Image Rendering mean?

Why should we care about how images are rendered?

How to render images the good way in a react app?

1. Emphases on the alt attribute

2. Best image format and file size

3. Proper image box sizing

4. Lazy loading

- The loading attribute

- React lazy-loading libraries

5. Responsive Images

6. Progressive Image Loading

7. Other Ways Of Rendering Images Efficiently

Conclusion

Resources

What is `git reflog`?

Why is `git reflog` helpful?

When do you need `git reflog`?