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.

Modaal

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.

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

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.

Jam API

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.

See the Pen Using Jam API to fetch CSS Data from cssvalues.com by SitePoint (@SitePoint) on CodePen.

Of course, this example is pointless because the CSS Values website does this already. But it’s a simple way to demonstrate how Jam API works. The key part of the JavaScript is this:

[code language="javascript"]
body: JSON.stringify({
url: 'http://cssvalues.com',
json_data: '{"values": "#' + prop + ' ul"}'
})
[/code]

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:

[code language="javascript"]
body: JSON.stringify({
url: 'http://cssvalues.com',
json_data: '{"values": "#display ul"}'
})
[/code]

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.

postcss-grid-css

When I first saw this one, I thought it was a joke. But apparently it’s a real PostCSS plugin that aims to make the W3C’s new Grid Layout Module syntax absurdly simple.

Normally, when using Grid Layout, your CSS will look like this:

[code language="css"]
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
}
[/code]

But with postcss-grid-css, you instead write something like this:

[code language="css"]
body {
grid-kiss:
"+------------------------------+ "
"| header ↑ | 120px"
"+------------------------------+ "
" "
"+--150px---+ +----- auto -----+ "
"| .sidebar | | main | auto "
"+----------+ +----------------+ "
" "
"+------------------------------+ "
"| ↓ | "
"| → footer ← | 60px "
"+------------------------------+ "
}
[/code]

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.

Continue reading %Front-end Tools: My Favorite Finds of 2016%

by Louis Lazaris via SitePoint