web-architector.github.io

Follow me on GitHub

Оглавление

Index

Каталоги ресурсов

  1. wwwhere.io - список инструментов и ресурсов для вебразработки
  2. Public API - большая подборка публичных API -сайты с погода, музыка, здоровье, новости, финансы, книги, OpenData.. Бывает нужно для проекта в портфолио, либо просто потренироваться на "кошечках".
  3. SEO-AKADEMIYA.COM - Инструменты для SEO специалистов
  4. Web Fundamentals - большой набор туторилов от Google на разные темы Web разработки
  5. Подборка бесплатных книг по программированию на русском языке на гитхабе

⇧Back to Index

Public API

  1. apilist.fun - база данных всевозможных коллективных API. Пополняется пользователями
  2. Public API - большая подборка публичных API -сайты с погода, музыка, здоровье, новости, финансы, книги, OpenData.. Бывает нужно для проекта в портфолио, либо просто потренироваться на "кошечках".
  3. TMDb - The Movie Database (TMDb) API.
  4. Todoist – ToDo application
  5. Trello - Trello API
  6. reqres - сервис с эмуляцией API - можно использовать для тестов фронтенда
  7. SWAPI The Star Wars API
  8. PlaceIMG - api, предоставляющее изображения заданного размера и заданной тематики (люди, природа, животные итп)
  9. 8 Weather Forecast APIs For Developers - подборка из 8 API, которые можно использовать для создания приложений
  10. RANDOM USER GENERATOR - free, open-source API for generating random user data. Like Lorem Ipsum, but for people
  11. FillText.com - generates JSON datasets for testing or demonstration purposes. Return User object, random username, random password, random digit, random string, delay response, etc

⇧Back to Index

JavaScript

Теория JavaScript

Также смотри раздел Тестирование знаний по Javascript

Общая теория

  1. Как работает JS серия переводных статей из блога blog.sessionstack.com - описаны движок, оптимизация, воркеры, DOM, push, хранение данных итд
  2. You Don't Know JS - перевод серии книг по JavaScript.
  3. Airbnb JavaScript Style Guide() { - Популярные стилевые правила кода для Javascript от Airbnb.
  4. Airbnb React/JSX Style Guide - Популярные стилевые правила кода для React, JSX от Airbnb. Гайд со ссылками на правила eslint. Также есть русский перевод правил.
  5. Памятка по современному JavaScript - В этом документе собраны возможности языка JavaScript, с которыми вы наверняка столкнетесь в современных проектах и примерах кода. Цель этого руководства — не обучить вас JavaScript с нуля, а помочь разработчикам с базовыми знаниями, которые при изучении современных кодовых баз (или, скажем, React) сталкиваются со сложностями из-за использованных в них концепций JavaScript.
  6. Перевод статьи самого Дена Абрамова (Dan Abramov) о замыканиях.
  7. 10 Javascript Exercises with Arrays - упражнения по созданию, реверсу, уникализации, сравнинию массивов
  8. 10 Javascript Exercises with Objects - продолжнение темы, но уже с объектами
  9. ECMAScript Modules vs. CommonJS: Или… что такое модуль? - Node.js, TC-39 и модули
  10. Как продвигается внедрение ES6-модулей в Node.js - еще одна статья для понимания разницы между модулями CommonJS и ES6
  11. Пишем свой dependency free WebSocket сервер на Node.js
  12. Продвинутое использование DOM документа - нативные методы Javascript для замены jQuery
  13. Про цикл событий Event Loop в JavaScript или “как на самом деле работает асинхронность”?
  14. Jake Archibald: все что я знаю про Event Loop в JavaScript (2018) - видео от Джейк Арчибальда, цикл событий (event loop), очереди задач (task queue), цикл рендеринга (Request Animation Frame, Style Calculation, Layout, Paint), микротаски (microtasks)

this

  1. Understanding JavaScript Function Invocation and “this” - отличное объяснение про this
  2. this in JavaScript and why is it useful?
  3. What is “this” in JavaScript?

Прототипы

  1. Минимальное руководство по декораторам ECMAScript - перевод статьи о декораторах, дескрипторах свойств, декораторах методов, декораторах классов

Асинхронность

  1. Визуализация промисов и Async/Await - дельная наглядная статья о работе асинхронности в JS

⇧Back to Index

Преобразование кода

  1. Unminify – Анминификатор для HTML, CSS, JS

⇧Back to Index

Плагины, библиотеки, сниппеты

  1. megatimer — бесплатный таймер для вашего сайта.
  2. 30 seconds of code - Short code snippets for all your development needs (CSS, Python, React, Javascript etc)
  3. Simplifying WebSockets in RxJS - Using Redux-Observable for complex pipelines

⇧Back to Index

Node.js

  1. Instrumenting HTTP requests in node - грамотно работаем с прерываниями запроса в http.request, обрабатываем connection timeout
  2. 23 полезнейших Node.js-библиотеки, о которых стоит знать в 2020 году

jQuery

Статьи, литература по jQuery

  1. Как устроен jQuery: изучаем исходники
  2. Продвинутое использование DOM документа - нативные методы Javascript для замены jQuery
  3. jQuery page2page - шпаргалка по jQuery

jQuery плагины

  1. Slick – Адаптивный слайдер
  2. Swiper - Современный адаптивный слайдер
  3. Owl Carousel - Адаптивный слайдер-карусель
  4. Tooltipster – Создание всплывающих подсказок
  5. Flatpickr – Всплывающие окна с выбором даты
  6. Vide – Видеофон для сайта
  7. Masked Input – Плагин маски ввода для input
  8. One Page Scroll - Плагин скролла страницы по секциям в виде слайдера. Демо.

⇧Back to Index

Typescript

Теория TypeScript

Также смотри раздел Тестирование знаний по TypeScript

Общая теория TypeScript

  1. TypeScript Definitive Guide 4.1 beta - Книга и документация в одном и на русском
  2. typescriptlang.org - образовательный ресурс и песочница
  3. DefinitelyTyped - The repository for high quality TypeScript type definitions
  4. Type Search A web-based search for @types/* packages.
  5. 12 советов по внедрению TypeScript в React-приложениях
  7. Types vs. interfaces in TypeScript
  8. The TypeScript Evolution серия из 43 статей, написанная Marius Schulz
  9. Conditional Types in TypeScript - статья из серии The TypeScript Evolution - разжевана реализация Mapped Types with Conditional Types (NonNullablePropertyKeys, Pick<T, K>), Type Inference in Conditional Types (FirstElementType , ReturnType), встроенные Conditional Types (NonNullable, Extract, Exclude, ReturnType, ConstructorParameters, InstanceType)
  10. Простые TypeScript-хитрости, которые позволят масштабировать ваши приложения бесконечно - набор советов по написанию типов и интерфейсов

Типы и интерфейсы

  1. typescript-cheatsheet - a set of TypeScript related notes used for quick reference. The cheatsheet contains references to types, classes, decorators, and many other TypeScript related subjects.
  2. React+TypeScript Cheatsheets
  3. Генераторы интерфейсов (jsontots.com, app.quicktype.io, json2ts.com) - на основе JSON файла генерируют готовый интерфейс

⇧Back to Index

TypeScript Build

Также смотри раздел Webpack, React build

  1. Understanding TypeScript Configuration Options
  2. Опции компилятора на русском - подробное объяснение опций с примерами. Тут зеркало
  3. Basarat’s guide for manual setup of React + TypeScript + Webpack + Babel
  4. TypeScript-Babel-Starter - sample repository that uses Babel to transform TypeScript to plain JavaScript, and uses TypeScript for type-checking
  5. Сборка Typescript приложения с помощью Webpack - конфигурация webpack для сборки typescript приложения, CSS препроцессор, автоматическая перезагрузка при изменении кода, а также сборка и оптимизация кода
  6. React-Webpack-TypeScript-Babel - This is sample repository demonstrates how to use React, Webpack, TypeScript and Babel
  7. Compiling TypeScript via webpack and babel-loader - конфигурация Webpack для сборки на babel-loader’е вместо ts-loader’а

Плагины, библиотеки, сниппеты

  1. tslib - библиотека helper функций для транспиляции
  2. typescript-eslint - линтер для TypeScript

⇧Back to Index

React

Roadmap React девелопера

Основы React

Также смотри раздел Тестирование знаний по React

  1. React.js cheatsheet
  2. React cookbook - также есть скачанная книга Juho Vepsäläinen’а (один из создателей webpack)
  3. Мыслим в стиле React [RU] - перевод статьи из официальной документации, она поможет понять идеологию библиотеки и идеи, которые легли в ее основу.
  4. Minimum Minimorum[EN] – минимум, необходимый, чтобы начать работать с React.
  5. Modern React with Redux [EN] – курс по основам React. Подойдёт для всех, кто только начинает своё знакомство с экосистемой React. В ходе первой части курса вы построите приложение для поиска и просмотра видео на YouTube (только React, никаких изысков), во второй части начнёте своё путешествие в страну Redux и создадите приложение с использованием Redux и Google Maps API.
  7. Airbnb React/JSX Style Guide - Популярные стилевые правила кода для React, JSX от Airbnb. Гайд со ссылками на правила eslint. Также есть русский перевод правил.
  8. React Props/State Explained Through Darth Vader’s Hunt for the Rebels [EN] - пост о работе пропсов и состояний на примере Дарта Вейдера и повстанцев.
  9. React.js for Stupid People **[EN] **- спасительный круг для тех, кто до сих пор ничего не понял. Есть перевод на русский язык. Статья стара - 2015 год
  10. ReactJS: компоненты, элементы и экземпляры - Перевод статьи Dan Abramov “React Components, Elements, and Instances”
  11. Руководство по рендеренгу в React - рендеринг дочерних и родительских компонентов, мемоизация ссылок, профилирование, Contex, connect, useSelector etc
  12. Отказ от create-react-app и создание собственного шаблона для React-приложений

⇧Back to Index

Формы

  1. Сравнение возможностей самых популярных библиотек для работ с формами в React - автор статьи рассматривает некоторые из самых популярных библиотек для управления формами и валидацией данных в React.
  2. Formik - помогает создавать и валидировать формы в процессе отладки, тестирования и анализа. Он позволяет создавать динамические формы, поэтому вам не нужно вручную изменять или обновлять состояние и пропсы её компонентов.

Углубленный React

  1. React Lifesycle Methods - How and When to Use Them [EN] – всё про жизненный цикл компонентов в React.
  2. PureComponent[RU] - об особенностях использования и отличиях от Component.
  3. Контекст в React **[EN] **- видео об экспериментальном функционале, на который опираются многие популярные библиотеки.
  4. Компоненты высшегопорядка [EN] - руководство по работе с вашими собственными компонентами высшего порядка.
  5. Основы производительности приложений [RU] - как правильно работать с shouldComponentUpdate.
  6. Десять мини-паттернов [EN] – разбор лучших практик при работе с компонентами.
  7. Паттерн React Render Props - концепция children as a function
  8. Курс Advanced React and Redux **[EN] **- курс по основам тестирования компонентов, работы с аутентификацией на стороне клиента и сервера и компонентов высшего порядка.
  9. Основы работы с содержимым head[RU]
  11. Анимация [EN]- видео о работе с анимацией с помощью ReactCSSTransitionGroup.
  12. Managing Websockets with Redux and Context - Connecting components to live Socket.io events with React Context and Redux store

⇧Back to Index

React Hooks

  1. 5 советов, которые помогут тебе лучше понять React Hooks
  2. How do React hooks really work? , React hooks: not magic, just arrays - статьи с объяснением реализации работы хуков
  3. Как использовать useStore, useSelector, useDispatch hook? - очень кратко на примере
  4. useEffect(fn, []) это не новый componentDidMount() - Перевод одноименнной статьи Они почти одинаковые. Но существует достаточно различий, которые возможно доставят вам неудобства, особенно если вы делаете рефакторинг с классов.
  5. Using Refs with the useRef Hook - Implementing Refs in React with hooks, with example use cases
  6. useRef in React - рассматриваем доступ к DOM nodes/elements и хранению информации в компоненте между ререндерами.
  7. Redux Hooks in React: An Introduction
  8. How to Hook Redux in a React App - Redux hooks (useSelector, useDispatch, useLoadData) to build a food ordering app
  9. React Hooks - Полный Курс (Про Все Хуки!) - курс (Владилен Минин) 2020г - useInput, useRef, useCallback, useAlert, useReducer, useContext, useMemo
  10. 11 Useful Custom React Hooks for Your Next Web App - Top 11 recommended ReactJS custom Hooks — with examples.
  11. useHooks.com(🐠) - (перевод) Easy to understand React Hook recipes by Gabe Ragland, рецепты хуков useFirestoreQuery, useMemoCompare, useAsync, useRequireAuth, useRouter, useAuth, useEventListener, useWhyDidYouUpdate etc
  12. Replacing Lifecycle methods with React Hooks
  13. 8 Awesome React Hooks - реализация кастомных хуков - usePrevious, useTimeout, useClickInside, useClickOutside, useFetch, useInterval, useComponentDidMount, useComponentWillUnmount
  14. React Adaptive Loading Hooks & Utilities - гугловская подборка хуков и утилит для адаптивной загрузки в зависимости от свойств клиента - useMemoryStatus, useHardwareConcurrency, useSaveData, useNetworkStatus, useMediaCapabilitiesDecodingInfo…
  15. useSWR – моя новая любимая библиотека React, использует стратегию кеширования stale-while-revalidate
  16. usePromiseTracker - лучший способ организации прелодаера loader in React

⇧Back to Index

Redux

  1. Курс от создателя Redux Даниила Абрамова **[EN] ** - 30 видеоуроков об устройстве и функционировании библиотеки, а также о приемах работы с ней.
  2. Официальная документация [EN] и ресуры для обучения
  3. Лучшие практики при работе с Redux [EN] статья, рассказывающая, как избежать типичных ошибок: где и как организовать бизнес логику приложения, как правильно работать с асинхронными операциями, как создать архитектуру проекта на Redux и многое другое.
  4. Идиоматичный Redux: Дао Redux’а, Часть 1 — Реализация и Замысел, Часть 2 — Практика и Философия [EN+RU] - общая концепция Redux
  5. Идиоматический Redux [EN] - второй курс от создателя Redux (Даниила Абрамова) про продвинутые техники использования библиотеки.
  6. Обзор экосистемы Redux [EN] - принципы сосуществования с React и React Router, паттерны работы с асинхронностью и аутентификацией.
  7. Пишем всю middleware [EN]
  8. Асинхронный Redux [EN] - обзор библиотек для работы с асинхронными операциями в Redux.
  9. mergeStateToProps [RU] - возможности Redux, о которых вы не знали (mapDispatchToProps на стероидах).
  10. Руководство по работе с Redux [Habr-2016] - на примере создания приложения для «живых» голосований на вечеринках, конференциях, встречах и прочих собраниях
  11. Managing Websockets with Redux and Context - Connecting components to live Socket.io events with React Context and Redux store
  12. 5 причин, почему вы должны забыть о Redux в приложениях на React

⇧Back to Index

Роутинг в React

  1. Server-side роутинг vs Client-side роутинг - толоковое объяснение на stackoverflow как резолвятся url’ы на клиенте и на сервере.
  2. Подробно о React Router. Часть 1 Часть 2 Часть 3 (Перевод серии статей Deep dive into React Router) - основы, передача пропсов, редиректы итд
  3. REACT ROUTER - online учебник и песочница для изучения React Router для web и React Native
  4. React router +browserHistory [EN]
  5. Четвертая версия React Router изнутри [EN]
  6. Изоморфные приложения на React с React Router 4 версии [EN] - как организовать server-side рендеринг приложения.
  7. Обзор альтернатив React Router[EN]
  8. Как написать свой роутер[EN] - руководство по созданию собственного роутера, работающего с server-side рендерингом.

⇧Back to Index

Архитектура React приложений

  1. Как правильно организовать архитектуру большого приложения - By Jack Franklin , November 2, 2020[EN]
  2. How You Should Structure Your React Applications - by Thomas Guibert, Sep 8, 2020. Components, containers, core folder approach
  3. Presentational and Container Components - by Den Abramov, 2015
  4. Как избежать излишней сложности состояния приложения [RU] - руководство по правильной организации Redux-стора в больших приложениях.
  5. How to organize data flow in React/Redux application? - статья Andrei Borisov
  6. React Proto — инструмент создания прототипов приложений для разработчиков и дизайнеров. Он помогает планировать структуру вашего проекта, чтобы принимать решения заранее
  7. My Awesome React/Redux Structure - Learn how to architect a React/Redux application in a classy way
  8. Оптимизация подключения REST API для React приложений
  9. Работа с AJAX-запросами**[EN] **– о том, где и когда загружать данные.
  10. HTTPS and Create React App - настройка для работ с шифрованными https запросами
  11. The best way to implement a loader in React - 3 способа реализации лоадеров и лучший на usePromiseTracker

⇧Back to Index

React tutorials

  1. 3D-аркада в браузере: как мы сделали игру на React + Redux - создание игры “Авиаторы”
  2. Клон Twitter [EN]
  3. Клон Trello [RU]
  4. Создание медиа-библиотеки часть 1, часть 2[EN]
  5. Создаем прогрессивное веб-приложение на React и размещаем его в Netlify и PWA Store
  6. Собираем с нуля изоморфное приложение (часть 1, часть 2, часть 3) - пошаговое руководство по настройке сборки приложения на React с server-side рендерингом [RU]
  7. Сбей мишень - на экране будут появляться мишени, в них нужно быстро попадать. Репозиторий тут

⇧Back to Index

Тестирование в React

Также смотори раздел Тестирование и производительность

  1. Тестирование компонентов в React**[EN] **
  2. Лучшие практики тестирования компонентов [EN]
  3. Видеокурс по тестированию JS-приложений с Jest [EN]
  4. Руководство по использованию TDD подхода при разработке React приложений [EN]
  5. Modern React testing - Это серия статей (1, 2, 3, 4)о тестировании React приложений с помощью современных практик и инструментов (Jest, Enzyme, React Testing Library, Cypress)

React Build

Также смотри раздел Webpack, Typescript Build

  1. Setup React Webpack - глава книги Manav Sehgal “React Speed Coding: Learn React with ES6, Redux, Webpack, Enzyme, and Flexbox”, настройка Webpack’а, Babel, плагинов, лоадеров, скриптов для React когда еще не было create-react-app
  2. Webpack + React [RU] - как уменьшить бандл в 15 раз: подборка плагинов для экстремального сжатия.
  3. Webpack Optimizations - Production-ready React App - о минимальной конфигурации вебпака для настройки и запуска React приложения, ленивая загрузка компонентов путем разделения бандлов
  4. Собираем React приложение с помощью Webpack 2 и Babel[EN] - руководство по настройке самых необходимых инструментов.
  5. React Starter Projects - для экономии времени позволяет скачать шаблон react проекта с нужными предуставновленными зависимостями (Next, gatsby, Express, GraphQL, Babel, PostCSS и еще 198), а потом донастроить
  6. Code Splitting [EN] – разделение большого бандла на меньшие части для более быстрой загрузки приложения.
  7. Basarat’s guide for manual setup of React + TypeScript + Webpack + Babel

Инструменты для работы в React

  1. React Sight - это расширение к браузеру , позволяющее графически увидеть дерево компонентов проекта React
  2. Why Did You Render - npm-пакет, позволяющий увидеть re-rendering компонентов (работает как hook или middleware). Хорош для отладки излишнего render’инга или просто для обучения и пониманию процессов рендеринга
  3. Storybook и React Cosmos - хранение и документирование компонентов в проекте, компоненты становятся доступными любому разработчику
  4. Material-ui , Ant Design, Semantic UI React, react-bootstrap, reactstrap - библиотеки готовых компонентов
  5. React Belle — это настраиваемая библиотека React, содержащая компоненты для повторного использования: Toggle, Rating, DatePicker, Button, Card, Select и другие. Она призвана обеспечить удобство взаимодействия с пользователем. Компоненты оптимизированы для работы на мобильных устройствах и на настольных ПК.
  6. Evergreen, созданный поверх примитива React UI, представляет собой инфраструктуру UI, содержащую высококачественные компоненты, которые вы можете использовать для создания своего проекта.
  7. Bit — онлайн-платформа и инструмент командной строки для публикации и обмена React-приложениями. Делитесь компонентами,публиковать их и свои React-приложения
  8. React Proto — инструмент создания прототипов приложений для разработчиков и дизайнеров. Он помогает планировать структуру вашего проекта, чтобы принимать решения заранее
  9. React Colorful - A tiny color picker component for modern React apps
  10. Visx — коллекция графических примитивов для React-приложений, созданная в Airbnb
  11. ⏱ React Idle Timer - отслеживание статуса пользователя (online, offline) на клиенте

⇧Back to Index

Стилизация в React

  1. Airbnb CSS-in-JavaScript Style Guide - Популярные стилевые правила кода для CSS-in-JS от Airbnb
  2. SVG Stroke Animation with CSS Explained - And creating a CSS menu toggle transition with styled components

Разное

  1. Awesome React - A collection of awesome things regarding the React ecosystem.
  2. React Bits - коллекция паттернов, техник, советов по работе с React. Как дополнение к основной документации
  3. Подборка интересных опенсорсных проектов [EN]
  4. Awesome React Talks [EN] – подборка лучших докладов с конференций.
  5. React за 30 минут [EN]
  6. 12 советов по внедрению TypeScript в React-приложениях
  7. A practical guide to integrating Google Maps in React
  8. Mastering Drag & Drop using ReactJS hooks
  9. ‘Hooking’ Your Audience Using Drag & Drop in React
  10. Mastering Drag & Drop with ReactJS
  11. 22 React Performance Optimization Techniques
  12. React+TypeScript Cheatsheets

⇧Back to Index

⇧Back to Index

React Native

Раздел пока не структрурован - информация вносится на будущее

  1. https://medium.com/@rossbulat - статьи юзера о React Native
  2. https://medium.com/@saidhayani - Статьи юзера о React Native
  3. Styling in React Native Explore the best ways to style a React Native application
  4. React Native init vs Expo - очень простое и поверхностное сравнение двух стартеров, для освежения памяти

PWA приложения

Также см. раздел Service Worker API

Теория

  1. Manifest.json - MDN
  2. HABR - Как сделать из сайта приложение и выложить его в Google Play за несколько часов
  3. pwabuilder.com - инструмент от Microsoft, помогающий пошагово превратить ваш сайт в PWA приложения, помогая в настройке manifest.json, service worker’ов, в итогое скачаете готовый apk

Service Worker

  2. APP Toolkit - красивые картиночки экранов

⇧Back to Index

Создание полноценных PWA приложений

Также см. разделы Комплексные приложения,

  1. Как сделать из сайта приложение и выложить его в Google Play за несколько часов (2019). Часть 1, Часть 2

  2. Introduction to Progressive Web Apps (2016) Offline First-Part 1, Instant Loading-Part 2,Push Notifications-Part 3

  5. Разработка вашего первого Progressive Web App c React (2017)

  6. 9 amazing PWA secrets

  7. Progressive Web Apps on iOS are here

  8. Progressive Web Apps with React.js: Part I Introduction
  9. Progressive Web Apps with React.js: Part 2 Page Load Performance
  10. Progressive Web Apps with React.js: Part 3 Offline support and network resilience

  11. Progressive Web Apps with React.js: Part 4 Progressive Enhancement

  12. A React And Preact Progressive Web App Performance Case Study: Treebo

⇧Back to Index

===================================

Комплексные приложения

Также см. разделы

  1. Делаем современное веб-приложение с нуля - boilerplate backend и frontend простейшего веб-приложения c docker, Flask, Express, Webpack, React, Redux и server side rendering, очереди задач с RQ
  2. Делаем поиск в веб-приложении с нуля - реализация полнотекстового поиска к Делаем современное веб-приложение с нуля с использованием Elasticsearch

Next.js

  1. Маршрутизация в Next.js - полное руководство для начинающих

Web APIs

##

Fetch API

  1. What is an opaque response?
  2. What happens when you read a response? - зачем нужен метод response.clone()

IndexDB API

  1. Описание работы с IndexedDB API от developers.google.com вместе с практической частью
  2. IndexedDB Promised - библиотека Jake Archibald , которая очень похожа на IndexedDB API, но использует промисы, а не события. Это упрощает API, сохраняя при этом его структуру
  3. IndexedDB Polyfill - полифил для работы с некоторыми браузерами, слабо поддерживающими IndexedDB
  4. Dexie.js - A Minimalistic Wrapper for IndexedDB
  5. YDN-DB - Javascript database library for IndexedDB, WebSQL and WebStorage

Push API

  1. Web Push Book - This website has a whole mess of content on implementing push for the web

⇧Back to Index

Service Worker API

Также смотри раздел PWA приложения, Cache API

Теория

  1. Service Workers Nightly
  2. Руководство по использованию Service Worker
  3. ServiceWorker Cookbook - Реально крутая подбпорка практических рецептов с кодом как можно приментяь service workers в современных web сайтах.
  4. The Service Worker Lifecycle статья Jake Archibald о жизенных циклах воркеров

Cache API

  1. Caching files with a service worker - слайды с объяснением из PWA туториала Google о кешировании в воркерах
  2. The Offline Cookbook (2014) статья Jake Archibald о различных реализациях шаблонов кеширования в приложениях
  3. Dealing with opaque responses in Service Worker - approach caching responses in Cache API
  4. Offline Storage for Progressive Web Apps
  5. Service worker caching and HTTP caching

⇧Back to Index

Web технологии

Server side rendering

  1. Новшества серверного рендеринга в React 16

Браузеры

Библиотеки

fingerprint.js. Она помогает формировать особые идентификаторы браузеров, не используя при этом куки-файлы, или такие данные, на которые легко могут воздействовать недобросовестные пользователи. Она позволяет быстро собирать подробные сведения о браузере, которые можно использовать либо в исходном виде, либо создавая на их основе хэш, который позволяет идентифицировать уникального пользователя.

Browserslist - сайт для проверки доли десктопных и мобильных браузеров. Проект github browserslist используется для компиляции под конкретные наборы браузеров

⇧Back to Index

Расширения для браузеров

  1. CSSPeeper Расширение для Google Chrome CSSPeeper позволяет выбрать объект на любом сайте и извлечь его CSS-свойства, чтобы применить их в своем проекте.
  2. SVG-grabber - для быстрой загрузки svg с любого сайта
  3. Colorzilla для удобной работы с цветами
  4. WhatFont для моментального определения шрифтов
  5. React Sight - расширение к браузеру, позволяющее графически увидеть дерево компонентов проекта React

Dev Tools

  1. Blisk – Браузер для разработчиков
  2. igvita.com - Wait, DevTools could do THAT? - слайда о неизвестных фишках DevTools, настроке, кастомных панелях, мобильной отладке, анализу производительности
  3. Профессиональное применение инструментов разработчика Chrome: 13 советов

⇧Back to Index

⇧Back to Index

Django-REST-Framework

Cdrf.co - Описание классов Django REST Framework

⇧Back to Index

Python

Общая теория Python

  1. Введение в аннотации типов Python- Часть1, Часть2

⇧Back to Index

Протоколы

  1. Введение в ASGI: становление асинхронной веб-экосистемы Python
  2. awesome-asgi — отличный список ресурсов и инструментов для отслеживания постоянно расширяющейся экосистемы ASGI.

⇧Back to Index

Базы данных

GraphQL

  1. Много о GraphQL
  2. Three ways to represent your GraphQL schema
  3. Explaining GraphQL Connections - why Facebook adopted cursors, but why did they choose names like “connection”, “edge”, and “node”? Объяснение структуры данных Facebook на примере графа.
  4. query Firebase with GraphQL

Firebase

  1. Firebase: делаем веб-приложение чата, работающее в реальном времени
  2. A Firestore in React Tutorial for Beginners [2019]
  3. A Firebase in React Tutorial for Beginners [2019]
  4. query Firebase with GraphQL

Version control

Общая теория Git

  1. Learn Git Branching – интерактивный учебник по Git
  2. GitSheet - A dead simple git cheatsheet.

Github

  1. How to Create a Self-Updating README.md for Your GitHub Profile

⇧Back to Index

Трудоустройство, Roadmaps

Поиск работы

  1. djinni - Анонимный поиск работы на Джинне
  2. GeekJob.ru - это анонимный поиск работы без палева
  3. Фриланс биржи для новичков
  4. Рекрутинг-партнер New.HR
  5. Удаленная работа - Рассмотрели 12 международных и российских площадок для поиска удалённой работы: ссылки, различия в механике поиска, плюсы и минусы

⇧Back to Index

Portfolio

  1. Full Stack Web Developer Образец сайта портфолио
  2. Портфолио фрилансера
  3. 30 бесплатных html шаблонов портфолио фрилансера
  4. RateThisCV - можно отправить своё резюме и его бесплатно оценят на сайте RateThisCV. Это повышает шансы на получение работы, так что рекомендуем воспользоваться приглашением.
  5. Предвзятый и субъективный взгляд на резюме разработчика

Roadmaps

  1. Backend Developer Roadmap - roadmap развития backend разработчика
  2. Frontend Developer Roadmap - roadmap развития frontend разработчика
  3. Roadmap React девелопера

⇧Back to Index

Тестирование знаний

Общие вопросы по Backend

  1. 25 распространённых вопросов по SQL с собеседований и ответы на них

Общие вопросы по Frontend

  1. Junoir frond end developer - Публичное собеседование: Junior Front-end developer
  2. Собеседование в Билайн middle frontend-разработчиком с ЗП 220к
  3. Собеседование в Альфа-банк Senior frontend-разработчиком с ЗП 170к

Вопросы по CSS

  1. CSS тесты HABR - 30 вопросов по CSS с детальными ответами

Вопросы по Javascript

Также смотри раздел Теория Javascript

  1. Подготовка к собеседованию Собеседование на должность JavaScript-разработчика: популярные задачи с разбором решений
  2. 23 вопроса 23 непростых вопроса для JavaScript-собеседования
  3. 70 вопросов по JavaScript для подготовки к собеседованию
  4. 100 теоретических вопросов по JavaScript - список из первых 100 вопросов по основам JavaScript из этого репозитория с краткими ответами и ссылками на «Современный учебник по JavaScript» Ильи Кантора (JSR) и MDN. Также в конце имеются ссылки на статьи для пытливых умов.
  5. Список из 156 (продвинутых) вопросов о JavaScript, а также ответы на них - Lydia Hallie публикует вопросы по JavaScript с вариантами ответов в своем Instagram, которые дублируются в этом репозитории
  6. Вопросы и ответы к собеседованию фронтенд-разработчика на JavaScript - (перевод **тут**)
  7. Создание таблицы данных пользователей на стеке HTML + CSS + JavaScript
  8. Вопросы из фронтенд-собеседований (2020) с ресурсами для подготовки

Вопросы по TypeScript

Также смотри раздел Теория TypeScript

  1. Собеседование по TypeScript: 20 вопросов и ответов

⇧Back to Index

Вопросы по React

Также смотри раздел Основы React

  1. 15 вопросов с собеседования - Перевод статьи React Interview Questions
  2. 50 вопросов на собеседовании от Владилена Минина
  3. Шпаргалка для React ответов на вопросы интервью 2020
  4. Реализовать контрол, на основании макета react, typescript, sass, bootstrap, redux-form pixel-perfect не требуется, но результат должен быть очень похожим на изображение
  5. Мини-сервис новостей. Решение+задание в readme
  6. Приложение для сети прокатов велосипедов компании CityBikes. React + Redux + TypeScript - Задание
  7. Бегущая строка биржевых данных
  8. React Technical Interview Questions
  9. Все ли вы знаете о React key? - задачки на собеседовании про React key

⇧Back to Index

Deployment

Hostings

  1. link-host - (по рекомендации А.Исламова)

SEO

19 SEO-методов Нила Пателя, которые удвоят трафик из поиска. Части 1, 2, 3

Coding

Development

Также смотри раздел React Build

Babel

  1. Removing Babel’s Stage Presets - Почему удалили preset-stage из Babel 7?
  2. Difference between plugins and presets in .babelrc

  3. Важная информация о babel-preset-env

  4. Официальный сайт postcss с каталогом лучших плагинов

  5. Babel для CSS → postcss-preset-env

Webpack

Общая теория Webpack

  1. (Очень простое) Руководство для начинающих по WEBPACK - очень очень простое
  2. Webpack cookbook - From apprentice to master. Также есть скачанный вариант
  3. Modern JavaScript Explained For Dinosaurs - также простая обзорная статья о возникновении Webpack и его архитектуре
  4. Webpack 2 для самых глупых[EN] – подробное введение в использование второй версии сборщика.
  5. Видеокурс по второй версии Webpack (2017г) [EN]
  6. Webpack 4 — The Complete Guide - гайд по настройке с объяснениями и с основными плагинами и лоадерами
  7. Webpack Tutorial - how to build a Webpack app with Vanilla JS or React
  8. webpack Node API
  9. Концепты entry и output, loader и plugin
  10. О будущем webpack-cli
  11. О hot module replacement
  12. Горячая перезагрузка всего [EN] Как использовать Hot Module Replacement в Webpack для перезагрузки фронтенда и бэкенда в изоморфном приложении.
  13. SurviveJS: WEBPACK -From apprentice to master - годная online книга Juho Vepsäläinen’а (один из создателей webpack), с разбором многих тем Webpack’а, Babel
  14. Webpack cheatsheet - тут, тут, тут
  15. Basarat’s guide for manual setup of React + TypeScript + Webpack + Babel, оптимизаций, лоадеров

⇧Back to Index

Webpack Devserver

  1. Об интерфейсе webpack-dev-server
  2. webpack-dev-middleware webpack-hot-middleware

Source maps

  1. Введение в source maps
  2. Визуализация source maps
  3. SurviveJS: Source Maps - глава о Source Maps из книги SurviveJS: WEBPACK -From apprentice to master автора Juho Vepsäläinen’а (один из создателей webpack)
  4. Доступные типы source maps и их сравнение

Webpack optimization

  1. Как настроить кеширование на сервере
  2. Список популярных библиотек с оптимизациями
  3. Настройки SplitChunksPlugin
  4. Мифы https2
  5. Что такое webpack runtime и зачем его отделять в отдельный чанк
  6. Code splitting: с чего начать
  7. Тобиас Копперс о Code Splitting и опптимизации
  8. Улучшение производительности сборки
  9. Как инженеры Slack сборку вебпак улучшали
  10. Как инженеры Box сборку вебпак улучшали
  11. Чеклист производительности от Addy Osmani
  12. Глубокое погружение в code splitting
  13. webpack 4: mode and optimization - настройки оптимизации сборки, разбор свойств optimization Тобиасом Копперсом
  14. Tree shaking
  15. Рубрика Идеальная Сборка: почему перевод изображений в формат Base-64 – плохо?
  16. Инструменты для оптимизации изображений:
  17. Как уменьшать размер сборки
  18. Google Image Optimization by Ilya Grigorik
  19. Images Guide by Addy Osmani

⇧Back to Index

Gulp

  1. Gulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтов

Docker

  1. Docker Vs Podman
  2. Production-ready Docker packaging - Набор статей best practice по работе с Docker. Это не уроки с нуля (если вы не знакомы с Docker, то вам это не поможет), это материал для уже «продвинутых пользователей», кто умеет создать свой образ. Также сохранено в Notion
  3. Avoiding the Docker Hub retention limit - статья о dummy-pull all container images from a repo at a container registry to avoid inactivity purge
  4. Изучаем Docker - серия переводных статей Часть 1: основы, Часть 2: термины и концепции, Часть 3: файлы Dockerfile, Часть 4: уменьшение размеров образов и ускорение их сборки, Часть 5: команды, Часть 6: работа с данными

Eslint

  1. Airbnb React/JSX Style Guide - Популярные стилевые правила кода для React, JSX от Airbnb. Гайд со ссылками на правила eslint. Также есть русский перевод правил.
  2. How to Create Your Own ESLint Config Package
  3. Lint React Apps - глава книги Manav Sehgal “React Speed Coding: Learn React with ES6, Redux, Webpack, Enzyme, and Flexbox”, описание настроек для eslint’a в React
  4. ESLint в TypeScript - библиотека typescript-eslint для замены deprecated TSLint на ESLint, статьи (1, 2,) варианты конфигураций (1, 2,)

⇧Back to Index

Обучающие платформы

  1. Coursehunter - Сливы обучающих курсов недорого (Ресурс видеоуроков программирования для разработчиков.)

⇧Back to Index

Тестирование и производительность

Также смотри раздел Тестирование в React

Кросс-браузерное тестирование

  1. Can I Use - Проверка кода на кроссбраузерность
  2. ECMAScript 6 compatibility table - таблица совместимости спецификации ECMAScript 6 для различных браузеров
  3. search.google - Оптимизирована ли ваша страница для мобильных устройств?
  4. browserstack - Предоставляет богатый набор операционных систем и браузеров под них и богатый набор эмуляций мобильных устройств с родными браузерами на них. Какое то кол-во минут бесплатно, далее 39$ в месяц
  5. crossbrowsertesting - Система для проведения кросс-браузерного тестирования. Имеет широкую базу и большое количество различных сочетаний браузер/ОС. Позволяет провести как скриншот тесты, так и “живые тесты”. Более того из результатов скриншотов можно попасть в “живой тест” одним кликом. Также как и переделать отдельный скрин. Бесплатный доступ всего лишь на один час.Платные расценки от 30$ за 2,5 часа.
  6. browserling - Сервис, предоставляющий возможность живого доступа к заданным браузерам. Есть возможность неограниченного количества сессий по 3 минуты. За 20$ в месяц можно получить бесконечные сессии на одного разработчика, за 30 на бесконечное количество разработчиков. И да, на бесплатном плане из IE вам будет доступен только 9.0.
  7. opendevicelab - Сеть “открытых лабораторий” в которых по задумке авторов можно протестировать мобильные приложения и сайты на реальных устройствах. Однако, никакой возможности провести тестирование через сеть нет. Только вручную, только методом физического посещения. И, увы, по их карте ближайшие лаборатории расположены в Финляндии.
  8. browsershots - Бесплатный сервис скриншотов. Позволяет запустить вашу страничку на внушительном количестве браузеров под Linux (84 браузера), Windows (87 браузеров) и MacOs (10 браузеров). Скриншоты делаются весьма грамотно: для большинства браузеров при достаточно длинной страничке скриншоты на самом деле состоят из склейки нескольких скриншотов с прокруткой. Заказать тесты можно достаточно быстро в несколько кликов, если, конечно, не требуется точно задать, например: FF8 — FF26 на Linux и Windows, тогда, конечно, придется муторно кликать по чекбоксам. Стоит также отметить, что система открытая и любой может к ней присоединиться, предоставив свои вычислительные ресурсы. Более того, авторы даже предоставляют реализацию своего API на Python.
  9. deviceanywhere - Предоставляет реальные устройства для тестирования чего бы то ни было в ручном режиме.Имеется два вида бесплатного доступа и полномасштабный платный доступ. Бесплатный доступ на общих основаниях позволяет удалённо пользоваться 11-ю мобильными устройствами сессиями по 10 минут.

Адаптивность

  1. http://adaptivator.ru/
  2. http://quirktools.com/screenfly/
  3. https://www.browserstack.com/

Валидация кода

  1. Validator W3 – Валидность HTML-кода

  2. PageSpeed Insights - Проверка оптимизации страницы

  3. Mobile Friendly - Оптимизирована ли ваша страница для мобильных устройств

  4. Find Dublicate Content on your site -Проверка уникальности текста на сайте

  5. Piliapp - Валидность JS-кода

    ⇧Back to Index

Чек-листы кода

  1. Frontendchecklist - чек лист для фронтендеров (проверка тегов, изображений, JS, CSS)

  2. Checklist design – еще один чек-лист, коллекция лучших практик UX и UI с пошаговым разбором того, что предпринять и как действовать.

Тестирование хоста

  1. host-tracker - Сервис проверки доступности сайтов и серверов

  2. Google PageSpeed Insights - замеры скорости открытия сайтов (особенно с мобильных устройств). Очень авторитетный источник. Также по использованию Lightbox см. статью Повышаем производительность и скорость загрузки сайта простыми способами

  3. Pingdom - еще ресурс по измерению скорости сайта. Замер в Pingdom и GTmetrix происходит без ограничений по скорости сети интернет и по процессору устройства. Сервис, который даст представления о скорости загрузки вашего сайта из разных точек по всему миру.

  4. GTmetrix - еще ресурс по измерению скорости сайта. Замер в Pingdom и GTmetrix происходит без ограничений по скорости сети интернет и по процессору устройства.

  5. webhook.site - Тестирование вебхуков, генерирует уникальную ссылку для проверки входящих POST-запросов. В статье приведены примеры

  6. RequestBin дает вам URL-адрес, который будет собирать запросы, сделанные на него, и позволит вам проверять их в удобной для человека форме. Используйте RequestBin, чтобы увидеть, что отправляет ваш HTTP-клиент, или проверить и отладить запросы webhook.

  7. httpresponder создаст точку сбора и реагирования на вебхуки

⇧Back to Index

Повышение производительности сайта

  1. Повышаем производительность и скорость загрузки сайта простыми способами- (выжимку из видео смотри в файле FrontendProjects)
  2. Быстрая загрузка страниц с preconnect и crossorigin - браузеры сначала подгружают ресурсы, объявленные в HTML. Однако ресурсные подсказки (crossorigin в теге ) сообщают браузеру о некоторых элементах заранее для ускорения загрузки.
  3. Оптимизация производительности фронтенда. Часть 1. Critical Render Path - или что браузер делает для того, чтобы пользователь увидел тот самый текст? Часть 2. Event loop, layout, paint, composite
  4. Оптимизация CSS для более быстрой загрузки страницы - перевод оригинальной статьи

⇧Back to Index

IDE

Редакторы кода

  1. VS Code – мощный редактор (IDE)
  2. Sublime text 3 – удобный и быстрый редактор кода
  3. Atom – крутой редактор от GitHub
  4. Brackets – подходит для начинающих
  5. Notepad ++ – легендарный редактор
  6. ReactIDE - заточенная под React IDE. Reactide runs an integrated Node server and custom browser simulator eliminating the need to configure any servers, build-tools, and even offers hot module reloading right out of the box.

Песочницы для кода

  1. JS fiddle – Песочница для JavaScript
  2. CodePen – Песочница для HTML, CSS о JS
  3. JS Bin – Песочница с выводом в консолью
  4. AWS Cloud9 - среда разработки (IDE), которая позволяет создавать, запускать и отлаживать код, используя только браузер. Она включает в себя редактор кода, отладчик и терминал.
  5. Koding.com — среда разработки с предустановленным веб-сервером и элементами социальной сети.
  6. CSSDesk - CSS-песочница с приятным и удобным интерфейсом.
  8. Tinker - Простая JS/HTML/CSS-песочница.
  9. SQL Fiddle - Инструмент для работы с SQL-базами
  10. ReFiddle - Сервис для работы с регулярными выражениями на Ruby, JavaScript и .NET.

⇧Back to Index

Прокачка скилов

  1. CodeWars - Задачи для тренировки навыков в языках программирования (JavaScript, Python etc)
  2. Flexbox Defense – игра для изучения Flexbox
  3. Flexbox Zombies - еще игрушка для изучения Flexbox
  4. FLEXBOX FROGGY - Flexbox на лягушках
  5. GRID GARDEN – игра для изучения Grid
  6. CSS Diner -It’s a fun game to learn and practice CSS selectors

⇧Back to Index

Верстка

HTML

  1. Регулярные выражения для валидации распространенных видов данных - для валидации распространенных видов данных для input полей, используя регулярные выражения
  2. Модальные окна для сайта - описание создания кастомной модалки с анимацией, с прокруткой, есть готовая библиотека и доки
  3. Markdown Cheatsheet

⇧Back to Index

CSS

Теория CSS

  1. Airbnb CSS / Sass Styleguide - Популярные стилевые правила кода для CSS/Saaa от Airbnb
  2. Ресеты и нормалайзы, что лучше использовать? (Reset or Normalize)
  3. Airbnb CSS-in-JavaScript Style Guide - Популярные стилевые правила кода для CSS-in-JS от Airbnb
  4. Как на самом деле работает position: sticky в CSS
  5. Глобальные и компонентные настройки стилей с помощью CSS переменных
  6. Использование Grid для макетов страниц, а Flexbox — для макетов компонентов
  7. Исследование CSS-свойства flex - как работает сокращённое CSS-свойство flex? Перевод статьи Digging Into the Flex Property
  8. Статьи по CSS от Ahmad Shadeed
  9. Cool uses of the ::before and ::after pseudoelements - делаем различные интересные вещи (кавычки, символы инь-янь, слайдеры со значением величины, увеличивающиеся кнопки с анимацией, появляющиеся слова)
  10. Vertical text alignment in buttons and inputs

⇧Back to Index

Шпаргалки по HTML и CSS

  1. Frontendchecklist - чек лист для фронтендеров (проверка тегов, изображений, JS, CSS)
  2. Html5book - шпаргалка по HTML, CSS, JavaScript и jQuery
  3. WebReference – ещё одна шпаргалка по HTML5 и CSS3. Также данный сайт опубликовал свои шпаргалки в виде риложений на Google Play.
  4. HTML Book - шпаргалка по HTML и CSS
  5. BEM CHEAT SHEET - Шпаргала по правилам БЭМ именований
  6. Emmet Cheat Sheet – шпаргалка по Emmet
  7. FlexBox - шпаргалка по Flexbox
  8. FreeCodeCamp - Шпаргалка по FlexBox
  9. CSS Cheat Sheet - шпаргалка по CSS
  10. Easings – Шпаргалка функций плавности
  11. Как правильно использовать переменные в препроцессорах LESS и SASS – Шпаргалка по LESS и SASS
  12. 30 seconds of code - Short code snippets for all your development needs (CSS, Python, React, Javascript etc)

⇧Back to Index

Анимации, эффекты

  1. CSS свойство transition
  2. CSS свойства animation и \@keyframes
  3. Animate.css – библиотека CSS анимаций
  4. Magic - кроссбраузерные анимации
  5. It's Tuesday. - простые и приятные CSS анимации
  6. Animista - можно поиграться с коллекцией готовых к использованию CSS-анимаций, настраивать, скачивать сгенерированный код
  7. Vivify - бесплатная библиотека анимации CSS. Просто подключите файл vivify.css перед тегом <head>. Добавьте класс vivify к элементу, который вы хотите анимировать. Если вы хотите, чтобы ваша анимация была бесконечной, вы также можете добавить infinite класс.
  8. Wow.js - анимация при появлении элемента
  9. Hover.css - набор анимаций CSS
  10. CSS3-анимация – полная статья про анимацию на CSS3
  11. Touch slider наJavaScript - подробное объяснение работы слайдера с кодом
  12. treejs - библиотека 3D анимаций
  13. animejs - библиотека 2D анимаций
  14. greensock - библиотека 2D анимаций
  15. Draggable – интересная JavaScript-библиотека для реализации drag&drop-эффектов.
  16. Block Reveal Effects – красивая реализация постепенного появления блоков страницы, раскрывающихся по мере ее скроллинга (по ссылке есть демо-пример).
  17. Thumbnail to Full Width Image Animation - Эффект трансформации миниатюры в полноразмерное изображение - Экспериментальная анимация, в которой изображение переходит от миниатюры к полной ширине, что позволяет создать стильный переход к прочтению статьи.
  18. Коллекция красивых эффектов при наведении для ссылок - самые интересные ховер эффекты для ссылок, которые гарантированно украсят ваши проекты и сделают их более динамичными.
  19. Коллекция прелоадеров

Прочее

  1. Coverr – Короткие видео для фона на сайт
  2. Subte Patterns - Фоны для сайта
  3. Генератор UTM-меток - отслеживание UTM меток
  4. Underscores – Пустая тема для Wordpress
  5. Minify – CSS и JS минификатор

  6. Unminify – Анминификатор для HTML, CSS, JS

  7. FreeFormatter.com – Vинификатор

⇧Back to Index

Препроцессоры

  1. Ускоряем адаптив сайта в 3 раза с помощью scss-миксина - работа с медиазапросами, galp
  2. Как правильно использовать переменные в препроцессорах LESS и SASS – Шпаргалка по LESS и SASS

Генераторы фона

  1. Kubist - конструктор полигональных фонов — разбивает фото на мелкие кубики, кружки, треугольнички...
  2. Trianglify Generator этот инструмент можно использовать для создания низкополигональных фонов с плавными градиентами, которые намного мягче, чем градиенты, созданные на основе метода Делоне. Инструмент включает в себя множество предустановленных цветовых комбинаций, что существенно упрощает процесс генерации полигональных текстур.
  3. CSS Patterns - Библиотека на чистом CSS помогает заполнить пустой фон красивыми узорами.
  4. Brusheezy - паттерные фоны, маленькие картинки (~32х32px) можно устанавливать как background repeat на фон страницы
  5. Toptal - еще такие же паттерны

Инструменты для работы с CSS

  1. CSS3gen – CSS генератор кнопок, градиентов,бордеров,теней трансформации, фона, анимации
  2. Type Anything - визуализатор настройки параметров текста (шрифт, размеры, отступы, прозрачность итп) + результирующий генератор CSS-кода
  3. Hailpixel – простой способ подобрать цвет в CSS (см. также Работа с цветом)
  4. CSSgradient – градиент генератор (см. также Работа с цветом)
  5. Smooth Shadow Generator - плавными кривыми создаем необходимый теневой рисунок, на выходе получаем код для вставки на страницу.
  6. Separator Generator – набор настраиваемых CSS-разделителей (косые, зубчики, волнистые итд) с возможностью легкого копирования кода.
  7. Patterns – это узоры во всех векторных форматах, доступные для коммерческих и личных проектов. Скачиваются одним файлом.
  8. CSS3patterns - CSS паттерны
  9. FreeFrontend - CSS паттерны
  10. Get Waves - Простое веб-приложение генерирует неповторяющиеся svg-волны – можно разнообразить границу футера
  11. Rad Lines – векторный генератор SVG-полигонов
  12. Blob Maker - генератор дизайна уникальных пузырчатых SVG-форм
  13. CSSworld – генератор flexbox контейнеров
  14. How To Center in CSS – центрируйте всё
  15. CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов
  16. Генератор Flexbox верстки - Конструктор Flexbox
  17. Генератор Grid верстки- Конструктор Grid
  18. Gridcalculator - генерирует колоночную сетку на ваш вкус. Готовую сетку можно скачать для Adobe Illustrator, Photoshop и как png image.

CSS-фреймворки

CSS-in-JS

⇧Back to Index

Типографика

Иконки

  1. Flaticons - бесплатные векторные иконки, largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats
  2. Font Awesome - иконочный шрифт + SVG
  3. UTF-8 Icons - иконки на utf-8
  4. Fontello - шрифтовые иконки. Шрифты генерируются на ходу из выбранных иконок, доступны иконки из 14 популярных шрифтов.
  5. IconMonster - бесплатные векторные иконки
  6. IcoMoon - векторные иконки
  7. IconStore – библиотека бесплатных векторных иконок для личных и коммерческих проектов, разработанных первоклассными дизайнерами.
  8. CSS.gg Icons – опенсорсные CSS, SVG и Figma UI иконки, доступные в SVG Sprite, styled-components, NPM и API.
  9. Icon Transition Generator - Создайте переход между двумя значками с помощью Icon Transition Generator и загрузите его в SVG. Загрузите сгенерированный код в Nucleo или импортируйте его сразу в свой проект.
  10. Tilda Icons – коллекция из более чем 700 бесплатных иконок, разделенных по категориям и тематикам.
  11. Ikonate - ресурс позволяет настроить иконку под ваши нужды и скачать ее.
  12. Eva Icons - в пакете 480 опенсорсных иконок на темы действий и предметов. Можно использовать в вебе, iOS и Android.
  13. Nucleo App – популярная библиотека с кучей иконок, а также мощное приложение для их сбора, настройки и экспорта
  14. Animated Icons - На ресурсе с незамысловатым названием Animated Icons вы найдете 400 бесплатных анимированных иконок.
  15. useiconic.com/open
  16. mfglabs.github.io/mfglabs-iconset
  17. fortawesome.github.io/Font-Awesome
  18. mariodelvalle.github.io/CaptainIconWeb
  19. drinchev.github.io/monosocialiconsfont
  20. www.entypo.com
  21. ionicons.com

⇧Back to Index

Шрифты

  1. Оптимизация шрифтов - статья Ilya Grigorik про форматы шрифтов, @font-face, оптимизация загрузки и отрисовки, оптимизации отрисовки шрифта с помощью Font Loading API, HTTP-кеширование
  2. REM vs EM - вечный спор, какие же единицы измерения использовать при верстке: em’ы или rem’ы. В каких случаях стоит использовать одни единицы, а в каких другие.
  3. Freebiesbug включает в себя не только шрифты, но и массу полезного контента: картинки, мокапы, шаблоны для сайта, вдохновляющие лендинги и прочее.
  4. Fonts Arena распространяет как бесплатные, так и платные шрифты. Для облегчения поиска есть разделение на категории .
  5. Befonts - тут можно скачать лучшие бесплатные шрифты для личного или коммерческого использования – красивый script type, профессиональный sans serif и многое другое.
  6. Font Squirrel - популярный среди верстальщиков ресурс, тут встроен генератор цветов, распознаватель, гора бесплатных шрифтов, форум и полезное чтиво по теме.
  7. Fontjoy – сервис для проверки сочетаний шрифтов из Google Fonts.
  8. Type Scale - проверка читаемости шрифта. Можно проверить, удобно ли читать шрифт в заголовках и при разном масштабировании, делает все необходимые вариации значения line-height и margins.
  9. Google Fonts - Веб-шрифты от Google
  10. Transfonter - Конвертер веб-шрифтов
  11. Onlinefontconverter — конвертер шрифтов в вебформат. Позволит подготовить весь набор шрифтов для использования на сайте.
  12. Фонтов.нет - Подбор шрифта по фразе
  13. Fonts4web - Шрифты для сайтов
  14. Type Anything - визуализатор настройки параметров текста (шрифт, размеры, отступы, прозрачность итп) + результирующий генератор CSS-кода
  15. FontStorage – Плагин, простой способ подключить шрифт

⇧Back to Index

Работа с цветом

  1. Colorsinspo – это тысячи красивых цветовых палитр и инструментов, которые можно использовать в один клик, а также гора тематического чтива и туториалов.
  2. Color Hexa - бесплатный инструмент, который предоставляет информацию о любом цвете и генерирующий соответствующие цветовые палитры. Просто введите любое цветовое значение в поле поиска и получите конвертированные значения в Hex, RGB, CMYK, HSL, HSV, CIE-LAB/LUV/LCH, Hunter-Lab, XYZ и Binary.
  3. Color Space - библиотека цветовых схем предоставляет множество вариантов построения цветовых схем для вашего следующего проекта.
  4. CSS Gradient – прекрасный генератор CSS-градиентов, ресурс содержит полезный обучающий контент.
  5. Palettte App - цветовые палитры по кривым, отличается тем, что цветовые схемы можно генерировать через наложение кривых.
  6. Colorable проверяет контрастность текста для заданной цветовой палитры с учетом цвета фона.
  7. ColorScheme - конвертер цветов

⇧Back to Index

Дизайн

Дизайн-макеты, шаблоны

  1. behance - Беханс
  2. dribbble - Дрибл
  3. TemplateMonster - компания разрабатывает и продает решения для веб-разработки, включая шаблоны сайтов, посадочных страниц, маркетинговых рассылок и т.д.
  4. Creative-tim UI Kits, Templates and Dashboards built on top of Bootstrap, Vue.js, React, Angular, Node.js and Laravel. Join over 1,190,110 creatives to access all our products!
  5. Design System Repo - обширный и пополняемый список ресурсов, руководств по стилю и библиотек шаблонов, которые можно использовать для вдохновения
  6. Themeforest - большая коллекция платные шаблоны и темы, можно посмотреть идеи и сверстать
  7. PSD шаблоны 1
  8. PSD шаблоны 2

⇧Back to Index

Работа с дизайн-макетами

  1. Avocode - платформа для работы макетами для верстальщиков (PSD, Sketch и др)
  2. Adobe Assets- работа с PSD-макетами прямо в браузере. Экспорт кода.
  3. Zeplin - работа с дизайн-макетами в браузере. Есть экспорт кода.
  4. PSD Tech - бесплатный аналог Avocode.
  5. Markupeasy - бесплатный аналог Avocode. Marsy это онлайн инспектор файлов PSD для верстальщиков. Он позволяет получить всю информациию необходимую для комфортной работы верстальщика. Работает в браузере и доступен абсолютно бесплатно.
  6. 50 Free Responsive HTML5 Web Templates
  7. Figma – уроки Артем Исламова
  8. Pureref составление мудборда - своеобразное превью будущего дизайна.

⇧Back to Index

Графика, Фото и видео

Работа с видео

  1. Coverr - ресурс с бесплатными фоновыми видео, придающими главной странице ощущение объёма и живости. Есть поиск и разбивка по тегам. Внизу главной страницы – шпаргалка о встраивании видео в HTML, CSS и JavaScript
  2. Mixkit - Потрясающие стоковые видеоклипы, музыка и шаблоны Adobe Premiere Pro. Всё совершенно бесплатно. Внизу главной страницы Mixkit разбиение блоков по тегам

⇧Back to Index

Оптимизация изображений

Также смотри Оптимизация изображений в Webpack

  1. Оптимизация изображений - Статья Ильи Григорика. Векторные и растровые изображения, оптимизация векторных изображений, оптимизация растровых изображений, сжатие данных с потерями и без потерь
  2. tinypng.com — в плане удобства TinyPNG бесспорный лидер. Можно за раз сжимать до 20 фотографий и быстро их сохранять. При этом данный сервис поддерживает кириллицу в имени и сохраняет файлы с таким же именем. Единственное ограничение — размер файл до 5 Мб.
  3. compressor.io/ — позволяет загружать файлы большого размера для обработки.
  4. squoosh.app — быстрый и удобный инструмент для подготовки фотографий к публикации в Сети от Гугл.
  5. svgomg — оптимизация SVG изображений.
  6. Resizeimage — поворот и обрезка изобажений без потери качества.
  7. Optimize - Optimize JPEG photos with resize and compress for a smaller size
  8. jpeg-optimizer.com Resize and Compress Digital Photos and Images Online
  9. optipng - Advanced PNG Optimizer
  10. ImageOptim for various platforms. ImageOptim is excellent for publishing images on the web
  11. optimage.app - Optimage is a simple yet powerful image optimization tool that provides the highest compression ratio at consistent visual quality, implementing many best practices for using images on web and mobile.

Работа с изображениями

  1. Работа с изображениями в Web -статья отзывчивые изображения, работа с логотипами, доступность изображения, SVG изображения и тд
  2. CDN imgix-CDN для изображений - пользователь скриптом генерирует урл для обращения к CDN уже со своими значениями широты экрана
  3. Пять способов отложенной загрузки изображений - перевод статьи Maria Antonietta Perna Источник https://www.sitepoint.com
  4. Best way to lazy load images for maximum performance - использование свойства lazy для отложенной загрузки или эмуляция его, если браузер не поддерживает отложенную загрузку

⇧Back to Index

SVG

Также см. пункт Работа с изображениями

  1. Sarasoueidan - статьи Сары о SVG
  2. The Best Way to Embed SVG on HTML (2020)

Логотипы

Также см. Иконки

  1. Seeklogo – векторные логотипы компаний
  2. SVG Porn - векторные логотипы (в основном фреймворки и инструменты, связанные с программированием, IT)
  3. TOP Logos - логотипы компаний (русские)

⇧Back to Index

Аватары

  1. uifaces - случайные аватарки пользователей для разработки
  2. Avataaars Generator - генератор мультяшных аватаров, служит для создания иконок уникальных учетных записей. Не знаете, какой стиль вам нужен – понажимайте на кнопки, пока не найдете то, что вам подходит.

Фотостоки

  1. Multicolr - подбор изображений по цвету

  2. freebbble.com скачивай бесплатно с Dribbble

  3. goodfon.ru - обои и картинки для рабочего стола

  4. Depositphotos - платный фотосток

  5. Shutterstock - платный фотосток

  6. Pixabay- сайт-монстр, старожил в индустрии. К набору, который даёт Pexels (фото+видео), здесь добавляется еще и коллекция векторных изображений и иллюстраций, которые можно бесплатно использовать в любых своих проектах, даже если вам за них платят. Общая коллекция сайта перевалила за полтора миллиона неповторяющихся фотографий, и можно найти что угодно для любой жизненной ситуации. Для разработчиков у Pixabay есть API, прямо как у Unsplash. Здесь тоже неограниченное количество запросов, и много возможностей по поиску фото нужных форм, размеров и фильтров. Есть поиск по названию сюжета.

  7. Unsplash - еще бесплатный фотосток. На Unsplash можно искать фотографии в высоком качестве по ключевым словам (лучше по-английски) или по категориям, собирать коллекции и делиться ими. Для тех, кому картинки нужны в процессе разработки или для автоматизации чего-нибудь, есть бесплатный API на JavaScript, PHP или Ruby.

  8. Pexels - бесплатный фотосток и видеосток. Концептуально Pexels очень похож на Unsplash - тоже много красивых фотографий от кучи талантливых авторов. Главное отличие -раздел с видео. Если у вас на сайте есть видео-шапка, но нет видео и денег, то попробуйте поискать здесь. Большинство видео загружаются на сайт в разрешении 3840 x 2160px, но можно при загрузке выбрать и меньшие версии - например, FullHD, если ваш компьютер не тянет 4K.

  9. Shopdiz.pro - скачивание ДЕШЕВО платных изображений с shutterstock depositphotos etc (у меня (@vados) есть аккаунт)

  10. Startupstockphotos - стартап фото - бесплатные фото деловых фотографий

  11. Photo Creator - Сайт-конструктор для создания реалистичных фотографий из изолированных слоев с изображениями тысяч моделей, объектов и фонов. JPEG на Photo Creator бесплатны, PSD-файлы доступны по платной подписке.

  12. gratisography - смешные фото

  13. pngtree.com — бесплатные PNG картинки, вырезанные из фона

⇧Back to Index

Иллюстрации

  1. Open Peeps – интересная библиотека нарисованных от руки иллюстраций.
  2. Smash Illustrations - Крутой конструктор иллюстраций для построения сцен с красочными рисунками и персонажами. Smash Illustrations работает со Sketch, Figma, можно создавать изображения в формат svg и png.
  3. Open Doodles – бесплатный набор скетч-иллюстраций и анимаций на любой случай.
  4. Control Illustrations - конструктор сценок. Библиотека Control Illustrations включает 108 иллюстраций с настраиваемым стилем и типами действий. Используйте конструктор, чтобы создать сцену, которую вы ищете.
  5. Ouch!- Проект Ouch! посвящен бесплатным векторным иллюстрациям в разных стилях, которые можно применить в пользовательских интерфейсах.
  6. Avataaars Generator служит для создания иконок уникальных учетных записей. Не знаете, какой стиль вам нужен – понажимайте на кнопки, пока не найдете то, что вам подходит.
  7. Faux Code Generator - Часто в иллюстрациях, связанных с программированием, полезно изобразить код, но в каком-то обобщенном виде, скрыв само содержание. Faux Code Generator превращает реальный код (GitHub Gist) в искусственный (SVG-изображение).

⇧Back to Index

Создание изображений

  1. Generated Photos - Самый практичный способ получить качественные портреты с настройкой фона для коммерческого контента - взять лица, сгенерированные нейросетями.
  2. Photo Creator - Сайт-конструктор для создания реалистичных фотографий из изолированных слоев с изображениями тысяч моделей, объектов и фонов. JPEG на Photo Creator бесплатны, PSD-файлы доступны по платной подписке.
  3. RANDOM USER GENERATOR - еще один сайт для создание изображений лиц, а также free, open-source API for generating random user data. Like Lorem Ipsum, but for people
  4. PlaceIMG - api, предоставляющее изображения заданного размера и заданной тематики (люди, природа, животные итп)

⇧Back to Index

Редактирование изображений

  1. Сompressor - Сжимает JPG и PNG

  2. Tiny png - Сжимает изображения. Есть API.

  3. Vectorizer – Из растрового в векторное изображение

  4. Online-Convert - Бесплатный конвертер из растрового в векторное изображение

  5. Unscreen удаляет фон с видео и гифок.

  6. Remove Background все, как и в инструменте Unscreen, только ресурс работает со статичными изображениями. У сервиса есть платный API для получения батчей полноразмерных изображений с удаленным фоном.

  7. Дуотон - представление изображения в паре цветов. Сервис Duotone конвертирует любую фотографию в дуотон за считанные секунды. То есть можно настроить любые два цвета под палитру вашего ресурса и получить стильные вариации фотографии, как будто сделанные специально для вас.

Создание баннеров

Баннеры можно нарисовать самостоятельно, а можно использовать готовые шаблоны и тем самым ускорить процесс поиска идеи и реализации. Вот сервисы, которые смогут помочь вам в этом.

  1. https://www.canva.com/ — баннеры и постеры
  2. https://www.logaster.ru/ — логотипы
  3. https://www.easel.ly/ — инфографика

Прелоадеры

  1. loading.io - Ajax Loader, Animated Icons, Live Background in GIF / SVG / APNG / CSS !

⇧Back to Index

⇧Back to Index

Конструкторы сайтов

  1. Vigbo - Конструктор сайтов Vigbo — это готовые дизайны, простое управление, неограниченное дисковое пространство, домен, техподдержка.

Китай

Alibaba - китайский сайт компании Alibaba (аналог - 1688.com)

jd.com - jd.com (аналог - 3.cn)

DJANGO

Статьи

  1. Как Django может обрабатывать 100 миллионов запросов в день
  2. WebSockets in Django 3.1 - альтернативный вариант создания websockets без использования Channels, написание consumer’a чистым класоом с нуля.

⇧Back to Index

⇧TestLink

TestLink 2

АЛФАВИТНЫЙ УКАЗАТЕЛЬ