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

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

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

CSS

Javascript

Браузеры

Дизайн

Новости

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

• Идеальная производительность протокола HTTP
• Подкаст Веб-стандарты, выпуск 13: SpiderNode, VPN, методологии CSS, Stylelint и CSSX, параллакс, доступность.
• Сборник актуальных англоязычных подкастов на тему веб-разработки
• Подробное введение в методологию БЭМ на toptal (Introduction To BEM Methodology)
• Видео с Fronteers Spring Conference 2016, разбитые на блоки Visual Performance, Accessible Performance и Technical performance
• Видео с секции FrontTalks на DUMP-2016
• Производительный client-side – запись доклада Романа Парадеева
• Sara Soueidan о том, как переключиться с иконочного шрифта на SVG (Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG)
• Инструменты и ресурсы для редактирования, конвертации и оптимизации SVG (Tools And Resources For Editing, Converting And Optimizing SVGs)
• Возможности DOM, о существовании которых вы не знали (DOM Features You Didn’t Know Existed)
• Подробное описание работы по улучшению показателей сайта в Google PageSpeed (Hands On Improving Google PageSpeed)
• Пятнадцать фундаментальных законов разработки софта (15 Fundamental Laws of Software Development)
• Styleguide — руководство по стилю для брендов (Living Styleguide Made Easy)
• Webpack Boilerplate
• Google's V8 JavaScript движок начал поддерживать WebAssembly, Быстрый совет: как использовать WebAssembly в браузере уже сегодня
• Jam API — сервис, позволяющий превратить любой сайт в JSON accessible api с помощью CSS селекторов
• Как работает JPG (How JPG Works)
• Подробный обзор стандартов и возможностей видео в вебе (HTML5 Media Source Extensions: Bringing Production Video To The Web)
• Эффектный веб:
  
  • Создание “The Aviator”: анимация простой 3D сцены с помощью Three.js
  • Про анимацию «fave» в Twitter
  • Анимированная сфера на CSS
  • Создание анимированных маркеров на Google-карте с CSS и JavaScript (Creating Animated Google Map Markers with CSS and JavaScript)
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #35
  
  

CSS

• Будущее CSS
• Игры на чистом CSS со свойством counter-increment. Перевод статьи Юны Кравец Pure CSS Games with Counter-Increment сообществом css-live.ru
• Плиточная раскладка на чистом CSS. Перевод статьи HOW TO: Pure CSS masonry layouts на prgssr.ru
• Типы данных в Sass
• Пересмотренная спецификация подсеток (A Revised Subgrid Specification)
• Работа с изображениями в таблицах стилей с помощью PostCSS (Working with Images in Stylesheets with PostCSS)
• Улучшение качества CSS с помощью PostCSS (Improving the Quality of Your CSS with PostCSS)
• Тестирование визуальной регрессии с помощью режимов наложения в CSS (Visual Regression Testing with CSS Blend Modes)
• diffee — определение визуальных различий с использованием CSS режимов наложения
• Как flexbox снимает боль в некоторых местах фронтенд-разработки (How flexbox alleviates some common front end development pains)
• 5 техник Flexbox, о которых вы должны знать (5 Flexbox Techniques You Need to Know About)
• Пример использования CSSX — ванильного CSS в JS
• Двигаемся от HTML Grid Systems к CSS Grid Systems
• Быстрый совет: Использование CSS счетчиков со стилями для пронумерованных списков (Quick Tip: Using CSS Counters to Style Incremental Elements)
• Как делать разметку для карточного дизайна с Semantic UI (How to Design Rich Card-Based Layouts with Semantic UI)
• Почему Node Sass сломает ваш код и SemVer (Why Node Sass broke your code and SemVer)

JavaScript

• Вышел в свет Node.JS v6.0
• V8: ES6, ES7, после них
• Подводные камни при передаче JSON в JavaScript
• ES6: отражение изнутри
• Транспайлеры в JavaScript: что это такое почему они нам нужны? (JavaScript Transpilers: What They Are & Why We Need Them)
• Взгляд на ES6 Maps (A Look at ES6 Maps)
• Делаем ифреймы отзывчивыми (Making IFrames Responsive)
• Давайте изучать замыкания в JavaScript (Let’s Learn JavaScript Closures)
• Эффективное использование JavaScript замыканий (Use JavaScript closures efficiently)
• Tessel 2: легкая интеграция интернета вещей и JavaScript (Tessel 2: Pairing JavaScript and the Internet of Things with Ease)
• Как логировать JavaScript-ошибки на клиентской стороне (How to Log Client-Side JavaScript Errors)
• Свежая запись в блоге разработчиков Airbnb: Турбированный рефакторинг JavaScript с помощью codemods (Turbocharged JavaScript refactoring with codemods)
• Быть JavaScript разработчиком — это не Candy Land (Being a JavaScript Developer is no Candy Land)
• Избегаем монокультуры JavaScript (Avoiding a JavaScript Monoculture)
• Прототипное объектно-ориентированное программирование с использованием JavaScript (Prototypal Object-Oriented Programming using JavaScript)
• JavaScript тестирование: юнит тесты vs функциональные тесты vs интеграционных тесты (JavaScript Testing: Unit vs Functional vs Integration Tests)
• Сколько существует пользователей npm? (how many npm users are there?)
• Представление yakbak: запись и воспроизведение HTTP взаимодействий в NodeJS (Introducing yakbak: Record and playback HTTP interactions in NodeJS)
• Стандартизация стилей JavaScript (JavaScript Standard Style)
• Фреймворки:
  
  • React-компоненты с привкусом БЭМ
  • Вы (возможно) не нуждаетесь в JavaScript фреймворке (You (probably) don't need a JavaScript framework)
  • Текущие и грядушшие JS фреймворки, за которыми можно следить в 2016-м (Up-and-coming JavaScript frameworks & libraries to watch out for in 2016)
  • Три более легкие альтернативы Реакту: Preact, VirtualDom и Deku (3 Lightweight React Alternatives: Preact, VirtualDom & Deku)
  • Зачем использовать React? (Why use React?)
  • Как сделать хорошую структуру React приложений? (How to better organize your React applications?)
  • AlphaBeta — декларативное сплит-тестирование для React (AlphaBeta — declarative split testing for React)
  • Курируемая коллекция ссылок на тему React/Redux (React/Redux Links)
  • Redux Immutable Reducer
  • Ключевые концепции Angular 2 (THE CORE CONCEPTS OF ANGULAR 2)
  • Angular 2 ESNext Starter — стартовый пакет для разработки c ES6/ES7, Babel (Angular 2 ESNext Starter)
  • Использование кросс-платформенных приложений с Angular 2 (Creating Cross-Platform Apps with Angular 2)
  
  
• algebrite — библиотека для решений задач по алгебре, написанная на JavaScript (algebrite — Computer Algebra System in Javascript)
• grafi.js — JavaScript Image Processing Library
• es-search — поиск по структуре кода, используя CSS-подобные селекторы (es-search — search ECMAScript structurally)
• Enumish — создание Enum-подобных объектов

Браузеры

• Релиз Firefox 46, перешедший на GTK3+ в Linux
• Технические детали о Firefox 46 в блоге Марата Таналина
• Тестирование Firefox 47-beta и Firefox Developer Edition 48 с поддержкой WebExtensions
• Microsoft заблокировал все браузеры в Cortana для Windows 10, кроме Edge
• WebKit отказывается от префикса "-webkit-" для экспериментальных возможностей
• Обновление web-браузера Vivaldi 1.1

Сайты с интересным дизайном и функциональностью

• julie poignot — симпатичный сайт-портфолио дизайнера
• sugar.vision — симпатичный сайт с концептуальным дизайном и скролл-анимацией
• misplaced.design — сайт с организованным хаосом в дизайне
• Классные сайты с горизонтальным скроллингом
• Прекрасные дизайны сайтов для церквей (40 Beautiful Church Website Designs)
• gameandfishfacts.com — симпатичный сайт с фоновым видео и флип-анимацией
• madebyfew.com — страничка с удачным использованием параллаксом
• Lookbook 2016 — вертикальный скролл-сайт с параллаксом, интересными эффектами и анимацией
• bizpoint.com — новая социальная сеть с ненавязчивым дизайном и претензиями на лавры Yelp (пока только в пределах Турции)

Дизайн

• Веб-сайты продолжают использовать «тёмные паттерны»: интерфейсы, предназначенные для обмана
• Шрифт Яндекса — Yandex Sans
• Еще о деталях создания Yandex Sans в блоге одного из авторов
• Я.Субботник для дизайнеров — запись трансляции
• Почему дизайн Facebook именно такой и как принимаются решения внутри компании
• 5 UX способов начать разработку дизайна правильно
• Индикаторы прогресса в мобильном UX-дизайне
• Кнопки в системах дизайна: 12 советов Buttons in Design Systems
• Дружественное руководство по цветам в визуализации информации (Your Friendly Guide to Colors in Data Visualisation)
• Этот интерфейс — это (хорошая) шутка (This Interface Is A (Good) Joke!)
• 10 недавних инноваций в веб-дизайне для вашего вдохновения (10 Recent Innovative Web Designs For Your Inspiration)
• Анализ эффективности гамбургерного меню в веб-дизайне (Analyzing the Effectiveness of Hamburger Menus in Web Design)
• Мнения экспертов: делает ли плоский дизайн веб скучным? (Experts Weigh In: Is Flat Design Making The Web Boring?)
• Может ли дизайн быть «правильным»?
• 125 советов по оптимизации юзабилити вашего сайта (125 Easy Tweaks to Optimize Your Website’s Usability Today)
• Как разработать эффективный дизайн форм логина (How to design effective login forms with great UX)
• Пять способов улучшения дизайнерских презентаций (5 ways to improve your design presentations)
• Почему всплывающие подсказки ужасны и почему их стоит использовать для продуктов (Why tooltips are terrible and why you should use them for your product)
• Пять ошибок, которые стоит избегать при создании дизайна взаимодействия с пользователем (5 Mistakes to Avoid When Designing Micro-interactions)
• Отладка дизайна (Design debugging)
• Концепт приложения Facebook Camera (Facebook Camera)
• Апрельское обновление Adobe Experience дизайн CC (April Update of Adobe Experience Design CC)
• Дизайнеры: не давайте возможности слишком просто ошибаться (Designers: Don’t make it too easy to mess up)
• Прототипирование индикатора загрузки используя Principle (mac) (Prototyping a circular loading indicator using Principle for mac)
• Coca-Cola представила новый дизайн упаковки (Coca-Cola Unveils New Global Packaging)
• Как сделать лучший дизайн приложений для заметок (Designing a Better Notes App)
• Процесс дизайна формы авторизации (Designing UX Login Form and Process)
• Веб дизайнеры, можете ли вы говорить на языке web-а? (Web designers, can you speak web?)
• Апрельский поиск ресурсов: как насчет добавления Fedora в ваше CV? (Sourcehunt Design April: How About Adding Fedora to Your CV?)
• Как оживить портретные фото, используя Photoshop Actions (How to Relight Portraits in Post With These 6 Dramatic Photoshop Actions)
• Новый логотип для Guinness от Design Bridge (New Logo for Guinness by Design Bridge. Putting the Harp in Sharp)
• Color Lisa — цветовые палитры лучших художников

Подборка бесплатных дизайнерских печенек

• Векторный клипарт, посвященный работе
• Бесплатные текстуры, подаренные нам природой
• Wyre: много шаблонов для создания карт сайтов (Wyre: Web Layout Flowcharts)
• Набор UI в PSD формате Chat App UI Kit (Free Chat App UI Design Kit PSD)
• Avital: набор UI для мобильных iOS приложений (Avital: Free UI Kit For Mobile Apps)
• Мокапы для демонстрации дизайна (10+ Free High Quality PSD Mockups)
• Набор иконок с плоским дизайном на тему дизайна (Download 36 flat graphic design icons—free!)
• Набор иконок на тему гостиниц и СПА (Freebie: Hotel And Spa Icon Set (55 Icons PNG, SVG))
• Montano — рукописный шрифт (Montano was a font that started on paper for a skillshare class, which later turned into a digital font.)
• Романтичный рукописный шрифт Mightype (Mightype Hand Lettering Font – Free Download)
• Quish — рукописный кистевой шрифт (Quish is a handwritten display typeface, designed with a brush and rough styling in some of the letters)
• FONTEA — плагин для использования семисот Google-шрифтов в Photoshop-е

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

• Сильный доллар и расходы на привлечение трафика отразились на доходах Alphabet
• Twitter заключил партнёрское соглашение с Yelp
• На хромбуках появятся миллионы Android-приложений
• Средний размер веб-страницы превысил размер установщика оригинального Doom
• «Яндекс» запускает модерацию изображений в соцсетях
• GitHub и SourceForge признаны неприемлемыми для размещения кода проектов GNU
• Mozilla ищет новое пристанище для проекта Thunderbird
• Google интересовалась покупкой Telegram
• Поколение Minecraft: Как компьютерная игра стала новым Lego для детей всех возрастов
• Oculus Rift и HTC Vive: какой шлем виртуальной реальности выбрать
• Топ-5 «безумных» вещей, которые запускали на смарт-часах
• SpaceX Илона Маска планирует отправить космический корабль на Марс уже в 2018 году
• macOS: настало время шагнуть вперед
• Тотализаторы будущего: киберспорт и криптовалюта
• SpaceX отправит корабли Red Dragon на Марс в 2018
• Обновление Windows 10 появилось в прямом эфире прогноза погоды
• Google собирается улучшать города

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

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

Let's block ads! (Why?)