Frontend link mashup #1

Articles & Resources

Primer about typography in mobile web design by Smashing Magazine: A Reference Guide For Typography In Mobile Web Design

Mobile web design needs to take into account the special limitations of small screens and a touch based interface. This primer starts from the basics and then goes deeper into the specifics of the mobile plattform. Awesome read for people new to mobile development.

Frontend performance checklist: Front-End Performance Checklist 2018 [PDF, Apple Pages]

This awesome checklist helps a team and the client on agreeing on metrics to measure and what "performance" actually means. (What matters is different depending on the project) – It really helps frontend developers to get the discussion away from very simplistic "x/100" type of metrics which are mostly not very helpful.

Discussing third party (javascript) librariesIdentifying, Auditing, and Discussing Third Parties

This is a typically contentious issue in web development. Marketing people want third party tools, web developers are typically weary of third party scripts because they normally a) don't add directly visible value to the user b) are a performance bottleneck and c) often result in single-points-of-failure which are not under direct control by the developers. This article aims to make the audit-process a little more structured and provide a framework for the decision: should this stay, or should this go.

Prototyping instead of canvas painting a web design: Saving your web workflows with prototyping

In this article the author discusses the concept of "material honesty" within the context of modern web design. He argues that instead of trying to use web technologies to a recreate a web design (which was created apriori within a graphics program) they should instead be understood as the materials out of which the web design itself is created.

DevTool power user features: Cool Chrome DevTools tips and tricks you wish you knew already

The chrome team are doing a truly awesome job with the dev tools. It is a real pleasure to have such a tool at our disposal which literally updates itself overnight and regularly surprises us with useful features to make our lives easier we didn't even know were possible. It really pays to read up on the new features now and again. We recommend following the chrome updates blog

In Defense of !important: When Using !important is The Right Choice

This is a very hotly discussed topic within our team and one we haven't found a consensus on yet. The author defends the !important selector against what he deems dogmatic demonisation and FUD. According to him there are legitimate use cases for this operator and we're not doing ourselves a favour by limiting us in this way.

Cross Origin Resource Sharing for the rest of us: CORS

This specification is very common these days and yet even though it is so ubiquitous the actual specifics and the history of its creation is are not commonly understood among developers. This awesome article aims to fix that in a very nicely written way.

Refactoring UI: Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.

This website intends to be a collection of basic rules and strategies with which non-designers can create interfaces that don't suck. This is really useful for frontend developers who don't come from a design background.

Libraries

… Since there are a lot of libraries coming and going we're going to focus on one aspect of frontend development which has often been the cause of annoying UI performance problems: Scrolling. Traditionally meddling with the scroll behaviour has been one of the strongest felt bottlenecks for website responsiveness. Therefore we've decided to focus on scroll libraries which don't impact performance drastically.

SimpleBar is a plugin that tries to solve a long time problem: how to get custom scrollbars for your web-app?

SimpleBar does only one thing: replace the browser's default scrollbars with a custom CSS-styled scrollbar without losing performance. Unlike some popular plugins, SimpleBar doesn't mimic scroll with Javascript, causing janks and strange scrolling behaviours … You keep the awesomeness of native scrolling...with a custom scrollbar!

Native Smooth Scrolling (and polyfill)

No need to use a non-native library or the old jQuery.animate approach.

basicScroll: Standalone parallax scrolling for mobile and desktop with CSS variables.

basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want.