150+ Useful Resources for Node.js / React Engineers

For the last 8 months I got a lot of useful links and I decided to share it. I hope you can find something interesting for you.

Node.js, React.js, Redux.js, Rx.js …

My articles

• evheniy.github.io: Node.js, React.js, Redux.js, Rx.js …
• YEPS — Yet Another Event Promised Server
• Open source node.js package from scratch
• Making right things using Docker
• Backend development — what next?
• What is wrong with PHP

Best Udemy courses for learning Full Stack Web Development

Node.js

• Node hero
• Getting Started With Node.js : A Beginners Guide
• All About Node.Js You Wanted To Know ?
• Fundamental Node.js Design Patterns
• How to create an Alexa skill with Node.js and DynamoDB
• 10 Best Practices for Writing Node.js REST APIs
• Аутентификация в Node.js с использованием Passport.js
• Securing Node.js RESTful APIs with JSON Web Tokens
• System Notifications with Node.js
• Token based authentication in Node.js with Passport, JWT and bcrypt
• Implementing Serverless Node.js Functions Using Google Cloud
• node-api-boilerplate
• How Massive Companies Use Node.js at Scale
• Node.js Best Practices
• Checklist: Node.JS production best practices
• Creating a project generator with Node

Nodejs - Hacker Noon_Read writing about Nodejs in Hacker Noon. how hackers start their afternoons._hackernoon.com

HTTP/2

• How JavaScript works: Deep dive into WebSockets and HTTP/2 with SSE
• HTTP/2 IN NODE.JS CORE
• HTTP/2 Server Push with Node.js

React

• React Patterns
• I wish I knew these before diving into React
• Understanding Higher Order Components
• React Higher Order Components in depth
• Testing React Components with Enzyme and Mocha
• React Sight is a live view of the component hierarchy tree
• React Boilerplates That You Should Know Of
• The 100% correct way to structure a React app (or why there’s no such thing)
• React is Slow, React is Fast: Optimizing React Apps in Practice
• React is Slow, React is Fast: Optimizing React Apps in Practice (other view)
• React медленный, React быстрый: оптимизация React-приложения на практике
• Форми в React: використовуємо ref
• Optimize React Performance
• Getting Started with React: A Beginner’s Guide
• A Guide to Testing React Components
• How to use React Lifecycle Methods
• All About React Router 4
• React Native component that implements elastic stack effect
• react-native-parallax-scroll
• React, Inline Functions, and Performance
• A Practical Guide to Testing React Apps
• High Performance React: 3 New Tools to Speed Up Your Apps
• react-async-component
• Готовим плацдарм для react-приложения
• React Things
• A Comprehensive Guide to Test-First Development with Redux, React, and Immutable
• React-media is a CSS media query component for React
• react-component-boilerplate — Boilerplate for React.js components
• why-did-you-update

React - Hacker Noon_Read writing about React in Hacker Noon. how hackers start their afternoons._hackernoon.com

Redux

• How Redux Can Make You a Better Developer
• Оптимизируем redux хранилище для более производительных изменений
• 10 Redux tips to scale your dev team
• Five Tips for Working with Redux in Large Applications
• React/Redux Links
• Tips to learn React + Redux in 2017
• 10 Tips for Better Redux Architecture
• redux-auth
• React Helmet
• Testing React Components Best Practices
• redux offline — Build Offline-First Apps for Web and React Native

Redux - Hacker Noon_Read writing about Redux in Hacker Noon. how hackers start their afternoons._hackernoon.com

Redux-observable

• Netflix JavaScript Talks — RxJS + Redux + React = Amazing!
• Using redux-observable to handle asynchronous logic in Redux
• RxJS

Webpack

• How to setup Webpack +2.0 from scratch in 2017
• How to setup Webpack +2.0 from scratch in 2017 — Part II
• How to setup Webpack +2.0 from scratch in 2017 — Part III
• How to setup Webpack +2.0 from scratch in 2017 — Part IV
• How to setup Webpack +2.0 from scratch in 2017 — Part V
• Setting up Webpack, Babel and React from scratch, revisited
• Performance futures — Bundling
• Analyzing & optimizing your Webpack bundle
• Two Tips to Improve Performance by 30% With React and Webpack
• Optimising your application bundle size with webpack
• Настройка Webpack 3 + Babel + Dev-server. Что, как и почему?
• Tech Talk Recap: How to Improve Webpack Performance in Large Projects
• Straightforward code splitting with React and Webpack
• Reducing CSS bundle size 70% by cutting the class names and using scope isolation
• Get Started With Workbox For Webpack
• Webpack + React. Как уменьшить бандл в 15 раз

Webpack - Hacker Noon_Read writing about Webpack in Hacker Noon. how hackers start their afternoons._hackernoon.com

Progressive Web App (PWA)

• What is Progressive web App (and Why Should You Care)?
• ReactPWA
• Get Started With Workbox For Webpack
• Build a Progressive Web App with Firebase, Polymerfire and Polymer Components
• A Brief Introduction to Progressive Web Apps, or PWAs
• Service Worker gotchas
• How to Code a Progressive Web App News Website
• Building Progressive Web App With React
• React Progressive Web Apps — Part 1
• React Progressive Web Apps — Part 2
• Understanding Service Workers
• Low Hanging PWA Fruit: Manifest Files and Service Worker Precache
• Getting Started With Progressive Web Apps (PWA)
• Руководство для начинающих по прогрессивным веб-приложениям и фронтенду
• 7 Tools for Developing Your First Progressive Web App
• A beginner’s guide to Service Workers
• Build a Progressive Web App: Offline Git Trending App Part 1 (Concepts and Service Workers)
• Build An Offline Git Trending PWA Part 2: Caching and Offline
• Build An Offline Git Trending PWA Part 3: Manifest and Notifications
• Как сделать Progressive Web Apps: руководство новичка
• Разработка вашего первого Progressive Web App c React
• How to turn your website into a PWA

GraphQL

• The Fullstack Tutorial for GraphQL: https://www.howtographql.com/
• Launchpad: https://launchpad.graphql.com
• GraphQL Authentication with React Native & Apollo [Part 1/2]
• GraphQL Authentication with React Native & Apollo [Part 2/2]
• Implementing GraphQL Using Apollo On an Express Server
• Getting up and running with GraphQL
• The GraphQL stack: How everything fits together
• Dive Into GraphQL Part I: What’s Wrong With REST?

GraphQL - Hacker Noon_Read writing about GraphQL in Hacker Noon. how hackers start their afternoons._hackernoon.com

Machine Learning

• What can machine learning do for you?
• HOW TO USE ELASTICSEARCH FOR NATURAL LANGUAGE PROCESSING AND TEXT MINING — PART 1
• HOW TO USE ELASTICSEARCH FOR NATURAL LANGUAGE PROCESSING AND TEXT MINING — PART 2
• Ограничения глубинного обучения и будущее
• Ускорьте ваш сайт с помощью машинного обучения

Machine Learning - Hacker Noon_Read writing about Machine Learning in Hacker Noon. how hackers start their afternoons._hackernoon.com

Docker

• Node.js, PM2, Docker & Docker-compose DevOps
• Getting started with Docker for local development
• How to use Docker for local web development: an update
• Why and How to Use Docker for Development

Docker - Hacker Noon_Read writing about Docker in Hacker Noon. how hackers start their afternoons._hackernoon.com

UI

• Login & Home Screen
• Building Skeleton Screens with CSS Custom Properties
• Бесплатные адаптивные HTML5 и CSS3 шаблоны
• Magic Animations CSS3
• Free & Premium HTML5 Bootstrap Templates
• 50 Free Responsive HTML5 Web Templates
• 66 Free Responsive HTML5 CSS3 Website Templates 2017
• 100 Free Responsive HTML5 CSS3 Website Templates
• Rakib — Free One Page Multipurpose Bootstrap Template
• List of Usable HTML Meta and Link Tags
• Silo Buster
• normalize.css

UI - Hacker Noon_Read writing about UI in Hacker Noon. how hackers start their afternoons._hackernoon.com

Firebase

• Lessons Learned — Cloud Functions for Firebase
• Getting Started with React and Firebase
• How to write beautiful Node.js APIs using async/await and the Firebase Database
• How to Create a Reddit Clone Using React and Firebase

Firebase - Hacker Noon_Read writing about Firebase in Hacker Noon. how hackers start their afternoons._hackernoon.com

Cheat Sheets

• The Complete HTML Cheat Sheet
• HEAD — A free guide to <head> elements
• The best front-end hacking cheatsheets — all in one place
• Hover.css
• Какие метатеги использовать в вебе в 2017 году
• Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do
• react-redux-cheatsheet

Useful for frontend

• Как стать хорошим программистом: статья от Google
• КОЛЛЕКЦИЯ ПОТРЯСАЮЩИХ МЕНЮ ДЛЯ САЙТА | HTML, CSS И JAVASCRIPT
• 40+ ПРЕЛОАДЕРЫ (LOADER) ДЛЯ САЙТА | HTML И CSS
• Frappé Charts
• Front-End Checklist
• 20 Best Practices for Improving JavaScript Performance
• The Critical Request
• Code samples online
• Гонка за скоростью
• The Difference Between GTmetrix, PageSpeed Insights, Pingdom Tools and WebPagetest
• How to Optimize Images for Web and Performance
• Front End Performance Checklist 2017 [PDF, Apple Pages]
• Сканирование и анализ веб-сайтов: подборка полезных сервисов

https://hackernoon.com/tagged/frontend

Домашний курс о запуске стартапа