Blockchain, Functional JS, GraphQL, TypeScript, NextJS, Tailwind, Framer.
A curated collection of tutorials, talks and tools for building performant applications.
Table of Contents
- Functional JS and Web Fundamentals
- TypeScript
- Layout & CSS
- Design Systems
- Tailwind
- Typography and Iconography
- React Hooks and Context
- Debugging
- Web Performance
- Animation
- GraphQL
- Blockchain
- Continuous Integration & Delivery
- React Native & Expo
- Contributing
- Blockmatic
These are fundamental concepts and knowledge on how the browser and javascript work. You need learn this in order to be able to develop javascript applications in a professional way.
- 🎬 How does the browser actually render a website
- 🎬 Declarative programming
- 🎬 Composition over Inheritance
- 📝 AHA Programming: Avoid Hasty Abstractions
- 🎬 Playlist: Functional Programming in JavaScript
- 🎬 React Composition & Specialization
- 🎬 What the heck is the event loop anyway?
- 📦 Jargon from the functional programming world in simple terms!
TypeScript allows you to strongly type your javascript functions to catch errors a build time and develop with confidence. The type errors are not going to get to production. The developer experience is greatly improved though VS Code intellisense.
- 📝 TypeScript for JavaScript Programmers
- 📝 JSX in TypeScript
- 📦 React TypeScript Cheatsheet
- 📦 TypeFest TypeScript Collection
The web has evolved and the modern css apis make it a lot easier to but responsive and fluid layouts. There's no longer need for column based grid systems, flexbox and css grid provide with everything you need for layout.
- 🖥 Introduction to CSS Layout
- 🖥 A Collection of Layout Patterns built using Modern CSS APIs
- 🎬 Everything You Know About Web Design Just Changed
- 🎬 Flexbox CSS In 20 Minutes
- 🎬 Basics of CSS Grid: The Big Picture
- 🎬 Flexbox vs. CSS Grid?
- 🎬 Using Flexbox + CSS Grid Together
- 🎬 CSS Grid Tutorial | Responsive Crash Course
- 📝 A Complete Guide to Flexbox
- 📝 A Complete Guide to Grid
- 🖥 Flexbox.help Generator
- 🖥 CSS Grid Generator
- 📦 Awesome CSS Grid
- 🎬 Designing for A Viewport
- 🎬 Introduction to Viewport Units
- 📝 Fun with Viewport Units
- 🎬 Layout Land Channel
- 📝 Beyond Media Queries
- 🖥 Learn CSS Grid
- 🎬 What are Design Tokens
- 🎬 Design Tokens in Figma: How to get started, today. Jan Six
- 🎬 Let's Build a Design System: Spacing Methods
Tailwind is a utility-first CSS framework, it's fast, flexible, and reliable — with zero-runtime.
- 🔊 Tailwind CSS with Adam Wathan
- 🎬 Adam Wathan - How Tailwind CSS came to be
- 🎬 Tailwind in 100 Seconds
- 🎬 What is Tailwind? (and why is it awesome?)
- 🎬 Translating a Custom Design System to Tailwind CSS
- 🎬 The Utility First Workflow
- 🖥 Tailwind - A utility-first CSS framework packed with classes
- 🖥 Tailwind UI
- 🎬 Typography Basics Explained
- 🎬 Advanced Fluid Typography (and more) by Mike Riethmuller
- 📝 Precise Control Over Responsive Typography
- 📝 Fluid Typography With vh And vw Units
- 📝 More Meaningful Typography
- 🔧 Type Scale
- 🔧 Modular Scale
- 🎬 Simple Explanation of rem & em CSS Units
- 📦 React SVG Icons
- 🎬 Requisite React: Learn how to use React Hooks, Suspense & JSX - Kent C. Dodds
- 🎬 Simplify React Apps with React Hooks
- 🎬 React.js Hooks Crash Course
- 🎬 React Hooks by Nicolas Marcora - August 2019
- 🖥 Hooks API Reference
- 📦 Awesome React Hooks
- 🎬 React Today and Tomorrow and 90% Cleaner React With Hooks
- 🎧 Realigning Your Model of React After Hooks - With Dan Abramov
- 📝 When to useMemo and useCallback - Kent C. Dodds
- 🎬 React Hook Pitfalls - Kent C. Dodds - React Rally 2019
- 🎬 How React Hooks Change The Way We Build Forms
- 🎬 React Hooks Tutorial (Custom Hooks) | Form Validation made easy
- 📝 The Iceberg of React Hooks - Sandro Dolidze
- 📝 React Hooks: Memoization - Sandro Dolidze
- 🎬 React Context & Hooks Tutorial
- 🎬 Let's hook up with React
- 🎬 Fun with React Hooks - Michael Jackson and Ryan Florence
- 🎬 useContext() + useReducer() = Magic?
- 🎬 React Hooks useContext
- 📝 React Hooks in TypeScript
- 📝 TypeScript and React Hooks
- 🎬 The useReducer Hook - Dave Ceddia
- 🎬 Why I Love useReducer
- 🖥 Thinking in React Hooks
- 🎬 useCallback Hook and React.memo to minimize re-renders
- 📝 When to useLayoutEffect Instead of useEffect - Dave Ceddia
- 🎬 React Custom Hooks
- 🎬 React Hooks: What will happen to the Container/Presenter Pattern?
- 📝 React Hooks - A deeper dive featuring useContext and useReducer
- 📝 The State Reducer Pattern
- 🎬 React Hooks useContext Tutorial (Storing a User)
- 🎬 Explore the useMemo, useCallback, and useRef Hooks in React
- 📝 State Management with React Hooks — No Redux or Context API
React and react native debugging tools.
- 📦 Devtools Cheatsheet
- 🔧 React Dev Tools
- 🔧 Pesticide Extension
- 🎬 What's New with React Dev Tools 4
- 🖥 React Devtools Interactive Tutorial
- 🖥 Flipper
- 📦 React Native Debugger
- 📦 Reactotron
Optimizing for quality of user experience is key to the long-term success of any site on the web.
- 🎬 Working with Framer Motion
- 🖥 Framer Motion
- 📦 Framer Motion demos
- 🎬 Moti - Uuniversal animation package for React Native
- 🎬 Declarative future of gestures and animations in React Native
- 📝 Canvas vs. SVG: Choosing the Right Tool for the Job
- 📦 Lottie animation view for React
- 📦 React Flip Toolkit
- 🖥 Digital Assets 101
- 🖥 Ether.js
- 🖥 SolDev
- 🖥 EOSIO Core
- 🖥 lighthouse ci
- 🖥 nevercode
- 🖥 fastlane
- 🖥 appcenter
- 🖥 firebase
- 🎬 Getting Started With Expo and React Native
- 🎬 React Native CLI vs Expo
- 🎬 Expo CLI
- 🎬 React Native CLI
- 🖥 React Native Web
- 🎬 Chen Feldman - React Native - Under the Bridge | React Next 2019
- 🎬 Walkthrough: Expo CLI
- 🖥 Awesome React Native
- 📦 React Native Fast Image
- 🎬 Why React Native Gesture Handler & Reanimated
