30+ Helpful tools, apps and websites

Whether you're starting out in development or you've been in the game for a while, everyone wants to be a productive developer who enjoys what they're doing.

Sometimes a good tool, helpful website, or killer piece of software can make all the difference to your experience.

With that in mind, I've compiled a list of my favourite tools that I use on a daily basis across a range of areas, such as communications, development, graphics, emails and more.

Enjoy the list and please give it a share if you think anyone else will find these useful. Why not add your own in the comments and I'll update the list so we can all benefit?!

Note: Just in case anyone's suspicious about any ulterior motives, I can assure you that none of the links below are affiliate or promotional links. I 100% use and recommend everything on this list and don't make a single penny if you use them too. All I ask is that if you find something useful, pass it on 👉🏻

Communication

• Coggle - I don't use mind maps all the time, but they're a really helpful tool in order to think through ideas and their branches. Coggle is a really modern tool that has integrations with Google Drive, Dropbox and supports multiple teams.
• Draw IO - this could live in the design heading too, but Draw IO lets teams create all sorts of helpful utility diagrams from user flows, tree diagrams, and architectural layouts.
• Franz - a weird one to explain, but Franz offers a sort of containerised desktop app where you can load in all your other daily comms apps from Gmail to Teams, Slack, Skype, Whatsapp and more. One app for all your apps! It's free and one of my 'can't live without' applications.
• Asana - another love of my digital life, Asana allows teams to plan and keep track of their work in one centralised place. I track personal goals and projects on there too. It's like a todo list on steroids, mixed with a project management tool, all hidden away behind a friendly user interface.

Design

• Pixlr - a free, online image editor that has a Photoshop look and feel
• Canva - I absolutely love Canva! It's a really slick, simple online graphics creation tool where you can create just about anything from presentations, social media posts, and blog headers just like this very article's image right here.
• Kraken - I use Kraken to optimise a lot of my images where I need to smush them down and reduce the file size

Images

• Unsplash - freely-useable images by every day photographers and content creators
• Pixabay - one of many alternatives to services like Unsplash, offering a different range of free to use images
• Undraw - a huge collection of open-source illustrations and graphics

Development

• CodeSandbox - test out more elaborate ideas and complex projects in a suite of easily-configurable environments. I use it all the time for my students as it's a great way to share code back and forth.
• JS Bin - a dead simple, straightforward playground to test out JS snippets.
• Regex 101 - OK, regex is a dark and mystical art. However, if you do have to write on or test one out, regex 101 makes it as painless as it can be.
• Netlify - this very blog (well, if you're not viewing it on Dev) is hosted on Netlify. Netlify is a hosting service that's aimed at JAM Stack apps. It offers a really empowering developer experience with lots of plugins and integrations to allow you to host all sorts of online applications from SPA's to websites and more.
• Postwoman - now I'm a big fan of Postman for testing my API's out, but Postwoman offers a superb alternative. Online based, open source and with a ton of options, it's a must to check out.

JavaScript

• ES6 guide - a helpful guide to all of the main features within the ES6 flavour of everyone's favourite language.
• Parcel JS - a great alternative to Webpack for your JS project bundling needs. I have a good article on configuring Parcel that's worth checking out.
• Thinking in React Hooks - I keep plugging this article because Amelia Wattenberger has an unbeatable approach to explaining the benefits of React Hooks over traditional class-based components, including a library of Hooks utility classes.
• Unpkg - if you'd like to use a module or package from the NPM library via a CDN then Unpkg is the tool for you.

CSS

• 30 CSS selectors you must memorise - a simple guide to the best CSS you must learn today!
• A complete guide to Flexbox - I use this all the time, it's a fantastic resource for learning the intricacies of Flexbox.
• BEM - Block Element Modifier is a popular methodology for structuring your CSS classes. This is the complete guide and is super useful.
• Tailwind CSS - a handy utility-first CSS framework that offers a different approach to 'standard' CSS styling and methodologies like our friend BEM, above. There's also a good discussion on this in episode 6 of The Front End Podcast .

Blogging, writing and podcasts

• Carbon - I wish I'd discovered this earlier, but Carbon is a simple code editing window where you can write your code, style it up and then export it to Twitter or download it as an image file.
• HypeFury - I've just started using this for my Twitter management, but it's a queuing and promotion tool. It has a load of features like evergreen tweets and clever scheduling.
• Otter AI - I use this to transcribe my podcast episodes, but you can use it for meetings, lectures or just about anything. The transcriptions are very accurate and quick.
• Zencastr - continuing on the podcast theme, Zencastr is amazing. It's dead simple and offers a unique recording approach whereby you get several streams, one per guest — this makes it easy for post production and mixing.
• Anchor - offers an all in one solution for recording, promoting and distributing your podcast. I've been using it for 6 months or so and it helped get The Front End podcast off the ground in no time flat.
• Notion - I use Notion a lot. Like, a lot a lot! It offers a striped back, yet powerful writing experience with some killer features — like exporting your copy into markdown. It also has a ton of different uses and page layouts available.