Tweet

Victor

11 May, 17 tweets, 13 min read

A curated list of 34 useful Chrome plugins for everyone who makes sites

👇

@Wappalyzer

🔸@Wappalyzer - identify technologies on websites.

chrome.google.com/webstore/detai…

🔸@usemuzli - the freshest links about design and interactive, from around the web.

chrome.google.com/webstore/detai…

@chengyinliu

Identifying fonts

🔸WhatFont by @chengyinliu - find out what font is used on any site

chrome.google.com/webstore/detai…

🔸@FontsNinja - identify fonts from any website, bookmark, try, and buy them.

chrome.google.com/webstore/detai…

Page rulers

🔸Page Ruler Redux - a ruler to get pixel dimensions and positioning to measure elements on any web page.

chrome.google.com/webstore/detai…

🔸Dimensions - a tool for designers to measure screen dimensions

chrome.google.com/webstore/detai…

@colorzilla

Color Pickers

🔸@colorzilla - get any color from any page

chrome.google.com/webstore/detai…

🔸Eye Dropper - an open-source extension that allows you to pick colors from web pages, color picker and your personal color history

chrome.google.com/webstore/detai…

Image Downloaders

🔸Image Downloader - advanced plugin for browsing and downloading images on the web

chrome.google.com/webstore/detai…

🔸I'm a Gentleman - easily save images with a click, gestures or the extension button.

chrome.google.com/webstore/detai…

@nimbuswebinc

Screenshot capturing

🔸Nimbus Screenshot & Screen Video Recorder by @nimbuswebinc

chrome.google.com/webstore/detai…

🔸Lightshot (@Light_shot)

chrome.google.com/webstore/detai…

🔸Chrome Capture

chrome.google.com/webstore/detai…

@awe_screenshot

🔸Awesome Screenshot (@awe_screenshot) - full page screen capture and screen recorder 2 in 1.

chrome.google.com/webstore/detai…

🔸GoFullPage - full page screen capture

chrome.google.com/webstore/detai…

@Funkifyplugin

Accessibility

🔸Funkify - disability simulator (@Funkifyplugin)

chrome.google.com/webstore/detai…

🔸Spectrum - instantly test your web page with different types of color vision deficiency.

chrome.google.com/webstore/detai…

Productivity

🔸OneTab - save up to 95% memory and reduce tab clutter

chrome.google.com/webstore/detai…

🔸Session Buddy - manage browser tabs and bookmarks with ease

chrome.google.com/webstore/detai…

@Ghostery

🔸Clear Cache - clear your cache and browsing data with a single click of a button.

chrome.google.com/webstore/detai…

🔸Ghostery (@Ghostery) - is a powerful privacy extension. Block ads, stop trackers and speed up websites.

chrome.google.com/webstore/detai…

@photomaniafx

Misc

🔸Photomania (@photomaniafx) - turn any photo into visual art

chrome.google.com/webstore/detai…

🔸Web Paint - draw shapes, lines, and add text to live web pages and take screenshots

chrome.google.com/webstore/detai…

🔸Stylebot - change the appearance of the web instantly

chrome.google.com/webstore/detai…

🔸Window Resizer - resize the browser window to emulate various screen resolutions.

chrome.google.com/webstore/detai…

@darkreaderapp

🔸Dark Reader (@darkreaderapp) - dark mode for every website.

chrome.google.com/webstore/detai…

🔸CSS Peeper (@CSSPeeper) - extract CSS and build beautiful styleguides.

chrome.google.com/webstore/detai…

@evernote

🔸Json viewer - the most beautiful and customizable JSON/JSONP highlighter.

chrome.google.com/webstore/detai…

🔸Web Clipper from @evernote - use the Evernote extension to save things you see on the web into your Evernote account.

chrome.google.com/webstore/detai…

@Grammarly

🔸@Grammarly. You already have it. No need to explain what it is 😌

chrome.google.com/webstore/detai…

🔸@loom - video messaging for work.

chrome.google.com/webstore/detai…

🔸@webmakerApp - blazing fast & offline playground for your web experiments

chrome.google.com/webstore/detai…

@getcheckbot

🔸Checkbot (@getcheckbot) - SEO, Web Speed & Security Tester

chrome.google.com/webstore/detai…

🔸Web developer - adds a toolbar button with various web developer tools.

chrome.google.com/webstore/detai…

• • •

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

This Thread may be Removed Anytime!

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

More from @vponamariov

Victor

@vponamariov

10 May

I have a puzzle for you. A famous one.

But if you didn't know the answer, try to solve it.

🧵

You are on a game show, being asked to choose between three doors.

Behind each door, there is either a car or a goat. You choose a door.

The host picks one of the other doors, which he knows has a goat behind it and opens it, showing you the goat.

You know, by the rules of the game, that the host will always reveal a goat.

Read 4 tweets

Victor

@vponamariov

10 May

Form validation is cool.

But have you tried to help users fill the form without errors?

🧵Here are a few tips on how you can do that

1. Reduce the number of inputs.

The less the user has to input, the less probability they'll make an error.

2. Auto-fill the data you can auto-fill

- Try to guess the user location, language, country etc.
- Put the current date/time if it's reasonable
- Save what the user has previously inputted

Read 7 tweets

Victor

@vponamariov

7 May

Collection of advanced UI/UX articles for reading on the weekend 🤓

Don't forget to bookmark👇

@NNgroup

🔸What is zero UI? careerfoundry.com/en/blog/ui-des…

🔸Compensatory vs Noncompensatory: 2 Decision-Making Strategies
nngroup.com/articles/compe… from @NNgroup

🔸A Guide To Optimizing Images For Mobile smashingmagazine.com/2019/10/imagek… from @smashingmag

@Prototypr

🔸Best practice for date-of-birth form fields blog.prototypr.io/best-practice-… from @Prototypr

🔸Building Your Color Palette refactoringui.com/previews/build… from @steveschoger

🔸 Modal & Nonmodal Dialogs: When (& When Not) to Use Them nngroup.com/articles/modal… from @NNgroup

Read 5 tweets

Victor

@vponamariov

6 May

My personal list of top accessibility resources 👇

@webaim

1. w3.org/WAI/standards-… - WCAG standards

2. webaim.org from @webaim - one of the leading providers of web accessibility expertise internationally

3. myaccessible.website - A very nice site explaining a11y in human language by @myaccessibleweb

@nngroup

4. nngroup.com/topic/accessib… - some articles from @nngroup

5. webaccess.berkeley.edu/resources - tons of resources by @UCBerkeley

6. a11yproject.com - the name speaks for itself. Follow them here @A11YProject

Read 6 tweets

Victor

@vponamariov

6 May

I bet you don't know how powerful the <img> tag is.

Let's find out 👇

Here is the most simple case of using it.

If the path is correct, the browser will display a picture of the mobile phone.

So far so good.

Now, we forgot to specify the alt tag for better accessibility.

There are two important rules:

1. You should always specify it

2. If the picture serves decorative purpose, you should put an empty alt, so that screen readers don't read it.

Read 11 tweets

Victor

@vponamariov

5 May

I want to share with you something private.

I remember when I was ~13-15 I was learning HTML/CSS/PHP.

My parents thought that this is childish, it has nothing to do with "real coding".

They told me that real coders use deep math and binary code.

So I was demotivated a bit. But now this is what I do for my living.

Then I started building sites, and I was learning SEO.

My father told me: "How is going to visit your site about learning English?".

I ended up with 4000 uniques/day and significantly improved my English

Then, I remember I wanted to go to English courses and pass FCE/CAE certificates.

When I found a cool English school in Moscow, my father told me: "what a suspicious company! Who needs the certificates? Who told you they are accepted worldwide?"

Now I write tweets in English

Read 5 tweets

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!