TheFrontEndπŸ”₯
10.7K subscribers
275 photos
56 videos
8 files
532 links
πŸ“ Articles
πŸ—ž News
πŸ‘“ Tutorials
πŸ€” UI/UX thoughts

on front endπŸ’‘ mobileπŸ“± and web dev πŸ–₯

Admin: @masant1
Download Telegram
#thoughts

This one looks like an interesting thing to try

https://intab.io/

Not like browser devtools are much worse, but who knows until you give it a go.

So far looks like code editor with export features and nice UI already win.
πŸ”₯12😱1
This media is not supported in your browser
VIEW IN TELEGRAM
#thoughts

Alright, if you are using vscode auto close tag and bracket pair colorizer extensions, delete it now. They slow vscode down.

Go to vscode settings (command + P on Mac, type >, and type "settings") and search for "colorize" -> and enable bracket pair colorization

Then search for "linked editing" and enable that as well.

The first thing colorizes multiple } brackets that really help and the second renames the matching open/closing html tags automatically.

Super useful if you still don't use them. And much more efficient than similar extensions.

PS All this cool stuff you found being integrated in your IDE when you attempt to speed it up. Amazing πŸ”₯
❀33πŸ”₯12😱4🀩3
#thoughts

If someone ever ask you to define the word "beauty", send them this

+80 Readibility Points by default

#sarcasm
πŸ’©52❀9🀩8πŸ”₯5
#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
🀩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
πŸ”₯14❀3
#thoughts

Entry level full stack job descriptions be like πŸ€·β€β™‚οΈ
πŸ’©37😒11😱3πŸ”₯1
#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.
πŸ”₯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
❀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?
❀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
❀9
Forwarded from Fox
❀27πŸ”₯5
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
🀩26πŸ”₯6❀2
This media is not supported in your browser
VIEW IN TELEGRAM
#uiux

So something like this should no longer scare you. All doable.
πŸ”₯26❀8
Forwarded from Fox
Easily visualize regex step by step
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
πŸ”₯18
α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… α… 
😱91πŸ’©46πŸ”₯30😒19🀩15πŸŽ‰11❀7
#learn

How to make your header look nicer with 5 CSS styles / gradients (with cross-browser compatibility).

Personally, some of the options I would never use, but neat linear gradient is a decent one.

πŸ”— Link
πŸ‘“ 15 min
πŸ”₯8🀩2