Image for post
Image for post

Lodash is a JavaScript library that is packed with a bunch of goodies 🍬. Unlike Halloween goodies that means you have to do laps around your neighborhood to burn those extra calories. These goodies are common utility functions so you can avoid re-inventing the wheel 👍 And when you’re working on a startup project like me, it helps me to get up and running super fast 🦸‍♀️

Table of Content

Install Lodash with Vue
Using Lodash in Vue
A. Import Entire Lodash Library
B. Import Specific Lodash Functions
Improving Discussions 💛
Do you really need Lodash?


Image for post
Image for post

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?


Image for post
Image for post
Journal Entry #1 from SamanthaMing.com

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…


Image for post
Image for post
Code Tidbit by SamanthaMing.com

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…


Image for post
Image for post
Code Tidbit by SamanthaMing.com

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…


Image for post
Image for post
Code Tidbit by SamanthaMing.com

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 ContentComparing Empty String ‘’ vs null −− Scenario 1: Using Empty String ‘’ −− Scenario 2: Using null −− Scenario 3: using undefined −− Falsy ValuesRefactoring with Object SyntaxUsing && to set…


Image for post
Image for post
Code Tidbit by Samantha Ming.com

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 👋

Image for post
Image for post
CodeTidbit by SamanthaMing.com

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;
}

Code snippet of How to Check if Object is Empty in JavaScript for newer browser and older browse
Code snippet of How to Check if Object is Empty in JavaScript for newer browser and older browse

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


Image for post
Image for post

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, have the BEST documentation EVER! So I’m not going to try to compete with that. Just like how I’d never have the audacity to compete with Serena Williams to a tennis match. Even though I have a pretty mean serve 🎾 (just kidding, I can barley hit the ball 😂).

Samantha Ming

Frontend Developer sharing weekly JS, HTML, CSS code tidbits🔥 Discover them all on samanthaming.com 💛

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store