Sergey ufocoder

Материалы к докладу "Анимации в браузере для самых маленьких"

CSS-анимации

01. Индивидуальные свойства transform

Полезные ссылки:

02. CSS animation

Примеры:

Приёмы оптимизации кода по скорости

Организационные

Культура разработки performance-first: https://tonsky.me/blog/performance-first/
Бюджет скорости: https://wp-rocket.me/blog/performance-budgets/
Performance mantra: http://www.brendangregg.com/blog/2018-06-30/benchmarking-checklist.html

Не зависящие от языка и его реализации

Rosetta Code - реализации задач на разных языках: http://rosettacode.org/wiki/Collections
Статьи по основным структурам данных:

1 Software Design for Flexibility

Новая книга от одного из авторов культовой SICP (Gerald Jay Sussman) и principal author of Scheme (Chris Hanson) - «Software Design for Flexibility. How to Avoid Programming Yourself into a Corner». Авторы задаются «извечным» вопросом о гибкости кода и как ее достичь. Судя по оглавлению речь пойдет о различных техниках и подходах от комбинаторов до DSL и динамического программирования. Звучит очень интересно! https://mitpress.mit.edu/books/software-design-flexibility.

https://t.me/tripovozkiknig/62

2 Domain Modeling Made Functional

Книга про то как делать DDD методами функционального программирования (на F#, но многие аспекты применимы к ЯП без статической типизации)

Код на React и TypeScript, который работает быстро

React

Документация по React.memo: https://reactjs.org/docs/react-api.html#reactmemo
Документация по useState: https://reactjs.org/docs/hooks-reference.html#usestate
Исходный код ReactFiberBeginWork: https://github.com/facebook/react/blob/56e9feead0f91075ba0a4f725c9e4e343bca1c67/packages/react-reconciler/src/ReactFiberBeginWork.new.js#L3219
React.js pure render performance anti-pattern: https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f
Avoiding unnecessary renders with React context: https://frontarm.com/james-k-nelson/react-context-performance/
The Secret parts of React New Context API: https://medium.com/@koba04/a-secret-parts-of-react-new-context-api-e9506a4578aa
Why Did You Render: https://www.npmjs.com/package/@welldone-software/why-did-you-render

CodePen Collection

Page Layout

Items list variations

A Type of Programming
Algorithm Design with Haskell
Beginning Haskell: A Project-Based Approach
Developing Web Apps with Haskell and Yesod
Functional Design and Architecture
Get Programming with Haskell
Haskell Book
Haskell Cookbook
Haskell Data Analysis Cookbook
Haskell Design Patterns

	/**
	* An entity is just an ID. This is used to look up its associated
	* Components.
	*/
	export type Entity = number


	/**
	* A Component is a bundle of state. Each instance of a Component is
	* associated with a single Entity.

	import { createReadStream } from 'fs';

	async function * splitLines(inputStream) {
	let carry = '';

	for await (const chunk of inputStream) {
	const lines = (carry + chunk).split('\n');
	carry = lines.pop();
	yield * lines;
	}

	import { Suspense, useLayoutEffect, useRef, useState } from 'react';

	type IFrameProps = React.ComponentPropsWithRef<'iframe'> & {
	fallback?: JSX.Element;
	};

	export function IFrame(props: IFrameProps) {
	const { fallback, ...rest } = props;

	return (

	'use strict';

	const myArrow = () => {};
	const myFn = function () {};

	class MyClass {};

	const isArrowFunction = (fn) => {
	if (typeof fn !== 'function') {
	return false;