Front-end Tools: My Favorite Finds of 2016

Another year has passed and, as we all expected, the Web Platform is continuing to explode with innovation, irritation, fatigue, and a huge influx of new tools and technologies that promise to make our lives as developers easier.

As usual, we’ve seen updates to popular tools like React and Angular, while new tools like Vue.js have come on the scene and quickly scooped up a large amount of interest.

As many of you know, because I curate a weekly newsletter that focuses on tools, I come across a preposterous amount of things in my research. Naturally, I give some attention to the popular stuff. But I also appreciate some of the lesser-noticed things that are both interesting and practical. So, just like I did last year, in this article I’ll describe some of my favorite finds of the year in the area of tools for front-end developers.

It always feels like tools featuring accessibility tend to go unappreciated in our industry, so the first one I’m including here is this flexible and easy-to-use modal window plugin.

It’s not difficult to find a modal window plugin, but it’s rare to find one that checks almost all the boxes in terms of functionality and features. This modal window behaves exactly as it’s supposed to behave – it’s responsive, it functions correctly based on user interaction (e.g. it closes when you hit ESC, among other things), it’s WCAG 2.0 Level AA accessible, accepts virtually all types of content, has full-screen support, offers callback events for before/after open and close, and lots more.

Below is a CodePen demo I whipped up to demonstrate how it can be used.

The only major drawback to using Modaal is the fact that it currently has jQuery as a dependency and it doesn’t work with jQuery’s slim build. My CodePen demo above is using jQuery 3.1.1. I also tested it in v2.0 and Modaal is supposed to work with jQuery 1.11.2 and above.

This web service could come in handy for a number of different things, not necessarily only related to front-end development. It’s described as “a service that allows you to turn any site into a JSON accessible API using CSS selectors.” So it’s a tool that lets you scrape content – but the CSS part really makes it interesting for front-end devs.

To use the API, you execute a POST request to the Jam API website, sending the URL of the website you want to scrape. The code will vary depending on if you’re using Node, Ruby, etc. For our purposes, I’ll expand on the JavaScript example they provide on their GitHub repo. Using that example, I was able to build a simple tool to let you display the possible values for any CSS property, which is scraped from my CSS Values website.

Here I input the URL of the website I want to scrape, then I use a CSS selector to determine what part of the page to grab. So the above JavaScript would compute to the following if the user enters the display property:

Having built the site myself, I know that every CSS property’s section has an ID that matches its property’s name. And I also know that each property lists its values in an unordered list. So grabbing those values is trivial with a useful service like this as long as you know the structure of the HTML.

Yes, you’re seeing that right. You essentially draw your website’s layout using ASCII characters as a value of the grid-kiss property. The plugin then processes the code to the valid CSS equivalent similar to what’s shown in the first code block.

The documentation includes a live playground where you can try out the syntax. Developers are encouraged to toggle the insert key on their keyboard and use the multi-cursor feature of their text editor to make grid drawing more efficient.

I’m not a PostCSS user, so I haven’t actually used this one other than fiddling around with the playground. Regardless, this still made my list for the sheer ingenuity.

HTML email is booming and, as you’ve probably noticed, there are lots of resources and tools being released every month to help with responsive email newsletter design and coding. MJML app is a native desktop application that allows you to create and edit responsive HTML emails using MJML, which is a custom markup language framework that compiles to email-compatible HTML (i.e. nested table code).

Both the framework and the app were released early this year, and the app is available on Windows, OSX, and Linux. The editor has lots of themes to choose from and features a split-screen view with live preview.

That would then render to the valid HTML, which you can see in this Gist. It’s pretty messy, but that’s what makes a language and application like this so useful – you don’t have to worry about making things compatible, it will do all the work for you.

The app allows you to export as MJML or HTML, and you can quickly save your templates as anonymous Gists (I don’t see a way to hook it into your GitHub account, but that would be nice).

This is an official tool from the ChromeDevTools team that allows you to easily view and share URLs for your DevTools Timeline traces.

The Timeline tab in Chrome’s DevTools allows you to record and analyze your web app’s activity, from which you can investigate potential performance issues by means of JavaScript profiling, painting, and more.

After you capture some timeline data (either by refreshing the page with Timeline open or by hitting “Record” and interacting with the page), you’ll see detailed graphics and data based on what was captured.

When you right-click on the timeline, you’ll notice there are options to “Load Timeline data” and “Save Timeline data”. The “Save…” option will export the timeline data as a JSON file. You can then save that data to Dropbox, a GitHub Gist, or Google Drive so you can share the data with others. Very handy for sharing Timeline data with remote workers and colleagues.

This tool is as simple as it gets. If you do any amount of JavaScript debugging, chances are you’re utilizing console.log messages. This is more useful than doing annoying alert() stuff, but it’s still a little tedious to have to open the console every time you want to do a simple log.

Notification Logger converts your console.log messages to desktop notifications using the Notification API. After you initialize it using logger.init, you can log messages via desktop notifications only, or simultaneously via both desktop and console. Then you can revert back to normal console.log functionality by calling logger.destroy.

This makes sense not only because you don’t have to open the console to view your log messages, but the notifications are separate from the browser window so you don’t have to undock the DevTools to get your original window size.

This one has had some attention on Hacker News, and there was a little bit of debate over how useful it is. It’s described as ‘Ajax with attributes’, which will immediately grab the attention of those who like the ease of use of libraries that hook into HTML and require less JavaScript.

The library works by means of predefined ic-* attributes that you add to your HTML elements, a full reference of which is available on the site.

For example, you can use attributes like ic-target and ic-get-from to create an inline click-to-edit UI; use ic-history-elt to add URL/history support; use ic-prepend-from and ic-poll to create a pause/play UI, and lots more described and demoed on the examples page.

The one drawback to the library is the fact that it relies on jQuery (looks like 1.10.2+ support). But I’m guessing this isn’t such a big deal because the target developers for this sort of project are probably similar to those using jQuery.

Intercooler promises to allow you to add Ajax to an existing app “incrementally without rewriting everything” and will work unobtrusively alongside any back-end technology or other JavaScript frameworks.

Louis has been involved in the web dev industry since 2000, and is a co-editor of the HTML/CSS content on SitePoint. He blogs at Impressive Webs and curates Web Tools Weekly, a newsletter for front-end developers primarily focused on tools.