14479
📝 Articles 🗞 News 👓 Tutorials 🤔 UI/UX thoughts on front end💡 mobile📱 and web dev 🖥 Admin: @masant1
#thoughts
Today I had a pleasure (not really) getting to think about how far should I go in supporting Safari.
At some point I found this which basically quoted:Safari is the baseline in terms of web standards: The sites we develop must work in Safari versions at least 2 years old.
Which somehow resulted in aiming at Safari 13.1.2 with ended support in 2020 but some users still on it.
Boy, did I suffer. I'm using Antd as UI lib at work and let me just mention 1 thing - Grid is broken everywhere on our latest version.
One thing you'd hope UI lib does really well is grid and layout, I can add border-radius to buttons myself..
How is that possible that there is a browser out there that is still so bad?
Speaking of which, I'm currently using Arc for my main browser for more than 2 months and couldn't be happier with it (if any of you folks looking for a switch)
#news
What's all the hype around ditching typescript recently?
🔗 Link
Like how is it surprising to some that with type safety you gonna spent more time with what some refer as "type gymnastics" to simplify your life in the future? 🤔
#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.
#learn
5 inconvenient truths about 👩💻.
Technically it's 4, but all valid points.
🔅9 min
🔅Link
#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 😉
#tools
Reclaim AI - amazing tool to finally sort out your planning (the fact that you are reading this after a terribly long delay proves the point 😂)
Linked my work and personal calendars, set up a few habits, voila 🪄, it automatically rearranged everything according to my priorities and available times.
What's even better is that it doesnt leak into my work calendar and also if someone invited me into a meeting it's gonna auto rearrange everything around it for me.
Also built quite nicely 🔥 the UI is really smooth.
#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
<Head>
Are you good in FrontEnd?
<Head/>
<Body>
We've created the unique coding game, launch in the browser with a 3d world and rewarding crypto.
Write code, have fun and earn TON, do interesting tasks from Junior to Senior level.
Follow this link and explore TONight world:
👉 https://cutt.ly/L7uTRu3
<Body/>
#learn
How browsers work
Classic interview question: describe what's gonna happen in details if I type URL in browser and click enter.
🔗Link
👓 13 min
#tools
New m3 is super sleek when looking at their docs.
https://m3.material.io/
Still unsure giving users so much flexibility around color control is a good idea, but we'll see 😂
#tools #thoughts
Aand yet another no-code-build-native-apps-fast-enough service, but this time somehow it feels more thoughtful than others.
https://flutterflow.io/
So ios/android + out of the box firebase support for your backend seems neat. Anyone tried it? Any feedback?
I generally smile at those, but that one kinda made me think "OK, if I need some quick prototyping or basic MVP might give it a go". Surely you still gonna need to learn it as any other tool really but that one looks like a week top.
#uiux
Ah, why not. You've waited long enough for some activity here 😂
Basically a cool UX example from https://sentry.io/, right click on the logo (long press on mobile) and Sentry gives you a way to download all their variants of logo - transparent, dark, without text you name it.
Think if every company had that a world would be a simpler place.
Also, a side note to future self: wording on a cookie banner as "like every organisation on earth" for some reason builds trust.
#news
🎄 New year open-source giveaway
Remember refine from the earlier posts? The open-source React-based framework for building CRUD apps rapidly.
They are now celebrating the new year with the open source community and giving away:
🎁 $100 Amazon Gift Card to the raffle winner,
🎁 All three winners will get refine Swag Kit.
For more details take a look at the following post:
https://dev.to/necatiozmen/new-year-open-source-giveaway-100-amazon-gift-card-full-swag-kit-2f3e
Winners will be announced on December 15 on Twitter.
#tools
Wow, this is golden 10/10 🔥
https://www.refactornow.dev/roast
Your personal AI code roasting tool. Been throwing it a few snippets from online and it comes back with pretty nasty, but also fair feedback.
It can also come with a good feedback where it ll be like "huh, well I'm impressed and surprised, good job" 😂
I guess my PR reviews will get to a new level with this 😈
Just found an alternative to megadraft.
Lexical.
A completely different approach, super flexible, but also quite complex compared to megadraft. Yet it gives you everything you need, mentions, hashtags, custom plugins, you name it. UI is also "up to you".
Now it makes me think - megadraft is 20 min plug and play solution, lexical is better long term for scalability. Gotta really analyse which one to pick (quick dev time now vs long term extension benefits).
#learn
The quickest explanation on hex vs rgb I've seen + also how you can derive one from another.
🔗Link
#thoughts
Speaking of QR codes.
Image above is a totally valid QR code. Had a bit of playing with stable diffusion over the weekend.
Might take a bit to get recognised, but that's the balance it's tricky to keep (recognisability vs making it non-obvious).
This AI stuff is hyped for a reason guys 🔥
#tools
Incredibly large selection of hooks for whatever you need.
Anything from useless useRenderCount - cuz you should use browser tooling to properly track unnecessary renders, to handy useDebounce, useFetch or usePrevious.
Last one is quite a help in function components where you dont get prev values out of the box like with some lifecycle methods in class components.
https://usehooks.com/
#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.
#community
One of our subscribers (@shuggggan) created an AI newsletter and giving away freebies that you might be interested in. All totally free and you can read it first before subscribing.
If you are into AI, give it a through look 🔥
#uiux #learn
Yet another steal reference service
Can be a handy tool whenever you face UI or UX issues and wonder how others did it.
https://chamjo.design/
#uiux
Whoever did this really outperformed themselves.
Next level cursor tracking 🔥
Try on: https://lusion.co/
#uiux
16 simple rules to improve your design.
🔗Link
🕶 17 min
#promo
🔗 Link: https://apitester.org
A completely free mobile API client that allows you to interact with APIs directly from your phone. Sounds amazing, doesn't it?
You can connect to whatever kind of API you're using with API Tester, including REST, gRPC, SOAP, and GraphQL. An optimized user interface makes it easy to construct HTTP requests with parameters, auth information, and body data. Additionally, you can use global variables, import collections, and establish WebSocket connections.
To guarantee that you have access to all of the best features, the app is updated frequently. Test it out for yourself, rate and review it on the App Store and Google Play.
#thoughts
Big mistake #11 - Using React 😂
Source (which is actually a link to a free webinar if you are bored)
#uiux #tools #learn
Alright now this is golden 10 🔥 out of 10.
A whole list of assessments on design, UI and UX, tooling and whatnot.
Just did a few and way too good
https://app.uxcel.com/skill-tests
#uiux
Long time, folks 🤚
Been pretty busy with work, but will try to get back to the channel!
Let's start with me sharing an amazing way to put yourself out in an interactive live coded web page: https://www.strml.net/
#uiux
Most useful date picker.
Imagine the frustration 😂