2

14 Useful Tools That I Use for Faster and Easier Web Development

 3 years ago
source link: https://javascript.plainenglish.io/14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

14 Useful Tools That I Use for Faster and Easier Web Development

Useful online developer tools you’ll love to use.

0*BaRSXh-rAfy0aiTf?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Photo by Campaign Creators on Unsplash

I’ve been developing websites for years, and I don't believe that keeping the tools that I use to myself will give me a strong advantage in the job market competition.

I know how web development can be really frustrating, but we can make our jobs a little faster and quicker with the help of online tools.

So I’m happy to share the tools that I use that make my web development tasks easier.

1. Metatags.io

I use this tool to test and view my website's preview when viewed on Google, Facebook, or Twitter. You’ll see the title, description, and image of your website exactly the way visitors see it.

I can also upload your own image and modify your website's title and description tag without changing anything on the website.

0*36gVwWZrjPX87sRE.png?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Source: Metatags.io

2. ExtractCSS

I use this online tool to extract element ID, class, and inline styles from HTML documents and output them as CSS stylesheets. I don’t have to do anything except type or copy/paste the HTML, and this tool will get the job done.

0*pTYDfXM2lVuDQIqD.png?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Source: ExtractCSS.com

3. WhatRuns

This tool always comes in handy. This helps me peek at other site’s themes, plugins, and server info used. WhatRuns can be installed on Firefox and Chrome without taking up so much space in your computer’s memory.

0*CEJ-bx_r99V-VyPd.png?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Source: Whatruns.com

4. Unminify

Free tool to unminify (unpack, deobfuscate) JavaScript, CSS, HTML, XML and JSON code, making it readable and pretty.

0*wv82cx4l726fzNs6.png?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Source: Unminify.com

5. Octotree

This extension is great for exploring but if you know exactly what you’re looking for, press ‘T’ on your keyboard and search the filenames in the repo instantly. It will save you some time, though this is not always the case.

0*CIhFTlwQwKadjfly?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Source: chrome.google.com/webstore/

6. Web Developer Checklist

It is in my nature to sometimes forget minor to check elements of the websites I work on. I completely changed everything when I started using this checklist, always reminding me of important things to check on a website from the front end, SEO, to mobile.

0*-tuALDa95Vi07jqa?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Source: chrome.google.com/webstore/

7. Web Developer Form Filler

I can say I am not the only one who has had enough of filling up forms, whether it works or doesn’t. This tool will come in handy to developers to test form functionality. This won’t just save you time from inputting the required details and help you get the job done much faster.

0*61QjKNxkV_ARDyRS?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Source: chrome.google.com/webstore/

8. EditThisCookie

This is honestly a must-have for me as both a web developer. I enjoy being able to have the easy power of modifying cookies without jumping through hoops to do it. I love how granular this tool is, and at the same time, so simple and accessible. All that granularity and power is a click away when you are on a site.

0*st3IZOjb2df3otm2?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Source: chrome.google.com/webstore/

9. GTMetrix

This allows me to identify what is slowing my site down and boosts conversions once I fix the identified issues. Sometimes, the issues tend to be server-related, or the issues are related to super large images, problems with the code, and many other problems that will help you resolve.

0*4BWbN8hPX09MpS96?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8

10.Google Page Speed

I use this tool to scans any website for any back-end issues that need improvement, such as what is causing the page to load slower.

0*rpAiRctc3Ij2583T?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Source: chrome.google.com/webstore/

11. Browserling

This allows me to view any website in different browsers such as Opera, Chrome, and Firefox. I can also change what operating system I am accessing from, such as Windows or Android technology.

0*Z21Ba_fg4Kh6v2FI?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Source: Source: chrome.google.com/webstore/

12. Responsively App

This browser is designed to help you see what your website looks like on different technology devices at once. When I didn’t have this tool in my toolbox, I’d check the website on different devices at a time. Imagine how much time would it take me to finish that?

0*hU62x_0FaLBhOCOZ.png?q=20
14-useful-tools-for-faster-and-easier-web-development-9fd0ebc1f3f8
Source: responsively.app

Here are my favorite end developer tools I can’t live without.

13. Compressior.io

I use this tool to reduce the images captured on my phone and DSLR camera as, by default, their file size is over 1MB which is heavy for images. The quality remains the same, but the size is much different.

You can use this tool to optimize and compress JPEG, PNG, SVG, GIF, and WEBP images online without breaking a sweat.

14. DrawKit

I use this tool to look for free vector illustrations on my web designs. These designs are clean, professionals, and designed for websites anyone can use without attribution.

If you enjoyed this post, you’ll also enjoy my favorite tools.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK