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
This media is not supported in your browser
VIEW IN TELEGRAM
Tuggable Lamp πŸ’‘ (GSAP Draggable + MorphSVG)

Pretty neat.

Codepen
This media is not supported in your browser
VIEW IN TELEGRAM
How to create generative UI with random colorisation with pixi.js

Codepen
πŸŽƒ Happy Halloween everyone!

Don't know about you, but I'm absolutely in love with a tendency when apps and services update their UI for Halloween and Christmas theming.

Noticed telegram also had a few updates in the menu.
10/10 πŸ”₯
A huge selection of all possible web components.

Feels like cheating when choosing how certain components should work or look

One bit I do miss here is interactive examples, you have to click to check it. Feels like maybe integration with smth like Codepen would work (or simply gifs)

https://component.gallery/components/
πŸ”₯1
And they also have collated examples of design systems (luckily with previews)

PS yes, keeping it silent for weeks and then 2 posts right away. Classic. πŸ‘“
Tutorial on how to destroy your UX like a king.

YouTube will be removing dislikes count from the videos, making it private.

The button itself will remain.

That simply means that now when you find another React tutorial or new game trailer you ll have to actually watch it regardless how shitty it can be.

Dislikes count was a perfect community response to the quality of the video, removing it is directly affecting UX for the users, but also increasing time spent on YouTube (which is what they probably want to do)

If you have an opinion on this let me invite you to our cosy chat πŸ˜‰

😐 Link
Ever thought of vscode entirely in Web?

vscode.dev
This media is not supported in your browser
VIEW IN TELEGRAM
React & Rendering

Probably the most definitive and extented material on how rendering in React works, what rendering actually is, what happens when you use context or redux and most importantly how to improve your rendering performance for God's sake.

Enjoy the evening read πŸ”₯

πŸ”— Link
πŸ‘“ Read time: 3 days πŸ˜‚ (jk)

PS its from Mark Erikson, one of the redux mainterners, so worth your attention regardless how much you hate redux
Stripe + Firebase

So I've recently got a pro membership on fireship.io (just cuz I love that guy and his content πŸ˜‚) and decided to go through his Stripe course. Its amazing as expected, but what also surprised me is how much pain Stripe takes from the developers. Eeespecially when used in a combo with firebase.

Thus, think it's good to share something here for you guys just to kick it off, a decent series of articles that I found:

https://medium.com/@c.nwaugha/integrate-stripe-payment-with-firebase-cloud-functions-part-1-c6ca9d91f0f7

Honestly though, if you want to get paid for your pet 🐢 projects this is probably the nicest way. (or create a telegram bot and sell it πŸ˜‚ - I keep hearing stories of bot purchases for 100-300 k in usd)

Do share in comments on your experience implementing payment solutions in your work / projects!
So turns out, if you are in mobile app dev and you want to let your team test the new app and have everything set up for adhoc distribution - you know that thing where people can just install and test your app before the release in appstore & Apple's testflight just has too many limits and can't deal with prod vs staging vs dev env, you are in trouble.

Especially if you want to cover new ios 15.1. Especially if you are still generating builds on macos catalina. Not gonna work due to some black magic around macos versioning and app signing.

What you ll have to do is to upgrade macos at least to Big Sur regardless how you set up your adhoc distribution. Apple being Apple πŸ€·β€β™‚οΈ

Morale: want to release apps in Appstore? Update your damn Apple's devices.

PS 10 lines of text for the first sentence, I'm nailing it.

#personal
​​A change.

TLDR: What do we do next with @thefrontend?

Alright, boys and girls, I do realise this channel does get quite and stale at times.

Like many of you who messaged me about those quiet periods and the quality of content, I also want it to change.

It does get super busy at work lately, but it's just an excuse. I could easily share articles or whatnot, but feels like that there are so many channels out there that do it better and I just don't want to bombard you with 100500 posts a day, you can Google things at the end of the day.

This channel started initially like an alternative to "saved messages" on frontend stuff for myself, then went a bit further somehow and now I'm at a point where I need to make a decision on where it will go.

But I don't want to do it on my own. Many of you been super supportive, a great community one could only wish for. So this is the time, where I'd like to ask all of you a question (those of you who are silent readers and never comment or DM me, this is your very chance to actually contribute)

I'm thinking on bringing in the below hashtags, split content and just share what might be useful to (what I think) a lot of people.

#personal - random thoughts from my work & projects, my personal story on getting into software dev, what do I do, who the hell I am, o boi that will get personal

#thoughts - personal views on frontend and specific thibgs. Things that can get controversial (and I want them to be)

#uiux - any cool designs, interfaces that I find amazing and that create a "Wow" effect. And also the ones that create "Holy shit, that's ugly" effect so we all know what not to do :)

#quizzz - stuff that so far got the most interactions. Quizes, interview questions, challenges with explanations and results.

#learn - articles, news, updates on frontend and tech in general. Things that you can learn from and become a better dev

What I'd want to see is a bit of a better structure here and more interesting content. Which is why please do choose a category that you personally think will be the most useful and share in comments. This is important and I do read it.

I can't promise you that what you choose will end up the most used category.

What I do promise, is that you ll never see here pyramid or casino ads or any other ads that are completely irrelevant to the topic of the channel or something that I think can trick you into loosing money*. Everything else is your own choice and decision.
(protip: if something is being recommended here, you can always ask me if it's a promo and I'll always tell you if it is)

*unless telegram promotes it themselves and this is something admin can't control

Go on people, what is that you d like to see - how optimise your Web app, set up SEO, design, more biography-like stuff, news, how to learn programming, how to get a job etc.

It's your move, if I don't know this, I'll keep thinking everyone knows everything and we'll just sit here in a boat waiting for something.
This media is not supported in your browser
VIEW IN TELEGRAM
#thoughts #learn

Thank you guys for sharing thoughrs in the above post, quite a few of you asked for #learn and while I will be sharing more articles within that category, you wont miss all the cool resources I find and eager to share.

Here is another one with a free trial.

To confess I'm in love with micro animations but I always find it too time consuming. Just look at what telegram does, wish I was that committed.

You see, the problem is that I has this (by default wrong) philosophy that animation is just a nice addition and goes waay after business logic. While this might be true to an extent, there are quite a lot of examples where cool micro animation attracts new users and make the product stand out.

Is this a solution to my problem (time) or is it not? Will find out soon enough I believe πŸ˜‰

https://spiritapp.io/

PS got one more from comments https://rive.app/
This media is not supported in your browser
VIEW IN TELEGRAM
#learn

PS right away - we are not hiring (at least for now)

It's just that our comrade @SrZorro had this vision on bringing this channel to a little bit new level and making it super interactive and (imho) cool.

In short, we are thinking of wiring this channel to a website, where all posts can be categorised in a nice way with a telegram bot automatically and all of you can share something with the rest of the community be it a cool tutorial you found, superb design or a personal nicely written article. You can add an article, people vote for it and the one that gets the most votes get published in the channel.

Community driven resource that is.

Anyways, if you are a designer, bot creator, developer (Svelte) or want to learn and do it - shout out in the comments or DM me, I think with all the right people we can easily make something out of it to go a bit beyond telegram platform.

I'll be sharing a bit more info soon, but just want to get general interest first.
This media is not supported in your browser
VIEW IN TELEGRAM
#thoughts

Just got an email from namecheap that all my .io domains (6) will become more expensive after 30 Dec 2021

A quick googling confirmed it

Have we just bumped it up with our crazy love demand for .io just because it looks cool?
πŸ”₯2
This media is not supported in your browser
VIEW IN TELEGRAM
#uiux

Carousel - think twice before you add it to your project.

I'm sure you've seen it a lot and probably even added it yourself πŸ˜‰

But this just means you ll find the below interesting.

Why it's bad at homepage

Why it's almost always a bad idea

Carousel usability from NNG

If above is not enough you can always use https://shouldiuseacarousel.com/ to check if you should use it in your specific case
TheFrontEndπŸ”₯
Patterns While you think I'm dead and never gonna post again, allow me to share this https://www.getrevue.co/profile/rwieruch/issues/react-patterns-concepts-650084 An educated list of React patterns that some of which might not seem to obvious like why…
#learn

A lot of you wanted more of this and here we go.

A few years back I started invest more time into educating myself and my team on different patterns and architecture. Because this is what makes a massive difference down the line long-term.

Have recently found https://www.patterns.dev/book/ that has a free book (haven't finished it yet, but so far so good).

Quite a decent evening read before 2022 kicks in.

Hope you find it useful.

PS I'm also gonna share soon more info on our common open source project re building website altogether. Meanwhile if you are a designer and want to participate dm me and we'll add you to the group right after finalising requirements.
❀6πŸ”₯2πŸ’©1
This media is not supported in your browser
VIEW IN TELEGRAM
#thoughts

What a perfect time to be a developer.

Apple just issued unusual shares/bonuses to some of their engineers ranging from 50k to 180k USD in an attempt to retain their workforce (right after Meta or ex-Facebook grabbed 100+ engineers from Apple)

Don't think I've ever seen such an impulse in the industry for a need in devs.

https://www.bloomberg.com/news/articles/2021-12-28/apple-pays-unusual-180-000-bonuses-to-retain-engineering-talent
❀10🀩4😒3πŸ’©1
If you update telegram, you now will be able to react to posts (and not use those "reaction buttons")
πŸ”₯195😱53🀩44πŸŽ‰40πŸ’©28❀23😒7
This media is not supported in your browser
VIEW IN TELEGRAM
#learn

Did you know that every time you change an element's height the maximum rendering cycle will be necessary?

If your user has a display of 120 FPS you pretty much have a 4ms window to complete the rendering cycle (per frame), if your app fails to do that you’ll inevitably see unsmooth motion and jitter = poor user experience.

Things like that we typically start thinking about when we add complexity to our apps with a lot of changing elements in our DOM.

A great article on this
πŸ‘“ 12 min

If you can take 1 practical learning from this, I’d say try to utilise transform, opacity and filter properties as much as you can instead of e.g. height/width or position. I’ve personally caught myself relying on position properties too much whereas using transform with translate can be less obvious, but so much better for performance.

Next time you want to increase height/width try using scale and when using eg left consider translate
❀30🀩8πŸ’©1