DEV Community: Tebogo Nomnqa

5 essential tips to writing readable code

Tebogo Nomnqa — Mon, 18 Dec 2023 06:10:00 +0000

Code is often read than written, making code readability a crucial aspect of software development. Readable code is easy to understand, allowing developers to follow the logic effortlessly through the lines. In this article, drawing from my experience as a tutor for Rhodes University's Computer Science students, I'll share five essential tips for writing code that is not just functional but also a pleasure to read.

We will begin by looking at the following Python program

Before 🙃

def cc(s, k):
    r = ""
    for i in s:
        if i.isalpha(): 
            r += chr((ord(i) + k - 97) % 26 + 97) if i.islower() else chr((ord(i) + k - 65) % 26 + 65)
        else:
            r += i
    return r
t = "readable code?"
ct = cc(t,3)
print(f'{t} encrypted => {ct}')

At first glance, can you tell what it does?

💡 ord(char) Given a string representing one Unicode character, return an integer representing the Unicode code point of that character.

chr(i) Return the string representing a character whose Unicode code point is the integer i

Let's go! 🚀

Whitespace: The visual guide

Whitespace is not just a formatting choice; it's a visual guide for developers. Avoid one-liner tricks that may save space but sacrifice readability. Use indentation consistently to indicate code blocks and create a visual hierarchy within your code.

def cc(s, k):
    r = ""
    for i in s:
        if i.isalpha():
            if i.islower(): # good ol if statement instead of tenary
                r += chr((ord(i) + k - 97) % 26 + 97)
            else:
                r += chr((ord(i) + k - 65) % 26 + 65)
        else:
            r += i
    return r
# add line breaks between sections
t = "readable code?"
ct = cc(t,3)

print(f'{t} encrypted => {ct}')

Variable Names: The art of clarity

Picking descriptive variable names is like giving your code a friendly tour guide. When names are straightforward and welcoming, your code becomes a pleasant journey for anyone reading it.

It would help if you embraced a consistent naming convention across your codebase. Whether it's CamelCase or snake_case, be consistent to enhance readability.

Don't shy away from lengthy variable names if they accurately describe the content. A variable named user_input is far more informative than u_i. Descriptive names reduce the need for excessive comments, making your code self-explanatory.

For variables that represent a boolean value indicating true or false, it is advisable to use a naming convention that includes the "is" prefix.

ALPHABET_SIZE = 26
LOWER_A_ASCII = ord('a')
UPPER_A_ASCII = ord('A')

def caesar_cipher(text, shift_key):
    result = ""
    for char in text:
        if char.isalpha():
                if char.islower():
                    result += chr((ord(char) + shift_key - LOWER_A_ASCII) % ALPHABET_SIZE + LOWER_A_ASCII) 
                else :
                    result += chr((ord(char) + shift_key - UPPER_A_ASCII) % ALPHABET_SIZE + UPPER_A_ASCII)
        else:
            result += char
    return result

text = "readable code?"
cipher_text = caesar_cipher(text,3)

print(f'{text} encrypted => {cipher_text}')

We also replaced our code's "magic numbers" with constants ALPHABET_NUMBER, LOWER_A_ASCII, and UPPER_A_ASCII.

Functions: The power of modularity

Functions in your code should have a single responsibility, encapsulating a specific task. The name of a function should precisely convey what it does. Break down your code into smaller, reusable functions. This not only enhances readability but also promotes maintainability and reusability.

ALPHABET_SIZE = 26
LOWER_A_ASCII = ord('a')
UPPER_A_ASCII = ord('A')

def shift_letter(char, shift_key):
    if char.islower():
        return chr((ord(char) + shift_key - LOWER_A_ASCII) % ALPHABET_SIZE + LOWER_A_ASCII)
    elif char.isupper():
        return chr((ord(char) + shift_key - UPPER_A_ASCII) % ALPHABET_SIZE + UPPER_A_ASCII)
    else:
        return char

def caesar_cipher(text, shift_key):
    result = ""
    for char in text:
            result += shift_letter(char, shift_key)
    return result

text = "readable code?"
cipher_text = caesar_cipher(text,3)

print(f'{text} encrypted => {cipher_text}')

To comment or not to comment?

Comments are a double-edged sword. While they can be helpful, they are often overlooked and must be updated, leading to confusion. Prioritize writing self-explanatory code, using comments sparingly for complex algorithms or unconventional solutions.

ALPHABET_SIZE = 26
LOWER_A_ASCII = ord('a')
UPPER_A_ASCII = ord('A')

def shift_letter(char, shift_key):
    '''
    "The normalization step (using LOWER_A_ASCII and UPPER_A_ASCII)
    is employed to adjust the ASCII values of letters, 
    ensuring that they are shifted within the
    range of 0 to 25, corresponding to the positions in the alphabet.
    ''' 
    # Check if the character is a lowercase letter 
    if char.islower():
        return chr((ord(char) + shift_key - LOWER_A_ASCII) % ALPHABET_SIZE + LOWER_A_ASCII)
    # Check if the character is an uppercase letter 
    elif char.isupper():
        return chr((ord(char) + shift_key - UPPER_A_ASCII) % ALPHABET_SIZE + UPPER_A_ASCII)
    else:
        # If the character is not a letter, return it unchanged 
        return char

def caesar_cipher(text, shift_key):
    result = ""
    for char in text:
        # Apply the shift to each character in the text 
        result += shift_letter(char, shift_key)
    return result

# Example usage 
text = "readable code?"
cipher_text = caesar_cipher(text,3)

print(f'{text} encrypted => {cipher_text}')

Our code looks cluttered because of the unnecessary comments. But, since we have used descriptive names, we should be able to trim out some comments.

After 🙂

ALPHABET_SIZE = 26
LOWER_A_ASCII = ord('a')
UPPER_A_ASCII = ord('A')

def shift_letter(char, shift_key):
    '''
    "The normalization step (using LOWER_A_ASCII and UPPER_A_ASCII)
    is employed to adjust the ASCII values of letters, 
    ensuring that they are shifted within the
    range of 0 to 25, corresponding to the positions in the alphabet.
    ''' 
    if char.islower():
        return chr((ord(char) + shift_key - LOWER_A_ASCII) % ALPHABET_SIZE + LOWER_A_ASCII)
    elif char.isupper():
        return chr((ord(char) + shift_key - UPPER_A_ASCII) % ALPHABET_SIZE + UPPER_A_ASCII)
    else:
        # If the character is not a letter, return it unchanged
        return char

def caesar_cipher(text, shift_key):
    result = ""
    for char in text:
        # Apply the shift to each character in the input string
        result += shift_letter(char, shift_key)
    return result

# Example usage 
text = "readable code?"
cipher_text = caesar_cipher(text,3)

print(f'{text} encrypted => {cipher_text}')

💡 In cryptography, a Caesar cipher ... is one of the simplest and most widely known encryption techniques. It is a type of substitution cipher in which each letter in the plaintext is replaced by a letter some fixed number of positions down the alphabet. For example, with a left shift of 3, D would be replaced by A, E would become B, and so on.

-Wikipedia

Consistency is key

Consistency ties all these tips together. Adopting a consistent coding style, variable naming convention, and commenting approach across your projects promotes a seamless reading experience for anyone who encounters your code.

Some tools help you with this. Use them. When writing Python code, I use autopep8, a tool that automatically formats Python code to conform to the PEP 8 style guide. A supporting VS code extension is available.

When I'm writing JavaScript 😅 Typescript, I use eslint and Prettier.

In conclusion, writing readable code is not just a best practice, it's a professional courtesy to your future self and collaborators. By implementing these tips, you'll produce code that works and is a pleasure to read and maintain.

How to identify color from an RGB value

Tebogo Nomnqa — Wed, 02 Nov 2022 17:25:03 +0000

This article is a supplement to the recent project I built Color Dash (formerly Guess the color game), you can play the game here and read about its making here.

edit: change game name to Color Dash

RGB color space

is a mathematical model used to represent color. Compromising of three channels: red, green, and blue. Each of these channels has a value between 0 - 255. The value represents how much of each color channel should be added together.

To identify the color represented by an RGB value, we first need to know the colors at their

purest forms

RGB(0,0,0) gives you black simply because there's no color.

and RGB(255,255,255) which is all of the colors combined gives you white.

red is rgb(256,0,0) ; green rgb(0,256,0); blue rgb(0,0,256)

basic color combinations of the three colors

red and green => yellow. Playing with just the two we get to brown and dark olive.

RGB(256,256,0) ; RGB(100,100,0); RGB(50,50,0)

red and blue => pink. Playing with just the two we get to purple

RGB(256, 0, 256) ; RGB(100, 0, 100) ; RGB(50, 0, 50)

green and blue (0,256,256) => aqua to teal, dark green

RGB(0,256,256) , RGB(0,100,100) , RGB(0,50,50)

👀 notice that as the values decrease, the color gets darker.

Now to put what we learned to good use

Example 1

given this random color code and other random colors
identify the correct color

( the code and the colors are taken from Color Dash😉 )

First We identify the dominating color hue(s). It is green with a whopping 110, followed by 53 blue and 17 red.

Of the 6 given colors, only three are green, but the correct type of green is the darker one because of 110. Remember as you go up to 255 the color gets lighter.

Example 2

Again we first identify the dominating color hue(s):
green with 235, blue with 217, and red with 157.

two colors dominate here, and we know that green and blue make aqua. so our best guess here is the one close to aqua. Which is the first color.

Conclusion

Now it's your turn. Apply these tips and see if you can break my high score of 60! If you also have any tips share them!✌️

The making of GuessTheColor Game

Tebogo Nomnqa — Tue, 01 Nov 2022 14:48:52 +0000

A nextJS game with its objective of identifying as many colors as you can in a given amount of time using RGB color codes.

In this article, I briefly describe how I built this game.

Source code available on github.

UI Design

When I started working on this project, only had an idea of the gameplay, where there is an RGB value and colors displayed on the screen, and the player has to select the color that matches the RGB value.
I also thought of a time constraint. With that in mind, I listed the UI design goals:

Display the RGB code to be guessed
6 random colors to choose from
score
timer

I decided to use ChakraUI for the UI; this decision rests on the fact that it is easy to use and you can create beautiful prototypes faster.

I forked the chakra Figma UI kit, played around with the components, and followed the design goals.

Here are the final versions

Start page

Play page

Game over modal

sidenote: previous iterations are also available on the Figma file 🙈

Development

Now that I knew what I wanted to build, I decided on the tech stack.

The project follows the bullet-proof react architecture principles. This is an amazing resource that teaches you how to build scalable react apps, so much so that I created a nextjs-starter-pack template based on these principles.

For the front end, I used ... wait for it .... NextJS.
ChakraUI for the UI
Typescript for static testing
For all the user storage needs like saving the high score, LocalStorage to the rescue 🚑.
Vercel for deployment!
Deciding to use the Git Feature Branch Workflow - which is basically creating a branch for each feature and then merging to the main branch, influenced my coding action plan.

I broke up my design into small features.
Started with the start page and broke it down into these components:

Highscore
Name of the game
Play Button

The play page

Infobar
color blocks
game over modal

here's my commit history 🙈

The favorite feature I loved to implement was the random color blocks, and ironically, that's where my most annoying bug also came from

Seeing these random colors pop up was pretty cool ...

but also a nasty error popped up every time I reloaded the page.

I found myself reading about Schrodinger's cat 😂😭. It was used to explain how React Hydration works in this awesome article.

So the cause of my pain was the random generation of the colors. On the server, it would generate a set of colors and pick a random color and display its RGB code, and also the client would generate another set of colors and pick another random color's RGB code to be displayed. This caused a mismatch. The best solution was randomly picking the color to be guessed only on the client side.

UseEffect( ) to the rescue! 🚑

Colorblocks.tsx

useEffect(() => {
    setCorrectColor(colors[Math.floor(Math.random() * NUM_COLORS)]);
  }, [colors]);

Remarks

If you want to 'finish' a side project, don't try to build it to its full potential in one go. Rather simplify it to its bare minimum and add new features later on.

What's next?

The game is at its bare minimum, and I have a few( a lot ) features I want to add
some of them are

Help / how to play page
Dark mode 🌙 because why not?
A penalty system since you have 3 tries. If you get the color right on your first try, you get 10 points, 2nd try is 5 points, and 3rd try is 2 points.
Difficulty modes something like a beginner, Amateur, and expert mode

Conclusion

Really enjoyed building this project! Give the game a go and see if you can beat my high score of 60 😂.
You can find my tips on identifying the colors from an RGB value here✌️.

How to add privacy-friendly analytics to NextTS

Tebogo Nomnqa — Thu, 10 Mar 2022 14:44:56 +0000

Overview

Privacy-friendly web analytics track a website's usage, gathering insightful data from visitors without collecting personal information.
Goat Counter is my favorite tool that gets the job done. In this article, we will learn how to set it up and use it on a website that uses NextTS.

GoatCounter Dashboard

✅ Lightweight
✅ easy to use
✅ GDPR compliant
✅ can self-host
✅ hosted free for non-commercial websites

What we are going to do

get your Goat counter URL code
inject Goat Counter js script
Listen for route changes
create a useAnalytics custom hook

1. Get your Goat counter URL code

by heading over to goatcounter.com/signup and fill-up the form to create your account

and once you have your code save it as an environment variable.

// /.env.local
NEXT_PUBLIC_GOAT_COUNTER_CODE = yoursupersecretcode

2. Inject Goat counter script

using the nextJS script component. You can place it anywhere you want. I prefer to place it on the app component.

// pages/_app.tsx
import Script from 'next/script'
...
  <Script
    data-goatcounter={`https://${process.env.NEXT_PUBLIC_GOAT_COUNTER_CODE}.goatcounter.com/count`}
     data-goatcounter-settings='{"allow_local": true}'
     src="//gc.zgo.at/count.js"  />
...

💡 the attribute allow-local allows requests from local addresses (localhost, 192.168.0.0, etc.) for testing the integration locally. You will have to remove it when done testing.

3. Listen for route changes

to inform GoatCounter whenever a user navigates to a different page. next's router events to the rescue.

// src/hooks/useAnalytics.ts
import { useRouter } from 'next/router'
import { useEffect } from 'react'

// make typescript happy
declare global {
  interface Window {
    goatcounter: any
  }
}

export function useAnalyticsInstance() {
  const router = useRouter()
  useEffect(() => {
    const onRouteChangeComplete = () => {
      if (window.goatcounter === undefined) return
      window.goatcounter.count({
        path: location.pathname + location.search + location.hash,
      })
    }

    router.events.on('routeChangeComplete', onRouteChangeComplete)

    return () => {
      router.events.off('routeChangeComplete', onRouteChangeComplete)
    }
  }, [router.events])
}

We then import this hook into our app component.

// src/pages/_app.tsx
...
import { useAnalyticsInstance } from "../hooks/useAnalytics";

function MyApp({ Component, pageProps }: AppProps) {
  useAnalyticsInstance();
  return (
...
  );
}

export default MyApp;

4. create a useAnalyticsEvent custom hook

to track any action your user takes. Take a look at the following example code that shows the useAnalyticsEvent hook in action, tracking the number of times someone clicked the 'count' button.

// src/components/Example.tsx
import React, { useState } from 'react';
import { useAnalyticsEvent } from "../hooks/useAnalytics";

function Example() {
  const [count, setCount] = useState(0);
  const { trackCustomEvent }  = useAnalyticsEvent();

const increment = () => {
    setCount(count + 1 );
    trackCustomEvent({eventName:'clicked_counter_incrementer', 
    eventTitle:'increment_counter'
    });
}

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => increment()}>
        Click me
      </button>
    </div>
  );
}

Here is the implementation!

// src/hooks/useAnalytics.ts
export function useAnalyticsEvent() {
  function trackCustomEvent({
    eventName,
    eventTitle,
  }: {
    eventName: string
    eventTitle?: string
  }) {
    if (window.goatcounter === undefined) return
// still counting just like we do for route changes
    window.goatcounter.count({
      path: eventName, 
      title: eventTitle || eventName,
// only this time the event property is set to true
      event: true,
    })
  }

  return { trackCustomEvent }
}

Test

fire up your local server, go to yoursuperscretcode.goatcounter.com and look for any hits!

The screenshot shows the number of times the count button from the Example code has been clicked

💡 Now that you have tested that everything is working correctly, on the settings page (GoatCounter dashboard ), under the track section, you can ignore your IP from being tracked for dev purposes.

Acknowledgements

TheItalianDev - How to add google analytics to nextjs

Conclusion

We learned how to set up Goat counter to track the number of page visits, views, and custom events without collecting any personal data from our visitors. Awesome.

Questions? suggestions? let me know in the comments!

How to turn your react-app into a PWA

Tebogo Nomnqa — Wed, 24 Nov 2021 18:18:20 +0000

If you have known beforehand that you want your react-app to be a PWA(Progressive Web App) you could have used the create-react template pwa like so :

npx create-react-app my-app --template pwa

But you didn't😁So here we are.

In this article, I will show you how to turn your react app into a PWA.

Let's go 🚀

1. Add workbox dependencies

workbox is a library that helps you to deal with service workers.
Add the following into your package.json file

...
 "dependencies": {
   ...
    "workbox-background-sync": "^5.1.3",
    "workbox-broadcast-update": "^5.1.3",
    "workbox-cacheable-response": "^5.1.3",
    "workbox-core": "^5.1.3",
    "workbox-expiration": "^5.1.3",
    "workbox-google-analytics": "^5.1.3",
    "workbox-navigation-preload": "^5.1.3",
    "workbox-precaching": "^5.1.3",
    "workbox-range-requests": "^5.1.3",
    "workbox-routing": "^5.1.3",
    "workbox-strategies": "^5.1.3",
    "workbox-streams": "^5.1.3"
  },
...

install the packages using your favourite package manager by typing this on your terminal and pressing enter

npm / yarn install

2. create src/serviceWorkerRegistration.js

Copy and paste the following to the file

// This optional code is used to register a service worker.
// register() is not called by default.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.

// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://cra.link/PWA

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    // [::1] is the IPv6 localhost address.
    window.location.hostname === '[::1]' ||
    // 127.0.0.0/8 are considered localhost for IPv4.
    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
);

export function register(config) {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    // The URL constructor is available in all browsers that support SW.
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
      // from what our page is served on. This might happen if a CDN is used to
      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
      return;
    }

    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      if (isLocalhost) {
        // This is running on localhost. Let's check if a service worker still exists or not.
        checkValidServiceWorker(swUrl, config);

        // Add some additional logging to localhost, pointing developers to the
        // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'This web app is being served cache-first by a service ' +
              'worker. To learn more, visit https://cra.link/PWA'
          );
        });
      } else {
        // Is not localhost. Just register service worker
        registerValidSW(swUrl, config);
      }
    });
  }
}

function registerValidSW(swUrl, config) {
  navigator.serviceWorker
    .register(swUrl)
    .then((registration) => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        if (installingWorker == null) {
          return;
        }
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the updated precached content has been fetched,
              // but the previous service worker will still serve the older
              // content until all client tabs are closed.
              console.log(
                'New content is available and will be used when all ' +
                  'tabs for this page are closed. See https://cra.link/PWA.'
              );

              // Execute callback
              if (config && config.onUpdate) {
                config.onUpdate(registration);
              }
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.');

              // Execute callback
              if (config && config.onSuccess) {
                config.onSuccess(registration);
              }
            }
          }
        };
      };
    })
    .catch((error) => {
      console.error('Error during service worker registration:', error);
    });
}

function checkValidServiceWorker(swUrl, config) {
  // Check if the service worker can be found. If it can't reload the page.
  fetch(swUrl, {
    headers: { 'Service-Worker': 'script' },
  })
    .then((response) => {
      // Ensure service worker exists, and that we really are getting a JS file.
      const contentType = response.headers.get('content-type');
      if (
        response.status === 404 ||
        (contentType != null && contentType.indexOf('javascript') === -1)
      ) {
        // No service worker found. Probably a different app. Reload the page.
        navigator.serviceWorker.ready.then((registration) => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        // Service worker found. Proceed as normal.
        registerValidSW(swUrl, config);
      }
    })
    .catch(() => {
      console.log('No internet connection found. App is running in offline mode.');
    });
}

export function unregister() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready
      .then((registration) => {
        registration.unregister();
      })
      .catch((error) => {
        console.error(error.message);
      });
  }
}

3. create src/service-worker.js

copy and paste the following

/* eslint-disable no-restricted-globals */

// This service worker can be customized!
// See https://developers.google.com/web/tools/workbox/modules
// for the list of available Workbox modules, or add any other
// code you'd like.
// You can also remove this file if you'd prefer not to use a
// service worker, and the Workbox build step will be skipped.

import { clientsClaim } from 'workbox-core';
import { ExpirationPlugin } from 'workbox-expiration';
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

clientsClaim();

// Precache all of the assets generated by your build process.
// Their URLs are injected into the manifest variable below.
// This variable must be present somewhere in your service worker file,
// even if you decide not to use precaching. See https://cra.link/PWA
precacheAndRoute(self.__WB_MANIFEST);

// Set up App Shell-style routing, so that all navigation requests
// are fulfilled with your index.html shell. Learn more at
// https://developers.google.com/web/fundamentals/architecture/app-shell
const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
registerRoute(
  // Return false to exempt requests from being fulfilled by index.html.
  ({ request, url }) => {
    // If this isn't a navigation, skip.
    if (request.mode !== 'navigate') {
      return false;
    } // If this is a URL that starts with /_, skip.

    if (url.pathname.startsWith('/_')) {
      return false;
    } // If this looks like a URL for a resource, because it contains // a file extension, skip.

    if (url.pathname.match(fileExtensionRegexp)) {
      return false;
    } // Return true to signal that we want to use the handler.

    return true;
  },
  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
);

// An example runtime caching route for requests that aren't handled by the
// precache, in this case same-origin .png requests like those from in public/
registerRoute(
  // Add in any other file extensions or routing criteria as needed.
  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
  new StaleWhileRevalidate({
    cacheName: 'images',
    plugins: [
      // Ensure that once this runtime cache reaches a maximum size the
      // least-recently used images are removed.
      new ExpirationPlugin({ maxEntries: 50 }),
    ],
  })
);

// This allows the web app to trigger skipWaiting via
// registration.waiting.postMessage({type: 'SKIP_WAITING'})
self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

// Any other custom service worker logic can go here.

4. Register the service worker on src/index.js

...
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorkerRegistration.register();

That's all you need to do. Now for

Testing

if it actually worked. Which I bet you it did.

Here is a screenshot of the service worker being detected by chrome devTools.

to view this first build your app by running

npm / yarn build

and serve it by:

serve -s build

that's if you have serve already installed.

and open up devTools ( ctrl + shift + I ) -> Applications -> Service Workers

Conclusion

You manually turned your react-app into a PWA by registering a service worker.🎉

Questions or suggestions? Let me know in the comments.

5 favourite chrome extensions I use as a web dev

Tebogo Nomnqa — Thu, 18 Nov 2021 17:53:00 +0000

the web store is filled with lots of extensions that perform almost all tasks you can think of. In this article, I have listed my favourite 5 of these that have helped me become a better web developer.

edit: replaced 4.Fake Filler with daily.dev

Here we go!

5. ColorZilla

allows you to easily extract all used colors on a web page and displays them nicely for you.

what I like the most is the eyedropper tool. You can use it to extract a color( hex value gets copied to clipboard) from anything opened by the browser e.g web pages, images, and even videos.

4. daily.dev

A personalized news feed right there on your homepage. As someone who enjoys reading articles and also writing them, daily.dev is amazing. It keeps me updated and a day never passes by without reading an interesting article.

3. Forest

has increased my productivity greatly by utilizing the Pomodoro technique. it is a method used to stay mentally fresh and focused.

With forest, you set a timer with how many minutes you wish to focus for, and a tree gets planted in that period. If you successfully focus for that amount of time, a virtual tree successfully gets planted, if not it dies.

A great feature is that during focus mode/planting time all websites are blocked and only the ones you have allowed before starting to plant can be accessed.

2. Responsive Viewer

is an absolute gem created by Solaiman Kmail. As the name suggests, it gives you the superpower of viewing a web page in different screen sizes in one place at the same time.

A great tool to see if your website is responsive and also functions as expected, aided by cool features like syncing clicks and scrolling and taking screenshots.

1. Lighthouse

an essential extension all web developers need in their arsenal. Lighthouse audits your website/web app and gives a score out of 100 for these five categories: SEO, Accessibility, Performance, Best Practices, and Progressive Web App.

Lighthouse tells you what you are doing right and wrong. It goes the extra mile and gives you suggestions to improve your website.

Conclusion

There you have it. These are my favourite extensions I use most of (if not all) the time. What about you?

How to generate unique numbers using Fisher-Yates Algorithm with Java

Tebogo Nomnqa — Wed, 01 Sep 2021 19:37:02 +0000

In this article, we will be writing a java program that implements the paper and pencil method of the Fisher-Yates algorithm to generate nth unique numbers.

You can also use any list of numbers (or anything else it doesn't matter ) to shuffle their sequence.

But first ...

What is this fish?

The Fisher-Yates shuffle is an algorithm named after Ronald Fisher and Frank Yates, and it is used to shuffle a sequence. Time Complexity: O(n). The main idea is that imagine you have ordered numbers written on a scratch paper, and you randomly strike out a number and write it down on another piece of paper. You do this until no unstruck number remains. The order in which the numbers are written is your shuffled sequence.

Here we go! 🚀

1. Start by declaring the variables you will use

throughout the program

int n = Integer.parseInt(args[0]) ; // amount of numbers to generate
int k; // random index of unstruckNums
ArrayList<Integer> unstruckNums = new ArrayList<Integer>();
ArrayList<Integer> results = new ArrayList<Integer>();

2. Fill the UnstruckNums list with numbers

from 0 to n (exclusive)

for (int i = 0; i < n; i++) {
    unstruckNums.add(i);
}

Now, what we want to do is strike out random numbers from the unstruckNums list and add them to a separate list which is the results. To achieve this we

3. generate a random index k

which is between 0 and the amount of unstruckNums remaining

for (int i = 0; i < n; i++) {
    // k represents the index of the number we want to strike out from the unstruckNums
    k = (int) Math.floor(Math.random() * (unstruckNums.size()));
}

4. Add the number at index k to our result List

and strike it out from the unstruckNums list.

for (int i = 0; i < n; i++) {
    k = (int) Math.floor(Math.random() * (unstruckNums.size()));
    results.add(unstruckNums.get(k));
    unstruckNums.remove(unstruckNums.get(k)); 
}

That's it, your done. Print out the results

 System.out.println(results);

An example:

@tebza> javac UniqueNums.java
@tebza> java UniqueNums.java 12
[6, 1, 0, 5, 4, 10, 2, 11, 3, 8, 9, 7]

Here is the full code:

import java.util.ArrayList;

public class UniqueNums{
    public static void main(String[] args) {
        int n = Integer.parseInt(args[0]) ; // amount of numbers to generate
        int k; // random index of unstruckNums
        ArrayList<Integer> unstruckNums = new ArrayList<Integer>();
        ArrayList<Integer> results = new ArrayList<Integer>();
        // Fill the UnstruckNums list with numbers from 0 to n
        for (int i = 0; i < n; i++) {
           unstruckNums.add(i);
        }
        for (int i = 0; i < n; i++) {
            // k represents the index of the number we want to strike out from the unstruckNums
           k = (int) Math.floor(Math.random() * (unstruckNums.size()));
           results.add(unstruckNums.get(k));
           unstruckNums.remove(unstruckNums.get(k)); 
      }
        System.out.println(results);
   }
}

Conclusion

The fisher-yates shuffle is a simple algorithm used to shuffle the sequence of lists. We have used it to shuffle an ordered list of numbers, to generate a list of unique numbers.