For Web — фронтенд, дизайн, программирование
14.7K subscribers
5.47K photos
7 videos
5 files
1.74K links
Новости и полезности для фронтендеров.
Поддержать, чтобы в канале не было рекламы:
https://patreon.com/forweb
https://boosty.to/forweb
Download Telegram
Селекторы по атрибуту: принципы работы, продвинутые возможности и примеры их практического применения в подробном обзоре Джона Реа → https://www.smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css/
Бэкенд для фронтенда: как в Яндекс.Маркете делают удобный для фронтенда API без костылей → https://habr.com/p/428141/
Свежий выпуск The State of the Web с Эндрю Бэттсом из Fastly о полезных новых и старых HTTP-заголовках → https://youtu.be/riPSW5P127M
[Вакансия, офис, Санкт-Петербург]
Фронтенд-разработчик в АйТи-бюро «Зебра»

Привет, давай знакомиться! Мы делаем корпоративные сайты для крупных российских и зарубежных компаний. У нас много наград и в целом получается неплохо. Но нам очень не хватает ещё одного фронтенд-разработчика, чтобы делать проекты ещё лучше. Если ты опытный разработчик, но готов учиться новому и делиться своим опытом, высылай свое резюме на адрес [email protected].

Тебе предстоит разрабатывать интерфейсы, оптимизировать и рефакторить код, внедрять новые технологии, участвовать в обсуждении и проектировании интерфейсов с командой.

Мы предлагаем:
— работу в классной команде с опытными коллегами;
— комфортный офис в районе м. Выборгская;
— достойную и своевременную оплату труда не реже чем раз в неделю;
— рабочий график с плавающими рамками;
— возможность посещения конференций за счёт компании;
— доступ к обучающим сервисам (HTML Academy, Hexlet, CodeSchool, Coursera).

Что мы ждем от тебя:
— уверенные навыки кроссбраузерной адаптивной вёрстки, понимание методологии БЭМ;
— уверенные знания JavaScript (ES5+);
— опыт работы с различными JS-фреймворками и библиотеками (Vue, React, Angular, D3);
— опыт работы с векторной графикой (SVG), достаточный для программирования анимаций;
— опыт работы с Git, CSS-пре(пост)процессорами, инструментами автоматизации и сборки (Gulp/Webpack);
— опыт вёрстки под интеграцию в CMS (любую), понимание того, как устроена шаблонизация.
🎧
Свежие подкасты

Frontend Weekend №77, в гостях Александр Амосов: почему стоит начать работать с 3D в браузере → https://soundcloud.com/frontend-weekend/fw-77

«Веб-стандарты» №144, в гостях Олег Исонен и Артём Сапегин: события в Берлине, веб-компоненты, PWA на десктопе, Styleguidist и JSS, CSS-in-JS → https://medium.com/p/f477355f028d

«Веб-стандарты» №145: тёмный режим в Safari, WebAssembly в Chrome, что нового в CSS, сортировка CSS-свойств, вариативные шрифты с фолбэком, почему у дизайнеров не получается, хуки, или React по-новому → https://medium.com/p/9fe1b6c4f697

«Новости 512» от CSSSR №27: обзор новостей, релизов и интересных публикаций → https://soundcloud.com/csssr/novosti-512-vypusk-27-2910-0411

«Девшахта» №55, в гостях Илья Кашлаков: быть тимлидом → https://medium.com/p/3aa3f551e3a2
Как решить проблему дублируемой конфигурации ESLint, если в компании много фронтенд-проектов? Опыт инженеров blogfoster → https://engineering.blogfoster.com/centralized-eslint-configuration/
Опыт внедрения CSP в Dropbox

Серия статей от инженеров Dropbox об их опыте внедрения Content Security Policy:
1. On Reporting and Filtering
2. Unsafe-inline and nonce deployment
3. The Unexpected Eval
4. Third Party Integrations and Privilege Separation
Что и как тестировать с помощью Jest и Enzyme? Полная инструкция по тестированию Реакт-компонентов от Алёны Писаренко в переводе Александра Шулаева → https://medium.com/p/d3504f3fbc54
This media is not supported in your browser
VIEW IN TELEGRAM
Algojammer, экспериментальный редактор алгоритмов со встроенными средствами визуализации, вдохновлённый Бретом Виктором → https://github.com/ChrisKnott/Algojammer
Закон Хайрама

Контракт вашего API становится не важен при достаточном количестве пользователей: от любого наблюдаемого поведения системы кто-то будет зависеть, а значит любое изменение будет что-то ломать → https://www.hyrumslaw.com/
Подробный обзор техники long polling: как она появилась, какие задачи решает, как реализуется и как её можно применить на практике → https://www.ably.io/concepts/long-polling
Carlo, экспериментальный фреймворк для разработки десктопных приложений на Node.js, в отличие от монолитного Electron использующий установленный в системе Chrome → https://github.com/GoogleChromeLabs/carlo
Подробный разбор реального Webpack-конфига с разделением окружений на development и production, горячей перезагрузкой, кодсплиттингом, генерацией облегчённого бандла для современных браузеров и множеством других возможностей → https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development
PostCSS исполнилось пять лет: Андрей Ситник об истории создания проекта, достижениях сообщества и планах на будущее → https://evilmartians.com/chronicles/five-years-of-postcss-state-of-the-union
Запись видео с эффектом бумеранга на JavaScript, руководство Пола Кинлана → https://paul.kinlan.me/simple-boomerang-video/
Оптимизация быстродействия основного лендинга Netflix, подробный рассказ Эдди Османи: время загрузки и TTI уменьшились на 50%, предзагрузка ресурсов сократила TTI после переходов между страницами на 30%, JS-бандл лендинга уменьшился на 200 КБ → https://medium.com/p/c0bcde26a9d9
For Web — фронтенд, дизайн, программирование
Оптимизация быстродействия основного лендинга Netflix, подробный рассказ Эдди Османи: время загрузки и TTI уменьшились на 50%, предзагрузка ресурсов сократила TTI после переходов между страницами на 30%, JS-бандл лендинга уменьшился на 200 КБ → https://me…
Рецепт оптимизации веб-перформанса от Netflix:
1. Сделайте лендинг на Реакте.
2. Зафиксируйте метрики быстродействия.
3. Осознайте, что для лендинга Реакт нужен максимум в качестве серверного шаблонизатора.
4. Удалите Реакт из клиентского бандла.
5. Снова зафиксируйте и сравните метрики быстродействия.
6. Профит: хвастайтесь красивыми цифрами и ждите статью о вашем успехе от сотрудников Google.
Как реализовать хорошую тёмную тему, советы Энди Кларка по мотивам редизайна его собственного сайта → https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode
От сервера к клиенту: как браузер загружает страницы/ресурсы и как на загрузку влияют сервис-воркеры, механизмы кеширования и origin model? Подробное объяснение Али Алабаса → https://alistapart.com/article/server-to-client