Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №208 (18 — 24 апреля 2016)

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

Веб-разработка

CSS

Javascript

Браузеры

Дизайн

Новости

Занимательное

Веб-разработка

• То, что действительно важно: ориентация на критичные задачи. Перевод статьи What Really Matters: Focusing on Top Tasks
• Начинаем работу с Browserify. Перевод статьи Getting Started with Browserify
• Chrome DevTools: Use Accessibility Inspection to better understand how accessible your markup is
• Список всего, что может быть в секции head (A list of everything that goes in the head of your document)
• Доступ к USB устройствам в вебе (Access USB devices on the Web)
• Идеальная производительность HTTP (Ideal HTTP Performance)
• Оптимизация скорости сайта: дополнительные советы по ускорению (Website speed optimization: Additional tips for a faster website)
• Шпаргалка по Bootstrap 4 (Bootstrap 4 Cheat Sheet)
• Уменьшаем размер PNG файла (Reducing PNG file Size)
• Как создать статический сайт с Metalsmith (How to Create a Static Site with Metalsmith)
• Документы и руководства для Front-end разработчиков (№ 8) (20+ Docs and Guides for Front-end Developers (No. 8))
• Сборник онлайн-инструментов: конструкторы сайтов, логотипов, прототипов, логотипов, страниц и т.п.
• SVG:
  
  • SVG: немного о моем опыте (SVG: a little about my experience)
  • Стилизация текста с помощью SVG фильтров (Styling Text With SVG Filters)
  • Радиальные элементы управления с помощью HTML5, CSS, JS и SVG
  • Преобразование SVG анимаци в GIF (Convert SVG Animation to GIF)
  • Адаптивная композиция логотипа с помощью SVG (Responsive Logo Composition With SVG)
  • Boxy SVG: быстрый, простой, бесплатный редактор SVG
  
  
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #34

CSS

• Низкий FPS при прокрутке страницы. Решение проблемы background-attachment: fixed
• Houdini: один из самых впечатляющих проектов в CSS, о котором вы никогда не слышали
• Наконец-то, CSS в JavaScript! Встречайте CSSX (Finally, CSS In JavaScript! Meet CSSX)
• Возможно, вы не нуждаетесь в CSS фреймворке (You might not need a CSS framework)
• Улучшаем буквицу с помощью “initial-letter” (Better CSS Drop Caps With “initial-letter”)
• Alphasights: как мы используем BEM для создания модульного CSS
• Анализируйте ваш CSS с помощью stylelint
• Flexbox: практические примеры
• Одна ошибка, которая есть любом CSS фреймворке. Даже в вашем (One thing every CSS framework got wrong. Even yours.)
• Начинаем работать с PostCSS: быстрое руководство для пользователей Sass
• Initial, Inherit, Unset, and Revert
• MaintainableCSS — очередная методология для написания модульного, масштабируемого и поддерживаемого CSS
• Inline CSS в Khan Academy: Aphrodite
• Повышаем ваш уровень CSS анимации с помощью кривых Беьзе (Level Up Your CSS Animations with Cubic Bezier)
• Flexbox Patterns — примеры использования Fexbox (Build awesome user interfaces with CSS flexbox. Examples and source code included.)
• Как создать «прилипающую» навигацию с CSS (How to Create Sticky Navigation with CSS)
• Типы данных в Sass (Data Types in Sass)
• Что за CSS Modules? Визуальное введение (What are CSS Modules? A visual introduction.)

JavaScript

• JS Загрузчик + шаблонизатор или история очередного велика
• Правильная обработка ошибок в JavaScript
• NaN это не «не число»
• JavaScript модули: руководство для начинающих
• Переосмысление современного Javascript. Маленькие библиотеки, делающие хорошо одну вещь — это благослование или проклятье? (Rethinking modern JavaScript development)
• Вежливое введение в Javascript TDD (A Gentle Introduction to Javascript Test Driven Development: Part 1)
• Битва за JavaScript: 4 лидирующих фреймворка (Battle of JavaScript: The 4 Frameworks Leading the Pack)
• Будущее JavaScript: 2016-й и после него (The Future of JavaScript: 2016 and Beyond)
• Почему должны использовать не jQuery, а простой JS (Why you shouldn’t use jQuery but plain Javascript)
• Быстрый совет: функции выражения против функций деклараций (Quick Tip: Function Expressions vs Function Declarations)
• Комплексный взгляд на события в jQuery (A Comprehensive Look at Events in jQuery)
• Ты не знаешь Node: быстрое введение в функциональность ядра (You Don’t Know Node: Quick Intro to Core Features)
• Парсинг CSV файла с помощью JavaScript (Parsing a CSV File With JavaScript)
• Разработка небольших JS компонентов БЕЗ фреймворков. Вы тоже можете писать на ванильном JS! (Developing small JavaScript components WITHOUT frameworks)
• LazyDOM — эксперимент по привнесению виртуального DOM в браузер нативно (LazyDOM — an experiment to bring virtual DOM to the browser natively)
• ES6/ES7:
  
  • ES6: ещё о ловушках прокси изнутри. Перевод статьи More ES6 Proxy Traps in Depth сообществом css-live.ru
  • Создание модулей в JavaScript с ES7 и Babel (Creating Modules in JavaScript with ES7 and Babel)
  • Лучший JavaScript с помощью ES6 Pt. II: A Deep Dive into Classes, Pt. III: Cool Collections & Slicker Strings
  
  
• Фреймворки:
  
  • React Amsterdam 2016. Небольшой обзор от Артема Сапегина
  • Уроки, которые я вынес с React Amsterdam (Lessons learned at React Amsterdam)
  • React Native: обзор года (React Native: A year in review)
  • Babel React Optimize
  • Angular 2 Vs. React
  • Angular 2 + React Native
  • Невероятная история JavaScript фреймворка Express (The Unbelievable History of the Express JavaScript Framework)
  • Сборка Angular с помощью webpack (Bundling Angular with webpack)
  • Быстрый урок: универсальный React, с рендерингом на сервере (Quick Start Tutorial: Universal React, with Server Side Rendering)
  • Тестирование в React: стартуем (Testing in React: Getting Off The Ground)
  • Быстрая настройка Angular 2 с компонентами и компонентом роутером (A Fast Angular 2 Setup with Components and the Component Router)
  • Видео с EmberConf 2016
  • EmberConf 2016: бонусное видео — Как начать Ember революцию от Patrick O'Doherty (How to Start an Ember Revolution by Patrick O'Doherty)
  
  
• Плагины:
  
  • Modaal — новый плагин для модульных окон с поддержкой доступности WCAG 2.0 Level AA
  • kewler — библиотека для работы с цветами в HEX формате
  • Promise Runner — для работы с функциями в асинхронном стиле (Promise Runner: a simple promise maker which creates promises out of normal functions when you need asynchronous run of the functions)
  • Текстовые поля в стиле Excel (Tabular Input Fields)
  • Scrollbear — своевременно обновляет позицию полосы прокрутки при загрузке изображений, устраняя эффект «прыгающего» текста
  • beautify-text — авторасстановка знаков препинаний и кавычек
  • search-index — полнотекстовый поисковый механизм для браузера и Node.js
  • Multiple.js — эксперимент с общим фоном для различных элементов
  
  

Браузеры

• Opera встроила в браузер бесплатный VPN
• Яндекс выпустил Конструктор обновления браузеров
• Google Chrome заставил задуматься о прокрастинации в соцсетях
• Аудитория мобильной версии браузера Chrome превысила 1 млрд пользователей
• Создание расширений для Microsoft Edge (Building Extensions for Microsoft Edge)
• F12 Edge Developer Tools
• Поддержка WebM, VP9 и Opus в Microsoft Edge

Дизайн

• Дизайн логотипа для адаптивных сайтов
• Важность белого пространства в веб-дизайне (The Importance of Whitespace in Web Design)
• Будущее типографики (The Future of Typography)
• Плагин AnimateMate, создание анимации прямо в Sketch
• Прототипирование iOS-приложения в Sketch и Flinto: часть 1
• OOUX: Основа интерактивного дизайна (OOUX: A Foundation for Interaction Design)
• Как выглядит простота в UX дизайне? (What does simplicity in UX design look like?)
• Космос в веб-дизайне
• Как быть более организованным при разработке UI (How To Be More Organized While Designing UI)
• Использование Atomic дизайна в современной веб-разработке (Using Atomic Design in modern web development)
• Эпические неудачи с UX (и какие уроки мы можем из этого извлечь) (Epic UX Fails (and the Lessons We Can Learn))
• Новый логотип и айдентика для O Street (New Logo and Identity by and for O Street)
• iOS 10: пожелания и видео концепта (iOS 10: Wishes and Concept Video)
• История создания набора иллюстраций на тему «Звездные войны» (From a Gallery Far Far Away | CS16 Workshop)
• История создания игры для Apple часов «Break this Safe» (Break this Safe)
• Цвет в системах дизайна (Color in Design Systems)
• Как мы сделали редизайн Airbnb (The Way We Build: Airbnb Design)
• Как люди открывают пароли в текстовом поле (How people unmask passwords)
• Отборные ресурсы для маркетологов и дизайнеров (Email Toolbox)
• Прототипирование на новом уровне с Framer (Prototyping just went to the next level with Framer)
• Почему навигация Spotify поломана (Why Spotify’s navigation is broken)
• #SketchTip: Как делиться Artboards с вашей командой (#SketchTip: How to Share Artboards with Your Team)
• Десять плагинов к фотошопу для ускорения работы с веб-дизайном (10 Photoshop Plugins to Speed up Your Web Designs)
• Первые романские шрифты (The First Roman Fonts)

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

• Microsoft и Google договорились прекратить регуляторные разбирательства друг против друга
• Компания Apple обновила MacBook и MacBook Air
• Команда для обхода Windows AppLocker умещается в один твит
• ФБР заплатило за взлом iPhone террориста более миллиона долларов
• Акции Alphabet подешевели на 6% после отчёта за I квартал 2016 года
• Google начал формировать быстрые ответы из комментариев пользователей
• Google разработал стратегию помощи владельцам взломанных сайтов
• Как попасть в большой киберспорт?
• Топ-5 лучших стартапов по итогам 2015 года
• Сверхтонкие светодиоды позволят создавать носимые на коже электронные устройства
• Биотех: законы роста
• «Facebook хочет стать новым интернетом»
• Вся правда о собеседованиях в Google: за пределами NDA

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

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

Let's block ads! (Why?)