As an aspiring webmaster 🕸️, I spend most of my free time designing, developing and maintaining websites. 🌐 To ease the process, I ensure that I choose the best tools available on the market.
Choosing the wrong tools could lead to you doing the wrong work (like fixing issues caused by interfacing layers) or more work than necessary 🐢 (like having to satisfy the requirements of some framework. Yes, I'm looking at you TypeScript).
On the other hand, choosing the right tools can help you get things done much faster and with simpler and scalable results.🦸
What makes a good tool?
When I'm choosing a tool, I make sure that it is:
- Simple 🔶: Not to be confused with easy, but it needs to be primitive, like shapes. Simple shapes can be used to create any drawing. I need the tool to do the same.
- Free (or low cost) 🆓: This may be the most important. Being able to scale is directly tied to how cheap everything is.
- Configurable ⚙️: Can I make it do whatever I want?
- Minimal 🫓: Can I run the tool on minimal hardware, or do I need to buy a gaming PC just to run the program? Does it solve mainly one problem and does it solve it well?
There are other factors, but the ones listed have the highest priority to me.
What are the tools for?
I use the tools for what I call the Five Fingers of Web Design:
- Strategy
- Design
- Development
- Deployment
- Analytics/marketing
I group my tools in to those five categories.
Tools for strategy
I use these tools to research and discover the target audience, then plan the next steps of execution.
- Google Meet 🎥: As you would expect, I use this to communicate with clients and to interview their customers too to get a glimpse of the problems they're facing.
- GitHub 💼: I use a kanban on GitHub for planning the various stages.
Tools for design
I use these tools to craft my designs.
- Pen and paper 📝: This is not software but just as important as any other tool. I use it to create wireframes that would be recreated with software.
Tools I run on my browser:
- Penpot 🎨: A design and prototyping tool. This is where all my mockups reside. It is an open-source alternative to Figma.
- Dribbble 🖼️: A social media platform where design professionals share their work. I go there for inspiration (and to steal ideas).
- Chromora 🌈: I use Chromora to create color palettes.
- Boxicons 📦: I download all my free SVG icons at Boxicons.
- Typescale 🔤: I use this website to choose typographic scales.
Tools I install on my computer:
- Inkscape 🖌️: A free and open-source cross-platform vector graphics editor similar to Adobe Illustrator. I use it to make interactive icons and images.
- GNU Image Manipulation Program (GIMP) 🖌️: A free and open-source cross-platform image editor similar to Adobe Photoshop. I use it to crop backgrounds out of images.
Tools for development
I use these tools to bring my designs to life. (Mostly frontend work.)
Tools I install on my computer:
Tools I run on my browser:
- Penpot 🎨: To view my created mockups.
- Google Webfonts Helper 🔠: This website helps to provide Google fonts as WOFF2 files and stripped of unnecessary (or commonly unused) glyphs.
- Utopia 📏: I use this tool to choose a fluid typographic scale and spacing scale.
- Mozilla Developer Network (MDN) 📜: I visit here when I'm confused (which means everyday).
- HTML, CSS and JavaScript 👨💻: Of course, the languages of the web!
Tools I run in my terminal:
- dyetide 👕: I use dyetide to convert colors from RGB and hex to HSL (the human-comprehensible version of color).
- jq 🔍 : I use jq to transform, query and filter JSON files.
- xmllint 🔍: I use xmllint to query XML and (X)HTML files.
- htmlq 🔍: I use htmlq to query HTML files.
- vim ✍️: I use vim as an editor.
- ssm 📋: I use ssm to create SVG spritesheets.
Tools I want to try:
- Emmet ✒️: This tool is for writing HTML faster through typing shortcuts.
Tools for deployment
I use these tools after the website has been deployed to the server. (Mostly backend work.)
- Python 🐍: Language of choice.
- Flask 🏢: Web framework of choice.
- uWSGI 🛎️: Web server of choice.
- nginx 🛎️: Proxy server of choice.
- Debian 🤖: OS of choice.
- Vultr 🦅: VPS of choice.
- Cloudflare 🌎: CDN of choice.
- ssh 📶: For securely accessing the server.
- rsync 📶: For syncing data with my server.
- Let's Encrypt 🔒: For generating free SSL certificates.
Tools for analytics/marketing
These tools are used to monitor your impact or keep my client's customers coming back.
For any of my clients:
- Beacon API 🐔: This API is used to keep monitor the users patterns by sending data concerning the use of the website.
- Mailer Lite 📨: This website helps with automation for email marketing.
For my websites:
- goaccess 👓: A web analytics application for Unix-like systems. I use it to check traffic on all my websites.
The bottom line
My goal is to employ as little tools as necessary to get the job done when creating websites. This benefits everyone:
- My client's customers (i.e. the site visitors) get to enjoy a simple, lightweight, accessible website with a pleasant user experience 🏖️ because there is not a lot of bloat and unnecessary code.
- My client doesn't have to break the bank to run a website. 🪙 Pricing can be controlled better, since it's not dependent on website builders.
- I get to solve problems 🔧 (with design and code) and have fun doing it! 🕺
Now that's something I can scale! ⚖️