Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости.
![](https://habrastorage.org/files/d7d/7c0/6ac/d7d7c06ac62841aeb8810efe213febad.png)
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
![](https://habrastorage.org/files/d7d/7c0/6ac/d7d7c06ac62841aeb8810efe213febad.png)
Веб-разработка |
CSS |
Javascript |
Браузеры |
Дизайн |
Новости |
Занимательное |
Веб-разработка
Запись трансляции Web Standards Days в Киеве, прошедшей на этих выходных
- Обзор генераторов статических сайтов: Jekyll, Middleman, Roots, Hugo
- Почему я не отправляю сгенерированные файлы в репозиторий?
- Юникод в вебе: введение для начинающих
Сравнение анимации в SVG и GIF (Animated SVG vs GIF [CAGEMATCH])
Мои любимые подкасты на фронтенд тематику (My favourite front-end related podcasts)
Про автозаполнение форм (TIL – Autocomplete and forms)
Создание интерактивного видео с помощью Video API (Creating an Interactive Video Showcase with the Video API)
Детальная статья про отзывчивые изображения современными методами
Rolling Out Responsive
Слайды на тему доступности статических фреймворков (Front End Frameworks — are they accessible)
SVG без SMIL: Google Chrome убирает поддержку
Почему все должны двигаться в сторону HTTP/2 (Why Everyone Should Be Moving To HTTP/2)
HTTP/2 101 (Chrome Dev Summit 2015)
Новый отзывчивый формат шрифтов для веба (A New Responsive Font Format for the Web)
Десять вещей, которые необходимо знать о Gulp (10 things to know about Gulp)
pokedex — веб-приложение для фанов покемонов
- Эффектный веб:
- Еженедельная подборка красивых эффектов на CSS/SVG/JS #14
Эффект трансформирующейся кнопки в стиле Shazam (Shazam-Like Morphing Button Effect)
CSS
Тестирование вёрстки на визуальные регрессии с помощью PhantomCSS
PostCSS быстрый старт
- Переход от Bootstrap к Susy
Плавная производительная анимация для «box-shadow» (How to animate «box-shadow» with silky smooth performance)
Решение проблем производительности при рендере страниц с анимацией (Troubleshooting rendering performance issues)
Серьезно, не используйте иконочные шрифты (Seriously, Don’t Use Icon Fonts)
Пропорциональное масштабирование контента с помощью CSS и JS (Scaled/Proportional Content with CSS and JavaScript)
Современная архитектура Sass от Stuart Robson
Скептический взгляд на PostCSS (A Sceptic's Take On PostCSS)
Упорядочивание стилей для печати с помощью Sass (Streamlining CSS Print Design with Sass)
8 CSS препроцессоров для повышения скорости разработки (8 CSS preprocessors to speed up development time)
Gridlex — простая сетка на flexbox
Как работает margin:auto в CSS
Начинаем работать с CSS Polygons
Фреймворки (Frameworks)
CSS курсор (CSS Cursor)
CSS переключатели (CSS Toggle Switch)
JavaScript
Шесть вещей, которые вы должны знать о движении WordPress в сторону JavaScript (Six Things You Should Know About WordPress Moving to JavaScript)
- ES6:
- ES6: классы изнутри
Думаешь, что знаешь ES6? Докажи! (Think You Know ES6? Prove it!)
ES6 Overview in 350 Bullet Points на github
- Фреймворки:
Забудьте о Angular и Ember, React уже выиграл клиентскую войну (Forget Angular & Ember, React Has Already Won the Client-Side War)
React убивает Angular (React is killing Angular)
Getting Started with Redux: курс от Dan Abramov
Как интегрировать jQuery плагины в Ember приложение (How to Integrate jQuery Plugins into an Ember Application)
Подкаст Eat Sleep Code Podcast на тему ReactJS
spooky-react — скелетон с React, ES2015, Browserify
Создай React класс за 60 секунд (Create a React Class in 60 Seconds)
Структурирование React компонентов (Distributing React components)
Понимание Redux Middleware (Understanding Redux Middleware)
Как сделать игру Сапер, используя Angular 2 и Immutable.js (How to build Minesweeper using Angular 2 and Immutable.js)
Пять шагов для подготовки вашего Angular 1 кода к Angular 2 (5 Steps To Prepare Your Angular 1 Code To Angular 2)
Multi Providers в Angular 2 (Multi Providers in Angular 2)
JS без фреймворков (Frameworkless JavaScript)
Опрос JavaScript-разработчиков от Nicolas Bevacqua
HTTP Live Streaming в Javascript
Building for HTTP/2
Про инструменты для JavaScript разработчиков (Must See JavaScript Dev Tools That Put Other Dev Tools to Shame)
Лучшие JavaScript IDE (What are the best JavaScript IDEs?)
Параллельность в JavaScript (part 1) (Concurrently JavaScript (part 1))
Забыть упаковщики JS? Не так быстро (Forgot JS packaging? Not so fast)
Не теряйте пользователей и состояние приложения, используйте Page Visibility (Don't lose user and app state, use Page Visibility)
Рефакторинг приложения на JavaScript с помощью микросервисов: чему мы научились с Backbone и Marionette (Refactoring a JavaScript Application to Use Microservices: What we Learned With Backbone and Marionette)
- Плагины:
MissPlete — плагин для автозаполнения, толерантный к опечаткам и состоящий из 220 строк кода независимого ECMAScript 2015 (ES6)
jump.js — небольшая современная библиотека без зависимостей для плавной прокрутки
Responsify.js — плагин делающий изображения по настоящему адаптивными без обрезки лиц
microm — библиотека для конвертации звука из микрофона в mp3 в браузере
Wallaby.js для Visual Studio Code (Wallaby.js for Visual Studio Code)
Браузеры
- Microsoft объявила о прекращении поддержки всех версий Internet Explorer, кроме актуальной
- Приложение Opera Max научилось экономить трафик стриминговых сервисов
- 10 функций и улучшений, которые будут полезны для Microsoft Edge
- UC Browser стал мобильным браузером №2 в мире, заняв 17% глобального рынка
Vivaldi, твой следующий браузер? (Vivaldi, Your Next Browser?)
Сайты с интересным дизайном и функциональностью
Мини-сайт от Google, посвященный Звездным Войнам
saltfilms.com.sg — сайт с крайне нестандартным интерактивом
admirhadzic.com — сайт с минималистичным дизайном, необычным параллаксом и эффектами переходов
Примеры минималистичных дизайнов (Showcase of 22 Gorgeous Minimal Designs)
avenirclinic.com — сайт с минималистичным дизайном и нестандартной анимацией появления блоков
acme-experience.com — сайт с креативным полноэкранным слайдером
webstock.org.nz — страница с необычным дизайном параллакса
digiti.be — сайт с элементами из нестандартных геометрических форм
dance.com — новая крупная социальная сеть, на этот раз для танцоров
Дизайн
- История:
Жизнь ¶: история параграфа (The Life of ¶: The History of the Paragraph)
Preflight — история дизайна приложения
Red Peak: история дизайна маленького флага (Red Peak: The little flag that could)
- UI/UX:
Создаем UX для 10-футового UI (Designing User Experiences for the 10-Foot UI)
Методы улучшения UX с помощью динамического дизайна (Methods for Improving UX with Motion Design)
Дизайн для различных состояний UI (Designing for Various UI States)
Как бесконечная прокрутка разрушает UX (How infinite scrolling breaks UX)
Чему печатный дизайн может научить в смысле UX (What print design teaches us about UX)
Девять способов улучшить UX с помощью дополнительных микро-текстов (9 proven ways to enhance UX with microcopy)
- Графические редакторы:
Векторный, открытый и удобный: Inkscape 0.91
- Как символы и общие стили ускоряют процесс UI-дизайна в Sketch
- 11 советов по прототипированию в Sketch и InVision
Цвета в Sketch (Colors in Sketch)
Овладеваем Sketch 3 (Mastering Sketch 3)
- Уроки:
- Урок по создании простой иллюстрации в Sketch с бутылочкой лекарств
- Дизайн и экспорт иконки приложения в несколько размеров в Sketch 3
Четыре урока по дизайну от команды Pixar (4 Design Lessons From The Pixar Team)
Лучшие практики сортировки и фильтрации на мобильных (Filtering and Sorting Best Practices on Mobile)
Руководство по созданию классных фоновых видео для веб-сайтов (10 Guidelines for Better Website Background Videos)
- Эксперименты с тенями в Adobe Photoshop
- Текст из сложенной бумаги в Adobe Illustrator
Как создать анимированные латвийские паттерны в Adobe Illustrator и After Effects (How to Create Animated Latvian Patterns in Adobe Illustrator and After Effects)
- Folio: простой контроль версий на базе Git для команды дизайнеров
- «Раздражает, когда дизайнеры слишком ревностно относятся к своей работе» Основатели дизайн-студии Anton & Irene — креативный директор Антон Реппонен и директор по пользовательскому опыту Айрин Перейра — работали с Google, Microsoft, Porsche, Red Bull, CNN, Netflix и другими известными международными брендами. Дизайнеры рассказали vc.ru о своём опыте взаимодействия с клиентами, собственных проектах, принципах работы.
Как минималистичный дизайн почти убил скеоморфизм (How Minimalist Design Almost Killed Skeuomorphism)
8 оптических иллюзий для улучшения ваших мокапов (8 optical illlusions to improve your mockups)
Рабочие места дизайнеров (Designer spaces)
Дизайн — это беседа (Design is a conversation)
Дизайн направлений в Lonely Planet (Designing destinations at Lonely Planet)
Руководство о том, как стать незаменимым (A Beginner’s Guide to Being Indispensable)
Редизайн Wealthfront (Redesigning Wealthfront)
Нахождение правильных цветовых палитр для визуализации данных (Finding the Right Color Palettes for Data Visualizations)
Секрет успешного веба: узнайте чего хотят пользователи, затем дайте им это (The secret of web success: figure out what your user wants, then give it to them)
Четыре тренда по размещению элементов на Dribbble (4 Layout Trends on Dribbble)
Веб дизайн тренды 2015 & 2016: бесстрашные цвета (Web Design Trends 2015 & 2016: Fearless Colors)
Дизайн лучших иконок приложений (Designing better app icons)
Новые иконки Google Material нуждаются в некоторой доработке (The new Google Material icons could use some work)
Подборка бесплатных дизайнерских печенек
- Бесплатные цветные иконки для ваших проектов
- Бесплатные шрифты для заголовков и больших надписей
Два десятка мокапов от Alienvalley (20 New Free Mock-ups By Alienvalley)
Набор UI Spicy Treats (Free Spicy Treats UI Kit)
Набор с векторными изображениями Elegant (Free download: Elegant Vector Kit)
Коммуникационные иконки (Communication Icons)
Набор иконок Zen (Zen icons: A Free Set of 12 minimal outline Icons)
Декоративный шрифт Christmas Time (Free download: Christmas Time Display font)
Nazare — декоративный шрифт (Nazare — free font)
Новости
- Новый WordPress.com:
- WordPress перезапускается с нуля, чтобы лучше конкурировать с Medium
Предыстория нового WordPress.com
Dance to Calypso
- AMP-страницы появятся в выдаче Google в начале 2016 года
- «Ростелеком» запустил платформу Games.rt.ru для продажи игр со Steam
- Mozilla больше не нуждается в финансировании со стороны Google
- Основатель Amazon обогнал компанию SpaceX Элона Маска в строительстве многоразовых ракет
- Li-Fi начали тестировать вне лабораторий, скорость передачи в сто раз больше чем у Wi-Fi
- Состоялся глобальный перезапуск платформы WordPress
- Компания IBM передала сообществу Apache платформу машинного обучения SystemML
- Google получил патент на новые очки Glass в виде гибкого монокля
- Пользователи негодуют: обновление для Windows 10 без спроса удаляет приложения
- Сделки с Google и Yahoo принесли Mozilla 90% дохода в 2014 году
Занимательное
- Как объяснить технологические термины непонятливым родственникам
- Что такое современный киберспорт: рассказ Александра Кохановского, CEO Natus Vincere
- Хочу работать в Google: История одного оффера
- Рекламировать нельзя блокировать. Как работают блокировщики рекламы и как сайты пытаются с ними бороться?
- Василий Филиппов. Как «Яндекс» перестал быть тёплым и ламповым
- Азиатская суперкомпьютерная революция
- Google в поиске будущего
- Системы Windows, о которых мы либо не знали, либо забыли
- Самые неудачные решения за всю историю IT-индустрии
Нашумевшие скрипты хакера автоматизировавшего почти все рабочие процессы: hacker-scripts
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
serf
У реакт обожателей какой-то комплекс неполноценности, иначе зачем они постоянно пытаются всем доказать что оно убивает ангуляр и тому прочее.
derSmoll
Пользуются своей минутой славы, пока не пришел новый год с новыми фреймворками, и о реакте не забыли :)
![image](https://habrastorage.org/getpro/habr/comment_images/a00/f7f/9f8/a00f7f9f8c9da3a80d6b94bcbd72d766.jpg)
Finom
Мне, как разработчику своего
велосипедафреймворка такое поведение тоже не ясно. Любой фреймворк, на мой взгляд, должен ставить цель расширить круг полезных инструментов, а не монополизировать рынок.asci
возможно это попытка вытеснить ангуляр с рынка, чтобы в будущем иметь меньше страданий — чем меньше проектов будет на ангуляре, тем меньше шансов получить работу с проектом на нем.