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.

#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/

#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.

#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?

#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

#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.

#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

If you update telegram, you now will be able to react to posts (and not use those "reaction buttons")

#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

#thoughts

You've probably already heard of Marak - an open source dev who corrupted his widely used repo (faker.js and colors) that in return blew up tons of projects that had it as a dependency / peer dependency.

More on the story

Mark's justification TLDR: world is unfair, monetising open source is hard.

This reminds me of a situation when someone started to add ads in a terminal and got into so much problems with the community.

This is an important precedent though, showing that we probably might be relying too much on open source and current module's versioning creates a room for blowups with just minor version auto updates.

At the same time, I can understand the frustration the guy had.

What do you guys think? Share in comments.

My humble opinion here is super simple - if you are not happy with the money you get for your work, then open source is probably not the right place.

PS I also find it interesting that he had a bug in his initial "fuck it all up" attempt

#learn

Going deeper

Always interested to see people taking a deep dive and exploring tech beyond documentation.

Our comrade @fromaline wrote two great articles in a series on exploring React internals.

Episode 1 - why React was created and what was the idea behind it (also pls read if you haven't heard what reconcilers are in React)

Episode 2 - what is the most popular npm package, that lives in the React monorepo?

Super interesting reading that deserves your attention 🔥

#uiux

A simple hack, but too powerful.

Avoiding that extra click after inputting your code is what creates a "wow, nice" effect 🔥.

Worst case scenario - users will see an error if the code didn't match (but that can easily happen even with the button)

PS if your code is 12 characters long this is likely not gonna work as nice 😉

#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'));

Kudos to @fromaline and waiting for the next one 🔥

🔗 Link
👓 17 min

#learn

What if I tell you that since console.log returns undefined you actually don’t need to suffer - adding braces, enters, return etc when trying to log something within arrow function?

Have you ever tried that? Answer in comments.

#thoughts

I really don't get why React devs use chrome debugger this days. You know, the tool in chrome that allows you to set breakpoints and "pause the world" checking local scope, variables etc. Don't confuse it with styles and elements tabs. I mean the "sources" tab specifically.

In 2022, I personally find myself mostly in vscode, its mostly React development for me, so I have React & Redux chrome extensions. At any point I can jump at a specific redux action, check the global store, check all the components, what props are being passed around etc. When I'm feeling ambitious I'll use breakpoints in vscode directly, checking the lifecycles and pausing the app where investigation is needed.

And that's where things get confusing for me, why would I do that in chrome? Of course you can edit your code in chrome and apply changes, but that always felt for me like a duplication (scrolling through code in browser AND editor)

How are you guys using chrome debugger? 😉 Do you find it useful?

#uiux

Fluid UI be like.

#thoughts

If you are a fan of console.log, you must be using turbo console log.

All you need is to set it up in 1 min for the right shortcut / linter and enjoy it.

One feature I particularly enjoy is deleting all console logs with just one shortcut 🔥

https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log