25 Amazing Chrome Extensions for Web Developers

//THREAD//
Validity
- helps you validate your web page
chrome.google.com/webstore/detai…

Web Developer Checklist
- helps you adhere to common best practices
chrome.google.com/webstore/detai…

Bootlint This Page
- checks any Bootstrap page/site for common errors
chrome.google.com/webstore/detai…
Check My Links
- scans and checks for broken links
chrome.google.com/webstore/detai…

Dimensions
- allows you inspect the dimension between elements on your page
chrome.google.com/webstore/detai…
SVG Grabber
- preview, download and copy the code of all SVG icons and illustrations on your page
chrome.google.com/webstore/detai…

What Runs
- detects what programming language, js frameworks, plugins, cms, CDN etc a web page is using
whatruns.com
Meta SEO Inspector
- inspects HTML meta tags, canonical attributes, no-follow links etc in a web page.
chrome.google.com/webstore/detai…

45to75
- makes sure that text remains readable across different devices
chrome.google.com/webstore/detai…
Fontface Ninja
- helps you identify any font
chrome.google.com/webstore/detai…

ZenHub
- project management extension for gitHub
chrome.google.com/webstore/detai…
Lorem Ipsum Generator
- quickly generates default text as a placeholder
chrome.google.com/webstore/detai…

Minimalist Markdown Editor
- live markdown preview as you type
chrome.google.com/webstore/detai…
User Agent Switcher
- allows you check out how your web page is rendered across different browsers
chrome.google.com/webstore/detai…

MySQL Admin
- Managing MySQL databases easy
chrome.google.com/webstore/detai…
Developer
- adds an array of useful tools that every developer needs to the browser
chrome.google.com/webstore/detai…

Perfect Pixel
- per pixel comparison between images
chrome.google.com/webstore/detai…
MagiCSS
- live CSS editor extension, with inbuild editor,
chrome.google.com/webstore/detai…

Cookie Manager
- allows you add, delete and search for cookies on your site
chrome.google.com/webstore/detai…
Color Tab
- Beautiful color scheme anytime you open a tab
colorhunt.co/tab/

Colorzilla
- features like eyedropper, color picker, pallette viewer and gradient generator
chrome.google.com/webstore/detai…
CSS Dig
- finds and groups CSS stylesheets and style blocks on most websites
chrome.google.com/webstore/detai…

WordPress Style Editor
- make direct edits to the CSS of your theme in WordPress
chrome.google.com/webstore/detai…
CSS Generator
- automatically generate all the code you need for CSS
chrome.google.com/webstore/detai…

TunnelBear
- provides VPN so you can test your across from various virtual servers around the world
tunnelbear.com
Are you a web developer?

HTML To React is an ebook guide for beginners to learn web development even if you know nothing but HTML 👇

gumroad.com/a/834147443
If you found this helpful consider following me and retweeting the first tweet 💙

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Kingsley Ubah

Kingsley Ubah Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @UbahTheBuilder

10 Jun
21 GitHub Repositories For Web Developers

//THREAD//
JavaScript Algorithm and Data Structures
github.com/trekhleb/javas…

AirBnB JavaScript guide
github.com/airbnb/javascr…

Useful Resources for Front-end devs
github.com/RitikPatni/Fro…

HTML 5 Boilerplate
github.com/h5bp/html5-boi…

Daily Interview Question
github.com/Advanced-Front…
Developer Roadmap
github.com/kamranahmedse/…

List of free learning resources
github.com/EbookFoundatio…

Front-End Checklist
github.com/thedaviddias/F…

Free-for. dev
github.com/ripienaar/free…

CSS Tips
github.com/AllThingsSmitt…

Big List of naughty strings
github.com/minimaxir/big-…
Read 7 tweets
8 Jun
15+ Fantastic React UI libraries to consider for your project

🧵
🔹 Blueprint

Blueprint is a React UI toolkit used to create and manage data-intensive user Interfaces for desktop applications

github.com/palantir/bluep…
🔹Chakra UI

Chakra UI contains a set of cool, flexible React components that work out of the box. All components are dark mode compatible.

github.com/chakra-ui/chak…
Read 18 tweets
1 Jun
10 Amazing Chrome Extensions for Web Developers

🧵
🔹 Check My Links

Check My Links is a link checker that crawls through your website and looks for broken links and is useful for websites with lots of links. You can copy all bad links with one click.

chrome.google.com/webstore/detai…
🔹Daily dev
Daily .dev is chrome extension which helps you stay up-to-date in the programming world. It’s a news aggregator just for software developers that takes its input from hundreds of news sources on programming

chrome.google.com/webstore/detai…
Read 12 tweets
30 May
4 simple strategies I use write code faster

🧵
🔹Relative Comparison

This is a strategy I use to remember syntax. I simply reason about one language/syntax in relation to another.

For eg,JavaScript uses semicolons and bracket parameters whereas Python uses no brackets, as well as indentation

By relating them, I remember.
🔹Cleansheets

I have so many cleansheets saved in my computer. Cleansheets for Git commands, CSS selector syntax, JavaScript, Flexbox and CSS grids, Bootstrap classes etc are all saved on my computer.

When I get stuck, I just refer to them easily and quickly.
Read 5 tweets
28 May
How to become a full-stack web developer in 2021

🧵
🔹Learn HTML

HTML is the markup language of the web. With it, you can make texts underlined, bold, italicized etc.

You can also create navigations, forms and many more web elements.

Learn about HTML here 👇

w3schools.com/html/
🔹Learn CSS

CSS (Cascading Style Sheets) is used to style/design HTML elements. Without CSS, the whole web page would look boring. CSS can also be used to create simple, yet eye-catching animations.

Learn more about CSS with (@traversymedia)

Read 14 tweets
27 May
What exactly is Local Storage and how is it used?

Here's all you need to know:
The local storage is a mechanism used to store information about a user like his/her

- name
- interests
- preferences

or even cookie in the client's computer.

It is a small database controlled by the web browser
- You can only store the values as strings, not array or object

- If the information you want to store in local storage is an array, object or map, you must first coerce it to a string.

- Info will remain even after the tab is closed.
Read 9 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(