Just in time for the holidays! Everyone has their gift lists but who wants to fight for a mall parking spot or struggle through a river of angry shoppers like a worn-out salmon swimming upstream to escape a hungry bear? Let me contribute to your peace of mind with my own lists. This series of posts looks at my favorite web tools and my web development stack I am using right now.
These are highly opinionated, irreverent, and unscientific lists of things I am using for actual clients and side projects. It’s stuff I like that I have found useful and even profitable. Everything here is free – and that alone is what has changed the web development and publishing world so wildly much. More on that later maybe in a future post.
My Web Tools
For checking All The Things. Chrome DevTools and Firefox Developer Tools. Right click, hit “inspect” and watch the magic happen. A JavaScript console exposes everything on the global scope for that page. Everything, that is, including your buggy scripts! This has saved me many times.
For picking a color scheme: Paletton. Enter your favorite color on this fun site and based on color theory it gives a range of matching and contrasting colors for your site.
For putting sample text on the page. Tired of Lorem Ipsum? We’ve all done that. When you want to amuse yourself and please your clients, you need to Meet the Ipsums.
For text editing. My goto text editors are Brackets, Atom, vim, and nano. Nano is actually quite fun and fast when you need to throw together a quick 10-line script from the command line.
For developing WordPress locally on my computer: ServerPress. Let’s just get this out of the way: Do not set up WAMP, MAMP, or XAMPP on your computer! Why? The default ports and networking configuration may change without you realizing it, and suddenly other unrelated apps stop working.
Perhaps in the future you’ll want to use services like Acquia for a complex Drupal project or Bitnami for some complicated app. They may use conflicting ports or run services in the background. The ServerPress docs even warn against installing *AMP on the same machine.
For WordPress local development, ServerPress is a winner. A close second behind that is Docker (more on that below). In fact if you really want some *AMP stack running on your computer, drop it into a Docker container.
For spinning up a quick local server. Sometimes I need to run a local server on my laptop for building a simple UI or JavaScript snippet. The tools below start and stop their own server so that you can see your HTML/CSS/JavaScript creations in real time.
- Grunt, Gulp, Express, Browserify: Requires command line tinkering. When lint, concatenate, minify or otherwise optimize assets like CSS, JavaScript and media files, these tools have their own quickie server.
- Docker: Do you need different services for different clients? Using multiple databases, competing ports, odd versions of PHP, Ruby or Python? Spin up a Docker container and code away. Need to switch to another project? Shut down the first container and fire up a new one. Did it all break apart? Throw it away and start over, with no lingering effects. It’s just a dream.
- Chrome Dev Editor: For your Chrome browser or Chromebook. Put together a suite of HTML,CSS and JavaScript files and Chrome Dev Editor will launch its own mini server. It even live reloads.
- Brackets: Similar to Chrome Dev Editor, Brackets also has its own server so you can see your results right away. This is a killer feature that I never want to do without again.
For tapping into an external API, just to see what happens: Postman. An intuitive UI lets you enter a base URL, add authentication and headers, and set the HTTP verb such as GET or POST. The results are shown in on the screen including how much time in milliseconds it took.
Writing tools, because you need to write
- Penzu. I am using the paid version but free plans are available.
- Google Docs. I use this for drafting posts, writing contracts and client letters, and general note-taking.
- Simplenote. I haven’t found a consistent use for Simplenote but I sure want to. It has a very clean and low-maintenance interface and is accessible on any device.
Organizing tools, because you need to get organized
- Google Keep. Forget about post-it notes on your desk. Or your screen, your mirror, your fridge, your cat…
- Todoist. I’ve spent enough time dabbling in productivity hacks. While not perfect, Todoist works for me, for now, and I’ve been on it for several years.
- Coggle for mind mapping. I don’t mind map a lot, however this was a critical component for a major client I am working with right now.
Communication Tools
- Slack. While Slack is an amazing tool for communication throughout the team, I’ve found that some of my clients just want to stay with email. So…
- Email. It’s still here and will be for the foreseeable future. While we’re on this topic: Are you one of those people with 15,000 emails in your inbox? What? Why? How? Just say no. Better yet, just delete them all for New Years and start all over.
Image tools
- Canva. For putting together a quick graphic for a blog post, page header, Facebook header, Twitter header, even your kid’s birthday invitations.
- Paint.net. A freeware version of Photoshop, I’ve used this for years for simple image manipulation.
- Pixlr. Similar to Paint.net, available in the Chrome and Chromebook ecosystem.
- Stock photo libraries. Great resources but do us all a favor and go to a hip and creative library like Death to the Stock Photo. For heaven’s sake don’t use those cheesy yuppie images of smiling, well-dressed white people in random poses. And say no to the (usually female) phone operator wearing a headset.
- Hire a photographer. Even better than stock photos. Hire a photographer and truly add value. If you need a suggestion, let me know.
Next: My Web Stack
