Size: a a a

For Web — фронтенд, дизайн, программирование

2018 November 05
For Web — фронтенд, дизайн, программирование
Опыт внедрения 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
источник
For Web — фронтенд, дизайн, программирование
Что и как тестировать с помощью Jest и Enzyme? Полная инструкция по тестированию Реакт-компонентов от Алёны Писаренко в переводе Александра Шулаева → https://medium.com/p/d3504f3fbc54
источник
For Web — фронтенд, дизайн, программирование
Algojammer, экспериментальный редактор алгоритмов со встроенными средствами визуализации, вдохновлённый Бретом Виктором → https://github.com/ChrisKnott/Algojammer
источник
For Web — фронтенд, дизайн, программирование
Закон Хайрама

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

Эрик Эллиот в переводе на Хабре об истоках ООП, популярных заблуждениях и о том, почему JavaScript к ближе к ООП, чем С++ → https://habr.com/p/428582/
источник
For Web — фронтенд, дизайн, программирование
Три ошибки инженеров в продажах

Любой инженер сталкивается с продажами, будь то «продажа» придуманной фичи продакт-менеджеру или продажа собственного продукта пользователям. Джефф Фергюсон рассказал, какие при этом ошибки совершает большинство инженеров и как их избежать → https://www.pipelinedb.com/blog/three-sales-mistakes-software-engineers-make
источник
2018 November 10
For Web — фронтенд, дизайн, программирование
47 видео с ReactiveConf 2018: доклады, панельные дискуссии и AMA-секции → https://www.youtube.com/playlist?list=PLa2ZZ09WYepPQAIo1h98LaPkQUYwaSbWO
источник
2018 November 11
For Web — фронтенд, дизайн, программирование
Прокачиваем навыки отладки с помощью инструментов разработчика Chrome

Руководство Питера Милчева в переводе CSS-Live.

Часть 1, основы → http://css-live.ru/faq/prokachivaem-navyki-otladki-s-pomoshhyu-instrumentov-razrabotchika-chrome-chast-1.html

Часть 2, продвинутые техники → http://css-live.ru/faq/prokachivaem-navyki-otladki-s-pomoshhyu-instrumentov-razrabotchika-chrome-chast-2.html
источник
For Web — фронтенд, дизайн, программирование
rawact, вдохновлённый Svelte экспериментальный компилятор React-компонентов в нативные DOM-инструкции для получения меньшего количества кода, чем при подключении react-dom → https://github.com/sokra/rawact

react-dom содержит код, реализующий кастомную систему событий, инкрементальную отрисовку и множество других фич, которые могут не использоваться в вашем приложении. Подход Svelte и rawact позволяет получить на выходе только используемый приложением код.
источник
2018 November 12
For Web — фронтенд, дизайн, программирование
fx, CLI-утилита для удобного просмотра и преобразования JSON-файлов с помощью JavaScript → https://github.com/antonmedv/fx
источник
For Web — фронтенд, дизайн, программирование
Краткая история дизайна календаря: какими были первые календари и как они пришли к нынешнему виду → https://uxdesign.cc/c3f876689fed
источник