TheFrontEndπ₯
#learn Next episode is out. While the first 2 got you prepared and focus, this one actually dives deep inside react monorepo and reverse engineer the most popular React snippet. Ever seen the below? ReactDOM.render(<App />, document.getElementById('root'));β¦
Completely forgot to post it, but the 4th episode is already there for a while if you haven't yet seen it π₯
https://dev.to/fromaline/deep-dive-into-react-codebase-ep4-how-reactdomrender-works-32n6
https://dev.to/fromaline/deep-dive-into-react-codebase-ep4-how-reactdomrender-works-32n6
DEV Community
Deep dive into React codebase [EP4: How ReactDOM.render works]
In today's episode, we take a bite-sized approach to learning how ReactDOM.render works and what it...
β€7
#thoughts
It's amazing to see such well defined and properly thought design systems and UI elements
I'd give their designer a payrise right now π₯
#sarcasm
PS oh yes ladies and gentlemen, welcome our new hashtag. Next ones on the list are #joke whenever I try to be funny and #image whenever I post a pic
It's amazing to see such well defined and properly thought design systems and UI elements
I'd give their designer a payrise right now π₯
#sarcasm
PS oh yes ladies and gentlemen, welcome our new hashtag. Next ones on the list are #joke whenever I try to be funny and #image whenever I post a pic
π€©14β€4π±2
#learn
2022. Gov.uk removes jQuery dependency π₯
Quite an interesting and addictive thread actually. Start appreciating that lots of users are on quite low end devices and can really benefit from even the smallest improvements.
https://mobile.twitter.com/TheRealNooshu/status/1509487050122276864
2022. Gov.uk removes jQuery dependency π₯
Quite an interesting and addictive thread actually. Start appreciating that lots of users are on quite low end devices and can really benefit from even the smallest improvements.
https://mobile.twitter.com/TheRealNooshu/status/1509487050122276864
π₯14β€3
#learn #uiux
Don't want to sound too bold, but just found Mantine - UI library that tries to do everything I wished other libs did. Beautiful and flexible UI components, number of useful React hooks (thinking of clicking outside of a dropdown), transition API and things like drag & drop or drop zones out of the box.
Not even mentioning customisability, default theme support, typescript and handy placeholders like 404 or 500 etc. And free / open source.
https://ui.mantine.dev/
Has anyone tried this already? Anything you didn't like about it? How's the dev experience vs antd or material?
Upd: the only thing I'm probably missing is embedded table filters in columns. But at the same time it's not a tricky one to add.
Don't want to sound too bold, but just found Mantine - UI library that tries to do everything I wished other libs did. Beautiful and flexible UI components, number of useful React hooks (thinking of clicking outside of a dropdown), transition API and things like drag & drop or drop zones out of the box.
Not even mentioning customisability, default theme support, typescript and handy placeholders like 404 or 500 etc. And free / open source.
https://ui.mantine.dev/
Has anyone tried this already? Anything you didn't like about it? How's the dev experience vs antd or material?
Upd: the only thing I'm probably missing is embedded table filters in columns. But at the same time it's not a tricky one to add.
π₯30
#learn
Everything you need to know about developing in React nicely concised in a 50 min read.
With examples, good vs bad and personal recommendations.
Won't agree with a few things in the list, but still impossible to ignore the quality of the article.
Extra π₯ for covering what happens when passing callback functions as props. Too many article either don't mention it or even do that in their examples.
https://alexkondov.com/tao-of-react/
One for your saved messages
Everything you need to know about developing in React nicely concised in a 50 min read.
With examples, good vs bad and personal recommendations.
Won't agree with a few things in the list, but still impossible to ignore the quality of the article.
Extra π₯ for covering what happens when passing callback functions as props. Too many article either don't mention it or even do that in their examples.
https://alexkondov.com/tao-of-react/
One for your saved messages
β€17π₯12
#uiux
The guy who made a business by making your keyboard look unusual
https://instagram.com/zenkeycaps
Not so much frontend related, but we all use keyboards, right?
The guy who made a business by making your keyboard look unusual
https://instagram.com/zenkeycaps
Not so much frontend related, but we all use keyboards, right?
β€15π©5π₯3π€©1
#other
Million dollar pitch decks from 18 fintech companies.
It's one of those things we all need to be good at when the development side of things is sorted π
π Link to airtable
Million dollar pitch decks from 18 fintech companies.
It's one of those things we all need to be good at when the development side of things is sorted π
π Link to airtable
β€9
This media is not supported in your browser
VIEW IN TELEGRAM
#uiux
Gooey Effect.
10/10 Goodness.
Do you know that feeling when your designer went "super creative" and came up with a "liquid" design, which when you look at you start crying as a dev? That's classic.
So turns out there is something we can do about it. It's called gooey effect. And it actually makes perfect sense when you think about it. It's essentially a combination of blurring and morphing effects together.
π Very short intro on this effect from CSS tricks
π Gooey react package
π Some cool examples from the attached video
Gooey Effect.
10/10 Goodness.
Do you know that feeling when your designer went "super creative" and came up with a "liquid" design, which when you look at you start crying as a dev? That's classic.
So turns out there is something we can do about it. It's called gooey effect. And it actually makes perfect sense when you think about it. It's essentially a combination of blurring and morphing effects together.
π Very short intro on this effect from CSS tricks
π Gooey react package
π Some cool examples from the attached video
π€©26π₯6β€2
Forwarded from Fox
Easily visualize regex step by step
regex-vis.com
TheFrontEnd πΌ
emailregex.com - visualize
ihateregex.io/ip - visualize
regex-vis.com
TheFrontEnd πΌ
emailregex.com - visualize
ihateregex.io/ip - visualize
π₯23
Forwarded from Fox
A fun and colorful explanation of how DNS works.
https://howdns.works
english - episode 1 πΌ
es - de - fr
#learn
https://howdns.works
english - episode 1 πΌ
es - de - fr
#learn
π₯18
π±91π©46π₯30π’19π€©15π11β€7
#learn
Color power
They say the cornerstone of any powerful design comes down to colors.
On this, I found a great article on the basics that also clarifies why we use red green blue (rgb) in CS, but in painting the primary colors are red, yellow and blue.
And that cannot go without hyperlinking coloors that can easily help to generate a color pallette for your next project.
And absolute gold, 10/10 goodness is always a handy free tool from canva that not so many people heard about. The best part about it is that you can learn a lot about the theory on different color combination that you can then dynamically generate based on your primary color choice. This then can be used to create graphic from your color palette or get some inspiration from existing ones.
Color power
They say the cornerstone of any powerful design comes down to colors.
On this, I found a great article on the basics that also clarifies why we use red green blue (rgb) in CS, but in painting the primary colors are red, yellow and blue.
And that cannot go without hyperlinking coloors that can easily help to generate a color pallette for your next project.
And absolute gold, 10/10 goodness is always a handy free tool from canva that not so many people heard about. The best part about it is that you can learn a lot about the theory on different color combination that you can then dynamically generate based on your primary color choice. This then can be used to create graphic from your color palette or get some inspiration from existing ones.
β€2
#promo
π±π₯ IT Network is a brand new social network for IT, where influencers can earn on content!
In the app you can:
- Get access to unique content
- Communicate with IT experts
- Receive interesting job offers
- Discuss your projects with the community
- Get help and support
Try it on Google Play and App Store
π±π₯ IT Network is a brand new social network for IT, where influencers can earn on content!
In the app you can:
- Get access to unique content
- Communicate with IT experts
- Receive interesting job offers
- Discuss your projects with the community
- Get help and support
Try it on Google Play and App Store
π©8π€©5
#learn
React Profiler - link
If you haven't used this one before you are really missing out. I find this one the quickest way to go through you web project and identify places that can be optimised. Works way better than dumping
Profiler will show you exactly how many times components re-rendered and why (which props changed etc)
Then it's up to you to go around that heavy component and optimise it, memoise certain functions, wrap with React.memo, refactor, add reselect or what not.
And personally the nicest practical "let me show you how it works" is from Ben Awad here
React Profiler - link
If you haven't used this one before you are really missing out. I find this one the quickest way to go through you web project and identify places that can be optimised. Works way better than dumping
console.log in you renders around the app or using default chrome dev tools performance analyzer.Profiler will show you exactly how many times components re-rendered and why (which props changed etc)
Then it's up to you to go around that heavy component and optimise it, memoise certain functions, wrap with React.memo, refactor, add reselect or what not.
And personally the nicest practical "let me show you how it works" is from Ben Awad here
Google
React Developer Tools - Chrome Web Store
Adds React debugging tools to the Chrome Developer Tools.
Created from revision 3cde211b0c on 10/20/2025.
Created from revision 3cde211b0c on 10/20/2025.
β€19