DEV Community: Hamed

hate CSS? use this extension instead

Hamed — Mon, 21 Feb 2022 08:01:57 +0000

let's be honest, many developers just hate working with CSS because:

you have to try a lot of CSS properties values just to get something just right (aka make it pixel perfect)
it's extremely repetitive!!

how many times we just write the exact same thing?

display: flex, justify-content: center...

most CSS priorities just keep repeating over and over again to create any UI

soo... I made a browser extension to visually change any website's CSS instead!

🎨 35+ CSS properties
👌 customizable CSS selector
✍ integrated code editor
⚡ super lightweight - 500KB

📱 ∞ virtual devices + realtime sync
🔎 clean CSS inspector on hover
🕶 breakpoints visualizer
🌲 HTML layers tree
☢ x-ray mode

why not devtools?

modifying CSS is slow and exporting changes is a pain
refresh the page & all the CSS changes are gone!
hard to inspect CSS with lots of crossed-over properties
constantly resizing devtools or using one device at a time to test responsiveness

so to fix all of those issues I made InTab.

👉🏻 give it a shot at intab.io
🎉 just launched this also on ProductHunt

please show some 💗

Cheers!

I made a template that scores 100 in every speed test ⚡

Hamed — Wed, 16 Feb 2022 20:54:32 +0000

🔗 template link

--
scoring 100 in Lighthouse and in other performance tests is hard, yet it is every front-end developer's dream, however, most of us don't achieve that because it simply takes a lot of work!

as a developer myself, having to build many websites, I have spent a lot of time polishing my build process to finally reach a point where I have the perfect high-performance boilerplate I have always been looking to find, and TurboKit was born!

why not use a template off Github?
You might have searched for a starter template on Github and found incomplete projects without any documentation or they are extremely hard to customize and most of them are outdated and do not use modern optimizations such as generating new image formats like AVIF or WEPP

why TurboKit?
I built this static website template to achieve a perfect performance score in every speed test with zero exceptions.

This script is based on Vite and Gulp to do everything and anything you think of as part of a build process, I'm talking optimizing:

Images (AVIF, WEBP...)
JS
CSS
HTML
Fonts
Cache
JSON

and more stuff including:

generating a PWA
internationalization support (i18n)
dev server with HMR
preconfigured prettier
sitemap generation

and much, much more

so, what is your website's Lighthouse score? Share it down below!

I have curated 84+ high quality tools to use in 2022

Hamed — Tue, 18 Jan 2022 08:37:48 +0000

developers tools fatigue is a real struggle! 😪

when starting any new project or building a new website/app or SaaS you have to go through a long list of GitHub stared libraries or a huge browser bookmark just to find out that you don't really know what you have to type in search or find what you are looking for.

Tools overload
most lists out there just put everything under the sun from tools and services just to bombard developers with even more tools.

instead of solving the issue of searching fatigue they make it worse. I don't need a 2000+ list of tools I just need 6 tools suggestions max for each use case whether that to build a specific feature or part of a website.

Not another generic list
this is not another unopinionated list of tools.
this list gives recommendations based on real experience using the suggested tools so you will find small notes for each tool like "expensive" | "bad docs" and other observations from my own experience to help you make a better decision faster when choosing any tools off the list.

Why this list?
💎 only handpicked quality tools
📦 10+ categories
🔍 searchable & filterable
♻ frequently updated

there's even a white noise audio player that you can use to relax while picking your favorite tool ;)

😻 just launched DevBox on Producthunt
🔗 and here is the list direct link

hope you find this useful!