Are you a Designer or a Developer?👨‍💻

Here are some Google Chrome extensions that can make you better in 2021. 🔥🍀

(Thread) 🧵👇

1. https://t.co/zGir5E5U0J: https://t.co/PVx1wlX0Se is the easiest way to stay updated on the latest programming news. Get the hottest dev news from the best tech blogs on any topic you can think of.
2. CSS Peeper: CSS Peeper is a CSS viewer tailored for Designers. Get access to useful styles with our Chrome extension. Its mission is to let Designers focus on design, and spend as little time as possible digging in a code.

https://t.co/ifNAJT0LoZ
3. UX Check: UX Check makes heuristic evaluations quick and easy. The extension will open up Nielsen's Ten Heuristics in a side pane next to your website.

https://t.co/Kpkj708lwe
4. Checkbot: Checkbot finds critical SEO, speed & security problems before your website visitors do
Tests 100s of pages at once for broken links, duplicate titles, invalid HTML, insecure pages, and 50+ other checks.

https://t.co/JIHvia9f0M
5. Notion Web Clipper: Notion is your all-in-one workspace, where you can write, plan, collaborate and get organized. Take notes, keep databases, build a wiki, project manage your team — all with one tool.
https://t.co/NlojBhVjcv
6. Lighthouse: Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

https://t.co/A3qNaIPdrm
7. WhatFont: WhatFont is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary.

https://t.co/ldTpqGdfHd
8. React Developer Tools: React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

https://t.co/OzHvbNv7Ci
9. Gitpod: Gitpod streamlines developer workflows by providing ready-to-code development environments in your browser - powered by VS Code.

https://t.co/Zg0I1iwDz6
10. JetBrains Toolbox Extension: Clone and open projects from GitHub, GitLab, and Bitbucket in JetBrains IDEs right from your browser

https://t.co/5BjrGLTs5s
Thanks for taking out your time to read this.

I hope this helps someone.

More from Software

You May Also Like

A brief analysis and comparison of the CSS for Twitter's PWA vs Twitter's legacy desktop website. The difference is dramatic and I'll touch on some reasons why.

Legacy site *downloads* ~630 KB CSS per theme and writing direction.

6,769 rules
9,252 selectors
16.7k declarations
3,370 unique declarations
44 media queries
36 unique colors
50 unique background colors
46 unique font sizes
39 unique z-indices

https://t.co/qyl4Bt1i5x


PWA *incrementally generates* ~30 KB CSS that handles all themes and writing directions.

735 rules
740 selectors
757 declarations
730 unique declarations
0 media queries
11 unique colors
32 unique background colors
15 unique font sizes
7 unique z-indices

https://t.co/w7oNG5KUkJ


The legacy site's CSS is what happens when hundreds of people directly write CSS over many years. Specificity wars, redundancy, a house of cards that can't be fixed. The result is extremely inefficient and error-prone styling that punishes users and developers.

The PWA's CSS is generated on-demand by a JS framework that manages styles and outputs "atomic CSS". The framework can enforce strict constraints and perform optimisations, which is why the CSS is so much smaller and safer. Style conflicts and unbounded CSS growth are avoided.