30+ Helpful tools, apps and websites

Where would we be without our beloved tools and apps? I'm going to share my favourite tools, apps and websites that I use as a front end developer to get more done in less time.

Blog header image for 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

two adults using laptops to communicate

  • 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

picture of a basket of fruit

  • 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

wall of 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

wall of tools of different shapes and sizes

  • 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.

Follow kendalmintcode on twitter call to action image

JavaScript

code on a computer screen

  • 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 intracacies 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

a poorly lit laptop screen and lamp

  • Carbon - I wish I'd discovered this earlier, but Carbon is a simple code editing window where you cna 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.
Rob Kendal

About Rob Kendal

Rob Kendal is an award-winning front-end developer and marketer who likes simple, organised thinking and making clever things. You can find him working on some things on GitHub and recording podcasts, such as The Front End. Say hi on me@robkendal.co.uk.

Comments

Receive awesome news in the mail

If you'd like to be notified of the latest updates and articles, pop your email address in the box below and get ready for update goodness. I only send emails out once a month and promise to never spam you.

Read more

In this article, I wanted to help people to understand a little more about what imposter syndrome is, how it can hold you back, and what you can do about it, even leveraging it to drive you to become better.

Worried about your GitHub graph and that you're not coding as much as others. Don't worry, I'm here to tell you why the GitHub activity graph can be a double-edged sword.

Whether you're brand new to remote working, unsure if it's the right fit for you, or simply curious about how us seasoned remoties (can I coin this phrase??) operate, I've got some tips, tricks and advice based on my experiences in working in a globally distributed software development team.