Five Essentials
Over the last several years of working on the front-end side of applications, I've accrued quite a number of bookmarks to niche sites. I hope to spread the word and help speed up your workflow a bit.
This is best for an audience of poor hobbyists like myself that don't want to shell out for expensive Adobe products and the like.
Some of these tools are free, others are paid. Unfortunately, I have not been sponsored by any of these tools. Any recommendations are entirely my own opinion.
1. Typora
Typora is my go-to markdown editor and it has paid for itself so many times over. Controversial statement incoming: I actually enjoy writing documentation now. This program is so clean, my hands never have to leave the keyboard thanks to the innumerable shortcuts, and it's a snap to make professional looking documents.
Fair warning, it is $15, but I really do not like alternatives that have a subscription fee or other recurring payments.
Some of my favorite features include the code fencing and syntax highlighting, support for equations and complicated illustrations, like Gantt charts, and the community driven themes gallery.
2. LoremFlickr
For smaller scale projects, I often spend a great deal of time getting feedback from friends or stakeholders as we iterate. Often times, if assets are still in development, I find myself using some filler image I have locally. During feedback, I find that most people get a bit distracted by these filler images and it can take away from the review process.
LoremFlickr is a nice, convenient workaround for this. It is a simple API that let's you quickly embed an appropriately sized image into the site. Plus, you can even give it a set of keywords to source your image.
You still get the benefit of a convenient filler image while not creating a distraction with an off-brand asset during development.
3. Rive + Vectornator
This is a bonus two-part tool for vector animation. I think subtle animation is one of my favorite ways to bring personality to a site. Rive is a browser application that lets you quickly animate vector files using a simple key frame editor. Then, there's a React runtime to easily play these animations. Plus, there is tons of support for more complicated rigging and event driven animations.
Vectornator is a free desktop tool (plus iPad app!) that is simply a fully fledged vector studio. I don't do too much illustration and it fulfills everything I need to do (and more, I'm sure.)
But the beauty comes from combining these tools. I don't love Rive for editing vectors, mainly just for animating. So, I create my vectors in Vectornator, export it as an SVG, then animate using Rive. This is essentially a free alternative to Illustrator.
4. Photopea
I don't think I'm early to this party, but if you haven't heard of Photopea yet, definitely check it out and bookmark it. It's an ad-driven, browser-based Photoshop alternative. Honestly, I think it's better than GIMP and I think it's maintained by just one person. It has come in handy so many times when I need to edit an asset quickly and I don't want to load up a bulky desktop program.
In some cases, it's even more powerful too. I have trouble getting GIMP to import some dynamic Photoshop layers, but Photopea handles it easily. This opens the door to creating professional quality mock-ups and other Photoshop tools you find online.
5. Anthonyboyd Mockups
I've long been hunting for quality, cheap mock-ups for personal projects. I'm happy to share I finally found it. This is a collection of free (for personal and commercial) mock-ups. This allows you to quickly throw together professional quality assets for a clean presentation or portfolio. Plus, this pairs beautifully with Photopea as you don't even need a Photoshop subscription to take advantage of these templates.