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

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

CSS

Javascript

Дизайн

Новости

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

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

• Продолжаем бороться с frontend-рутиной
• <input> я люблю тебя, но ты меня обламываешь
• Как я делал веб-версию KeePass
• Mimic — утилита для подмены похожих символов, делающая отладку кошмаром
• Подкаст SDCast #31: в гостях эксперт по стратегическим технологиям Microsoft Константин Кичинский
• Видео с конференции Web Standards Days, проходившей в Минске на этих выходных: Первый день, Второй день
• Искусство отладки (The Art of Debugging)
• 13 подсказок по более эффективному проектированию и построению приложений (13 Tips on Designing and Building Apps More Efficiently)
• Работа с изображениями:
  
  • Почему BPG заменит GIF и не только. (Why BPG will replace GIFs and not only.)
  • Руководство по использованию WebP изображения сегодня: тематическое исследование (Guide To Using WebP Images Today: A Case Study)
  • Как создавать адаптивные изображения с srcset (How to Build Responsive Images with srcset)
  
  
• Эффектный веб:
  
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #10
  • Эффектные идеи для анимации карточных наборов (Effect Ideas for Card Stacks)
  • Анимация для вступительной секции на странице сайта (Animated Intro Section)
  • FCC Zipline: JS Calculator: эффектный калькулятор на JS, сделанный в стиле Fallout
  
  
• SVG:
  
  • SVG Path Builder
  • Создание сложных SVG анимаций (Designing Complex SVG Animations)
  • Как манипулировать SVG текстом (How To Manipulate SVG Text)
  
  
• Firebug & DevTools Integration
• Пять вещей, о которых должны помнить возрастные программисты (Five Things Old Programmers Should Remember)
• Пожалуйста, не комитьте закомментированный код (Please, don’t commit commented out code)
• 4 экспертные подсказки для получения большего от Google Fonts (4 Expert Tips for Getting the Most Out of Google Fonts)
• Советы по улучшению производительности сайта (Tips For Improving Site Performance)
• Корректная разметка для записи измерений в HTML5 (Marking Up Measurements Correctly in HTML5)
• 12 самых страшных кошмаров разработчиков в День Всех Святых (12 of the Scariest Developer Fears at Halloween)

CSS

• Все о пробелах
• Работу CSS-селекторов объяснили на картинках с котами
• Чего стоит избегать при написании CSS (Things To Avoid When Writing CSS)
• Как работает z-index (How z-index Works)
• Состояние веб типографики (The State of Web Type)
• Less: самый недопонятый CSS препроцессор (Less: The World’s Most Misunderstood CSS Pre-processor)
• Practical CSS Parallax
• CSS Haiku
• Разрушение мифов о Flexbox (Flexbox Myth Busting)
• Применяем Flexbox к видео-плееру (Applying Flexbox to the Video Player)
• Статья о том, как сделать эффектные блоки с нестандартной геометрией в качестве фона сайта (Background Image Shapes)
• Очередной выпуск «Totally Tooling Tips» от разработчиков Google: Critical Path CSS (S2 Mini Tip #1)
• «Эксперты» делятся своими любимыми трюками в CSS (Expert’s Weigh In: What’s Your Favorite CSS Trick?)
• Изучите Bootstrap Grid за 15 минут
• 4 способа создания аккордионов на чистом CSS (4 Ways to Create Awesome CSS-Only Accordions)
• PostCSS:
  
  • Краткое руководство по PostCSS: Настройка Grunt
  • Использование PostCSS с BEM и SUIT методологиями (Using PostCSS with BEM and SUIT Methodologies)
  • Использование PostCSS вместе с Sass, Stylus, или LESS (Using PostCSS Together with Sass, Stylus, or LESS)
  • PostCSS Time Machine — поможет исправить ошибки, допущенные при создании CSS, и описанные у CSSWG.
  • mdcss — плагин для PostCSS, позволяющий создавать и поддерживать стайлгайды с помощью комментариев в CSS и Markdown
  
  
• CSS в JS:
  
  • BackstopJS — регрессионное тестирование CSS
  • CSS в JS: это ловушка! (CSS In JS: It’s a Trap!)
  • Почему вы не должны добавлять строчные стили с помощью JavaScript в React компонентах (Why You Shouldn’t Style React Components With JavaScript)
  
  

JavaScript

• У нас проблемы с промисами
• Новые релизы:
  
  • Выпуск серверной JavaScript-платформы Node.js 5.0
  • Релиз Babel 6.0.0
  • Быстрый совет по обновлению Babel 5.x -> 6.x
  
  
• ES6:
  
  • Тонкости ES6: Наследование (часть 1)
  • Упрощение асинхронного кода на JavaScript с внедрением асинхронных функций из ES2016
  • ES6 в деталях: Деструктурирование
  • ECMAScript 6 (ES6): Что нового в новой версии JavaScript (ECMAScript 6 (ES6): What’s New In The Next Version Of JavaScript)
  • Quiz: понимаете ли вы объектно-ориентированный JS c ES6?
  
  
• Pigeon — HTML препроцессор, написанный на Javascript.
• Как Javascript используется в приложении Spotify для настольных устройств? (How is Javascript used within the Spotify desktop application?)
• JavaScript с возможностью отладки в продакшене с Source Maps (Debuggable JavaScript in production with Source Maps)
• ServiceWorker и Progressive Networking
• Кеш изолированных HTTP запросов с Service Worker (Cache sandboxed HTTP requests with Service Worker)
• Продолжайте пушить, с W3C Push API (Keep pushing it, with the W3C Push API)
• Чтение и копирование выделенного текста в буфер обмена с помощью JS (Reading and copying selected text to clipboard using JavaScript)
• Вступление в концепцию функционального программировния в JS (An Intro to Functional Programming Concepts in JavaScript)
• Выбираем JavaScript Build Tool – Babel, Browserify, Webpack, Grunt и Gulp
• Менеджер JS-модулей, который умещается в твит (A JavaScript Modules Manager That Fits in a Tweet)
• Фреймворки:
  
  • С 0 до 1. Разбираемся с Redux
  • Шпаргалка по React v0.14.1
  • YouTube канал «ReactRally»
  • Обновление приложений с Angular 1 на Angular 2 с использованием ngUpgrade (Upgrading apps to Angular 2 using ngUpgrade)
  • ngclipboard — директива для clipboard.js (Angularjs directive for clipboard.js)
  
  
• Уроки:
  
  • Урок: использование React с Webpack (Using React with Webpack Tutorial)
  • Создание простого демо с Three.js (Building up a basic demo with Three.js)
  • Создание бразура с вкладками с помощью Node-Webkit и AngularJS (Create a Tabbed Browser Using Node-Webkit and AngularJS)
  • Создание приложения реального времени с обновлением фото используя Instagram API (Build a Real-Time Photo Update App with the Instagram API)
  • Создание и публикация собственного Grunt плагина (Build and Publish Your Own Grunt Plugin)
  • Начало работы с Emscripten: преобразование C/C++ в JavaScript/HTML5 (Getting Started with Emscripten: Transpiling C/C++ to JavaScript/HTML5)
  • Создание SCRUD систем с использованием jQuery, JSON и DataTables (Creating a SCRUD System Using jQuery, JSON and DataTables)
  
  
• Плагины:
  
  • Protip — очередной jQuery плагин для отображения всплывающих подсказок (Yet another jQuery tooltip plugin for almost ANY SITUATION!)
  • Quill — редактор форматированного текста (IE9+)
  • canvid.js — библиотека для проигрывания видео в HTML5 canvas элементе (tiny library for playing video on canvas elements)
  • Segment — небольшой JS (без зависимостей) для отрисовки и анимирования SVG path strokes
  
  

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

• Сайты, сделанные в Японии
• 22 современных сайта с горизонтальными лейаутами
• 25 сайтов с нестандартной навигацией
• Примеры современного дизайна веб-сайтов (Website Showcase Of Modern Design – 39 Examples)
• ginventory.co — сайт с клевыми скролл-эффектами
• frightgeist.withgoogle.com — мультимедийный сайт из серии гугл-экспериментов
• georgeleonardo.com — сайт с симпатичными переходами между страницами и эффектами предзагрузки
• deuxhuithuit.com — сайт нестандартными эффектами в оформлении
• Интерактивный автопарк Бонда
• whatisburningman.org — сайт с ромбовидной структурой
• jwt.amsterdam — качественный промо-сайт с фоновыми видео
• andreo.li — сайт с параллаксом и скролл-анимацией
• merixstudio.com/frontend — интерактивный мультимедийный сайт в стилистике Back to the Future

Дизайн

• Дизайнер Trello. Как мы решили проблему с иконками с помощью автоматизации
• Повседневный дизайн: удобная мерная ложка для лекарств
• Увлекательные иллюстрации в дизайне упаковки
• Кнопка на 300 миллионов (The $300 Million Button)
• 12 подсказок по мобильному веб дизайну для настоящего и будущего (12 Mobile Web Design Tips for the Present and the Future)
• Основные советы для преобразования дизайна обычного сайта в мобильный (Essential tips for converting a desktop site, to mobile)
• Визуализация двух типов людей (2 Kinds Of People)
• Чем создается хороший пользовательский опыт? (What makes a good User Experience?)
• Книги по дизайну UI, которые вы должны прочесть (UI design books you should read)
• Что на вашей книжной полке? часть 2 (What’s on your bookshelf? Part 2)
• Видео: дизайн логотипов — эмпирические правила которые вы не должны забывать (Watch: Logo Design Rules of Thumb You Shouldn’t Forget)
• Прямой слэш: история о том, как Massimo Guzman превратил простое лого в бренд возможностей (Forward slash: The story of how Massimo Guzman turned our simple logo into a brand of possibility.)
• Fonts In Use — коллекция фото с примерами использования шрифтов
• Полное руководство для новичков по интерактивному дизайну (Complete Beginner’s Guide to Interaction Design)
• 5 случаев, когда UX имеет значение в повседневной жизни (5 Ways UX Matters in Everyday Life)
• 10 кошмаров мобильного UX, которых следует избегать (10 mobile UX nightmares to avoid)
• Работаем с писателями: что дизайнеры должны знать (Working with writers: what designers need to know)
• Редизайн:
  
  • Студия показала новый брендинг Netflix
  • Концепт редизайна GoodReads (goodreads bibliophilic design approach)
  • Брэндинг Netflix (Netflix Branding)
  • Редизайн карты Нью-Йоркского метро (The New York City Subway Map Redesigned)
  
  
• Графические редакторы:
  
  • Экспорт исходников Sketch в Zeplin
  • Создание элегантных (но простых) анимаций с помощью Sketch и Atomic.io
  • Ошибки в Adobe Illustrator: исчезающий просмотр инструмента Карандаш
  • Можете ли вы использовать Photoshop для повествования? (Can You Use Photoshop to Tell a Story?)
  • Визуализация новых фич Sketch 3.4 (Visualize Sketch 3.4 New Features)
  • 15 top Sketch plugins
  
  
• Интервью:
  
  • Как работают UX-дизайнеры Google
  • Интервью с дизайнером Jean-Marc Denis (Google, работавшего в Inbox, Gmail и Sparrow) (AMA: Jean-Marc Denis)
  
  
• Уроки:
  
  • Создание иллюстрации злой ведьмы в Adobe Illustrator (Create the Wicked Witch of the West in Adobe Illustrator)
  • Как создать a винтажную типографическую иллюстрацию-постер в Adobe Illustrator (How to Create a Vintage Typographic Illustration Poster in Adobe Illustrator)
  • Соединяя точки: как мы добавили улыбку в логотип Basecamp (Connecting the dots: How we put a smile on the Basecamp logo.)
  • Процесс создания дизайна для сайта CarenZorgt (The design process of the CarenZorgt web site)
  
  

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

• Векторный клипарт на SEO-тематику
• Стильные рамки для вашего дизайна
• Лучшие экшены для ретуширования (Top 80 Photoshop Actions To Download For Your Photo Retouching Work)
• Упаковка с печеньками от SmartyBundles (Free download: design bundle from SmartyBundles)
• Мокапы для демонстрации дизайна на футболках (15 Free High-Resolution T-Shirt Mockup Templates)
• Набор печенек от AlienValley (Freebie Bundle from AlienValley)
• Отобранные вручную микро-иконки (PSD) (200 Handcrafted Free Micro Icons (PSD))
• Creaticons – векторные иконки продуктов и напитков (AI, EPS, SVG, PNG) (Creaticons Free – Food & Beverages Vector Icons (AI, EPS, SVG, PNG))
• SVG иконки популярных брендов (Free Download: 134 SVG Icons for Popular Brands)
• Набор погодных иконок для мобильных и Web-приложений (Freebie: Weather App Icon Set For Mobile and Web)
• bitIcon — иконочный шрифт с логотипами популярных языков и технологий программирования
• Более сотни лучших шрифтов, осень 2015 (101 best free fonts, fall 2015)

Новости

• Выпуск браузера Opera 33
• Евросоюз отказался от сетевого нейтралитета и мобильного роуминга
• Денежный оборот киберспорта в 2015 году вырос до $747 млн
• Windows 10 установлена на 120 млн устройств, в планах – 1 млрд
• Microsoft поменяла условия распространения Windows 10
• Органический поисковый трафик Twitter вырос на 20% после сделки с Google
• Стоимость акций Twitter упала на 13% на фоне финансового отчёта за III квартал 2015
• Chrome OS в 2017 году прекратит существование
• В 2016 году Google будет тестировать Project Loon в Индонезии
• Чистая прибыль Яндекса в III квартале 2015 года составила 4,3 млрд рублей
• Биллу Гейтсу исполнилось 60 лет
• Рекордные продажи компьютеров обеспечили Apple самые большие доходы за год

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

• Рейтинг: 26 ИТ-компаний США со средней зарплатой выше $120 тысяч
• Ученые МТИ научились видеть сквозь стены, используя Wi-Fi
• Как когнитивные компьютеры могут изменить наше будущее
• Десять мнений: какой язык программирования учить первым
• Большие Данные для цифрового гуманизма
• Мал, да удал. Интересные истории юных предпринимателей, которые меняют мир в том возрасте, когда большинство об этом ещё даже не задумываются.
• Основатель Megaupload Ким Дотком рассказал о проекте альтернативного интернета на основе смартфонов
• (Почти) робокар: приключения автопилота Tesla Motors
• Что такое Код? Перевод статьи журналиста и программиста Пола Форда “What is Code?”, опубликованной на сайте Bloomberg Businessweek
• Бабушка программирования. Маргарет Хэмилтон считается прародительницей современного программирования, а благодаря написанному ею коду американцы полетели на Луну.
• Как математика помогает людям жить
• Как Pornhub, Google, Uber, Mail.ru Group и другие бренды отреагировали на Хэллоуин
• Другой интернет или скрытые сети виртуального мира
• Виртуальный тур по кратеру Марса
• Игнорируйте всех (Ignore Everybody)
• NASA ищет программиста, который будет программировать на языках 60-тилетней давности для работы с Voyager

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

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