Faisal Akbar
@faisalakbar.bsky.social
Full Stack Problem Solver | Data Storyteller in the making | Tech explorer bridging ideas and implementation
Currently @ Bank of America
Blogging @ dsfaisal.com
Currently @ Bank of America
Blogging @ dsfaisal.com
💡JavaScript Tips:
Remove duplicates using Set:
const unique = [...new Set([1, 2, 2, 3, 3, 4])] // [1, 2, 3, 4]
Remove duplicates using Set:
const unique = [...new Set([1, 2, 2, 3, 3, 4])] // [1, 2, 3, 4]
January 22, 2025 at 11:50 PM
💡JavaScript Tips:
Remove duplicates using Set:
const unique = [...new Set([1, 2, 2, 3, 3, 4])] // [1, 2, 3, 4]
Remove duplicates using Set:
const unique = [...new Set([1, 2, 2, 3, 3, 4])] // [1, 2, 3, 4]
💡JavaScript Tips:
Optional Chaining for Safe Property Access
const user = {
address: {
street: "123 Main St"
}
}
// Old way
const street = user && user.address && user.address.street
// Modern way
const street = user?.address?.street
Optional Chaining for Safe Property Access
const user = {
address: {
street: "123 Main St"
}
}
// Old way
const street = user && user.address && user.address.street
// Modern way
const street = user?.address?.street
January 19, 2025 at 6:21 PM
💡JavaScript Tips:
Optional Chaining for Safe Property Access
const user = {
address: {
street: "123 Main St"
}
}
// Old way
const street = user && user.address && user.address.street
// Modern way
const street = user?.address?.street
Optional Chaining for Safe Property Access
const user = {
address: {
street: "123 Main St"
}
}
// Old way
const street = user && user.address && user.address.street
// Modern way
const street = user?.address?.street
💡JavaScript Tips:
Nullish Coalescing vs Logical OR
Nullish Coalescing vs Logical OR
January 18, 2025 at 8:06 PM
💡JavaScript Tips:
Nullish Coalescing vs Logical OR
Nullish Coalescing vs Logical OR
🚀 Understanding Stack Data Structure
A Stack is a linear data structure that follows LIFO (Last In First Out).
Think of it like a stack of plates - you can only:
1. Add (push) a plate to the top
2. Remove (pop) a plate from the top
3. Look at (peek) the top plate without removing it
A Stack is a linear data structure that follows LIFO (Last In First Out).
Think of it like a stack of plates - you can only:
1. Add (push) a plate to the top
2. Remove (pop) a plate from the top
3. Look at (peek) the top plate without removing it
January 5, 2025 at 10:47 PM
🚀 Understanding Stack Data Structure
A Stack is a linear data structure that follows LIFO (Last In First Out).
Think of it like a stack of plates - you can only:
1. Add (push) a plate to the top
2. Remove (pop) a plate from the top
3. Look at (peek) the top plate without removing it
A Stack is a linear data structure that follows LIFO (Last In First Out).
Think of it like a stack of plates - you can only:
1. Add (push) a plate to the top
2. Remove (pop) a plate from the top
3. Look at (peek) the top plate without removing it
Explanation of cn utility function from #shadcn/ui
The cn function combines two popular utilities:
1️⃣ clsx - For conditionally joining CSS class names
2️⃣ tailwind-merge - For merging Tailwind CSS classes intelligently, removing conflicts
The cn function combines two popular utilities:
1️⃣ clsx - For conditionally joining CSS class names
2️⃣ tailwind-merge - For merging Tailwind CSS classes intelligently, removing conflicts
January 2, 2025 at 8:44 PM
Explanation of cn utility function from #shadcn/ui
The cn function combines two popular utilities:
1️⃣ clsx - For conditionally joining CSS class names
2️⃣ tailwind-merge - For merging Tailwind CSS classes intelligently, removing conflicts
The cn function combines two popular utilities:
1️⃣ clsx - For conditionally joining CSS class names
2️⃣ tailwind-merge - For merging Tailwind CSS classes intelligently, removing conflicts
🚀 useTransition() - The performance hook you need:
• Non-blocking state updates
• Background processing
• Loading state management
• Concurrent rendering ready
#react
• Non-blocking state updates
• Background processing
• Loading state management
• Concurrent rendering ready
#react
December 30, 2024 at 10:26 PM
🚀 useTransition() - The performance hook you need:
• Non-blocking state updates
• Background processing
• Loading state management
• Concurrent rendering ready
#react
• Non-blocking state updates
• Background processing
• Loading state management
• Concurrent rendering ready
#react
🎯 useEffect Cleanup Cheatsheet:
• Timers: clearInterval
• Events: removeEventListener
• Subscriptions: unsubscribe
• Connections: disconnect
• API: cancel request
🚀 Why useEffect Cleanup?
No cleanup = Memory leaks
Missing cleanup = Bugs
Bad cleanup = Weird behavior
#ReactJS #javascript
• Timers: clearInterval
• Events: removeEventListener
• Subscriptions: unsubscribe
• Connections: disconnect
• API: cancel request
🚀 Why useEffect Cleanup?
No cleanup = Memory leaks
Missing cleanup = Bugs
Bad cleanup = Weird behavior
#ReactJS #javascript
December 29, 2024 at 8:18 PM
🎯 useEffect Cleanup Cheatsheet:
• Timers: clearInterval
• Events: removeEventListener
• Subscriptions: unsubscribe
• Connections: disconnect
• API: cancel request
🚀 Why useEffect Cleanup?
No cleanup = Memory leaks
Missing cleanup = Bugs
Bad cleanup = Weird behavior
#ReactJS #javascript
• Timers: clearInterval
• Events: removeEventListener
• Subscriptions: unsubscribe
• Connections: disconnect
• API: cancel request
🚀 Why useEffect Cleanup?
No cleanup = Memory leaks
Missing cleanup = Bugs
Bad cleanup = Weird behavior
#ReactJS #javascript
🚀 React Hooks: useEffect vs useLayoutEffect
useEffect:
• Runs after paint
• Async, non-blocking
• Use for: data fetching, subscriptions
• Default choice for most cases
useLayoutEffect:
• Runs before paint
• Sync, blocking
• Use for: DOM measurements, preventing flickers
• Performance sensitive
useEffect:
• Runs after paint
• Async, non-blocking
• Use for: data fetching, subscriptions
• Default choice for most cases
useLayoutEffect:
• Runs before paint
• Sync, blocking
• Use for: DOM measurements, preventing flickers
• Performance sensitive
December 28, 2024 at 6:57 PM
🚀 React Hooks: useEffect vs useLayoutEffect
useEffect:
• Runs after paint
• Async, non-blocking
• Use for: data fetching, subscriptions
• Default choice for most cases
useLayoutEffect:
• Runs before paint
• Sync, blocking
• Use for: DOM measurements, preventing flickers
• Performance sensitive
useEffect:
• Runs after paint
• Async, non-blocking
• Use for: data fetching, subscriptions
• Default choice for most cases
useLayoutEffect:
• Runs before paint
• Sync, blocking
• Use for: DOM measurements, preventing flickers
• Performance sensitive
🎯 Let's understand useEffect's dependency array in React:
December 27, 2024 at 11:45 PM
🎯 Let's understand useEffect's dependency array in React:
🎯 useEffect() Simplified:
// Run once
useEffect(() => {}, [])
// Run on changes
useEffect(() => {}, [data])
// Run & cleanup
useEffect(() => {
return () => cleanup()
}, [])
No magic, just timing!
#ReactJS #javascript
// Run once
useEffect(() => {}, [])
// Run on changes
useEffect(() => {}, [data])
// Run & cleanup
useEffect(() => {
return () => cleanup()
}, [])
No magic, just timing!
#ReactJS #javascript
December 27, 2024 at 5:19 PM
🎯 useEffect() Simplified:
// Run once
useEffect(() => {}, [])
// Run on changes
useEffect(() => {}, [data])
// Run & cleanup
useEffect(() => {
return () => cleanup()
}, [])
No magic, just timing!
#ReactJS #javascript
// Run once
useEffect(() => {}, [])
// Run on changes
useEffect(() => {}, [data])
// Run & cleanup
useEffect(() => {
return () => cleanup()
}, [])
No magic, just timing!
#ReactJS #javascript
🔍 useRef() Cheat Sheet:
const ref = useRef(initialValue)
3 Things to Remember:
• It's mutable (ref.current)
• Changes are instant
• Won't trigger re-renders
Perfect for:
📍 DOM references
⏱️ Timers
🗃️ Previous values
#React #JavaScript
const ref = useRef(initialValue)
3 Things to Remember:
• It's mutable (ref.current)
• Changes are instant
• Won't trigger re-renders
Perfect for:
📍 DOM references
⏱️ Timers
🗃️ Previous values
#React #JavaScript
December 26, 2024 at 5:57 PM
🔍 useRef() Cheat Sheet:
const ref = useRef(initialValue)
3 Things to Remember:
• It's mutable (ref.current)
• Changes are instant
• Won't trigger re-renders
Perfect for:
📍 DOM references
⏱️ Timers
🗃️ Previous values
#React #JavaScript
const ref = useRef(initialValue)
3 Things to Remember:
• It's mutable (ref.current)
• Changes are instant
• Won't trigger re-renders
Perfect for:
📍 DOM references
⏱️ Timers
🗃️ Previous values
#React #JavaScript
🎓 React useState() Cheatsheet:
const [data, setData] = useState(initialValue)
3 Rules to Remember:
1. State updates trigger re-renders
2. State updates are async
3. Previous state? Use callback:
setData(prev => prev + 1)
#react #javascript
const [data, setData] = useState(initialValue)
3 Rules to Remember:
1. State updates trigger re-renders
2. State updates are async
3. Previous state? Use callback:
setData(prev => prev + 1)
#react #javascript
December 26, 2024 at 4:59 AM
🎓 React useState() Cheatsheet:
const [data, setData] = useState(initialValue)
3 Rules to Remember:
1. State updates trigger re-renders
2. State updates are async
3. Previous state? Use callback:
setData(prev => prev + 1)
#react #javascript
const [data, setData] = useState(initialValue)
3 Rules to Remember:
1. State updates trigger re-renders
2. State updates are async
3. Previous state? Use callback:
setData(prev => prev + 1)
#react #javascript
🧸 useState() explained to a 5-year-old:
It's like a toy box:
- box = your state
- toys = your data
- replacing toys = setState
When you put in new toys (setState),
React shows everyone your new toys (re-render)!
#React
It's like a toy box:
- box = your state
- toys = your data
- replacing toys = setState
When you put in new toys (setState),
React shows everyone your new toys (re-render)!
#React
December 25, 2024 at 8:15 PM
🧸 useState() explained to a 5-year-old:
It's like a toy box:
- box = your state
- toys = your data
- replacing toys = setState
When you put in new toys (setState),
React shows everyone your new toys (re-render)!
#React
It's like a toy box:
- box = your state
- toys = your data
- replacing toys = setState
When you put in new toys (setState),
React shows everyone your new toys (re-render)!
#React
🪝 React Hooks Explained Simply:
useCallback vs useMemo
useCallback: Memoizes a FUNCTION
const fn = useCallback(() => doSomething(), [deps])
useMemo: Memoizes a VALUE
const value = useMemo(() => computeValue(), [deps])
#React #JavaScript
useCallback vs useMemo
useCallback: Memoizes a FUNCTION
const fn = useCallback(() => doSomething(), [deps])
useMemo: Memoizes a VALUE
const value = useMemo(() => computeValue(), [deps])
#React #JavaScript
December 25, 2024 at 3:05 AM
🪝 React Hooks Explained Simply:
useCallback vs useMemo
useCallback: Memoizes a FUNCTION
const fn = useCallback(() => doSomething(), [deps])
useMemo: Memoizes a VALUE
const value = useMemo(() => computeValue(), [deps])
#React #JavaScript
useCallback vs useMemo
useCallback: Memoizes a FUNCTION
const fn = useCallback(() => doSomething(), [deps])
useMemo: Memoizes a VALUE
const value = useMemo(() => computeValue(), [deps])
#React #JavaScript
📝 Tech Interview Prep:
Key difference:
Pass by Value - Function can't modify original (primitive types)
Pass by Reference - Function can modify original (reference types)
Key difference:
Pass by Value - Function can't modify original (primitive types)
Pass by Reference - Function can modify original (reference types)
December 24, 2024 at 7:37 PM
📝 Tech Interview Prep:
Key difference:
Pass by Value - Function can't modify original (primitive types)
Pass by Reference - Function can modify original (reference types)
Key difference:
Pass by Value - Function can't modify original (primitive types)
Pass by Reference - Function can modify original (reference types)
🌐 JavaScript Pro Tip:
Stop concatenating currency symbols! Use Intl.NumberFormat for proper formatting:
#javascript #webdev
Stop concatenating currency symbols! Use Intl.NumberFormat for proper formatting:
#javascript #webdev
December 21, 2024 at 5:01 AM
🌐 JavaScript Pro Tip:
Stop concatenating currency symbols! Use Intl.NumberFormat for proper formatting:
#javascript #webdev
Stop concatenating currency symbols! Use Intl.NumberFormat for proper formatting:
#javascript #webdev
JavaScript Tip 💡:
Two ways to group by JavaScript with zero dependencies:
✅ using reduce()
✅ using Object.groupBy()
Two ways to group by JavaScript with zero dependencies:
✅ using reduce()
✅ using Object.groupBy()
December 16, 2024 at 2:17 AM
JavaScript Tip 💡:
Two ways to group by JavaScript with zero dependencies:
✅ using reduce()
✅ using Object.groupBy()
Two ways to group by JavaScript with zero dependencies:
✅ using reduce()
✅ using Object.groupBy()
💡JavaScript Tip:
map() is an array method in JavaScript that:
- Creates a new array
- Transforms each element of the original array
- Returns a new array of the same length
- Does NOT modify the original array
map() is an array method in JavaScript that:
- Creates a new array
- Transforms each element of the original array
- Returns a new array of the same length
- Does NOT modify the original array
December 11, 2024 at 2:49 AM
💡JavaScript Tip:
map() is an array method in JavaScript that:
- Creates a new array
- Transforms each element of the original array
- Returns a new array of the same length
- Does NOT modify the original array
map() is an array method in JavaScript that:
- Creates a new array
- Transforms each element of the original array
- Returns a new array of the same length
- Does NOT modify the original array
JavaScript Pro Tip: Object Destructing
December 7, 2024 at 7:21 PM
JavaScript Pro Tip: Object Destructing
What will be the outputs of the following JavaScript code and why?
December 6, 2024 at 7:41 PM
What will be the outputs of the following JavaScript code and why?