frontend-tips
frontend-tips copied to clipboard
ademaro
Сборник полезных ссылок для начинающих и продвинутых front-end разработчиков
frontend-tips
- html&css кодстайл: оригинал на английском, перевод
- js кодстайл: от Airbnb, от javascript.ru
- Общие стандарты и рекомендации оформления кода
- Принципы написания однородного CSS-кода
- Словарь терминов по фронтенду
- (1) Слова, часто используемые в CSS-классах, (2) Типичные названия классов в HTML, (3) Слова и сокращения в CSS-классах
- Коллекция практических советов и заметок по вёрстке
- Front-End Developer Handbook 2017
- 10 современных однострочных раскладок (en)
- Браузерные стили
HTML5
- Спецификация для разработчиков от WHATWG, 2, последняя спецификация от консорциума W3C
- Напоминалка по выбору html5 тегов
- http://html5doctor.com/ — для тех, кто сомневается какой тег использовать
- http://bitsofco.de/2015/sectioning-content-in-html5/ — статья про выбор
<div>,<section>или<article>(eng) - http://pepelsbey.net/pres/sense-coding/ — старо, но актуально (лекция Макеева)
- http://pepelsbey.net/2011/07/sense-coding/ — к презентации Макеева
- http://design-for-business.ru/analytics/articles/id/504.htm — про сетку на сайте
- Про вертикальный ритм, столь важный для типографики, 2
- Очередной гайд по HTML-элементам, которые можно использовать в каждом проекте
Доступность
- Эффективное использование ARIA в HTML5
- Верстка сайтов для людей с ограниченными возможностями
- Государственный сайт, доступный для людей с ограниченными возможностями
- Интернет для людей с ограниченными возможностями: почему мы не должны проектировать его для «других»
- Подстраховка web-доступности семантических областей HTML5 через роли WAI-ARIA
- Доступность веб‑страницы
- Проверка сочетания цветов по WCAG
- Чеклист для проверки доступности
- 5 самых частых ошибок досупности (и способы из решений)
- Как HTML и CSS влияют на доступность ч1, ч2, ч3
Техники
Методологии
- Способы организации CSS-кода
- БЭМ-методология: с чего всё начиналось и зачем это всё нужно
- Поверка дерева на классы по БЭМ, 2
- Как работать с CSS-препроцессорами и БЭМ
FlexBox
- http://pepelsbey.net/2013/05/flexbox-gotcha/
- http://html5.by/blog/flexbox/
- https://codepen.io/ademaro/full/ZWGWXE/
- http://bennettfeely.com/flexplorer/
- https://github.com/philipwalton/flexbugs
- http://bitsofco.de/6-reasons-to-start-using-flexbox/
- https://www.smashingmagazine.com/2016/02/the-flexbox-reading-list/
- Интерактивный игровой туториал по flexbox
- Игрухи на прохождение: раз, два
- Сборник ресурсов по флексбоксам
- 11 вещей которые я узнал, читая спецификацию flexbox
- Шпаргалка по Flexbox (CSS3 Flexible Box)
- Полный гайд по флексбоксам на английском на css-tricks
- Исследование CSS-свойства flex
Grid Layout
- Лекция Макеева по гридам (презентация к лекции)
- Пора начинать фыркать, Сергей Попов (Слайды)
- Игруха для изуения гридов
- Полный гайд по гридам на английском на css-tricks
- CSS Grid Generator
- Grid cheatsheet от Yoksel
- Grids on MDN
- Подробности об использовании CSS-функции minmax() в Grid-макетах
- Полное визуальное руководство/шпаргалка по CSS Grid
Adaptive
JavaScript
- ES5 руководство по JavaScript
- Что такое Throttling и Debouncing?
- Throttling vs Debouncing (en)
- Debounce vs Throttle vs Audit vs Sample наглядно
- Порядок выполнения скриптов в HTML. Тег script и атрибуты async, defer, module, nomodule и src
- Знакомимся с перебирающим методом Reduce на примерах (en)
- Как считать объекты в массивах (en)
- Оператор нулевого слияния
- Лексическое окружение (LexicalEnvironment) и Замыкание (Closures) в EcmaScript
- Шпаргалка по JS-методам для работы с DOM
- Крутое видео про асинхронность (Как работает цикл событий event loop)
Git
- Толковая обучалка, если есть немного времени
- Игра-обучалка
- Очень краткое руководство-шпаргалка
- Крутой перевод крутой статьи про гит: читается на одном дыхании, практически все возможности гита очень доступным языком
- Слегка сумбурное видео от меня на примере техномарта), ссылка на гит-репу из видео, если кому интересно)
- Более детальное руководство-обучалка)
- Хороший список туториалов от atlassian (en)
- Понятные и наглядные обучалки от гитхаба (en)
- 19 советов по повседневной работе с Git
- Шпоргалка по гиту и ещё одна
- Эффективное использование Github
- Ох, твою мать, git!
- Иконки для коммитов в гитхабе, 2
- Git: подстраховка для ваших проектов
- Git happens! 6 типичных ошибок Git и как их исправить
- Как следует писать комментарии к коммитам и Мой любимый Git-коммит — советую почитать, что бы понять что писать в название и описание коммита
- Команды исправления допущенных ошибок (Версия без цензуры) — Git, я хочу все отменить!
SVG
- SVG в вебе: Практическое руководство
- SVG-иконки – много и со стилем
- SVG
usewith External Source (en) - Делаем разноцветные иконки с помощью SVG-символов и CSS-переменных
Favicons
Fonts
- Таблица с распространёнными шрифтами и процентами присутствия
- Шрифты в вебе, обзор от 2016 года
- Улучшение загрузки шрифтов c помощью localStorage и WOFF2
Maps
Advanced
- Детальный разбор как работает z-index
- 22 CSS-трюка
- Как работают браузеры: принципы работы современных веб-браузеров
- О сборке front-end проекта
- Производительность анимаций
- The Future of CSS: Scroll-Linked Animations with @scroll-timeline, Pt.1
- Хинтинг ресурсов в браузере с помощь Prefetch, Preconnect и Prerender
- Preload, prefetch and other
<link>tags - Оптимизация производительности фронтенда. Часть 1. Critical Render Path
- Серия статей про Web Animations API:
Preprocessors
- Easy Media Queries Shortcodes (w/ LESS) + tester tag
- PostCSS Quickstart Guide: Gulp Setup
- 4 мифа о PostCSS
- Интересные и необычные CSS рецепты (En)
- О PostCSS от его создателя
- Как валидировать Sass/CSS с Stylelint (En)
- «Эстетичный Sass», серия статей:
Optimization
- Максимально оптимизированная веб-загрузка изображений в 2021 году
- Почему ваш веб-сайт должен быть меньше 14 КБ
Security
Tools
Psd
- http://freebiesbug.com/psd-freebies/website-template/
- http://www.freepik.com/free-psd/web-templates
- https://psdrepo.com/tag/free-psd-website-templates/
- https://symu.co/freebies/templates-4/
- https://dcrazed.com/free-photoshop-psd-website-templates/
- http://blazrobar.com/tag/full-website-design/
Examples
Sliders
- http://tympanus.net/Development/ParallaxContentSlider/
- http://tympanus.net/Tutorials/FullscreenSlitSlider/
Icons
- http://line25.com/articles/free-pure-css-icon-sets
ademaro