#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

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

#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

#learn

A pretty good frontend developer roadmap from one of our subscribers (@s3ntlnel).

If you don't know where to start your journey, the below is good place to start with.

https://www.flaco.dev/blog/front-end-developer-roadmap

#learn

The guy behind Tao of React released an article about going through React's source code.

An interesting read worth your 23 mins. Also as an extension to what you've seen in other articles shared here.

https://alexkondov.com/readint-source-code-react/

#learn #uiux

Typogrpahy

In fact, the previous UX example was from www.learnui.design where they have cool interactive tutorial on typography.

Here is a link if you want to play with it. Takes about 5-10 minutes.

Link: https://www.learnui.design/tools/typography-tutorial.html#

Don't know about you, but typography was always quite a tricky part for me. Like it always felt super "intuitive" eg Roboto/Lato is good, Comic Sans - is a joke, secondary text should just have 80% opacity instead of playing with weight etc.

But properly defining science behind it wasn't always easy. Some things are straightforward and you can get decent typography system into your app by just playing with opacity, line height and some fonts to build proper hierarchy.

Either way, if you ever felt like me that quick tutorial is a great way to kickstart your typography mastery.

#learn

Tech debt

Something we all sooner or later have to deal with.

In my experience it usually came down to either "rushing" features and deviating business model from what it was initially designed to do or complexities in "billing refactors" - some clients are difficult in understanding what's the point.

Here I'm treating "rushing" inclusive of not doing anything, packages and tools getting outdated, deprecated etc based on the logic that if you were not rushing other things, you could properly address the refactors.

Whereas the last point is fairly easy to resolve, just requires time and right arguments, the first one can bite in the future if left untouched.

And personally I think its more about building the right mentality in a team. The concept thats highlighted in "Clean Code" by Robert C. Martin - if every developer when touching the part of the system leaves it in just slightly better shape than it was, we ll end up in constantly improving, almost self-refactoring system.

Extending a feature? Maybe there is a way to improve type safety in the same file, maybe naming variable can be better, maybe function could have been splitted more logically, maybe you can rewrite something in a more concise syntax? - simple things like that, makes a difference in long term.

Interesting article on that:
🔗 Link
🕶️ 8 min

#learn

Props drilling problem visualised.

🔗 Link

#learn

This is literally the best way to utilise Web technologies for articles or courses. Never saw someone using this type of animation & styling instead of just making rendering bold.

As a bonus it actually talks about how and why React renders, so definitely worth a read.

https://ui.dev/why-react-renders

​​#learn #tools

I've recently had a proper deep dive into all QR code related stuff.

We needed to get a "check in" system on site with really poor Internet connection. People would come and scan their QR codes from the mobile app using tablet with a simple Web app.

Turns out it's not that difficult once you get a grasp of it.

I've used react-native-qr-svg on mobile to quickly render QR codes. And react-qr-reader on the web.

Now, each user on the server gets a unique id (duh) and also what's called hmac.

The QR itself on mobile is a combination of userId-hmac-totp

The first 2 are used to check if the user is the one they claim to be (aka you can hack userId, but you won't find out their hmac unless you know the secret key), this prevents random people generating QR codes and checking in on site for their friends.

The last totp part really is just One Time Password mechanism using OTPAuth. It refreshes every 10 seconds and rerenders the QR code, similar how you'd expect authenticator apps to work, except contained within QR.

This prevents users to screenshot and share their QR codes with friends for them to check in for you.

And that's it really. You get your fairly secured QR rendering and scanning mechanism, can now use it almost anywhere: office, sites, restaurants, parking, gyms, you name it.

#learn

And to quickly add on the latest post, can't remember if I shared this one before - this is the best, 10/10 🔥 explanation how QR codes actually work.

🔗 Twitter link that's worth your time

Like did you know if you cover or break certain parts of the QR it will still work just fine?

PS that's because the information is stored in repeated patterns, find out more in the link 😉

#personal #uiux #learn

All of the above are also valid QR codes. Some people asked me to share more on that - there you go then 😂

First of all this images are from qrbtf - a service that attempts to automate this whole process. You can jump in and try to generate yours quickly with some prompts. The only thing it won't let you change url the QR points to as the whole system is still WIP.

But all they do under the hood is use stable diffusion with specific controlNet that integrates your QR into generated image. I really recommend trying it yourself though as the process is quite fun and you learn along the way. And I'll share all the links you need to get started.

There is one specific guy that deserves all kudos in the world that wrote the whole 101 on it. Not gonna reinvent the wheel here - so https://antfu.me/posts/ai-qrcode-101

I managed to even get it running on my lower M1 mac, so you should be able too.

The quickest way to get started

- install stable diffusion web ui
- get the controlnet extension
- now get controlnet qr pattern

And you are pretty much set. Then just follow tutorial from antfu.me and get your qr codes flowing in.

I personally also found useful to get revanimated - the quality it can generate even with simplest prompts is phenomenal.

The best sampling methods that I liked were DPM++ 2M Karras and DDIM.

Now to the most interesting part 🔥

It's all gonna come down to "oh, I cant scan the code 😭" vs "well fuck, it's obvious its a QR code 🫣". And you ll have to play with the control net settings.

Also one thing I didn't know is that not all QR scanners are the same, with this QR codes some might not be good enough. As a rule of thumb, try different ones - eg wechat scanner or iphone (there are 2, in camera and dedicated one).

And because you read this channel you'd already know that the most important things for any scanner is the finder patterns (those 3 large squares) - they tell the scanner it's actually a QR code so scan it pls.

Then smaller square is alignment pattern - becomes super important if you rotate you embedded QR code. Get this 2 points right and you ll increase the scannability.

Finally error correction is important, make sure it's not the lowest (aka you need to have more elements in the QR itself) cuz some of those can get missed when generating the image.

You can also completely change the way you input QR code looks, circles vs squares, dots vs lines etc. By playing with those you get more natural integration into objects in the images.

Like the one I had for this channel doesnt have obvious square finder patterns but you can still spot the elements in the table drawers that are pretty much those patterns. It reduced scannability for some scanners as a side effect but still made me happy and was good for POC.

That should be just about the largest post this year ever 😀 and just about enough info for you to try it yourself if you also find it amazing like I do.