- 307
- 8 683 389
CoderOne
United States
Registrace 24. 10. 2013
Unlock the world of web development! From beginner-friendly coding tutorials to advanced tips, join us for a journey of turning ideas into interactive digital experiences. Subscribe now for hands-on learning, project walkthroughs, and staying ahead in the dynamic realm of coding.
Let's code together and build something extraordinary!
Join the developers-friendly newsletter: islemmaboud.com/join-newsletter
Website: islemmaboud.com
Github: github.com/ipenywis
Twitter: x.com/ipenywis
Let's code together and build something extraordinary!
Join the developers-friendly newsletter: islemmaboud.com/join-newsletter
Website: islemmaboud.com
Github: github.com/ipenywis
Twitter: x.com/ipenywis
The React Compiler - Better than I Thought!
The React Compiler is here! It will take your poor performance code and turn it into a fast, performant and memoized code automatically for you. In this video, we'll explore the new compiler, what it does, how it works and how it will optimize your React code.
🎉Our Newsletter is live! Join thousands of other developers
islemmaboud.com/join-newsletter
🐦 Follow me on Twitter: ipenywis
🔴 Chapters
00:00 Intro
01:28 The Rules of React
03:08 Understanding how the compiler works
07:57 Optimizing my bad code with the compiler
11:52 Deep Dive into how the compiler works
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-cb44ct
-- Watch More Videos
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
czcams.com/video/VWEJ-GhjU4U/video.html
🧭 Turn Design into React Code | From prototype to Full website in no time
czcams.com/video/0xhu_vgKZ8k/video.html
🧭 Watch Tutorial on Designing the website on Figma
czcams.com/video/SB3rt-cQZas/video.html
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
czcams.com/video/-bll7l-BKQI/video.html
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
czcams.com/video/_rnxOD9NKAs/video.html
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
czcams.com/video/M_Oes39FNuk/video.html
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
czcams.com/video/_rnxOD9NKAs/video.html
🧭 Introduction to GraphQL with Apollo and React
czcams.com/video/eCO6MvvRhXk/video.html
🐦 Follow me on Twitter: ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone
🎉Our Newsletter is live! Join thousands of other developers
islemmaboud.com/join-newsletter
🐦 Follow me on Twitter: ipenywis
🔴 Chapters
00:00 Intro
01:28 The Rules of React
03:08 Understanding how the compiler works
07:57 Optimizing my bad code with the compiler
11:52 Deep Dive into how the compiler works
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-cb44ct
-- Watch More Videos
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
czcams.com/video/VWEJ-GhjU4U/video.html
🧭 Turn Design into React Code | From prototype to Full website in no time
czcams.com/video/0xhu_vgKZ8k/video.html
🧭 Watch Tutorial on Designing the website on Figma
czcams.com/video/SB3rt-cQZas/video.html
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
czcams.com/video/-bll7l-BKQI/video.html
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
czcams.com/video/_rnxOD9NKAs/video.html
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
czcams.com/video/M_Oes39FNuk/video.html
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
czcams.com/video/_rnxOD9NKAs/video.html
🧭 Introduction to GraphQL with Apollo and React
czcams.com/video/eCO6MvvRhXk/video.html
🐦 Follow me on Twitter: ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone
zhlédnutí: 1 705
Video
Refactoring Junior React Code to Clean Code - SOLID
zhlédnutí 6KPřed 16 hodinami
Explain how to properly refactor your legacy Junior React code to follow clean-code SOLID principles. We'll go through an old Button component I wrote back in 2020 that was very ugly and bad. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter ⭐ Timestamps ⭐ 00:00 Intro 01:39 Understanding our old code 05:17 Refactoring code 06:37 Refactoring component lo...
Tailwind CSS Plugins I Wish I knew Sooner
zhlédnutí 3,5KPřed 14 dny
You're probably missing out on a lot if you are not using these Tailwind CSS plugins. Tailwind CSS Signals, Mixins, UI Components, Members and more 💻 Tailwind Plugins Repo github.com/ipenywis/awesome-tailwind-plugins ⭐ Timestamps ⭐ 00:00 Intro 00:52 Daisy UI 03:30 Signals 09:15 Mixins 12:20 Members 🔗 Links daisyui.com/ github.com/brandonmcconnell/tailwindcss-signals github.com/brandonmcconnell/...
Everything You Need to Know About React 19
zhlédnutí 10KPřed 21 dnem
React 19 is finally here! Bringing new features and APIs to the frontend world and for all React lovers. Learn about every new React 19 feature and API in one video in 20 minutes. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter 🐦 Follow me on Twitter: ipenywis 🔴 Chapters 00:00 Intro 00:30 useTransition hook 03:18 useStateAction hook 06:14 ...
The Truth About The New Javascript Proposal
zhlédnutí 2,8KPřed 28 dny
The New TC39 Proposal for Standardizing Signals Into Javascript & ECMAScript could change javascript forever and how we build user interfaces forever as we know it. But did you know that Signals were introduced nearly 15 years ago, in 2010. The Framework is called Knockout js. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter 🐦 Follow me on Twitter: twi...
This is going to change React Forever
zhlédnutí 3,7KPřed měsícem
Javascript Signals are finally available on React. The new useSignal hook is a killer hook that allows you to use the new Javascript Signals Proposal to build efficient apps that only re-render when needed and not on every state update. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter 🐦 Follow me on Twitter: ipenywis ✨ Timestamps ✨ 00:00 In...
I Wish I knew about This Authentication Tool Earlier
zhlédnutí 3KPřed měsícem
Authentication is hard! Here's how to make it easy with Authkit. Adding Email/Password, OAuth, SSO, Rest password, Magic links and a lot more all with one tool that takes care of all the headaches and you only need to focus on your App. Start with Authkit here www.authkit.com/ dashboard.workos.com/signup?utm=coderone 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/jo...
This New React 19 Hook Will Blow Your Mind
zhlédnutí 7KPřed měsícem
Introducing React 19's useOptimistic hook! Render instant UI updates while waiting for async operations. Say goodbye to loading spinners and hello to seamless user experiences. Try it now and see the difference! 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter 🐦 Follow me on Twitter: ipenywis Special Links ✨ Join Figma for Free and start de...
Why I Switched From Figma Dev Mode to This Tool
zhlédnutí 2,1KPřed měsícem
Figma has recently introduced its latest feature called "Dev Mode," aimed at aiding developers in transitioning seamlessly from design to code. However, despite its promising functionality, it lacks some essential features and comes with a relatively high price tag. In my opinion, I've discovered a suitable alternative to streamline your design-to-code workflow: Zeplin. ✨ Get Started with Zepli...
I Got Access to Google's New AI Code Editor | Project IDX
zhlédnutí 10KPřed 2 měsíci
I Got Access to Google's New AI Code Editor! Which is called Project IDX!. Let's explore the new editor and see what Google is cooking for developers. Will this replace or kill VSCode? 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter Checkout Project IDX and Join the Waitlist: idx.dev/ Special Links ✨ Join Figma for Free and start designing now! psxid....
I Just Discovered The Most Underrated UI Library for React
zhlédnutí 22KPřed 2 měsíci
Choosing the right UI library for your next project can help you move faster in many aspects. Mantine UI is one of the great UI libraries that can do that and a lot more! 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter Checkout Mantine: mantine.dev/ Special Links ✨ Join Figma for Free and start designing now! psxid.figma.com/69wr7zzb1mxm 👉 ✨ Join Figm...
I Got a New Job at an AI Startup!
zhlédnutí 1,5KPřed 2 měsíci
To Join the Discord Server and be among the 10 first people to get exclusive access to the Perigon API. Here are the steps: 1. Join the Perigon Discord Server: discord.gg/perigon. 2. Introduce yourself or say Hi in the #introduce-yourself channel. 3. For the first 10 people, I'll send you an exclusive access link. Check Perigon website: www.goperigon.com/ 🎉Our Newsletter is live! Join thousands...
The Magical React Hook That Makes your Components Smaller
zhlédnutí 5KPřed 3 měsíci
useReducer is one of the most underrated React hooks, instead of writing 3 lines of useState, you can replace it with a single line of code. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter 🐦 Follow me on Twitter: ipenywis Special Links ✨ Join Figma for Free and start designing now! psxid.figma.com/69wr7zzb1mxm 👉 ✨ Join Figma For Profession...
Javascript Gets a New Runtime Every Month Now!
zhlédnutí 2KPřed 3 měsíci
If you are a javascript developer, you would know the pain of having to deal with new libraries or frameworks on almost daily basis, but now, it looks like we are in a new era where a whole Javascript Runtime is invented almost every month. Let me introduce you to the LLRT Javascript Runtime by Amazon & AWS. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsle...
I Wish I knew This About Typescript & React Sooner
zhlédnutí 37KPřed 3 měsíci
If you are using React with Typescript, this video will help find the hidden React Typescript utility types that will help right better and cleaner code. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter 🐦 Follow me on Twitter: ipenywis ⭐ Timestamps ⭐ 00:00 Intro 00:19 (01) Component Props 03:14 (02) Generic Components 08:31 (03) Type Narrow...
Build a REST API AI SaaS That Generates Magical Images
zhlédnutí 4,8KPřed 3 měsíci
Build a REST API AI SaaS That Generates Magical Images
Git Mistakes Every Junior Developer should Avoid | clean-code
zhlédnutí 3,3KPřed 3 měsíci
Git Mistakes Every Junior Developer should Avoid | clean-code
Google Will Soon Kill Ad Blockers with Manifest V3 - What’s Next?
zhlédnutí 2,9KPřed 4 měsíci
Google Will Soon Kill Ad Blockers with Manifest V3 - What’s Next?
I Wish I knew These UI Design Aspects Sooner
zhlédnutí 3,6KPřed 4 měsíci
I Wish I knew These UI Design Aspects Sooner
I Can't Believe I Didn't Know these Typescript Hacks
zhlédnutí 11KPřed 4 měsíci
I Can't Believe I Didn't Know these Typescript Hacks
I Wish I knew this CSS Design Trend Sooner
zhlédnutí 2,6KPřed 5 měsíci
I Wish I knew this CSS Design Trend Sooner
Prettier/ESLint to Biome: The Lightning-Fast Rust-Based Tool!
zhlédnutí 15KPřed 5 měsíci
Prettier/ESLint to Biome: The Lightning-Fast Rust-Based Tool!
React Clean Code: Advanced Examples of SOLID Principles
zhlédnutí 21KPřed 5 měsíci
React Clean Code: Advanced Examples of SOLID Principles
The React Interview Questions You need to Know
zhlédnutí 17KPřed 6 měsíci
The React Interview Questions You need to Know
HTMX - What they don't want you to know!
zhlédnutí 77KPřed 6 měsíci
HTMX - What they don't want you to know!
Build React Apps Visually - The Future of React
zhlédnutí 6KPřed 6 měsíci
Build React Apps Visually - The Future of React
Everyone is Complaining about Next.js 14!
zhlédnutí 7KPřed 6 měsíci
Everyone is Complaining about Next.js 14!
The Right Way to Animate SVG in React
zhlédnutí 16KPřed 6 měsíci
The Right Way to Animate SVG in React
Thanks for sharing this infos
good news
Thank you
Thanks for your elaborate explanation of the React compiler.
Can share link code for me ?
8:23 That's not a Context problem, and React Context doesn't have any "bad implementation" problem. That's just bad coding from your example, if you update a state there the re-rendering is inevitable, that's just bad usage of the context API. The new compiler seems to be great for automatic optimizing but the problem I'm seeing is that people will start to write bad code and expect the compiler to save them.
why every time react team inspire from svelte team ideas !!
Can we have your vscode theme
Thanks 🤍
Thanks
Whats the effect of this on memory
As everything in the computer field, it depends 😂😂
Thanks man
thank you, keep posting videos like this
Thak You
great video
Thanks , keep posting content like this
Thank You
Thank you
Just perfect vanilla javascript and use whatever library or framework your company demands. Done.
Based 😂
Diiita and chaaaald are not english words
hi bro please expalin the tanstack/reactQuery and how to use and benfits
too bad its its not the selfhosted version, nice tutorial though
I'm super new to TypeScript, but I use all the tips you just mentioned. Does that make me a senior developer?
I was very tempted to give this video a thumbs down until about 7:00 when you mention the IDX commands in the command palette. I don't like your mumbling voice. Please annunciate more clearly. And I don't like your stream of consciousness style of talking. Please take some time to put your verbiage into clearly delineated sections. Use space. Google made a Project IDX video six months prior to yours & it's far superior. But! You had content about the IDX commands in the command palette (ie you showed how comments can be automated), & for that you reluctantly get a thumbs up.
Why do you suggest changing the style component to tailwind? What is better about it? You are only changing the tool to one you know yourself. If the project is large and doesn't use tailwind but own styled components what then?
wise up chrome is outdated crap our office stopped using chrome for good over a year ago for the better.
سطايفي 😳☺️
Never trust someone who shortens department to demp.
Meh, Copilot seems better IMO
these doesn't necesarily have to be junior mistakes. If you are a generalist, I code in any language that's needed, this might be just due to not having all the language knowledge.
What if an AD Blocker created several processes, and each process runs the 30,000 to 50,000 rules maximum?
🎉
the most important part and you hide it by the camera then process to do nothing
There is a free community edition in their github but I don't it's limitations
Great, the only thing I would change is either remove the icon property and let the dev put the icon in the position they want via children, or make the icon property a type with icon and slot: "start | end" for positioning, I feel like passing an icon prop and having to position the children passing a class is not very clean.
Great explanation. Thanks
Thank you , keep posting content like this
Glad this kind of videos is helping ^^
Even I haven't written this kinda react code lol. But props for putting this out there and making an example without shame. 🫡
Thank you
Great approach
Guys, you can throw me links to the git for these projects, or to those where you can apply new products (such as the react 18 feature in question at 7:20 or 7:50), I was given the task at the university to compare react 17 and react 18 with examples.I will be very grateful for your help.Now there is simply not enough time to study, the lights are constantly turned off due to shelling.
Which extension are you using for indentation coloring
the name is rainbow
Islam why you don't speak Arabic at least one video please
It would be a little hard for me to explain technical terms in arabic. Hopefully in the future
@@CoderOne i meant any subject not specifically your content.and thanks a lot
这是什么主题
I have a question , how can I use no moon for error scenarios. Which section do I do the modification
4 minutes and still nothing said bla bla bla bla
Something wrong with video keeps crashing
i'am glad you give this valuable informations
Thank You, keep posting videos like this, with more tutorials