PerfTool: Display Performance Statistics

Performance
Excerpt

Collect various information about your website and displays it in an easy-to-digest manner on the reports page. This is a npm package to display statistics about your web pages, including Google PageSpeed Insights score, resources count, recommendations how to fix performace issues, html errors and many more in one custom web page. This package mainly…

Web Fonts Performance by Bram Stein

Preso/Video
Excerpt

This is the third talk in a set of three talks on Visual Performance delivered on April 1, 2016 at Fronteers Spring Conference in Amsterdam Web fonts are great. They are also be really bad for performance because they block rendering. You may have experienced this on a slow cellular network. Staring at a blank…

Front-End Developer Handbook

Resources
Excerpt

This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it. It is specifically written with the intention of being a professional resource for potential and currently practicing…

WebCodeTools: HTML/CSS Code Generators

Codes
Excerpt

Web Code Tools is a powerhouse of tools for making HTML/CSS easy. It includes many amazing tools for CSS3, HTML5, Microdata, Meta Tags, Facebook Opengraph, Twitter Card etc. CSS 3 generator includes animation, background gradients, border radius, box shadow, layout, transitions and many more. Similarly HTML 5 generators includes wide variety of elements, attributes etc. The website…

Frend: accessible, modern front-end components

Codes
Excerpt

Frend components are modest and dependency-free. They are built with web standards as a priority and aim to avoid assumptions about tooling or environment. Care has been taken to make sure each component is compliant, keyboard navigable and properly interpreted by assistive technologies. The purpose of Frend is to offer ready-to-use components for projects. These…

Branding: a 14 style font family

Fonts
Excerpt

Branding is a sans-serif spurless typeface with a medium-large x- height, slightly wider horizontal proportions, straight curves and convex terminals. This font is well suited for logotypes, isotypes, short text, etc. Branding comes in 7 weights, ranging from thin to black, with matching italics and includes a set of 544 characters that supports 128 different…

Bedrock, a WordPress boilerplate

WordPress
Excerpt

Bedrock is a new WordPress boilerplate with modern development tools, easier configuration, and an improved folder structure. It’s not a theme, it’s a way to install, configure, and manage WordPress with security and modern development practices in mind. You’ll end up with a self-contained WordPress project that installs an explicit version of WordPress and required…

Okomito™ Typeface

Fonts
Excerpt

Okomito™ is a new sans serif (only medium weight is free downloadable) typeface inspired by the classic typefaces that were imbued with a sense of functionality, boldness and industrial strength. Trade Gothic, Helvetica, Akzidenz Grotesk, Univers and all the great grotesques were the inspirations and influences in creating Okimoto. Flexibility and neutrality are in mind…

VersionPress (WordPress + Git)

WordPress
Excerpt

VersionPress is a free and open source version control plugin for WordPress built on Git. VersionPress tracks all the actions in a WordPress site and simply offers an undo button for them. For example, if a plugin update failed, the undo button reverts its files and any database changes the plugin might have made. Even…