Web Tools #379 - CodeLobster IDE, CSS Tools, Build Tools, Git/CLI

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:
 

 

As well as autocomplete for HTML attributes:
 

 

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.

   

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:
 

 

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

 

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

 

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.

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

Cooltipz.css
Customisable tooltips made with pure CSS.

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

vanilla-hamburger
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.

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

filters.css
CSS-only library to apply color filters.

BVSelect
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

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

ts-eager
Fast TypeScript runner using ESBuild for eager compilation.

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

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

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

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

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

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

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

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

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

Git, GitHub, and CLI Tools

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

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

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

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

rdrview
Firefox Reader View as a Linux command line tool.

ephemeral.run
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.

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

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

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

 

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 everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly