Front-end Tools: Some of My Favorite Finds of 2015

We’re just about at the end of 2015 and I’m sure you’d all agree it’s been another year jam-packed with new tools for web design and development. While doing my newsletter I’ve come across lots of interesting things, so I thought it would be cool to summarize some of my favorite finds in a year-end post.

Before I begin, I should mention:

• I can’t necessarily vouch for the quality or security of any of these tools.
• Just because I discovered them in 2015, doesn’t mean they were built in 2015 (some of them are much older than that).
• They aren’t in any particular order.
• Not all of these are necessarily “front-end” tools but I’m discussing them in that context.

So let’s get to it!

[author_more]

ai2html

Let’s start off with one that surely blew many people’s minds when it first came out. This comes from the New York Times Newsroom Developers, and it’s described as:

[A]n open-source script for Adobe Illustrator that converts your Illustrator documents into html and css.

It’s written in JavaScript and it’s added to Illustrator by dropping the .js file into the “Scripts” folder of your Illustrator installation. Once that’s done, you follow these steps:

1. Create your Illustrator artwork.
   • Size the artboard to the dimensions that you want the div to appear on the web page.
   • Make sure your Document Color Mode is set to RGB.
2. Run the script by choosing: File > Scripts > ai2html.
3. Go to the folder containing your Illustrator file and find the HTML file(s) located inside the ai2html-output folder.

You can customize the export of image formats, PNG and JPEG quality, page responsiveness, number of HTML files, and lots more. The NYTimes even maintains a collection of examples of how it’s been used from their team as well as others.

sloc

This is pretty neat. It’s a command-line tool to help you build stats on your source code. The output by default is just a simple result list but you can switch it to CSV, JSON, or CLI-table format. After installing via npm, you’ll run a command like this:

[code language="bash"]
sloc index.html
[/code]

I ran the above command on one of my projects that has a very big HTML file and here’s the result:

[code language="bash"]
---------- Result ------------

Physical : 9788
Source : 6340
Comment : 645
Single-line comment : 0
Block comment : 645
Mixed : 642
Empty : 3445

Number of files read : 1

------------------------------
[/code]

Notice the breakdown in comment types

And with the following command, which outputs in JSON format:

[code language="bash"]
sloc --format json index.html
[/code]

We get the following result:

[code language="javascript"]
{
"files": [
{
"path": "index.html",
"stats": {
"total": 9788,
"source": 6340,
"comment": 645,
"single": 0,
"block": 645,
"mixed": 642,
"empty": 3445
},
"badFile": false
}
],
"summary": {
"total": 9788,
"source": 6340,
"comment": 645,
"single": 0,
"block": 645,
"mixed": 642,
"empty": 3445
}
}
[/code]

You can also use this in a node module, via JavaScript in the browser, or as a Grunt plugin.

Walkway

With the explosion of SVG tools and resources of late, it’s only fitting to include some SVG stuff in this post. This one is an “easy way to animate SVG elements”. And I can vouch for its ease of use.

The project’s home page has an example of what you can do with this library.

It supports animation of path, line, and polyline elements and lets you define a duration value and an easing function. I was able to put together the demo below in a few minutes using some public domain SVG art.

See the Pen Walkway.js example SVG animation by SitePoint (@SitePoint) on CodePen.

While it’s true there are more complex SVG animation libraries, I’m a sucker for simplicity. Walkway does one thing really well and it’s easy to implement it.

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

by Louis Lazaris via SitePoint