jeremenichelli

Font loading strategy for single page applications

Web fonts bring a sense of identity to our projects and have become a crucial asset of product design nowadays, but as for static sites they can delay content display time severely, specially for slow connections.

With no effective font loading strategy, users will experiment what's call FOIT (Flash of Invisible Text) as the font files are downloading.

Instead it's preferable to go for FOUT (Flash of Unstyled Text), users will see content sooner with a font from the system and switch to the web font later.

A while ago I wrote about how to properly [load a web font in static sites][1] with a recipe which included a deferred font bundle, font observation to switch when fonts are usable, and a combination of stylesheet injection with web storage for future visits.

jeremenichelli

Faster boot up times for static sites with Rollup

Bundlers are a fundamental part of any web project nowadays. They allow us to encapsulate, share and organize our codebases better and give us access to vast collection of packages ecosystem to consume from. But did you ever wonder how the output of a bundler looks like and how it impacts your scripts runtime?

The footprint of bundlers

As modules weren't a thing on the web, tools like browserify or webpack needed to create a way for CommonJS modules to run on browsers.

The general approach was to add an overhead on top of the input code. This overhead consists in an array wrapping all the modules (local and from the npm registry) in your project and a iife (immediately invoked function expression) that kicks off the script.

jeremenichelli

KITT Release Process Draft

This draft will explain how hypothetically the release process of a new version of kitt would work if it's implemented.

PR creation process and initial setup

When an engineer, as part of the design system team or not, makes a change in the code base a new PR gets created. Commit are done following Karma's Git Commit message standard, which is how's currently managed in the repository and in all common frontend libraries from Typeform.

This is prefixing commit messages, fix for patch releases, feat for minor releases and BREAKING CHANGE footers for major releases. Along with these we have chore, test, docs and refactor which don't trigger a new version but get attached to the next released.

jeremenichelli

JSHeroes 2018 highlights

Talks I really liked

Sketching in the Browser by Mark Dalgleish

• He talked about using React rendered components in Sketch through symbols and overrides.
• Having a way to consume the design system as a style guide for a single source of truth Seek Style Guide.
• Some limitations and heavy setup to get it working:
• React

jeremenichelli

Project Title

👉 Insert project badges separated by a space (remove this comment)

Describe briefly the pupose of the project in one sentence.

👉 If for some reason you need a deeper explanation on what the project covers we suggest an unordered list starting with a strong preceding motivation like React's README (https://github.com/facebook/react/blob/master/README.md) (remove this comment)

Table of contents

jeremenichelli

(function(modules) {
  var installedModules = {};

  function WEBPACK_REQUIRE_METHOD(id) {
    // if module was already imported, return its exports
    if (installedModules[id]) {
      return installedModules[id].exports;
    }

     // create module object and cache it

jeremenichelli

(function(module, exports, WEBPACK_REQUIRE_METHOD) {
 'use strict';
  
  var action = WEBPACK_REQUIRE_METHOD(1);
  var value = action();

  exports.default = value;
});

jeremenichelli

import action from './other-module.js';

var value = action();

export default value;

jeremenichelli

(function(){
  'use strict';

  var helper = WEBPACK_REQUIRE_METHOD(0);

  var action = function() {
    var value = helper();
    return value;
  };

jeremenichelli

var webpack = require('webpack');

module.exports = {
  // your config
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};