WorkBox
https://developers.google.com/web/tools/workbox/
Service workers and Progressive Web Apps (PWAs) are getting much traction lately and for a good cause. With the proper configuration, a Service Worker minimize loading times tremendously. The only caveat is how complicated it can be to configure a service worker correctly. The underlying API is easy to use but hard to master, and there are quite a lot of features to explore. You can learn more about Service Workers over there: https://developers.google.com/web/fundamentals/primers/service-workers/
Fear not, WorkBox is here to help with your Service Worker configuration. It’s coming with its comprehensive API, and in different flavors with its WebPack plugin, Node module, and CLI. It radically simplifies the original API by giving you a set of premade caching strategies, offline support, PWA-ready presets, and more!
So mainly what would have taken around 300 lines of code with the original API takes you about 10 using WorkBox!
Lighthouse
https://developers.google.com/web/tools/lighthouse/
Lighthouse is a brilliant tool that performs audits on a webpage of your choosing. It has a considerable number of references and metrics broken down into 5 sections: Performance, Progressive Web App, Accessibility, Best Practices, and SEO.
Once the audits are completed, Lighthouse generates an exportable report that runs you through every possible metric that could be extracted from the tests performed by Lighthouse. If the app fails in a specific area, Lighthouse tells you how to improve your app and the steps to take to achieve a perfect score.
If you’re a Google Chrome user, you can find Lighthouse in the “Audits” tab of your developer tools. You can also run Lighthouse via shell scripts or install their Node module if you want to integrate it into your CI system (which I would recommend).
Visual Studio Code
https://code.visualstudio.com/
VS Code is a free multiplatform open source code editor with built-in features such as IntelliSense, debugging tools, a simple Git interface, and the possibility to add extensions developed by the community.
Although it doesn’t support every language out there by default, there are a bunch of extensions available that give you support, highlighting, autocompletion, snippets, and so forth for most languages.
You can also open one or more instances of your terminal directly in VS Code because ALT+TAB is overrated.
It’s also good to see that they try to push an update at least every month to improve or add features, what a great team!
However, I think the highlight here is the community of developers building cool extensions. Among my favorites are npm Intellisense, Indenticator, Bracket Pair Colorizer, ESLint, Auto Close/Rename Tag, and more. There’s an extension for everything, and if not, you can build it!
Give it a go!
Postman
As web developers, we work with many different APIs and sometimes we even build them. We know it is not always easy to test APIs or debug them.
Postman is a simple application running on a desktop or from the browser, which lets you send requests, test and debug, and automates your tests, but it is also a great tool to document your API.
With Postman you can create a collection of requests and save their content, methods, URLs, and so forth. This collection can be exported and shared with other Postman users. So on top of your API documentation, you can provide your team with a collection that they can use to mock your API and test it. That alone makes it a fantastic tool for tech companies!
I invite you to introduce this tool to your development flow if it is not already the case, and primarily if you develop your APIs!
StackBlitz
If you are a React, Angular, or Ionic developer, you love this fantastic platform! StackBlitz allows you to create a fully-fledged project directly from their web-platform.
You can add Node modules, external libraries, import your code directly or via GitHub. You can then edit your code using VS Code directly embedded in your browser. StackBlitz offers Hot Module Replacement (HMR) out of the box as well as making your experience super smooth.
Your code can be previewed on a free subdomain that you can also share to demonstrate your work. Your code is also shareable which makes it a pretty cool tool to showcase small apps and great snippets or components!
The service is entirely free which even more amazing! It is an excellent tool for beginners to play around and create quick projects, but I don’t see why you couldn’t use it for real projects. You should check it out.
Glitch
Similar to StackBlitz, Glitch is a platform where you can create Node.JS projects, manage your modules and files, edit and share your code, and deploy your project to a free subdomain. It is convenient to share demos, examples, snippets, and play around.
Glitch is equipped with Hot Module Replacement when it comes to front-end resources and automatically restarts your server when you add a new module, or change server files. Once again, a great experience for developers!
Another fantastic point is the community. Glitch, like Codepen, displays Community projects on their homepage. You can fork any project and make it your own. You can also make your projects private if you don’t want to share them.
There are some fantastic projects and samples to be discovered on Glitch, and I would recommend you to check it out.
CodePen
CodePen is a place for a coder to be creative and share code snippets or show off what you can do with a bit of HTML, CSS, and Javascript.
If you’re looking for cool animations, custom components, CSS tricks, tutorials, and very original work, you’ll be amazed by what you’ll find on CodePen. Moreover, if you like what you see, you can fork your favorite pens and edit them to create your own!
Join the madness!
Firebase
Firebase has a ton of cool features for Web and mobile apps developers, and it would take quite a while to go through them all, but they’re all great so if you want to know more head over to their website!
The great thing about Firebase is that their services are all free up to a point. The free tier gives you enough room to launch test projects, MVPs, and small websites using a bunch of great features. Also, if your app or website gets bigger in scale, you can upgrade your project to a fixed fee or a Pay-as-you-go plan that automatically scales depending on your needs.
Let’s go through some of their remarkable features:
- Firebase Hosting is a fast and multi-regional CDN that delivers static assets across the world. Using Firebase CLI, you can deploy your static assets and access them via a free subdomain or your custom domain (free SSL certificate provided).
- Firebase Real-time Database is a fast bidirectional NoSQL cloud-database. It stores and sync data between users in realtime both Web and mobile apps. You can control the level of access for your users by adding security rules to your project.
- Cloud Functions allows you to run backend code based on specific events emitted by Firebase or Google services, or third parties with webhooks. This feature is perfect if you want to create a separate service for your application or create a Serverless application.
- Firebase Authentication regroups different authentication methods such as email/password, Google, Twitter, Facebook, GitHub, email only, phone, Google Play, and anonymous.
These are only a few of the services available on Firebase, so feel free to explore the rest, especially if you are a mobile app developer!
Regex101
Why this regex tool, in particular, you’d ask. Well, let me explain. Sometimes the goal is not only to test a regular expression but to understand what it does. Also, that’s where Regex101 is brilliant. On top of highlighting what part of your regular expression influences the result displayed on the screen, it also gives you an explanation on what part does what.
So if you are working in a team, and a colleague gives you an obscure regular expression that takes up 3 lines in your code editor, no worries! Paste it in Regex101 and voilà, a full breakdown of the expression in seconds!
Also, as a bonus, if you’re rusty or new to regular expressions, there’s a Quick Reference section with a search field that helps you find how to achieve the correct result.
Can I use?
Compatibility is a big concern in the world of web development. Even though it is getting better with tools such as WebPack and Babel and the considerable progress of browser vendors in the recent years, we still need a tool to remind us of what’s compatible with what browser and down to what version.
That is precisely what Can I Use does. Type the name of a CSS property, Javascript function, HTML element, and Can I Use displays the level of support of all versions and browsers available. It even gives you polyfills if possible!
A great tool, add it to your bookmarks!
I hope you found something new that you’d be interested in trying out! These are all great resources that I use almost every day, and I support them because they saved me many hours of my time.
If you have any other resources in mind, feel free to share them in the comments!
Let me know if you ended up trying some of the resources mentioned here and how you feel about them.
Happy coding!
