If you have been following the monthly Hot Web Dev magazine you will find the latest recommended development tool in each edition. The tools over the years vary from Open Source, JavaScript UI frameworks, server tools, AI, CSS, desktop and web apps. Here is the list of the tools chosen for every month during 2023 with updates on new features.
Vuestic UI is a framework with over 60 components which supports Vue and Nuxt. Since the tool of the month in January 2023, the latest version includes an experimental dev tool for editing component props, slots and code into your application in dev mode. Another compiler feature, CSS layers allows users to override UI styles. Tailwind CSS has been incorporated more tightly into the build and the release of Vuestic admin, offering administrative templates is a new and exciting feature.
Kodezi, an AI Developer tool, is touted as Grammarly for code. It can convert code to different programming languages, debug, auto-optimise, auto-comment and create docstrings for your code. You can use it as a standalone web editor inside your browser or as a Visual Studio Code extension. There are plans available including a free limited account, which gets you 50 free credits, per month. Other plans start from USD 6.99 when paid annually which offers 8,000 credits.
Kodezi CLI is a command-line tool for creating easy-to-read documentation for your API. This is separate from the developer tool and is available on a free 7-day trial.
Featured in the March edition, Galileo AI can generate an editable UI design by simply entering a text prompt or uploading an image. It’s compared to the Copilot for interface design and is one of the latest AI tools. Each design is fully customisable in Figma. If designing is your weakness then this tool is definitely for you. A standard plan costs USD 16.00 monthly and includes enough credits to generate 120 designs.
Flowbite is an open-source Tailwind CSS component library with over 600 UI components, sections and pages. Whether you need a hero, a project portfolio or a customisable navbar Flowbite has many items available for free.
One of its best features is easy integration into an existing project with support for vanilla JavaScript, React, Vue, Svelte, Astro and many more. Since it was featured on the April edition of Hot Web Dev Flowbite has added integration with Meteor JS, Angular and Laravel and has support for right-to-left (RTL) content layout. New components include a chat bubble and copy-to-clipboard feature. There is a pro version available for designers and developers starting at USD 159, but for most people, the community edition would be suitable.
CSS Toaster, built using React, is an open-source pure CSS 3D editor. Every model uses only HTML and CSS and you can export your models to JSON and import them back in when needed. Although fun to play with, It can be quite a learning curve.
Starlight is a document generator built on top of the hugely popular Astro, a static site generator (SSG). As with Astro, you can integrate libraries such as Tailwind and even include components from your favourite front-end frameworks like React or Svelte.
As for the markup you can use Markdown, Markdoc and MDX. By default, it includes site navigation, search, internationalization, SEO, dark mode and more. Currently, it’s in beta so there may be bugs but with a strong framework behind it, it’s going to kick ass!
SonarLint is an advanced linter that encourages using clean code when programming. It supports all major programming languages including C++, Java, Python, TypeScript and JavaScript. It works on all popular software including Visual Studio Code, Eclipse and JetBrains IDEs. It offers you real-time analysis to catch bugs and mistakes. There are over 5,000 rules covering a wide range of issues, the extension can help you learn to write better code.
If you are privacy-focused then you will like the tool of the month. Google Fonts no more, switch to Bunny Fonts instead. The open-source fonts platform is a privacy-first service that offers zero tracking and logging and complies with GDPR laws.
As a drop-in replacement for Google Fonts, the fonts are free to use in commercial and personal projects. Some fonts have a different license that requires an attribution but this is stated within the font family page. The API is as simple as Google Fonts, so perhaps it’s time to switch.
The tool of the month is an alternative to the Node Server. Bun is a drop-in replacement for Node. Bun is built using JavaScript Core, which powers the Safari web browser, whereas Node and Deno use the V8 engine that you will find in Google Chrome. Since Bun was featured in September 2023 hot web dev it now supports Windows 10 and above.
The JavaScript runtime and toolkit speed boast up to 30x faster than Yarn and 29x faster than NPM when installing packages. The built-in package manager installs any node packages in a central place, so there is no need to have node_modules folders in each of your projects.
Some notable other features of Bun include out-of-the-box support for TypeScript and JSX. You can run it as a package manager with its built-in bundler and transpiler. Therefore, there is no need to install additional bundlers such as NPM or Yarn. Try Bun, If you want speed and performance in your development environment.
PHPSecure is an online browser-based scanner that scans your code for vulnerabilities and gives you a detailed security report on how to fix them.
PHP Secure’s scanner can analyze CMS platforms such as WordPress, Drupal, and Joomla, as well as web applications built using PHP, including the Laravel framework.
Furthermore, it scans your code for various vulnerabilities, including XSS, SQL, directory traversal and Remote Code Executions.
Since featured on the October 2023 edition of Hot Web Dev their website is currently unavailable. To stay updated you can find more information on product hunt.
Pieces is a code snippet manager with copilot integrated into the desktop app. Its multi-platform features extensions for Visual Studio Code, JetBrains, Chromium-based browser extension, Obsidian, MS Teams, Jupyter and NeoVim in the latest version.
Snippets can be saved through the extensions, copied from images and generated through copilot. You can add your projects and it will scan through and find snippets to save. Since featured in Hot Web Dev November 2023 Pieces has support for ten new Large Language Models (LLM), has better syntax highlighting, a new power menu and custom actions among new features. You can sign up for free but there has been talk of a subscription model coming soon.
MarkWhen is a project management creation tool for project and visual timelines using Markdown. It is currently available as a web app with a downloadable version planned for the future. The offline version features a calendar, maps, Gantt views, a CLI and a VS Code extension. A personal license to use the Meridiem editor is available for USD 10.00 and USD 18.00 if used for your work. Both have real-time collaborative editing, custom links and a future upgrade that features email notifications.
Over the years tools have come and gone due to browsers introducing more built-in options or the what was popular framework is no longer the most used. It’s hard to keep track sometimes. If you have a recommendation for the top tool of the month for future editions of the Wow magazine you can get in touch using the contact form or message me on social media.
Welcome to Hot Web Dev August 2024, featuring the latest technology and web development news.… Read More
Welcome to Building an Awesome Daisy UI WordPress Theme - Part 4. Daisy UI is… Read More
Welcome to Hot Web Dev July 2024, featuring the latest technology and web development news.… Read More
In 2023 I revamped my WordPress theme to include Daisy UI. In this article, I… Read More
Welcome to Hot Web Dev June 2024, featuring the latest technology and web development news.… Read More
Daisy UI is an awesome selection of Tailwind components for your next WordPress classic theme.… Read More