Fresh Resources for Web Designers and Developers (January 2016)

Many of the tools and apps for developers found on the Web evolve according to trends while some evolve to be a more pragmatic solution.In this month’s installment, I’ve decided to spend more time finding resources that may not appear to be as obviously useful, but still stand out in their respective categories.

We have a nice-looking font which may be your Helvetica Neue replacement, a JavaScript library to test touch pressure, and a handy tool for JavaScript error logging. Let’s check them out.

OverPass Font

OverPass font is a free font inspired by Highway Gothic. Highway Gothic is a widely adopted typeface in many countries for road signs due to its legibility across distance and high speeds. The OverPass Font comes in four font weights (thin, normal, semi-bold, and bold), uppercase and lowercase letters, and also can be converted into a web font.

License: OFL (Open Font License)

Pa11y

Pa11y is a tool to test your website accessibility with less of the hassle, through the beauty that is automation. You can use the command line interface or setup via the dashboard if you prefer a colorful, interactive interface. Pa11y will produce a report, showing the areas to fix if you want to improve your website accessibility for various disabilities.

More resources on accessibility:

• The Modern Web and Accessibility [Video]
• Playlist: Accesibility by Thomas Bradly [Video]
• A Look into ARIA Web Standards & HTML Apps Accessibility

PressureJS

Apple’s Force Touch basically measures finger pressure on the screen or trackpad, which can be used to add extra functionality. Developers can take advantage of this technology to add usability to their native OS X or iOS applications. PressureJS is a JavaScript library that hooks into the Force Touch APIs and allows you to apply it to your websites.

SplitJS

SplitJS is a lightweight JavaScript library that allows you to split the browser window viewport into several sections. You may have seen it commonly use in code-sharing webapps like CodePen.io, JSFiddle, or JSBin where the HTML, CSS, and JS working spaces are separated into their own sections.

FlexibilityJS

Flexbox makes arranging web layouts so much easier. Yet, since it does not work in Internet Explorer 9 and 8, web developers often have to revert to using the notoriously troublesome float property. FlexibilityJS is here so you can use Flexbox without leaving these old browsers behind.

LabellaJS

LabellaJS makes creating a labeled timeline so much easier. You have a number of options at your disposal to control the label position, direction, width, height, and the layout algorithm. It works with AMD loader such RequireJS, and can be nicely used along with Browserify and Node.js. No dependency required.

Wee

Wee is more than just another CSS framework. It is packed with lots of components to help with the building process including a built-in server, live reloading, sourcemap, minification, code validator, and static site generator. It also comes with its own JavaScript libraries with features to enhance your website’s frontend.

Grav

Grav is a flat-file-based CMS similar to Jekyll, a static site generator. Yet, it can be extended through Themes and Plugins, much like WordPress. For example, you can install to add Administrator Panel, Shortcodes, Comments, Forms, and Sitemap. It is overall a great CMS which may also be a great contender for a more established CMS.

PatternPack

PatternPack is a tool that allows you to build a system to build your website or application and share it across different projects all at once. Having a standard system is a general form of best practice: not only does it speed up your workflow, but it also makes the project more maintainable. Read the Start Guide to see how to use the tool.

OhCrash!

Debugging in JavaScript could be very tricky. Your users may experience errors which you probably did not experience during development and deployment because you already have the perfect setup. The tricky here is that the error is only logged into the user’s browser. With OhCrash you can now put the log into your Github repositories, so you are more well informed about the error.