DEV Community: Louis Lazaris

Web Dev Tools of the Week (No. 4)

Louis Lazaris — Tue, 03 Oct 2023 06:46:04 +0000

The latest issue of my newsletter, which went out last week, can be found here. Below is a brief roundup of some of my picks for the week.

Music-related Tools

These aren't developer tools, per se, but the intro of this week's newsletter features some of my favourite music-related apps. They're actually all pretty nice and easy to use web apps that may server as app inspiration or maybe you'll find them useful if you're a musician. I've listed them below:

I explain in the newsletter a little bit about how I use each of the tools.

React Plock

A tree-shakable, ultra-small npm package (less than 1kB gzip'd) that allows you to create masonry layouts in your React projects.

React Lite Month Picker

Here's something a little different and minimalist, a date picker that's nothing but a simple, customizable month picker component for React.

Iconsans

A collection of 660+ free icons in bold and line styles, designed for use Vue and React projects.

FFmpeg.app

A visual web interface for FFmpeg. Just type a phrase for what you want to do with your media file and the tool will generate the CLI command.

Configu

A simple, modern, and generic standard for managing and collaborating software configurations.

Subscribe for More

That's it for this week's small roundup of tools. You can subscribe to Web Tools Weekly for more or view the latest full issue for the complete list of new tools.

Web Dev Tools of the Week (No. 3)

Louis Lazaris — Mon, 25 Sep 2023 18:55:24 +0000

The latest issue of my newsletter, which went out last week, can be found here. Below is a brief roundup of some of my picks for the week.

Dyte Video SDK

The issue contains a full product review of Dyte's video SDK. Thanks to Dyte for supporting this week's newsletter!

Slick Grid

Not a new project, but I've never included it before and it recently was updated to remove jQuery as a dependency. It's a client-side grid library compatible with Bootstrap.

Plotteus

An open-source JavaScript data visualization library designed to help you tell better stories.

Create Chrome Extension

A scaffold/starter tool, Like create-react-app, but for doing browser extension development.

RustRover

A new IDE from JetBrains specifically designed for Rust developers. Free while in Public preview.

Momento

Not a free tool, but it's an all-in-one monitoring solution for your domains, SSL certs, DNS records, etc.

Subscribe for More

That's it for this week's small roundup of tools. You can subscribe to Web Tools Weekly for more or view the latest full issue for the complete list of new tools.

Web Dev Tools of the Week (No. 2)

Louis Lazaris — Thu, 14 Sep 2023 18:50:46 +0000

The latest issue of my newsletter went out today, but I thought I would round up a few of my favourite picks of the week. Check out the full issue or subscribe for more but for now let's look at my selections of the week.

LangUI

An open-source Tailwind library with free to use responsive components tailored for AI and GPT projects, with dark and light modes built in. Combining Tailwind and GPT seems like a very 2023 thing to do! :)

BlendIcons

This week's issue includes a few different free icon websites, including this one. It's a searchable/filterable resource of 142,000+ icons in various image and code formats and each available in different styles (bold, line, etc).

Video Thumbnail API

This is a cool open-source tool that allows you to get a thumbnail image from any public video URL at the specified time. You can access the service via the API using a URL like:

thumbnail.video/api/get?url={video_url}&seconds=${seconds}

Or directly in the browser, no login required, using the UI on the linked page.

Portfolio Template

If you're fairly new to web development and are looking for a simple portfolio template to show your work and skills, this might be a good option before you commit to something more custom. Of course, this one is customizable in itself, so you might like it as a long-term solution too.

Subscribe for More

That's it for this week's small roundup of tools. You can subscribe to Web Tools Weekly for more or view the full issue for the complete list of this week's finds.

Using the canPlayType() Method of the HTMLMediaElement API

Louis Lazaris — Thu, 31 Aug 2023 19:21:42 +0000

This short tip appears in this week's issue of Web Tools Weekly, my newsletter for front-end and full-stack web developers.

If you're dealing with varying levels of support for audio and video files in your apps, you'll want to be familiar with the canPlayType() method of the HTMLMediaElement API.

This method allows you to determine whether a browser can play a specific media type or codec before attempting to load it. This can help ensure cross-browser compatibility when using different video and audio files.

Of course, in most cases you should be pretty safe to use modern media formats, but if you need to check for support, here are a few examples.

const video = document.getElementById('videoElement');

const mediaType = 'video/mp4';

if (video.canPlayType(mediaType)) {
  console.log('Browser supports ' + mediaType);
} else {
  console.log('Browser does not support ' + mediaType);
}

The example above assumes a video element on the page, then the media type is passed in to the canPlayType() method. The method takes a single argument, a string specifying the MIME type of the media you want test.

The method will return one of 3 string values, depending on support:

An empty string, indicating it's not playable on the current device
A string containing the text "probably", indicating it's likely to play on the current device
A string containing "maybe", indicating there's not enough info to determine if it's playable on the current device

Note that the above code assumes that an answer of "maybe" means it's playable, so you'd have to adjust the code to account for "maybe", if needed, though it's probably rare to get that result.

You can also optionally pass in a codecs parameter containing a comma-separated list of codecs. Here's an example that checks for codecs:

const codecs = [
  { type: 'video/mp4', codec: 'avc1.42E01E' },
  { type: 'video/webm', codec: 'vp9' }
];

for (const codec of codecs) {
  const support = video.canPlayType(codec.type + '; codecs="' + codec.codec + '"');

  if (support === 'probably') {
    console.log(`Browser most likely supports ${codec.type} with codec ${codec.codec}`);
  } else {
    if (support === 'maybe') {
      console.log(`Browser might support ${codec.type} with codec ${codec.codec}`);
    } else {
      console.log(`Browser does not support ${codec.type} with codec ${codec.codec}`);
    }
  }
}

You can fiddle around with both of the above code examples in this CodePen demo.

You can see in the codecs example that I'm using the 'probably' and 'maybe' values in a more applicable manner.

As usual, the safest way to deal with varying levels of media support is to provide proper fallbacks in your HTML using <source> elements. But this is a decent method to keep in mind should the need arise for some specific checks for media types and codecs.

Be sure to subscribe to Web Tools Weekly for more tips like this

Web Dev Tools of the Week (No. 1)

Louis Lazaris — Thu, 24 Aug 2023 21:42:46 +0000

I write a newsletter covering tools for front-end and full-stack developers called Web Tools Weekly.

You can read the full issue here: Web Tools Weekly #527

This week I picked a few of my favourites from the issue to share with those on Dev.to...

Stashpad (sponsored)

Once in a while I do a paid review of a product, usually something related to web development or tech. This week's issue has a full review on Stashpad, a nicely designed and easy-to-use note-taking app, available on Windows, Mac, iOS, and Android.

It has a dev-friendly UI that I'm sure you'll love.

jsPlumb

This is an open-source TypeScript library that lets you 'visually connect DOM elements', so you can build flowcharts, schemas, and more. Check out examples here.

OddContrast

There are lots of contrast checkers available but this one is unique because it integrates modern CSS color formats like Oklch, sRGB, Lab, p3, and more.

You can use the tool interactively right on the page to check color combos for WCAG compliance.

Vue-Preloader

If you're a Vue developer, you'll love this component that lets you include animated loaders in your Vue projects. The website allows you to fiddle around with the different settings for the loaders, then you can preview any loader you create.

That's it for this week's tools, you can subscribe to Web Tools Weekly for more or view the full issue for the complete list of this week's finds.

Are These the Most Interesting Front-end Developer Tools for 2021?

Louis Lazaris — Mon, 11 Jan 2021 22:42:30 +0000

This article was originally published on my primary website.

When I come to the end of any given year, it’s always interesting to look back through the click-through stats for my weekly newsletter Web Tools Weekly to see which tools got the most attention.

This year wasn’t all that different from previous years. I’ve learned that clicks happen for basically one of two reasons:

Curiosity
Will Make My Life Easier

And ultimately, that latter reason is why people check out any web developer tool.

And notice the title of this post. I’m not claiming that these are the “best” or “most popular” tools (and some of them aren’t even all that new, they were just new to me). But they are possibly the most interesting, even if not necessarily the most useful.

So with that in mind, here’s a big superficial roundup of my newsletter’s 60 most-clicked tools of 2020 — and potentially the most interesting choices for 2021. I’m pretty sure you’ll find at least a few items here that you’ll find useful for a future project.

60. Pikwizard

Anything that resembles the super-popular Unsplash project is going to get a lot of clicks. This library offers over 1 million stock images and videos that are royalty free and safe for commercial use, with no attribution required.

It’s hard to see anyone uprooting Unsplash as the leader in this space, but Pikwizard seems like a good alternative if you’re looking for free stock media without needing to worry about price or giving credit. But note the main drawback to Pikwizard is the fact that “Premium” photos from Adobe are also included in searches.

59. Tailwind Starter Kit

Tailwind appears early in this list and often, not surprisingly. I’d say Tailwind is the CSS tool that’s most on the rise at the moment, so I’m constantly finding tools and frameworks associated with it in my research.

This toolkit is an open source add-on for Tailwind that features multiple HTML elements and comes with dynamic components for React, Vue, and Angular.

58. Spider

Web scraping tools always seem to do well in my newsletter, as do things like HTML to PDF conversion utilities. This one claims to be “the easiest tool to scrape the internet”. It’s not free, but a small one-time fee seems like a good investment if it’s as effective as they claim.

Just a few clicks to turn a website into organized data that can be downloaded as JSON/CSV with no coding or configuration required.

57. Van11y

This is one that wasn’t exactly new in 2020, but it was new to me. It’s a collection of customizable, accessible scripts that includes lots of stuff you probably include often in your UIs: Accordion, tab panel, carousel, tooltips, modals, and more — all built using progressive enhancement.

There aren’t a lot of components here, but since the ones included are so common, there’s enough here to make this well worth a bookmark.

56. CSS to TailwindCSS

Once again Tailwind is in the spotlight, this time with an online tool to convert standards CSS to the best possible Tailwind CSS equivalents.

I’m not entirely sure this one is going to be super practical for a lot of projects, but I’m guessing this got a lot of curiosity clicks due to the number of developers currently using Tailwind and probably just wondering what this sort of thing would entail.

55. Radius

Design systems have been a hot topic for a few years now, so this toolkit isn’t a surprise on the list.

This collection of open-source tools and libraries has the goal of helping you and your team to build a design system from scratch without all the typical roadblocks you might normally face, speeding up the zero-to-hero process that a design system often involves.

54. Sail UI

Once again Tailwind is the main focus here. This collection of basic UI components is pretty small. Personally, I don’t see anything too groundbreaking here, so the Tailwind factor probably played a major role in the initial burst of clicks for this one.

That being said, I can see this one growing and gaining popularity with some proper oversight and maintenance in the coming year.

53. Control

This has free and paid versions. The free version includes 100+ illustrations that can be customized to create the specific scene you’re looking for. Only PNG for the free version but 100% vector and compatible with AI, Figma, and Sketch for the paid versions.

You can slightly alter a particular illustration’s subject/theme and also change the style of the illustration (solid or linear). This comes from a startup called Craftwork who offer a number of different graphic-related products.

52. Public APIs

This is a directory of free public APIs for software developers. Might be a good place to look if you’re just getting started with API-based development or maybe you want some inspiration on a new product or service to build that uses one of the APIs.

Categories include Open Data, Cryptocurrency, Science, Finance, Sports & Fitness, and lots more.

51. css-media-vars

This is definitely unique in the list. If you’re already familiar with CSS variables and media queries, then you’ll be fascinated by the idea of combining the two concepts.

The page offers a live editable demo so you can see exactly how the technique works and how you might customize the various breakpoints.

50. guijs

As I mentioned at the outset, anything that claims to make life easier for developers always gets tons of clicks in my newsletter. This one literally has that as its tagline.

It’s a multi-purpose native Windows and Mac app to help you manage your development projects. Includes features for projects, package installation, script management, and more.

49. Wicked Templates

Sick of Tailwind yet? Yeah, unlikely. This is a set of four Tailwind templates are easy to customize and can be integrated with whatever your full-stack toolset is (Next.js, Vue, Laravel, Gatsby, React, etc).

Only a single template is free, but for the small price of the bundle you can have lifetime support.

48. H3

This microframework comes in at under 4KB minified and will help you build client-side single-page applications (SPAs) in modern JavaScript.

How small is it? The API is composed of just seven methods and two properties. Certainly not for every project but maybe the source code alone would be useful to learn from, should you want to delve into developing something like this in the future.

47. Line Awesome

A free alternative to Font Awesome that consists of 1300+ flat-line icons and boasts complete coverage of the main Font Awesome icon set.

Also includes the option to import into Figma, Sketch, or Photoshop.

46. BEM Naming Cheat Sheet

When I first started the newsletter, I used to include an occasional “Learning Tools” issue that would include stuff like this. While I don’t do that anymore, I decided to include this one and it did quite well.

It’s a nicely designed guide to using the BEM naming method that’s been popular among CSS developers for a number of years.

45. Embla Carousel

Carousels are always popular and get lots of clicks, so no surprise here. This one is a bare-bones, extensible carousel library with great fluid motion and swipe precision.

It’s library agnostic, dependency free, and open source so it looks like a good option for vanilla JavaScript projects.

44. Open Peeps

A hand-drawn illustration library to create scenes with people, with each drawing made available in PNG or SVG format.

You can grab some of them directly on the site or download the whole graphics package that allows you to bring it into your graphics tool of choice. Then mix-and-match for over 500,000 possible combinations of illustrations.

43. CSS Section Separator Generator

This is one of the simplest tools in the list. It’s an easy way to generate a pure CSS fancy section separator to add to your pages.

You can interactively adjust the look and size of the separator and its pattern, then grab the HTML and CSS to drop into your stylesheet.

42. Lion Web Components

A set web components that feature three things all developer want in a UI toolkit: performance, accessibility, and flexibility.

I like how each component on the demo/docs site shows you the accessibility violations (spoiler: there aren’t many) as well as the accessibility “passes”, so you can see how each component is accessible to all users.

41. Debug Visualizer

This VS Code extension has over 31,000 installs and a strong Marketplace rating, telling me a lot of people like it so far.

As the name suggest, it allows you to visualize data structures while debugging. Works best with JavaScript/TypeScript and has been tested with C#, Java, PHP, Python, and more. In theory it should work with any language you can debug in VS Code.

40. Geist UI

This open source design system features a UI library for React and Vue, providing yet another option for building modern interfaces.

The main site links to separate docs pages for both versions and there’s also a typography stylesheet and general stylesheet for a number of opinionated but elegant defaults.

39. sysend.js

Here’s another one that’s unique in this list: It’s a small library that allows you to send messages between pages that are open in the same browser.

It has no dependencies, supports cross-domain communication, and uses either HTML5 LocalStorage or the newer BroadcastChannel API — whichever one the browser supports.

38. Hero Generator

I come across lots of online generators for various front-end coding problems, but this one is a little different. It’s an interactive tool to generate a hero image header section for a web page, a common design pattern that you’ll usually reinvent over and over unnecessarily.

The page live updates as you adjust the settings, then you can grab the full CSS which you can later extend or modify even after you’ve generated it here.

37. Toy Faces

This is definitely not for every website you’ll build but if you need some fun, diverse 3D avatars for a design mockup or a full-blown project, this might work.

These 120+ avatars feature a toy-like appearance. They’re not free but you get lifetime access to new releases in the set, available in high-res JPEG and transparent PNG.

36. Halfmoon

I’m guessing this one grabbed a lot of people’s attention due to it being marketed as having a “built-in dark mode” which a lot of developers are into nowadays.

But that’s just one feature. It’s a full-blown front-end framework similar to Bootstrap with lots of components and utilities.

35. V-Dashboard

Admin dashboard starter templates and frameworks always seem to do well in my newsletter, so no surprise that this was one of the most clicked tools.

This one is built with Vite, Vue 3, Tailwind CSS, and TypeScript.

34. broider

Here’s yet another unique entry in this list. This interactive generator creates “9-patch” borders that use CSS’s border-image syntax.

You can draw on the page then copy the CSS that includes a data URI using the border images standard. You can be one of the 20 people in the world who found a use for border images!

33. Falcon

This was not a new tool but this year was the first time I’d come across it, so it gets the nod in this list. This is an open-source SQL editor for Mac, Windows, and Linux.

Supports connecting to RedShift, MySQL, PostgreSQL, IBM DB2, Impala, MS SQL, Oracle, SQLite, and more. According the GitHub repo, it hasn’t been updated for a couple of years, but I doubt that poses any major problems for something like this.

32. Neumorphism.io

Remember when Neumorphism was everywhere? Well, it still has its place. This online generator will help you interactively produce code for elements that have ‘soft UI’ (i.e. 3D box shadows and lighting).

Offers lots of fine-grained options to perfect the look you’re after.

31. Meraki UI

Another UI library and once again this is based on Tailwind CSS. Buttons, cards, forms, dropdowns, hero components, and more.

The one cool thing about this one is that it features the ability to easily switch a UI element to right-to-left (RTL), for support of RTL languages. You can try the RTL feature interactively while testing out the various component demos.

30. calcolor.co

This website provides a dedicated page for every color code with info, various syntaxes for the color (hex, RGB, etc.)

Use it to find matching color variants, learn more about color properties, or convert color values.

29. tailblocks

How many Tailwind tools are we up to now? I believe it’s 7. This one is a set of Tailwind UI components divided into 15 categories.

The categories include stuff like e-commerce, blog, CTA, footer, gallery, and lots more.

28. Good Email Code

This is the first of three HTML email code tools to crack the top 30 in this list. This is a small library HTML email components built with best practices for maximum email client support.

There’s a description for each of the components and they include a template, preheader, container, columns, button, and more.

27. Pixel Lite

This beautifully crafted, responsive UI kit based on Bootstrap 4 includes 80 components, 3 sections, 4 example pages, and an optional premium version.

Uses Sass variables so you can easily customize the look to suit your needs.

26. Coded Mails

These hassle-free responsive HTML email starters include 60+ templates divided into 6 categories, along with 12 themes.

You can preview all templates and themes on both mobile and desktop email views. Free only for non-commercial projects, but worth considering the modest price tag for the full version with extra features.

25. Big Heads

This library of illustrated heads includes a random character generator that you can then interactively customize on the fly.

Once you’ve selected your settings, the character can be included in your project with React or as an SVG (which also offers a direct URL to the customized graphic).

24. Codemap

This is yet another code visualization tool, which makes me wonder if this is something that’s in demand now.

This one is a Mac, Windows, or Linux app that lets you navigate code with a graph, visualizing function calls in an intuitive way.

23. signature.email

This is not typically the kind of tool I usually come across, but it was one of the most-clicked tools of the year.

It’s a visual drag-and-drop editor for email signatures, to help with consistent branding across team emails. You can pick from various templates, then customize as you see fit.

22. Leaf PHP

Not a front-end tool, but useful for full stack: Create clean, simple, and powerful web applications and APIs quickly.

Besides a few WordPress tools, this is probably the only PHP that I included and — surprise, surprise — it’s one of the most-clicked tools.

21. Blunt

This CSS framework is a little different: It helps with layouts and leaves your styling alone. It only provides helper classes to make positioning and responsive design easier.

The author made it to fit his own needs due to the fact that other frameworks did either too much or too little.

20. Arwes

This is definitely the coolest project in this whole list. I think the only reason it didn’t get even more clicks is due to the fact that it was already making the rounds in the industry by the time I had included it in mine.

It’s a futuristic sci-fi and cyberpunk-inspired graphical UI framework for web apps and includes some neat animations and audio, so be sure to try out the various components if you haven’t seen this one yet. Not likely you’ll use it on more than one project in a lifetime, but it’s just so fun to play with!

19. Free Illustrations

This isn’t just a single illustration pack like the others on this list, but a directory of various free illustration sites with info on license, file types, etc., so you can figure out which graphics pack is right for you.

You can filter by file type (AI, SVG, GIF, SKETCH, PNG, EPS, etc.) so it’s easy to find something that matches your needs.

18. MoreToggles.css

CSS utilities that style form elements tend to be pretty popular. This one includes a whole slew of styles for toggles that are checkboxes under the hood.

Be sure to check out the gallery that showcases all the different styles and colors.

17. PatternFly

Another entry in the design system category. This open source design system includes dozens of components and layouts.

Components are available in HTML/CSS or React, with plenty of demos and documentation to help you along.

16. Screenshot.Rocks

This is a great tool for creating attractive browser and mobile mockups in just a few clicks. Might be useful for slides in presentations.

Enter a URL to capture, then customize the device and background, then download as PNG, SVG, or JPEG.

15. Kickstand UI

This UI framework is another one built with accessibility as a focus and includes about dozens of components and utilities.

This one is well worth delving into, as it has quite a nice array of components with good documentation and demos.

14. NoDesign.dev

I’m not surprised this was as popular as it was. It’s advertised as “a collection of tools for developers who have little to no artistic talent.”

To be honest, the collection of tools is pretty standard and isn’t only for the non-artistic among us.

13. Aeon

I find lots of date picker components, so kudos to this one for making it near the top of the list.

This lightweight, dependency-free date/time picker is built with web components and can be used anywhere.

12. Frontendor

This is another type of front-end toolkit, similar in popularity to the admin dashboards: landing page UI libraries.

This one is a library of reusable HTML blocks and templates to help you build beautiful and professional landing pages quickly and easily by simply copying and pasting. Not free, but includes 100+ blocks and 6+ templates.

11. Wireflow

Here’s yet another unique entry in the list: A free online and open source tool for creating beautiful user flow prototypes.

Once you’ve dragged and dropped and customized your ‘flow’ diagram, just download the exported image. Great for presentations and you can also install the tool as a PWA.

10. Remake

This tool offers a bold promise: To help you build apps and prototypes by going straight from HTML/CSS to dynamic web app.

Includes data syncing, built-in CRUD features, built-in file uploading, built-in user accounts, and more. You’ll have to really delve into their docs to see exactly what this is all about, but like I said, the promised result is pretty bold.

9. CSS Scan Pro

I included this one in the newsletter way back in February but it’s recently been updated to version 2.0.

It’s an extension to “Inspect Element” for Chrome, Firefox, and Safari that lets you instantly get styles, font info, dimensions, animations, and selector for any element on the page. Not free, but developers seem to love it so far.

8. Web Code Tools

This is a large set of code generators that includes CSS effects (gradients, animation, shadows, etc.), HTML tools (audio, video, etc.), Microdata, Twitter Cards, and more.

As shown by a few of the entries above, developers love online interactive generators, so there’s a lot to choose from in this collection.

7. Shadows

Here’s another code generator in the top ten. This online tool is based on an article (linked at the bottom of the tool’s page) that explains how using layered shadows can provide more fine-grained control on shadow smoothness.

Pretty neat that someone was willing to bring a concept to life like this to make it much easier to use the technique that the original author came up with.

6. FAST

This offering from Microsoft is a suite of tools to build enterprise-grade websites, applications, and more.

Built with standards-based web components compatible with a number of technologies, including React, Angular, ASP.NET, Aurelia, and more.

5. CSS Scroll Shadows

This is one of my favourite finds of the year. Scrolling areas are sometimes hard to notice at a glance. This online tool lets you create shadows to make those scrollable page areas more obvious that they’re scrollable.

The tool lets you interactively adjust the background color and shadow color before you grab the code.

4. CSS Layout

This is a really great collection of popular components, layouts, and patterns made with CSS. Not exactly a framework, just individual components that don’t have any dependencies and just use pure CSS.

Consists of 91 components that you can easily customize seeing as they’re just CSS.

3. Exoteric

I’m pretty sure this one got as many clicks as it did because it was originally included under its old name: Dumbass.

Nonetheless, it’s a decent tool that lets you build components from cross-browser web standards. No JSX, no Shadow DOM, no fancy frameworks.

2. css.gg

This was the 2nd-most clicked tool of the year and was originally a CSS-only icon set that’s been expanded.

Now it includes 700+ open-source CSS, SVG, and Figma UI Icons. Available in SVG sprite, styled-components, and more.

1. Hacker UI

I’m not surprised that the #1 most-clicked tool of the year was yet another UI library. This one is React-based and was originally advertised as one that isn’t closely coupled with any kind of branding, so it’s easy to integrate it with your own project.

Interestingly, the GitHub repo says the project’s development is currently on hiatus. I hope that’s only temporary, as the interest in this one does seem to be moderately strong, showing signs of potential for a good permanent option.

What Was Your Favourite Tool of the Year?

I’m always on the lookout for new stuff so if there’s anything in particular that you’ve enjoyed discovering, using, or even something you’ve personally made, feel free to drop it in the comments or hit me up via DM on Twitter.

And be sure to subscribe to the newsletter for a weekly roundup of the latest and the greatest in front-end tools and more.