- CSS Tricks
- Philip Walton
- ⭐Online Tutorials
- BrasilJS
- Frontend by Daniel Xavier Softplan
- ⭐Client-Side Web Development
- A friendly web development tutorial for complete beginners
- O que o mercado de Front-End espera de você?
- How browser rendering works — behind the scenes
- don’t get clever with login forms
- What Are 7 Principles Of Design?
- A free guide to HTML5 elements
- 9 basic principles of responsive web design
- Vanilla JavaScript and HTML - No frameworks. No libraries. No problem.
- WEB COMPONENTS: AN IN-DEPTH REVIEW WITH EXAMPLES
- How to Create PDFs with Node.js
- Micro Frontend Curry
- Let’s Get Graphic: A Few Ways To Draw On The Web
- Why is modern web development so complicated? A long yet hasty explanation: Part 1!
- Making Web Components for Different Contexts
- Some New Icon Sets
- If not SPAs, What?
- Components: Server-Side vs. Client-Side
- 📖PacktPub: Modern JavaScript Web Development Cookbook
- Mastering React Test-Driven Development
- ⭐Exploring JS: JavaScript books for programmers
- Building Your First Web Page
- W3S: HTML5 Semantic Elements
- W3S: All tags
- Mozzila: Elementos HTML
- All HTML5 Tags
- ⭐HTML CheatSheet
- ⭐A collection of bad practices in HTML, copied from real websites.
- How To Use HTML Semantics like a HERO
- A Complete Guide to Data Attributes
- A Complete Guide to Links and Buttons
- How we learned to draw text on HTML5 Canvas
- Dragging, Resizing and Rotating HTML elements: Fun with Web Components and Math
- ⭐HTML Living Standard
- The HTML Handbook
- Using the HTML title attribute – Updated March 2020
- 10 useful HTML5 features, you may not be using
- HTML Canvas Reference
- Getting image data from canvas
- MDN Canvas tutorial
- MDN Canvas
- HTML tips - hidden gems.
- HTML tips - hidden gems. REDDIT
- Learn about the DOM Event system through exploration
- CENTRALIZANDO COISAS
- ⭐CSS Tutorials Logic
- CSS: An Art, a Science, a Nightmare (Overview of CSS Concepts)
- Fundamental CSS for Beginners
- Mozilla Developer: CSS reference
- CSS: The Programmer’s Guide to the Stylesheet
- The best front-end hacking cheatsheets — all in one place.
- A width-responsive perfect square in pure CSS
- Dealing with platform inconsistencies as a North-Korean front-end developer
- 🎬APRENDA HTML5 E CSS3 - #1 Introdução e configuração do ambiente
- You might not need a CSS framework
- CSS for Beginners
- Set up CSS stylelint on Visual Studio Code [Tutorial]
- ⭐Centering in CSS: A Complete Guide
- 🎨Pure CSS – Lace
- 🎨Pac-Man… in CSS!
- Everyone uses CSS frameworks
- The perils of functional CSS
- ⭐CSS position explained
- CSS Overflow Property Utilization
- CSS DIV position analysis
- Ways to make elements in HTML center aligned horizontally
- 5 Simple Tips to Keep Your CSS Stylesheets Nice and Clean
- CSS Layout: a collection of popular layouts and patterns made with CSS
- Why CSS HSL Colors are Better!
- ⭐Curated library of colors and fonts for Web Developers & Digital Designers.
- ⭐CSS layout patterns
- 7 Uses for CSS Custom Properties
- What are CSS percentages?
- The Best Color Functions in CSS?
- ⭐The CSS Cascade: Or, How browsers resolve competing CSS styles
- CSS Layout Basics: HTML5 & CSS3 Elements Positioning
- ⭐CSS is powerful, you can do a lot of things without JS.
- Min and Max Width/Height in CSS
- HTML5 And CSS3: Tidbits Galore
- Why You Should Use CSS Variables: Beginners Guide
- Old CSS, new CSS
- Animations in CSS
- CSSTricks: Properties: animation
- Animate.css
- 🎬CSS Animations Series
- How To Add CSS Dark Mode To A Website
- Learn CSS Positioning
- How to Create a Simple Gantt Chart Using CSS Grid
- When CSS Blocks
- 4 Ways to Animate the Color of a Text Link on Hover
- CSS :nth-of-class selector
- LCH colors in CSS: what, why, and how?
- 98.css is a CSS library for building interfaces that look like Windows 98
- Styling Complex Labels
- CSS in 3D: Learning to Think in Cubes Instead of Boxes
- Buttons Generator
- ⭐Container Units Should Be Pretty Handy
- Designing Beautiful Shadows in CSS
- Introdução sobre Media Queries
- Mozilla: Usando Media Queries
- Using Media Queries in CSS
- Conditional Border Radius In CSS
- ⭐Flex Layout Editor
- Learn Flexbox for free
- CSS Flexible Box Layout Module Level 1
- CSS tricks: justify-content
- Mozilla: justify-content
- W3S: CSS Flexbox
- Guia Flexbox
- CSS Flexbox – Um Guia Interativo (Parte 1 – Containers)
- CSS Flexbox – Um Guia Interativo (Parte 2 – Itens)
- FlexBox ou CSS Grid?
- Pare de chutar e aprenda como funciona Flexbox #01
- Desenvolvimento para web: Flexbox
- Material UI: Flexbox
- ⭐Solved by Flexbox
- ⭐The Thought Process Behind a Flexbox Layout
- Coping with flexbox-
- ⭐flexbox-properties-playground
- CSS Grid – Um Guia Interativo (Parte 1 – Containers)
- CSS Grid – Um Guia Interativo (Parte 2 – Itens)
- CSS Grid is a Grid Framework
- Responsive Grid Magazine Layout in Just 20 Lines of CSS
- Minecraft Clone: ThreeJS, ReactJS, GraphQL and NodeJS
- Why is modern web development so complicated? A long yet hasty explanation: Part 1!
- Practical Ways to Write Better JavaScript
- 15 Common JavaScript Questions
- Pacman
- Pacman: No images
- Rest and Spread operator: Three dots that changed JavaScript
- JavaScript Destructuring ES6: The Complete Guide
- ES6 Tricks: Quick Enum & Bitwise Class Constants
- The problems of shared mutable state and how to avoid them
- Unit and Integration Testing of React/Redux Forms
- JavaScript Essentials (Concepts + Code) Frontend Development For Beginners
- Javascript Callback Functions
- JavaScript Callback Functions: An In-Depth Guide
- JavaScript Essentials (Concepts + Code) Frontend Development For Beginners
- Three Ways to Create Objects in JavaScript
- Javascript Image Compress using HTML5 Canvas & File API before Upload
- Comparing the Different Types of Native JavaScript Popups
- The Complete Reference for JavaScript Arrays
- Using Classes in JavaScript
- Using Generators in JavaScript
- 7 Essential JavaScript Functions
- Responsible JavaScript: Part I
- Responsible JavaScript: Part II
- Responsible JavaScript: Part III
- The JS library distribution dilemma: NPM or URL?
- ⭐A Brief History of JavaScript
- JavaScript Errors: An Exceptional History
- JavaScript Errors: An Exceptional History - Part II
- Closures, Private Data, and Inheritance in JavaScript
- A Guide to JSON and How It’s Handled in JavaScript
- How to Iterate Over Javascript Arrays - Performance Comparison
- How To Convert Objects to Arrays and Vice Versa in JavaScript
- ⭐Javascript tutorials
- Lodash tutorial
- ⭐Javascript Christmas
- A List of Interesting Operators in JavaScript
- 📖Deep JavaScript: Theory and techniques
- 5 things you don’t know about try-catch-finally in JavaScript
- Clean Code concepts adapted for JavaScript
- REDDIT: Clean Code concepts adapted for JavaScript
- ⭐The State of JS 2019
- ⭐How I made a 3D game in only 2KB of JavaScript
- How to Use the “Infinite Scrolling” Method in Javascript to Manage Large API Result Sets
- The JavaScript Black Hole
- ⭐Learn JavaScript by Making Digital Tabletop Games and Web Apps
- ⭐How to Build a Multiplayer Tabletop Game Simulator with Vue, Phaser, Node, Express, and Socket.IO
- 📊ES5: Entire Javascript in One Image
- Modern JavaScript Explained For Dinosaurs
- The Flavors of Object-Oriented Programming (in JavaScript)
- The Binding Concept in Javascript
- VANILLA TODO: A case study showing that vanilla web development is viable
- The “Live DOM” Is Not “Slow”, “Bad”, Or “Wrong”. Web Developers Are.
- A few handy JavaScript tricks
- Back to Basics: Event Delegation
- 📖JavaScript for impatient programmers
- JavaScript Tips
- How to Use else if in JavaScript with Examples
- Graph Data Structure Implementation in JavaScript
- The core of JavaScript; Prototypes
- 28 JavaScript Skills a Qualified Intermediate Front-End Engineer Needs to Master
- 01/10 Tudo é Objeto - JavaScript Antes do Framework (React ou Vue.js)
- 02/10 Arrow Function - JavaScript Antes do Framework (React ou Vue.js)
- 03/10 Destructuring - JavaScript Antes do Framework (React ou Vue.js)
- 04/10 Rest e Spread - JavaScript Antes do Framework (React ou Vue.js)
- 05/10 Modules - JavaScript Antes do Framework (React ou Vue.js)
- 06/10 Fetch - JavaScript Antes do Framework (React ou Vue.js)
- 07/10 Async / Await - JavaScript Antes do Framework (React ou Vue.js)
- 08/10 Array - Map, Filter e Reduce - JavaScript Antes do Framework (React ou Vue.js)
- 09/10 Expressões - JavaScript Antes do Framework (React ou Vue.js)
- 10/10 Class - JavaScript Antes do Framework (React ou Vue.js)
- A Simple Introduction to the ES6 Map Data Structure in JavaScript
- Comparing Objects in JavaScript
- Serialization and Deserialization
- Why You Shouldn’t Use JSON.stringify to Compare Objects in JavaScript
- Why You Should Learn JavaScript Principles First (Not the Hottest Frameworks)
- The Comprehensive Guide to Operators, Expressions, and Statements in JavaScript
- Javascript Basics and Fundamentals
- A Beginner’s Guide to google-map-react
- JavaScript Promises: Zero To Hero Plus Cheat Sheet
- Lesser-Known JavaScript Hazards
- Using Hooks for Lazy-Loading Images in React
- Stop Using === Everywhere
- JavaScript Async/Await 101
- The evolving history of asynchronous operation in JavaScript
- Writing Asynchronous Tasks In Modern JavaScript
- Async JavaScript Part 1: The Callback
- Async JavaScript Part 2: Promises
- Async JavaScript Part 3: Async/Await
- JavaScript Promise combinators: race, all, allSettled, any
- Async function with +=
- await vs return vs return await
- JavaScript Async/Await Tutorial – Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream
- A Guide to Object-Oriented Programming in JavaScript
- JavaScript 101: Object Oriented Programming
- ⭐Understanding Classes in JavaScript
- ⭐Design Patterns com JavaScript & TypeScript
- Design Patterns com JavaScript & TypeScript: Padrões Criacionais
- Design Patterns com JavaScript & TypeScript: Padrões Estruturais
- Design Patterns com JavaScript & TypeScript: Padrões Comportamentais
- Functional Programming Principles in Javascript
- Functional Programming in JavaScript
- The power of functional programming in Javascript
- An introduction to Functional Programming with JavaScript
- An introduction to functional programming in JavaScript
- Pure functions in JavaScript
- Functional Programming in JavaScript: Introduction and Practical Examples
- FUNCTIONAL PROGRAMMING IN JAVASCRIPT
- Sintaxe de Espalhamento (Spread syntax)
- Spread operator
- Rest and Spread operator: Three dots that changed JavaScript
- Array Methods in Javascript that makes development easier
- Map, Filter and Reduce – Animated
- An Overview of Array Methods in JavaScript
- Different ways to remove elements from an array in JavaScript
- JavaScript Arrays: Some(), Every(), and forEach()
- Removing duplicates from an array
- You Simply Cannot Do These Things in a forEach Loop in JavaScript
- 4 Methods to Search Through Arrays in JavaScript
- Mozzila: Destructuring assignment
- Master Destructing Values in JavaScript
- Destructuring in JavaScript
- Build your own React in 90 lines of JavaScript
- Didact: a DIY guide to build your own React
- JavaScript Algorithms and Data Structures
- Introduction to Web Components. Part 1: Native vs Virtual DOM
- Build a Responsive Dashboard with Vue.js, SVG and Three.js
- How To Create Maps With React And Leaflet
- Flux: Entenda como funciona a arquitetura Flux com React
- Flux – descubra o motivo do sucesso dessa arquitetura em grandes empresas
- Flux, a arquitetura JavaScript que funciona
- Os estados do Flux: uma nova arquitetura
- Como funciona a arquitetura Flux?
- Entendendo Flux
- ⭐Awesome data visualization tools for software developers
- ⭐A Gentle Introduction to D3.js
- ⭐Learn D3: Introduction
- D3.js: Library for visualizing data
- How to learn D3.js
- Bar Chart Race with D3
- JavaScript library for creating sketchy/hand-drawn styled charts
- Let’s Fake it: Random Data Generation With Node and Faker.js
- Web scrapping with JS
- Combining D3.js with React
- Learn how to build a D3 dashboard with an example in React, Material UI, and Cube.js.
- 10 Awesome JavaScript Libraries for Front-End Developers in 2020
- Network Graph with D3js on Canvas
- Stay DRY Using axios for API Requests
- ⭐10+ JavaScript libraries to draw your own diagrams (2020 edition)
- Tutorial: Introdução ao React
- ⭐Getting Started with React (2019 Edition)
- ⭐Build your own React
- Passo a passo: Introdução ao React
- React Interview Questions
- A Complete Beginner's Guide to React
- Create React App 2.0: Babel 7, Sass, and More
- Hello, React! - A Beginner's Setup Tutorial
- ⭐Introduction to React
- The React Handbook
- React vs. Angular Compared: Which One Suits Your Project Better?
- CSS Styles in React
- Adicione o React a um site
- Why we use setState with function?
- React, JSX, ES Module Imports And Dynamic Imports In Browser Without Using Webpack
- Where Should I Integrate API Calls In My React App?
- 3 Lessons Learned From Building My First React App
- How to apply SOLID principles in React applications
- React.Org: Design Principles
- HIGHER ORDER COMPONENT
- The Beginner’s Guide to Creating an Interactive List With React
- Why You Can't Return Parallel JSX Elements. The Hack!
- 7 Ways to Implement Conditional Rendering in React Applications
- React Christmas
- How To Implement Dark Mode in Your React App
- ⭐Thinking in React Hooks
- Two Lessons I Learned From Making React Components
- What to answer when questions about React appear at job interview?
- How To Use The HTML Drag-And-Drop API In React
- 6 Ways to Share React Components in 2020
- ⭐What React Does (and Doesn't Do)
- ⭐React Lessons
- Implementing Infinite Scroll And Image Lazy Loading In React
- Filtering, Sorting and Pagination – Advanced Filtering with React and Redux
- React Suspense in Practice
- 10 JavaScript Things New React Devs Need to Know
- Top 4 Gantt Chart Solutions for React
- React Libraries in 2020
- ⭐Reintroducing React: every React update since v16 demystified.
- A critique of react hooks
- POS Tutorial
- React Functional Components, Props, and JSX – React.js Tutorial for Beginners
- React for Beginners – A React.js Handbook for Front End Developers
- Optimize Performance and Render Websites Superfast in ReactJS
- React Table Guide And Best React Table Examples
- 9 React Libraries To Impress Your Boss
- Performance Optimization in React applications
- Patterns de comunicação entre componentes (Sem Redux!)
- 8 no-Flux strategies for React component communication
- React: Communication Between Components
- The Combination of React and D3
- React and D3 — Axis
- 3 Best Practices for Working With React Components
- Referenciando Componentes No React
- How to Use Component Composition to Create a Flexible Compound Component in React
- React: Fetch API, React.Suspense e react-cache
- How to fetch data in React
- Mozzila: Usando Fetch
- Fetch API e o JavaScript
- Upload image with Fetch API in JavaScript
- How to Fetch Data from APIs Using useEffect React Hook
- React Dashboard: an Ultimate Guide
- Stop Using Loading Spinner, There’s Something Better
- WebGL, React, and no JavaScript
- A Collection of most useful and common ReactJS Libraries/Components
- Styled Components vs. CSS Stylesheets
- beautiful-react-diagrams
- Redux.org
- Gerenciando estado de componentes React com o Redux
- Getting Started with Redux
- Intro to Redux (React-Redux).
- Replacing Redux with observables and React Hooks
- Why I Stopped Using Redux
- Pocket Guide to Writing SVG
- Scaling SVG Elements
- Use and Reuse Everything in SVG… Even Animations!
- svg: Customize and apply backgrounds fast
- Handcrafting your own SVG
- VECTOR? RASTER? WHY NOT BOTH!
- A Tale of Two Buttons (css parametrizado)
- BEM - Block Element Modifier
- Disabled buttons suck
- Rethinking the Front-end
- Micro Frontend Architecture: Replacing a Monolith from the Inside Out
- Taming the front-end monolith
- UI in Microservices World – Micro Frontends pattern and Web Components
- JavaScript 101: Design Patterns
- REST API Design Best Practices
- What I’ve learned about accessibility in SPAs
- Creating Online Environments That Work Well For Older Users
- Accessibility checklist
- ARIA: Accessible Rich Internet Applications
- WAI-ARIA Authoring Practices
- Vestibular Issues in Parallax Design
- Designing For Accessibility And Inclusion
- What Parallax Lacks
- Debunking the Myth: Accessibility and React
- CSS Can Influence Screenreaders
- HTML: The Inaccessible Parts
- Reakit: Build accessible rich web apps with React
- Reach UI: Seeks to become the accessible foundation of your React-based design system.
- Programming Sass to Create Accessible Color Combinations
- Accessible HTML Elements
- ⭐5 most annoying website features I face as a blind person every single day
- Skeuomorphic Design — A controversial UX approach that is making a comeback
- Walkie Talkie App- skeumorph
- 10 Rules of Dashboard Design
- Neumorphism in user interfaces
- Le neumorphism va-t-il révolutionner l’UI ?
- Neumorphism.io
- Dark Mode vs. Light Mode: Which Is Better?
- A Complete Guide to Dark Mode on the Web
- Form design
- 10 UI Elements Web Developers Should Know About
- Opinion: Laws of UX
TLDR:
- UI > UX.
- Respond in less than 400 ms.
- Make buttons clickable.
- Make it simpler.
- Copy functionality and UX off other sites.
- Draw borders around similar functionality.
- Simpler imagery is better.
- Users think objects next to each other do similar things.
- Similar items close together look like one big thing.
- Things that look the same (color, font, etc) will look like they do the same thing.
- The average person can remember 5-9 things at once.
- Remove all unnecessary elements.
- Focus on the 20% that does 80% of things.
- Any task will inflate until all of the available time is spent.
- People judge the experience by its beginning and end.
- Be tolerant to whatever actions the user may take.
- People remember the first and last items in a series.
- You can't reduce all the complexity.
- When one thing stands out from others in a group, it will be remembered.
- People remember incomplete tasks, i.e. use progress bars.
- ⭐Developer’s Guide
- ⭐WebAssembly Guide
- ⭐Rust 🦀 and WebAssembly 🕸
- ⭐A Complete Introduction to WebAssembly and It’s JavaScript API
- Writing WebAssembly By Hand
- What languages can be compiled to WebAssembly (or wasm)?
- Rust and WebAssembly
- FreePascal WebAssembly
- ⭐WASM Codelabs intro
- WebAssembly from Scratch / Part One
- WebAssembly from Scratch / Part Two
- Iniciando com WebAssembly - Parte 1
- Iniciando com WebAssembly – Parte 2
- W3C: WebAssembly JavaScript Interface
- W3C: WebAssembly Web API
- ⭐Usando a API JavaScript do WebAssembly
- Entire WebAssembly inside URL
- C# and WebAssembly (Wasm)
- Introduction to WebAssembly for .NET Developers
- ⭐WebAssembly Studio
- ActuallyUsingWasm
- Browser-side PDF processing with Go and WebAssembly
- ⭐🦀RustWasm
- Intro to WebAssembly via Rust
- What is WebAssembly?
- The Promise of WebComponents & WebAssembly
- The anatomy of WebAssembly: Writing your first WebAssembly module using C (C++)
- Run C# natively in the browser through the web assembly via mono-wasm
- 🎬Creating High-performance Web Apps with WebAssembly
- Creating and working with WebAssembly modules
- Understand WebAssembly in 5 minutes
- Binary Security of WebAssembly
- Unexpected Printf Behavior in Go WASM – Nothing Prints
- Explorable Programming with Rust and WebAssembly
- Rust: Are we web yet?
- Going from JavaScript to WebAssembly in three steps
- Is WebAssembly magic performance pixie dust?
- Building a Website load in 50 ms
- JavaScript component-level CPU costs
- Performant front-end architecture
- Fixing memory leaks in web applications
- GraphQL: Improving performance
- Netflix functions without client-side React, and it's a good thing
- The Cost of Javascript Frameworks