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!
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.
- 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 Modeis set to
- Run the script by choosing: File > Scripts > ai2html.
- Go to the folder containing your Illustrator file and find the HTML file(s) located inside the
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.
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:
I ran the above command on one of my projects that has a very big HTML file and here’s the result:
———- Result ————
Physical : 9788
Source : 6340
Comment : 645
Single-line comment : 0
Block comment : 645
Mixed : 642
Empty : 3445
Number of files read : 1
Notice the breakdown in comment types
And with the following command, which outputs in JSON format:
sloc –format json index.html
We get the following result:
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
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%
LEAVE A REPLY
You must be logged in to post a comment.