Understanding the difference between ˍˍˍ and ˍˍˍ in front-end development
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
08 Sep, 2023
font-size vs line-height
02 Sep, 2023
pseudo-classes vs pseudo-elements
31 Aug, 2023
word-break: break-all vs word-wrap: break-word
09 Sep, 2020
margin vs padding
04 Sep, 2020
border-box vs content-box
03 Sep, 2020
display: none vs [hidden]
18 Jul, 2020
style="width: ___" vs width="___"
02 Jul, 2020
border vs outline
17 Jun, 2020
Normalize vs Reset CSS
23 May, 2020
:active vs :focus
23 May, 2020
DOM
createDocumentFragment vs createElement
22 Sep, 2023
resize event vs ResizeObserver
14 Sep, 2023
NodeIterator vs TreeWalker
09 Sep, 2023
Dynamic vs static NodeList
04 Sep, 2023
children vs childNodes
04 Sep, 2023
blur vs focusOut
25 Aug, 2023
append vs appendChild
25 Aug, 2023
standard event handler vs event delegation
23 Aug, 2023
clientY vs pageY
01 Sep, 2020
event bubbling vs capturing
27 Aug, 2020
naturalWidth vs width
30 Jun, 2020
clientHeight vs offsetHeight vs scrollHeight
28 Jun, 2020
DOMContentLoaded vs load
25 Jun, 2020
stopImmediatePropagation vs stopPropagation
24 Jun, 2020
event.preventDefault vs return false
24 Jun, 2020
currentTarget vs target
24 Jun, 2020
mouseenter vs mouseover
18 Jun, 2020
keydown vs keypress vs keyup
18 Jun, 2020
nodeName vs tagName
16 Jun, 2020
key vs keyCode vs which
16 Jun, 2020
addEventListener() function vs on property
24 May, 2020
parentElement vs parentNode
23 May, 2020
HTML
alt vs aria-label
16 Sep, 2023
HTML entities vs Unicode characters
04 Sep, 2023
preload vs prefetch
25 Aug, 2023
<div> vs <section>
04 Sep, 2020
script async vs script defer
31 Aug, 2020
<button> vs <input type="button" />
19 Jun, 2020
<b>, <i> vs <strong>, <em>
19 Jun, 2020
class vs id
24 May, 2020
alt vs title
24 May, 2020
Element vs Node
23 May, 2020
JavaScript
Microtasks vs macrotasks
08 Sep, 2023
setInterval() vs setTimeout() vs setTimeout(0)
06 Sep, 2023
Call stack vs task queue
06 Sep, 2023
Debouncing vs throttling
05 Sep, 2023
Anonymous vs closure functions
05 Sep, 2023
Deep compare vs shallow compare
02 Sep, 2023
cookie vs localStorage vs sessionStorage
02 Sep, 2023
ceil vs floor vs round
01 Sep, 2023
Object constructor function vs object literals
31 Aug, 2023
eval() vs new Function()
31 Aug, 2023
__proto__ vs prototype
31 Aug, 2023
Deep copy vs shallow copy
30 Aug, 2023
object.property vs Object.defineProperty()
29 Aug, 2023
^a.b.c vs ~a.b.c in package.json file
29 Aug, 2023
Set vs Array
28 Aug, 2023
Object.freeze() vs Object.seal()
28 Aug, 2023
Object.assign() vs Object spread operator
28 Aug, 2023
Multiple awaits vs Promise.all()
26 Aug, 2023
isNaN vs Number.isNaN
26 Aug, 2023
a vs !!a
25 Aug, 2023
default parameters vs OR operator
23 Aug, 2023
encodeURI vs encodeURIComponent
10 Sep, 2020
for ... in vs for ... of
08 Sep, 2020
arrow vs regular function
04 Sep, 2020
function declaration vs function expression
03 Sep, 2020
Map vs WeakMap
27 Aug, 2020
concat vs push
25 Aug, 2020
Object vs Map
10 Aug, 2020
slice vs splice
01 Aug, 2020
undefined vs void
16 Jul, 2020
substr vs substring
15 Jul, 2020
++value vs value++
15 Jul, 2020
method in class constructor vs prototype
15 Jul, 2020
hasOwnProperty vs in
08 Jul, 2020
instanceof vs typeof
24 Jun, 2020
null vs undefined
18 Jun, 2020
double quotes vs single quote
18 Jun, 2020
const vs let vs var
18 Jun, 2020
string.charAt(i) vs string[i]
10 Jun, 2020
object.property vs object["property"]
10 Jun, 2020
Object.getOwnPropertyNames() vs Object.keys()
10 Jun, 2020
Number() vs parseInt()
10 Jun, 2020
delete obj.property vs obj.property = undefined
10 Jun, 2020
Object.is() vs ===
02 Jun, 2020
== vs ===
02 Jun, 2020
array = [] vs array.length = 0
02 Jun, 2020
argument vs parameter
02 Jun, 2020
apply vs call
02 Jun, 2020
React
Controlled vs uncontrolled modes
11 Sep, 2023
Controlled vs uncontrolled components
11 Sep, 2023
Stateless vs stateful components
10 Sep, 2023
React.useEffect() vs React.useLayoutEffect()
10 Sep, 2023
React.createElement() vs React.cloneElement()
10 Sep, 2023
React.useState() vs React.useReducer()
08 Sep, 2023
React.createElement() vs JSX
03 Sep, 2023
ReactNode vs ReactElement
01 Sep, 2023
JavaScript events vs synthetic React events
01 Sep, 2023
<> vs React.Fragment
07 Oct, 2020
TypeScript
void vs never
24 Aug, 2023
Readonly<T[]> vs ReadOnlyArray<T>
24 Aug, 2023
K keyof T vs K extends keyof T
24 Aug, 2023
any vs unknown
24 Aug, 2023
const enum vs enum
27 Aug, 2020
literal union type vs string enums
26 Aug, 2020
string vs String
25 Aug, 2020
interface vs type
20 Aug, 2020
*.d.ts vs *.ts
20 Aug, 2020
const vs readonly
20 Aug, 2020
function vs property in interface
18 Aug, 2020
Recent posts ⚡
Copy the content of an element to your clipboard
01 Oct, 2023
Make a text area fit its content automatically
30 Sep, 2023
Quickly insert alternate characters while typing
30 Sep, 2023
Zebra-like background
30 Sep, 2023
Add autocomplete to your text area
28 Sep, 2023
Linear scale of a number between two ranges
28 Sep, 2023
Highlight the current line in a text area
27 Sep, 2023
Create your own custom cursor in a text area
27 Sep, 2023
Mirror a text area for improving user experience
26 Sep, 2023
Display the line numbers in a text area
24 Sep, 2023
Select a given line in a text area
24 Sep, 2023
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