Richard Feldman rtfeldman

Default

Powerlevel10k

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

This is a proposal for a lightning talk at the Reactive 2015 conference.

NOTE: If you like this, star ⭐ the Gist - the amount of stars decides whether it makes the cut!

The Joy of Composition

Why stateless rendering is pure bliss

React just got stateless components, meaning that they are in essence pure functions for rendering. Pure functions make it dead simple - even fun - to refactor your views

Star this gist to see the talk at ReactiveConf 2016.
Retweet to spread the word.
Have a look at this blog post to see other proposals.
Try elm-search to see what this is all about.

An API search engine in Elm for Elm

Elm is a statically typed functional language that compiles to JavaScript. It's well-known for its developer experience: the compiler provides nice error messages, the package system enforces semantic versioning for all published packages and makes sure every exposed value or type has some documentation and type annotations.

Lightning Talk proposal for ReactiveConf 2017 http://www.reactiveconf.com #ReactiveConf

Porting Prezi to Elm in 99 lines of code

Elm is a statically-typed functional programming language. Its compiler produces safe JavaScript which is guaranteed to be free of runtime exceptions. Moreover Elm is packed with a bunch of powerful abstractions which let us build visual and reactive Web applications in a few lines of code.

As an example, I show the implementation of a simple framework for building Prezi-like presentations. It's just 99 lines of code!

	<html>
	<!--
	This is an example of how to make browsers
	offer to remember password and later fill in those passwords
	for dynamic login forms.

	To make the browser offer to remember passwords the form should be actually submitted.
	Since we are handling login with AJAX we don't want the form to submit, so we are still submitting it
	into a dummmy iframe with dummy URL.
	It's good idea to actually create empty dummy.html file, otherwise you'll flood you error.log with 404s

	-- Generates a SQL query that validates that none of your foreign key
	-- constrainted columns are invalid (values that don't exist in the column that
	-- defines valid values).
	-- The query returns a list of foreign key constraints and the number of
	-- violations present. If you want this query to return all constraints then
	-- you can lop off the 'foo WHERE count > 0' below, this'll cause it to return
	-- all foreign key constraints and the number of violations, even when 0.
	SELECT 'SELECT * FROM (' \|\| string_agg(query, ' UNION ') \|\| ') foo WHERE count
	> 0;' FROM (
	SELECT 'SELECT count(*), ' \|\| ''''\|\| constraint_name \|\| '''' \|\| ' FROM ' \|\| table_name \|\| ' WHERE ' \|\| column_name \|\| ' NOT IN ( SELECT ' \|\| foreign_column_name \|\| ' FROM ' \|\| foreign_table_name \|\| ')' query