React Context
(How to stop your React components from rendering unnecessarily)
(How to stop your React components from rendering unnecessarily)
❤3
Git Rebase Explained
A rebase takes your commits and moves them on top of another branch, creating a cleaner history.
Imagine:
After rebasing:
Your feature looks like it was created from the latest version of main.
Teams use it:
- To maintain cleaner commit history.
- For easier code reviews.
- Fewer unnecessary merge commits.
📌 The rule: Rebase your local work. You have to be careful rebasing commits that other people already use.
A rebase takes your commits and moves them on top of another branch, creating a cleaner history.
Imagine:
main:
A---B---C
feature:
D---E
After rebasing:
main:
A---B---C---D---E
Your feature looks like it was created from the latest version of main.
Teams use it:
- To maintain cleaner commit history.
- For easier code reviews.
- Fewer unnecessary merge commits.
📌 The rule: Rebase your local work. You have to be careful rebasing commits that other people already use.
👍2❤1
🔥 7 Free AI Tools for Developers You Should Try
If you're learning to code or building projects, these AI tools can save you hours every week 👨💻⚡️
1. Cursor 💻
• AI-powered code editor
• Write, debug and understand code faster
2. GitHub Copilot 🤖
• AI coding assistant
• Get code suggestions directly in your editor
3. Replit 🚀
• Code and build projects in your browser
• AI assistance + instant deployment
4. v0 🎨
• Generate UI from text prompts
• Great for quickly creating web interfaces
5. Bolt.new ⚡️
• Build full-stack applications using prompts
• Useful for quickly prototyping ideas
6. Lovable 🛠
• Create web apps using natural language
• Great for turning ideas into working prototypes
7. Phind 🔎
• AI search built for developers
• Useful for technical questions and debugging
💾 Save this list for your next project.
If you're learning to code or building projects, these AI tools can save you hours every week 👨💻⚡️
1. Cursor 💻
• AI-powered code editor
• Write, debug and understand code faster
2. GitHub Copilot 🤖
• AI coding assistant
• Get code suggestions directly in your editor
3. Replit 🚀
• Code and build projects in your browser
• AI assistance + instant deployment
4. v0 🎨
• Generate UI from text prompts
• Great for quickly creating web interfaces
5. Bolt.new ⚡️
• Build full-stack applications using prompts
• Useful for quickly prototyping ideas
6. Lovable 🛠
• Create web apps using natural language
• Great for turning ideas into working prototypes
7. Phind 🔎
• AI search built for developers
• Useful for technical questions and debugging
💾 Save this list for your next project.
❤3
CSS Text Effects
This is a library of 90 animated text effects built with pure CSS; aurora gradients, glitches, split-flap boards, liquid fills and other lesser-seen tricks.
No JavaScript, no dependencies. Copy the self-contained
Try it at: https://text-effects.colorion.co/
Follow our page for more.
This is a library of 90 animated text effects built with pure CSS; aurora gradients, glitches, split-flap boards, liquid fills and other lesser-seen tricks.
No JavaScript, no dependencies. Copy the self-contained
CSS for any effect, or grab a ready-made Prompt to have your coding agent recreate it. Try it at: https://text-effects.colorion.co/
Follow our page for more.
❤1
Forwarded from Programming Quiz Channel
What is a key difference between arrow functions and regular functions regarding 'this'?
Anonymous Quiz
22%
Arrow functions get their own 'this' bound at call time, just like regular functions
69%
Arrow functions don't have their own 'this'; they inherit it lexically from the surrounding scope
3%
Regular functions never have access to 'this'
6%
There is no meaningful difference
❤2
What Actually Happens During npm install
It first reads your
Then it looks at your package-lock.json, which records the exact dependency versions your project expects.
Next it builds a dependency tree.
If Package A needs React 18.2.0 and Package B also needs React 18.2.0, npm can reuse that version.
If another package requires React 17, npm may install both versions because their requirements don't match.
Only after resolving that entire tree does npm download packages and place them into
That's why deleting
The lock file isn't just a cache. It's a snapshot of the dependency tree your project was built and tested with.
npm install does far more than download packages.It first reads your
package.json.Then it looks at your package-lock.json, which records the exact dependency versions your project expects.
Next it builds a dependency tree.
If Package A needs React 18.2.0 and Package B also needs React 18.2.0, npm can reuse that version.
If another package requires React 17, npm may install both versions because their requirements don't match.
Only after resolving that entire tree does npm download packages and place them into
node_modules.That's why deleting
package-lock.json can unexpectedly change working code.The lock file isn't just a cache. It's a snapshot of the dependency tree your project was built and tested with.
👍2
Web Development
Web Devs Do you know why URLs have two slashes (//) after http:? Not 1. Not 3. Why 2? 🤔
Why do we type those two slashes in
It turns out the double slash comes from an old 1980s computer system called Apollo Domain OS.
Back then, if you typed a single slash (
So, they decided two slashes (
When Tim Berners-Lee was building the World Wide Web, he just borrowed that exact rule.
➖ The colon (
➖ The double slash (
The funny part is he later admitted it was a total mistake. The computer didn't actually need the slashes to understand the link. He joked that if he had just left them out, the world would have saved millions of hours of typing.
This comment answered it right. 👏
https://?It turns out the double slash comes from an old 1980s computer system called Apollo Domain OS.
Back then, if you typed a single slash (
/), your computer looked for files inside its own hard drive. The engineers at Apollo needed a way to tell the computer, Hey, don't look inside yourself, look out at the network.
So, they decided two slashes (
//) would mean "network."When Tim Berners-Lee was building the World Wide Web, he just borrowed that exact rule.
➖ The colon (
https:) meant this is the protocol, and ➖ The double slash (
//) meant the web address is coming next.The funny part is he later admitted it was a total mistake. The computer didn't actually need the slashes to understand the link. He joked that if he had just left them out, the world would have saved millions of hours of typing.
This comment answered it right. 👏
❤3👍2
Forwarded from Programming Quiz Channel
What does Array.prototype.map() return?
Anonymous Quiz
18%
The same array modified in place
68%
A new array with transformed elements
8%
A single combined value
5%
Undefined
History API in JavaScript
Modern websites don't reload every page anymore.
So how does the browser change pages without asking the server for a new HTML document?
The answer is the History API.
The History API lets JavaScript change the current URL without triggering a full page refresh.
Frameworks like React Router and Next.js use:
instead of:
The browser updates the address bar. The existing JavaScript application stays alive. Only the required UI changes.
This is why navigation inside a React application feels instant. The browser isn't downloading another website.
It's displaying a different view inside the one that's already running.
Modern websites don't reload every page anymore.
So how does the browser change pages without asking the server for a new HTML document?
The answer is the History API.
The History API lets JavaScript change the current URL without triggering a full page refresh.
Frameworks like React Router and Next.js use:
history.pushState(...)
instead of:
window.location = "/dashboard";
The browser updates the address bar. The existing JavaScript application stays alive. Only the required UI changes.
This is why navigation inside a React application feels instant. The browser isn't downloading another website.
It's displaying a different view inside the one that's already running.
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
If you design or vibe code, save this list.
- Kokonut UI : Animated React components
- Motion Sites : Website and animation inspiration
- Motion .dev : Web animation
- Anime .js : JavaScript animation
- Particles Casberry : interactive particles and WebGL effects
- Kokonut UI : Animated React components
- Motion Sites : Website and animation inspiration
- Motion .dev : Web animation
- Anime .js : JavaScript animation
- Particles Casberry : interactive particles and WebGL effects
❤2🔥2
🔅 Server actions in NextJS
Server actions refer to tasks and operations that are executed on the server side.
Next.js, being a hybrid framework, allows you to perform both server-side and client-side rendering, giving you the flexibility to handle different types of data fetching and processing.
Server actions refer to tasks and operations that are executed on the server side.
Next.js, being a hybrid framework, allows you to perform both server-side and client-side rendering, giving you the flexibility to handle different types of data fetching and processing.
❤3