Tag: colorzilla

Top 21 Chrome Extension every software engineer must know

by vikashdev kGeneralLeave a Comment on Top 21 Chrome Extension every software engineer must know

1. Speedtest by Ookla:

Take a Speedtest directly from your toolbar to quickly test your internet performance without interruption.

2. Save to Google Drive:

This extension allows you to save web content directly to Google Drive through a browser action or context menu. You can save documents, images, and HTML5 audio and video all by right-clicking and selecting ‘Save to Google Drive’. You can save the currently viewed page using the ‘Save to Google Drive’ browser action. You can automatically convert Microsoft Office files or comma-separated files to Google Docs format.

3. Keeper® Password Manager & Digital Vault:

Protect and autofill passwords with the world’s most trusted and #1 downloaded secure password manager and digital vault.
Stay protected with the world’s most trusted and #1 downloaded password keeper and digital vault. Keeper’s password manager generates, stores, and auto-fills strong passwords on all of your devices while also securely storing and protecting your private documents. Don’t get hacked. Get Keeper.

4. Vimeo Record – Screen & Webcam Recorder :


Screen recording is often the easiest way to demonstrate something — a design, a functionality, or a new tool — and now, Vimeo makes it straightforward. You can use the Vimeo Record tool to easily record your screen and share that recording with others.

5. Scrn.li – Screenshot Tool and Editor:

The app to make a full webpage screenshot or just any part of it with an opportunity to edit, save and download screen capture to your PC. The app is launched from a browser that totally saves your time. Simply click the extension icon to choose from options whole page screenshot or a selected part. Lots of features at your disposal allow you to – edit and reset changes;………….

6. Full Screen:

This is just a full-screen button added to the toolbar. It does exactly the same as the keyboard shortcuts (F11 on Windows or Cmd+Shift+F on Mac). You can change the icon and add/remove the full-screen function to the context menu.

7. Site Palette – Palette Generator Extension:

This Chrome browser extension generates comprehensive palettes. Site Palette is one of the must-have Chrome extensions for developers (frontend) as well as expert designers. This plugin can aid you in rapidly extracting and creating color pallets. As a developer, you can easily download preview PDFs, palette images and create shareable links. It is armed with flawless integration with Google Art Palette and coolers. co. Site Palette has been considered as one of the essential Chrome browser extensions for designers and developers across the globe.

8. Font Face Ninja – Font Identifier Extension:

FontFace Ninja is one of the best Chrome extensions for developers that help you identify the fonts you see online. This fantastic browser extension allows you to hover over the text on the screen to instantaneously assist you in spotting a font, letter-spacing, line spacing, size, and even the color hex code. Besides, the Chrome browser extension also lets you test the font out yourself with whatever text by writing anything out in the extension’s drop-down window.

9. React – Developer Tools Extension:

React is a Chrome DevTools chrome extension or chrome plugin that provides the open-source React JavaScript library for a website or web page. Among the list of chrome browser extensions, this extension allows you to check a React tree, comprising the component hierarchy, state, props, etc.

10. ColorZilla – Color Picker Extension:

ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color-related tasks – both basic and advanced.

11. Page Ruler – Size Checker Extension:

Unlike other available tools in the market, it has a lot of unique features which ensure highly accurate measurement of elements. This makes it a must-have tool for developers and designers.

12. Emoji Keyboard by JoyPixels®

The world’s leading emoji keyboard for Chrome. Now Unicode 13 compatible.

13. Enhanced GitHub

Display repo size, size of each file, download link, and option to copy file contents. Extension that provides useful features on top of GitHub Website.

14. AdGuard AdBlocker

Unmatched AdBlock extension against advertising and pop-ups. Blocks ads on Facebook, YouTube, and all other websites. AdGuard ad blocker effectively blocks all types of ads on all web pages, even on Facebook, YouTube and others.

15. Octotree – GitHub code tree

Browser extension that enhances GitHub code review and exploration.
Features – IDE-like code tree, Folder, and file search, Support private repositories, Repo/file/issue/pull request bookmarking, High performance, working with repositories of any size

16. Light House:

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.

17. Wappalyzer:

Wappalyzer is a technology profiler that shows you what websites are built with. Wappalyzer is more than a CMS detector or framework detector: it uncovers more than a thousand technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN, and others.

18. Momentum:

Replace the new tab page with a personal dashboard featuring to-do, weather, and inspiration. New Tab page that gives you a moment of calm and inspires you to be more productive. Get inspired with a daily photo and quote, set a daily focus, and track your to-dos. Eliminate distractions and beat procrastination with a reminder of your focus for the day on every new tab. Join over 3 million users and get inspired to create the life you want to live.

19. CSSViewer:

CSSViewer is a simple CSS properties viewer originally made by Nicolas Huon as a Firefox add-on (2006-2008).

20. Grammarly for Chrome:

From grammar and spelling to style and tone, Grammarly helps you eliminate writing errors and find the perfect words to express yourself.

21. Code Cola – Source Code Viewer Extension:

From a developer’s perspective, Code Cola is one of the best chrome extensions for developers. You can use it to see the source code of the project you are working on. Simultaneously, this smart chrome browser extension or tool functions as a CSS editor so that you can effortlessly edit and share CSS properties. It helps interactive designers, website operators, visual designers, and other users alter the online pages very smoothly and rapidly.

Tagged : / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /

Top 21 Firefox Addon every software engineer must know

by vikashdev kGeneralLeave a Comment on Top 21 Firefox Addon every software engineer must know

1.Web Developer

I absolutely recommend the ‘Web Developer‘ add-on. It gives you some great features which will make your development workflow faster. I enjoy various CSS, form, and image options. No matter if I want to check alt tags, missing images, or image dimensions, this add-on is my preferred choice.

2.Usersnap

The Usersnap Firefox add-on lets you capture and annotate any website. It works great for collecting and managing user feedback on websites or applications or for tracking bugs in your browser.

All screenshots are directly saved in your Usersnap projects. It integrates with your workflow, and you can connect Usersnap with JIRA, Trello, Slack, and 20 other project management tools. A perfect fit for QA and development teams.

3.SeoQuake

SeoQuake will help you in optimizing your web pages for search engines. It gives you a SeoBar that has loads of useful SEO-related options for you to take advantage of. This extension will assist you in identifying issues pertaining to search engine indexing in your web pages.

4.User Agent Switcher

The User-Agent Switcher allows you to switch the user agent of your browser. The add-on will add an option to the tool settings. This option lets you switch the user agent.

5.FireShot

FireShot is a Firefox add-on that creates screenshots of your web page. What is unique about this plugin is that it gives you a set of editing and annotation tools for working with your screenshots. This can be a handy extension to have for presenting your work in your portfolio.

6.Ghostery

Ghostery is a great add-on to display installed trackers and pixels of any website. It helps you to find and analyze the used marketing- and tech stack of any website. And you can block them if you don’t want your session to be recorded.

7.Firebug

Firebug is considered to be the ultimate developer’s tool for Firefox. You are given a ton of web development tools to use from within your browser. You can explore, edit, debug, and monitor CSS, HTML, and JavaScript in real-time on any web page.

8.Greasemonkey

The Greasemonkey Firefox add-on enables you to modify how a web page looks and works by using small snippets of JavaScript. There are hundreds of scripts that you can download to enhance this add-on.

9.ColorZilla

ColorZilla is an advanced color picker and eyedropper. It allows you to get the color of any pixel in the browser window. The extension also has a built-in averaging square. This helps you get a matching color to for a photo. The add-on is pretty simple and easy to use.

10.FireFTP

FireFTP is a streamlined Firefox extension for uploading files to a server. It offers several advantages to standalone FTP applications, such as its operating system-independent requirements. This browser add-on has all the features you would expect from standalone apps.

11.HTTPS Everywhere

This Firefox add-on encrypts all your communication with many major websites. As many sites support HTTPS, they still might use HTTP. Or they fill encrypted pages with links that go back to unencrypted sites. The HTTPS Everywhere add-on fixes these problems by rewriting all requests to HTTPS.

12.Palette Grabber

This add-on will build color themes that are exportable to popular graphic-editing software such as Photoshop, Paint Shop Pro, GIMP, Fireworks, and Paint.NET of the web page you’re currently viewing.

13.Total Validator

This extension is an all-in-one validation tool that will check HTML, links, take screenshots, and do a lot more. It also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (in five different languages), and take screen captures via different web browsers and operating systems to see how your web pages look.

14.BuiltWith

The BuiltWith add-on analyses websites and their technologies, servers, and hosts. It works great for analyzing competitor websites and you can get insights on any web page. And it even displays tracking IDs, like the Google Analytics ID.

15.Web Developer Checklist

The Web Developer Checklist is a simple add-on that gives you an overview of the usability of your site.

16.Platypus

Hands down, Platypus is one of the best Firefox extensions for modifying a web page. It works with Greasemonkey as a sort of WYSIWYG and it will remember your edits when you visit the web page again. You can use it to experiment with different variations of a web design.

17.Dummy Lipsum

An add-on with a very simple purpose, Dummy Lipsum generates Lorem Ipsum dummy text for you to use in your designs.

18.Cookie Manager

This Cookie Manager lets you check and manage the cookies. You are able to view, add, change or even delete cookies in any of the domains. You can even export and import cookies. This is helpful to reproduce certain issues by recreating certain browser sessions.

19.Page Performance Test

It analyses web pages’ performance based on various parameters. The Page Performance Test measures network, browser, and server performance. You can use Page Performance Test directly on your console:

  1. Open up your console; you will now find a new tab “page performance”
  2. Start the performance test.

20.CSSViewer

CSSViewer allows you to inspect CSS properties on a web page that you’re viewing. It’s a great way to study styles that you’ve seen on websites to learn CSS development techniques.

21.Aardvark

Aardvark, aimed at front-end web developers, lets you select web page elements and gives you several options for them, such as removing them from the web page (great for screenshots) or modifying their colors (helpful when printing web pages).

Tagged : / / / / / / / / / / / / / / / / / / / / / / / /