Web Tools Weekly
What a Tool!

Issue #379  (CodeLobster Review, CSS/HTML, Build, Git/CLI)10/22/20

The following intro is a paid product review for CodeLobster, a free cross-platform IDE for PHP, HTML, CSS, and JS development.

There's no question that over the years a few major players have taken control of the code editor and IDE market, and it's likely at this point you've settled on one. But I'm a strong believer in developers getting accustomed to using two or three different IDEs or editors, even if a single app is their daily choice. Let's take a closer look at one you may not have tried: CodeLobster.


CodeLobster, available on Windows, Mac, and Linux, has been on the scene since 2005 and still receives regular updates, the most recent release being in September of this year. It supports a number of interface languages including English, German, French, Chinese, Japanese, and Russian.

CodeLobster includes most of the features of other popular IDEs, for example autocomplete for CSS properties and property values:

CodeLobster autocomplete for CSS
CodeLobster's Autocomplete feature for CSS

As well as autocomplete for HTML attributes:

CodeLobster autocomplete for HTML
The autcomplete feature for HTML's input element

CodeLobster also offers advanced autocomplete and debugging features for PHP development. The breakpoint feature, illustrated below, is one of a number of PHP debugging features available.

Adding breakpoints for debugging
Adding breakpoints in the left margin for debugging

Other debugging features include:

  • Tooltips for reviewing variables on the fly while working with breakpoints
  • A "Locals" panel for showing the values and types for Global and Local variables (which also includes array and object inspection)
  • A panel for examining the call stack during debugging

When writing CSS, one feature I like is the ability to view browser support for a particular feature instantly by mousing over it:

CodeLobster's instant CSS info
Instant info on CSS features on mouse over

You can also use the "Context Help" menu that appears for specific language features in HTML, CSS, MySQL, and PHP:

CodeLobster's Context Help
The Context Help option for PHP, MySQL, and HTML/CSS/JS

In the above screenshot the "Context Help" option will take me to MDN's article on the CSS content property. You can customize which documentation you want to point to (e.g. W3C vs. MDN) for the front-end features.

CodeLobster includes support via plugins for a whole slew of popular frameworks and libraries for both PHP and JavaScript, in the Pro version of the software. A few of the plugins include:

  • Angular
  • Bootstrap
  • CakePHP
  • Laravel
  • Vue
  • WordPress
CodeLobster's Framework Plugins
CodeLobster offers a number of plugins for framework support

These plugins offer specialized auto-complete features, context help, tooltip help, ability to install the framework, and more. All of this can make it much easier to work with some of the most popular front-end and back-end tools in the industry.

Overall, CodeLobster is a solid feature-rich IDE that includes a number of advanced features I haven't touched on here: SQL management, Integration with version control tools (e.g. Git, SVN), code validation, Node.js support, and more.

You can download CodeLobster to use it free indefinitely and you have the option to upgrade to the Pro version to get all the extra features.

Now on to this week's tools!

CSS and HTML Tools

Coded Mails
Hassle free responsive HTML email templates. 60+ templates divided into 6 categories for easy lookup and usage.

A really simple CSS animation tool with the ability to import keyframes code to edit an existing animation.

Typed HTML
TypeSafe HTML templates using TypeScript. No need to learn a template library.

Tailwind Play
An advanced online playground for Tailwind CSS, including support for customizing your tailwind.config.js file, extracting classes with @apply, and code completion with instant preview.

Tailwind Play

Customisable tooltips made with pure CSS.

Gradient Color Generator
Get random gradients and edit existing gradients to include two or more gradients.

Animated hamburger menu icons for modern web apps (1.7 KB). A port of hamburger-react to vanilla Custom Elements.

Tailwind Ink
An AI palette generator trained with the Tailwind CSS colors.

A tiny, permissive CSS selector parser with no dependencies and a simple API.

CSS-only library to apply color filters.

Vanilla JavaScript fully customizable HTML select box that replaces the native select element.

Build Tools, Deployment, etc.

Master Gatsby
A brand new course from Wes Bos currently still at launch price. 52 HD videos to learn to build and style websites with Gatsby, React, and friends.   promoted

A Go-based tool to build, deploy, and release any application on any platform.

Fast TypeScript runner using ESBuild for eager compilation.

A development platform to quickly generate, develop, and deploy modern web applications and microservice architectures.

Like Yeoman, but simpler. A powerful tool for generating files and folders with dynamic values. Use it to share complete project skeletons or to easily create modules/components or another recurring file pattern.

Simple, Decorated, Pluggable dependency-injection framework for TypeScript applications.

A CLI tool and a collection of plugins designed for bundling code to be used with Deno or in the browser. No node_modules, no npm or yarn needed.


Auto installs npm dependencies from the script you want to run then runs the script.

An open-source library for implementing continuous integration and delivery (CI/CD) in machine learning projects.

Frontend compiler, inspired by Svelte to build your app without a framework on the client side.

A linter for package.json files in Yarn, Bolt, or pnpm monorepos.

A way to manage your versioning and changelogs with a focus on multi-package repositories.

Git, GitHub, and CLI Tools

Simple iframe widget to add a 'Star this on GitHub' button with stargazers and a star counter.

The missing monitoring tool for your CI pipeline. A clear and cool view for the status of your GitHub Actions workflows. Currently with GitHub integration and more coming later.


A scalable monorepo manager for the web that makes life easier for JavaScript developers who build and publish many packages from a common Git repo.

A command line note-taking, bookmarking, archiving, and knowledge base application with plain-text data storage,  encryption, filtering and search, and lots more.

Firefox Reader View as a Linux command line tool.

A full application environment for every pull request – before you merge to main.

Copybara Action
A GitHub Action for transforming and moving code between repositories.

Open-source uptime monitor and status page, powered entirely by GitHub Actions and Issues.

A CLI tool that helps you prepare images during frontend development. It can compress PNG, JPEG, GIF and SVG lossy and lossless and create WebP versions for raster images.

Git Exercises
Platform to learn and practice Git and discover features you might not have been aware of.

A free IFTTT/Zapier alternative for developers. Automate workflows for developers based on GitHub Actions.

GitHub CLI
GitHub’s official command line tool is now at version 1+.

A Tweet for Thought

So what's the incident that defines your pandemic worklife? Here's Jessica Winter's.

A Tweet for Thought

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.

Before I Go...

Apparently Tabloid is a real programming language – a Turing-complete language for writing programs in the style of clickbait news headlines. And you'll never believe what happened next! (Or something like that...)

Thanks to all for subscribing and reading!

Keep tooling,