TheFrontEndπŸ”₯
10.3K subscribers
275 photos
56 videos
8 files
532 links
πŸ“ Articles
πŸ—ž News
πŸ‘“ Tutorials
πŸ€” UI/UX thoughts

on front endπŸ’‘ mobileπŸ“± and web dev πŸ–₯

Admin: @masant1
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Granim.js - nice framework that can help you easily create animated gradients🌈

#js #tools
Fontisto - a huge collection of customisable icons.

#icons #tools

http://bit.do/eubez
#tools

gradejs.com β€” a webpack production bundle scanner, that works without access to the source code of a website.
❀16
This media is not supported in your browser
VIEW IN TELEGRAM
#tools

I've finally might have found a decent rich text editor for react - megadraft πŸ”₯.

Needed something a bit more modern for React that is also quite extensible (eg allows files D&D and markup). Also mimicking something like telegraph (doesn't have to be that cool, but still)

Stopped at https://github.com/globocom/megadraft that is based on you guessed it Draft.js

πŸ€“Live demo - https://megadraft.io/#/

Also do share you preferred rich text editors you've used or using right now! I've looked through too many but might have skipped something nice and obvious
#tools

https://www.windows93.net

This is fun. And they have Half Life 3.
πŸ‘10πŸ”₯2
TheFrontEndπŸ”₯
#uiux Just found Planby - a cool React component for building timelines like on the screenshot. This can be pretty powerful lifehack when implementing calendar-like functionality. I had a pleasure of implementing something similar myself and the critical…
#tools

Another one for your Swiss toolset in addition to Planby.

www.tremor.so - fairly new UI lib for dashboards, charts and graphs.

Looks pretty neat, only wish they keep it "dashboard-focused" and push into that direction.

PS as a bonus on charts you get smooth mounting animation, which some of the other chart libs don't offer out of the box.
πŸ‘3πŸ€”1
#tools

Appodeal is a self-publishing platform that helps gaming studios establish and scale their mobile app businesses.

Recently came across Appodeal’s news on its latest SDK update. Some cool stuff there including Appsflyer, Adjust and Meta Analytics being added to the SDK’s core, compliance tools being improved, distribution via the Unity Package Manager added, and more. Worth checking it out, some of the features might be what you’ve been looking for to level up your monetization.

πŸ”— Link
πŸ•Ά 7 min
❀1😒1
#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
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.
#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 πŸ˜‚
❀6
#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.
πŸ”₯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-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.
πŸ‘9❀1πŸ”₯1
#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/
❀7
#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 😈
🀩14πŸ”₯3πŸ‘2😱2❀1