Fresh Resources for Web Developers – February 2016

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.

tools for designers developers

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.

OverPass Font

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.

More resources on accessibility:

OverPassFont Cover

Pa11y

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.

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.

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

PressureJS

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.

App with pressure touch function

SplitJS

Grav is a flat-file-based 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.

Split Screen in FiddleJS

FlexibilityJS

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.

Example of Web App fully built with CSS Flexbox

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.

Timeline of Star Wars releases created with LabellaJS

Wee

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.

Wee Framework Homepage

Grav

License: OFL (Open Font License)

Grav CMS Homepage

PatternPack

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.

Pattern Pack Homepage

OhCrash!

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.

Image of OhCrash! Error Report Example.


Leave a Reply