CodeBlitz's profile picture. Building with TypeScript, Javascript, ReactJS, NextJS, NodeJS & Web3 | Sharing what I learn | Open to collabs & projects

Sattar | CodeBlitz

@CodeBlitz

Building with TypeScript, Javascript, ReactJS, NextJS, NodeJS & Web3 | Sharing what I learn | Open to collabs & projects

置顶

3 cool next.js configs to enhance developer experience(DX) - remove all console.* in production - type safe routing - see all console.* in terminal during development #nextjs #reactjs #typescript #javascript

CodeBlitz's tweet image. 3 cool next.js configs to enhance developer experience(DX)

- remove all console.* in production
- type safe routing 
- see all console.* in terminal during development

#nextjs #reactjs #typescript #javascript

What is MCP (Model Context Protocol)? MCP is an open-source standard that connects AI applications to external systems. Think of it as a USB-C port for AI - a standardized way for AI to interact with tools, data, and workflows. Check it out on my GitHub: github.com/sattarrasouli/…

CodeBlitz's tweet image. What is MCP (Model Context Protocol)?

MCP is an open-source standard that connects AI applications to external systems. Think of it as a USB-C port for AI - a standardized way for AI to interact with tools, data, and workflows.

Check it out on my GitHub:
github.com/sattarrasouli/…
CodeBlitz's tweet image. What is MCP (Model Context Protocol)?

MCP is an open-source standard that connects AI applications to external systems. Think of it as a USB-C port for AI - a standardized way for AI to interact with tools, data, and workflows.

Check it out on my GitHub:
github.com/sattarrasouli/…

"use no memo" (only in React Compiler) if you are using React-Compiler and want it to not optimize a component or a function just add "use no memo" at beginning of your code. #ReactJS #ReactCompiler #JavaScript #FrontendDevelopment

CodeBlitz's tweet image. "use no memo" (only in React Compiler)

if you are using React-Compiler and want it to not optimize a component or a function just add "use no memo" at beginning of your code.

#ReactJS #ReactCompiler #JavaScript #FrontendDevelopment

in javascript, there are 2 types of strings: • primitive string → created with quotes ('test', "hello", `template`) • string object (wrapper) → created with new String("test") instanceof checks if the object was constructed by a given constructor function. #javascript

CodeBlitz's tweet image. in javascript, there are 2 types of strings:
• primitive string → created with quotes ('test', "hello", `template`)
• string object (wrapper) → created with new String("test")

instanceof checks if the object was constructed by a given constructor function.

#javascript

do you think knowing these tricky points actually proves that you’re a good developer in interviews? or is it more about problem-solving and code clarity? and if you know other tricky points, share them. #js #ts #reactjs #frontend

CodeBlitz's tweet image. do you think knowing these tricky points actually proves that you’re a good developer in interviews? or is it more about problem-solving and code clarity?

and if you know other tricky points, share them.

#js #ts #reactjs #frontend

Jōtai (means “state” in Japanese) choosing a global state management solution is always a hot topic. i recently discovered jōtai, a minimal, smart, and easy-to-learn library. powerful enough to replace context api + usestate in react projects. #jotai #statemanagement #reactjs

CodeBlitz's tweet image. Jōtai (means “state” in Japanese)

choosing a global state management solution is always a hot topic. i recently discovered jōtai, a minimal, smart, and easy-to-learn library. powerful enough to replace context api + usestate in react projects.

#jotai #statemanagement #reactjs
CodeBlitz's tweet image. Jōtai (means “state” in Japanese)

choosing a global state management solution is always a hot topic. i recently discovered jōtai, a minimal, smart, and easy-to-learn library. powerful enough to replace context api + usestate in react projects.

#jotai #statemanagement #reactjs
CodeBlitz's tweet image. Jōtai (means “state” in Japanese)

choosing a global state management solution is always a hot topic. i recently discovered jōtai, a minimal, smart, and easy-to-learn library. powerful enough to replace context api + usestate in react projects.

#jotai #statemanagement #reactjs

in #reactjs-ts projects, I had to choose between enum and "as const" for something like tabs many recommend "as const" as the modern typescript approach, type-safe and zero-cost. but I personally find enum simpler and easier to read. do we always need to follow “best practices”?

CodeBlitz's tweet image. in #reactjs-ts projects, I had to choose between enum and "as const" for something like tabs
many recommend "as const" as the modern typescript approach, type-safe and zero-cost.
but I personally find enum simpler and easier to read.
do we always need to follow “best practices”?

practice git branching visually and build confidence. try it here: learngitbranching.js.org #FrontendDeveloper #git #reactjs #javascript

CodeBlitz's tweet image. practice git branching visually and build confidence.

try it here:
learngitbranching.js.org

#FrontendDeveloper #git #reactjs #javascript

React.js new features: "Activity" and "View Transitions" Activity: an API to allow components to be visually hidden and deprioritized but preserving UI state. View Transitions: an API allowing smooth UI transitions such as navigation, expanding, opening... #ReactJS #Frontend

CodeBlitz's tweet image. React.js new features: "Activity" and "View Transitions"

Activity: an API to allow components to be visually hidden and deprioritized but preserving UI state.

View Transitions: an API allowing smooth UI transitions such as navigation, expanding, opening...

#ReactJS #Frontend

🔶 Render Props Pattern in ReactJs 🔹Reusable Logic: Share behavior across components easily. 🔹Simple Rendering: Use a function prop to control output. 🔹Clean Design: Keep components focused and flexible. #ReactJS #JavaScript #WebDev #Frontend #Programming

CodeBlitz's tweet image. 🔶 Render Props Pattern in ReactJs
 
🔹Reusable Logic: Share behavior across components easily.

🔹Simple Rendering: Use a function prop to control output.

🔹Clean Design: Keep components focused and flexible.

#ReactJS #JavaScript #WebDev #Frontend #Programming
CodeBlitz's tweet image. 🔶 Render Props Pattern in ReactJs
 
🔹Reusable Logic: Share behavior across components easily.

🔹Simple Rendering: Use a function prop to control output.

🔹Clean Design: Keep components focused and flexible.

#ReactJS #JavaScript #WebDev #Frontend #Programming

good to know:

🔸 TypeScript Tip: The Power of "in" 🔹 The "in" keyword isn’t just for checking properties, it’s also a backbone for type narrowing and mapped types. #TypeScript #JavaScript #WebDevelopment #Frontend #CodingTips #SoftwareEngineering #ReactJS #NextJS #ReactDeveloper

CodeBlitz's tweet image. 🔸 TypeScript Tip: The Power of "in"

🔹 The "in" keyword isn’t just for checking properties, it’s also a backbone for type narrowing and mapped types.

#TypeScript #JavaScript #WebDevelopment #Frontend #CodingTips #SoftwareEngineering #ReactJS #NextJS #ReactDeveloper
CodeBlitz's tweet image. 🔸 TypeScript Tip: The Power of "in"

🔹 The "in" keyword isn’t just for checking properties, it’s also a backbone for type narrowing and mapped types.

#TypeScript #JavaScript #WebDevelopment #Frontend #CodingTips #SoftwareEngineering #ReactJS #NextJS #ReactDeveloper
CodeBlitz's tweet image. 🔸 TypeScript Tip: The Power of "in"

🔹 The "in" keyword isn’t just for checking properties, it’s also a backbone for type narrowing and mapped types.

#TypeScript #JavaScript #WebDevelopment #Frontend #CodingTips #SoftwareEngineering #ReactJS #NextJS #ReactDeveloper
CodeBlitz's tweet image. 🔸 TypeScript Tip: The Power of "in"

🔹 The "in" keyword isn’t just for checking properties, it’s also a backbone for type narrowing and mapped types.

#TypeScript #JavaScript #WebDevelopment #Frontend #CodingTips #SoftwareEngineering #ReactJS #NextJS #ReactDeveloper


react.js tip: PropsWithChildren if you have children with other props you can use PropsWithChildren. #reactjs #nextjs #typescript #javascript

CodeBlitz's tweet image. react.js tip: PropsWithChildren

if you have children with other props you can use PropsWithChildren.

#reactjs #nextjs #typescript #javascript

Weird reactjs tip: console.log directly inside jsx Ever wanted to have a console.log directly inside your JSX without type error? #reactjs #nextjs #javascript #typescript

CodeBlitz's tweet image. Weird reactjs tip: console.log directly inside jsx

Ever wanted to have a console.log directly inside your JSX without type error?

#reactjs #nextjs #javascript #typescript

Sattar | CodeBlitz 已转帖

Gaming heritage 4K

Universal4karts's tweet image. Gaming heritage 4K

git tip: create your own shortcut(alias) git let us create a shorter command for command we often use. by adding it to "git config --global alias." #js #ts #reactjs #nextjs

CodeBlitz's tweet image. git tip: create your own shortcut(alias)

git let us create a shorter command for command we often use.
by adding it to "git config --global alias."

#js #ts #reactjs #nextjs

I fully documented the evolution of react reconciliation from stack to fiber. And what fiber and react compiler brings to react. You can read it on medium: medium.com/@sattarrasouli… #reactjs #nextjs


If you want to deeply understand Why typeof null is object in javascript You can read my article on medium: medium.com/@sattarrasouli…

JavaScript Quiz

e_opore's tweet image. JavaScript Quiz


I’ve just tried nextjs15.5, biome is not compatible with tailwind!


Sattar | CodeBlitz 已转帖

Typed routes are stable in Next 15.5


#TypeScript private is compile-time only. #JavaScript private is runtime enforced. TypeScript private Compile-time only. At runtime, it’s just a normal property. JavaScript #private Runtime enforced (ES2022+). Truly hidden, you can’t access it from outside. #reactjs #nextjs

CodeBlitz's tweet image. #TypeScript private is compile-time only. #JavaScript private is runtime enforced.

TypeScript private
 Compile-time only.
 At runtime, it’s just a normal property.

JavaScript #private
 Runtime enforced (ES2022+).
 Truly hidden, you can’t access it from outside.
#reactjs #nextjs
CodeBlitz's tweet image. #TypeScript private is compile-time only. #JavaScript private is runtime enforced.

TypeScript private
 Compile-time only.
 At runtime, it’s just a normal property.

JavaScript #private
 Runtime enforced (ES2022+).
 Truly hidden, you can’t access it from outside.
#reactjs #nextjs

United States 趋势

Loading...

Something went wrong.


Something went wrong.