My personal list of valuable resources and people to follow:
👷🏼♂️👷🏾♀️
- 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
- Franziska Hinkelmann
- Rich Harris
- Sarah Drasner
- Guillermo Rauch
- Matteo Collina
- Max Koretskiy
- and me 😇
and last but not least, faces in things
📹🤔
- 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 ⚡️
🔨🛠🔩
- https://jsonplaceholder.typicode.com/comments?name_like=earum
- https://dog.ceo/dog-api/documentation/
- 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/
- https://freebiesupply.com/free-sketch-websites/traders-social-network-concept-free-sketch/
- refactoring UI (tips): https://twitter.com/i/moments/994601867987619840
- https://uxmyths.com
- https://loremipsum.io/21-of-the-best-placeholder-image-generators/ (!)
- https://loremflickr.com/
- https://placeimg.com
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)
(╯°□°)╯︵ ┻━┻
(┛◉Д◉)┛彡 ¡ɹǝƃuɐ¡
¯\_(ツ)_/¯
- emoji4fun: 🏦💰💸✨⚡🌩️🧟🔨👠🏳️🌈💀⚰️🥥🍕☃🎸
- flags: 🇫🇷🇩🇪🇵🇱🇪🇸🇮🇹🇳🇱🇬🇧🇺🇸
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}
, whereN
number defines the order andELEMENT
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"
]
},