Дайджест свежих материалов из мира фронтенда за последнюю неделю №232 (10 — 16 октября 2016)17.10.2016 00:33

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

e1e73e1c9c1a4a908cbc13a634dc126d.png


Веб-разработка
CSS
Javascript
Новости и занимательное

b70f9feaeee78b42a0c78c3731555e73.gif Веб-разработка


  • Как HTML-верстальщику поднять свой уровень
  • Yarn:
    • habrFacebook и Google выпустили Yarn, новый менеджер пакетов для JavaScript
    • enОбзор Yarn: все что вы должны знать о новом пакетном менеджере для JS от Facebook (Yarn Roundup: What you need to know about Facebook«s new JS Package Manager)
    • enNPM vs Yarn Cheat Sheet
    • enБлог npm: Hello, Yarn!
    • enYehuda Katz: почему я работаю с Yarn (Why I’m Working on Yarn)
    • enYarn Package Manager: улучшения по сравнению с npm (An Improvement over npm)
    • en5 вещей, которые вы можете делать с Yarn (5 things you can do with Yarn)
    • enТестирование yarn, быстрого npm для JavaScript (Testing yarn, a fast npm for JavaScript)

  • enРазвенчание десяти мифов про AMP (Debunked: 10 Misconceptions about AMP)
  • enРазвенчание шести мифов о SEO (6 SEO Myths Debunked)
  • enОптимизация веб-изображений в Photoshop (Optimizing Web Images in Photoshop)
  • enТехника «Offline First» с помощью сервис воркеров («Offline First» with Service Worker (Building a PWA, Part 1))
  • enТекущее состояние элементов ввода в HTML5 (The State of HTML5 Input Elements)
  • enВам не нужны Gulp/Grunt/Webpack (You don«t need Gulp/Grunt/Webpack)
  • enЗаметка в помощь для работы с ARIA (A (not so) short note on ARIA to the rescue)
  • enРаздражающая проблема двойного нажатия на мобильных устройствах (The Annoying Mobile Double-Tap Link Issue)
  • enРескин для SVG Symbols: как их делать (и зачем) («Reskinnable» SVG Symbols: How to Make Them (…and Why))
  • enЗаметка о доступности на developers.google.com, основанная на курсе Accessibility на Udacity
  • enВам не будет комфортно в веб-разработке (You Can«t Get Comfortable in Web Development)
  • enУмер ли MVC для фронтенда? (Is MVC dead for the frontend?)
  • enПрогрессивное улучшение не мертво, но уже с запашком (Progressive enhancement isn«t dead, but it smells funny)
  • enВизуальные примитивы для эпохи компонентов. Используем лучше части из ES6 и CSS для стилизации ваших React приложений (Visual primitives for the component age)
  • enАнимация дропдауна с эффектом морфинга
  • enАнимация декоративных линий (Line Maker: Animated Decorative Lines)
  • enС Днём рождения Foundation: пять первых лет первого адаптивного фреймворка (Happy Birthday Foundation: Five Years of Firsts)
  • enexcel-bootstrap — генератор сайта на бутстрапе из Excel (excel-bootstrap — Generate Bootstrap websites from Microsoft Excel)
  • enРуководство по написанию качественных README файлов (Learn the art of writing quality READMEs.)

d4b289ef0a00e969108c25d0c3d75f58.gif Медиа


  • Подкаст Веб-стандарты, Выпуск №37: Не обижайте CSS, флексы, JS в 2016 году, PWA и React, без джаваскрипта жизнь не та, не блокируйте вьюпорт.
  • Подкаст radioJS, Выпуск 41: Типизация 2.0, типизация в командах, серверный код, конференции
  • habrВидео докладов с митапа MoscowJS в Badoo
  • videoВидео со LvivJS Conference
  • videoВидео с KharkivCSS 2016
  • videoВидео с PiterCSS №6
  • envideoLea Verou — CSS Variables: var (--subtitle);
  • envideoChrome DevTools Masterclass

36c2c69660dd21085a2dcb71d7246ae6.gif CSS


  • Способы подчеркивания в CSS, перевод статьи Styling Underlines on the Web
  • Визуальное регрессионное тестирование с PhantomCSS
  • enВозможно, вам не нужен JavaScript (You might not need JavaScript)
  • enПрагматичная, практичная и прогрессивная темизация с помощью нативных CSS переменных (Pragmatic, Practical, and Progressive Theming with Custom Properties)
  • enВдумчивая архитектура CSS (Thoughtful CSS Architecture)
  • Особые запросы в CSS:
    • en Quantity Queries: Количественные запросы и Flexbox (Quantity queries and Flexbox)
    • en Media Queries: SVG & media queries
    • en Mod Queries: Использование мод-запросов с селекторами диапазонов (Using CSS Mod Queries with Range Selectors)
    • en Feature Queries: Как использовать Feature Queries (запросы свойств) (How to use CSS Feature Queries)
    • en Feature Queries: Добавляем предупреждение «свойство Х не поддерживается» для ваших CSS демок с помощью @supports (Adding «feature X is unsupported» warnings in your CSS Demos with supports)

  • Типографика:
    • enБудущее веб-шрифтов (The Future of Web Fonts)
    • en32 безопасных веб-шрифта для CSS (32 Gorgeous Web Safe Fonts to Use with CSS)
    • enРазбираемся с загрузкой веб-шрифтов (Getting started with CSS Font Loading)

  • enGrid Layout Summertime. Сводка изменений, которые были представлены прошедшим летом для стандарта CSS Grid Layout
  • enУдивительные женщины из мира CSS (The Amazing Women of CSS)
  • enКак сделать табы, используя только CSS (How to make tabs using only CSS)
  • enФильтр контента на чистом CSS (Pure CSS Content Filter)
  • enСоздание масштабируемой и поддерживаемой кодовой базы CSS с ITCSS (Building a Maintainable and Scalable CSS Codebase with ITCSS)
  • enСапёр на чистом CSS (Pure CSS minesweeper)

49d04efb96fb6ce31cde9be5dc12a874.gif JavaScript


  • Теория:
    • enИнфографика, объясняющая, почему JS разработка выглядит такой сложной (This Infographic Explains Why JS Dev Seems So Complicated)
    • enПочему я считаю, что Elm — это будущее фронтенд-разработки (Why I think Elm is the Future of Front End Development)
    • enНужны ли Service Worker-ы в твоем веб приложении? (Do you need Service Worker in your web app?)
    • enУместен ли еще jQuery (Is jQuery Still Relevant?)
    • enВам может понадобиться JavaScript (You Might Need JavaScript)
    • enМы нуждаемся в JavaScript, чтобы починить веб (We need JavaScript to fix the web)
    • enУсталость от Javascript с точки зрения нуба (Javascript Fatigue. From a noob perspective)
    • enФреймворк vs Библиотека — разница в веб-разработке (Framework vs Library — differences in web development)

  • Практика:
    • enОбъектно-ориентированный JavaScript. Быстрое введение в OOP в JavaScript (Object-Oriented JavaScript)
    • enВалидация форм как компонент высокого порядка часть.1 (Form Validation As A Higher Order Component Pt.1)
    • enКак быть компилятором — создаем компилятор с помощью JavaScript (How to be a compiler — make a compiler with JavaScript)
    • enResizeObserver: это как document.onresize для элементов (ResizeObserver: It«s Like document.onresize for Elements)
    • enУлучшение формы комментариев: от основ до кастомных сообщениях об ошибках с помощью BackgroundSync (Enhancing a comment form: From basic to custom error message to BackgroundSync)
    • enСравнение чистых и «нечистых» функций (Pure versus impure functions)
    • enДоступ к буферу обмена с помощью JavaScript (Quick Tip: Accessing The Clipboard With JavaScript)

  • ES6:
    • habrPromises 101. Базовые приемы создания и управления промисами.
    • habrИспользование ES6 генераторов на примере koa.js
    • enРекурсия в JavaScript с ES6, destructuring и rest/spread (Recursion in JavaScript with ES6, destructuring and rest/spread)
    • enГлупые трюки с ES6 (Stupid ES6 tricks)

  • Фреймворки:
    • en Свежие релизы: Angular 2.1.0, Релиз Marionette v3.1.0
    • enЛучший способ изучить AngularJS (The best way to learn AngularJS)
    • enШаблоны Angular 2 для приложений Angular 1.x (Angular 2 Patterns for Angular 1.x Apps)
    • enРоутер Angular: предзагрузка модулей (Angular Router: Preloading Modules)
    • enAngular 2 —  Dynamic View and Components
    • enДвусторонний data-биндинг в Angular 2 (Two-way Data Binding in Angular 2)
    • enСоздание приложения с Material Design с Angular 2 (Build a Material Design app with Angular 2)
    • enНачало работы с Angular 2 End To End тестированием (Getting Started with Angular 2 End To End Testing)
    • enРазбираемся с данными роутера в Angular 2 (Resolving route data in Angular 2)
    • enКак тут у нас в Китае дела с React.js (What we have in China about React.js)
    • enreact-day-picker — календарь для React
    • endesklamp — чистый контейнер для роутинга и state в react (clean routing and state container for react)
    • enОфициальная интеграция Semantic-UI-React
    • enreact-router-server — рендеринг на серверной стороне для React Router v4 (react-router-server — Server Side Rendering library for React Router v4.)

  • engDoc.js — используйте Google Spreadsheets для своей CMS (Use gDoc.js for your CMS)
  • enCerebralJS — контроллер состояний с собственным отладчиком. Подходит для сложных приложений (A state controller with its own debugger)
  • enПорт движка по распознаванию изображений Tesseract на JavaScript (Tesseract.js is a pure Javascript port of the popular Tesseract OCR engine.)

d4b289ef0a00e969108c25d0c3d75f58.gif Новости и занимательное


  • Выпуск web-браузера Chrome 54
  • Google в 1,5 раза сократит расход памяти браузером Chrome
  • Google запустил новый инструмент для проверки AMP
  • noto — новый шрифт от Google для всех языков и наречий
  • Кто «подложил бомбу» в смартфоны Samsung?
  • Samsung разослала огнеупорные коробки для возврата Galaxy Note 7, Что случилось с Samsung Galaxy Note 7 и почему он горит
  • Facebook официально запустила корпоративную социальную сеть Workplace
  • В Skype добавили поддержку русского языка для синхронного перевода речи во время голосовых и видеовызовов
  • Насколько серьезны проблемы Элона Маска
  • Каково это — работать в Apple?
  • «Просто заткнитесь и дайте разработчикам сконцентрироваться на задачах», — считает сооснователь площадки Stack Overflow Джоэл Спольски
  • «Samsung, ты не одна»
  • Большая нейронная война: что на самом деле затевает Google
  • Что понял Павел Дуров в процессе создания «ВКонтакте»
  • Алгоритм чтения книг по программированию
  • Разнообразие нейронных сетей. Часть вторая. Продвинутые конфигурации
  • Как лайки и боты сформируют журналистику будущего
  • Новые властители разума: как поисковые системы влияют на выборы
  • Смогут ли секс-роботы пройти тест Тьюринга?
  • Как проходит телефонное собеседование в Google: рассказ из первых рук от кандидата на должность технического директора
  • Инженеры MIT создали «Photoshop для 3D-печати»
  • enУдивительная история эмодзи (The surprising history of emojis)

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.

Комментарии (0)

© Habrahabr.ru