Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Новости и Занимательное |
Веб-разработка
- Подкаст Веб-стандарты, Выпуск №27: Видео в iOS, ChakraCore конкурент V8, доступные модальные окна, таблицы и формы, чехарда с цветовыми функциями CSS.
Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса
Организация задач в Grunt (Organizing Your Grunt Tasks)- Оптимизация производительности критического пути с помощью Express Server и хендлебаров (Optimizing Critical-Path Performance With Express Server And Handlebars)
- Оптимизация PNG (PNG optimisation)
- Как подготовиться к собеседованию на фронтенд-разработчика (How to prepare for an interview for a front-end developer)
- Ретроспектива использования генератора статических сайтов (Using A Static Site Generator At Scale: Lessons Learned)
- Веб-компоненты и прогрессивное улучшение (Web Components and progressive enhancement)
- Руководство по работе с мобильным SEO (Your Guide to Getting Started with Mobile SEO)
- Самая сложная часть веба — это его невидимые части (The hardest parts of the Web are the invisible parts.)
- Расширяемые веб компоненты (Extensible web components)
- Как писать неподдерживаемый код (unmaintainable-code)
- Когда использовать переключатель, а когда чекбокс (When to Use a Switch or Checkbox)
- Web Animations API:
- Поддержка Web Animations API появилась в Firefox 48
- Подборка демок и экспериментов с Web Animation API
- Когда использовать Web Animations API (When to Use the Web Animations API)
- Accessibility:
-
A11ycasts — новый подкаст на канале разработчиков Google, посвященный доступности. А также выпуск #02: Inert Polyfill - Букмарклеты для тестирования доступности (Bookmarklets for Accessibility Testing)
- Edge прошел все тесты HTML5 Accessibility (Edge is the only browser to perform 100% in HTML5 Accessibility test)
- SVG:
- Высокопроизводительные SVG (High Performance SVGs)
- 3 странных браузерных несоответствия в SVG (3 Weird SVG Browser Inconsistencies)
- Интерактивный эффект просвечивания сквозь очки с помощью SVG масок (“Put On The Sunglasses, Frank”: An Interactive with SVG Masks)
- Уроки:
- Как я создал большую мультиплеерную онлайн-игру на HTML5 canvas за одну неделю (How I built a Massive Multiplayer Online HTML5 Canavs Game in One Week)
- Как создать восьмибитную драм-машину с помощью Web Audio, SVG и Multitouch (How To Create A Responsive 8-Bit Drum Machine Using Web Audio, SVG And Multitouch)
CSS
- Полноэкранные контейнеры внутри элементов ограниченной ширины. Перевод статьи Full Width Containers in Limited Width Parents
- CSS-изоляция. Перевод статьи CSS containment
- Использование вьюпорта для создания индикатора промотки страницы на чистом CSS (Using viewport units to create a CSS-only scroll indicator)
- Тайминг — это всё: улучшите ваши анимации с помощью нелинейных кривых (Timing is Everything: Improve your animations with custom, non-linear timing curves )
- Tootik — css-библиотека на CSS/SCSS/LESS для создания симпатичных тултипов
- Манипуляция с цветами Sass с помощью функциями HSL и прозрачности (Manipulating Sass Colors With HSL And Opacity Functions)
- Aphrodite vs. JSS
- Открывающаяся книга на «чистом CSS3»
- CSS mix-blend-mode — плохая практика для истории вашего браузера (CSS mix-blend-mode is bad for your browsing history)
- Приоритет в CSS (когда порядок в CSS имеет значение) (Precedence in CSS (When Order of CSS Matters))
- Cutestrap, легковесный CSS фреймворк (очередной) (Getting to Know Cutestrap, a Lightweight CSS Framework)
- Обзор единиц измерения CSS: углов, времени и частоты
JavaScript
- Как учить людей JS: Часть 1. Заметки на полях
- Распознавание голоса и чтение текста в браузере в 3 строки на JavaScript: демонстрация и примеры кода
- Представлен бесплатный видеокурс по современным технологиям для веб-разработчиков: ES6, ESnext, Node.js, NPM, RxJS, WebPack и TypeScript
- Функциональный TypeScript (Functional TypeScript)
- Понимание нативных методов для массивов в JavaScript (Understanding native JavaScript array methods)
- Детальный обзор symbols в ES6 (Detailed overview of well-known symbols)
- Заметки Джейка Арчибальда по мотивам мероприятия на тему сервис-воркеров (Service worker meeting notes by Jake Archibald)
- Как внедрить интернационализацию (i18n) в JavaScript (How to Implement Internationalization (i18n) in JavaScript)
- Async функции попадут в ES2017! (Async functions are now stage 4 and will be included in ES2017!)
- JavaScript и функциональное программирование (JavaScript and Functional Programming)
- Цикл for против forEach в JavaScript (The for Loop vs. forEach in JavaScript)
- Внедрение JavaScript в Python (Embedding JavaScript into Python)
- Исчерпывающий обзор jQuery селекторов (A Comprehensive Look at jQuery Selectors)
- Фреймворки:
- Компоненты высшего порядка в React. Перевод статьи Higher Order Components: A React Application Design Pattern
- AngularJS vs ReactJS
- Интернационализация в React (Internationalization in React)
- Интерактивные графики на Angular с помощью ZingChart
- Отладка приложений на Angular c помощью Augury (Debugging Angular 2 Apps with Augury)
- State of React: #1: A Stateless React App?, #2 – From Inception to Redux
- Описание нового алгоритма ядра React, React Fiber (React Fiber Architecture)
- Учебник для начинающих по экосистеме React: часть 2 из 3-х (A Primer on the React Ecosystem: Part 2 of 3)
- React Native в SoundCloud (React Native at SoundCloud)
- kasia — инструментальный набор React Redux для WordPress API (kasia — a React Redux toolset for the WordPress API)
- react-media — CSS media query компонент для React (react-media — a CSS media query component for React)
- Использование Kendo UI для jQuery в React приложениях (Using Kendo UI for jQuery in a React App)
- Кастомные элементы форм в Angular 2 (Custom Form Controls in Angular 2)
- Создание современных веб-приложений с Ember.js (Building Ambitious Web Applications with Ember.js)
- Исследование Mithril, JavaScript фреймворк для создания прекрасных приложений (Exploring Mithril, A JavaScript Framework for Building Brilliant Applications)
- Плагины:
- Audiogram — библиотека для генерации видео из аудиоклипов
- lightgallery.js — полнофункциональная галерея для изображений и видео (lightgallery.js — full featured JavaScript image & video gallery.)
- vivus — библиотека для анимации SVG (vivus,, bringing your SVGs to life)
- jQuery Rate — простой jQuery плагин для создания графических рейтингов (jQuery Rate — a simple jQuery plugin for creating graphical ratings)
Браузеры
- «Биткоин-браузер» Brave собрал 4,5 млн долларов
- Установка дополнений Google Chrome в Mozilla Firefox
- Релиз Firefox 48, технические детали для разработчиков
- План перевода Firefox на многопроцессную архитектуру
- Firefox начнёт показывать вместо ошибок 404 архивные страницы
- В Opera 39 оптимизировано выносное видео и требуется меньше памяти
- В Chrome 52 для Android видео грузится быстрее, использует меньше трафика и медленнее садит батарею
- Microsoft продолжает кампанию против Chrome, теперь ОС Windows 10 советует пользователям перейти с браузера Google на Edge
- Microsoft Edge по-прежнему аутсайдер на рынке браузеров
- Новинки Microsoft Edge, которые появились после Windows 10 Anniversary Update
- Тренды браузеров августа 2016: как располагаются соперники Chrome? (Browser Trends August 2016: How Do Chrome’s Rivals Stack Up?)
- Microsoft Edge получит расширения, обновление поддержки JavaScript в обновлении Windows 10 Anniversary (Microsoft Edge Get Extensions, Better JavaScript in Windows 10 Anniversary Update)
Новости и Занимательное
- В протоколе HTTP/2 выявлено сразу четыре опасных бага
- Google расширит поддержку AMP на всю органическую выдачу
- В ОАЭ на законодательном уровне запретили использование VPN
- Dropbox запускает собственный сервис Paper для совместной работы над документами и задачами
- Кликбейт под запретом: Facebook уменьшит присутствие неинформативных публикаций с завлекающими заголовками в ленте
- Искусственный интеллект не справился с тестом на здравый смысл
- Киберспорт на Олимпиаде: фантазии или реальность?
- Как стать киберспортсменом, и что для этого нужно
- Инвестор Yahoo Эрик Джексон о продаже компании
- Аналитики оценили среднюю стоимость украденных аккаунтов от Uber, Netflix, Gmail и других сервисов
- Выпиливание реальности
- IBM создала ближайший искусственный аналог нейронов
- MS Windows: накануне дефолта
- Windows 10 Anniversary Update: первые впечатления
- Цикл статей Ильи Климова на тему «7 грехов программиста»: Гордыня, Зависть, Гнев, Уныние, Алчность, Чревоугодие
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Поделиться с друзьями
cyber_ua
Советую держатся по дальше от этого фреймворка( Kendo UI), потому что у них там сплошной легаси код и куча багов, мы работаем с кендо, в одном проекте и это просто ад.
Rampages
Вообще есть что-нибудь годное кроме bootstrap, foundation и semantic-ui? Хотя в том же bootstrap поведение некоторых элементов вызывает просто когнитивный диссонанс…
cyber_ua
В принципе https://www.polymer-project.org/1.0/, у нас в основном приходится стили самим писать потому что наш отдел GUI курит что то, и чаще всего готовые компоненты не получится взять. А так используем элементы из bootstrap и полимера.
П.с еще на счет кендо:
У нас самая дорогая их лицензия в которой они обещают супер поддержку, в итоге чаще всего полуаем ответ от них «это не баг, а фича» или «мы не можем это исправить».
П.с.с Нашел у них 3 xss (при том что даже особо не искал), они ответили что то в стиле: это нормальное поведение эти компоненты не предназначены что бы в них передавался тэг скрипт. Кто то провтыкал экранирование при добавление данных по стороне сервера и можно было благодаря их компонентом особо не парясь сделать xss
ifalur
uikit, давно пользуюсь, очень доволен! гибкий, поддержка flex, большое количество дополнительных компонентов.