How to design a component library that scales with projects, designers and developers?

Image for post
Image for post

The success of an application is not a question of technology, libraries or frameworks. In the user’s eyes, it is not the technical aspects that make the difference, but the quality of the experience and the interface. So, it is essential that everyone who is involved in developing a product can work to the best of their abilities and bring their own culture and sensitivity to the party. Creating an environment specifically structured to encourage designers and developers to work together is difficult, but worthwhile. This is because allowing these figures to work in brief and iterative cycles on a particular function or product feature optimises the workflow, as well as enhancing its quality. These results can be attained by creating a component-based system. …

Come si progetta una libreria di componenti che si adatta a progetti, designer e sviluppatori?

Image for post
Image for post

Il successo di un’applicazione non è una questione di tecnologia, di librerie o di framework: a far la differenza agli occhi dell’utente non sono gli aspetti tecnici, ma la qualità dell’esperienza e dell’interfaccia: è quindi fondamentale che ogni persona che prende parte al processo di sviluppo di un prodotto possa lavorare al meglio e contribuire con la propria cultura e la propria sensibilità. La creazione di un ambiente mirato a strutturare la cooperazione di figure professionali diverse come designer e sviluppatori è un obiettivo tanto auspicabile quanto complesso da raggiungere: permettere a queste figure di lavorare in cicli brevi e iterativi su una singola funzionalità o un determinato aspetto del prodotto non solo ottimizza il flusso di lavoro, ma ne migliora anche la qualità. …

An attempt to make Websites easier to read by users with Developmental Dyslexia through scientific results, good design practices and implementation details.

Image for post
Image for post
An ePub reader Web App with a settings panel for legibility.

Disclaimer: despite the reliability and the validity of the papers reported here, this article is not intended to be anything else than a simple way to implement research results into Web techniques. Scientific tests had not been run (yet) for reading on screen.

When we enter the field of legibility and readability in a Website we have a very large set of rules and practices to keep in mind, even if we are not specifically targeting dyslexic or low-level readers. Such rules regard the typography of paragraphs and text boxes in general, as well as layout responsiveness and the respect of color contrasts. …

A look at how you can use ES6 modules and Service Workers to launch a web app without Webpack or Rollup.

Image for post
Image for post
Typical example of a developer waiting for bundle to be ready.


🇮🇹 Also available in Italian

The ECMAScript 2015 (ES6) specification brought JavaScript and web development into a new era, made of clean syntaxes, better scaffolding of source files and a set of developer tools available in other programming contexts — like static code analysis, dependencies systems, autocompletion and more.

All of this came at a price: launching a web app in the browser can now require hundreds of node modules, a watcher to detect file changes and exhausting source rebuilds. …

Image for post
Image for post
Un tipico esemplare di sviluppatore che installa le dipendenze NPM.


La specifica ECMAScript 2015 (ES6) per JavaScript ha migliorato, e di molto, lo sviluppo di applicazioni web, consentendo una migliore organizzazione del codice e dei file sorgenti (scaffolding) e l’adozione di strumenti disponibili in altri ambienti di sviluppo (static code analysis, sistemi di dipendenze, autocompletion…).

Tutto questo ha un prezzo: per lanciare un’applicazione web nel browser, dobbiamo installare centinaia di moduli node e ricompilare a ogni modifica il codice JavaScript necessario per l’esecuzione. …


Edoardo Cavazza

Software Architect and Accessibility Consultant @ Chialab. Working on synergy between designers, developers and tools. More: WebComponents, Edtech, Typography

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store