Talks & Live coding

Modern SSR Streaming using Web Standards

Code

Few things are more annoying than waiting for a heavy webpage to load and not seeing any visual progress.

In this talk we’ll examine how popular frameworks perform SSR Streaming, while showcasing a novel approach using Declarative Shadow DOM to load webpages progressively, out of order, without JavaScript, using Server-Side rendering and web standards.

Waterbed Code

video

In the mid-1980s, Larry Tesler stated that “every application has an inherent amount of complexity that must be dealt with, either in product development or in user interaction”.

This adagio is also known as the WaterBed theory and is mostly referenced in product design. However, I believe that it equally applies to any type of “interface” between an author and its consumers, such as UI components, functions, API endpoints, and more.

The Evolution of Scalable CSS

slides

video

CSS is easy to learn but challenging to master. Writing and maintaining a large CSS codebase requires constant effort, strict rules, and proper tooling.

This talk is a well-researched chronicle describing how CSS tools and techniques have evolved during the past 20 years. The goal is to present an objective view of the current and future state of writing maintainable CSS at scale, dissecting the weapons and tactics at our disposal in fighting against CSS entropy.

A thorough analysis of CSS-in-JS

video

slides

Docs

There are more than 50 different CSS-in-JS libraries out there and each of them provides a unique set of features.

Instead of reviewing each individual library, we’ll analyse the various features that these libraries have to offer, to better understand what approach better suits a specific use-case.

i18n & l10n

video

slides

Code

This talk explains the difference between Internationalization and Localization and how to implement translations and pluralisations using i18next.

We'll also take a look at the ECMAScript Intl standard and how to use its APIs to apply localised formatting to numbers, currencies, dates and times.

Simple vs. Easy

slides

video

Simple solutions usually require a lot of effort during their usage, but they also provide a high level of control. Complex solutions are usually easy to use, but retain the control for themselves. This theory applies both at high-level architecture and also at low-level, day-to-day code design.

We'll explore different methods for tackling software complexity, by deeply understanding our users and deciding where to place the control: in the implementation, or in the consumer.

CSS layout tricks

Code

This presentation walks through 3 different layout examples using CSS grids. We'll start by focusing on markup semantics, then sprinkle some lesser known CSS properties to implement solid and flexible layouts.

Game of Life and Performance

Code

This is a 2-part talk. The first part is an introduction to John Conway's Game of Life and some of it's practical applications today. The second part walks through an implementation of Game of Life in React.

We'll measure rendering performance and code execution performance, identify bottlenecks and optimize our solution to run at 60fps.

Memoization in React

slides

Code

React is fast enough, until it becomes slow. In this talk we'llexamine the limitations of React's rendering performance.

We'll take a look at different situations when rendering bottlenecks can occur, measure rendering performance using React Profiler and optimize it using React.memo(), useMemo() and useCallback().

The False Dichotomy of UI Development

We usually talk about 2 different types of Front-End/UI developers: the designer type focused on HTML & CSS, and the engineer type focused on JS and frameworks. This dychotomy matches perfectly the difference between client facing websites and back office applications.

But, when dealing with wep apps that are also client facing, we witness a blend of design and engineering skills that are required to build such UIs.

Isolated Components Driven Development

slides

video

This talks describes the challenges of developing UIs that need to communicate with external APIs. Using tools such as React Styleguidist or Storybook can help us to eliminate the need for an integration, enabling us to develop components in isolation, outside the application.

Bridging Swift and React Native

video

This is a live coding session based on my Ultimate Guide for Swift in React Native. We'll create a native module in Swift and implement a React Native bridge, allowing us to exchange data back and forth between JavaScript code and native iOS code written in Swift.