#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

#thoughts

So state of JS results are out for anyone who haven't seen them:

https://2021.stateofjs.com/en-US/libraries/front-end-frameworks

If you get asked what to learn when starting or which tool/framework is better, I find it useful to point the person to this kind of results. And they can decide what they want eg learn smth new and cool, get a job, play around etc.

React is quite stable in its high scores over usage (can't say the same on satisfaction).

"Vite" looks like it can be the next big thing at this point, but we'll see.

PS also that link has mentions of what people usually read in dev space, who they follow and what podcasts listen to (which is always great to explore 😉)

PPS Their data visualisation is pretty sick 🔥

#thoughts

And just to make it easier for the lasier ones here. Those are the people to follow ☝️

How many names do you recognise?

#uiux

When customer asks to "make pricing cards a bit more interesting"

🔗 Codepen

#personal

Alright ladies and gentlemen, I'm gonna make it interactive now (finally) 😂

I've been reviewing 7+ UI libraries for React Native for work in the past few days.

Those who don't give a shit about React Native, welcome to the club 😉 and treat it as UI lib contest for mobile apps.

Judging by the poll above not giving a shit about React Native is what unites us here.

Next 3 posts will be, my 2 final contestants

And survey for you which one you'd personally prefer.

Now, you can base your choice literally on anything - simply like their components, typescript support, design system, number of releases, integration smoothness, years in the industry, country of origin etc etc.

If you feel like sharing your thoughts on why you would choose one over the other, feel free - I'm personally interested as I have my own justification for our business/project. Can also share if some find it interesting.

Maybe I actually will, especially if you choose the other one 😂

Give me a few mins to find some pics and create the posts, come back 15 mins later.

#personal

Option number 1 - Native Base

https://nativebase.io/

A great selection of components, cool hooks out of the box and utility props. Also marketplace?

☝️Check the link. Don't just base it on what I write here.

#personal

Option 2 - Kitten UI

https://akveo.github.io/react-native-ui-kitten/

Based on beautiful Eva design. Super lightweight. Does what you'd expect from UI library.

☝️Check the link. Don't just base it on what I write here.