#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/
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/
Please open Telegram to view this post
VIEW IN TELEGRAM
❤16⚡7
#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.
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.
❤13🤩3
#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
Alright now this is golden 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
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
#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.
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.
#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.
🔗 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.
🔥16❤1
#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 😂
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 😂
❤6
Please open Telegram to view this post
VIEW IN TELEGRAM
👏5⚡1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤23
This media is not supported in your browser
VIEW IN TELEGRAM
#uiux
Whoever did this really outperformed themselves.
Next level cursor tracking🔥
Try on: https://lusion.co/
Whoever did this really outperformed themselves.
Next level cursor tracking
Try on: https://lusion.co/
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥34❤8
<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/>
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/>
🤔14🔥7🤨2
#uiux #learn
Yet anothersteal reference service
Can be a handy tool whenever you face UI or UX issues and wonder how others did it.
https://chamjo.design/
Yet another
Can be a handy tool whenever you face UI or UX issues and wonder how others did it.
https://chamjo.design/
🔥15❤3🤩1
This media is not supported in your browser
VIEW IN TELEGRAM
#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
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
❤8🍾4
#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 🔥
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 🔥
Byte-Sized AI
Get up-to-date on the AI Business landscape every week in 5 minutes
🔥6❤4🎉1
#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.
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.
🔥7❤3💩2👏1
#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-noscript on mobile to quickly render QR codes. And react-qr-reader on the web.
Now, each user on the server gets a unique
The QR itself on mobile is a combination of
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.
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-noscript 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-totpThe 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.
👏9❤1🔥1
#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 😉
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 😉
❤7👏2⚡1
#tools
Incredibly large selection of hooks for whatever you need.
Anything from useless
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/
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/
❤7