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…

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…

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…

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'); //…

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> --> <!-- ✅…

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'…

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 = {}; /*…

Say hi to the first Vue tidbit 👋 It’s about time I start covering Vue in my code tidbits, right 😉‬ Use the new named slot shorthand with “#”. This is available now in Vue 2.6.0+ 👍 <!-- Old --> <template v-slot:content> <!-- New --> <template #content> Vue, hands down…