Recently, I finally integrated unit testing into my startup project. I’ve settled with Jest, I’ll speak more about this in a separate journal entry. While writing my test, I ran into a bit of a dilemma of trying to write unit tests for non-exported functions 😖

Testing Exported Function

It’s super straightforward to test exported functions.

// utils.js
export function sayHi() {
  return '👋';
}

And a unit test could be something like this:

// utils.test.jsimport { sayHi } from './utils.js';describe('sayHi', () => {
  it('returns wave emoji', () => {
    expect(sayHi()).toBe('👋');
  });
});

Non-export function

Now, what if the function is not exported?

…

Welcome to my first journal entry 👋 So excited for this new series! Unlike my blog posts, this will be an unfiltered and unpolished glimpse of my journey in tech. I’ll be sharing things I’m learning along the way, my thoughts as I navigate my career, and definitely the mistakes I’m making as I’m working on a new startup project. It’s going to cover the whole gamut 🌈 I’m so pumped to have you join me and can’t wait to start sharing my story!

Being “Perfect” is Holding You Back

I’ve been thinking for quite some time to start documenting my journey in tech. But every…

Semantic HTML is a great way to convey meaning of your page. Mark up abbreviated content with the <abbr> tag. And when you pass a title, it will create a tooltip when hovered over. Nice! 👏

<abbr title="Today I learned">TIL</abbr> something awesome!

Table of Content

− Default Styling
− Styling abbr Tag
− Battle between abbr VS acronym ⚔️
− Mixing abbr with dfn
− Why Semantic HTML is important
− Display HTML abbr on Mobile
−− Solution 1: Display Non-abbreviated Term
−− Solution 2: Display Non-abbreviated Term with Tap
−− Solution 3: JavaScript Tooltip
− Browser Support
− Resources

Default Styling

The default styling…

It’s super easy to pad a string! Just pass in your desired string and length. The string will be padded until the length has been met. Use padStart to apply it at the start and padEnd to apply it at the end 🎀

const string = 'hi';string.padStart(3, 'c'); // "chi"string.padEnd(4, 'l'); // "hill"

Syntax

This is the syntax of how to use the method.

string.padStart(<maxLength>, <padString>)string.padEnd(<maxLength>, <padString>)

Understanding the Parameters

padEnd and padStart accepts the same parameters.

1. maxLength

This is the max length of the result string.

const result = string.padStart(5);result.length; // 5

When I was learning this, this took me…

Instead of passing an empty string, which can lead to an empty class in the DOM output. In your ternary operator, you can return “null”. This will ensure no empty class in the DOM 🌟

<!-- ❌ -->
<div :class="isBold ? 'bold' : ''">
<!-- <div class> --><!-- ✅ -->
<div :class="isBold ? 'bold' : null">
<!-- <div> -->

Table of Content − Comparing Empty String ‘’ vs null −− Scenario 1: Using Empty String ‘’ −− Scenario 2: Using null −− Scenario 3: using undefined −− Falsy Values − Refactoring with Object Syntax − Using && to set…

Here are four ways to combine strings in JavaScript. My favorite way is using Template Strings. Why? Because it’s more readable, no backslash to escape quotes, no awkward empty space separator, and no more messy plus operators 👏

const icon = '👋';// Template Strings
`hi ${icon}`;// join() Method
['hi', icon].join(' ');// Concat() Method
''.concat('hi ', icon);// + Operator
'hi ' + icon;// RESULT
// hi 👋

Sometimes nowrap is helpful when you don't want the text to break in an awkward spot 🔗

However, nowrap can sometimes lead to overlapping text. You can easily fix it by setting the white-space to be normal 👍

div {
  white-space: nowrap;
}

Here’s a Code Recipe to check if an object is empty or not. For newer browsers, you can use plain vanilla JS and use the new “Object.keys” 🍦 But for older browser support, you can install the Lodash library and use their “isEmpty” method 🤖

const empty = {};/* -------------------------
  Plain JS for Newer Browser
----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// true/* -------------------------
  Lodash for Older Browser
----------------------------*/
_.isEmpty(empty)
// true

What is Vanilla JavaScript

Vanilla JavaScript is not a new framework or library. It’s just regular, plain JavaScript without the use of a library like Lodash or jQuery.

A. Empty Object Check in Newer Browsers

…