Understanding the difference between ˍˍˍ and ˍˍˍ in front-end development

Star me on GitHub → 1450 ⭐

As a writer or developer working with English or front-end technologies, you'll come across many similar words or concepts with different use cases and applications. For instance, "speak", "tell", "talk", and "say" are verbs that may seem interchangeable, yet they have different meanings.

Similar situations arise in front-end development with concepts like `display: none`, `opacity: 0`, and `visibility: hidden` used to hide elements in CSS. In HTML, `preload` and `prefetch` are attributes that can improve loading performance. For better performance, we use techniques like debouncing and throttling in JavaScript.

In addition to vanilla front-end technologies, we often use external libraries or frameworks to speed up development. However, these libraries may introduce similar concepts, such as controlled or uncontrolled and stateless or stateful components in React.

Understanding the differences between similar concepts is crucial. Knowing their strengths and weaknesses allows us to use them effectively.

I firmly believe that if we have knowledge about something, we should know it inside and out. That's why I created this collection. It covers the distinctions between various topics in front-end development, such as CSS, DOM, HTML, and JavaScript. It also includes "good to know" sections, best practices, tips, and tricks to help you master these concepts.

If you can't explain it simply, you don't understand it well enough Albert Einstein

CSS

Animations vs transitions

font-size vs line-height

pseudo-classes vs pseudo-elements

word-break: break-all vs word-wrap: break-word

margin vs padding

border-box vs content-box

display: none vs [hidden]

style="width: ___" vs width="___"

border vs outline

display: none vs opacity: 0 vs visibility: hidden

Normalize vs Reset CSS

:active vs :focus

DOM

ele.setAttribute vs ele.attribute

HTML attributes vs DOM properties

innerText vs textContent

createDocumentFragment vs createElement

resize event vs ResizeObserver

NodeIterator vs TreeWalker

Dynamic vs static NodeList

children vs childNodes

blur vs focusOut

append vs appendChild

standard event handler vs event delegation

clientY vs pageY

event bubbling vs capturing

naturalWidth vs width

clientHeight vs offsetHeight vs scrollHeight

DOMContentLoaded vs load

stopImmediatePropagation vs stopPropagation

event.preventDefault vs return false

currentTarget vs target

mouseenter vs mouseover

keydown vs keypress vs keyup

nodeName vs tagName

key vs keyCode vs which

addEventListener() function vs on property

parentElement vs parentNode

HTML

aria-hidden vs hidden

alt vs aria-label

HTML entities vs Unicode characters

preload vs prefetch

script async vs script defer

class vs id

alt vs title

Element vs Node

JavaScript

setTimeout(0) vs requestAnimationFrame

Microtasks vs macrotasks

setInterval() vs setTimeout() vs setTimeout(0)

Call stack vs task queue

Debouncing vs throttling

Anonymous vs closure functions

Deep compare vs shallow compare

cookie vs localStorage vs sessionStorage

ceil vs floor vs round

Object constructor function vs object literals

eval() vs new Function()

__proto__ vs prototype

dev vs devDependencies vs peerDependencies in package.json

Deep copy vs shallow copy

object.property vs Object.defineProperty()

^a.b.c vs ~a.b.c in package.json file

Set vs Array

Object.freeze() vs Object.seal()

Object.assign() vs Object spread operator

Multiple awaits vs Promise.all()

isNaN vs Number.isNaN

a vs !!a

default parameters vs OR operator

encodeURI vs encodeURIComponent

for ... in vs for ... of

arrow vs regular function

function declaration vs function expression

Map vs WeakMap

concat vs push

Object vs Map

variable === undefined vs typeof variable === "undefined"

method in class constructor vs prototype

hasOwnProperty vs in

instanceof vs typeof

null vs undefined

double quotes vs single quote

const vs let vs var

string.charAt(i) vs string[i]

object.property vs object["property"]

Object.getOwnPropertyNames() vs Object.keys()

Number() vs parseInt()

delete obj.property vs obj.property = undefined

Object.is() vs ===

== vs ===

array = [] vs array.length = 0

argument vs parameter

apply vs call

React

Controlled vs uncontrolled modes

Controlled vs uncontrolled components

Stateless vs stateful components

React.useEffect() vs React.useLayoutEffect()

React.createElement() vs React.cloneElement()

React.useState() vs React.useReducer()

React.createElement() vs JSX

ReactNode vs ReactElement

JavaScript events vs synthetic React events

<> vs React.Fragment

TypeScript

void vs never

Readonly<T[]> vs ReadOnlyArray<T>

K keyof T vs K extends keyof T

any vs unknown

const enum vs enum

literal union type vs string enums

function vs property in interface

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn