RSS Feed

2025, A Year In My Life

Thu, 01 Jan 2026 08:00:00 GMT

In 2025, I learned the quiet power of slowing down. Not as an act of giving up, but as a deliberate choice—to choose myself, to stop sprinting toward imaginary finish lines, and to trust consistency over intensity.

This was not a loud year. It was a grounding one.

Moments That Mattered

One of the clearest reflections of this shift showed up in my work. I redesigned my personal website; this website you're currently on—not just a visual refresh, but a structural rethink. Cleaner, calmer, more intentional. I created space for both sides of me to coexist: the developer and the creative. The subtle Dev vs. Creative mode wasn’t a gimmick; it was an acknowledgment that I don’t need to flatten myself to fit into one box.

At work, I also introduced ideas I’m genuinely proud of. I worked on interesting projects, with the highlights being the Listing Availability Calendar, Neighbourhood highlights and a company-wide AI hackathon in collaboration with Google.

Another moment asked me to step forward. I was featured in Easy German video—something I had previously talked myself out of. The first time a friend told me about the meetup, I said no, convinced I wasn’t “good enough” to speak German on camera. The second time, I said yes. Was I nervous? Absolutely. Could I have spoken better without a camera pointed at me? Definitely. But I showed up anyway. And that mattered more. I learned that courage doesn’t always feel brave; sometimes it just feels like not backing out.

When it comes to language learning, February marked the completion of my Duolingo lessons, and July brought a bigger milestone: finishing German B2. With that came a decision—I’m done with traditional classroom learning. From here on, I’ll continue learning passively, through conversations, media, and daily life. One clear takeaway from using Duolingo is that it works best not as a sole learning tool, but as a way to reinforce existing knowledge and gradually expand vocabulary.

Another grounding moment came in the form of permanence: receiving my German Permanent Residency (Niederlassungserlaubnis). It was more than paperwork. It was a sense of belonging—of roots quietly growing beneath the surface.

I also spent less time on social media—a small change with an outsized impact. My mind felt clearer. My attention returned. I was reminded that not everything needs commentary. And somewhere in between all this, I started a new chapter - a subtle shift that simply felt right.

Travel added texture to the year. Copenhagen (for a second time), Malmö, Paris—and a constellation of German cities: Leipzig (for the third time), Frankfurt (Oder), Cologne, Düsseldorf, Bonn, Hamburg (for a second time), and Bremen. Each place reminded me that movement widens one's perspective.

Aside from Amsterdam, Copenhagen is the second city where I noticed people gorgeously dressed in suits while cycling. In the city center, I couldn’t help but notice Tivoli everywhere—from Tivoli Gardens to Tivoli Park and even the food court.

Paris, on the other hand, taught me that it isn’t always what it’s imagined to be. Trains get overcrowded, movement isn’t easy for people carrying baby strollers due to narrow train station barriers, and many stations require long climbs up and down staircases without escalators or elevators to fall back on. It also wasn’t possible to get a multi-day tourist pass, which meant paying a new fare each time one exited and re-entered a station or boarded a bus. A ticket agent mentioned that the city has phased out paper tickets, leaving tourists with a paid Île-de-France plastic card instead. Still, some of the sights like Eiffel tower, Montmartre, Notre-Dame Cathedral, Louvre etc. made the trip worthwhile.

At Bremen’s market square, I saw a reminder of The Bremen Town Musicians, the German fairy tale by the Brothers Grimm—a small but meaningful moment of cultural familiarity.

Conscious Non-Choices

I didn’t prepare for or write German C1. The motivation faded, and I let it go instead of forcing it. I didn’t enroll in driving school either—the timing didn’t feel right. Getting a German driver’s license as a first-time applicant can cost anywhere between €2,500 and €5,000 or more, depending on school rates and how many times the exam needed to be repeated. And I didn’t exercise as consistently as I promised myself I would, but I found other ways to stay active—like completing a 19.2 km group hike.

These weren’t failures so much as negotiations with my energy and priorities. Letting some goals rest made space for others to breathe.

What This Year Taught Me

This year showed me that progress doesn’t have to be dramatic to be real. That choosing myself sometimes looks like saying no, slowing down, or stopping halfway and deciding that’s enough—for now.

I learned that consistency doesn’t shout. It whispers. It shows up quietly, again and again, without demanding applause.

Looking Ahead

At the end of 2026, I want to be able to say this: I kept my life simple, stayed fit, made more meaningful connections, and set my priorities clear.

If 2025 was about grounding, then 2026 will be about building—carefully, intentionally, and without losing myself in the process.

Here’s to living—not rushing the years ahead. 🥂✨

Accessibility as Core Architecture

Tue, 30 Dec 2025 06:00:00 GMT

Your product isn’t done without accessibility. If accessibility isn’t considered from the start, someone is being excluded by default. Accessibility is a right, not a privilege.

Yet accessibility is often treated like a checklist item — something to “add later.” A feature to ship after the "real work" is done, or a compliance task to rush through.

That mindset is flawed. Features are optional. Accessibility isn’t.

Imagine this Scenario

A user opens your web app to make a booking. They navigate using the keyboard instead of a mouse. Suddenly, they’re stuck. Focus jumps unpredictably, and there’s no clear way forward.

At the same time, another user tries to read a thought-provoking article you just published — using a screen reader. The content isn’t readable; headings aren’t announced correctly. Navigation is confusing.

The feature technically works. But for these users, your product is unusable. That’s real revenue lost due to negligence. This is what happens when accessibility is treated as an afterthought.

In Germany alone, around 7.9 million people have a recognized severe disability, amounting to roughly 9–10 % of the population — many of whom may rely on keyboards, screen readers, or alternative input methods to access the web and may experience barriers on many digital interfaces. - Destatis

If a user can’t navigate your app with a keyboard, understand content with a screen reader, or interact with UI elements clearly, the product is broken for them. That’s not missing functionality, that’s exclusion.

What Accessibility Really Means

Accessibility means designing and building products that everyone can use, including people with:

Visual impairments
Hearing loss
Motor limitations
Cognitive differences
Temporary disabilities (like a broken arm)
Situational constraints (bright sunlight, noisy environments, slow devices)

Accessibility isn’t about edge cases. It’s about real people, in real situations every day.

Legal and Business Reality

Accessibility isn’t just ethical, it’s practical.

Many regions enforce accessibility standards (like WCAG)
Lawsuits over inaccessible websites are increasing.
1,202 digital accessibility-related lawsuits were filed in the United States in 2024. (Source: Accessibility.com)
Public sector and enterprise clients require compliance
Excluding users means losing customers

Building accessibility from the start reduces legal risk and expands your audience.

What Accessibility Means for Developers

For developers, accessibility shows up in everyday decisions. It starts with choosing the right elements. These decisions shape how components are built and how users experience your application.

Using semantic HTML instead of div-heavy markup
Making sure all interactions work with a keyboard
Labeling inputs and buttons clearly
Managing focus when content changes
Providing meaningful error messages.
Avoid hiding error messages with display: none — use conditional rendering or visibility

<!-- Valid input state -->
<label for="email">Email</label>
<input id="email" type="email" />

<!-- Invalid input state  -->
<label for="email">Email</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<div id="email-error" class="error">Please enter a valid email address</div>

Notice that aria- wasn't needed in the valid input state. Native HTML already solves keyboard interaction, focus behavior and screen reader announcements.

The “ARIA Everywhere” Trap

When accessibility issues surface, a common reaction is to add ARIA attributes everywhere.

<div role="button" tabindex="0" aria-label="Submit form">Submit</div>

This often feels like progress, but it usually isn’t.

ARIA is not a replacement for semantic HTML. Misusing it can actually make accessibility worse by overriding native browser behavior or confusing screen readers.

The first rule of ARIA is simple:

Don’t use ARIA if native HTML already does the job.

The Real Cost of Adding Accessibility Later

When accessibility is postponed, it becomes expensive and fragile.

Teams end up:

Rewriting components that weren’t built semantically
Refactoring layouts to support keyboard navigation
Patching issues to meet compliance deadlines
Introducing regressions while fixing basic flows

This creates accessibility debt - technical debt that directly impacts users. Just like performance or security, accessibility is hardest to fix after the foundation is already laid.

Accessibility Improves Products for Everyone

Accessible products are better products. Here’s the part many teams miss:

Clear headings help screen readers and skimming users
Good color contrast improves readability for everyone
Keyboard navigation benefits power users
Descriptive error messages reduce support tickets
Simple language improves comprehension across cultures

Accessibility forces clarity, and clarity makes systems stronger.

Accessibility as Core Architecture

Accessibility decisions shape architecture from the start:

How focus and state are managed
How layouts adapt and respond
How interactions are announced to assistive technologies.

These are foundational choices. Treating accessibility as core architecture ensures inclusive behavior is built in, not bolted on.

Accessibility also isn’t owned by one role. It’s a shared responsibility:

Designers ensure clarity, contrast, and structure
Developers use semantic HTML and accessible components
Product teams prioritize inclusive user flows
Leaders set accessibility as a non-negotiable standard

When everyone owns it, accessibility becomes natural, not forced.

Final Thought

Accessibility is not a feature to add later.

It’s the foundation for building software that works for everyone — keyboard users, screen reader users, mobile users, and people facing temporary or situational limitations.

Start with it, design for it and ship with it, because inclusion should never be optional.
Read my article on Building Accessible Web Apps to learn more.

How toSorted() Crashed Our Web App - And How We Fixed It

Thu, 25 Sep 2025 00:00:00 GMT

A few weeks ago, we ran into an unexpected issue that caused our Listing Availabilty page to crash for some landlords. This is the story of how a modern convenience bit us in the back, how we identified the culprit, and what we did to fix it.

What Happened

In modern JavaScript, Array.prototype.toSorted() is a safer alternative to Array.prototype.sort(). Unlike sort(), which mutates the original array, toSorted() returns a new, sorted copy of the array.

That immutability is a big win for avoiding side effects in functional programming. Naturally, we introduced it in a recent pull request.

We had a block of code that looked like this:

const sortedBlocks = blocks?.toSorted(sortByCreatedDateDescending);

But here’s the catch:

toSorted is part of the ECMAScript 2023 specification.
Many older browsers, and even some users on slightly outdated versions of Chrome, Firefox or Safari, don’t support it.
So when those users hit our page, their browsers threw an error and the page broke.

How We Discovered the Issue

Everything worked fine in development, staging, and production environments when we tried to reproduce it on our machines. This led us to question what could be peculiar to the landlord.

We decided to figure out the issue using Rollbar (our error monitoring tool); at first, I filtered using email:"..." to see the errors this specific user encountered within the timeframe the bug was reported and then I saw:

TypeError: e.toSorted is not a function

Digging deeper with Rollbar occurrences tab, I saw that about 25 other landlords face this issue which was supposedly meant to be low priority since we initially assumed based on the bug report that only one landlord experience it.

At this point, I suspected that toSorted() might be the issue. So I turned to my go-to compatibility checker: Can I use. A quick search for toSorted confirmed my suspicion:

❌ Not supported in versions of Chrome < 110, Safari < 16.0, and Firefox < 115.

As shown under Rollbar Detail section, the affected users had one thing in common: older browsers. The reported landlord was on Chrome 109.0.0.

Well, that explains the bug.

The modern toSorted() method was simply not available in older browsers. Unlike sort(), which has been supported since the earliest days of JavaScript, toSorted() is relatively new — and using it directly will throw a runtime error in unsupported environments.

The Fix

To fix the issue, I decided to revert to the good old sort() method, but with a defensive approach to preserve immutability:

// ❌ Crashes on old browsers
const sortedBlocks = blocks?.toSorted(sortByCreatedDateDescending);

// ✅ Works everywhere
const sortedBlocks = [...blocks].sort(sortByCreatedDateDescending);

By spreading the blocks array first, I avoid mutating the original array, mimicking the behavior of toSorted() — but using syntax that works across all browsers.

Once I deployed this fix, I used Browserstack to verify that the page doesn't crash anymore, and the Rollbar reports ceased.

Lessons Learned

Here are a few takeaways from this experience:

Always check browser compatibility when using newer JavaScript features. Can I use is your friend.
Don’t assume your development or staging environment matches production usage. You might be running the latest browser; your users might not.
Error monitoring tools are lifesavers. Without caniuse.com and Rollbar logs, this would’ve been much harder to debug.
When in doubt, use feature detection or fallback logic to gracefully degrade functionality.

Final Thoughts

Modern JavaScript brings tons of new features that make our code cleaner and more maintainable. But with great syntax comes great responsibility.

In our case, the shiny new toSorted() method was the culprit behind a pretty serious production issue — and a good reminder that backward compatibility still matters.

So the next time you're tempted to reach for a new feature, remember to ask: Can I use this?

Easy Way to Get the Number of Days in a Month

Fri, 25 Apr 2025 06:00:00 GMT

Working with dates in JavaScript has a bit of a reputation for being messy. The Date object isn’t the most intuitive thing in the language, and even a simple task like figuring out how many days are in a month can seem harder than it should be.

But here’s the good news: there's a surprisingly simple trick to get the number of days in any month using just one line of code. Let’s break it down in a way that makes sense, with examples.

Why is this Tricky?

It’s good to understand why this isn't as straightforward as you might think.

Some months have 30 days, some 31.
February has 28 or 29, depending on the year (leap years).

The solution is to use Day 0 to go backwards; JavaScript have date math magic we can use.

In JavaScript, you can create a Date object like this:

new Date(year, monthIndex, day);

Here’s the weird but useful part: if you set the day to 0, JavaScript gives you the last day of the previous month.

So if you want to find out how many days are in February 2024, this trick gives you the answer.

new Date(2024, 2, 0);

This doesn't give you a day in March, it gives you the last day of February. That’s February 29, 2024 — which is a leap year.

The One-Liner Magic

function getDaysInMonth(year, month) {
  return new Date(year, month, 0).getDate();
}

How It Works:

we count months from 1 (Jan = 1), but JavaScript uses 0-based months (Jan = 0).
So if you pass in (2024, 2), JavaScript interprets this as March 0, which gives you the last day of February.
.getDate() then pulls out the day of the month, which is your answer.

getDaysInMonth(2024, 2); // 29 (Leap year!)
getDaysInMonth(2023, 2); // 28
getDaysInMonth(2023, 1); // 31 (January)
getDaysInMonth(2023, 4); // 30 (April)

If you want to get days in May, pass in 5 (because month = 5 means June, and day 0 gives you the last day of May). It’s a bit odd at first, but once you get used to it, this method becomes second nature.

Final Thoughts

Date handling in JavaScript isn’t always intuitive, but little tricks like this can make your life easier. Whether you're validating forms, setting up calendars, or building scheduling tools, this method will save you time and confusion.

2024, A Year In My Life

Wed, 01 Jan 2025 08:00:00 GMT

If 2023 was the year that taught me the value of taking a step back to leap forward, then 2024 whispered an even deeper truth — life and relationships are all about perspective.

Writing: The Battle of Physique

If you know me well, you already know that writing is one of my quiet joys. Last year, I penned a few pieces, but one stood out — The Battle of Physique. It explored the judgmental nature of humans, the way we measure others by appearances before understanding their depths. It was a mirror, reflecting both my thoughts and the world around me.

Language: Cracking the Code

A little over two years in Germany, and the language was no longer just background noise — it was something I could finally grasp. And guess what? I aced my B1 German exam! I also wrote the German Citizenship exam (Einbürgerungtest) and got the perfect score 33/33 🥁

Each day, I push myself to improve, hoping that by this time next year, I’ll be weaving through conversations with even more confidence.

Music

In 2024, I casually explored music by taking guitar lessons. Along the way, I got the chance to play with a band, perform at Open Music Night, and record our own song, “S-Bahn Girl.”

Germany: A Shifting Perspective

My perception of Germany evolved dramatically over the past year. From the smelly, aggressive characters on steroids roaming the S and U-Bahn to the near-Kafkaesque bureaucracy of the health and public offices - things that shouldn’t be as complicated as they are. And let’s not even talk about the endless paperwork; for a country labeled as "first world," the intransparency of certain processes still baffles me.

Despite this shifted perspective, it still has a lot to offer.

Wanderlust Chronicles

4 countries and several German cities (Frankfurt, Görlitz, Würzburg etc.) explored — each offering its own unique experience.

Czech Republic: Visiting Prague for the second time felt familiar rather than new. Without the rush of first impressions, I noticed the city more quietly—its history, its rhythm, and the way it unfolds at a slower pace.
Austria: Walking through Salzburg felt like stepping into my childhood memories of The Sound of Music. Vienna, the world's most livable city, was lovely to be in, though I’m still trying to pinpoint exactly what keeps it at the top.
Belgium: Waffles, chocolate, and stunning architecture — what more could you ask for? Antwerp’s train station is a true architectural marvel, a blend of grandeur and precision. Meanwhile, Brussels’ station stood as a proud relic of the past, preserving the craftsmanship and heritage of the forefathers in the best way possible.
Luxembourg: A country that offers free public transport? Sign me up! Getting from one point to another was seamless and, more importantly, easy on the wallet.

What's Next?

2025 is a blank canvas, waiting to be painted with new stories, lessons, and adventures. Here’s to writing the best chapters yet 🥂✨

How to Create Code Snippets in VS Code

Thu, 07 Mar 2024 06:00:00 GMT

Visual Studio Code (VS Code) is a widely used source code editor that offers a variety of features to enhance developer productivity. One of such features is the ability to utilize code snippets, which can significantly streamline your coding experience. But do you know that you can create custom snippets?

I recently discovered this in an attempt to rewrite some old tests to Cypress. In this article, we will delve into the intricacies of creating and managing code snippets in VS Code.

What are Code Snippets?

Code snippets are reusable blocks of code that can be inserted into your files to expedite coding, thereby saving you time.

To see available snippets in VS Code, search for the Insert Snippet command in the Command Palette using the shortcut CMD + SHIFT + P or Ctrl + Shift + P for Windows.

Creating Custom Snippets

Use the shortcut CMD + SHIFT + P or Ctrl + Shift + P and type Configure User Snippets

Upon selecting "User Snippets," you'll be prompted to choose the language for which you want to create a snippet. You can also choose New Global Snippets file

Add the trigger for your custom snippet
In the opened JSON file, add a new snippet entry in the required format and save the file to apply the changes. VS Code uses JSON files to define snippets.

Setting Tab Completion and Triggering Snippets

VS Code allows you to customize how snippets are triggered.

To set up tab completion:

Open the settings.json file with the Preferences: Open User Settings (JSON) command in the Command Palette
Add "editor.tabCompletion": "on" between the two curly braces {} in the file and save

With tab completion configured, simply type the snippet trigger and press the Tab key to insert the snippet. From now onwards, typing cyref would insert the Cypress reference code snippet (// / <reference types="cypress" />) into our files.

Removing Snippets

Navigate to the snippet by searching for User Snippets command in the Command Palette
Locate the snippet in the JSON file
Delete the corresponding entry and save the file to remove the snippet

You can also choose to delete the file entirely if you only have one snippet configured. To do this, take note of the file location and run the commands below. In my case, the snippets are located in Library/Application Support/Code/User/snippets

➜  ~ cd Library/Application\ Support/Code/User/snippets
➜  ls # cyref.code-snippets // the output
➜  rm cyref.code-snippets

Conclusion:

Creating and managing snippets in Visual Studio Code can significantly enhance your coding workflow. By customizing snippets, adjusting tab completion settings, and removing unnecessary snippets, you can tailor your development environment to suit your specific needs.

Finding Incorrect Data Types with MongoDB Queries

Thu, 15 Feb 2024 06:00:00 GMT

Recently, we encountered an issue in our system where the internet connection speed was being stored incorrectly. Instead of always being saved as an integer, some values were stored as floating-point numbers (double).

This might sound small, but it led to inconsistent data and confusing behavior in our application.

The Background

Our field features.internetSpeed is supposed to represent internet speed in whole megabits per second. For example:

{
  "features": {
    "internetSpeed": 384
  }
}

However, during a review, we noticed that some listings had values like:

{
  "features": {
    "internetSpeed": 384.54
  }
}

This meant we had some records stored as doubles instead of integers.

Detecting the Problem

MongoDB stores numbers with a specific BSON type. Integers and doubles are different types. To confirm which records were affected, we used a query that checks the BSON type of the field:

{
  "features.internetSpeed": {
    "$type": 1
  }
}

Here’s what’s happening in this query:

features.internetSpeed → the field we’re inspecting.
$type: 1 → tells MongoDB to return only documents where this field is stored as a double.

By running this query, we quickly identified that 19 listings still had their internet speed saved as doubles although we stopped using this data type a while ago.

Why This Matters

Finding the affected documents by data type was crucial because:

It allowed us to quantify the issue (exactly 19 listings).
It gave us a clear target set for a migration script to fix.
It ensured that we weren’t just guessing—we had verified data from the database itself.

Lessons Learned

MongoDB $type is powerful: It’s not just about values, but about the underlying storage type.
Type enforcement matters: Even if values look right, the wrong type can lead to subtle bugs.
Monitoring data health: Queries like this should be part of regular audits when schema expectations change.

Conclusion

By leveraging MongoDB’s $type query operator, we were able to find all the records where the internet connection speed was incorrectly stored as a double. This gave us confidence to move forward with a migration, knowing we had full visibility into the scope of the problem.

Sometimes the fix starts not with code, but with asking the right question of the database.

How ESLint Made Our Codebase Breathe Again

Thu, 25 Jan 2024 00:00:00 GMT

Every engineer has had that moment: opening a file and being greeted by chaos. Lines of imports scattered in no particular order. Some duplicated, others grouped inconsistently — almost like a visual reminder of how many hands had touched the file over time.

That’s how it felt every time I opened a file in our frontend repositories. It worked, the code always ran. But it didn’t feel right; it was messy, inconsistent, and every new import added to the tangle.

And that’s where this story begins — not with a broken feature or a failing test, but with a quiet frustration and a small, simple goal:

Leave the codebase cleaner than I found it.

The Chaos of Imports

In the wild, our imports looked something like this:

import { Link } from 'react-router-dom';
import Toaster from '../Toaster';
import PropTypes from 'prop-types';
import React, { useState, useRef, useEffect, useCallback } from 'react';
import classNames from 'classnames';

Nothing technically wrong — but visually? Hard to scan, hard to maintain.

I imagined what it could look like instead:

import React, { useCallback, useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import classNames from 'classnames';
import Toaster from '../Toaster';

Same imports, different energy.

It reads naturally — from framework to libraries to internal components. You can almost feel the logic.

The Idea: Automate Boring Stuffs

That small spark led me to ESLint — specifically, its sort-imports and import/order rules.

The goal wasn’t just to enforce order; it was to encode our sense of craftsmanship into the code itself.

sort-imports ensures the items on each line stay sorted.

Using the configuration:

"sort-imports": [
      "error",
      {
        ignoreCase: true,
        ignoreDeclarationSort: true,
        ignoreMemberSort: false,
        memberSyntaxSortOrder: ["all", "single", "multiple", "none"],
        allowSeparatedGroups: false,
      },
    ],

import React, { useEffect, useState, useCallback } from 'react';

is corrected to

import React, { useCallback, useEffect, useState } from 'react';

import/order organizes entire groups — built-ins, externals, internals — like chapters in a well-structured book.

I configured them to follow this pattern:

[["builtin", "external"], "internal", ["parent", "sibling"]]

And because conventions matter, I gave react, react-dom, and PropTypes reserved spots at the top — the familiar trio that should always greet you when you open a React file.

"import/order": [
      "error",
      {
        groups: [["builtin", "external"], "internal", "parent", "sibling"],
        pathGroups: [
          {
            pattern: "react",
            group: "external",
            position: "before",
          },
          {
            pattern: "react-dom",
            group: "external",
            position: "before",
          },
          {
            pattern: "prop-types",
            group: "external",
            position: "before",
          },
        ],
        pathGroupsExcludedImportTypes: ["react", "react-dom", "prop-types"],
        "newlines-between": "never",
        alphabetize: {
          order: "asc",
          caseInsensitive: true,
        },
      },
    ],

The result? Code that looks and feels organized:

Every file started to breathe better.

The Fixing Marathon

I ran yarn lint --fix with the same nervous excitement as running tests after a big refactor. Some files cleaned themselves up perfectly. Others resisted. After the auto-fix, I was left staring at 225 stubborn files that needed manual care — one by one.

It wasn’t glamorous work, but it was meaningful. Each file I fixed became a little more readable, a little more consistent.

And consistency is contagious.

The Hidden Problem: Duplicate Imports

While working on the imports, I found another recurring issue — duplicate imports. Same package imported twice in the same file. Easy to miss, but messy and unnecessary.

Examples like these kept popping up:

import { useHistory } from 'react-router-dom';
import { useFeatureFlags } from '../../contexts/FeatureFlagContext';
import { Link } from 'react-router-dom';

So I added one more rule to our ESLint configuration:

"no-duplicate-imports": "error"

Now, ESLint not only helps us keep things tidy — it protects us from repeating the same mistakes.

Final Thoughts

At first glance, sorting imports doesn’t seem revolutionary. But it’s symbolic of something deeper: Care. When developers take time to improve the small things — the things no one notices until they’re wrong — they build a culture of pride and respect for the codebase.

Every lint rule, every refactor, every cleanup is a way of saying:

“I was here — and I left it better than I found it.”

2023, A Year In My Life

Mon, 01 Jan 2024 08:00:00 GMT

2022 taught me that the world is laden with so much goodness but we need to explore and not merely exist; 2023 taught me that not everything works the way we envisage and it's okay to rethink and re-strategize in order to achieve our goals. It also taught me that the adventure we look for in other places may be closer to us than we imagine.

Come with me on a short cruise to view a snapshot of my year.

Relationship ‍

Though I kept in touch with the connections I made in 2022 and made acquaintances with a few people, I was more in my own space in 2023; it gave room for retrospection.

Writing

I have to admit that I shouldn't feel unhappy for not doing a lot of writings in 2023. I spent my time doing useful things, so it was properly allotted. I'll write when I can.

I was able to write a poetry piece titled Yearnings Unveiled which explores people's disinterest when they ask the question “How are you?”.

Kudos to keeping this blog running for 5 years now. It's worth celebrating 🥳 🎉

Language

I spent a huge chunk of the last quarter improving my language skills um genau zu sein German. Manchmal verstehe ich es, aber ich kann meine Gefühle nicht so ausdrücken, wie ich es möchte. Ich muss mein Deutsch verbessern.

Travelling

I visited 3 countries - United Kingdom (London), Canada (Toronto and London Ontario) and Netherlands (Amsterdam) and learnt different things about the cities I explored and the people which is one way of broadening my horizon.

Got Featured

I had a chat with Deutsche Welle about my relocation and the challenges I face in my new environment.

Actually, based on my experience, there's no perfect country; each one come with its set of pros and cons. View the broadcast schedule.

What's Next?

It's a new chapter and I have plans for the year but who am I to say how things would go? I can only do my part and leave the rest.

A man's heart deviseth his way: but the Lord directeth his steps (Proverbs 16:9)

Cheers to more adventures 🥂✨🚀

Diagramming with Mermaid

Thu, 26 Oct 2023 06:00:00 GMT

Embarking on your coding journey often involves wrangling complex ideas and processes. Visualizing these concepts can be a game-changer, and that's where Mermaid diagrams come to the rescue. In this beginner-friendly guide, we'll explore the world of Mermaid diagrams, and showcase examples to get you started on the right track.

What is it?

Mermaid is a JavaScript based diagramming tool that transforms your text-based syntax into easy-to-understand diagrams. It supports various types of diagrams, such as flowcharts, pie charts, sequence diagrams, Git graphs, and more, making it easier to communicate and understand complex systems.

Why use it?

If you've ever struggled with updating process diagrams using tools like Draw.io or Excalidraw, Mermaid is here to make your life easier. Once you update the text, the diagram gets updated seamlessly. Mermaid diagrams are easy to create, share, collaborate on, maintain, and update.

Getting Started

The official live editor provides a playground to explore the possibilities..

To use this in GitHub or VSCode, enclose your code in triple backticks block and then specify mermaid as the code type ```mermaid ```

You need to download Markdown Preview Mermaid Support or any similar extension to enable you visualize the diagram in VSCode.

In Notion,

Open the document
Type /code or triple backticks (```) to use the code option
Update the code type to "Mermaid"
Type your flow in mermaid syntax and
Click on Preview to view the resulting diagram

Examples

Below are Markdown-inspired text definitions and the resulting Mermaid diagrams.

Flow chart

Explains how things get done, with steps shown as boxes and the order they happen, connected by arrows.

  flowchart LR
    A[Visit Registration Page] --Provide Details--> B[Submit Form]
    B -->|Validate and Store| C[Create Account]
    C -->|Send Confirmation Email| D{Is confirmation successful?}
    D -->|Yes| E[(User Registered)]
    D -->|No| F[User Not Registered]
    E -->|No| G([End])
    F -->|No| G([End])

The LR specifies the chart's direction (Left to Right). You can also choose TD for Top to Down arrangement. The alphabets represents the node ID and can be substituted with what you want to use as an identifier.

Sequence Diagram

Likened to a timeline that shows how different steps in a process happen one after the other.

    sequenceDiagram
    participant User
    participant Platform
    participant Course

    User ->> Platform: Login
    User ->> Platform: Browse Courses
    User ->> Course: Select Course
    Platform ->> Course: Retrieve Course Details
    Course ->> Course: Fetches Course from database
    Course -->> User: Return course details
    User ->> Platform: Enroll in Course
    Note left of User: Prevent multiple enrolment
    Platform ->> Course: Add User to Course
    Course -->> Platform: Enrollment Successful
    Platform -->> User: Confirmation Message

Mind map

Mind maps are like helpful doodles that make it easy to show and remember ideas. They're great for connecting information in a simple and understandable way.

mindmap
      root(Summer Vacation))
        Destinations
          Europe
            France(Paris)
            Italy(Rome)
          Asia
            Japan(Tokyo)
        Budget
          Airfare
          Hotels
          Food
        Activities
          Sightseeing
          Adventure Sports
        Accommodation
          Hotels
          Vacation Rentals

Conclusion

You've only begun to explore the world of Mermaid diagrams. Whether you're mapping out a project, documenting code, or clarifying a process, Mermaid simplifies it all. It's not just useful in corporate settings for brainstorming with your team or presenting processes to stakeholders; you can also apply it in your personal life for event planning and more.

Consider exploring other types of diagrams that Mermaid supports to enhance your project documentation and collaboration.

Trust works!

Thu, 17 Aug 2023 06:00:00 GMT

I recently read the book "Trust Works! Four Keys to Building Lasting Relationships" and would like to share my key take aways.

Trust Works! Four Keys to Building Lasting Relationships is a book written by Ken Blanchard, Cynthia Olmstead, and Martha Lawrence which focuses on the importance of trust in building and maintaining personal and professional relationships. Building trust takes a long time but it can be broken in a blink of an eye if the 4 concepts stated in the book are not applied.

The book hinges on the ABCD trust model which plays a huge role in cultivating trust. The model states that one should imbibe these behaviours written below inorder to build trust or clear misconceptions.

Able

Demonstrating competence in one's area of responsibility is crucial for building trust. When individuals are confident in your abilities, they are more likely to trust your judgment and decisions.

To Demonstrate competence, you have to:

Get quality results
Resolve problems
Develop skills
Be good at what you do
Get experience
Use skills to assist others
Be the best at what you do

Believable

Being open and transparent in communication, acting with integrity, admitting mistakes, and addressing concerns genuinely helps to establish a foundation of trust. When someone tells you something in confidence, keep it to yourself and not tell everyone that cares to listen.

To Act with integrity, you have to:

Keep confidences
Admit when you're wrong
Be honest
Don't talk behind backs
Be sincere
Be non-judgmental

Connected

Genuine concern for the well-being and success of others. Showing empathy, understanding, and support creates an environment where people feel valued and cared for, enhancing trust.

To show that you Care about others, you have to:

Listen well
Praise others
Show interest in others
Share about yourself
Work well with others
Show empathy for others
Ask for input

Dependable

Consistently delivering on promises and commitments. When individuals can rely on each other to follow through on their commitments, it builds a sense of dependability and reliability thereby fostering trust.

To show that you can be reliable, you have to:

Do what you say you'll do
Be timely
Be responsive
Be organized
Follow-up
Be consistent

Conclusion

By applying these behaviours that align with the 4 core elements of trust in your daily life, you would show people that you're Able through your deeds, Believable through your words and actions, Connected during conversations and Dependable when push comes to shove.

Accelerate

Thu, 27 Jul 2023 02:00:00 GMT

Accelerate, a book co-authored by Nicole Forsgren, Jez Humble, and Gene Kim delves into the world of software development, focusing on the principles of Lean, DevOps, and their impact on organizational performance. The book draws from extensive research to uncover the practices that separate high-performing teams from the rest.

It addresses the pressing need for organizations to adapt and excel in the rapidly evolving technological landscape and sets the stage for understanding why high-performing technology organizations are crucial for success in today's competitive markets.

TLDR;

Have transformational leadership.
Promote a culture of collaboration, trust, learning and experimentation. Culture predicts both delivery and organizational performance as it determines employees job satisfaction level.
Collaboration is key; who is on the team matters less than how team members interact and structure their work.
Never use velocity to measure team productivity or compare teams; use it to measure capacity. Teams have different contexts and when velocity is used as a measurent tool, teams inflate their estimates and focus on completing as many stories as possible at the expense of collaboration with other teams.
Get rid of deployment pain by adopting continuous integration and delivery.
Adopt Trunk-based development.
Failures should lead to inquiry, not scapegoating; don't punish employees for accidental human error, but rather treat it as an opportunity to improve observability and system guards to help prevent catastrophic failures.
There's no trade-off between speed and stability for high performing organizations.

Key Findings

The authors introduce the concept of the "Four Key Metrics" that are crucial for measuring and improving the performance of a software development team. These metrics are often known as DORA metrics and include:

Lead Time / Cycle Time: The time it takes to move from a code commit to a successfully deployed product. Shorter lead times signify faster and more efficient development processes.
Deployment Frequency: This metric gauges how often code is deployed to production. It is a crucial indicator of a team's agility and responsiveness to change. A high deployment frequency is associated with increased innovation and faster time-to-market.
Mean Time to Recovery (MTTR) / Time to Restore Service: The time it takes to recover from a service outage or failure. This is a critical metric that reflects a team's resilience and recovery capabilities. Rapid response to incidents is vital in maintaining a seamless user experience.
Change Failure Rate: The percentage of changes that result in a failure. Low failure rates are indicative of robust development practices; high-performing teams experience fewer failures when introducing changes, showcasing the robustness of their processes

Delivery lead time and deployment frequency measure the team's velocity while mean time to recovery and change failure rate measure the quality and stability of a project.

By systematically calculating these metrics, organizations can strategically direct management and development teams towards improvement opportunities, showcase the tangible impact of engineering efforts on business outcomes, and gain insights that facilitate well-informed decision-making, ultimately leading to the prompt delivery of value to customers.

Furthermore, Accelerate sheds light on pivotal practices and cultural elements crucial for achieving high performance. These include continuous integration, continuous delivery, observability, transformational leadership, and a culture characterized by collaboration, trust, learning, and experimentation.

Despite the acknowledged truth that people are an organization's greatest asset, they often find themselves treated as replaceable resources. The book underscores the significance of valuing employees, emphasizing that when individuals are treated with respect, they are motivated to go above and beyond, propelling the organization toward success. Notably, the text highlights innovative approaches adopted by industry giants, such as Google's 20% time policy, which grants employees a dedicated portion of their work week for personal projects, and IBM's THINK Friday initiative, reserving Friday afternoons for uninterrupted learning without meetings.

In the realm of leadership, the importance of transformational leaders is emphasized. These leaders possess a visionary outlook, inspire team members, stimulate intellectual growth, provide support, and commend performance.

A transformative leader:

Demonstrates a clear understanding of the team's goals and objectives.
Grasps the organization's Objectives and Key Results (OKRs).
Expresses positive sentiments about the team, fostering a sense of value among its members.
Encourages individuals to explore opportunities beyond their comfort zones.
Challenges team members to approach problems with fresh perspectives.
Considers the feelings and perspectives of team members before making decisions.

In essence, the cultivation of a transformational leadership approach is identified as essential for achieving superior organizational outcomes.

Conclusion

As organizations continue to navigate the challenges of the digital age, the principles outlined in Accelerate serve as a roadmap for achieving excellence in software delivery and organizational success. By focusing on the four key metrics and adopting best practices, teams can not only keep up with the rapidly evolving tech landscape but proactively drive advancements and innovative solutions.

A combination of tools like GitHub, Jira and Swarmia or related tools provide a comprehensive way to measure developer productivity if you don't want to write scripts to calculate these.

2022, A Year In My Life

Sun, 01 Jan 2023 08:00:00 GMT

When we quit limiting ourselves and open up to a world of possibilities, we'll soar. 2021 taught me that with grace, preparation and flexibility, anyone can progress in certain aspects of life; 2022 taught me that the world is laden with so much goodness but we need to explore and not merely exist.

In this article, I will write on a few areas of my life that I'm grateful for:

Relationship ‍

I made a couple of friends; I'll say travel buddies with who I explored some places and countries. I feel like the easiest way to bond with people is over activities and I stepped out to do that a lot more than I've ever done.

Writing

I slacked in this aspect; the zeal to write diminished in 2021 😞. I'm hoping to find myself again and resuscitate that zeal this year.

Language

German can be hard especially with the articles and rules, no present participle etc. I learnt a lot in the past year and would continue learning. Los geht's!

Travelling

This was one thing I really spent much time doing in the past year; I explored many cities and 5 countries - Copenhagen Denmark, Oslo Norway, Stockholm Sweden, United Kingdom (London, Brighton, Sheffield, Doncaster) and Prague Czech Republic. Travelling helps you view life through the lens of different people; I met both friendly and reserved people during my escapade.

What's Next?

The year has presented a clean slate and I don't know what God has in stock for me in this new year. I pray that the chapters of my year bring more reasons to be joyful.

I hope for an exciting 2023 - being in God's will, exploring more and living my best life.

Cheers to the new year 🥂✨🚀

How to Update Git Commit Messages

Thu, 10 Mar 2022 06:00:00 GMT

Have you ever been in a situation where you press the Enter key after typing git commit -m "Commit message" and then realize that you made a mistake in your commit message or could have structured it in a better manner?

Keep reading this article to understand how to update your Git commit messages.

The set of commands needed depends on:

The state - whether the commit is recent or not
The host - where the commit resides (local or remote repository)

Recent Git Commits

The --amend command is useful for changing recent commits.

If you are yet to push the code to the remote repository, use:

git commit --amend -m "New commit message"

git push origin <BRANCH_NAME>

However, if you have pushed the code to the remote repository, use:

git commit --amend -m "New commit message"

git push --force-with-lease origin <BRANCH_NAME>

Some people use --force but it is not advisable to do so; --force overwrites a remote branch with your local changes however, --force-with-lease do not overwrite the remote branch if more commits have been pushed to it by another contributor; the push fails and you would be able to pull the changes before attempting to push again.

Previous or Multiple Git Commits

Use git rebase when you need to update the Git commit message of earlier or multiple commits. Assuming you want to update the Git message of any/all of the last 3 commits, you can use the interactive Git rebase.

To do this, navigate to the branch and type:

git rebase -i HEAD~3

This will autostash your changes and in this scenario show the last 3 commits.

pick 62189aj9 Introduce usecase (#120)
pick 71f3n138 Write an example (#121)
pick b5gkwd2g Explain rebase (#122)

# Rebase ge816a67..b5gkwd2g onto ge816a67 (3 commands)
#
# Commands:
# p, pick <commit> = use commit
# r, reword <commit> = use commit, but edit the commit message
# e, edit <commit> = use commit, but stop for amending
# s, squash <commit> = use commit, but meld into previous commit
# f, fixup [-C | -c] <commit> = like "squash" but keep only the previous
#                    commit's log message, unless -C is used, in which case
#                    keep only this commit's message; -c is same as -C but
#                    opens the editor
# x, exec <command> = run command (the rest of the line) using shell
# b, break = stop here (continue rebase later with 'git rebase --continue')
# d, drop <commit> = remove commit
# l, label <label> = label current HEAD with a name
# t, reset <label> = reset HEAD to a label

To commence updating the messages:

Press i to enter an interactive mode. Navigate to the lines you want to update using your arrow keys and change pick to reword

pick 62189aj9 Introduce usecase (#120)
reword 71f3n138 Write an example (#121)
reword b5gkwd2g Explain rebase (#122)

Press esc to leave the interactive mode.

Then, press SHIFT + : and type wq to write your changes and quit the editor.

An editor will be displayed to enable you update the commit message of each selected commit - one at a time. Based on the previous choice, this will list the last 3 commits and pre-load the message you need the update:

Write an example <!-- Change the message to what you want -->

- Introduce usecase

- Write an example

- Explain rebase

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
# Date:      Wed Mar 9 21:51:30 2022 +0100
#
# interactive rebase in progress; onto ge816a67
# Last commands done (2 commands done):
#    pick 62189aj9 Introduce usecase (#120)
#    reword 71f3n138 Write an example (#121)
# Next command to do (1 remaining command):
#    reword b5gkwd2g Explain rebase (#122)

Push the updated changes:

git push --force-with-lease origin <BRANCH_NAME>

Asides from using the rebase command to update commit messages, it can act as a cleaner alternative to the merge command when integrating changes from another branch.

Should you merge or rebase? I've been using merge for a long time but since I understood how rebase works, it became my preferred option. It helps maintain a clean log as merge commits aren't added as part of the commit history.

Conclusion

Whether you need to update a recent commit using git commit --amend -m "New commit message" or an older commit message using git rebase -i HEAD~n, this article explains the approach to achieve your aim.

2021, A Year In My Life

Thu, 03 Feb 2022 11:00:00 GMT

Life do not happen by chance but as a result of grace and meaningful planning. 2020 taught me to appreciate freedom; 2021 taught me that with grace, preparation and flexibility, anyone can progress in certain aspects of life. It was an eventful year and I'm ever grateful to God for His mercies. The eventful nature spanned till the early days of this year thus having to write this article at this time.

In this article, I will write on a few areas of my life that I'm grateful for:

Relationship ‍

Maintaining vertical (God) and horiontal (humans) relationships is a major force of life. Despite all the bustle and hustle, if the Lord doesn't bless us, we labour in vain.

Except the LORD build the house, they labour in vain that build it: except the LORD keep the city, the watchman waketh but in vain. – Psalm 127:1

God has been ever faithful to me and has shown me favour; I remain grateful to Him for the love and favour. All I can say is Chukwu okike dalu!

Writing

I wrote some articles in 2021 though not as much as I would have loved to. But hey! I know you understand that I needed to prioritize my examinations and the eventful nature of the year - I tried out a lot of new things. I also published a guest article on LogRocket and hope to write more articles this year.

Language

I achieved 164 day streak learning French and Deutsch on Duolingo but in a bid to achieve mastery in Deutsch, I started exploring YouTube videos.

Travelling

Travelling helps one gain insight into a lot of things in life: openness, tolerance, and accomodating other cultures. I see this as a means of widening one's horizon.

2021 gave me the opportunity to explore other countries; I left the geographical location I've known all through my life to explore other areas. I travelled to two countries - Accra Ghana and Berlin Germany, and I'm grateful for all I've learnt therein.

What's Next?

Opportunities come knocking even when we aren't seeking; I hope for an awesome 2022 - being in God's will, exploring more and living my best life.

Cheers to the new year 🥂✨

What is Event Bubbling and Capturing and how to handle them?

Thu, 29 Jul 2021 07:00:00 GMT

I wrote an article for LogRocket on Deep Dive into Event Bubbling and Capturing. In the article, I explained how event bubbling and capturing works with a practical example.

Read the article on LogRocket blog or continue below.

If an element and its parent have an event handler for the same event, which element would fire first when triggered?

Propagating events in JavaScript using bubbling and capturing provides developers with an answer to this question. In this article, you'll learn how event bubbling and capturing work, compare different methods for accessing event properties, and run through a few different examples and use cases.

Let’s get started!

What is event capturing?

In event capturing, which is also known as trickling, the outer event handler fires before the specific handler fires. For example, the event on the div shown on the image triggers before the event on the button:

Event capturing hierarchy = document → html → body → parent → child

Capturing has a higher priority than bubbling, meaning that capturing event handlers are executed before bubbling event handlers, as shown by the phases of event propagation:

Capturing phase : the event moves down towards the element
Target phase: the event reaches the target element
Bubbling phase: the event bubbles up from the element

What is event bubbling?

Event bubbling follows the opposite order as event capturing. An event propagates from a child HTML element, then moves up the DOM hierarchy to its parent elements:

Event bubbling hierarchy = child → parent → body → html → document

Listening to propagation events

We can listen to these propagation events using the addEventListener() method, which is appended to HTML nodes. It accepts three arguments: an event name, a callback function, and an optional capture value, which is set to false by default:

element.addEventListener(event, handler, false);

Capture value is empty

Let’s review what will happen if a user clicks on the button when the capturing value is left blank:

element.addEventListener(event, handler);

The click event begins in the capturing phase. It searches the parent elements of the target for any element with the event handler. It will not find any event handler for the capturing phase.

Next, it trickles down to the target. Once all events for the phase are executed, the event moves to its bubbling phase. It executes any event handler set on the target element. It propagates up again, searching through the target’s parent elements for any event handler for the bubbling phase. Now, the event cycle is complete.

Capture value is `true`

Let’s consider what happens if the capturing value is set to true:

element.addEventListener(event, handler, true);

The code snippet above will follow the same order as when the value was empty. The key difference is that the event handler will execute any event handler it finds before trickling down to the target.

Accessing event object properties

There are differences in the methods used by handlers to access event object properties:

event.target: refers to the DOM element that triggered the event
event.eventPhase: returns the current phase of event propagation (capturing: 1, target: 2, bubbling: 3)
event.currentTarget: refers to the DOM element that handles the event. It is usually accessed with the this keyword.

Note that if an event listener is attached to the parent, but event propagation is stopped by the child, event.currentTarget refers to the DOM element that stopped the propagation.

Event bubbling structure

Now that we understand how event bubbling and capturing work, let’s try an example! Let’s say we have the following DOM structure and the following event listener, respectively:

<button class="cta_button">Click me</button>

document
  .querySelector('.cta_button')
  .addEventListener('click', function(event) {
    console.info(`${event.type} event fired on ${this.nodeName}`);
  });

Click event fired on BUTTON would be logged to the console.

Nested DOM structure

Let’s see what happens when the DOM structure is nested and uses the same event listener attached to the parent element:

<div class="cta_container">
  <button class="cta_button">Watch me bubble</button>
</div>

document
  .querySelector('.cta_container')
  .addEventListener('click', function(event) {
    console.info(`${event.type} event fired on ${this.nodeName}`);
  });

In the code snippet above, we set a click event listener on the div, the parent element of the button. When clicked, it logs the type of event fired and the element it is fired on.

When users click the Watch me bubble button, the event is directed to the button. If an event handler is set for the button, the event is triggered. Otherwise, the event bubbles, or propagates, to the parent div, and a click event is fired on the parent. If the event is not handled, the process continues to the next parent at the outer bound until it eventually reaches the document object.

Even though you clicked on the button, the information logged to the console is Click event fired on DIV.

Attach event listener to button

What happens when we also attach an event listener to the button?

<div class="cta_container">
  <button class="cta_button">Watch me bubble</button>
</div>

document
  .querySelector('.cta_container')
  .addEventListener('click', function(event) {
    console.info(`${event.type} event fired on ${this.nodeName}`);
  });

document
  .querySelector('.cta_button')
  .addEventListener('click', function(event) {
    console.info(`${event.type} event fired on ${this.nodeName}`);
  });

The output becomes Click event fired on BUTTON and Click event fired on DIV.

As you can see, the event bubbled to the parent. You can use the event.bubbles property to ascertain whether an event bubbles:

document
  .querySelector('.cta_button')
  .addEventListener('click', function(event) {
    console.info(
      `${event.type} event fired on ${this.nodeName}. Does it bubble? ${event.bubbles}`
    );
  });

Stopping the propagation

An event on a DOM element propagates to all of its parent elements unless it is stopped. Although there is usually no need to prevent bubbling, it can be useful in certain cases. For example, stopping the propagation can prevent event handlers from interfering with each other.

Consider handling drag-and-drop using mousemove and mouseup events. Stopping the propagation may prevent browser bugs that arise as a result of users randomly moving the mouse.

Calling event.stopPropagation() on the child element prevents it from bubbling to the parent element:

document.querySelector('.cta_button').addEventListener('click', event => {
  event.stopPropagation();
  // ...
});

Let’s stop the propagation for our example from the previous section where we clicked a button:

<div class="cta_container">
  <button class="cta_button">Watch the bubble stop</button>
</div>

Let’s add the event listeners:

document
  .querySelector('.cta_container')
  .addEventListener('click', function(event) {
    console.info(`${event.type} event fired on ${this.nodeName}`);
  });

document
  .querySelector('.cta_button')
  .addEventListener('click', function(event) {
    event.stopPropagation();
    console.info(`${event.type} event fired on ${this.nodeName}`);
  });

The event was prevented from bubbling using event.stopPropagation(). The output becomes Click event fired on BUTTON.

Prevent browser default

Let’s say you want to allow the propagation to continue, but you want to prevent the browser from performing its default action if there is no listener handling the event. You can use event.preventDefault():

document.querySelector('.cta_button').addEventListener('click', event => {
  event.preventDefault();
  // ...
});

Event bubbling use case

Let’s apply what we’ve covered and create a shopping list app that strikes an item once you purchase it. In this scenario, adding individual event listeners won’t be feasible because you may decide to add a new item in the future.

Instead, you need to attach the event listener to the parent element of the list. The event listener will handle the click event from the children through event bubbling.

In the code snippet below, we list our shopping items:

<ul class="list">
  <li class="item">MacBook Pro</li>
  <li class="item">Logitech MX Keys</li>
  <li class="item">Sony a6400 camera</li>
  <li class="item">Boya universal cardioid microphone</li>
  <li class="item">Light ring</li>
</ul>

Attached an event listener to <ul>, as seen below:

document.querySelector('.list').addEventListener('click', event => {
  event.target.classList.toggle('purchased');
});

You can view this code on CodePen and open the console to view bubbling in action.

Event capturing structure

During event delegation, where event bubbling is not supported, event capturing becomes especially beneficial for attaching events to dynamic content. For example, you may need to handle events like focus and blur for which bubbling is not supported.

To catch an event on the capturing phase, you need to set the useCapture option to true. Remember, by default, it is set to false:

element.addEventListener(event, handler, true);

Let’s consider a nested DOM structure:

<div class="cta_container">
  <button class="cta_button">Watch me capture</button>
</div>

We’ll set the useCapture option of the parent element to true:

document.querySelector('.cta_container').addEventListener(
document.querySelector('.cta_container').addEventListener(
  'click',
  function(event) {
    console.info(`${event.type} event fired on ${this.nodeName}`);
  },
  true
);

document
  .querySelector('.cta_button')
  .addEventListener('click', function(event) {
    console.info(`${event.type} event fired on ${this.nodeName}`);
  });

Contrary to what we get using bubbling, the output is Click event fired on DIV and Click event fired on BUTTON.

Event capturing use case

Let’s continue our example from earlier when we built a shopping list. If you wanted to add an input field to the shopping list that enables you to set a budget for each item, the event listener attached to the parent would not apply to those input fields.

Let’s take the code for our shopping list and an event listener:

<h1 class="title">Shopping List</h1>
<ul class="list">
  <li class="item">
    MacBook Pro
    <input class="budget" type="number" min="1" />
  </li>
  <li class="item">
    Logitech MX Keys
    <input class="budget" type="number" min="1" />
  </li>
  <li class="item">
    Sony a6400 camera
    <input class="budget" type="number" min="1" />
  </li>
  <li class="item">
    Boya universal cardioid microphone
    <input class="budget" type="number" min="1" />
  </li>
  <li class="item">
    Light ring
    <input class="budget" type="number" min="1" />
  </li>
</ul>

document.querySelector('.list').addEventListener('focus', function(event) {
  console.info(`${event.type} event fired on ${this.nodeName}`);
  event.target.style.background = '#eee';

  console.log('target:', event.target);
  console.log('currentTarget:', event.currentTarget);
  console.log('eventPhase:', event.eventPhase);
});

When you focus the cursor on any input field, nothing happens. However, when you set the useCapture option to true, you’ll achieve the desired result:

document.querySelector('.list').addEventListener(
  'focus',
  function(event) {
    console.info(`${event.type} event fired on ${this.nodeName}`);
    event.target.style.background = '#eee';

    console.log('target:', event.target);
    console.log('currentTarget:', event.currentTarget);
    console.log('eventPhase:', event.eventPhase);
  },
  true
);

You can view this list on CodePen, and open the console to view capturing in action.

Conclusion

A strong understanding of event bubbling and capturing is essential for handling user events in JavaScript. In this tutorial, we learned how event propagation works in JavaScript, following the sequence of capturing, target phase, and bubbling.

Note that bubbling always propagates from a child element to the parent, while capturing propagates from the parent element to the child. To remember the propagation order, you can think of “bubble up and trickle down”.

How to copy text with ease in JavaScript using the Clipboard API

Thu, 13 May 2021 16:00:00 GMT

Copying text especially code snippets or API key from web pages is a herculean task and I know a lot of developers would find the process of selecting a combination of the CTRL or CMD key with the C key boring. This even gets more tasking when the snippet span through several lines.

I implemented the copy to clipboard feature on this site to improve your experience while reading my articles. In this article, I'll write about how I achieved this.

I created this feature using the Clipboard API which is available on the navigator.clipboard object. According to Can I Use, the Clipboard API is supported by major browsers and writing to the clipboard is available through user-initiated event callbacks like a click.

Handling a code block

Given the code,

function stripHTML(code) {
  return code.replace(/(<([^>]+)>)/gi, '');
}

You need to add a copy functionality to make users aware that they can copy the code snippet.

<span class="copy">Copy</span>

To mitigate errors, you need to check for the availability of the Clipboard API before usage:

if (!navigator.clipboard) {
  // Clipboard API is not available
  return;
}

Then, add a click event listener to the Copy text:

document.querySelector('.copy').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API is not available
    return;
  }
});

To copy the snippet to the Clipboard, grab the innerText of the element

const codeBlock = document.querySelector('.code').innerText;

Call the navigator.clipboard.writeText() method afterwards in a try/catch block to handle unforeseen errors. This yields the code:

document.querySelector('.copy').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API is not available
    return;
  }
  try {
    const codeBlock = document.querySelector('.code').innerText;

    await navigator.clipboard.writeText(codeBlock);
    event.target.textContent = 'Copied to clipboard';
  } catch (err) {
    console.error('Failed to copy!', err);
  }
});

Handling multiple code blocks

To attach the click event on multiple code elements, add the same class to the elements and call querySelectorAll() on the elements, then use forEach() to iterate over them.

document.querySelectorAll('.code').forEach(item => {
  item.addEventListener('click', async event => {
    if (!navigator.clipboard) {
      // Clipboard API is not available
      return;
    }
    try {
      await navigator.clipboard.writeText(event.target.innerText);
    } catch (err) {
      console.error('Failed to copy!', err);
    }
  });
});

Conclusion

The ability to copy text to the clipboard with a single button click is an essential feature in web pages. I hope this helps.

View the single clipboard content and multiple clipboard contents on Codepen.

How to Group Tabs in Google Chrome

Thu, 01 Apr 2021 06:00:00 GMT

We easily get distracted by information vying for our attention on a daily basis. As a result, people tend to open a lot of tabs on their personal computers and hardly return to them once their attention is diverted to something else. This results in tab clutter evident among professionals.

The Google Chrome team analyzed this situation and released the tab group feature in the Google Chrome browser. For people with a lot of tabs opened and sometimes finding it difficult to navigate to the right tab, this is a useful feature. It makes it easy for users to organize tabs into different categories.

Steps Involved

Right-click on a tab and select Add tab to new group to create a tab group for the first time.

A pop-up displays, assign a name to the group and choose a suitable color to distinguish the group.

You can add tabs to an existing group or create a new group for it. Right-click on another tab and click Add tab to group, then, select an existing group you want to add it or select New group to create a new group. Alternatively, you can drag a tab into an existing tab group and release your mouse once the tab has an outline of the desired tab group color.

Collapse the tabs to help you stay organized. Note that you can drag a tab group to any position to reorder it.

Conclusion

Tab group is useful when you're working on different things at once and need to easily keep track of them. I hope this comes in handy and you share this article with your friends to help them stay organized and get rid of tab clutter.

How to Setup SonarQube in VS Code

Thu, 04 Mar 2021 06:00:00 GMT

Have you been in a situation where you commit your code and SonarQube adds comments identifying bad coding styles to be resolved? You make the changes and commit again and the issue still persists? This can be frustrating due to the continuous loop you find yourself in a bid to resolve the issue.

In this article, you’ll learn how to set up SonarQube in Visual Studio Code (VS Code) to help combat the write and commit loop.

SonarQube is an open-source platform developed by SonarSource for continuous inspection of code quality to perform automatic reviews with static analysis of code to detect bugs, code smells, and security vulnerabilities on 20+ programming languages. It offers reports on duplicated code, coding standards, unit tests, code coverage, code complexity, comments, bugs, and security vulnerabilities. - Wikipedia

Configuration Steps:

You would install SonarLint extension and bind the extension to your SonarQube server.

Step 1: Install SonarLint

SonarLint is an extension published by SonarSource that helps you detect and fix quality issues as you write code in JavaScript, TypeScript, Python, Java, HTML and PHP.

In this step, you would need to add the extension to your VS Code. To access the extension,

Go to VS Code View menu › Extensions
Search for SonarLint in the marketplace
Click on the extension
Click on Install

You can also visit the Visual Studio Code marketplace to install SonarLint.

SonarLint requires a JDK to be installed. A notification showing Java 8 or more recent is required to run. Please download and install a recent JRE. displays if you don't have the required JDK installed. Click on Get the Java Runtime Environment to download and install the required JDK.

Step 2: Open VS Code Global Settings

Changes made in this file are global. So, it will affect all your projects accessed with VS Code.

To access the settings.json file,

Press CTRL + SHIFT + P or Command + SHIFT + P
Type Open Settings and choose Preferences: Open Settings (JSON)

You can also use the steps below if you have some settings already configured:

Click on the gear icon usually at the bottom-left corner of VS Code by default
Click on the settings option to access the user settings
Expand the Extensions category and navigate to the SonarLint section
Under Sonarlint › Connected Mode › Connections: SonarQube, click on Edit in settings.json. This pre-populates the settings file with the key and an empty array as shown below:

"sonarlint.connectedMode.connections.sonarqube": [

  ]

Step 3: Add SonarQube configuration

Add your server URL and token to settings.json

Example:

"sonarlint.connectedMode.connections.sonarqube": [
  {
    "serverUrl": "https://sonar.domain.com",
    "token": "V2VkIE1..."
  }
]

Step 4: Generate SonarQube User Token

Access your SonarQube server e.g. https://sonar.domain.com and log in with your credentials. Then, navigate to your Account settings at the top-right corner of the web page.

Click on the Security tab and generate a token or use an existing token if you saved it somewhere. Copy the generated token and set it to the token in the example above.

Step 5: Obtain the Project Key

Go to the SonarQube server, click on the Projects tab and find the project you need to configure. The key is usually in the URL e.g. https://sonar.domain.com/dashboard?id=my-project-key. It is also located at the bottom-right corner of the page. Copy the key. Now, you'll configure the project binding and set the copied project key to projectKey in the object.

Step 6: Configure the Project Binding

Configure the project binding in Sonarlint › Connected Mode: Project. This binds the current workspace folder to a SonarQube project. Binding a workspace folder to a project allows you to use the same code analyzers, rules and configuration that are defined in the server, as well as issue suppressions.

To achieve this, create a folder named .vscode within the root directory of your application and add a file named settings.json within the .vscode folder. Changes made in this file are local. So, it will affect only the current folder.

Add your configuration to the workspace settings. Ensure you enclose the snippet with curly braces.

Example:

{
  "sonarlint.connectedMode.project": {
    "projectKey": "my-project-key"
  }
}

Conclusion

Identifying SonarQube issues locally is hard. But, configuring it locally, helps you to identify the issues easily. I hope this helps you and your team.

How to add a README to your GitHub Profile

Thu, 25 Feb 2021 06:00:00 GMT

GitHub released a feature to enable users add README to their GitHub profile. In this article I share steps on how to achieve this.

Most developers want to secure better jobs, get awesome opportunities or relocate to a different country. The GitHub profile README gives you the avenue to tell people who you are, what you do and how to connect with you. It's your space; make good use of it.

Getting Started

The GitHub profile README feature supports HTML, markdown, images etc. and is positioned above pinned repositories hence draws attention. Note that your repository must be public before your GitHub profile README can be displayed.

To get started, visit https://github.com/new and create a new repository with the same name and letter case as your GitHub username. Once you type your username, a screen similar to the image above would be displayed.

Initialize a README file and create the repository or clone the repository and create a README.md file locally. Initializing a README file populates the README.md with the default content similar to what is shown below. It generates your profile automatically.

### Hi there 👋
<!--
**chiamakaikeanyi/chiamakaikeanyi** is a ✨ _special_ ✨
repository because its `README.md` (this file) appears on
your GitHub profile.
Here are some ideas to get you started:
- 🔭 I’m currently working on ...
- 🌱 I’m currently learning ...
- 👯 I’m looking to collaborate on ...
- 🤔 I’m looking for help with ...
- 💬 Ask me about ...
- 📫 How to reach me: ...
- 😄 Pronouns: ...
- ⚡ Fun fact: ...
-->

Edit the README.md and push the changes or just commit to the repository's main GitHub branch if you're using GitHub web interface.

That's it! Creating a GitHub profile README in 4 steps.

Check out Wes Bos' Mastering Markdown Mini Series if you're not conversant with Markdown.

2020, A Year In My Life

Fri, 01 Jan 2021 20:00:00 GMT

Most times, we do not appreciate what we have till we lose it. 2019 gave us freedom, 2020 brought physical confinement. 2020 was a year that taught us to be grateful for the things we see as little and take for granted - being alive, free and healthy.

There's a lot to be thankful for in the year of the new normal. I actualized 90% of my goals for the year.

Relationship ‍

I spent most of my time indoors. Albeit, I met wonderful people online. In 2020, I established a closer online contact with my acquaintances. If statistics were to be taken, 2020 would be the year I spent the most number of hours on social platforms. I also spent the most time with my family since leaving home in 2016 in search of greener pastures. I can't substitute the memories shared within those months for anything in the world. I also maintained my relationship with my God.

Career

Despite people losing their jobs in 2020, I switched jobs for a better place. I had to study lines of codes across a lot of applications written by others. It was tough at first but the atmosphere at the workplace helped me fit in quickly.

Writing

I improved and explored more writing options as planned. Since I began writing, 2020 was my first year of being paid for my article. I published a guest article on LogRocket. I would dedicate more time to guest articles this year as one way to diversify my source of income.

Poetry

Poetry is one of the ways through which I express my thoughts. I published 10 musings in the form of poems and spoken words.

New Language

I started learning French on Duolingo in addition to German that I was previously learning. I hit 184 day streak. I haven't been this consistent. Feel free to add me, let's hit the target.

Fitness

I enrolled into Nike Training Club, became consistent, and completed 53 workouts. It's not a means of losing weight but just to tone muscles, stay fit and flexible.

What's Next?

Life is full of uncertainties and I've learnt to embrace growth over goal mindset. All I wish for in 2021 is to be consistent, remain in God's will and put a smile on the faces of people around me.

Cheers to the new year 🥂

Leveraging Chrome developer tools to improve accessibility

Fri, 20 Nov 2020 06:00:00 GMT

Many designers and developers view accessibility as an afterthought. However, adhering to accessibility best practices leads to a higher customer retention rate and increases generated revenue. Browsers have evolved with more features to support accessibility.

I wrote an article for LogRocket on Which Chrome DevTools improve accessibility?. The tutorial explains how to boost accessibility with Lighthouse audits, Chrome's accessibility pane, and other features to improve user retention and revenue on your site.

Read the article on LogRocket blog or continue below.

In this article, you’ll learn how to leverage Chrome Developer Tools (DevTools) to identify and fix the accessibility bottlenecks of web pages you build.

This article is for people who are familiar with accessibility best practices. You also need to have a basic understanding of DevTools.

Overview

As a frontend engineer who cares about how software solutions I build improve user experience, I use Chrome DevTools a lot.

Chrome DevTools is a suite of web developer tools built into the Google Chrome browser. It divides into a series of panels which are further organized into panes.

Try navigating a web page with a keyboard or assistive technology. Is the experience smooth? Are the elements standard-compliant? What can you do to improve its current state? With DevTools, you can identify and fix these issues.

To access the DevTools panel, visit the webpage you want to audit using Google Chrome. Then, use the shortcut Command + Shift + C on a Mac or Control + Shift + C on Windows and Linux to view the DevTools.

You would explore the different accessibility-related features in Chrome DevTools:

Lighthouse Audits panel
Elements Inspector
Contrast Ratio
Accessibility Pane
Emulating Colour Preferences
Emulating Vision Deficiencies

Lighthouse Audits Panel

The Lighthouse Audits panel powered by aXe is a good tool for auditing accessibility. The audit report is informative. It states what failed, why it failed, and provide links to resources to help you learn more.

To audit a webpage, first open DevTools and click the Lighthouse panel. Uncheck other options, leaving only the accessibility option checked.

Then, select the device you’d like to perform an audit on and click Generate Report.

Click the various sections of the generated report for tips on improving the accessibility score. The details on the passed audits are also useful.

There is detailed audit documentation for heading order provided as a resource for a failed heading order.

It specifies the importance of the element that failed, how the Lighthouse heading levels audit fails, and how to fix poorly structured headings, among other information.

Elements inspector

The Inspect Element feature in DevTools gives you access to a tooltip with accessibility features at a glance. It shows up whenever you inspect an element on a web page.

It displays the following properties:

Contrast Ratio: Measures the difference in brightness between the foreground and background color of the text.
Name: The visible text
Role: The function of the element (region, heading, button etc.). It displays “generic” for elements like <div> and <span> that have no semantic meaning
Keyboard-focusable: Shows if you can focus on an element using your keyboard. A grey color shows that the element is not keyboard-focusable. Green shows that the element is keyboard-accessible.

Contrast Ratio

The Contrast Ratio feature measures the difference in brightness between the foreground and background color of the content of web pages. This will help when choosing the color scheme for your web pages during the design phase. Always ask yourself if the color you are about to choose meets the accessibility standard.

A high contrast ratio is the desired value for any content viewed by users. Low vision users or users affected by environmental factors may not be able to see the content on your web page if you don’t maintain a high contrast ratio.

Imagine a user viewing a web page with a low contrast ratio under the effect of sunlight. The user’s experience would be terrible.

WCAG requires “at least 4.5:1” contrast, so you cannot round a contrast ratio up to 4.5:1. For example, #777777 is a commonly-used shade of gray with a 4.48:1 contrast ratio. It does not meet the WCAG contrast threshold. Contrast and Color Accessibility

The Contrast Ratio section of the Color Picker shows 2 checkmarks and the value of 10.39.

You can use the color picker to choose colors that meet the standard. To access this feature, inspect a text using the Element Inspector tool. Then, locate the color property on the styles pane.

Click the elements color preview, which is a small square on the left-hand side of the value. Locate the current contrast ratio section and click on the downward pointing arrow to view more details.

A single checkmark indicates that the element meets the minimum recommendation (AA). Strive to meet the enhanced recommendation (AAA) indicated by two checkmarks.

A line or two appears on the color palette. Clicking on the region a bit higher reduces it to the minimum recommendation. Anything beyond that would not meet the minimum recommendation.

The Contrast Ratio section of the Color Picker shows 1 checkmark and a value of 3.69.

Accessibility pane

The Accessibility pane provides insight into the accessibility tree, ARIA attributes, and computed accessibility properties of DOM nodes.

You may already be familiar with ARIA, but here’s a brief description for those who do not know what it is.

Accessible Rich Internet Applications (ARIA), referred to as the Web Accessibility Initiative Accessible Rich Internet Applications (WAI-ARIA), is defined by WAI as a way to make web content and web applications (especially dynamic content and advanced user interfaces) more accessible to people with disabilities.

Check out the code snippet for a modal below:

<div aria-modal="true">Add modal content</div>

The aria-modal attribute adds semantic meaning to the div. Assistive technologies such as a braille or screen reader would perceive the div as a modal, which is the intended behavior.

ARIA however, may hurt the accessibility of web pages if not properly used. Note the first rule of ARIA use:

If you can use a native HTML element [HTML5.1] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. - Using ARIA

To use the accessibility pane, open DevTools. Then, inspect any element on the page. Click the accessibility pane located under the elements panel.

The accessibility pane is often hidden, so open DevTools and press Command+Shift+P on Mac or Control+Shift+P on Windows and Linux to open the command menu. The command menu is an autocomplete search field. Search for Show Accessibility, and then press Enter to run a command that opens the pane.

The information on the accessibility tree displays elements from the DOM tree that are useful for perceiving the content of the page by assistive technologies.

ARIA attributes list the properties on these elements. The computed properties section displays properties computed by the browser.

It’s okay if the inspected element has no value specified for these ARIA attributes and properties. Semantic elements do not need them, as they already have meaning.

Going through these details will help you check if you are building for a wider audience or restricting your scope.

Emulating color preferences

Dark mode helps the eyes by exposing it to less light. You can use the DevTools to simulate how users perceive your web pages. The available options are no-preference, light, and dark.

Note: This is only available on websites that implement the Media Queries Level 5 user preference media feature.

Finally, navigate to Emulate CSS media feature prefers-color-scheme section and select an option from the available options.

Emulating vision deficiencies

Emulating vision deficiencies is one of the key accessibility features to use to ensure that you leave no user behind. Consider not using color or images alone to convey information. Chrome DevTools has this feature built-in.

To access this feature, open DevTools and press Command+Shift+P on Mac or Control+Shift+P on Windows and Linux to open the Command Menu. Then, search for and select Show Rendering to enable to rendering tab. Navigate to the Emulate Vision Deficiencies pane and select an option from the available options.

The available options are:

No emulation: No vision deficiency
Blurred vision: Decreased clarity in vision
Protanopia: Inability to perceive red light
Deuteranopia: Inability to perceive green light
Tritanopia: Inability to perceive blue light
Achromatopsia: Absence of color vision. Sees only black, white, and shades of grey.

Knowing that people who visit your website do not always perceive it as you do will help you build each feature you ship with accessibility in mind.

Conclusion

DevTools have evolved with more features to support accessibility that are not known by developers. In this article, you explored features you can leverage to improve website accessibility.

You used the Lighthouse Audits panel to audit the web page and fix failed audits, as well as the Elements Inspector to view the contrast ratio, name, role and keyboard-focusable properties at a glance. You used Contrast Ratio to ensure that foreground and background colors meet the recommended contrast ratio. Finally, You used the Accessibility Pane to gain insight into the accessibility tree, ARIA attributes and computed accessibility properties of DOM nodes.

You also emulated color preferences and vision deficiencies your users may have.

Event Debouncing and Throttling in JavaScript

Thu, 01 Oct 2020 06:00:00 GMT

Key stroke, click, resize, scroll events, etcetera add performance overhead to applications if we respond to these events each time they are fired. The aim is to limit the number of times a function is called in response to events.

In this article, I’ll explain how debounce and throttle works and how to use these rate-limiting techniques to improve the performance of your applications. Request Animation Frame is also another way to handle rate-limiting but we will not cover it in this article.

Debounce

Debounce is a rate-limiting technique that forces a function to execute only once after a set time. It is a higher-order function, i.e. a function that returns another function. It forms a closure around the function parameters.

Sample use cases:

Updating the search result as the user types in a search term.
Validating an input field as the user inputs a value.
Automatically saving contents of a page as the user types.
Updating details of selected items as the user modifies the selection.
Updating contents of a cart as the user clicks the add to cart button several times in succession.

When a user inputs a search term into a search field and a function is called for each keystroke, it harms performance and add unnecessary load to the backend services. Debounce solves this problem. It delays the function invocation until a certain number of keystrokes are recorded or the user stops typing, thereby optimizing resources.

We have two methods of debouncing:

Trailing Debounce
Leading Debounce

Trailing Debounce

This is the default way of debouncing. It postpones execution until after an interval has elapsed since the last time the function was invoked. Simply put, it groups successive events and sends the requests as one to the backend service.

/**
 * @param {*} ctx The context
 * @param {function} func The function to execute after the debounce time
 * @param {number} delay The amount of time to wait
 * @return {function} The debounced function
 */
export const debounce = (context, func, delay) => {
  let timeout;

  return (...arguments) => {
    if (timeout) {
      clearTimeout(timeout);
    }

    timeout = setTimeout(() => {
      func.apply(context, arguments);
    }, delay);
  };
};

Our function passed as a parameter spreads its parameters to allow the debounce function receive any number of parameters to pass to the callback.

Once you pass the function and set the time interval, a debounced function is returned that you can pass to the event listeners.

const debouncedSearchState = debounce(
  this,
  searchTerm => getSearchResult(searchTerm), // an expensive function
  1000
);

The code snippet below calls the debounced function in response to the onChange event handler, debouncedSearchState after the time interval has elapsed.

onChange={debouncedSearchState(searchTerm)}

Leading Debounce

You may prefer not to keep the user waiting but trigger an action in response to an event immediately. Then, stop triggering in response to successive requests until there is a pause in the requests.

View the code on CodePen

Throttle

Throttle prevents a function from executing more than once every specified amount of time. It guarantees the function execution once every specified amount of time. Throttle is unlike debounce that do not execute the function if there is no pause in successive requests made.

Sample use case:

Requesting more content when the user is close to the bottom of a page during an infinite scroll.
Checking the scroll position at a set interval to trigger a CSS animation.
Preventing a function call when a button is clicked to avoid spam click.

const throttle = (context, func, limit) => {
  let lastFunc;
  let lastRan;
  return (...arguments) => {
    if (!lastRan) {
      func.apply(context, arguments);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, arguments);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
};

See the Pen Debounce and Throttle by Chiamaka Ikeanyi (@chiamakaikeanyi) on CodePen.

Conclusion

Use debounce and throttle to optimize your JavaScript event handlers and improve your application performance and user experience. Both are similar but have their use cases.

Conclusively, use debounce to group successive events and throttle to guarantee function execution once every specified amount of time.

Using Chrome DevTools to Emulate Vision Deficiencies

Thu, 03 Sep 2020 06:00:00 GMT

The more customer-focused a business is, the more people they put into consideration during brainstorming sessions. This lead to better design decisions and user experience which in turn yields more revenue. Simply put, businesses built with empathy in mind leads to more revenue being generated.

Emulating vision deficiencies on your website or web application is one of the key accessibility features to consider to ensure that you leave no one behind. Luckily enough, web developer tools has evolved over the years with a lot more support for accessibility.

In this guide, you will emulate different vision deficiencies your users may have. This would enable you build usable software solutions.

Prerequisite

Before you begin, you would need a Google Chrome browser

Usage

The entire process involves 4 steps.

Step 1 - Accessing the DevTools

Before you can proceed, you need to open the DevTools panel.

To access the DevTools panel, use CTRL + Shift + J on Windows and Linux environments or Command + Option + J on a Mac environment.

Step 2 - Accessing the Command Menu

Use Control + Shift + P to access the command menu on Windows and Linux environments. On a Mac environment, use Command + Shift + P.

Step 3 - Enable the Rendering Tab

Type and select rendering in the search field to enable the rendering tab if it is not already enabled.

Step 4 - Emulate Vision Deficiencies

Navigate to Emulate vision deficiencies section and select an option from the available options.

The available options are:

No emulation: No vision deficiency
Blurred vision: Decreased clarity in vision
Protanopia: Inability to perceive red light
Deuteranopia: Inability to perceive green light
Tritanopia: Inability to perceive blue light
Achromatopsia: Absence of color vision. Sees only black, white, and shades of gray.

Conclusion

In this article, you emulated the different vision deficiencies your users may have. Now, knowing that people who visit your websites or use your web applications do not always perceive it as you do will enable you consider inclusion for each feature you ship to your users.

Read my article on Building Accessible Web Apps to understand more about accessibility.

Never forget the mantra:

Leave no one behind.

How mPharma's onboarding process sets you up for success

Thu, 06 Aug 2020 06:00:00 GMT

I, like many others set goals and build atomic habits to help achieve these goals. One of my goals last year was to explore new grounds.

Sequel to this, I left Konga, one of the 2 major players in the e-commerce sector in Nigeria to mPharma; a company headquartered in Ghana, with the vision of providing access to safe and affordable health care in Africa.

The interview process was a long one. All the 4 stages were done virtually. It took series of months to finally get through to the last stage . Despite being long, it was realistic. I solved a problem similar to what I was expected to solve if I succeed and finally get hired.

Throughout the onboarding process, it was clear to me that the company is organised. I was being set up for all round success. I would share the things mpharmily as fondly called did so well that made me doff my hat for the human capital team. This is from the perspective of a new hire on the Engineering team. I hope your team would borrow a leaf from mPharma.

I received a warm welcome

I felt special on my first day as people from different departments flooded Slack with awesome welcome messages. One of the notes that stood out was the one that read Akwaaba, meaning welcome in Ghana. I quickly headed over to Google Translate to get the appropriate response - medaase (pronounced 'me-daa-si') which means thank you in Twi. 😄

The team is proactive

Prior to my first day, I received an email from the human capital team requesting for necessary information to help the team prepare me for my first day. The team set up my email account and shared the necessary documents that would enable me understand the mPharma process.

My manager wasn't left out. On the first day, he set up a meeting to walk me through solutions the team is building. He also showed me the applications dependent on other chapters that I need to know about and requested that I should be given access to them and invited to meetings.

My team mates were responsive. They had answers to majority of my questions. I kept them flowing as I needed to understand the process and architecture of the existing systems.

Series of meetings to understand the process

The first week was lined up with schedules to help me understand the problem mPharma is solving. The human capital team shared the itinerary on the first day to help me prepare questions for the team to answer. Each team had representatives that expounded what the department do and the challenges they aim to solve. At the end of the meeting with each team, I was expected to comfortably respond to a set of questions regarding the departments; tools they use, challenges they are faced with and their approach towards solving the problems.

Being a data-driven organisation, the Engineering team is at the helm of affairs. The information gathered from the teams enlightened me on the intersection of the Engineering team and other teams toward meeting organisational goals.

I met awesome individuals with a large heart happy to have me join the team and ready to make my integration process as smooth as possible.

Meeting with the crew

On my second day, the VP of Engineering set up a Zoom call so I could meet the crew. The crew consists of different chapters further divided into squads. I couldn't say much during the meeting as I was looking at new faces from different parts of the world who I would be working with.

The team assigns you a buddy

At mPharma, new employees are assigned a buddy. What makes it different is that the employee must be someone that is not on the same team with you. Your buddy is expected to answer any question you may have regarding the mPharma way of life. This approach aims to expand your network so, you're not just expected to interact with your squad, chapter or crew alone.

You are expected to go through the mPharma academy

The academy is made up of courses to help you integrate better at the workplace. It consists of courses on communication, workplace best practices, time and stress management, leadership and teamwork, emotional intelligence etc.

Every new hire is expected to complete the academy within the specified time. It was stressful at first for me but I quickly had to adjust my schedule to enable me complete the courses. There is a curriculum for the first 30, 60 and 90 days. After each round, you are expected to fill a survey. The survey helps the human capital team understand how new employees cope with the onboarding process.

Conclusion

Onboarding process can be tough, but a well planned process helps in a seamless integration of new employees. mPharma did really well in making the process a memorable one.

Receiving a warm welcome let me know that I am in an environment where I can be free to air my opinions.
The team being proactive is a sign that there is no room to slack.
Series of meetings to understand the process is a hint that to properly build solutions, I need to understand the problem.
Meeting with the crew showed me that beyond the work, there is a human side of being part of mpharmily.
The team assigning me a buddy in a different team let me know that to excel in my career, I need to expand my network.
Going through the mPharma academy prepared me for work-life balance, demo days, managing my emotions at the workplace and overall, to be a team player.

The onboarding process was a lot like building atomic habits because with each of these salient points, I'm being moulded into a better employee and set up for all round success.

Feel free to reach out to me on Twitter regarding what you feel about the process and what works at the organisation you work. I will be glad to hear from you.

Hoisting

Thu, 02 Jul 2020 06:00:00 GMT

Hoisting is a popularly known term in JavaScript but do you understand how it works? If you've been able to invoke a function on a line prior to the line it was declared, read on to understand why.

In this article, we'll explore how hoisting works in JavaScript. But before we proceed, you need to understand certain concepts.

In JavaScript, there are two stages during code execution: the compilation phase and the execution phase.
Calling an undefined variable results to a reference error

console.log(myVariable) // Uncaught ReferenceError: myVariable is not defined

An undeclared variable is assigned the type of undefined

console.log(typeof myVariable) // undefined

Now that you understand these points, let's find out what hoisting means.

Hoisting is the act of putting variable and function declarations into memory during the compile phase. It is a general way of thinking about how execution contexts (the creation and execution phases) work in JavaScript.

Let's look at some code snippets for better understanding.

Variable Declaration

The widely known way of declaring a variable is:

var a = 'Read more' // let or const

Declaration and initialization takes place.

Now, let's look at other scenarios where this is not the case.

// Initialize a. Declares it if it's not already declared. No hoisting occurs.
a = 'Read'
console.log(a + ' ' + b) // 'Read undefined'
// Declare and initialize b. The value of b is not hoisted.
var b = 'more'

Wouldn't this result to a reference error since the variable was called before it was declared? you may ask. Well, that is not the case because of hoisting. Only the declaration (var b), not the initialization (='more') is hoisted. This results to b being assigned a value of undefined.

The code is executed in this order:

// Initialize a. Declares it if it's not already declared. No hoisting occurs.
a = 'Read'
var b // Stores the variable b in memory
console.log(a + ' ' + b) // 'Read undefined'
b = 'more'

But, you can use a variable before it is declared.

a = 'Read'
b = 'more'
console.log(a + ' ' + b) // 'Read more'
// Declare b. b is hoisted
var b

JavaScript only hoists declarations, not initializations. The value of an initialized variable returns undefined once it is used.

However, in strict mode, variables cannot be used if they are not declared.

Function Scoped Variables

Note that hoisting is scoped. This means that if variables are defined within a function, it is made available only within that function scope. Using it outside the scope results to a reference error. It is made available to the global scope only if it is declared outside a function.

console.log(b) // Uncaught ReferenceError: b is not defined

function getB() {
  var b
  console.log(b)
  b = 'more'
}

getB() // Undefined

To avoid this bug, ensure to declare and initialize variables before using them.

function getB() {
  var b = 'more'
  console.log(b)
}

getB() // more

Function Declarations

The general way of working with functions is to declare it before you invoke it. However, in very rare cases, you may mistakenly use a function before you declare it in your code. Hoisting makes it work and not throw an error.

The code snippet below shows the generally known way of declaring and invoking a function.

function getTheLastDigitFromUrl(url) {
  const digit = url && url.match(/([\d]+)/g)
  if (digit && digit.length > 0) {
    return digit[0]
  }
  return url
}

getTheLastDigitFromUrl('https://chiamakaikeanyi.dev/20200702') //20200702

Now, what happens when the function is invoked before declaration?

getTheLastDigitFromUrl('https://chiamakaikeanyi.dev/20200702') //20200702

function getTheLastDigitFromUrl(url) {
  const digit = url && url.match(/([\d]+)/g)
  if (digit && digit.length > 0) {
    return digit[0]
  }
  return url
}

Nothing special, it yields the same result as the first scenario when the function is declared before being called. This is due to hoisting. Function declarations are hoisted. So we can invoke a function before we declare it.

Function Expressions

Function expressions are not hoisted. If you invoke a function expression before assigning a function to it, it results to a type error.

getTheLastDigitFromUrl('https://chiamakaikeanyi.dev/20200702')
// Uncaught TypeError: getTheLastDigitFromUrl is not a function

var getTheLastDigitFromUrl = function(url) {
  const digit = url && url.match(/([\d]+)/g)
  if (digit && digit.length > 0) {
    return digit[0]
  }
  return url
}

getTheLastDigitFromUrl is a variable initialized with undefined, so, invoking it as a function results to a type error.

Hoisting Variables vs Functions

Function declarations are hoisted before variable assignments. Let's execute the code below:

console.log(typeof getB) // Output: function

var getB = 'Read'

function getB() {
  var b = 'more'
  console.log(b)
}

Same occurs for variable declarations:

console.log(typeof getB) // Output: function

var getB

function getB() {
  var b = 'more'
  console.log(b)
}

Notice that although the variable was declared before the function, the type logged to the console is function.

Strict Mode

In strict mode, variables cannot be used if they are not declared. Doing this throws an error.

'use strict'

console.log(a) // Uncaught ReferenceError: a is not defined
a = 'Read more'

The let and const Keywords

Variables and constants declared with let or const are hoisted but unlike var, they are not initialized with undefined. Using them before initialization results to a reference error rather than undefined. Variables declared with let is block scoped ({}) NOT function scope.

console.log(a) // Uncaught ReferenceError: b is not defined
let a = 'Read more'

However, when let is moved to the top, it is hoisted. This is an antipattern though.

let a
console.log(a)
a = 'Read more'

Using const,

a = 'Read'
console.log(a + ' ' + b) // Uncaught ReferenceError: Cannot access 'b' before initialization
// Declare b. b is not hoisted
const b = 'more'

Note that you cannot declare the const variable without initialization. Attempting to do so results to a syntax error

a = 'Read';
console.log(a + " " + b);
// Declare b. b is not hoisted
const b
b = 'more'; // Uncaught SyntaxError: Missing initializer in const declaration

Points to Note

JavaScript only hoist declarations. Initializations are not hoisted.
Always declare variables at the top of every scope to avoid bugs.
Function declarations are hoisted while function expressions are not.
Variables and constants declared with let or const are hoisted but unlike var, they are not initialized with undefined. Using them before initialization results to a reference error rather than undefined.
Prefer let and const over var.

Conclusion

Having gone through and understood hoisting as a concept in JavaScript, it is pertinent to note that we should form a habit of declaring and initializing JavaScript variables before they are used. In ES 5, using the strict mode is encouraged to expose the loop holes.

How to Create a Custom Message on your Terminal

Thu, 04 Jun 2020 06:00:00 GMT

Do you use your terminal a lot? I bet you would want to add some text to look at each time you launch your terminal. In this article, you would create a custom message on your terminal using Figlet.

Prerequisite

If you are running on a macOS and don't have Homebrew installed, you need to install CLI tools for Xcode and Homebrew. If you are running on a different operating system, skip Step 1.

Step 1: Install Homebrew

Homebrew is a free and open-source software package management system that simplifies the installation of software on Apple’s macOS.

Before installing Homebrew, you need to install the CLI tools for Xcode. Open your terminal and run the command:

xcode-select —-install

If you get an error, run xcode-select -r to reset xcode-select.

Then, install Homebrew.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Step 2: Install Figlet

Figlet is a command-line utility that generates text banners in a variety of typefaces, composed of letters made up of conglomerations of smaller ASCII characters.

brew install figlet   # macOS
apt install figlet    # Debian/Ubuntu
yum install figlet    # CentOS/RHEL
dnf install figlet    # Fedora 22+

Once you have installed figlet, you can view all the fonts in the terminal by running the command:

showfigfonts

To view how your message would be displayed using different fonts, type showfigfonts on your terminal, followed by your message. In this scenario, I'll be using { } is poetry

showfigfonts "{ } is poetry"

The basic way of using figlet is by providing the text that you want to transform as an argument.

figlet '{ } is poetry'

To check the manual, run man figlet.

You can specify your desired font, using the -f flag.

figlet -f weird '{ } is poetry'

For a clearer output, you can use the -k flag to add a little space between the printed characters. This is evident when you use a compact font. Try running the two commands below and notice the difference.

figlet -f small '{ } is poetry'

figlet -k -f small '{ } is poetry'

Use the -c flag to centralize your text and the -r to display the text at the right.

Step 3: Add Colors

To go a bit further with the customization, add colors to the text. The -e option of the echo command is used for parsing of the escape sequences.

echo -e "\e[32mDon’t let the noise of others’ opinions drown your own inner voice\e[0m"

To use the colors alongside figlet, run

echo "\e[32m"                    # Invoke a color
figlet -f slant "{ } is poetry"  # Use a slant font
echo "\e[0m"                     # Reset the color

The “\e[32m” sequence adds a green color to the terminal. The colors are derived from the ANSI escape code.

The “\e[0m” sequence resets the terminal. It removes all attributes (formatting and colors). Always add it at the end of each colored text.

You can combine attributes but ensure that the attributes are separated by a semicolon. To create a bold and underlined text, use \e[1;4;33m.

echo -e "Learn, \e[1;4;33mUnlearn\e[0m, Relearn. \e[1mJust keep moving...\e[0m"

You're done with the bits. Now, add everything together to create an awesome terminal.

The customizations you've done so far disappears when you quit the terminal. To make it persist, copy the code and paste in your .zshrc or .bash_profile. I'll use the zshrc file. Feel free to use bash_profile file.

Run the command below on your terminal to open the file with your Visual Studio Code editor.

code ~/.zshrc

If you cannot access files using VS Code code command, you need to install it.

Launch VS Code
Press CMD + SHIFT + P
Type shell command
Select Install code command in path.

You can also launch it with nano using,

nano ~/.zshrc

Paste the code below or your custom message in the .zshrc or .bash_profile file.

figlet -k '{ } is poetry'
echo -e "\e[32m Learn, \e[1;4;33mUnlearn,\e[0m \e[32mRelearn. \e[1mJust keep moving...\e[0m"

Finally, save your changes by running the command:

source ~/.zshrc

or

source ~/.bash_profile

Voila! you now have an awesome terminal and have gotten a sneak peek of how my terminal currently looks.

Read my article on How to configure your terminal with ZSH for a deep dive into customizing your terminal.

Nullish Coalescing and Optional Chaining in JavaScript

Thu, 07 May 2020 06:00:00 GMT

When working with data, situations arise where you aren’t sure that the property you need exists. To build fault-tolerant applications despite issues like this, default values are provided to make apps fail gracefully. Before now, the logical OR (||) operator is used to achieve this. It is a syntax for selecting the second defined value or variable (default value) if the first value or variable is falsy (false, 0, ' ', null or undefined).

The logical OR (||) operator

The tenary condition a ? a : b is shortened to a || b. This concept is known as short-circuiting.

The result of actualValue || defaultValue is: actualValue if actualValue is truthy, otherwise, it is defaultValue.

console.info(null || 'default');       //'default'
console.info(undefined || 'default'); //'default'
console.info(false || 'default');    //'default'
console.info(' ' || 'default');    //'default'
console.info(0 || 'default');     //'default'

Note that the default value is also used when the actual value is false, 0 or ' '. This is due to JavaScript evaluating these values as falsy. The operand on the left hand side was coerced to a boolean for the evaluation and any falsy value (false, 0, ' ', null or undefined) is not returned. This leads to unexpected results if these values are considered valid.

To get a better grasp, let's consider the function:

function getUser(user) {
  return user.name || 'guestUser';
}

function isUserValid(user) {
  return user.isValid || true;
}

const users = [
  {name: 'Ethel', age: 25, isValid: true},
  {name: '', age: 22},
  {age: 18, isValid: false}
];

users.map(user => getUser(user));
// Expected output: ["Ethel", "guestUser", "guestUser"];

users.map(user => isUserValid(user));
// Expected output: [true, true, true];

If the expected value for the second object in the array above is ' ', the logical OR (||) operator nullifies it. A recent operator (??) has been added to JavaScript to address unexpected behaviours like this when using the || operator.

The nullish coalescing (??) operator

As opposed to the logical OR (||) operator, the nullish coalescing (??) operator provides a syntax for selecting the second operand only when the first operand evaluates to either null or undefined (but no other falsy values).

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

The tenary condition (a !== null && a !== undefined) ? a : b is shortened to a ?? b.

The result of actualValue ?? defaultValue is: actualValue if actualValue is not null or undefined, otherwise, it is defaultValue.

console.info(null ?? 'default');      // 'default'
console.info(undefined ?? 'default'); // 'default'
console.info(false ?? 'default');   // false
console.info(' ' ?? 'default');    // ' '
console.info(0 ?? 'default');     // 0

Take a look at the last three operations, therein lies the difference between || and ??. Actual values are returned for the two falsy values.

Rewriting the same function,

function getUser(user) {
  return user.name ?? 'guestUser';
}

function isUserValid(user) {
  return user.isValid ?? true;
}

const users = [
  {name: 'Ethel', age: 25, isValid: true},
  {name: '', age: 22},
  {age: 18, isValid: false}
];

users && users.length > 0 &&
  users.map(user => getUser(user));
// Expected output: ["Ethel", "", "guestUser"];

users && users.length > 0 &&
  users.map(user => isUserValid(user));
// Expected output: [true, true, false];

Optional Chaining (?.)

The optional chaining operator (?.) provides a concise way of accessing the value of a property that is deep within a chain of connected objects without having to explicitly validate the reference. It is useful when accessing a property of an object which may be nullish (null or undefined).

Instead of causing an error when a reference is nullish, it short-circuits with a return value of undefined.

Given the object,

const user = {
  name: 'Eve',
  state: {
    name: 'Lagos',
    city: {
      name: 'Gbagada',
      code: 234
    }
  }
};

To access a property on this object that its availability is uncertain, we usually use the syntax below:

if(user.state && user.state.city) {
  const stateCode = user.state.city.code;
}

This ensures that the program does not throw an error message such as:

TypeError: Cannot read property 'code' of undefined

With the newly introduced optional chaining operator (?.), you can check for data availability using a more concise approach.

console.info(user.state?.city?.code);

Given the array,

const users = [
  {
    name: 'Nora',
    state: {
      city: {
        name: 'Accra',
        code: '233',
      },
    },
  },
  {
    name: 'Terrence'
  },
  {
    name: 'Nick',
    state: {

    },
  },
];

const cityCode = users?.length > 0 &&
  users.map(user => user.state?.city?.code ?? 0);
// Expected output: ["233", 0, 0];

Do not combine both the AND (&&) and OR operators (||) directly with ??. A syntax error would be thrown in such scenario.

Note that when ?? is used together with || or && operator in an expression, always enclose the expression within parentheses due to its low value on the precedence table.

Given the object,

let user = {
  name: 'Eve',
  state: {
    name:  null
  }
};

const stateValueWithError = user.state &&
  user.state.name ?? 'Accra';
  // Uncaught SyntaxError: Unexpected token '??'

console.info(stateValueWithError);
// Uncaught ReferenceError: stateValueWithError is not defined

const stateValueWithoutError = (user.state &&
  user.state.name) ?? 'Lagos';

console.info(stateValueWithoutError); // "Lagos"

Conclusion

The main difference between the logical OR (||) and the nullish coalescing operator (??) is that || returns the first truthy value while ?? returns the first defined value. This becomes important when other falsy values are considered as valid values.

Though this feature is appealing to use, minimize its usage at this stage due to the cross-browser stability.

How to Write Good Git Commit Messages

Thu, 02 Apr 2020 06:00:00 GMT

Writing good commit messages is an under-valued skill. Why does it seem to count; shouldn't only technical skills count?

Well, possessing it as a developer helps in the following ways:

It adds clarity to pull requests (PRs) raised
It is key to effective debugging within a team.
Makes tracking an implementation easier

NB: If you're yet to understand what Git is, read my article on Working with Git before revisiting this.

What is a Git commit?

This is a way to tell Git about the staged changes you made to the repository using the commit command. It takes a snapshot of what your project looks like once you commit, and stores a unique reference (40 character length) to it using a Secure Hashing Algorithm (SHA).

To add these changes, you need to specify a commit message to be attached to this change and a specific flag to use. Write the commit message as if it's about to be applied, rather than about what you just did.

Let's elaborate why you should care about writing good commit messages.

Adds clarity to PRs raised

If someone needs to read through your PR before getting a grasp of what it's meant to do, it means that you have a lot to do regarding writing good commit messages. Your commit message should be concise and state the context of the change. The message is truncated once it reaches the specified character limit.

Reference the ticket number or tracking ID within the commit message to add more context.

# Bad
git commit -m "Fix bug"

# Good
git commit -m "Add auto login for verified users - Closes BLG-20"

State why you're making the changes within the body (if necessary) as the diff already shows what is being changed. Focus on the way it worked before the change (and what was wrong with that), the way it works now, and why you decided to solve it the way you did. Explain the side effects of the change if any.

A new developer joining the team should be able to read the commit message and tell what the PR does. If it is difficult to understand, you may be adding too many changes, strive for atomic commits.

Key to Effective Debugging

For the commit message to help in debugging effectively, ensure that it is short and use an imperative mood (spoken or written as if giving a command or instruction) when constructing them.

The first word in your commit message should be one of these:

Add
Create
Refactor
Fix
Release
Document
Modify
Update
Remove
Delete etc...

It should complete the template: If applied, this commit will [Add your subject line here]

# Bad
git commit -m "implemented automatic login for new verified signups because
currently new users have to manually log in after signing up."

# Good
git commit -m "Implement automatic login for new verified signups"

Take a look at the two commit messages to notice the difference. The first word of the message labelled good is written in an imperative mood, succint and starts with a capital letter. It communicates using an active voice.

When you substitute the message within the Git commit template, it becomes:

If applied, this commit will Implement automatic login for new verified signups

To view revision history when debugging, run the command.

git log

The output:

commit a6e7ab9ce174821a0c934df9e61450a230a855e0
Author: Chiamaka Ikeanyi <hello@chiamakaikeanyi.dev>
Date:   Thu Apr 02 04:00:00 2020 +0000

    Add article on commit messages - Closes BLG-27

This shows a detailed log of a specific commit.

To get a more streamlined output, provide more arguments to the log command.

git log --oneline -5 --author chiamaka --before "Thu Apr 02 2020"

This shows the subject of commits made by the specified author before the specified date.

Makes tracking an implementation easier

Within a project, you can ascertain if a developer is a good team player or not by running git log. Logs that are well cared for are useful and helps you to understand why something happened in the past.

Model of a good Git commit message:

Capitalized, short (50 characters or less) summary
More detailed explanatory text, if necessary. Wrap it to about 72 characters or so. In some contexts, the first line is treated as the subject of an email and the rest of the text as the body. The blank line separating the summary from the body is critical (unless you omit the body entirely); tools like rebase can get confused if you run the two together.
Write your commit message in the imperative: "Fix bug" and not "Fixed bug"or "Fixes bug." This convention matches up with commit messages generatedby commands like git merge and git revert.
Further paragraphs come after blank lines
Bullet points are okay, too. Typically a hyphen or asterisk is used for the bullet, followed by a single space, with blank lines in between, but conventions vary here
If you use an issue tracker, add a reference(s) to them at the bottom, e.g. Resolve #123; See also: #456, #789

7 rules of a great Git commit message

Separate subject from body with a blank line
Limit the subject line to 50 characters
Capitalize the subject line
Do not end the subject line with a period
Use the imperative mood when in the subject line
Wrap the body at 72 characters
Use the body to explain what and why the change was made. This part should be added only when necessary
Remove unnecessary punctuation marks

Commit Types

Different teams have different means of structuring commit messages. Some use commit types to add more context to PRs raised.

feat: A new feature
fix: A bug fix
style: Additions or modifications related to styling only
refactor: Code refactoring
test: Additions or modifications to test cases
docs: README, Architectural, or anything related to documentation
chore: Regular code maintenance

A PR that has a commit type added can look like this:

git commit -m "Resolve feat/BLG-20: Implement auto login for new signups"

Conclusion

Debugging becomes a thorn in the flesh when commit messages do not help. Ensuring that you write good commit messages do not only show that you are empathetic, but also helps you during the debugging process.

I hope this will help you and your team to write great commit messages that follows Git's built-in convention. You can still update previous commits if you've just made a mistake.

JavaScript Array Methods: forEach vs map

Thu, 05 Mar 2020 06:00:00 GMT

As a JavaScript developer, you may have been in a position of using forEach or map array method on the Array.prototype object to iterate through the elements of an array and wondered the choice to make based on performance gain.

First, let's see MDN's definition of what they do,

forEach() method executes a provided function once for each array element.

map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

To elaborate,

forEach() iterates through the elements of an array and perform an operation on each element. It mutates the original data and returns undefined.

map() is a functional programming technique. It iterates through the elements of an array, transforms each member of that array, and returns a new array of the same size with the transformed members e.g. performing calculations on a list of numbers. It does not mutate the original data, it returns a new array.

The basic difference between forEach and map is the:

return value
data mutation
chainability
performance

Given the array;

const array = [2, 4, 6, 8];

Return Value and Data mutation

forEach mutates the original data and has no return value.

const newArray = array.forEach((num, index) => {
  return array[index] = num * 2;
});

// Expected output: array = [8, 16, 24, 32]
// newArray = undefined

Map do not mutate the original data. It returns a new array.

const newArray = array.map(num => num * 2);
// Expected output: array = [2, 4, 6, 8]
// newArray = [8, 16, 24, 32]

Chainability

Chainability is a technique used for invoking multiple method calls. forEach is not chainable whereas map is chainable.

Given the array;

const array = [2, 4, 6, 8];

const newArray = array
  .map(num => num * 2)
  .filter(num => num > 8)

// Expected output: array = [2, 4, 6, 8]
// newArray = [12, 16]

Performance

In terms of speed, I'll use JSperf, a popular website for checking the performance of JavaScript functions and the DevTools console.

To really see the impact, I'll use a large data set.

Given the array,

let array = [];
for (let i = 0; i < 1000000; i++) {
  array.push(i)
}

Using the DevTools console,

// forEach
console.time('forEach');
array.forEach((num, index) => {
  return array[index] = num * 2;
});
console.timeEnd('forEach');

// map
console.time('map');
array.map(num => {
  return num * 2;
});
console.timeEnd('map');

Note that the result on JSperf as shown in the image above, and using the DevTools, forEach is faster than map. However, if for is put into consideration, it is the fastest of all.

	forEach	map
Return value	undefined	New array
Data mutation	Yes	No
Chainability	No	Yes
Performance	More performant	Less performant

Conclusion

map and forEach are methods on the Array.prototype object. For proper usage, consider the scenario to determine the method to use.

When working with functional programming, consider using map to avoid mutating data but when you do not care about data mutation, returning a value or chaining, use forEach.

Building for the User's Color Preference

Thu, 20 Feb 2020 06:00:00 GMT

We are in an era of dark mode. Some people who prefer dark mode are of the opinion that using dark mode helps the eyes by exposing it to less light, to some, dark mode is used due to it's known ability to save a lot of power on AMOLED screens while to others, it's purely for aesthetic reason. Currently, popular applications and operating systems give users the option to enable light or dark mode. This is an accessibility win.

The web platform is not left out. Media Queries Level 5 introduced user preference media features. This enables websites to detect the user's preferred settings to view content on the web.

In this article, I'll be discussing the prefers-color-scheme media query.

The prefers-color-scheme media feature is used by the browser to detect the color theme (light or dark color theme) set by the user and use the setting when rendering the page. This media feature works with no-preference, light or dark as its value. For example, if the prefers-color-scheme: dark media query value is set to true, it means that the user has set their operating system to dark mode and prefers UIs with a dark theme (light text on dark background).

<p class="color-scheme">
  This color changes based on the user's operating system's settings.
</p>

:root {
  --light-theme-background-color: #15202b;
  --light-theme-text-color: #fafafa;

  --dark-theme-background-color: #fafafa;
  --dark-theme-text-color: #15202b;
}

.color-scheme {
  background-color: var(--light-theme-background-color);
  color: var(--light-theme-text-color);
}

@media (prefers-color-scheme: dark) {
  .color-scheme {
    background-color: var(--dark-theme-background-color);
    color: var(--dark-theme-text-color);
  }
}

You can view the support for prefers-color-scheme on Caniuse.com

For websites with prefers-color-scheme implementation, you can emulate the appearance on different color modes without switching the operating system's color scheme. This is possible using Chrome DevTools. This is done in a way that only the visible tab is affected. When you switch to a different tab, you would need to choose the color scheme you need to emulate.

To achieve this,

Press CTRL + SHIFT + I in Windows and Linux environments or CMD + OPT + J in a Mac environment to access the DevTools
Open the Command Menu using CTRL + SHIFT + P or CMD + SHIFT + P
Type Rendering and run the Show Rendering command,
Change the Emulate CSS media feature prefers-color-scheme to your preferred option.

For certain websites, images on a white background appear too obvious when a dark theme is activated. To tone down these images, you can choose to re-colorize or invert the colors.

/* re-colorize images */
img:not([src*='.svg']) {
  filter: grayscale(50%);
}

/* invert images */
@media (prefers-color-scheme: dark) {
  img:not([src*='.svg']) {
    filter: invert(85%);
  }
}

To avoid bloated stylesheets, you can create different stylesheets to handle theme-related styles. These can then be loaded conditionally.

<link
  rel="stylesheet"
  href="style/dark.css"
  media="(prefers-color-scheme: dark)"
/>

<link
  rel="stylesheet"
  href="style/light.css"
  media="(prefers-color-scheme: light)"
/>

<link rel="stylesheet" href="style/style.css" />

Conclusion

Supporting dark mode can make a great difference for users visiting your website as it can make or mar the user experience.

Coloured Console Log in Browser DevTools

Thu, 06 Feb 2020 06:00:00 GMT

To JavaScript developers, writing console messages is done almost on a daily basis. The console is like a good friend. It makes the debugging process easier. These messages can be displayed in many ways but many end up with just the regular console.log.

Displaying colourful console messages may be a child's play to some, but to others, it may still be a mystery yet to be unravelled. I once saw a coloured console message when I popped open the DevTools of a particular website. This sparked my curiosity and my quest to discover how it was achieved began.

In this article, I'll show you how to display colourful console messages. Note that this is mainly for decorative purpose and not to be used when trying to debug production issues.

The common syntax:

console.log('\x1b[33m%s\x1b[0m', 'stringToStyle');

\x1b[33m is an escape sequence that will be intercepted by the terminal. When it is encountered, it instructs the terminal to switch to a yellow colour derived from the ANSI escape code.

%s indicates that the next character would be a string. This is where the second argument (the string) gets injected.

\x1b[0m is the code for the non-printable control character escape. It resets the terminal colour.

The syntax for coloured console message formatted using CSS:

console.log('%cstringToStyle', 'color: #f0db4f');

The CSS format specifier %c is used to indicate that the console message (the second parameter) would be styled using CSS.

To format the output further, you can specify a font for the message:

console.log(
  "%cLet's build a better web",
  'color: #734E73; font: bold 50px Helvetica Neue; text-shadow: 1px 1px 0 #ddd;'
);
console.log(
  '%cWant to learn more about Software Engineering? Visit https://chiamakaikeanyi.dev',
  'font-size: 14px'
);

Copy the code above and paste in your DevTools console to view the formatting.

Conclusion

You can style your console messages to achieve more. All possibilities are not exhausted in this article.

Imperative vs Declarative Approach to Programming

Thu, 16 Jan 2020 06:00:00 GMT

You probably must have heard of the terms imperative vs declarative and wondered what it means and how to apply it while programming.

In computer science, declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow.

Imperative approach focuses on how you do something, and declarative approach focuses on what you do.”

For instance, if you ask about how to learn react; let's look at the imperative vs declarative response to both.

The imperative response: You can either learn using tutorials or by reading the documentation. To learn using tutorials, click on Take a tutorial button and to learn using the docs, click on Get started. The links are on https://reactjs.org

The declarative response: Visit https://reactjs.org

HTML, React etc. uses the declarative approach unlike imperative approach that focus on how e.g. Java.

<header>
  <h1>Learn React Today</h1>
</header>

const Input = ({ className, label, name, placeholder, type }) => {
    return (
        <div className={styles.inputWrapper}>
            <label
                className={styles.inputLabel}
                htmlFor={name}
            >
                {label || ''}
            </label>
            <input
                id={name}
                className={className}
                name={name}
                placeholder={placeholder || ' '}
                type={type}
            />
        </div>
    );
};

Given the examples above, the focus is on WHAT is to be done rather than HOW to get it done.

Worthy of note is the fact that behind the scenes, declarative approach uses imperative approach. However, this has been abstracted and you do not need to bother about it.

Given the string "Hello World" to reverse and a bunch of numbers to find its sum, the possible approach you may take is:

const reverseString = (str) => {
  if (str && typeof (str) !== 'string') {
    return "Argument must be a string";
  }

  const splittedStr = [...str];
  let reversedString = '';

  for (let index = splittedStr.length - 1; index >= 0; index--) {
    reversedString += splittedStr[index];
  }

  return reversedString;
}

const getSum = arr => {
  let sum = 0;

  for (let index = 0; index < arr.length; index++){
    result += arr[index];
  }

  return result;
}

The solutions above are valid. However, you can take a more declarative approach to get the same result instead of repeated iterations on the array.

These can be refactored to:

const reverseString = (str) => {
  return [...str].reverse().join('');
}

const getSum = arr => {
  return arr.reduce((prev, current) => prev + current, 0);
}

The above describes the WHAT we want to achieve (declarative) instead of the HOW we want to achieve it (imperative). Notice the use of built-in JavaScript methods - reverse, join, and reduce to achieve the same goal with a concise and readable code.

2019, A Year In My Life

Wed, 01 Jan 2020 11:00:00 GMT

2018 was an awesome year for me, albeit 2019 was better - a year of fitting into big shoes. It was filled with God's unending faithfulness.

There's a lot to reflect on, this past year:

Relationship ‍

Good relationships add a good spice to life. I got to meet new people while keeping in touch with the people I met in the past years. I met and had dinner with some of the women in Tech that I admire. God, my maker has also kept His Word towards me to guide, guard and protect me throughout the journey.

Career

In 2019, I filled the big shoe; I was promoted and this came with extra responsibilities that seemed like it was going to break me. I felt like running away but the Lord was by my side to guide me through it all. I set up my home workspace and consciously made effort to study. This was a great deal for me. It really helped. I also, consciously went on a quest to learn how to manage people, think critically and creatively to be a good leader and make wise decisions.

Speaking

Over the years, I've been attending tech events but 2019 felt better as I attended 2 tech events as a speaker.

At Forloop Lagos Summit, I spoke about Avoiding Shell Hell: Aliases to the Rescue
At Vue Vixens, I spoke about Working on your Soft Skills as a Software Developer

Though my aim is to be known as a builder and not a speaker, I hope to speak at more tech events and grow this list sometime.

Writing

Having in mind the goal of creating quality learning resources, I wrote 16 articles in 2019. My most popular article was Sizing in CSS: px vs em vs rem. I will improve and explore more writing options this year.

Poetry

Asides coding, I like art and poetry. Playing with words and leaving the brushstrokes of one's imaginations and musings in print is amazing. I wrote 5 poems and spoken words in 2019.

New Language

In July, I started learning German on Duolingo. It feels awesome learning a new language and I try to use it at every opportunity I get to communicate with my friends in Germany. Feel free to add me, let's hit the target.

Reading

I read a lot of articles and 7 books in 2019. I will read 12 books or more in 2020. My favourite ones were:

The Smart Money Woman: This had the Nigerian feel. Everything was relatable as it was set in Lagos, Nigeria. It taught me about financial independence - to have goals, invest, and make wise decisions financially.
Atomic Habits: This taught me to focus on the systems (building better habits) rather than the goals (chasing better results) and make each day count.
Bridge to Haven: This taught me that despite our unfaithfulness, God remains faithful and ready to have us back when we run to Him.

What's Next?

New lifestyle delivers new results. In 2020, I need to make deliberate effort to build stable systems and achieve a lot more than I have ever done.

Grow in my role as a Software Engineer and explore new grounds
Engage in creative drawing. I've neglected this over the past few years
Get more involved in open source projects
Read 12 books and write more
Keep fit and prioritize self-care
Enrol in a driving school.

Generally, I had an exciting and rewarding 2019. Goodbye 2019, cheers to the new year 🥂

Demystifying this, call, apply and bind

Thu, 12 Dec 2019 06:00:00 GMT

The this keyword is one of the concepts you must encounter in your journey as a JavaScript developer. Yet, it is misunderstood by a lot of developers. this is determined by the context of the code being executed. It varies implicitly or explicitly using call, apply and bind.

In this article, you'll learn what this refers to and how to determine its value implicitly and explicitly using call, apply and bind.

To determine the context of this keyword, you need to look at where the fuction is invoked.

Implicit Context of this

There are different contexts of the this keyword when used implicitly.

Global object
Method of an Object
Constructor

Global Object

When you're working with the browser,this refers to the Window object.

The output when logged to the console is:

Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

You may be surprised to know that the value of this in a top-level function is also the Window object.

function learnToSoar() {
  console.log(this);
}

learnToSoar(); // Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

However, using the strict mode, you can combat this weird behaviour.

'use strict'

function learnToSoar() {
  console.log(this);
}

learnToSoar(); // undefined

Method of an Object

A method of an object refers to the properties of the object using the this keyword.

Given an object;

 const person = {
  name: 'Chiamaka',
  scope: 'web',
  info() {
   return `${this.name} writes articles about the ${this.scope} platform.`;
  }
 }

To invoke the info method of the person object,

person.info(); // "Chiamaka writes articles about the web platform."

Now, to determine what the this keyword within the object references, take a look at the left hand side of the dot notation. It is apparent that the value of this in the context is the person object.

Let's take this further using a nested object to get a better grasp of the concept,

 const person = {
  name: 'Chiamaka',
  watchword: 'Find your greatest life and live it.',
  scope: 'web',
  readAnalogy() {
    return `${this.watchword} ${this.name} and keep writing about the
    ${this.scope} platform`;
  },
  friend: {
    name: 'Rita',
    watchword: 'Don\'t sink into the life you have now.',
    readAnalogy() {
      return `Keep winning ${this.name}. ${this.watchword}`;
    }
  },
 }

In the snippet above, this.name within the person object refers to person.name whereas within the friend object, it refers to person.friend.name.

Constructor

You can use the new keyword to create an instance of a class. In the constructor context this is bound to the instance of the class.

class Person {
  constructor(name, watchword) {
    this.name = name,
    this.watchword = watchword,
  }

  readAnalogy() {
    return `${this.name}'s watchword is "${this.watchword}"`;
  }
}


const human = new Person('Uzoma',
'Be at the right place at the right time, with the right person.');

human.readAnalogy(); //"Uzoma's watchword is 'Be at the right place at the right time, with the right person.'"

In the example above, this is bound to the instance of Person which is human.

Event Handler

The context of this for event handlers called using addEventListener is the element that is being listened to event.currentTarget or event.target.

<button class='cta_button'>
  Click the button
</button>

const button = document.querySelector('.cta_button');

button.addEventListener('click', function(event) {
  console.log(this) //"<button>Click me</button>"
})

Explicit Context of this

You can use call, apply, or bind to determine the context of this explicitly.

Call

The call() method calls a function with a given this value and arguments provided individually.

Given the object,

 const person = {
  name: 'Chiamaka',
  watchword: 'Find your greatest life and live it',
  scope: 'web'
 }

and the standalone function,

  function readAnalogy() {
    return `${this.watchword} and keep writing about the
    ${this.scope} platform`;
  }

Looking at where the readAnalogy function is invoked, the context of this is Window.

The output of readAnalogy() would be:

"undefined and keep writing about the undefined platform"

To invoke readAnalogy with the this keyword referencing the person object, using person.readAnalogy() would not work. It would output:

Uncaught TypeError: person.readAnalogy is not a function at <anonymous>

The call and apply methods are used to achieve this purpose. To invoke readAnalogy within the person context, pass the person as an argument to the call method. Simply put, the first argument passed to the call method is what the this keyword inside that function will reference.

readAnalogy.call(person);

//or

readAnalogy.apply(person);

To pass arguments to the function being invoked with the call method, it should be passed after the first argument which is the execution context.

const person = {
  name: 'Chiamaka',
  jobTitle: 'Software Engineer'
}

function describe(stack1, stack2, stack3) {
  return `My name is ${this.name} and I am a ${this.jobTitle}
  building solutions using ${stack1}, ${stack2} and ${stack3}`
}

const stack = ['JavaScript', 'React', 'Redux']

describe.call(person, stack[0], stack[1], stack[2])

Given a lot of arguments, using the call method becomes tiring. The apply method solves the problem.

Apply

The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).

This is similar to the call method. However, using the apply method, you pass an array as the second argument which is spread out as arguments.

When you try to use the syntax for call on apply

describe.apply(person, stack[0], stack[1], stack[2])

The output is

VM505:1 Uncaught TypeError: CreateListFromArrayLike called on non-object
at <anonymous>:1:10

To use apply, the code above will be refactored to:

const person = {
  name: 'Chiamaka',
  jobTitle: 'Software Engineer'
}

function describe(stack1, stack2, stack3) {
  return `My name is ${this.name} and I am a ${this.jobTitle}
  building solutions using ${stack1}, ${stack2} and ${stack3}`
}

const stack = ['JavaScript', 'React', 'Redux']

describe.apply(person, stack) // Note the difference here

Gavin Joyce has a useful mnemonic to help remember the difference between fn.call and fn.apply

Have trouble remembering the difference between `https://t.co/gdUSChIRgv` and `fn.apply` in JavaScript?

A useful mnemonic from https://t.co/HekOteBawB:

"A for array and C for comma."

fn.apply(context, [a, b, c]);https://t.co/gdUSChIRgv(context, a, b, c);
— Gavin Joyce (@gavinjoyce) January 9, 2018

Bind

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Using bind is similar to call, but you need to create a new function that you can invoke later.

const person = {
  name: 'Chiamaka',
  jobTitle: 'Software Engineer'
}

function describe(stack1, stack2, stack3) {
  return `My name is ${this.name} and I am a ${this.jobTitle}
  building solutions using ${stack1}, ${stack2}, ${stack3}`
}

const stack = ['JavaScript', 'React', 'Redux'];

const boundedFunction = describe.bind(person, stack[0], stack[1], stack[2]);

boundedFunction();

Arrow Functions

For arrow functions, this refers to the lexical scope. It inherits the context of the parent.

const functionType = {
type: 'Regular function',
describe: function() {
  return this.type;
},
child: {
  type: 'Arrow function',
  describe: () => {
    return this.type;
  }
},
}

functionType.describe(); // "Regular function"
functionType.child.describe(); // undefined

You can use arrow function when you want this to reference the outer context. For instance, attaching an event listener to an element in an outer scope and referencing it from within a class.

Button A:

<button class='cta_buttonA'>
  Click Button A
</button>

const buttonA = document.querySelector('.cta_buttonA');

class ButtonA {
  constructor() {
    this.buttonBackground = '#ffdd40';

    buttonA.addEventListener('click', function(event) {
      event.target.style.backgroundColor = this.buttonBackground;
    })
  }
}

new ButtonA();

Button B:

<button class='cta_buttonB'>
  Click Button B
</button>

const buttonB = document.querySelector('.cta_buttonB');

class ButtonB {
  constructor() {
    this.buttonBackground = '#ffdd40';

    buttonB.addEventListener('click', event => {
      event.target.style.backgroundColor = this.buttonBackground;
    })
  }
}

new ButtonB();

If you click Button A which uses a regular function, this would be equal to event.currentTarget and cannot be used to access a value within the class without explicitly binding it whereas clicking on Button B which uses arrow function would change the background color of the button.

Conclusion

In a nutshell, through this article, you've learned about this and its value in different use cases - implicit and explicit. Having learned this, you should be comfortable using it during development without questioning the result of this.

Concatenate, an Africa-focused Conference

Thu, 17 Oct 2019 06:00:00 GMT

On October 11th and 12th, I attended the Concatenate Conference held at Zone Tech Park, Lagos, Nigeria. It is a free conference for African developers.

This year's event happened in style as the event was scheduled to hold in two countries (Lagos, Nigeria and Nairobi, Kenya). Speakers flew in to attend the conference. Most of these speakers have not been to Africa before. They experienced Lagos traffic, enjoyed the scenery, and the Nigerian Jollof Rice.

The event was packed with well-thought-out sessions and lightning talks presented by amazing people. These centred around community and support, building usable products, performance, etc. The highlights are summarized below.

Engaging Empathy

The floor was opened by the amazing Sharon Steed with a talk on Engaging Empathy. The most important part that struck me is when she talked about embracing who you are and pushing through it, knowing that vulnerability is just trying.

She identified 3 Key Empathy Behaviours;

Patience (the foundation of empathy, being present in a distracting world),
Perspective (the root of understanding, thinking before you speak, eliminating bias) and
Connection (the real reason we communicate, leaving every conversation in a better place than where it began).

She concluded the talk with a heart-warming note. She stated that

Life is hard; putting people first is important when collaborating as a team because, the more thoughtful that we are, the more connections we make by embracing empathy.

Retrospective of how CodeSandbox was built

Ives Van Hoorne gave a Retrospective of how CodeSandbox was built. He talked about how he moved from ideation to product actualization. Never would I have known that the CodeSandbox editor and the preview are two different applications until he mentioned it.

He concluded with the wise words:

If you have an idea that you deem imperfect, just work on it. It can turn into a great idea if you start working on it and keep evolving.

Seek external feedback; people being enthusiastic can motivate you to work and help refine the product. Also, release fast, don't over-engineer; keep it simple, stupid (KISS).

Key takeaways

Abstract the core components
Make your solution updatable
Don't reinvent the wheel
An item on the idea board may become a usable product

User-Centric Metrics

The loading and runtime experience on the web can be hard to measure. In the performance world, faster is better. A fast website improves the user experience leading to a boost in revenue. But, before optimizing, always measure.

Yoav discussed two approaches to measurement to determine the speed and user experience on the web:

LAB (lab-based measurement): This does not represent your real users' experience. A computer is just set up to generate data and tests are run repeatedly under specific conditions e.g. Lighthouse, Webpagetest
RUM (Real user measurement): This captures your real users' experience. However, this requires a lot of traffic to simulate, and tests must be run in a production environment to get the actual data. e.g. Chrome User Experience, PageSpeed Insights

Lab-based measurement helps collect data before shipping a product while RUM helps verify that the feature doesn't regress performance. Results from RUM can be used as data to improve the Lab.

The meaningful points to track the user's journey are:

Visual
- Speed Index
- Visual completeness (FP, FCP, FID, LCP, etc.)
Interactivity (TTI)
User annoyance metrics

Event timing also allows you to tag important elements in your page and get performance entries for them

<h1 elementtiming="usefulcontent">Useful content</h1>

Design Systems and Art Direction

Art Direction combines art and design to evoke a cultural and emotional reaction - Dan Mall

Design Systems are the how, Art Direction is the why. This is where you check if the end-user feels good when using your product.

It is better to modify, not remove the defaults because you feel it doesn't fit with the aesthetics of the website e.g. the :focus outline

:focus {
  outline: thin solid var(--primary-color);
  outline-offset: .25rem;
}

Translation !== Localization. Localization does not mean changing words to different languages. It entails infusing the local market into the design; making the entire experience more appropriate for the culture of the user. It helps them feel like the product is made just for them.

It is not right to make assumptions about other people's culture, include them in the design process. Consider avatar colour, writing mode, design style etc. These are things involved in localization, not changing the language to that of the audience.

Accessibility is a collective effort. Don't make certain components accessible and the rest inaccessible. It is as good as no accessibility optimization done. The whole is better than the sum of its parts.

The Cost Of JavaScript in 2019

After downloading a web page, executing JavaScript becomes the dominant cost. JavaScript is the most expensive part of a website. When it blocks the main thread, nothing else can happen. You have to optimize the code you're loading to improve user experience. Note that you need to make performance part of the conversation from the initial stage; set performance budgets to avoid degrading performance.

Small JavaScript bundles improve download speed, lower memory usage and reduce CPU costs

Key takeaways

Reduce the amount of JavaScript you ship
Avoid large bundles (50KB+)
Avoid large inline scripts
Ship less code (minify, cache)
Download times are critical for low-end phones
Use code-splitting
Use lazy-loading
Audit JavaScript regularly using webpack bundle analyzer, source-map explorer, import cost for VS Code
Avoid using Moment.js, try date-fns.org instead
Be careful when using lodash. Instead of importing the entire library, use specific imports e.g.

import times from 'lodash/times;

is better than

import { times } from 'lodash;

For more savings, try lodash-webpack-plugin.

Use Light Wallet or bundle size for setting performance budgets

Improving performance is a journey. Take it one step at a time. Measure, optimize, monitor and repeat.

The Future of Web Animation

With 3D animations, there are lots of areas yet to be explored in the web development industry. Think outside the box; create applications that people would remember after they have seen it once (one that currently does not exist) because the web is meant for us to invent, share and communicate.

However, it is imperative to note that design and page transitions can impact cognitive load. When making a change in the design or animating on the web, consider the cognitive load it may create on the users.

Systems of Systems

Every decision that we make at the atomic level has a huge impact that would help us build at scale.

Nothing can be changed until it is faced.

There's a need to work as one; we are meant to help people who are less privileged than us. We must learn to lift as we climb. Be Redwoods but have interwoven roots like Ivy to stand tall and strong.

Serverless Can Do That?!

With serverless, you focus on building your ideas, not on deployment as a lot of things are abstracted. Servers scale to meet your current workload. You can explore hosting services like Netlify, Azure, etc. to get started.

npm install netlify-cli
npm install azure-functions-core-tools

Key takeaways

Write stateless code. You can't preserve state within function calls
Serverless applications are event-driven
Use tools that generate the boilerplate code for you
Apply the Single Responsibility Principle

Building Usable Products

Don't ship complicated products, let products solve users' problems. Understand your users, test with them before launch and continuously collect feedback to help improve the product.

Docker for Dev and Test

Docker is not for DevOps Engineer alone. It can make it easy for teams to set up and update their development environment without having to install a variety of frameworks or tools.

Docker Container !== Virtual Machine

Containers are

Isolated
Consistent
Portable
Easy to use

AHA (Avoid Hasty Abstractions) Programming

Complex abstractions make it difficult to make changes to a codebase. It is important to be thoughtful about abstractions. DRY or WET? Under or over-abstraction? You need to know when not to abstract and when to do so to help improve a codebase.

Key takeaways

DRY is not necessarily a bad thing
You cannot tell the future: optimize for change
Duplication is far cheaper than the wrong abstraction, so prefer duplication over the wrong abstraction - Sandi Metz
Wait for commonalities in duplicate code to scream at you for abstraction.
If you have "shared code" with lots of branches then resist the urge to add more conditionals to it. Refactor it first.

Building a Business

Before saying that something can't be done, try to validate the idea (validate early, validate often). Focus on where your core values lies, solve a known problem. Don't re-invent the wheel, use available services to build your business and create value.

Solving Diabetics With An Open Source Artificial Pancreas

The mystery speaker, Scott Hanselman handled this topic. He discussed ways to control blood sugar level with software and hardware. He has an API that monitors his blood sugar level. This would enable his wife, doctor and Siri to monitor his blood sugar level and be sure he is in a good state.

Key takeaway

Instead of building a product just for yourself, involve the community and build solutions that would be beneficial to all. Everyone has a battle they are fighting, remember that once you look at colour and gender, these would remain unsolved.

A lot of useful talks were presented. You can watch the Day1, Day2 and Day 3 live stream to get a full grasp of all that happened during the conference.

The slides I could find on the web

Sharon's course on Engaging Empathy, Productive Debugging, User Centric Metrics, Building Usable Products, The Cost Of JavaScript in 2019, The Future of Web Animation, Systems of Systems, Serverless Can Do That?!, Moving from Beginner to a Junior Developer, AHA (Avoid Hasty Abstractions) Programming, Functional Programming Basics in JavaScript, Building Interactive Maps with Mapbox, Technical Debt for Us, VS CODE Power User Workflows, The State of Payments in Africa

Links to mentioned resources

Speed, Web.dev, URList, Jamstack, Staticgen, Headles CMS, Carbon design system, Accessibility, Geekbench browser for benchmarking, Atomic design, VS Code Extension for Azure functions, Docker, The Wrong Abstraction, Gatsby, Bare Metrics, Indie Hackers, TidePool, Nightscout Foundation, OpenAPS

Resource Hinting Techniques

Thu, 18 Jul 2019 06:00:00 GMT

When you input a URL to fetch content using the browser, certain processes occur under the hood - DNS resolution, request/response cycle and rendering.

The Domain Name Server (DNS) matches the domain name to an IP address.
The browser sends an HTTP request to the server and the server sends back an HTTP response.
The browser begins rendering the HTML on the page while also requesting any additional resources.

Each subsequent request completes a request/response cycle and is rendered in turn by the browser. This request/response cycle is referred to as a round trip. This varies depending on network conditions. Establishing the connection ahead of time helps reduce the round trip and make applications faster.

In this article, I'm going to explore resource hinting techniques, the difference between them and performance gains that can be achieved with them.

Preload, Prefetch, and Preconnect

Preload, Prefetch and Preconnect are resource hinting techniques used to inform the browser of your intention to resolve specified domain names or establish connection to specified domains as soon as possible. Hinting browsers about needed resources helps improve the page load time as connections to important third-party origins must have been established prior to when they are needed.

This can be achieved by adding the rel="preload", rel="prefetch" or rel="preconnect" attribute to the <link > element.

Preload

Preload offers control on fetching resources for the current navigation. It is a high-priority hint. This is useful for fetching important resources - images, CSS, JavaScript, and font files needed to render a page without blocking the document's onload event and storing them in the cache. Using this, you can speed up resource loading and minimize the amount of time that fallback text is shown (for font files) when users visit your site.

<link rel="preload" href="https://domain.com" as="script">

For font files, you need to set crossorigin attribute as they are loaded in anonymous mode. When this is omitted, the browser performs DNS lookup only.

<link
  rel="preload"
  href="https://fonts.domain.com/font.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>

Prefetch

Prefetch focuses on fetching a resource for the next navigation. It is a low-priority hint to the browser that a resource might be needed. There are different types of prefetching - link, DNS, and prerendering.

Link prefetching notifies the browser to fetch resources that the user might request and store them in cache.

<link rel="prefetch" href="https://domain.com">

Due to the limit placed on the number of domains the browser can pre-connect to at a specific time, DNS prefetch comes in handy. DNS prefetching notifies the browser to perform DNS lookups at the background. This minimizes latency and can be achieved by adding the rel="dns-prefetch" attribute to the <link> element. This is useful for fetching external resources - CDNs, Google Analytics, Google fonts etc.

<link rel="dns-prefetch" href="https://cdn.livechatinc.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://js-agent.newrelic.com">

Prerendering is very similar to prefetching. It aggregates resources that the user is likely to navigate to next. In addition, it renders the entire page in the background. To test if a page is prerendered, navigate to chrome://net-internals/#prerender

Preconnect

Preconnect notifies the browser to setup connections (DNS lookups, TLS negotiations, TCP handshakes) before an HTTP request is sent to the server. This eliminates roundtrip latency and saves time for users.

<link href="https://cdn.domain.com" rel="preconnect" crossorigin>

Conclusion

Resource hinting helps to improve page load time when you need to use resources from third-party domains. However, only preconnect to critical third-party origins you will use within 10 seconds. If the connection is not used as soon as possible, the browser closes. This results to wasting time and users bandwidth needed to fetch other useful resources.

Grasping the SOLID Principles

Thu, 20 Jun 2019 06:00:00 GMT

SOLID is a core principle of object-oriented design promoted by Robert C. Martin. It is an acronym for software design principles applied when crafting maintainable software solutions.

S - Single Responsibility Principle

O - Open–Closed Principle

L - Liskov Substitution Principle

I - Interface Segregation Principle

D - Dependency Inversion Principle

I'll be going through each of these with code samples to make these principles easy to understand.

Single responsibility

A class should have one, and only one, reason to change.

A class should perform only one task. It should only do one thing. That is to say that classes should be loosely coupled. Changes to just one part of a specification should not be able to affect the class. When changes to different parts of the specification affects a class in multiple ways, it means that this element of the principle fails.

class Shape {
  constructor(width:number, height:number) {
    this.width = width;
    this.height = height;
  }

  calculateArea() {
    // calculate the area;
  }

  calculatePerimeter() {
    // calculate the perimeter;
  }

  formatResult() {
    // format the result
  }
}

In the above example, the class does more than one thing i.e. having formatResult() method, it violates the single responsibility principle and therefore increases its likeliness to change when something else changes. What if the required result is not provided in the format specified by formatResult()? It will need the method to be modified thereby also violating the open-close principle.

However, this does not mean that the class should have only one method, it means that all methods within a class should be focused on carrying out one responsibility.

A better approach is

class Result {
  constructor(format:string){
    this.format = format;
  }

  formatResult() {
    switch(this.format) {
      case "string":
        return JSON.stringify(this.result);

      case "object":
        return JSON.parse(this.result);

      case "number":
        return parseInt(this.result);

      case "binary":
        return parseInt(this.result, 2);

      default:
        return result;
    }
  }
}

class Shape {
  constructor(width:number, height:number, format){
      this.width = width;
      this.height = height;
      this.format = format;
  }

  calculateArea(width, height, format) {
    // calculate and return the area;
  }

  calculatePerimeter(width, height, format) {
    // calculate and return the perimeter;
  }
}

To use the class,

const area = new Shape(5, 7, 'string');

Open–closed

Software entities should be open for extension, but closed for modification.

This advocates that software entities should be extensible, but not modifiable. It should be open for extension by other classes but closed for modification.

class Shape {
  constructor(shape: string) {
    this.shape = shape;
  }

  calculateArea() {
    let area;

    foreach(shapes as shape) {
      if(shape === 'Square')) {
        area = Math.pow(length, 2);
      }
      else if(shape === 'Circle')) {
        area = Math.pi() * Math.pow(radius, 2);
      }
      else {
        throw new Error("Unknown shape")
      }
    }

    return area;
  }
}

To calculate the area of another shape with the example above, it requires another else if block which leads to the modification of the calculateArea in the given class. A better approach is to move the logic to the particular shape's (e.g. Circle) class and implement shape interface.

interface ShapeInterface  {
  calculateArea();
}

class Square implements ShapeInterface  {
    constructor(length:number) {
      super();

      this.length = length;
    }

    calculateArea() {
      return Math.pow(this.length, 2);
    }
}

class Circle implements ShapeInterface  {
  constructor(radius: number) {
    super();

    this.radius = radius;
  }

  calculateArea() {
    return Math.pi() * Math.pow(this.radius, 2);
  }

  calculateDiameter() {
    return this.radius * 2;
  }
}

function getArea(shapes: Shape[]) {
    return shapes.reduce(
        (previous, current) => previous + current.calculateArea(),
        0
    );
}

Liskov Substitution

Let q(x) be a property provable about objects of x of type T. Then q(y) should be provable for objects y of type S where S is a subtype of T.

This postulates that objects in a program should be replaceable with instances of their subtypes without altering the correctness of that program.

If you have Circle class as a sub class of Shape, Shape class should be easily substituted with Circle class without causing any thing to break

interface ShapeInterface  {
  // returns a number
  calculateArea();
}


class Shape implements ShapeInterface {
  calculateArea() {
    // returns a number
  }
}

class Circle extends Shape {
  calculateArea() {
    // return a number
    // if the implementation of this returns the value in another format,
    // it violates this principle as it cannot be used in place of the parent class
  }
}

Interface Segregation

A Client should not be forced to implement an interface that it doesn’t use.

Many client-specific interfaces are better than one general-purpose interface. Similar to the Single Responsibility Principle, the goal here is to minimize redundant code by dividing the software components into multiple, independent parts.

interface ShapeInterface {
  calculateArea();
  calculateVolume();
}

Given the example above, shapes will be forced to abide by the contract specified by the interface. This violates the single responsibility and interface segregation principles. To fix this, calculateVolume(); would be moved to a different interface.

interface ShapeInterface {
  calculateArea();
}

interface ShapesWithDepthInterface {
  calculateVolume();
}

Usage:

class Square implements ShapeInterface {
  calculateArea() {
    // calculate the area
  }
}

class Cone implements ShapeInterface, ShapesWithDepthInterface {
  calculateArea() {
    // calculate the area
  }

  calculateVolume() {
    // calculate the volume
  }
}

Dependency Inversion

High-level modules should not depend on low-level modules. Both should depend on abstractions.

Abstractions should not depend on details. Details should depend on abstractions.

This advocates for decoupling. One should depend upon abstractions(interfaces), NOT concretions (classes). Despite the similarity to dependency injection, this is a bit different.

class Form {
  constructor(Input type) {
    this.type = type;
  }
}

Input is the low-level module while Form is high-level. The form should not care about the input you pass to it.

interface InputInterface {
    public function constructInput();
}

class Input implements InputInterface {
    public function constructInput(type) {
      // construct the input
    }
}

class Form {
  constructor(InputInterface input) {
    this.input = input;
  }
}

It is paramount to note that most of the principles rely on the use of interfaces. Using interfaces (Interface Segregation principle) helps you to isolate implementation details from business logic(Single Responsibility principle). This will also enable you to replace an implementation with its subtype(Liskov Substitution principle) and enable you to write applications that are open for extension but close for modification (Open/Close principle).

Conclusion

SOLID Principles is a standard that all developers should adopt to write decoupled and maintainable code. It might sound abstract at first, but with practice, you'll have a good grasp of it and improve the quality of code you write.

Code Review That Helps

Thu, 06 Jun 2019 06:00:00 GMT

Having an efficient code review process is essential to ensure code quality, grow as a team and get a good grasp of the entire project. However, different people view code review in different ways that it either sounds boring or exciting.

In this article, I would discuss ways to conduct good code reviews and make it a means of learning/adding value rather than a political or emotional argument.

Code review (sometimes referred to as peer review) is a software quality assurance process in which team members go through a computer program mainly by viewing and reading parts of its source code to spot mistakes.

Before a code review process can begin, a pull request has to be made. A pull request (PR) is a request to introduce changes to a code repository through a Git branch. This is done using tools like GitHub, Bitbucket, Gitlab etc. Once the pull request is opened, the Engineer notifies reviewers to give their feedback on code improvements (and updates the code if necessary). When the Engineer and reviewers are satisfied with the code, the changes are merged into the base branch.

Why code review matters

Code review is essential to ship quality software solutions to real-life problems rather than introducing one. Despite the experience level, it is necessary to have someone review your code. It

ensures that coding standards are adhered to
facilitate knowledge sharing
helps team members make an extra effort to ensure code quality
helps everyone get familiar with the codebase and best practices
provides room for someone else to suggest a better approach to solve a problem
limits the risk of introducing bugs thereby improving code quality

Questions to ask yourself during code reviews

When conducting a code review, ponder on these below. Answering each of them helps you know things to look out for during the review process.

Is the piece of code difficult to understand? It might need refactoring
Are the method and class names intuitive? They may need to be renamed
Does the method do much? It may need to be broken down
Are there many comment blocks? The method names may need to show what the code does
Is the code well organized? It may not be maintainable
Does the code have test coverage?
Could the code be made more efficient?
Are all the requirements, stated in the ticket fully implemented?
Does it meet the coding standards of the team?

How to do a proper code review

Reviewing someone's code should not be about the approvals. It is about helping a co-worker find mistakes in his/her code and ways to make it better. When someone sends you their PR to review, it means that the person values your time and input. Find time to help and do it properly.

Look out for deviation from coding standards, readability, maintainability of every piece of code, test coverage, performance, accessibility and security bottlenecks.

A good code is:

Well designed
Readable by others
Does what the author intended
Not too complex
Not degrading system code health
Commented with the why vs. what
Appropriately tested
Sufficiently documented

Review your code

It is important to review your code to spot mistakes before requesting for a code review. Ensure that your code compiles successfully and passes the test cases. This helps you spot little mistakes before your reviewers do.

Foster a positive culture

When a comment is made regarding a part of the code you didn't write, don't take offence; rather be happy to fix it and help in paying technical debts. Avoid words such as "That isn't my code. My linting tool only formatted it". Have a positive culture around code reviews, it should not matter who introduced the bug. All that should matter is preventing the bug from being deployed to production. Or, eliminating the bug if it wasn't caught earlier.

Automate

Automate what can be automated. Make use of stylelint, eslint and other tools to help improve the quality of your code. This helps code reviewers focus on the code and not spend time spotting issues that can be found automatically.

Declutter

Let one PR do one thing. When the purpose of the code change is clear, reviewing becomes much easier and increases feedback.

Have a context of the problem

Your job is not just to spot syntax errors, having a context of the problem is important to create a bigger picture and be sure the solution fits into it. To help team members get an insight into the problem, it is paramount for the submitter to link the issue / ticket number to the pull request. If it needs further clarifications, provide it in the description field.

TicketNumber: Issue description

Fixes #issueNumber: Issue description

Note that when constructing the commit message, start with a verb e.g. SPA-001: Bootstrap the app

Attend to comments

You certainly should not leave a comment unattended, you either respond to it or fix the issue. If you do not understand what the reviewer meant, ask for clarifications; don't be emotionally attached to your code. Afterwards, notify the team member that dropped the comment that it has been attended to. Going ahead to resolve a comment dropped by another or merging a PR with unattended comments is a way of telling the team member who dropped the comment that you do not value his/her input.

Be objective

Rephrase your objection as a question. It helps to get the desired result without much argument.

Bad: “This change will break feature XXX.”

Good: “Will there be a possible negative impact on XXX with your change?”

Be open to new ideas

You may have an entirely different approach to solving a specific problem. Being open helps you learn new and possibly better approaches instead of imposing your approach on your team members.

Bad: “This approach sucks, use XXX.”

Good: “I have a similar feature implemented using approach XXX because YYY does ZZZ. You can learn more about this on LINK XXX.

Acknowledge people's level of experience

Everybody is not on the same level of experience with you, so state the obvious without being sarcastic about it or treat people like they don't deserve to be Software Engineers. Pointing out useful examples or suggesting a way to implement it will help get everyone on the same page.

Bad: “Can’t you see that this is wrong, letting a break in XXX break the app?”

Good: “You can make this fail-safe and return early by doing XXX.

Be respectful

It doesn’t cost anything extra to be respectful when letting people know that the submission doesn’t meet the code standard for quality.

Bad: “This code doesn't meet the minimum standard. Didn't you read CONTRIBUTING.md before making this PR?

Good: “Thanks for your contribution. However, it cannot be accepted in its current form; there are multiple problems (as outlined below). Consider reading CONTRIBUTING.md, that could help us find a path forward.”

Be a team player

When reviewing many lines of code at once, you are less likely to find bugs. So, if a PR contains many files that will take much time to review at once, be polite when letting the submitter know about it. The codebase belongs to the team. Also, as a submitter, keep your pull requests small to speed up review time.

Bad: “This contains quite a lot. I do not have time to review it.”

Good: “Could you please break this down into smaller changes? I do not have a lot of time and this contains quite a lot to review at once.”

Be polite

When a PR wouldn't be allowed to slide through due to details that may seem minor like formatting, saying “please” shows that you respect the submitter’s time and can go a long way in getting the submitter to make the change without feeling bad.

Bad: "This code is not properly formatted"

Good: "Could you please align these variable definitions so they’re easier to read?"

Show appreciation

Always show appreciation when a team member does a good job. As a code submitter, also show that you value feedback from the reviewers. Showing that you appreciate as a motivation.

Conclusion

Peradventure code review is not yet a part of the code shipping process in your organization, you can introduce it and watch the effect it will have on your team. However, if the code review process is not well planned, it could have more cost than value. Enjoy the process, do not see it as a waste of time.

Understanding Aria

Thu, 23 May 2019 06:00:00 GMT

When working on complex UIs or dynamic JavaScript-updated content, there are times when you cannot achieve your goal using semantic HTML. This is where ARIA plays an important role. It supplements HTML and passes interactions in applications to assistive technologies. For instance, when working with modals and custom elements, there is no semantic element you can use to announce its function to assistive technologies. WAI-ARIA bridges these accessibility issues that cannot be handled with native HTML.

In this article, I will explore the areas you need to use ARIA to augment the standard DOM accessibility tree.

Web Accessibility Initiative Accessible Rich Internet Applications (WAI-ARIA) is a specification written by the W3C. It defines a set of attributes that provide ways to make web content and web applications more accessible.

This does not mean that you should add roles and aria-* everywhere, it is preferable to write semantic HTML where possible, instead of using aria attributes. Semantic HTML can function effectively because they have the implicit meaning of these ARIA roles you declare explicitly; they have built-in keyboard accessibility, roles and states.

Note: Test your site using screen readers and keyboard navigation. This will give you insights on things to improve.

Instead of creating a custom checkbox and adding ARIA role and attributes to specify its function,

<span role="checkbox"
  aria-checked="false"
  aria-label="Not checked"
  aria-labelledby="label"
  name="checkbox"
  tabindex="0"></div>
<span id="label">Custom checkbox</span>

use the actual HTML element

<input type="checkbox" aria-labelledby="label" name="checkbox">
<span id="label">Default checkbox</span>

Avoid using a <button> where <a> can suffice vice-versa. Instead of using

<a role="button">Place Order</a>

use

<button>
  Place Order
</button>

While <a> can be styled to look like a button, assistive technologies will have no clue and announce it as a link. <a> implies that when clicked on, it will navigate the user to another page. However, <button> is expected to trigger an action within the same page. Using the wrong elements makes visually impaired users miss out on the purpose of the element.

Features of WAI-ARIA

WAI-ARIA has three main features namely roles, properties, and states.

Roles define what an element is

<nav role="navigation">...</nav>

properties define attributes of elements which provide extra meaning to the element

<div aria-label="This is for screen readers">...</div>

and states define the current conditions of elements.

<label for="email">Email</label>
<input type="email" id="email" aria-disabled="true" />

Applications of WAI-ARIA

WAI-ARIA is applied in several use cases:

Landmarks

It is imperative to note that you do not have to redefine default semantics. ARIA role replicate the default semantics of HTML5 elements. Adding role to a semantic element is a duplication as they have implicit ARIA semantics. However, if you are working on complex UI, or developing for old browsers e.g. IE8, adding the role attribute is essential.

The search form is an important landmark that people will want to find, but it is not treated as one; it is read to screen readers as edit text. To treat it as a notable landmark, add the role attribute.

Try navigating to these two search fields using a keyboard and listen to what is read out by the screen reader to notice the difference.

<!-- anti-pattern but useful for old browsers e.g. IE8 -->
<main role="main">...</main>

<!-- standard -->
<main>...</main>
<input
  type="search"
  role="search"
  placeholder="Search..."
  aria-label="Search for products, brands and categories..."
/>

Announcing Updates

Dynamic contents are not reported to screen readers by default. Use aria-live to report these updates. While aria-live="polite" informs the user about a particular change when they are idle, aria-live="assertive" intercepts whatever they are doing and announces the update.

<input
  type="search"
  role="search"
  placeholder="Search..."
  aria-label="Search for products, brands and categories..."
/>
<ul aria-live="polite" id="search_results">
  <li>item 1</li>
  <li>item 2</li>
</ul>

However, only the updated part is read out. You can use aria-atomic="true" to control the area of the live region to be read out. When it is set to false, only the updated area will be read out. aria-busy="true" forces screen readers to wait till all updates are complete before reading the update.

<div aria-live="polite" aria-atomic="true" aria-busy="true">
  <span>Total: $400</span>
</div>

Bridging Accessibility Gap

When creating complex UIs that cannot be achieved with native HTML elements, use ARIA attributes to bridge the gap. WAI-ARIA extends the tabindex attribute to make non-focusable elements focusable.

tabindex="0" provides tabbable functionality to elements that are not tabbable.

tabindex="-1" allows non-tabbable elements to receive focus programmatically using JavaScript or as the target for links.

<nav>
  <ul>
    <li>
      <a href="#about">
       About
      </a>
    </li>
  </ul>
</nav>

<section id="about" tabindex="-1">
  About Us
</section>

Error Alerting

You can use ARIA roles and attributes like alert and aria-relevant for alerting users about errors. The aria-relevant attribute is used to control what gets read out when a live region is updated i.e. content additions or removals.

<div class="errors" role="alert" aria-relevant="all">...</div>

Form Handling

There are different aria attributes used for form handling. You can use aria-disabled attribute to define the current state of elements on web applications. aria-disabled="true" tells a screen reader that the form input in focus is disabled.

aria-required="true" should be used on required form input to specify that the input needs to be filled in and aria-invalid="true" is used to specify invalid form entries.

<label for="email">Email</label>
<input id="email" type="email" aria-required="true"/>

Form Labelling

Labels are texts used to describe the purpose of the form control. You should associate form controls with a label implicitly or explicitly. This is exposed to assistive technologies and also makes the clickable area larger when users interact with the form field.

Aria-label

This adds additional information about a particular field that can only be accessed by assistive technologies. This overrides any other native labeling mechanism, such as a label element.

<label for='date-of-birth' aria-label="This is for screen readers">Date of birth</label>

<select name='date-of-birth' id='date-of-birth' aria-label="Date of birth">
  <option value='1990'>1990</option>
  <option value='1991'>1991</option>
  <option value='1992'>1992</option>
  <option value='1993'>1993</option>
  <option value='1994'>1994</option>
</select>

Aria-labelledby

Aria-labelledby allows you to define an ID on an element which you can reference as the label for another element or elements.

<label id="emaillabel">Email Address</label>
<input id="email" type="email" aria-labelledby="emaillabel" />

Aria-describedby

This references an element ID that has further description for the control.

<p id="toppingslabel">Which of these toppings do you prefer?</p>

<div>
  <input
    type="radio"
    id="strawberry"
    value="strawberry"
    name="toppings"
    aria-labelledby="toppingslabel"
    aria-describedby="moreinfo"
  />
  <label for="strawberry">Strawberry</label>
</div>

<div>
  <input
    type="radio"
    id="vanilla"
    value="vanilla"
    name="toppings"
    aria-labelledby="toppingslabel"
    aria-describedby="moreinfo"
  />
  <label for="vanilla">Vanilla</label>
</div>

<span id="moreinfo">
Provide additional information relevant to the section referencing it
</span>

Aria-owns

This attribute is used to tell assistive technology that an element that is separate in the DOM should be treated as a child of the current element.

<div role='menu'>
  <div role='menuitem' aria-haspopup='true' aria-owns='submenu'>
    View More
  </div>
</div>
<div role='menu' id='submenu'>
  <div role='menuitem'>
    Active users
  </div>
</div>

Conclusion

Having learnt all these, it is time to get to work. Test your site or web apps and ensure that they are usable. If not, apply the concepts you have learnt to make the web a better place for all. Feel free to learn more about aria attributes.

Building Accessible Web Apps

Thu, 09 May 2019 06:00:00 GMT

The web plays a central role in our daily lives—it is home to information, services, and opportunities. However, when accessibility is overlooked, many of these resources become unusable to a significant portion of users. Accessibility should be an integral part of the design and development process, not an afterthought. An accessible application is, quite simply, a better user experience (UX).

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee

In this article, we’ll explore the fundamentals of web accessibility, common pitfalls, and practical tips to help you build inclusive and usable web applications.

What Is Accessibility?

Web accessibility means ensuring that the content and functionality of a website or application can be used by people with a wide range of abilities and impairments. At its core, accessibility is about inclusion—designing and building experiences that work for everyone.

The term a11y is a common shorthand for accessibility. It’s a numeronym, meaning there are 11 letters between the “a” and the “y” in the word.

An accessible web application is one that:

Can be navigated using a keyboard or screen reader
Uses the correct HTML elements for their intended purpose
Works well across desktop and mobile devices
Remains usable on slow or unreliable network connections
Is accessible regardless of geographic location
Maintains sufficient color contrast for readability

Why Accessibility Matters

Inaccessibility affects people far beyond the web. Consider a building that only has stairs and no ramp or elevator. Individuals using wheelchairs, parents with strollers, or someone temporarily injured are effectively excluded. Buildings designed with accessibility in mind remove these barriers.

The same principle applies to web applications. Small clickable areas, poor contrast, missing labels, or keyboard traps can make an app frustrating—or impossible—to use for many people.

Statistics consistently show that a large portion of the population experiences disability at some point in their lives—whether permanently, temporarily, or situationally. Users of your application may experience one or more of the following types of impairments:

Types of Impairments

Motor impairments These involve limited or lost movement or muscle control. Examples include permanent conditions (e.g., limb loss), temporary injuries (e.g., a broken wrist), or situational limitations (e.g., using a device while holding a baby).
Visual impairments This includes blindness, low vision, and color blindness. Users may rely on screen readers, braille displays, magnification tools, or high-contrast modes. Even bright sunlight can create a situational visual impairment.
Hearing impairments Deaf or hard-of-hearing users may miss information conveyed solely through sound. Similarly, users in noisy environments or wearing headphones may not hear audio-only cues.
Cognitive impairments These include conditions such as dyslexia, ADHD, and autism, which can affect memory, concentration, comprehension, and decision-making.

To address these needs, the Web Content Accessibility Guidelines (WCAG) were created.

WCAG and the POUR Principles

The Web Content Accessibility Guidelines (WCAG) are built around four foundational principles, often summarized as POUR:

Perceivable Information must be presented in ways users can perceive. Provide text alternatives for non-decorative images, captions for videos, and avoid using color alone to convey meaning.
Operable Users must be able to navigate and interact with the interface using various input methods, including keyboards. Navigation should be predictable and free of traps.
Understandable Content and interactions should be clear and intuitive. Maintain consistent layouts, labels, and behavior throughout the application.
Robust Content should be well-structured and compatible with a wide range of user agents and assistive technologies, both current and future.

Common Accessibility Antipatterns

Avoid these frequent mistakes:

Using non-semantic elements where semantic HTML is appropriate
Removing focus styles with outline: none without providing a visible alternative
Assigning tabindex values greater than 0, which disrupt natural tab order
Using tabindex on non-interactive elements unnecessarily
Low color contrast between text and background
Icons or images without accessible text alternatives (unless decorative)
Form inputs without associated <label> elements
Using symbols (e.g. *) in forms without explaining their meaning
Vague link text like “click here” or “read more”.

<!-- anti-pattern -->
To know more about accessibility, <a href="/documentation"> click here</a>

<!-- standard -->
<a href="/documentation">Read the documentation</a> for more information about
accessibility.

Preventing users from zooming or scaling the page.

<!-- anti-pattern -->
<meta
  content="initial-scale=1, width=device-width, height=device-height, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>

<!-- standard -->
<meta content="initial-scale=1, width=device-width" />

Building Accessible Web Applications: Practical Tips

Follow a logical DOM order and ensure tab order matches it
Manage focus intentionally when updating content dynamically (e.g., using tabindex="-1")
Provide clear visual affordances for interactive elements—don’t rely on hover alone
Use proper heading hierarchy (h1–h6) and semantic HTML
Write meaningful alt text for images; this also benefits SEO
Allow users to zoom and scale content freely
Include a “skip to main content” link for keyboard and screen reader users. This gives them access to the main content without spending much time going through the navigation.

<body>
  <a href="#main-content" className="skipToMain">Skip to main content </a>
  <header>Header</header>
  <main id="main-content"></main>
  <footer>Footer</footer>
</body>

.skipToMain {
  background-color: #bf1722;
  color: #fff;
  font-size: 14px;
  left: 0;
  padding: 5px;
  position: absolute;
  top: -50px;
  z-index: 999;
  -webkit-transition: top 1s ease-out;
  transition: top 1s ease-out;
}

.skipToMain:focus {
  top: 0;
}

Write descriptive, purpose-driven link text
Avoid relying on the title attribute for critical information
Ensure sufficient color contrast throughout the interface
Use visually hidden text (sr-only) to provide context for assistive technologies

<span className="sr-only">Share article on Twitter </span>

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Test regularly with screen readers and keyboard-only navigation

Auditing a Web Application

Accessibility testing should be part of your regular workflow. Screen readers are especially valuable, as they expose how assistive technologies interpret your UI by announcing element roles, names, states, and values.

Helpful tools include:

Screen readers: VoiceOver (macOS), NVDA (Windows), Orca (Linux)
Accessibility Insights
Axe browser extension
ChromeVox
Color contrast checker and analyzer
Pa11y
NoCoffee (vision simulation)
Tenon
WAVE

Using Screen readers to Evaluate Web Accessibility

Non Visual Desktop Access (NVDA)

Quick Keys: H: Headings, K: Links, B: Buttons, L: Lists, D: Landmarks

Launch using Insert key (the default key also called NVDA key) or set it to use the Capslock key
NVDA + N key to activate the NVDA menu
NVDA + Down arrow key to read everything from your current reading position
Down arrow key to read the next line
Up arrow key to read the previous line
Use the CTRL key to terminate the application
NVDA + F7 to view all the element list (links, headings and landmarks on a page)
Arrow keys: To navigate in browse mode
Tab: Move focus to the next control
Shift + Tab: Move focus to the previous control
Spacebar: To focus for control
ESC: Exit focus mode

Voice Over

Command + F5 to activate VoiceOver
Normal keyboard operation (TAB, Shift+TAB, ESC, arrow keys etc.) work as normal with VoiceOver running
Command + L to jump to address bar
Control + Option + Spacebar to activate link, button or other element
Control + Option + A to start reading the entire web page from the current position. You can pause the reading by pressing the Control key.
Control + Option + ← ↑ ↓ → to explore content
Control + Option + Command + H to move forward by heading
Control + Option + Command + Shift + H to move backward by heading
Control + Option + W to have a word spelt out
Control + Option + U to open Web Rotor which helps you quickly jump to different types of content such as headings, links, tables, form controls, and landmarks. Type search term with Web Rotor open to search within Web Rotor. Enter to move VoiceOver focus to an item from Web Rotor

Conclusion

Building accessible web applications goes far beyond what can be covered in a single article. However, every improvement—no matter how small—helps create a more inclusive web. Accessibility expands your audience, improves usability, and reflects empathy in design.

To continue learning, explore these resources:

Web Content Accessibility Guidelines (WCAG)
WebAIM WCAG Checklist
W3C Web Accessibility Initiative (WAI)
WAI-ARIA Specification
WebAIM guides on using VoiceOver and NVDA

An accessible web is an inclusive web. Design with empathy—and leave no one behind.

Sizing in CSS: px vs em vs rem

Thu, 25 Apr 2019 06:00:00 GMT

We have been conversant with using pixels for sizing in CSS, but why use em or rem? When building accessible websites, you need to consider inclusion. When you use px, you don't put user preferences at the forefront. When the user zooms in or change the browser font setting, websites need to adjust to fit the user's setting. px do not scale but em and rem scales.

Sequel to this, setting the font size of the html element in percentage is recommended. Assuming the browser font size is set to 16px (i.e. the default), setting the font size of the html (root) element to 62.5% will default 1rem to 10px.

You may have used em and rem CSS units for a while but the difference between the two still appears vague. In this article, I will discuss the difference and when to use a particular unit to avoid building websites with unproportionate sizing.

The Difference

Pixel (px) is a commonly used CSS unit on websites. px is not scalable, it is an absolute unit. Change in the value of another element does not affect the value of absolute units. The value assigned is fixed irrespective of the user setting.

Element (em) and Root element (rem) are responsive units interpreted into equivalent px unit by the browser. They are relative units. Change in the value of the parent or root element affects the value of relative units. They scale with the device. So, what makes the two different? The difference lies in how the values are derived by the browser. To view the computed values, open the Chrome Developer Tools and navigate to the Computed tab.

The computed pixel value of em unit is relative to the font size of the element being styled. This is also affected by inherited values from the parent elements unless it is explicitly overridden by a px unit which is not subject to inheritance.

The computed pixel value of rem unit is relative to the font size of the root (html) element. This is however affected by the font size setting on the browser as a result of inheritance unless it is overridden by a px unit which is not subject to inheritance.

Using em

With em unit, the computed pixel value is derived from the font size of the styled element while putting the inherited (parent and grandparent) values into consideration. Using em unit can turn out to be complex. em units should be used to allow for scalability within the context of a specific design element e.g. setting the padding, margin and line-height of menu items to use em values works well to properly scale navigation menu items.

em:

Unit = Font size of the element being styled x Specified value of the element being styled

Given a section element with a font size of 14px, when you create a rule, with the padding property set to 3em, it would evaluate to 42px (14 x 3 = 42). This is irrespective of the font size assigned to the html element. Simply put, the font size of the element on which em unit is declared determines the pixel unit value.

/* style */
html {
  font-size: 18px;
}

section {
  font-size: 14px;
  padding: 3em;
}

/* computed style */
html {
  font-size: 18px;
}

section {
  font-size: 14px;
  padding-bottom: 42px;
  padding-left: 42px;
  padding-right: 42px;
  padding-top: 42px;
}

Using rem

When you use rem, the px equivalence depends on the font size of the html element.

rem:

Unit = Font size of the root html element x Specified value of the element being styled

Given a web page with its root element assigned a font size of 18px, and the margin property assigned a value of 2rem. The computed value for the margin would evaluate to 36px (18 x 2 = 36).

/* style */
html {
  font-size: 18px;
  margin: 2rem;
}

/* computed style */
html {
  font-size: 18px;
  margin-bottom: 36px;
  margin-left: 36px;
  margin-right: 36px;
  margin-top: 36px;
}

The Effect of Inheritance on em Unit

When inheritance is applied to em CSS units, the method of calculating the equivalent pixel varies. With em, the child element inherits the value of its parent and up to the grandparent. This alters the supposed pixel value as the inherited value is put into consideration.

em:

Unit = Font size of the element being styled x Font size of the parent and grandparent elements (if any) x Specified value of the element being styled

<section class="page-wrapper">
  Grandparent
  <div class="container">
    Parent
    <div class="container">
      Child
    </div>
  </div>
</section>

/* style */
html {
  font-size: 16px;
}

.page-wrapper {
  font-size: 1.5em;
}

.container {
  padding: 2em;
}

To calculate the padding value of the .container class above, inheritance is put into consideration.

/* computed style */
html {
  font-size: 16px;
}

.page-wrapper {
  font-size: 24px;
}

.container {
  padding-bottom: 48px;
  padding-left: 48px;
  padding-right: 48px;
  padding-top: 48px;
}

The section having page-wrapper class inherits the font size of the parent (html) element (16px). It multiplies that value by the font size (1.5em) which computes to 24px (16 x 1.5 = 24px).

Apparently, the value of the padding specified on the container class will inherit from the parent element. Its padding value will now be computed to 48px (24 x 2 = 48).

If the container class specifies a font size in em unit, the calculation will be extended further to use that value. e.g If a font size of 1.5em is specified on the container class,

/* style */
html {
  font-size: 16px;
}

.page-wrapper {
  font-size: 1.5em;
}

.container {
  font-size: 1.5em;
  padding: 2em;
}

the padding value will be computed as:

Font size of the grandparent element (html) x Font size of the section (page-wrapper) x Font size of the div (container) x the padding value

This will equate to 57.6px (16 x 1.5 x 1.5 x 2 = 72).

/* style */
html {
  font-size: 16px;
}

.page-wrapper {
  font-size: 24px;
}

.container {
  font-size: 36px;
  padding-bottom: 72px;
  padding-left: 72px;
  padding-right: 72px;
  padding-top: 72px;
}

To override this inherited value, you need to explicitly set the unit of the element being styled to px.

For instance,

<section class="page-wrapper">
  Grandparent
  <div class="container">
    Parent
    <div class="container">
      Child
    </div>
  </div>
</section>

With style:

html {
  font-size: 16px;
}

.page-wrapper {
  font-size: 24px;
}

.container {
  font-size: 1.5em;
}

Note that the font size value of the div with container class above is computed based on its parent element, not the root. The interesting thing here is that the Parent and Child in the HTML above do not have the same font size irrespective of the fact that they share the same class name. The font size of Child is computed based on its parent i.e Parent and the font size of Parent is computed based on its parent i.e Grandparent.

It is computed as:

<section class="page-wrapper">
  Grandparent (24px)
  <div class="container">
    Parent (24 x 1.5 = 36px)
    <div class="container">
      Child (36 x 1.5 = 54px)
    </div>
  </div>
</section>

While using em, it is advisable to define the font size on the html element instead of declaring it explicitly on other elements.

The Effect of Browser Settings

The font size set on the browser by the user can affect the value when CSS rem unit is used within a web application. This affects em units also as a result of inheritance.

When no font value is set on html element

Given the example below,

/* style */
html {
  box-sizing: border-box;
}

.page-wrapper {
  font-size: 2rem;
}

the font size of the element with the class name of page-wrapper will depend on the browser settings since no font size is set on the root element. By default, the browser font size is set to 16px and inherited by the root element. If a user alters the font size of the browser through the settings, the page would be rendered to conform to the settings. Assuming the user sets the default font size to 14px, the computed font size value for page-wrapper will equate to 28px (14 x 2 = 28).

When em or rem font value is set on html element

When an em or rem font value is set on the html element with a custom browser setting, the computed pixel value will be a multiple of the browser font size setting with the specified font size.

For instance, if a website's html element has a font-size property set to 1.5em, and the browser font size set to 14px, the computed pixel value of the root element would be 1.5 x 14 = 21px.

The Recommended Setting

Setting the font size of the html element in percentage is recommended. This solves the problem.

Assuming the browser font size is set to 16px (i.e. the default), setting the font size of the root html element to 100% will default 1rem to 16px. This is still not the optimal solution. A better approach will be to use 62.5%. This will equate 1rem to 10px. Starting with this as the base simplifies the calculations.

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  font-size: 1.6rem; /* 16px */
}

.page-header {
  font-size: 3.2rem; /* 32px */
}

For browsers that do not support the usage of rem, you can use SCSS mixin or provide a fallback.

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  font-size: 16px;
  font-size: 1.6rem;
}

.page-header {
  font-size: 32px;
  font-size: 3.2rem;
}

Final notes

Use preprocessors to abstract the calculations using a px to rem converter function
Use em only for sizing that needs to scale based on the font size of an element other than the html (root) element.
Use rem unit for elements that scale depending on a user's browser font size settings. Use rem as the unit for most of your property value.
For complex layout arrangement, use percentage (%).

You may want to learn more about writing better CSS in a codebase

Finding Unused CSS

Thu, 11 Apr 2019 06:00:00 GMT

Research shows that a higher percentage of users will abandon a site if it takes longer than 3 seconds to load. To retain these users who visit your website, it is important to curtail what you ship to them and increase the page load time.

In this article, I'll be looking at a way to find unused CSS and get rid of them to improve the website's performance.

Unused CSS. What are You?

These are CSS declarations on a website that have no impact when rendering the web page.

CSS declarations for features no longer being used still existing within the codebase are unused. Frameworks and libraries have more impact as you don't tend to use all declarations within the framework or library This bloats the page size and impacts performance.

By default, the browser downloads and parses CSS before the content of a web page can be rendered, The more it has to download and parse, the longer it takes to render the page. The longer it also takes for users to view contents on their screen leaving the users staring at a blank screen. The more they wait, the higher the chance of losing them to a competitor. Therefore, removing unused resources is critical.

How to Remove Unused CSS

There are lots of tools for removing unused codes such as unusedCSS, unCSS, purifyCSS, purgeCSS etc. But I will focus on using the coverage tab on Chrome DevTools.

Using the Coverage Tab

The coverage tab on Chrome gives us the ability to find unused CSS and JavaScript codes. When you load a page, it gives you a summary of unused code in relation to the total size of the code. All you need to do is to remove the unused codes and ship only what you need.

To access the Coverage tab:

Open Chrome DevTools using CMD + OPT + J or CTRL + SHIFT + I
Open the Command Menu using CMD + SHIFT + P or CTRL + SHIFT + P
Type Coverage and select Show Coverage option.
Click on record button to capture the coverage

To view unused codes:

Navigate to the Sources panel
Click on a URL in the Coverage panel to view that file in the Sources panel with a breakdown of lines of code executed or not.

The lines of code are colour-coded. Green indicates executed lines of code while red shows the lines of code not executed on a web page.

Codes not executed on a specific page do not mean that it was not used on the website. You need to check different pages on the website to ascertain that the lines of code weren't used.

In conclusion, to reduce the time it takes to render a web page, you need to remove resources not needed and improve performance.

Browser Extensions You Should Have as a Techie

Thu, 28 Mar 2019 06:00:00 GMT

We are in a busy world where different things fight for our attention at the same time. Opening a new tab may mean that you will never go back to the previously opened tab. So, why not utilize each new tab to learn a thing or two.

In this article, I will highlight the browser extensions I find useful that you as a techie should consider exploring too.

A browser extension is a small software module for customizing a web browser.

Browser extensions perform various functions such as user interface modifications, ad blocking, grammar check, educating the user, etc. You can leverage on certain browser extensions to learn more and widen your knowledge base.

Now, let's discover some browser extensions you need to have as a techie.

30 Seconds of Knowledge

It has the tagline "Become a better Developer, one New Tab at a time". This loads a random code snippet each time you open a new tab. 30 Seconds of Knowledge features 6 Programming Languages and Interview Questions (at the time of writing) that you can read and understand in 30 seconds or less. You can also save snippets which you can access anytime.

Accessibility Insights for Web

This is basically an extension that helps developers identify common, high-impact accessibility issues in web apps and sites.

AdBlock Plus

Adblock Plus is a free and open source browser extension that blocks ads thereby helping you experience a better and faster web.

Altair

GraphQL query simplified. Altair ships with a number of useful features including pretty-printing your query, linting your query, showing schema docs, providing autocomplete functionality, the ability to set headers for your request and more. If you work with GraphQL, consider installing this extension.

Clear Session

Helps you to clear cookies, local storage and session storage from the website you're currently on with a single click.

ColorZilla

An extension that assists web developers and graphic designers with color related tasks. It includes Color Picker, Webpage Color Analyzer, Gradient Generator and many more.

DailyNow

Every day, new and updated software development technologies are being released across the web. DailyNow curate dev news to help busy developers stay updated. It gives you access to articles on every new tab you open.

Full Page Screen Capture

Full Page Screen Capture as the name implies captures the full view of a page without hassle.

Grammarly

Grammarly goes through your messages, documents, and social media posts to ensure that they are mistake-free and impactful. It validates your writings nearly everywhere you write on the web.

The Great Suspender

This ensures your computer run smoothly by suspending the tabs that have not been viewed after a configurable length of time. It frees up the memory and CPU being consumed by that tab. It also ships with the flexibility to whitelist specific URLs or domains

JSON Viewer

JSON Viewer is a Chrome extension for rendering JSON and JSONP data in a readable and prettified manner.

Muzli

Muzli delivers design inspiration each time a new tab is opened in your browser. It curates innovative illustrations, design features, unique websites, photography projects, and visual art from design experts across the web to keep you in-the-know and constantly inspired.

nBox

Sceptical about signing up on certain websites with your email address? nBox generates an email address for each site, for free. This keeps you anonymous and safe on the web.

Pocket

A better way to save articles, videos and more. When you find something in Chrome that you want to view later, put it in Pocket and easily access it later even without an internet connection.

React developer tools

An open-source React JavaScript library that allows you to inspect the React component hierarchies and more in the Chrome Developer Tools.

Redux DevTools

Used for debugging application's state changes. The extension provides power-ups for your Redux development workflow.

SimilarWeb

SimilarWeb’s browser add-on gives you in-depth traffic and key metrics for any website.

Toby

Aims to change the way you save and access tabs. Toby helps you organize your browser tabs for easy access to them. It helps declutter your web browser.

Vue.js devtools

Vue.js devtools is a Chrome and Firefox DevTools extension for debugging Vue.js applications.

VisBug

Described as a FireBug for designers, Visbug acts as a debug tool for designers. It enables you to edit or style any page, in any state, like it's an artboard. It aids the decision-making process on the front end of your site.

Wappalyzer

Wappalyzer helps you discover what technology a website is built with. It detects content management systems, e-commerce platforms, web frameworks, server software, analytics tools and many more.

Wikiwand

This gives a new look to Wikipedia. Wikiwand optimizes the content for a quicker and significantly improved reading experience.

Momentum

Momentum is not specific to techies. Everyone would find it useful. It aims to eliminate distraction and provide inspiration, focus, and productivity. Momentum displays random photographs and motivational quotes daily on your new tab page. It also helps you set goals for the day and remain focused.

You don't have to use all these extensions. Just use the ones that meet your needs and help your friends discover this.

Avoiding Shell Hell: Aliases to the Rescue

Thu, 14 Mar 2019 07:00:00 GMT

I recently gave a talk on "Avoiding Shell Hell: Aliases to the Rescue" at the forloop Lagos Summit. An event organized by forloop Africa in Lagos, Nigeria. It was actually my first conference talk. What a good way to mark International Women's Day!

So, I gave my first conference talk today at #forlooplagossummit #IWD2019
— Chiamaka Ikeanyi ♦️ (@chiamakaikeanyi) March 8, 2019

I really appreciate Sarah Drasner’s tweet about my talk at the conference.

If you don't already use shell aliases, you should definitely check out this talk by @chiamakaikeanyi- they save time, help keep in you flow state, and well, make you feel just a litttttle bit more like a badass.https://t.co/numRY2iTDl
— Sarah Drasner (@sarah_edo) March 12, 2019

In this article, I will discuss what I talked about for the benefit of those who could not attend the conference:

The issues with bash
What aliases are
Why we need to use aliases
How aliases can be used to improve our terminal productivity.

Shell aliases are a hack to developer productivity. Developers spend a couple of time typing long commands from Git to Docker, Kubernetes etc. when these could be aliased saving the time to achieve more in less time.

Can you remember the time when you need to open different terminal processes to get the job done? You run a command and discover that there is a typographical error within it. Then, you retype the command or bring the previous command to focus and edit it hoping you don't make another mistake. I don't mean to bash on Bash but the experience is terrible. Time is too precious to be spent typing long commands.

Now, you can use iTerm2, configure it to use ZSH, and set up aliases in addition to the default aliases that ships with ZSH.

Why this setup?

iTerm2 provides features like split panes, search using CTRL + R, autocomplete, etc. Press CTRL + R to search through commands based on what you type. Continue to hit CTRL + R to navigate through multiple results.

ZSH and Oh My Zsh for managing the ZSH configuration is a must have. It features plugins, history completion - start typing a command and use the up and down arrow keys to navigate through matching history entries etc. This saves you time to get more done.

Say Hello to Aliases

gc

Do you know what it means? Well, it can mean anything - google cloud, gmail compose ... but in this scenario, it is an alias to git commit.

Wondering what that means? An alias is an alternate name for a command. It is basically a shortcut. Aliases instruct the shell to replace one string with another when executing commands.

With aliases, you

spend less time typing
reduce the chances of typos in a long command
speed up your terminal workflow

Looking at

docker ps | grep $image_name

Is it cool? Of course not! You can actually achieve the same output with

dgp $image_name

Does it look confusing? It is an alias.

Why Aliases

Consider a scenario whereby a client requests for a web page and it's being served at the moment. After a short while, another client requests for the same data and is served a HTTP error 500 page. In order to debug this, you needed to run some commands which are time-consuming. While still debugging, you lose the clients accessing your website thereby losing money that you would have made from them. Using aliases, this could be avoided; the less the commands typed, the faster you get close to the solution of the problem

Aliases are popularly used in

Git
Docker
Kubernetes etc.

Having seen the importance of aliases, you may be asking if you should alias every command. Well, not really. You do not need to alias every command. You only need to create aliases for long commands that you use frequently. Lazy software engineers find this helpful but come to think of it, lazy people get more done; they automate tasks. They wouldn't want to keep typing the same command every time.

Instead of typing:

git add .
git commit -m "Issue-tracking-code: Issue"
git push origin branch_name

they would rather type:

gac "Issue-tracking-code: Issue"
gpo branch_name

or something less and use the remaining time they have to relax. Now, consider the time you save every time you use dgp instead of docker ps | grep.

Syntax

To create an alias, use the format

alias name = command

If there is a space(s) in the command, use

alias name = "command with space"

If you have variable in the command, use the syntax

alias nis='f() { npm install --save "$@" };f'

where f can be anything.

For commands containing variables, using double quotes, the variable is resolved at definition time, but with single quotes, it is resolved at invocation time.

You can create aliases for a particular session within the terminal. But once the session is ended, it becomes unavailable. To create permanent aliases, store them within a dotfile in the home directory.

The default files are:

Bourne-again shell (BASH): ~/.bashrc and ~/.bash_profile
Z Shell (ZSH): ~/.zshrc

These are not the only shells in existence. There are other types e.g. Powershell, Friendly Interactive Shell (FISH) etc. But I'll be focusing on BASH and ZSH.

To ascertain the file within your home directory, switch to that directory and list all the files it contains including the hidden files.

echo $SHELL   # ascertain the location of the shell
CD ~          # switch to the home directory
ls -la        # show all files within the directory including the hidden files
touch ~/.bash_profile   # create a .bash_profile file if it doesn't exist

You can use any name for the dotfile.

To configure your project directory to use Git, instead of typing the long command used for setting Git up, you can create aliases for different workspaces. Then, whenever you need to configure a directory to use Git, run the command using the alias.

alias workspace="git config user.name 'your_name'
&& git config user.email 'your_email'"

For instance, if you have set the global Git configuration on your computer to use your personal details, and you quickly need to resolve an issue from home, all you need to do is to clone the repository, navigate to the directory, and run the alias e.g. workspace. This configures the directory.

To launch my blog on my default browser, I type blog within the terminal, an alias I had to set up within the ~/.zshrc file.

alias blog="open https://chiamakaikeanyi.dev"

You can set up as many aliases as you need. Press CTRL + X to save. When it asks you to confirm, enter Y and press ENTER. Afterwards, reload the file for the changes to take effect.

To reload, run

source ~/.zshrc

or

. ~/.zshrc

Substitute ~/.zshrc with ~/.bashrc or ~/.bash_profile depending on the file you are making use of.

Accessing your Aliases

Aliases can be accessed using different methods.

nano ~/.zshrc
vim ~/.zshrc
cat ~/.zshrc
open ~/.zshrc
code ~/.zshrc
alias

Use any method that works for you.

Note that if you cannot access files using VS Code code command, you need to install it. Launch VS Code, press CMD + SHIFT + P, type shell command and select Install code command in path.

To be more productive, you can set up a script to create an alias for the last command used before it was invoked.

#!/bin/sh

addAlias() {
  last_command=$(echo `history | tail -n1` | sed 's/[0-9]* //')
  echo alias $1="'""$last_command""'" >> ~/.bash_profile
  . ~/.bash_profile
}

This evaluates the piped (`) command i.e. fetching the last command from the history, reads the result using the stream editor, and assign it to last_command variable.

Then, create an alias using the argument passed to it as the alias and the result of the evaluation as the command assigned to it. Then, save the alias within the specified file (in this case ~/.bash_profile). Afterwards, it reloads the file.

For any command you do not understand its function, run man keyword within the terminal to view the manual e.g. man sed.

Setting up Aliases on Windows

Setting up aliases on Windows is a bit different. You need to follow the steps below.

Create a .bat or .cmd file within the root directory e.g. C:\Users\UserName
Run regedit to edit the registry
Navigate to HKEY_CURRENT_USER\Software\Microsoft\Command Processor
Add a string value entry with the name AutoRun and the absolute path to the .bat file as the value (e.g. C:\Users\UserName\alias.bat). This loads the file each time cmd is run.
Open the batch file and add aliases.

@echo off should be added as the first line within the .bat or .cmd file to prevent it from executing the command once cmd is run.

To create an alias, use the format

DOSKEY name=command

Sample alias file on windows

@echo off

DOSKEY dfs=docker ps | findstr $image_name
DOSKEY ga=git add .

In the end, what matters is becoming more productive.

You can have a look at my slides and my dotfile to guide you in creating yours or possibly just reuse it.

CSS Specificity

Thu, 28 Feb 2019 06:00:00 GMT

Most times, CSS seems difficult to work with. You find out that styles you applied to a particular element don't take effect and you keep wondering why. This is as a result of CSS specificity.

Specificity is the means the web browser uses to determine the set of rules applied to a specific selector having two or more conflicting rules. The more weight a selector has, the higher the chance it stands to be applied.

In this article, I will explain what CSS specificity entails to help you make better decisions when styling web pages and avoid spaghetti code.

Hierarchy

Selectors have an order in which they have been placed in the specificity hierarchy which affects which one is considered a priority.

For single selectors from highest to lowest:

Inline styles (<nav style="color: #fff;">)
IDs (#myId)
Classes (.myclass), attributes ([type="checkbox"]) and pseudo-classes (:hover)
Elements (ul) and pseudo-elements (::before)

Rules of thumb

By default, inline CSS is considered first before internal or external stylesheets.
!important takes precedence over all declared styles.
Only use !important on page-specific CSS that overrides CSS from external libraries, e.g. Bootstrap, normalize.css etc.
To override !important that you have control over, rewrite the original rule to avoid the use of !important. For scenarios where the previous declaration has a high specificity, give the selector a high specificity in your later declaration or the same specificity making the later take priority over the former.

[id="someElement"] p {
  color: blue;
}

p.error {
  color: red;
}

The styles above have the same specificity

A more specific selector takes precedence over a less specific one

    nav {
      padding: 10px;
    }

    // The rule below has higher specificity
    nav#main {
      padding: 15px;
    }

Due to a cascading effect, rules that appear later in the code override earlier rules if both have the same specificity.

    nav {
      padding: 10px;
    }

    nav {
      padding: 15px;
    }

Universal selector (*), combinators (+, >, ~,), inherited values and negation pseudo-class (:not()) have no effect on specificity.
Styles targeted directly to an element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.

<html>
  <body id="parent">
    <h1>Title</h1>
  </body>
</html>

having the style below:

  #parent {
    color: blue;
  }

  h1 {
    color: purple;
  }

will have purple applied to it.

Calculating Specificity

A formula guides how CSS specificity is calculated. The selector with the most specific value is applied.

For each given selector, add 1 to the column it appears within the specificity table and sum up the value afterwards to derive the specificity of the selector.

S	I	C	E
0	0	0	0

Legend:

[S]: Inline styles

[I]: ID selectors

[C]: Classes, attributes and pseudo-classes

[E]: Elements and pseudo-elements

Start at 0,

1000 for style attribute,
0100 for each ID,
0010 for each attribute, class or pseudo-class,
0001 for each element name or pseudo-element.

Use Cases

section #content .data a:hover {...}

Using the formula,

S	I	C	E
0	1	2	2

specificity = 0 1 2 2

Given an unordered list of two items having conflicting rules,

<ul class="list">
  <li class="item">1</li>
  <li class="item">2</li>
</ul>

  .item {
    color: #e90b8d;
  }

  ul > li {
    color: #fff;
  }

To determine the more specific selector, calculate the specificity of each selector.

Selector 1 has one class:

  .item {
    color: #e90b8d;
  }

S	I	C	E
0	0	1	0

specificity = 0 0 1 0

Selector 2 has two elements

  ul > li {
    color: #fff;
  }

S	I	C	E
0	0	0	2

specificity = 0 0 0 2

Result:

From the above calculation, you can see that selector 1 has a higher specificity (10) than selector 2 with a value of 2. Therefore, the list items will be pink in color (#e90b8d).

Check out the visual representation of CSS specificity for more information.

VS Code Setup to Improve Productivity

Thu, 14 Feb 2019 06:00:00 GMT

Code editors have evolved over the years. A few years ago, there was no Visual Studio Code (VS Code). You were probably using Sublime Text, Atom, Bracket, etc. But with the release of VS Code, it has become the favourite code editor of most software developers.

Why VS Code?

Customizable
Easy Debugging
Emmet
Extensions
Git Integration
Integrated terminal
Intellisense
Theming and more...

Having seen the advantages of using VS Code, this article will cover VS Code setup and extensions needed when using VS Code from the lens of productivity.

Emmet

Used in many popular text editors, this greatly improves HTML & CSS workflow. To access this, press CMD + SHIFT + P. Then, search for emmet. This shows a list of actions that can be performed using emmet.

For instance, to display five divs with the class name item, all you need is

.item{$}*5

Then, press the Enter key. The result is

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>

CSS use case:

Within any CSS selector, type

p20

Then, press the Tab key. The result is

padding: 20px;

Emmet requires a little configuration to work with frameworks such as React etc. Navigate to VSCode settings.json file and add:

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "vue-html": "html"
}

Then, you can type div.page-wrapper and press the Enter key. This will result to

<div className="page-wrapper"></div>

Font

Fira Code looks cool as a result of the support for ligatures. It makes your code readable at a glance. Download and install Fira Code, then add it to your settings.json file.

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,

Launching from the command line

Launching VS Code from the terminal looks cool. To do this, press CMD + SHIFT + P, type shell command and select Install code command in path. Afterwards, navigate to any project from the terminal and type code . from the directory to launch the project using VS Code.

Multiple Cursors

You can modify multiple lines of code at the same time. To achieve this, you need to set your preferred access KEY within your settings.json file.

"editor.multiCursorModifier": "ctrlCmd",

or

"editor.multiCursorModifier": "alt",

After setting this, press down the key set within your settings.json file, and you will be able to select multiple lines of code at the same time. This speeds up the code refactoring process.

Terminal

Bored of the default terminal shipped with your macOS? You can set up your terminal to use iTerm2 and ZSh and have your VS Code terminal setup to use that.

After configuring Zsh, launch the VS Code integrated terminal Terminal > New Terminal and run the command

source ~/.zshrc

. ~/.zshrc

to execute the content of the .zshrc configuration file in the shell.

Hacks

Automatic sub-folder creation

You can easily create a sub-folder from an already existing file. To do this, select a file and click on rename. Then, add a backslash (/) at the point you need it to be demarcated from.

E.g. To create a bio sub-folder from authorbio.js, type author/bio.js

Logging to the console

To easily log to the console, type clg and press the tab key or type log and press the enter key

Extensions

Extensions improve developer experience when working on a codebase. You can explore available options in the marketplace.

To access these extensions,

Go to View > Extensions
Search for extensions in the marketplace
Click on Install

Below are extensions that I find useful and what they do.

Add jsdoc comments

This adds comments block to the code. To use it, highlight the first line of the function, press CMD + SHIFT + P and select Add Doc Comments

Auto Rename tag

Automatically renames paired elements.

Babel JavaScript

JavaScript syntax highlighting for ES201x, React JSX, Flow and GraphQL.

CSS Peek

As the name implies, this helps you peek on rules applied by a defined style within a codebase and it's specificity. It comes in handy when working on legacy codebases.

Debugger for Chrome

This lets you debug your JavaScript code running on your Google Chrome browser right from VS Code.

Docker

You can create Dockerfiles on the fly with this extension. It also provides syntax highlighting, intellisense and much more.

Press CMD + SHIFT + P and search for Add Docker files to workspace

DotENV

Adds syntax highlighting to .env files.

ES7 React/Redux/GraphQL/React-Native snippets

This provides JavaScript and React/Redux snippets in ES7 with Babel plugin features. Read the comprehensive usage guide.

Prefix	Method
imd→	import { destructuredModule } from 'module'
fof→	for(let itemName of objectName { }
imrc→	import React, { Component } from 'react'
rafcp→	Creates a react arrow functional component with PropTypes

Legend:

→ : Tab key

ESDoc MDN

In certain scenarios, we tend to forget how a particular thing works. This is where this extension becomes useful. You don't need to launch your web browser to find out the syntax. All you need is to type

//mdn object.method;

Copy the snippet below and paste on your VS Code to get a grasp of how it works.

//mdn array.filter;

ESLint

This integrates ESLint into VS Code to lint your codes. You need to have ESLint installed either locally or globally to take advantage of the features this extension offers.

To install ESLint locally, run npm install eslint or globally using npm install -g eslint. You would also need to create .eslintrc configuration file.

If you installed ESLint locally, run ./node_modules/.bin/eslint --init or eslint --init for global installation.

GitLens

GitLens boosts what you can achieve with Git. It helps you to do a lot more such as seamlessly exploring Git repositories, peeking into code revisions, authorship and much more.

Google Fonts

Adding Google fonts just got easier with this extension. You no longer need to search for fonts on the browser. To access a list of fonts, press CMD + SHIFT + P and search for Google fonts to proceed.

Highlight Matching Tag

This extension highlights matching opening and closing tags while also providing extensive styling options to customize how tags are highlighted.

HTMLHint

This extension validates your HTML helping you to write standards-compliant code

Image Preview

Image Preview shows the image preview in the gutter and on hover. This is essential as it helps you ensure that you are importing the right image at a glance.

Import Cost

Import Cost shows the impact of imported packages within the codebase. It helps measure performance bottlenecks.

Kubernetes

The extension helps developers building applications to run in Kubernetes clusters and for DevOps staff troubleshooting Kubernetes applications. It enables you view your clusters in an explorer tree view, and drill into workloads, services, pods and nodes. Works with any Kubernetes anywhere (Azure, Minikube, AWS, GCP and more)

Live Server

This launches a local development server with live reload feature.

Peacock

This extension gives you the ability to change the workspace color of your workspace. It is ideal when you have multiple VS Code instances and you want to quickly identify a particular instance.

After installing Peacock, click on the settings icon > settings, select workspace settings tab, click on {} and paste the code below.

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#734E73",
    "activityBar.foreground": "#fff",
    "activityBar.inactiveForeground": "#b5b5b5"
  },
  "peacock.affectedElements": ["activityBar"]
}

You can also add titleBar and statusBar to the affectedElements and add color customizations for them within the colorCustomizations section.

To use one of the default colors, press CMD + SHIFT + P, type peacock and select your preferred theme. This overrides the color settings within the settings.json file defined for that workspace.

Prettier

Do you always press spacebar or tab key when coding, here comes Prettier to the rescue. It formats lines of code and makes it readable. After installing Prettier, enable format on save within your editor and experience the magic of Prettier.

Polacode

As a technical writer, this comes in handy. It gives you appealing screenshots of your code snippets. It works like Carbon within your VS Code.

Step 1: Press CMD + SHIFT + P
Step 2: Select Polacode 📸
Step 3: Copy some code
Step 4: Paste into Polacode view
Step 5: Click the lens-like button below the code view to save

Quokka.js

Enjoy rapid JavaScript prototyping in your editor. Quokka.js automatically computes and print the result of code snippets. There's no need to log to the console. It supports package installation, live comments and value display features e.g. /*? $.toLowerCase() */ and //? in the Pro edition.

Get started with the steps below after installing the extension:

Step 1: Press CMD + SHIFT + P or CTRL + SHIFT + P
Step 2: Type Quokka.js
Step 3: Select an option e.g. Quokka.js: New JavaScript file
Step 4: Write your code

Shell-format

Helps in quickly formatting shell scripts, dockerfiles, ignore files, DOTENV files and more. To access this, press CMD + SHIFT + P and type Format Document.

TODO Highlight

With a lot to work on which needs to be prioritized, sometimes, you may tend to forget tasks yet to be completed. TODO highlight makes these easily seen by highlighting them.

YAML

Provides comprehensive YAML Language support via the yaml-language-server, with built-in Kubernetes syntax support. Read the comprehensive usage guide.

Configuration

VS Code configurations not specific to a workspace are housed within the settings.json. You can configure VS Code to suit your preferences.

To launch the settings.json, press

CMD + ,

Copy and paste the code below within the settings.json file

{
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.formatOnPaste": true,
  "editor.wordWrap": "bounded",
  "editor.trimAutoWhitespace": true,
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.formatOnSave": true,
  "files.autoSave": "onFocusChange",
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html"
  },
  "eslint.autoFixOnSave": true,
  "eslint.validate": ["javascript", "javascriptreact"],
  "javascript.validate.enable": true,
  "git.enableSmartCommit": true,
  "files.trimTrailingWhitespace": true,
  "editor.tabSize": 2,
  "gitlens.historyExplorer.enabled": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "workbench.sideBar.location": "right",
  "explorer.confirmDelete": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "yaml.completion": true,
  "yaml.format.enable": true,
  "yaml.format.singleQuote": true,
  "yaml.validate": true,
  "yaml.schemas": {
    "http://json.schemastore.org/composer": "/*",
    "kubernetes": "k8s/*/*.yaml"
  }
}

Writing Better CSS in a Codebase

Thu, 31 Jan 2019 06:00:00 GMT

Cascading Style Sheet (CSS) is well known in web development as the flesh of HTML documents. While HTML gives a website its structure, CSS deals with the presentation. It makes websites visually appealing while handling responsiveness using media queries.

A lot of developers hate writing CSS. Some prefer to just write the back-end logic and move on to something else. "I'll write anything but definitely not CSS" some will say.

What if you can really write good CSS? What if you believe you suck at it as a result of not giving yourself enough time to appreciate the language and learn how to write it in a better way? What if this hatred is as a result of an improperly structured codebase?

All there is to CSS is mastering the selectors, properties, values and specificity. Writing CSS is not complicated but it can be when working on big projects if not properly structured. It requires patience and love for artistry to excel if we intend to design usable web applications. The key here is to be consistent.

In my previous post, Writing Standards-Compliant-HTML, I listed a couple of guidelines we need to follow to build accessible websites or web applications. In this article, we will be looking at ways to write clean and maintainable CSS.

What we need to consider

Readability
Reusability
Maintainability

What do we need to know?

selector {
    property: value;
}

As straightforward as this syntax is, there are things we don't get right when using it. We will be looking into some of them in detail.

Style Import

When linking the stylesheet to our HTML document, having to write the file type is unnecessary. This is implied already.

/* bad code */
<link rel="stylesheet" href="path_to_file.css" type="text/css">

/* good code */
<link rel="stylesheet" href="path_to_file.css">

Code format

CSS selectors, properties, and values should be written in lowercase. Having it all in uppercase makes the stylesheet look clumsy.

/* bad code */
.site-body {
  DISPLAY: FLEX;
}

/* good code */
.site-body {
  display: flex;
}

Quotation marks

Property values should be enclosed in single quotation marks (' ') rather than double quotation marks (" ").

html,
body {
  font-family: 'Helvetica Neue', georgia, serif;
}

Box Model

We need a proper understanding of the box model to determine where padding, border and margin applies and use them appropriately. They all consist of a width and a height.

Content: Each content on a web page takes up a rectangular space with a width and a height. The content is what is displayed on the web page. It is the inner-most part of the box.
Padding: This is the transparent area surrounding the content.
Border: This area (if present) surrounds the padding and the content
Margin: This separates the element from other elements in the DOM. It is the transparent outer-most layer that surrounds the border.

Naming Convention

Looking at id and class names, we should be able to decipher the content being styled. Names chosen should not be unnecessarily long. We need to make it short and meaningful.

/* bad code */
.green-notification {
  color: #15c39a;
}

/* good code */
.success-alert {
  color: #15c39a;
}

In the code above, what happens when UI/UX engineers propose a change of color? This will affect not only the content of the styled element, but the name and HTML file(s) involved. Names should define the content or function (what it does) NOT the presentation (how it looks) of the element.

You can opt for the BEM - Block, Element, Modifier (.block__element--modifier) naming convention. It is a widely-used convention in most big projects though outside the scope of this article. E.g.

  .orderedList__item--active {
    border-bottom: 1px dashed #a974bf;
    color: #ad58ad;
  }

Specificity

Sometimes, when we style elements and expect them to reflect, they act otherwise leaving us wondering what went wrong. This is as a result of CSS specificity.

It determines the rule applied by web browsers depending on the element's position on the hierarchy.

By default, inline CSS is considered first before internal or external CSS. The order of precedence from highest to lowest is:

!important takes precedence over all declared styles.
inline CSS (html style attribute) overrides CSS rules in style tag and external stylesheets
a more specific selector takes precedence over a less specific one
rules that appear later in the code override earlier rules if both have the same specificity.

For single selectors from highest to lowest:

Inline styles (<nav style="color: #fff;">)
IDs (#myId)
Classes (.myclass), attributes ([type="checkbox"]) and pseudo-classes (:hover).
Elements (ul) and pseudo-elements (::before).

We need to understand CSS specificity to help us make better decisions when styling our documents and avoid spaghetti code.

Enforced Styles

Do you see !important everywhere when checking out styles used on a website? That is a sign of an unstructured CSS codebase. !important overrides previously declared styles. This should be avoided as much as possible. The more it appears in a codebase, the more the codebase becomes messed up and difficult to maintain.

Shorthand Properties

The more concise, the better. We should opt for shorthand properties in cases where it can be used.

/* bad code */
selector {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-right: 20px;
}

/* good code */
selector {
 margin: 10px 20px;
}

Hex Code

We should always use three (3) character hexadecimal code where possible since they yield the same result as the six (6) character equivalent. According to websiteoptimization.com, shorthand hexadecimal colors can help optimize style sheets, especially when combined with shorthand properties and grouping. The only exception should be when the named equivalent is shorter e.g. gray.

selector {
  color: #fc0;
}

Unit

Properties having zero (0) as its value should not be assigned a unit as it makes no difference.

/* bad code */
selector {
  margin-top: 0px;
  margin-bottom: 0%;
}

/* good code */
selector {
  margin-top: 0;
  margin-bottom: 0;
}

Group Selectors and Declarations

To create compact yet powerful CSS rules, always group selectors and declarations.

/* bad code */
body {
  font-size: 1rem;
}

th {
  font-size: 1rem;
}

/* good code */
body,
th {
  font-size: 1rem;
}

Sort properties

To make rules readable, arrange the properties in alphabetical order.

selector {
  color: #ad58ad;
  margin: 0;
  padding: 0;
}

Setting width on inline elements

Sometimes, we find ourselves setting width on an inline element without adding display property to change it to a block element.

Inline element

.inline-element {
  background: #ffb40f;
  height: 50px;
  width: 200px;
}

.inline-element--two {
  display: block;
}

Notice the difference between the two elements above. By adding display: block; to the second element, the width and height properties took effect. Adding display: block; to block elements means introducing redundant code to our codebase and should be avoided.

Hover state on disabled elements

When elements are disabled, we need to convey it clearly to the users. Hovering over the buttons below, the buttons behave differently. Instead of giving room for deadclicks like in the first button, we need to use the approach applied in the second one.

.hover-state {
  cursor: pointer;
}

.hover-state--two:disabled {
  cursor: not-allowed;
}

Not providing fall backs

Using caniuse, we can detect properties that are not supported across all browsers. Rather than going ahead to use the properties, we can show empathy by providing fallbacks.

Collapsing divs

We need to apply certain rules on divs housing floated elements to avoid what we see in case 1 below.

Floated left

Floated right

Below floated elements

Floated left

Floated right

Below floated elements

Notice the difference between the two cases presented. If we don't understand what is happening when faced with this scenario, we may end up trying to enforce unneccessary styles to achieve what we want when we could have just applied the styles shown below to the floats-container.

.floats-container::before,
.floats-container::after {
  content: " ";
  display: table;
}

.floats-container::after {
  clear: both;
}

Keep it DRY

Don't repeat yourself (DRY) in a codebase. We need to group things and use variables whenever we can. We don't need to set the theme color for every element that needs it. Providing the ability to update all instances once the declaration is changed makes the code easy to refactor.

:root {
  --primary-color: #ad58ad;
}

.nav {
  background-color: var(--primary-color);
}

Code for mobile users first

Code for mobile users first and then progressively enhance for tablets and desktops. Compare this to coding for desktop first, where heavy components are loaded by default and then hidden for small screens (known as "graceful degradation").

Given:

<div class="image"></div>

Here's an example of coding for desktop first:

<style>
.image {
   background-image: url(image1.jpg);
}
@media (max-width:390px) {
   .image {
      display: none;
   }
}
</style>

In the above code, the default is to display the image, which is then overruled for mobile devices with the media query.

Here's an example of coding for mobile first:

<style>
@media (min-width:391px) {
   .image {
      background-image: url(image1.jpg);
   }
}
</style>

By default, the image isn't displayed, while wider screens are progressively enhanced using a media query.

Code Validation

W3C Validator can help us pinpoint areas that we might miss when writing our stylesheets.

Conclusion

Knowing the right property to use at the right time will curb the stress we go through while styling web pages. So, let's not hate CSS. Let's practice more and we will come to love what we can achieve with it.

Writing Standards-Compliant HTML

Thu, 17 Jan 2019 06:00:00 GMT

The importance of quality Hypertext Markup Language (HTML) in any codebase cannot be over-emphasized. HTML is the backbone of any website, the skeleton fleshed out with CSS and brought to life with JavaScript.

Though markups render when standards are not adhered to, we need to strive towards writing standards-compliant code. Accessibility cannot be achieved without quality and semantically valid HTML.

Let's go through the basic elements that makes up a HTML page, coding practices which are usually neglected and ways we can write standards-compliant HTML.

Doctype

This is often neglected. Doctype explains the document type being rendered on websites. You should always include it when writing your markup.

<!DOCTYPE html>

Lang attribute

The lang attribute is essential in any website. lang attribute within html element plays an important role especially when considering internationalization (i18n).

<html lang="en"></html>

In a french version of your site, it should be written as

<html lang="fr"></html>

Character encoding

The first content of the head section should be the character encoding declaration. The browser needs to know the encoding to use when rendering the content of a site. Therefore, this should be written before any other element within the head section.

<head>
  <meta charset="utf-8" />
</head>

Entity reference

Entity reference should be used for characters with special meaning in HTML

Character	Reference	Description
&	`&`	Ampersand
"	`"`	Quotation mark
'	`'`	Apostrophe
<	`lt;`	Less than
>	`gt;`	Greater than

Content of Title element

The title element should not be left without a content. The title of the page should be written first, followed by a separator before the title of the site.

<title>Writing Standards-Compliant HTML | Chiamaka Ikeanyi</title>

Indentation

Of what use is a code if it is not readable? We need to ensure that the lines of code we write are properly indented showing hierarchy.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Coding Style</title>
  </head>
  <body>
    <main>
      <section><p>content</p></section>
    </main>
  </body>
</html>

The above code is messed up. To avoid this, for every new element, always indent using the tab key or by leaving 2 spaces. Closing elements should correspond to the opening elements.

If you find this really tasking, Prettier extension can help with that. Go through the "Get Started" guide to set it up.

Separation of concerns

Despite being in this era of CSS in JS, i'm still of the opinion that HTML, CSS and JS files are meant to be kept in different files. Structure, presentation and behaviour should not be muddled up in one file. Not only do this improve readability of the code, it makes it reusable also.

You can always import your CSS and JS files using

<link rel="stylesheet" href="path_to_file.css" />

and

<script src="path_to_file.js"></script>

respectively

Use elements appropriately

Elements are often misused. We need to use the right elements for the right reasons. It is not appropriate to use an a element where button should be used (vice versa) or a div instead of a button and assign a button value to its role attribute. Avoid divitis (the act of writing many div elements in place of meaningful semantic HTML elements), there is no need to use a div element where we are meant to use a p or semantic element.

<!-- bad code -->
<div class="wrapper">
  <input type="text" placeholder="Search..." />

  <p class="header">Main Title</p>
  <div class="description">
    <p>Short description</p>
    <br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <button class="link" onclick="navigateSomewhere()">Learn more</button>
  </div>
</div>

<!-- good code -->
<div class="wrapper">
  <input type="search" placeholder="Search..." />

  <article>
    <header>
      <h1>Main Title</h1>
    </header>
    <p>Short description</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="https://domainname.topleveldomain" target="_blank">Learn more about the main title </a>
  </article>
</div>

<i> and <em> may yield the same result but has a different meaning for screen readers. Likewise <bold> and <strong>. Having an understanding of the appropriate usage of these elements will help you write better HTML code.

Semantic elements - main, nav, section, article, aside, footer should always be used to describe contents of a website instead of using a div.

Use <time> to represent a specific period instead of wrapping it within <span> or <small> tag.

<!-- bad code -->
Published on <span>January 17, 2019</span> at <span>07:00</span>

<!-- good code -->
Published on
<time datetime="January 17, 2019">
  January 17, 2019
</time>
at <time datetime="07:00">07:00 am</time>

Quotation marks

Attributes values should be enclosed in double quotation marks (" ") rather than single quotation marks (' ').

<!-- bad code -->
<a href="/explore">Explore</a>

<!-- good code -->
<a href="/explore">Explore</a>

Use alternate text on images

Provide a descriptive alternate text for images. alt attribute helps assistive technologies like screen readers to get a better understanding of the content of the element. For images used for decorative purposes (e.g. a button containing a search icon close to a Search text), it should be left empty alt="" because adding alternate text would introduce redundancy.

<!-- bad code -->
<img src="path_to_file.png" />

<!-- good code -->
<img src="path_to_file.png" alt="Descriptive text" />
<img src="path_to_file.png" alt="" />

Form Labelling

Forms elements should be associated with labels either implicitly or explicitly.

<!-- implicit label -->
<label>
  <input id="email" name="email" type="email" />
</label>

<!-- explicit label -->
<label for="email">Email Address</label>
<input id="email" name="email" type="email" />

Avoid Shouting

Writing a content in all capital letters signifies shouting. Lowercase letters should be used for your content likewise elements, attributes and values. Handle all typography and styling using CSS.

<!-- bad code -->
<h1>CODING STYLE</h1>
<p class="nav">CONTENT</p>

<!-- good code -->
<h1>Coding Style</h1>
<p class="nav">Content</p>

If you need the content to be in all capital letters, you can then use

.nav {
  text-transform: uppercase;
}

Naming Convention

Naming things can be daunting but pays off in the long run when we get it right. Id and class names should be descriptive. It needs to relate to the content, not the presentation.

<!-- bad code -->
<p class="green-notification">Order successful</p>

<!-- good code -->
<p class="order-notification">Order successful</p>

Peradventure we decide to change the color of notification in the future, it would only affect the CSS file leaving the markup untouched. However, if the first approach was used, we would need to update the class name within the markup to reflect the change.

Logical Sequence

Markups should be written in a logical sequence. This can be very useful to screen readers. Using CSS to position sections within a page which can be achieved using HTML is an overkill.

Link to external documents

The rel attribute with value of noopener noreferrer should always be added to a elements when linking to external documents.

<a href="path_to_file" rel="noopener noreferrer" target="_blank">Link text</a>

noopener: To prevent the browsing context from having an opener browsing context if a user clicks on the hyperlink.
noreferrer: To prevent the browser from sending an HTTP referrer header if a user clicks on the hyperlink.

Code Validation

Validators such as W3C validator can help pin point areas that we might have missed.

<!-- good code -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Writing Standards-Compliant HTML | Chiamaka Ikeanyi</title>
    <link rel="shortcut icon" href="path_to_image.png" type="image/png" />
    <link rel="stylesheet" href="path_to_file.css" />
  </head>

  <body class="site-body">
    <header>
      <a href="/">Site Title</a>
      <span class="sr-only">Navigation</span>
      <nav>
        <ul>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/projects">Projects</a>
          </li>
        </ul>
      </nav>
    </header>

    <main>
      <section class="site-content">
        <article>
          <h1>Writing Standards-Compliant HTML</h1>
          <img src="path_to_file.png" alt="Descriptive alternate text" />
          <p>The article</p>
        </article>
      </section>

      <footer>
        &copy; {dynamic date} Site Title
      </footer>
    </main>

    <script src="path_to_file.js"></script>
  </body>
</html>

You must have learnt a few things here. Consider educating someone also. Let's write semantic, accessible and search engine optimized HTML and leave codebases better than we meet them.

Starting Out as a Newbie in the Tech Industry

Thu, 03 Jan 2019 06:00:00 GMT

Perhaps, you are considering joining the tech industry and asking about where to start as a newbie. Questions concerning this is usually raised during meetups and personal discussions with people. The tech industry is a good place to be. Being in tech gives you the opportunity to take an idea from ideation to a working application. You get the opportunity to build amazing solutions and help make life easier for people utilizing technology.

My experience has been an awesome one so far - not easy, but rewarding. Sometimes, you get overwhelmed and at other times, you become joyous seeing a product you were part of its development being used by many.

In this article, I will dissect the life of a software developer, how you can start your journey in tech and opportunities in the tech industry.

A day in the life of a developer

Seen developers before? They are a bunch of nerds with no social life. Staring at the screen all day with headphones on putting them within the zone. Are you sure they are not internet fraudsters?

This is the common belief of people around developers ignorant of what software development entails. Is that true? you may ask. Personally, I've seen jovial software engineers. We are not all introverts, there are ambiverts too.

When working on a task and you encounter a bug, the first thing to do after a couple of debugging is to check the documentation before visiting Stack Overflow - a platform that features questions and answers on a wide range of topics in computer programming. If the answer is not forthcoming, google to see what other platforms have to offer. Sometimes, you may need to rubber duck.

The life of a developer is a disciplined one. As a developer, your spare time is hardly spent watching movies. When you want to relax and watch a movie, you remember all the notifications from coding channels that are piled up calling for your attention. Which would you go for? Definitely not that Netflix movie. You'll rather spend it learning one or two from coding platforms like freeCodeCamp, Chrome Dev channel, DevTips, LevelUpTuts etc.

Software development teaches you to think vastly and solve problems. So, you should consider coding. Check out Carl Newport's view on why skills trump passion in the quest for the work you love.

"We've heard our whole lives that if you follow your passion, that's all that matters. What I'm arguing, instead, is that passion is something that follows you; on your path, you become really good at things that are valuable. If you focus on what's important and really focus on doing those things better, then [you] use these skills as leverage to keep shaping [your] job. It's not a sexy process, but it's one that very consistently helps people build these types of working lives that really resonate with them. They're a real source of passion." - Cal Newport

Journeying into tech, you should keep the following tips at heart:

Be dedicated to the craft

You must not have a Computer Science degree to be in tech. Choose a track and improve. A lot of people have made themselves relevant in this field irrespective of their discipline or gender by putting in hours of work. Nothing great comes easy. You're going to hit a lot of walls, constantly acquire new skills as tools change rapidly and sometimes debugging is going to become immensely frustrating. The problem you're facing might make you feel dumb, and will make you rethink your career path. In these cases, do not give up. Even the best programmers are not geniuses. They just have a growth mindset

The tech industry is a good place to venture into especially with the innovative disruption happening at the moment. New to Tech? Do not fret as this is a lovely community to be in, creating a sense of belonging to individuals in it.

Find a means that work for you

What is your primary source of learning? Stack Overflow, YouTube, Books, MOOC, Online tutorials, Personal tutor, Discussion group or School system? This differs depending on the individual involved. Use whatever works for you. Identifying this early helps fast-track the learning process as there are lots of articles and tutorials flooded online. You don't need them all. Focus on the good ones and avoid getting overwhelmed.

Here is a curated list of a few useful resources:

Learn at your pace

Value every second, don't try to learn everything, focus on one thing at a time and forget all the hype. At the initial stage, everything may seem confusing starting with the stack to focus on, to the frameworks to consider, the text editor to use, configurations and hacks to make you more productive.

You don’t need to learn everything at once. Learn the language when you need to use it to solve a problem. You must not use all the frameworks. Just learn what you need to accomplish the project at hand. It’s not about the code you write but about the problems you solve using those languages. Use the right tools to get the job done.

While trying to choose a niche can be quite confusing, the earlier you dive deep and explore, the better. Go for things you enjoy doing and develop your skills in it. If you are good at designs, you can venture into User Interface (UI), User Experience (UX) or Front-end development. Love logic and algorithms? Back-end development will be a good fit. Stay calm and learn. You may be plagued with imposter syndrome, remember that everyone else feels the same way. Don't let the syndrome consume you. Good resources that can help you transition smoothly into tech abound. Do not also let yourself suffer from Dunning–Kruger effect

Practice

A lot of practice is needed to be a master in this craft. Don't expect to be a pro in a month. Before starting any project, it is imperative to plan extensively before executing. In the course of planning, potential loopholes are spotted and solutions to them gotten.

To excel, explore, build and ship it. The more you go through other people's codes, the better you become. Hang around more experienced software engineers and learn from them (they will push you to become better). Make Google your friend, source for information online as there is a high probability of someone having asked questions concerning the challenge you are currently faced with. Read articles and write about things you find interesting. Data subscription should be something you shouldn't trade for anything else as it plays a vital role here.

Get good tools

You need a computer with good specifications to function effectively. Concentrate by listening to freeCodeCamp Radio, Noisli or other cool instrumentals. Don't feel intimidated when you see most people move about with a Mac. You can still do well with your Linux or Windows laptop provided it has good specs (Ubuntu operating system preferably, minimum of 8GB RAM, Core i5, great processing speed etc.).

You need a Terminal (iTerm2, bash, cmd) for writing commands to run programs, a Text editor (Visual Studio Code, Sublime Text, Atom) or an Integrated Development Environment (Web Storm, PHP Storm, Visual Studio, Android Studio, Pycharm) for writing codes, a Web browser (Chrome, Firefox) for viewing the output if your chosen track is web development, Git for version control (GitHub, GitLab, Bitbucket), Web Server (Netlify, Heroku, Linode, Digital Ocean, GCP, AWS) for hosting your site.

Share your Work

Don’t be afraid to share your first work. It can definitely not be compared to the ones you’ll build as you gain more experience. That is just your first iteration. Share it and seek for feedback. This will help you improve.

Avoid burnout

A lot of developers experience burn out. Don't accept more tasks than you can handle to help you keep your sanity. Work / life balance matters.

Network

Follow people making waves in the industry on social media (twitter is the best place to be), read their articles, and attend events they propagate. Meetups, seminars, workshops and conferences can be a great way to network and learn from peers and professionals in the industry, you may secure your next job through your connection.

There are lots of meetups and conferences around that you can attend. Here in Lagos, Nigeria, we have:

Meetups

Google Developers Group
Facebook Developer's Circle
Andela Learning Community
Women in Tech
Usable
Figma
Android Nigeria and more ...

Conferences

forLoop Summit
Concatenate
React Summit and more ...

Securing a job

When you are ready to secure a job, don't go for the money at first, go for a structured environment. It will help you learn good software practices. Know the business - how the services talk to each other (how they are integrated). After mastering a particular area of software engineering, explore other areas - be rounded ( front, middle, back-end). Have your own practice time, you're paid to learn so you need to do that to remain relevant.

You can use these platforms to improve your skills:

Platforms to source for opportunities

Organizations seek for people with the following skills:

System design
Database design
Problem-solving
Debugging
Codebase navigation
Code review capability
Performance optimization
Software testing
Programming language proficiency

Opportunities in the tech industry

There are various opportunities in the tech industry.

Project Management
Product Design
UI/UX Design
Software Architect
Software Engineering
Database Administration
Data Science
Quality Assurance
Network Administration
Security Personnels
Ethical Hacking

Platforms to source for opportunities

Tools Used in tech

You must not know how to code to be in the tech industry as great job opportunities exist in in various areas. Underlisted are tools used by different areas that can help you get started:

Project Management

Trello
Jira
Asana
Github board
Pivotal tracker
Slack

Product Design

Adobe XD
Figma
Sketch (Mac only)

Architectural Design

Balsamiq
Cloudfront
Microsoft Visio

Software Engineering

Offline Editors: Visual Studio Code, Sublime Text, Atom, Web Storm, PHP Storm, Pycharm, Android Studio
Online Editors: Repl.it, Codepen, JS Bin, JS fiddle, Sassmeister
Terminal: iTerm2, Bash
Version Control: Github, Gitlab, Bitbucket

Database Administration

SQL Yog
Sequel Pro
SQL Workbench

Data Science

Power BI

Network Administration

Packet Tracer

Quality Assurance

Jest
Karma
Jasmine
Selenium and more...

Conclusively, you should note the underlisted points to excel in software engineering

Learn the fundamentals. It helps you to understand the "how" and "why" involved in taking a specific approach to problem-solving.
The best programmers are just the ones that never gave up.
Great software engineers are problem solvers, not code warriors.
Writing good software isn't about fancy one-liners, it's about writing maintainable code that serves a business need.
For every code you write, consider performance and scale
Learn the actual language of choice so that you can distinguish what the language can do and what the framework is helping with.
Prefer official docs over Stack Overflow.
Do your own quality assurance.
Don't ignore the world around your work.
Seek constructive criticism.
Have side projects.

You can have a look at Hackerrank 2018 Developer Skills Report

2018, A Year In My Life

Tue, 01 Jan 2019 02:00:00 GMT

2018 was an awesome year for me. I wouldn’t say it’s a perfect year, though I improved personally and professionally and I’ll be sharing my accomplishments with you.

The year started with few resolutions to improve in some areas of my life and I made progress with these:

Relationship

I made conscious efforts to get to know my maker on a more personal level. He has been my guide and holds my head up when I’m feeble. I hope to do His will one day at a time.

Within the tech community, I have met a couple of people as a result of attending meetups. I hope to solidify these relationships and get to meet new people this year.

Career

My career as a software engineer hasn’t gotten to its peak. In 2018, I was faced with a couple of challenges which made me stronger. I worked as part of a team on an application being used by many. When I started working with React, it seemed overwhelming, then came Redux, Next.js, GraphQL, Docker and Kubernetes. It is fulfilling looking back at those tough moments when I thought I couldn’t pull through and the “aha!” moments when I nailed it. The best part of my career path is having to tackle something new every day thereby eradicating the possibility of boredom.

Volunteering

To help preach tech to the younger generation, I volunteered as a Learning Community Ambassador (Facilitator) in the Andela Learning Community program in partnership with Google and Udacity. It feels fulfilling listening to people and helping them solve challenges they are faced with. Seeing someone battle with a piece of code and being able to help. Watching them grow from writing “hello world” to solving more advanced challenges.

Writing

After putting up an article on an event organized by Facebook Developers Circles, Lagos, I was reached out to which led to my joining the Writers’ Corner arm of the community. My article was also published on Lean Women in Tech India. I got to publish a few articles on freeCodeCamp. My most popular article was How to Configure your macOS Terminal with Zsh like a Pro. Overall, I would say that I improved in writing and will write a lot more this year. To keep me in check, I launched this blog towards the end of the year.

Poetry

Asides coding, I love art and poetry. The act of playing with words, crafting scenes and getting to create a world out of your own thoughts. I wrote 10 poems and spoken words in 2018 surpassing the 3 poems that I wrote in 2017.

Photography

I enjoy taking random pictures. Capturing lovely moments and sharing with those involved and watch them beam with smiles. I try to live by the principle of leaving people happier than I meet them. I also love capturing places especially on cool evenings and at least get to know my environment better. I hope to tour Lagos in 2019 and document awesome places I think you should visit too.

Fitness

Doing this, I do not intend to lose weight, but to stay fit. I created a routine of exercising for 30 minutes daily to remain fit and energized to tackle each day’s challenges. I couldn’t stick to this after a while and hope to increase my perseverance level this year.

Reading

I spent a lot of time in 2018 reading tech articles, I learnt a lot from great minds. I came across The Richest Man in Babylon by George S. Clason and wrote a few highlights on it:

Want to become rich but don’t have an iota of knowledge on how to accomplish your heartfelt desire, this book is a great asset that can help you through this quest. Going through the pages of the book, I noted the seven cures for a lean purse; becoming rich is not a miracle but can be actualized by the application of the following principles hereunder. Note that “A part of all you earn is yours to keep”

For every ten coins thou placest within thy purse take out for use but nine. Thy purse will start to fatten at once and its increasing weight will feel good in thy hand and bring satisfaction to thy soul.
Budget thy expenses that thou mayest have coins to pay for thy necessities, to pay for thy enjoyments and to gratify thy worthwhile desires without spending more than nine-tenths of thy earnings.
Put each coin to labouring that it may reproduce its kind even as the flocks of the field and help bring to thee income, a stream of wealth that shall flow constantly into thy purse.
Guard thy treasure from loss by investing only where thy principal is safe, where it may be reclaimed if desirable, and where thou will not fail to collect a fair rental. Consult with wise men. Secure the advice of those experienced in the profitable handling of gold. Let their wisdom protect thy treasure from unsafe investments.
Own thy own home.
Provide in advance for the needs of thy growing age and the protection of thy family.
Cultivate thy own powers, to study and become wiser, to become more skilful, to so act as to respect thyself

Go forth and practice these truths that thou mayest prosper and grow wealthy, as is thy right.

I listened to podcasts on Deep Work: Rules for Focused Success in a Distracted World and So Good They Can’t Ignore You by Cal Newport. I will definitely read “The Subtle Art of Not Giving a F*ck” by Mark Manson and “Awaken the Giant Within” by Anthony Robbins this year. I think they are books worth your time.

In 2019, I hope to …

Grow rapidly in my role as a software engineer
Get involved in open source projects
Read and listen more
Write more
Keep fit
Meet new people
Overcome stage fright and speak at conferences
Definitely, enrol in a driving school
Tour Lagos, Nigeria and document awesome places I think you should visit too

Becoming Better At Writing

Thu, 20 Dec 2018 06:00:00 GMT

Are writers born or made? This is the first question you need to ask yourself. Hmm! I guess they are born, you might have muttered.

You see yourself constantly writing and ending up not publishing them. “I don’t think it is good enough, Will it be appreciated? Oh! my use of words suck”. These keep popping in your head. You have been trying to write for a while and still see yourself not getting better at it? Brace up, let’s dive right in. That shell you’ve wrapped around yourself needs to be broken. Writer’s block is not for you.

Writers are not born, you can develop the act of writing. You can grow to be like or better than top writers you admire by putting in more effort. It will surprise you at how amazing you will become when you work towards it. Persistence fuels success.

A writer is a person who uses written words in various styles and techniques to communicate their ideas.

Writers use words to express their feeling or share knowledge. It may not be perfect, but it should be communicative enough to your target audience.

Why Write?

People write for different reasons; some writers feel that there are concepts that are not properly explained or are misunderstood and seek to correct the wrong notion being circulated while others seek to create a world they always wish they had through writing.

So why do you write, torturing yourself to put it down? Find a reason to write. Your reason is your motivation, it gets you going. Seek to brighten someone’s day through your writing.

When you write;

You learn every day
You educate and connect to the world better
You get the opportunity to make an impact on someone’s life

According to George Orwell,

“When I sit down to write a book, I do not say to myself, ‘I am going to produce a work of art.’ I write it because there is some lie that I want to expose, some fact to which I want to draw attention, and my initial concern is to get a hearing.”

Our problems stem from man’s inability to sit in a room and act. We keep waiting for inspiration before we act. Renowned writers do not wait for inspiration. They commit their thoughts not minding how bad it might turn out to be. You may be smart but what matters are the choices you make today. Choose to write today, the number of words you put out to the world should not matter at first rather you should work towards publishing quality works and with time, you will grow into writing more quality contents.

Here’s how to get better

In a quest to becoming better at writing, you need to define your parameters first;

Which type of article do you want to write?
What aspect of the type chosen do you want to write on?
What do you hope to achieve through the article?
Which aspects do you need to cover?
Who are you writing for?

Structure

At some point, topics pop into your head, don’t let them go, jot them down immediately and form a skeleton of the article. Put the most important information first. When creating headlines, don’t use click baits. It gets you the click but makes you lose your audience. Break down your story in such a way that it will be appealing to everyone, let each section explain a particular thought. Use readable font types and sizes with adequate spacing.

Tone

You wouldn’t want to get that feedback right? In this digital era, readers allocate very little time to your content to ascertain if it is worth their time. Find your voice in writing, be concise and unique. Use easier words to convey your thoughts.

If you can’t explain the concept to a child, then, you still have a long way to go. — Richard Feynman

Simplicity should be your watchword. Knowledge is a process of piling up facts; wisdom lies in their simplification.

When considering making a good impression on your readers, what you write is not the only thing you should think about but how you convey your thoughts. Analyze different interpretations that your readers may likely give to your tone.

Grammarly can help you restructure your sentences. It is a nice tool I recently discovered that uses artificial intelligence to transform writing styles.

Visuals

Every content you create needs an element of visuals in it. Images, illustrations, graphs etc., attracts and sustains your audiences’ interest. The impact of this element should not be overlooked in your quest to becoming a better writer. Tons of them are available on Unsplash, Freepik, Undraw, Pixabay, Pexels and other platforms providing varieties of free images to choose from.

Read

Read works of great writers. When you consistently read the work of a great author, you notice that it soon begins to reflect on your work of art.

Writing is a function of the mind, declutter your mind and arrange your thoughts.

Promotion

Promote your articles on LinkedIn, Twitter and other social platforms. Be open to criticism, get people to criticize your work and learn from it. Great authors seek feedback and bank on it to grow.

Tools That Can Come in Handy

Tools offer great ways to be more productive. The under-listed tools can aid you in becoming better at writing.

Don’t be ashamed to identify as an author. Go out there and conquer your fears.

Working with Git

Thu, 06 Dec 2018 06:00:00 GMT

John is a budding software developer excited about building usable products. He develops and hosts applications using cheap hosting services. After a few months of diving into software development, he felt it was time to get a job to put into practise what he has learnt and also work in a team.

During an interview with one of the well-known firms he applied to, he was given a task to work on. One of the requirements for being successful was to have an understanding of working with git. Poor John who has been working alone was not aware of the usefulness of version control in software development. He has been hearing about the concept but does not fully understand how it works.

Guess what! He lost the opportunity because he was actually expected to push the code to a git repository when he is done with the coding task assigned to him but was not told. So, he just finished and left. A few minutes later, the interviewer called him and asked - "Hi John, hope you pushed your code to git?"

He felt very bad losing that opportunity as a result of not understanding that version control is an integral part of software engineering.

If you are like John, this article is for you. Let's dive right in.

What is version control?

A system that records changes to a file or set of files over time so that you can recall specific versions later

We have Centralized Version Control Systems where a single server contains all the versioned files, and a number of clients that check out files from that central place and Distributed Version Control Systems in which every clone is really a full backup of all the data.

The second option is widely used. The popular GitHub, Gitlab and Bitbucket use this method.

Git is a version control system for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for source code management in software development, but it can be used to keep track of changes in any set of files.

"It worked yesterday but not working today. Someone must have accidentally introduced a bug and I can't seem to figure out who. I'm finding it difficult getting it back to its previous state. Argh!"

When working in a team, the above scenario is bound to happen and Git is at the rescue. All versions of the code are recorded for reference purposes.

Git Workflow

Master Branch: This is a replica of the code in production. No one is allowed to code directly on this branch.

Release Branch: This is created from the master branch. This becomes necessary when multiple projects are running on the same code base e.g. when paying your technical debts by trying to get rid of legacy code. To work on a feature, you need to create another branch from this branch.

Feature Branch: For every feature added, there should be a feature branch. This ensures parallel developments making rollbacks and cherrypicking easier.

Master branch → Release Branch → Feature branch → Task complete → git add → git commit → git pull → git merge → git push → Create pull request → Code review → Pull request merged to release branch → Pull request merged to master branch → Feature deployed to production

Steps

Open your terminal

Verify if git is installed

git --version

Set a git username globally

git config --global user.name "your_user_name"

Set a git email globally

git config --global user.email "your_email"

Confirm that you have set your git details correctly

git config --global user.name

git config --global user.email

Initialize git in your project

mkdir project-name

cd project-name

git init

or Start with a remote repository

git clone repository_URL

Create a new branch for the aspect of the project you want to work on and change the current working directory to your new branch

git checkout -b name_of_your_new_branch

or Switch to an existing branch

git checkout name_of_the_branch

Create README file

echo "# repository_name" >> README.md

Add specific file

git add filename.extension

or Add all changes

git add .

Check the current state of your branch

git status

Commit changes

git commit -m "commit_message"

If the task is associated with a ticket number, use the ticket number as a prefix to the commit message e.g.

git commit -m "Feature-add-filters"

View your current remote repository

git remote show origin

Add a new remote for your branch:

git remote add name_of_your_remote remote_URL

e.g. git remote add origin https://github.com/username/project-name.git

Change your remote URL

git remote set-url origin remote_URL

Push changes from your branch to the remote repository

git push -u name_of_your_remote name_of_your_branch

Pushing to master

git push -u origin master

Pushing to a given remote branch. If the remote branch do not exist, it would be created

git push -u origin feature_branch_name

If the task is associated with a ticket number, use the ticket number as the feature branch name e.g.

git push origin -u feature-filters

To push the current branch and set the remote as upstream:

git push --set-upstream origin name_of_your_new_remote

e.g. git push --set-upstream origin master

View differences in branches

git diff name_of_the_source_branch name_of_the_target_branch

Update your branch when the original branch from the official repository has been updated

git fetch name_of_your_remote

git pull origin name_of_your_new_remote

Merge changes from master to your branch:

git checkout your_branch_name

git merge master

Merge changes from your branch to the master branch:

git checkout master

git merge your_branch_name

Fetch updates from a forked repository

cd the_forked_repo

git remote add upstream forked_repo_URL

git pull upstream master

Unstage a file

git reset HEAD filename.extension

View all your branches:

git branch

To rename a local branch,

If you are on the branch:

git branch -m new_name

If you are on another branch:

git branch -m current_name new_branch_name

To rename a remote branch, delete the current branch and push the new one:

git push origin :current_branch_name

git push origin -u new_branch_name

To deploy selected features

git cherrypick commit_hash

View git logs

git log --summary

git log --graph

View your git configurations

git config --list --show-origin

Delete a directory from Git AND local

git rm -r directory_name

Delete a directory from Git BUT NOT LOCAL

git rm -r --cached directory_name

Delete a file from Git AND local

git rm filename.extension

Delete a file from Git BUT NOT LOCAL

git rm --cached filename.extension

Forcefully Delete a staged file

git rm -f filename.extension

Delete a branch on your local file system

git branch -d name_of_your_branch

Delete the branch on Github

git push origin :name_of_your_branch

To view contributions by each member of your team,

git shortlog -sn --all --no-merges

The shortlog provides summaries of git log; the -s flag will suppress commit description and shows a commit count summary, the -n flag will sort the output according to the number of commits per author. The --all flag logs all branches, and --no-merges ensures that merge commits are not counted.

To get all your commits to a remote branch on the working tree of your local machine,

git reset --soft origin/master

To correct a wrong name or email used to make a push to a project,

$ git filter-branch --env-filter '
WRONG_EMAIL="old-email@example.com"
NEW_NAME="New Name"
NEW_EMAIL="new-email@example.com"

if [ "$GIT_COMMITTER_EMAIL" = "$WRONG_EMAIL" ]
then
    export GIT_COMMITTER_NAME="$NEW_NAME"
    export GIT_COMMITTER_EMAIL="$NEW_EMAIL"
fi
if [ "$GIT_AUTHOR_EMAIL" = "$WRONG_EMAIL" ]
then
    export GIT_AUTHOR_NAME="$NEW_NAME"
    export GIT_AUTHOR_EMAIL="$NEW_EMAIL"
fi
' --tag-name-filter cat -- --branches --tags

To update a branch and its dependencies

git rebase BRANCH_NAME --update-refs

To push updates of branches to a remote repository

git push --force-with-lease origin BRANCH_1 BRANCH_N

Version Control Tools

Some tools make it possible for us to avoid the hassle of writing these commands by abstracting its complexities.

GitLens extension for VS Code
Source tree (for Mac and Windows)
VCS menu option on IntelliJ IDEs (PHP Storm, Android Studio, etc.)

As a software developer, it is advisable to use the command line. Learn how to configure your terminal with ZSH for maximum output.

Transforming Error Pages from Dead Ends to User Retention Opportunities

Thu, 29 Nov 2018 06:00:00 GMT

HTTP 404 Not Found errors are an inevitable part of any application. Users mistype URLs, links go stale, and content hierarchies are refactored. While the default, unstyled server 404 page is technically functional, from a product design perspective, it's a catastrophic dead end in the user journey.

This single page represents an unhandled exception in the user experience. A blank white page with "Not Found" builds frustration, erodes trust, and directly contributes to a higher bounce rate.

Instead of treating the 404 page as a failure, view it as a critical touchpoint — an opportunity to gracefully handle an error, reinforce your brand, and guide the user back into a productive flow.

Consider these tips for an effective 404 error page that serves both the user and the product:

Acknowledge the State, Don't Obfuscate

A common anti-pattern is to silently redirect all 404s to the homepage. This is disorienting; the user clicks a link expecting "Product A" and is now on the homepage with no explanation. This breaks their mental model and leaves them wondering what went wrong.

404 pages must clearly and concisely state what happened.

Use plain language: "Page Not Found," "We can't seem to find the page you're looking for."
Display the 404 status code. It’s helpful for technical users and clearly defines the error.
Briefly explain why this might have happened (e.g., "The link may be broken, or the page may have been moved.").

Maintain Brand and UI Consistency

A default error page is jarring. It makes the user feel like they've "broken" the site or left it entirely. 404 pages should feel like it's part of the same application.

Integrate your Design System: Use the same header, footer, typography, and color palette as the rest of your site.
Keep UI Components: If you have a navigation bar or main menu, keep it. This immediately gives the user familiar orientation points.
Voice and Tone: The page should sound like your brand. This consistency builds trust and reassures the user that they are still in the right place, even if the content isn't.

Provide Intelligent Recovery Paths

A "Page Not Found" message with no next step leaves the user stranded. The primary goal of a 404 page is user recovery. You must provide clear, actionable calls to action (CTAs).

Don't just offer a single "Go Home" link. Provide a hierarchy of options:

Primary CTA (Site-wide Search): This is often the most effective tool. The user was looking for something specific; empower them to find it immediately. Place the search bar prominently.
Secondary CTAs (Key Navigation): Provide direct links to the main pillars of your application (e.g., "Dashboard," "Products," "Blog," "Help Center").
Contextual Links (Advanced): If possible, parse the requested (but broken) URL. If the user tried to access /blog/my-post-title, you can confidently suggest a link to the main /blog index.
Default (Homepage): Always include a link back to the homepage as a reliable fallback.

Defuse Frustration with Brand Voice

This is where product design shines. A 404 is a moment of frustration. You have an opportunity to turn that negative emotion into a neutral or even positive brand interaction.

Use Empathy: A simple, "Sorry about that!" goes a long way.
Show Personality: This is a classic place for creative illustrations, clever copy, or even a simple interactive element (like a mini-game) that aligns with your brand.
Balance Form and Function: Creativity should never come at the expense of clarity. A beautiful illustration is useless if the user can't find the search bar.

Add a Feedback Loop: Log, Analyze, and Iterate

As an engineer, you know that your 404 page is also a valuable debugging and analytics tool.

Log Your 404s: Server-side logging of 404 hits (and their Referer headers) is crucial for finding broken internal links you need to fix. It also reveals which external sites are sending you bad traffic.
Track Page Analytics: Fire analytics events on your 404 page. Are users clicking "Home" or are they using the search bar? What are they searching for? This data tells you how effective your recovery paths are and can inform what content you might be missing.

Conclusion

Stop treating the 404 page as an afterthought. Integrate it into your core design system and product flow. By treating it as a key UX component, you can transform a moment of user frustration into an opportunity for retention, brand-building, and valuable data collection.

Highlights from Chrome Dev Summit 2018

Thu, 22 Nov 2018 06:00:00 GMT

Have you heard of Google Chrome Dev Summit? If you haven’t heard of it and the awesome cool things Chrome engineers have been working on lately, this article is for you.

I’m a front-end engineer working on an application that serves millions of users. I also use Chrome Dev Tools every day to debug and monitor performance. So I found it imperative to learn about the tools and technologies that will help me optimize my applications and contribute to building a better web. Debugging and optimizations become easier when you are aware of the tools to take advantage of, and metrics to look out for.

Chrome Dev Summit offered me the opportunity to hear about updates on these tools and technologies, and showed me avenues to contribute toward making these tools better. I learned a lot from Chrome engineers during the summit, and I would like you to benefit from that knowledge so we can build an awesome web experience together.

Chrome Dev Summit is an opportunity for Google Chrome engineers and leading web developers to celebrate the web platform, provide updates on their latest work, and get feedback from the community.

This year, developers from across the globe converged at Yerba Buena Center for the Arts in San Francisco, California for a two-day (12th and 13th November) exploration of modern web experiences. It was celebrated in style as Chrome engineers mark the 10-year anniversary of shipping Google Chrome, the most used web browser.

The event focused on what it means to build a fast, high-quality web experience using modern web technologies and best practices, as well as looking at new and exciting capabilities coming to the web platform. The major highlights are summarized below.

Performance Budgets

An increasing number of features in web applications today are also being accessed using low-end devices on high latency networks. Because of this, JavaScript becomes expensive thereby requiring performance budgeting.

A Performance Budget is a framework that allows you to determine what changes represent progress and what changes represent regression, taking into account a set of shared metrics and budgets for each made actionable

However, we need to have metrics in place to measure before we can improve on them, as it is impossible to measure what we do not track. When we care about exceptional user experience irrespective of device or network conditions, building a PWA with performance in mind becomes a priority.

To build high-quality web experience, Google developed tools like Lighthouse, PageSpeed Insights, and Chrome User Experience Report(CrUX) to help developers monitor and enhance the web platform. A new lighthouse UI was announced at the event with PWA Refactor, reduction in lighthouse runtime and new score bucketing.

We can also integrate Lighthouse to our development workflow so it runs on every commit helping us to keep an eye on performance.

Tools to help monitor the cost of packages:

Webpack Bundle Analyzer which creates a treemap visualization of the contents of your bundles. It helps determine modules that make up the most of its size.
Bundlephobia helps to discover the cost of adding an npm package to your bundle.
Bundle size helps keep your bundle size in check. You can integrate it in such a way that PRs can't be merged once the bundle size is greater than the target maximum size.

PageSpeed Insights Powered by Lighthouse

Because of the varying results analysis gotten from PageSpeed Insights and Lighthouse when measuring the performance of websites, the Chrome team introduced PageSpeed API v5. It is essentially Lighthouse API v1 to power PageSpeed Insights. This means that the differing results will be history. PageSpeed Insights also incorporates field data provided by the CrUX

await fetch(`https://www.googleapis.com/pagespeedonline/v5/runPagespeed?&url=${url}`);

First Input Delay

We are conversant with measuring Speed Index(SI), First Contentful Paint(FCP), Time to Interactive(TTI), First CPU Idle(FCPI) and other metrics which you may have seen using Lighthouse or WebPageTest. To help measure user's first impression of your site's interactivity and responsiveness, a new metric was introduced called First Input Delay.

First Input Delay (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time the main thread is free from the long task it is performing, making it possible for the browser to respond to the user’s interaction.

Is that not the same as TTI you may ask? Well, no it is not. Time to interactive (TTI) measures how long it takes your app to load and become capable of quickly responding to user interactions. On the other hand, First Input Delay (FID) is a metric that measures the delay that users experience when they interact with the page while it’s not yet interactive.

The browser receives the input when the main thread is busy, so it has to wait until it's not busy to respond to the input. The time it must wait is the FID value for this user on this page.

FID is a field metric meaning that it can be seen when actual users are really interacting with the web app, while TTI is a lab metric. Field metrics capture a wide spectrum of real-world network conditions and devices used by Chrome users. This can be well measured using Real User Monitoring (RUM) tools like the Chrome UX Report.

Server-side rendered JavaScript apps and sites with third-party iframes need to be particular about tracking this metric. They are susceptible to high FID values especially on low-end devices that take longer to parse and execute JavaScript.

WebP Image Format

Images don't just become performant on the fly, there are appropriate measures to be put in place to achieve that - using the right format, compression techniques and image lazy-loading. With the introduction of WebP, a new image format that results in an average of 30% savings, the cost of serving images (which is the largest component of most sites) is reduced.

WebP provides superior lossy and lossless compression for images on the web with support for transparency, making the web faster. Due to the fact that WebP is not yet supported across all browsers, it is advisable to use the element to provide fallbacks. The image format would then be used on supported browsers while web browsers that don’t yet support WebP will use the image in the format they support.

<picture>
  <source type="image/webp" srcset="imagename.webp" />
  <source type="image/jpeg" srcset="imagename.jpeg" />
  <img src="imagename.jpeg" alt="image description" />
</picture>

To compress images to and from the WebP format, cwebp and dwebp command-line tools can be used respectively. Go and try out this image format on squoosh (upload your image and view the compression rate).

Native Lazy Loading

To improve user experience on the web, native lazy-loading will be coming to Chrome. When added to image tags and cross-origin iframes, this defers the loading of the resource until the page is scrolled down near them. It is supported across all chrome platforms — Mac, Windows, Linux, Chrome OS, Android

To lazy-load resources, use the lazyload attribute with “on or off” value. If no value is specified, the browser decides which resource to lazy load.

<img src="imagename.png" lazyload="on" />

Zero Friction Navigation on the Web

Navigating on the web has not been seamless compared to the experience with native apps. It is a painful experience, especially when navigating the web using low-end devices on slow networks, leaving users staring at a white screen waiting for content to be displayed on the screen. To come to the rescue of these web users, Chrome engineers announced Web Packaging and Portals.

Built on the Accelerated Mobile Pages (AMP) model (available on mobile devices only) and achieved through signed exchanges, Web Packaging introduces the ability to sign a web page with a special encryption key that proves the page's original domain. It then creates a package that can be served from anywhere, which will be used by the browser to represent the domain enabling privacy-preserving instant navigations.

Portals work like an iframe but can be navigated into allowing users to transition to the portal's content. It abstracts navigation between pages making the user feel like they are on a single-page application.

<portal src="https://mywebsite.com"></portal>

When the created view is clicked on, add some animations and trigger the activate event

portal.activate();

The two proposals combined together enable zero-friction page transitions across the web. This is still early in the development stage, and is therefore subject to change.

Web.dev

A web platform built to help developers learn how to build for the web and ensure the website is meeting good practice goal. Web.dev focuses on why developers need to care about a given concept, and gives tips to help developers build a better web keeping it fast, discoverable, accessible, safe and resilient.

VisBug

Built with accessibility in mind, VisBug is a tool that can come in handy for engineers. With this extension, you can explore and tweak your site right in the browser to view the building blocks and how it looks if designed differently.

Squoosh

Squoosh is a 15kB JavaScript-driven progressive web application for image compression written in C. It is compiled using emscripten to web assembly with best-in-class codecs right in the browser.

Having performance in mind, the team made use of appropriate technologies following coding and performance best practices to yield a performant application:

Preact (a 3kB library) to orchestrate the DOM
WebPack for bundling and code splitting
Web workers for lazy loading and concurrency
Dynamic module imports
Web components (a lower level primitive used by Polymer) for custom element polyfill on Edge

As Jake Archibald would say, go squoosh some images.

Key Points

Performance decisions should be made based on data. Respect the user, their data and preferences.
As developers, we need to test using low-end devices on slow network connections because when we develop for the web using fast devices on fast network connections, we can't really feel what our users feel and think we met our performance goals.
Performance is not an engineering priority. The success of performance initiatives depends on cross-functional buy-ins. There should be an organizational alignment across all teams that affect the website (marketing, design, engineering etc.).
Understand how service workers affect the performance of your site. It can affect it positively or negatively depending on the implementation.
Users value consistent user journey. So, try to reduce friction on your web applications.
Measure apps using the RAIL model - Response, Animation, Idle, and Load.
Use HEART (Happiness, Engagement, Adoption, Retention, Task Success) framework to determine the quality of your web app UI.
Some of these announced features covered here and more are behind Chrome flags (chrome://flags)

Conclusion

This is just a tip of the iceberg, you wouldn't want to miss the details. The future is on the web and performance is at the root of it all. All recorded sessions throughout the event are available on the Google Chrome Developers Channel. The code is available on GitHub.

Let's build a better web 🚀

How to Configure your macOS Terminal with Zsh like a Pro

Thu, 15 Nov 2018 06:00:00 GMT

Sometimes, using the default terminal sucks. You want to go out of the ordinary, to add life to the boring terminal and improve your productivity.

In this walk-through, we will configure iTerm2 with ZSH and its dependencies. This is a no-brainer, and after this, you’ll ponder the reason for not discovering ZSH earlier. Well, since you’re here already, let’s kick-start this.

Z shell (Zsh) is a Unix shell built on top of bash (the default shell for macOS) with a large number of improvements.

Keynotes

Homebrew installation
iTerm2 installation
ZSH and Oh My ZSH installations
Setting up the dependencies to create a beautiful terminal

Step 1: Install Homebrew

Homebrew is a free and open-source software package management system that simplifies the installation of software on Apple’s macOS.

Before installing Homebrew, we need to install the CLI tools for Xcode. Open your terminal and run the command:

xcode-select —-install

If you get an error, run xcode-select -r to reset xcode-select.

Then, install Homebrew.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Step 2: Install iTerm2

iTerm2 is a replacement for terminal and the successor to iTerm. Most software engineers prefer iTerm2 over the default terminal that ships with macOS as a result of its cool features. You can integrate zsh into iTerm2 to increase productivity.

To install iTerm2, run the command:

brew cask install iterm2

Step 3: Install ZSH

Zsh is a shell designed for interactive use, although it is also a powerful scripting language.

By default, macOS ships with zsh located in /bin/zsh. Let’s install zsh using brew and make iTerm2 use it.

brew install zsh

Step 4: Install Oh My Zsh

“Oh My Zsh is an open source, community-driven framework for managing your zsh configuration. It will not make you a 10x developer…but you might feel like one” — Robby Russell

It runs on Zsh to provide cool features configurable within the ~/.zhrc config file. Install Oh My Zsh by running the command

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Check the installed version

zsh --version

You can upgrade it to get the latest features it offers.

upgrade_oh_my_zsh

Restart iTerm2 to dive into the new experience of using Zsh. Welcome to the “Oh My Zsh” world 😄.

That’s not all. Now, we will install the dependencies to get the best out of Zsh.

Step 5: Change the Default Theme

Oh My Zsh comes bundled with a lot of themes. The default theme is robbyrussell, but you can change it to any theme of your choice. In this scenario, I changed it to agnoster, an already pre-installed theme.

You need to set this theme in your ~/.zshrc config file. To open the config file (.zshrc), run the command: nano ~/.zshrc

Or open the file in a text editor with open ~/.zshrc

Set the zsh theme

ZSH_THEME="agnoster"

and update your changes source ~/.zshrc

Using a Custom Theme

To install another theme not pre-installed, clone the repository into custom/themesdirectory. In this scenario, we’ll install powerlevel9k,

$ git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k

Then, select this theme in your .zshrc file

ZSH_THEME="powerlevel9k/powerlevel9k"

Update your changes by running the command source ~/.zshrc

Navigate to iTerm2 > Preferences > Profiles > Colors if you wish to change the background color of the terminal.

The selected theme in this scenario requires powerline fonts. So, let’s install that.

Step 6: Install Fonts

I will be using Inconsolata. Get your preferred font out of these powerline fonts. Then, download and install it.

Or download the entire font.

git clone https://github.com/powerline/fonts.git
cd fonts
./install.sh

To change the font, navigate to iTerm2 > Preferences > Profiles > Text > Change Font.

Now, you can see Inconsolata listed as one of the fonts. Select your preferred font. For fonts that support ligatures like Fira Code, check the “Use ligatures” option to view your arrows and other operators in a stylish manner like ( → ).

Step 7: Install Color Scheme

Let’s change the color scheme to bring out the beauty of our terminal. Navigate to iTerm2-Color-Schemes and download the ZIP folder. Then, extract the downloaded folder cos what we need resides in the schemes folder.

Navigate to the schemes folder and select your preferred color schemes to import them.
Double-click on a specific color scheme to activate it. In this scenario, I activated Batman. You can choose to activate one of the preloaded color schemes such as Solarized Dark. It is also a good color scheme.

Navigate to iTerm2 > Preferences > Profile > Colors > Color Presets > Import

Tada! 🎉 We’re done with the basic settings.

Step 8: Install Plugins

Oh My ZSH comes preloaded with a git plugin. To add more, for instance, docker, auto-suggestion, syntax highlighting and more:

Clone the Git repository. Let's add docker plugin.

git clone https://github.com/zsh-users/zsh-docker.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-docker

Run the command open ~/.oh-my-zsh and navigate to .oh-my-zsh > custom > plugins directory to view the cloned directory.
Then, add the plugin to the plugin section of the ~/.zshrc config file

plugins=(
  git
  docker
  zsh-syntax-highlighting
  zsh-autosuggestions
)

Update your changes by running the command source ~/.zshrc

Step 9: Add Aliases

Aliases are shortcuts used to reduce the time spent on typing commands. To add aliases to commands you use frequently, navigate to the aliases section within the .zshrc file and add the aliases

alias gs="git status"
alias gp="git push"

For a complete guide on configuring and using aliases, read my article on Aliases. You can go a step further to create a custom message on your terminal

If you know about other means of improving productivity using ZSH, you can reach out to me on Twitter. I will be glad to hear from you.

Winning with Chrome DevTools: How to Capture Full Page Screenshots

Thu, 08 Nov 2018 04:00:00 GMT

A lot of people are yet to discover the amazing things they can achieve with Google Chrome. Those without the desire to explore do not really know the usefulness of a tool within their reach. To some, Chrome is just a browser, to others, it is a great tool.

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.

With Chrome Developer Tools (DevTools), you can access hidden and experimental settings one of which is discussed in this article.

Screenshots are very essential for visualization in education, during presentations, technical support etc. There are scenarios where capturing a full page screenshot of a web page is needed and not just the viewport (the visible area of the web page) but achieving this earlier has not been easy. With the introduction of full page screenshot functionality in Chrome DevTools, the stress we usually go through using photo editors to combine different sections of a captured web page has been eliminated.

Sometime last year, I was in need of capturing a full page screenshot of an online course I took. I spent a good amount of time capturing chunks of it and then combining them using Adobe Photoshop to create the view I wanted. Not long after, Chrome released a new version with the ability to capture full page screenshots. I was happy when I watched the video from the “What’s New” section of Chrome DevTools. At last, I wouldn’t have to spend time combining chunk of captured viewports.

For this walk-through, I will be using one of the websites I developed — nilezmall.com.

Edit: Nilezmall is currently down. I learned to choose my battle wisely after I was instructed to shut down the site by the client due to maintenance costs.

Accessing DevTools

To access the DevTools of any web page,

Launch the Google Chrome browser and open DevTools using any of the methods below:

Using Quick Link: Right-click on any part of the browser and select Inspect option
Using Chrome Menu: Click Customize and control Google Chrome (the three vertical dots at the top-right corner) > More tools > Developer tools.
Using the keyboard: Press CTRL + SHIFT + I in Windows and Linux environments or CMD + OPT + J in a Mac environment.

Capturing Full Page Screenshots

You can capture a full page screenshot using any of these options:

Using command menu or
By switching to responsive (device) mode

1. Using the Command Menu

At this stage, your DevTools must have been opened using the steps above to enable you to achieve the desired result with the commands below.

To access the command menu in Windows and Linux environments, press CTRL + SHIFT + P

In Mac environment, use CMD + SHIFT + P

Then, type screenshot and select capture full size screenshot option.

2. Using Responsive Mode

To switch to responsive or device mode in Windows and Linux environments after opening your DevTools, press

CTRL + SHIFT + M

In a Mac environment, use

CMD + SHIFT + M

You can also click on the mobile device icon at the bottom-left corner of the browser.

Select your preferences (device type, zoom level, orientation etc.). The screenshot captured using this option matches the device dimensions of the emulated phone.

Click on the Customize and control Dev Tools (the second three vertical dots at the top-right corner) and select capture full size screenshot option

Voilà, we have successfully captured a full page screenshot with ease.

NB: Chrome DevTools appears to have a cut off of 16384px in page height for a full screenshot. Firefox seems to go further (at least 18k px)

If you are a Software Engineer, you may want to check out these useful chrome URLs (chrome://chrome-urls/)

Explore more features available on Google Chrome DevTools and keep winning.

Why I Blog

Thu, 01 Nov 2018 06:00:00 GMT

Each day, on this road less taken, I learn a lot by reading tech articles, documentations, solving daily challenges faced at work and listening to podcasts from great minds which I rarely document.

I've learnt that writing improves one's thought process through research and documentation and helps to reinforce one's knowledge. Over time, I've also learnt that the adage

What will be will be

does not apply to all scenarios. A better adage would be,

What we want to be, we make it be.

I also love this quote by Steve Jobs,

Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma — which is living with the results of other people’s thinking. Don’t let the noise of others’ opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.

Sequel to this, I have finally chosen to start this blog, an intellectual journal. Each time I type git push and hit the Enter key letting the CI build pass, I let my thoughts out to the world to be read by probably a lot of people.

I hope to become more disciplined on this journey and grow to become who I really want to be and help lives, one at a time.

Wondering who I am?

I'm Chiamaka which means "God is beautiful", a Software Engineer building usable products in the city that never sleeps - Lagos, Nigeria.