No matter what profession or hobby you are involved with, there is always a set of tools that one uses to be successful in what they do. Have you ever noticed there is a “What’s in my bag” Youtube video for many of these areas. Examples: photography, carpentry, students backpack, women’s purse, golf, hiking, artist, computer repair, and so forth.
As a web developer, I am sure you have your favorite tools, kits, resource, gadget, or reference in your “tool bag” that you use most often.
Actually, I should have titled this post as “What’s in my online tool bag.”
As I share what online resources I use on the job.
There may be some sites that you already know about or some sites that you never heard of.
In either case, I hope, it can help you be successful.
“Make sure that you always have the right tools for the job.
It’s no use trying to eat a steak with a teaspoon, and a straw.”
[Anthony T. Hincks]
Essential Tools
Important sites: tools, resources, and help.| Resource | Link | Description |
|---|---|---|
| Can I Use | Compatibility tables for support of HTML5, CSS3, SVG and other technologies in various browsers. | |
| es6 Console | A online es5, es6, react console. Run, save, transform your code. | |
| CodeSandbox | an online editor that helps you create web applications, from prototype to deployment. | |
| Web Performance Checklist | Based on 'Designers Guide to Web Performance Optimization' by Jon Yablonski. | |
| Get Postman | Developing APIs is hard. Postman makes it easy. | |
| TestMySite | Find out how well your site works across mobile and desktop devices. | |
| Nibbler | A free tool for testing websites. Enter the address of any website and Nibbler will give you a report scoring the website out of 10 for key areas, including accessibility, SEO, social media and technology. | |
| Browser Diet | And what if we got together a bunch of browser experts who work on large sites to create a definitive front-end performance guide? | |
| Front End Handbook 2017 | This is a guide that anyone could use to learn about the practice of front-end development. From FrontEndMasters. | |
| How Strong is Your Website | Website Grader is a free online tool that grades your site against key metrics like performance, mobile readiness, SEO, and ... | |
| WebFlow | The power to design, build, and launch responsive websites visually, while writing clean, semantic code for you. | |
| Real Favicon Generator | With so many platforms and icons, it's hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you. | |
| WhoIsHostingThis | Discover who is hosting any website. Get information about the web host, IP address, name servers & more. | |
| BuiltWith | Web technology information profiler tool. Find out what websites are Built With. Chrome & FF Extension. | |
| Wappalyzer | Wappalyzer is a cross-platform utility that uncovers the technologies used on websites. It detects content management systems, ecommerce platforms, web frameworks, server software, analytics tools and many more. Chrome & FF Extension. | |
| website Informer | Get a quick aggregated view of everything the Web can promptly tell you about a site (domain), including its daily visitors, safety status, Alexa rank, owners and much more. Chrome & FF Extensions. | |
| 1 Click Screenshot | This extension is very simple. With just a few clicks, you can take a screenshot of an entire website and save it to a png file. There is no bloat or any fancy post-processing. The extension is open source. Chrome & FF Extensions. | |
| Compressor | a powerful online tool for reducing drastically the size of your images and photos whilst maintaining a high quality with almost no difference before and after compression. | |
| GT Metrix | GTmetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it. | |
| Sucuri Site Check | Enter a URL (ex. sucuri.net) and the Sucuri SiteCheck scanner will check the website for known malware, blacklisting status, website errors, and out-of-date software. | |
| Loom | Send a Video, Not a Thousand Words. A new kind of work communication tool that helps you get your message across through instantly shareable videos. Chrome Extension only, desktop app available. | |
| Wordpress Forums | 30% of the websites in the world are powered by WP. Your starting point for finding and sharing solutions with WordPress.org users around the world. | |
| StackOverFlow | Each month, over 50 million developers come to Stack Overflow to learn, share their knowledge, and build their careers. Join the world’s largest developer community. |
In Conclusion
When I first started out building websites back in 2000, there was only a sparse amount of online tools available. Many were very crude as everyone was learning and experimenting back then.
Fast-forward to 2018, there are so many choices available today.
You may find another similar online resource that fits your style or workflow better than the one I use.
Most likely there are some awesome online tools that I haven’t discovered yet, feel free to share it with us.
Gerald Watanabe
Islandwebtek
