Another year has passed, and as expected, the Web platform continues to explode with innovation, stimulation, repression, and an influx of new tools and technologies that will make developers’ lives easier.

As usual, we’ve seen popular tools like React and Angular get updated, while newer tools like vue.js have emerged and are quickly grabbing a lot of attention.

As many of you know, since I’m hosting a weekly newsletter that focuses on tools, I’ll weed out the ones that don’t make sense through my research. Usually, I pay attention to something popular. But I also appreciate things that are fun and useful under the radar. So, as I did last year, I’m going to introduce some of my favorite tools to front-end developers in this article.

Modaal

I feel that tools with accessibility features tend to be underappreciated in our industry, so I’ll start with a flexible and easy-to-use modal window plug-in.

It’s not hard to find a modal window plug-in, but it’s rare to find a tool that checks almost every box in terms of functionality and features. This modal window works exactly the way we expect it to — it’s responsive, it works correctly based on user interaction (closing when you press ESC, etc.), it has WCAG 2 AA level access, accepts almost any type of content, has full screen support, provides callback events before/after opening and closing, etc.

Here’s a simple CodePen demo I made to show how it works.

See Modaal Window Examples using Modaal on CodePen by SitePoint (@sitepoint).

 

The only major drawback to using Modaal is that it currently relies on jQuery, and that it is not compatible with the Slim version of jQuery. The CodePen demo above uses jQuery 3.1.1. I also tested it to work in V2.0 and Modaal should be compatible with jQuery 1.11.2 and above.

Jam API

This Web service can be used for many different things, not just front-end development. It is described as “a tool that allows you to convert any website into a JSON-accessible API using CSS selectors”. So it’s a tool that lets you scrape off content — but the CSS part is really interesting for front-end developers.

To use its API, you perform a POST request to the Jam API site, sending the URL of the site you want to scrape. The code will vary depending on whether you’re using Node, Ruby, etc. For our purposes, I’ll extend the JavaScript examples they provide in the GitHub directory. Using that example, I was able to make a simple tool that shows you the possible values of any CSS property, scraped from my CSS values site.

Using Jam API to fetch CSS Data from cssvalues.com by SitePoint (@sitePoint)

 

Of course, this example doesn’t make sense, because CSS value sites have already done this. But this is a simple way to illustrate how the Jam API works. The key parts of the JavaScript code are as follows:

body: JSON.stringify({
  url: 'http://cssvalues.com',
  json_data: '{"values": "#' + prop + ' ul"}'
})Copy the code

Here I enter the URL of the site I want to scrape, and THEN I use a CSS selector to decide which part of the page to scrape. So, if the user enters the display attribute, the JavaScript above calculates the following:

body: JSON.stringify({
  url: 'http://cssvalues.com',
  json_data: '{"values": "#display ul"}'
})Copy the code

Since I built the CSS values site myself, I know that each CSS property section has an ID that matches its property name. I also know that each attribute lists all its values in an unordered list. So it’s easy to grab these values with a useful tool, as long as you know the HTML structure.

postcss-grid-kiss

When I first saw this, I thought it was a joke. But apparently, this is a real PostCSS plug-in designed to make the syntax of the W3C’s new grid layout module simpler.

In general, with grid layout, your CSS will look like this:

body {
  display: grid;
  align-content: space-between;
  grid-template-rows: 120px 1fr 60px;
  grid-template-columns: 150px 1fr;
  grid-template-areas: 
  "header header "
  "sidebar main "
  "footer footer "
}

body > header {
  grid-area: header;
  align-self: start
}

body > .sidebar {
  grid-area: sidebar
}

body > main {
  grid-area: main
}

body > footer {
  grid-area: footer;
  justify-self: center;
  align-self: end
}Copy the code

But with postCSs-grid-kiss, you can write something like this:

body { grid-kiss: "+ -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- +" | "" header write | 120 px" + "-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- +" "" "+ - 150 px + + -- -- -- -- - auto -----+ " "| .sidebar | | main | auto " "+----------+ +----------------+ " " " "+------------------------------+ " "| left |" "| - footer please | 60 px" + "-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- +"}Copy the code

Yes, you read that right. You can basically draw the layout of your site using ASCII characters as the value of the Grid-kiss property. The plug-in then converts the code into valid CSS, and the result is basically similar to what is shown in the first code block.

The plug-in documentation contains a lively playground where you can experiment with its syntax. The plug-in encourages developers to click the INSERT key on the keyboard and use the multi-cursor feature of its text editor to make grid drawing more efficient.

I’m not a PostCSS user, and I haven’t really used the tool beyond playing around in the playground. Nevertheless, this still fills my list with pure creativity.

MJML App

HTML email is booming, and you may have noticed that many resources and tools are released each month to help design and code responsive email communications. MJML app is a native desktop application that allows you to create and edit responsive HTML emails using MJML, a custom markup language framework that can be compiled into email-compatible HTML (i.e., nested table code).

Both the framework and the application were released earlier this year, and the application is available in Windows, OSX and Linux versions. The editor has many topics to choose from and features split screen views and live previews.

Here is a simple example of MJML syntax:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>

          <mj-text>Testing</mj-text>

        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>Copy the code

That code is then converted into valid HTML, which you can see in this Gist. The language is still pretty messy, but that’s what makes languages and applications like this so useful — you don’t have to worry about compatibility, it does all the work for you.

The app allows you to export as MJML or HTML, and you can quickly save your templates as anonymous Gist (I don’t see a way to link it to a GitHub account, but if you could, that would be great).

DevTools Timeline Viewer

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

The Timeline TAB in Chrome DevTools allows you to record and analyze the activity of your Web application, from which you can investigate potential performance issues through JavaScript analysis, drawing, and more.

After capturing some of the Timeline data (either refreshing the page while the Timeline tool is open, or clicking Record and interacting with the page), you’ll see detailed graphics and data based on the capture.

When you right-click on Timeline, you’ll notice that there are options to “load Timeline data” and “Save Timeline Data.” “Save…” Option exports the Timeline data as a JSON file. You can store your exported data in DropBox, GitHub Gist, or Google Drive to share it with others. This is a convenient way to share Timeline with remote workers and colleagues.

You can use Gist to see an example of the data I’ve exported here. If you’re not familiar with Chrome’s DevTools Timeline, this is a good place to start.

Notification Logger

This tool is the simplest tool that can achieve the same function. If you do any JavaScript debugging, you will most likely use console.log messages. This is more useful than annoying alert() events, but it’s still a bit boring to open the console every time you want to do a simple log.

The Notification Logger converts your console.log messages into desktop notifications using the Notification API. When you initialize with logger.init, you can log messages only through desktop notifications, or through both desktop and console. You can then return to the normal console.log function by calling Logger. destroy.

This makes sense not only because you don’t need to open the console to see your log messages, but also because notifications are separated from the browser window, so you don’t need to minimize DevTools to get your original window size.

Intercooler.js

This work has gotten some attention on Hacker News, with some discussion about how useful it is. It was described as “Ajax with attribute values,” which quickly attracted the attention of those who liked the ease of using library functions that hook into HTML and require less JavaScript code.

The library works by pre-defining IC -* attributes that add HTML elements. There is a complete interface documentation on the website.

For example, you can use properties like IC-target and ic-get-from to create an inline click-to-edit interface; Use ic-history-ELT to add URL or access history support; Use ic-prepend-from and IC-poll to create a pause/play interface. More examples are described and demonstrated on this sample page.

One drawback of this library is that it relies on jQuery (which seems compatible with version 1.10.2+). But I’m guessing that’s not a big deal, because the target developers for these kinds of projects are basically the same people as jQuery.

The second prize

Here are some more cool tools I found this year…

  • Re-build – Generates regular expressions using natural language
  • Grunt Unused – A Grunt task used to examine Unused files (.jpg,.png,.css,.js, etc.) in a project and output them to the command line with the option to delete them
  • Just – a public library that does one thing without dependencies
  • Landmarks – Allows you to browse a web page through Wai-aria Landmarks using only the keyboard or a pop-up menu
  • Atomize – Check to see how much your site can benefit from using Atomic CSS
  • Ergo Web Tools – Desktop level front-end Web development Tools for iPad
  • FLIP. Js – a helper library that automatically maps expensive and complex animations to more efficient animations
  • BackstopJS – a simple way to visually test the URL state of web applications, preventing broken layouts and other issues

What was the best front-end tool you found this year?

More articles by the author

  • HTML5 & CSS3 for the Real World
  • Introducing CSS3

If you’ve found a more esoteric tool or code base over the years that has improved workflow or simplified some development processes, feel free to share it in the comments.

I hope some of the tools mentioned in this article will help you and your team. Now we’re ready to explore the New Year of front-end tools…