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
#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
#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.
❀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
πŸ’©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 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
❀19
#tools

gradejs.com β€” a webpack production bundle scanner, that works without access to the source code of a website.
❀16
This media is not supported in your browser
VIEW IN TELEGRAM
#uiux

Now that's some proper magic to hack CSS animation πŸ”₯

www.timelinecss.io
❀17πŸ”₯7😱3
#promo
People who believed in the
internet in the 90s are on top now. Web3 is the same opportunity.


HUMANS is a brand new media devoted entirely to demystifying working in web3. To do so, we invite web3 heroes to tell their stories and inspire you all to try your hand at pursuing numerous lucrative vocations.

Join our channel to get:

- Industry insights from successfully employed web3 folks
- Sneak peeks to web3 working environment
- Proper market news
- MEMES.

Soon there’ll also be hot job openings from top web3 companies. Don’t miss out on a life-changing opportunity.

tap it
@humanswork
πŸ’©32
#news

Atom code editor is done 🀷

I used to actually like it before I've tried vscode.

But now that github belongs to Microsoft it does make sense to focus on vscode instead.

πŸ”— Link
😒15❀6πŸ”₯3😱1
Forwarded from Fox
Learning to code shouldn't be hard. A comprehensive set of web development tutorials to help beginners into professionals

internetingishard.com

1. introduction
2. basic web pages πŸ–Ό
πŸ”₯13🀩1
This media is not supported in your browser
VIEW IN TELEGRAM
#uiux #thoughts

I find it entertaining how Apple is trying to push a thought that Safari is modern and all with its latest "oh, look at mac OS Ventura and Safari 16! How cool. It can support Web Push notificationsπŸ”₯"

Even better - Web Push on iOS and iPadOS in 2023!

Meanwhile Chrome supported push notifications at least from 2015.

All of this aligns quite well with what a dev for web telegram pointed out in 10+ things while Apple is slowing the industry with its Safari.

Side note: the webK/webZ telegram client is actually sleek. I use it myself.

Side note 2: if you just want to read a bit more on Web Push notifications, explained and compared to app ones this link is for you.
πŸ‘1
TheFrontEndπŸ”₯
#uiux #thoughts I find it entertaining how Apple is trying to push a thought that Safari is modern and all with its latest "oh, look at mac OS Ventura and Safari 16! How cool. It can support Web Push notificationsπŸ”₯" Even better - Web Push on iOS and iPadOS…
#news #thoughts

Just look at this.

I mean we got rid of IE (in fact, it's gonna die in about 20 hours from you reading this).

And Safari is either gonna end up in the same boat eventually or Apple gets pushed by regulators and finally support the industry.
😱9πŸ’©5