mcesarczyk / awesomes

Awesome list of valuable resources and people to follow, curated by me ™

Awesomes

My personal list of valuable resources and people to follow:

• people
• videos
• tools/apps
• snippets

---

people

👷🏼‍♂️👷🏾‍♀️

architecture

• Martin Fowler
• Mark Seemann, blog
• Mathias Verraes
• Greg Young
• Kevlin Henney
• Dan North
• Udi Dahan
• Sam Newmann
• Michael Feathers
• Daniel Bryant
• Simon Brown
• Eric Evans
• Vaugn Vernon
• Bartosz Milewski
• Dino Esposito
• Kent Beck
• Anders Hejlsberg
• Alberto Brandolini
• Adam Dymitruk
• Kelsey Hightower
• Jimmy Boggard
• Tomasz Nurkiewicz
• Venkat Subramaniam
• Bob Martin, blog
• Michael Nygard
• Dan Abramov
• André Staltz
• Ryan Cavanaugh
• Titian Cernicova Dragomir
• Franziska Hinkelmann
• Rich Harris
• Sarah Drasner
• Guillermo Rauch
• Matteo Collina
• Max Koretskiy
• and me 😇

and last but not least, faces in things

Videos

📹🤔

• Vyacheslav Egorov: JavaScript Performance Through the Spyglass
  • JavaScript JIT
  • what people usually get wrong
• Philip Roberts: What the heck is the event loop anyway?
  • Async internals
  • event loop
• Jake Archibald: In The Loop
  • Async revisited, including RAF
• Tomasz Ducin: 5 Architectures of Asynchronous JavaScript
  • a walkthrough over various JS async APIs
  • callbacks, events, promises, async/await, RxJS
• Tomasz Ducin: Async Functions Awaiting You
  • deep-dive into async/await and its foundations
• Dan Abramov: Hot Reloading with Time Travel
  • introduced redux along with its devtools
• Rich Harris - Rethinking reactivity
  • Svelte challenging React with a new approach to reactivity
• David Khourshid: Simplifying Complex UIs with Finite Automata & Statecharts
  • State Machines in UIs
• Maxim Koretskyi: A sneak peek into super optimized code in JS frameworks
  • low-level optimizations in JS frameworks (including object shapes)
• Kris Kowal: A General Theory of Reactivity
  • high-level description of reactivity
  • A General Theory of Reactivity (essay)
• Tomasz Ducin: Architect's Guide to Frontend Frameworks
  • high-level comparison of frontend frameworks internals
• Tomasz Ducin: The many meanings of Inversion of Control (IoC) in JavaScript
  • IoC as an approach
  • problems solved & various implementations in JavaScript
• Pascal Precht: Angular Change Detection explained
  • change detection & NgZone
• Eliran Eliassy: Bye bye NgModules
  • design flaws behind NgModules in Angular
• Pascal Precht: Angular Elements

and last but not least, ️️⚡️ WAT ⚡️

also:

• The Problem with Time & Timezones

tools

🔨🛠🔩

online demos

• http://stackblitz.com
  • stackblitz choosing console via iframe
• https://jsfiddle.net
• https://codesandbox.io

fake online APIs

• https://jsonplaceholder.typicode.com/comments?name_like=earum
• https://dog.ceo/dog-api/documentation/
  • https://dog.ceo/api/breeds/image/random
• https://icanhazdadjoke.com/api
• https://www.thecocktaildb.com/api.php, https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita
• https://ergast.com/api/f1/2018/results/1.json, https://ergast.com/mrd/

free stock photos

• https://unsplash.com/
• https://pixabay.com/
• https://picjumbo.com/
• https://www.pexels.com/

UI design, sketches, mockups

• https://freebiesupply.com/free-sketch-websites/traders-social-network-concept-free-sketch/
• refactoring UI (tips): https://twitter.com/i/moments/994601867987619840
• https://uxmyths.com

placeholder images

• https://loremipsum.io/21-of-the-best-placeholder-image-generators/ (!)
• https://loremflickr.com/
• https://placeimg.com

icons

• Material UI ICONS
• https://simpleicons.org/
• https://streamlineicons.com/free/

emmet

extremely concise syntax that generates standard HTML (dev-friendly)

• syntax, docs
• VSCode has Emmet built-in.
• emmet cheat-sheet

use within template files:

• ul#list>li.item{item no. $}*5
• ul>li*3>a>lorem10 (lorem ipsum)

some emojis

• (╯°□°)╯︵ ┻━┻
• (┛◉Д◉)┛彡 ¡ɹǝƃuɐ¡
• ¯\_(ツ)_/¯
• emoji4fun: 🏦💰💸✨⚡🌩️🧟🔨👠🏳️‍🌈💀⚰️🥥🍕☃🎸
• flags: 🇫🇷🇩🇪🇵🇱🇪🇸🇮🇹🇳🇱🇬🇧🇺🇸

---

snippets

Improve your developer productivity with tailored code snippets used throughout your apps.

good practice:

• think about the order in which you think about your code. THe order in which you define piece by piece might make it more smooth - or more cumbersome - to achieve your goal. Define the order with ${N:ELEMENT}, where N number defines the order and ELEMENT is a default name (likely to change), best describing what this piece is. Example: ${1:AGGR}
• Declare multiple bieces with the same number: ${1:ELEMENT} ${1:ELEMENT} if you want both o change at the same time. Example below: React Component along with its props interface name

create:

VSCode's custom snippets:

• ctrl + shift + P (windows)
• cmd + shift + P (mac)

then: user snippets > javascript.json / typescript.json > add following:

{
	"Array-Reduce": {
		"prefix": "reduce",
		"body": [
			"${1:COLLECTION}.reduce( (${3:ACC}, ${2:ITEM}) => ${5:NEWACC}, ${4:INIT} )",
			"$0"
		],
		"description": "Call Array.reduce FTW!"
	},
	"Array-Reduce-Function": {
		"prefix": "reduce-fn",
		"body": [
			"${1:COLLECTION}.reduce((${3:ACC}, ${2:ITEM}) => {",
			"  return ${5:NEWACC}",
			"}, ${4:INIT})",
			"$0"
		],
		"description": "Call Array.reduce FTW!"
	}
}

or typescriptreact.json (TSX):

	"FunctionComponent": {
		"prefix": "fc",
		"description": "typed function component",
		"body": [
			"import React from 'react';",
			"",
			"type ${1:Component}Props = {",
			"  ${2:...}",
			"}",
			"",
			"export const ${1:Component}: React.FC<${1:Component}Props> = (${4:props}) => {",
			"  return <>${3:siema}</>",
			"}",
			"$0"
		]
	},