An aerial view of a path leading to the sea.
Image caption
Photo by Alex Siale on Unsplash

We bounce around a lot of new ideas and interesting articles within the team. We thought we would share some of the things the frontend developers are excited about at the moment. So here goes, the 1xINTERNET frontend links mashup #1 …

Submitted by martin on Wed, 07/11/2018 - 14:59
A drone shot of an intersection with an overpasses
Photo by Edouard Ki on Unsplash

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.

An aerial view of a waterway in a city.
Photo by Geran de Klerk on Unsplash

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.

An aerial view of a green city.
Photo by Nicolas Van Leekwijck on Unsplash

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.

An aerial view of a plane
Photo by Thana Gu on Unsplash

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.

An aerial view of Kuala Lumpur
Photo by Izuddin Helmi Adnan on Unsplash

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.

Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Baddý Breidert

»Let's talk about your project and how we can help!«

– Baddý Breidert M. Sc., CEO

Phone: +49 69 976 711 50
Email: office@1xinternet.de