Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Новости и занимательное |
Веб-разработка
Autofill: чего не знают веб-разработчики, хотя должны знать- Git: подстраховка для ваших проектов
- Wintersmith — генератор статических сайтов на Node.js
- Google улучшил функционал AMP-страниц, добавив новые возможности.
- О jQuery и Bootstrap: расставляем точки над «i»
- От нуля до героя фронтенда: Часть 1, Часть 2
- Медиа:
- Подкаст Веб-стандартов, Выпуск №17: Семантика и БЭМ, CSS для новичков, клиенты для Git, JS-модули в Edge, Google I/O.
AMP + прогрессивные веб-приложения (AMP + Progressive Web Apps: Start fast, stay engaged — Google I/O 2016)- Гудини: демистификация будущего CSS (Houdini: Demystifying the Future of CSS — Google I/O 2016)
- Мгновенная загрузка: создание offline-first прогрессивных веб приложений (Instant Loading: Building offline-first Progressive Web Apps — Google I/O 2016)
- Frontend Party, Питер, 29 апреля 2016
- MIND Patterns — шаблоны доступных компонентов для веба от ebay (Accessibility Patterns for the Web)
- Почти полное руководство по переходу на Gulp 4 (The Complete-Ish Guide to Upgrading to Gulp 4)
- Прогрессивные веб приложения — что это за хрень? (WTF are Progressive Web Apps?)
- Регрессивные веб-приложения (Regressive Web Apps)
- Как провести простой аудит доступности сайта, ч.2 (Part 2: How to Conduct a Basic Accessibility Audit on Your Site)
- Объяснение понятия семантики (Understanding semantics)
- placeholder.pics — легкий способ подключения изображений-плейсхолдеров, представляющих из себя оптимизированный SVG
- Как начать работать с Политикой Безопасности Контента (How to Get Started with a Content Security Policy)
- Фронт-энд разработка после Internet Explorer (Front End Development after Internet Explorer)
- Service Workers 101 — инфографика с наиболее важными частями Service Workers API (Service Workers 101 — An infographic to summarize the most important parts of the Service Workers' API)
- Важность URL-ов (The importance of URLs)
- Как перенести шрифты Google на свой CDN (How to Migrate Google Fonts CDN to Your Own CDN)
- google-webfonts-helper — простой способ использовать Google Web шрифты на своем хостинге
- SVG:
- Новый бесплатный курс «Знакомство с SVG» на HTML Academy.
- «SVG за пределами простых форм» — доклад Nadieh Bremer с OpenVis Conf (SVG Beyond Mere Shapes — Nadieh Bremer)
- SVG примеры маскирования Path — использование Paths и текста (SVG Clipping Path Examples — Using Paths And Text)
- Создание адаптивного логотипа бренда с помощью SVG (Make an Adaptive Branding Module with SVG)
- Создаем отзывчивые графики и инфографику на SVG
- Эффектный веб:
- Еженедельная подборка красивых эффектов на CSS/SVG/JS #39
- Создание вертикального таймлайна с помощью капельки JavaScript
- Эффектное демо трансформации изображений (что увидеть эффект нужно прокрутить колесо прокрутки мыши) (Displacementmap image transition)
- Трехмерная изометрическая сетка (Isometric and 3D Grids)
- Создание аналоговых часов с помощью Web Animation API (Make an Analog Clock with the Web Animation API)
CSS
- Магия CSS. Глава 2. Раскладка
- Линтинг CSS с помощью stylelint
- Инспекция и причёсывание CSS
- Отладка CSS. Перевод статьи Debugging CSS
- Stylelint: валидатор стилей, о котором мы всегда мечтали (Stylelint: The Style Sheet Linter We’ve Always Wanted)
- Хроматические веб-шрифты (Chromatic Web Fonts, Redux)
- Вставка разрыва строки в CSS (Injecting a Line Break)
- inStyle (модификация текущего селектора `&` в Sass) (Modifying the Current Selector `&` in Sass)
- Интересное предложение о добавлении правил When/Else в CSS
- Джонатан Снук разбирается с каскадом и специфичностью (Dealing with the Cascade and Specificity)
- Его же мысли по поводу компонентного дизайна (Considerations in Component Design)
- Соображения по стилизации тега pre (Considerations for styling the pre tag)
- Свойство box-shadow (The box-shadow Property)
- Family.scss — полезные Sass примеси для работы с :nth-child элементами
- Пять способов создания прилипающего футера (Sticky Footer, Five Ways)
- Atomic CSS модули (Atomic CSS Modules)
- Система атрибутов для Flexbox разметки (Flex Layout Attribute)
- Проектируем стили фронтэнда (Architecting Front-end Styles)
- Starability.css – доступный звездочный рейтинг с анимацией
- CSS-шутки (28 CSS Puns to Brighten Your Day)
JavaScript
- Использование JavaScript для атаки через манипуляцию с содержимым буфера обмена
- JavaScript-only: гомогенная архитектура веб-проектов
- Подробное объяснение ключевого слова 'this' в JavaScript (Gentle explanation of 'this' keyword in JavaScript)
- Апгрейдим мусорный код IE8 с помощью современных плюшек (Upgrading junky IE8 code with current goodies)
- Компиляция в JavaScript: 4 альтернативы для JS (Compile to JavaScript: The 4 best alternatives to JavaScript)
- Да здравствует jQuery (Long Live jQuery)
- Быстрый совет: сохранение состояния чекбокса после перезагрузки страницы (Quick Tip: Persist Checkbox Checked State after Page Reload)
- Создание простого JavaScript слайд-шоу без jQuery (Make a Simple JavaScript Slideshow without jQuery)
- Анимированный градиент для имитации потока с использованием d3.js (Animating a gradient to imitate a flow using d3.js)
- Визуализация алгоритмов (Algorithm Visualizer)
- Фреймворки:
- React:
- Погружение в React: роутер
- HTML to React — утилита для разбивки HTML на React-компоненты
- Ваш график для изучения React (Your Timeline for Learning React)
- CSS Модули и React
- Создание шаблонов React в WebStorm
- Укрощение настройки React (Taming the React Setup)
- Клонируем Yelp с помощью React (React Tutorial: Cloning Yelp)
- React и Firebase вместе (React and Firebase, sittin’ in a tree)
- Angular:
- 10 основный причин, по которым разработчикам стоит использовать AngularJS (Top 10 Reasons: Why Web Developers should use AngularJS)
- AngularDoc — документация для Angular 2 проектов
- Миграция с ванильного JavaScript на Angular 2 в NativeScript (Moving from Vanilla JavaScript to Angular 2 in NativeScript)
- Angular и Webpack для модульных приложений (Angular and Webpack for Modular Applications)
- Создание Angular 2 демок с System.js и TypeScript (Building Angular 2 Demos With System.js And TypeScript)
- Создание игры с Ember (Make a game with Ember by mattmckenna)
- Не ругайте фреймворк: мой опыт с AngularJS и ReactJS (Don’t blame the framework: my experience with AngularJS and ReactJS)
- React:
- Плагины:
- WebGazer.js — отслеживание направления взгляда через веб-камеру в браузере
- ally.js — библиотека делающая доступность приложений более простой
- Tourist.js — для создания маршрута по функцональностям вашей страницы
- Bideo.js — библиотека для добавления фонового видео (Bideo.js)
- Target.js! — добавляет функциональность к DOM элементам с помощью data-атрибутов
Браузеры
- Как установить в Firefox расширения Chrome
- Выпуск web-браузера Chrome 51
- Измерение элементов и расстояний в Firefox DevTools (Measuring elements and distances in Firefox DevTools)
- Поддержка вашим браузером WAAPI (WAAPI Browser Support Test)
- Создание расширений для Microsoft Edge (Building Extensions for Microsoft Edge)
- F12 Edge Developer Tools
- Появилась технология для показа рекламы в веб-браузерах в обход блокировки
- В браузере Opera появилась персональная новостная лента
Новости и занимательное
- Анонс от Facebook: «New Response Graph for Live Content»
- Facebook и Microsoft проложат оптоволоконный кабель через Атлантику
- Google обрабатывает свыше 2 трлн поисковых запросов в год
- В Google Photos 13,7 петабайт фотографий и видео
- The Verge: Microsoft потеряла $8 млрд на присоединении Nokia
- Во Франции запретили отправлять электронные письма сотрудникам после завершения рабочего дня
- Почему Google одержала верх над Yahoo — на примере решения одной проблемы
- Пятилетний забег: как изменился «Яндекс» с момента IPO
- Google создала в Париже квест в реальности, который можно пройти только с помощью продуктов компании
- Интернет дырявых вещей
- «Печальная карьера — это когда они идут работать в Facebook или в “Яндекс”»
- Каково знать клингонский язык и читать на нём Шекспира
- Большие ожидания: что хранится в капсулах времени
- Как студент добился стажировки мечты с помощью фильтра Snapchat
- Как «несерьёзные» «Хромбуки» проложили Google дорогу на рынок ПК
- Почему вам обязательно нужно узнать, что такое Scrum
- История украинского хакера, который стал лучшим оружием ФБР и худшим его кошмаром (Перевод публикации в Wired)
- Как типографика может сохранить вашу жизнь
- Google IO 16 — рассказ о двух Google (Google IO 16 — A tale of two Googles)
- Как работает Mediachain (How Mediachain Works)
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
