Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Дизайн |
| Новости |
| Занимательное |
Веб-разработка
Готовим WebP правильно- Подкаст Веб-стандарты. Выпуск №10
- «Это мой код», думают многие офисные работники. На самом деле нет.
В сентябре 2016-го ожидается релиз HTML5.1- AMP by Example — введение Accelerated Mobile Pages с живыми примерами кода. Список проектов, уже использующих AMP HTML — NY Times, Guardian, Twitter, LinkedIn и многие другие
- Быстрый совет о том, как сделать инлайнинг стилей для AMP проще с помощью Jade или PHP (Quick Tip: Make AMP’s Inline CSS Easier With Jade or PHP)
- Записи докладов с Microsoft Edge Web Summit 2016
- Заметки Aaron Gustafson по итогам 2016 Edge Web Summit
- Знали ли вы, что у инстаграмма есть не только фото с едой, но и неплохой технический блог? Вот свежая заметка про использование и производительность (Performance & Usage at Instagram)
- Чеклист для подбора лучшего решения CDN (Checklist to Find the Best CDN Solution)
- Начинаем работать с Browserify (Getting Started with Browserify)
- Семантика кастомных html элементов (Custom Element Semantics)
- Записывайте почти все в вашем браузере с помощью MediaRecorder API (Record almost everything in the browser with MediaRecorder)
- Принципы создания сайта, доступного с клавиатуры (Principles of the keyboard-accessible website)
- Создание простых, доступных веб-форм (Create simple, accessible web forms)
- Быстрый совет: как правильно использовать элементы Figure и Figcaption (Quick Tip: The Right Way to Use Figure & Figcaption Elements)
- Использование Foundation 6 с ASP.NET (Using Foundation 6 on ASP.NET Core)
- Процесс работы с SVG для создания доступных иконок (A Working SVG Workflow for Accessible Icons)
- Создание стрелочек на SVG (Making Arrows in SVG)
- Экспериментальное демо Angry Bots, игры на Unity, портированной на WebAssembly.
- Еженедельная подборка красивых эффектов на CSS/SVG/JS #32
CSS
- 4 мифа о PostCSS. Перевод статьи PostCSS Mythbusting: Four PostCSS Myths Busted
- Почти полное руководство по flexbox (без самих flexbox). Перевод статьи Almost complete guide to flexbox (without flexbox)
- Автоматизация регрессионного тестирования CSS. Перевод статьи Automating CSS Regression Testing
- Основы CSS-селекторов на примере котиков. Перевод статьи Basic CSS Selector Syntax Explained Using Cats
- Что такое CSS Modules и зачем они нужны? (What are CSS Modules and why do we need them?)
- Что на самом деле такое “CSS хак”? (What is the Definition of a “CSS Hack”?)
- Модульный CSS c помощью React (Modular CSS with React)
- Emoji: как пройти путь от U+1F355 к [иконке emoji, которую вырезает редактор хабра при публикации]
- HTML/CSS: Z-axis Adventures
- Проблема с iOS Safari и shrink-to-fit
- 16 Unix-правил для CSS (The 16 Unix Rules of CSS)
- Будущее CSS. О странном, сбивающем с толку, но захватывающем времени для CSS. (Future CSS)
- Игры на «чистом CSS» (+html) c помощью Counter-Increment (Pure CSS Games with Counter-Increment)
- Трансформации CSS и их перспектива (CSS transforms and their perspective)
- Раскрасска SVG в фоновых изображениях CSS (Coloring SVGs in CSS Background Images)
- Используете ли вы принцип единой ответственности? (Are you Single?)
- Меняем курсор с помощью CSS для улучшенния UX (или забавы ради) (Changing the Cursor with CSS for Better User Experience (or Fun))
- Sass Me — визуализация функции SASS color (Sass Me — visualize SASS color functions in real-time without compiling.)
JavaScript
- Свежие релизы: React v15.0 , Node v5.10.0 (стабильный), Релиз Grunt 1.0.0
- Как я стал рок-звездой Javascript (How I Became a JavaScript Rock Star)
- Использование веб-компонентов в ванильном JS (Use Web Components in Vanilla JavaScript)
- Объяснение Debouncing и Throttling на примерах (Debouncing and Throttling Explained Through Examples)
- Оптимизация производительности JavaScript с Firefox Dev Tools (Optimizing JavaScript Performance With Firefox Dev Tools)
- Шпаргалка по JavaScript-паттернам с примерами на jQuery (javascript design patterns cheat sheet using jquery for some examples.)
- Инструменты, позволяющие изучать JavaScript применяя его на практике (Tools to Learn JavaScript By Doing)
- В защиту гипер-модульности JavaScript (In Defense of Hyper Modular JavaScript)
- Опрос по основной стратегии отладки в JavaScript
- Потоковые литералы шаблонов (Streaming template literals)
- Четыре типа утечек памяти в JS и как от них избавиться (4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them)
- Обзор модульных систем: CommonJS vs AMD vs ES2015 (JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015)
-
Техники отладки Javascript — Скринкаст Spacedojo Code Kata - 2 Javascript функции для ускорения верстки
- ES5/ES6:
- ES5 руководство по JavaScript
- Прокси изнутри. css-live.ru продолжает перевод цикла Николаса Беваквы о ES6
- ES6 классы
- Новая возможность языка в ES2016: Array.prototype.includes
- Загрузка ES6 модулей: более сложна чем вы думаете (ES6 module loading: More complicated than you think)
- Выжимка о ES6 (ES6 Succinctly)
- Фреймворки:
- Angular 2 Beta, обучающий курс «Тур героев» часть 1
- Добро пожаловать в мир React
- Функциональный фронтенд с React (A Functional Front-End with React)
- Улучшаем производительность React с помощью Babel (Improve React performance with Babel)
- Подборка ресурсов для изучения ReactJS
- Простая аутентификация с React и Auth0 (React Authentication is Easy with Auth0)
- Переезд на React на проекте с Rails и Angular (The Transition to React in a Legacy Rails and Angular App)
- Почему стоит рассмотреть использование React Native для мобильных приложений (Why You Should Consider React Native For Your Mobile App)
- После шести месяцев разработки мы запустили проект на Angular 2
- Лучшие ресурсы по изучению AngularJS за март 2016
- Angular 2 Style Guide
- Плагины:
- Coloor — HTML препроцессор, добавляющий небольшую версию изображения в base64 коде и вызывающее его при lazy load
- atrament.js — небольшая JS библиотека для рисования в HTML Canvas
- InlineTweet.js — позволит вам сделать твит-ссылку из любого текста на странице
- object-fit-images — полифил для добавления поддержки object-fit у изображений для IE9, IE10, IE11, Edge и других старых браузеров
- glio.js — определяет, когда пользователь уводит мышь за границы сайта
Браузеры
- EdgeHTML issue tracker. Публичный баг-трекер от Microsoft
- Microsoft Edge Web Summit 2016: Microsoft анонсировала RemoteEdge для Mac и Linux
- Microsoft показала новые возможности для Microsoft Edge
- Microsoft Edge будет разумно использовать флэш-контент для повышения производительности и экономии энергии
- Современная классика — браузер Vivaldi 1.0
- В Firefox переходит на Widevine CDM для воспроизведения защищённого DRM видео
- Пользователи устаревших ОС скоро начнут видеть сообщение о том, что Chrome перестанет обновляться
- Тренды браузеров апрель 2016: взлет Samsung (Browser Trends April 2016: Samsung’s Surge)
- О том, что знает о вас любой браузер
Сайты с интересным дизайном и функциональностью
- bulldogyoga.com — вертикальный скролл-сайт с интересными эффектами
- nextrembrandt.com — интерактивный сайт, посвященный картинам Рембрандта
- Sweet Magnolia — стильный концептуальный сайт с упором на графическое оформление
- airforce.com — современный вертикальный скролл-сайт US Airforce
- bolden.nl — стильный концептуальный сайт с интересными эффектами
- madeinhaus.com — сайт с продвинутыми интерактивными эффектами на страницах
- Sex by numbers — тематический сайт со специфическим дизайном
- GUIBENTO.COM — необычные анимированные эффекты при скролле
Дизайн
- Дайджест продуктового дизайна, март 2016
- DPI, пиксели, Retina: Как устроены экраны устройств
- Сделать редизайн сайта и облажаться: 3 провала и как их можно было избежать
- Пять анти-принципов хорошего дизайна
- Дизайнер Basecamp: «Мне нравятся уродливые интерфейсы»
- Adobe Photoshop, Affinity Designer и Sketch 3 — отличное трио для дизайна интерфейсов
- Framer и Sketch: продуманное прототипирование
- Как создавать цвета, типографику и макет для iOS
- Простота — это хорошо (Simple is Good!)
- Что такое микровзаимодействие (What is a Microinteraction?)
- Почему я люблю уродливые, грязные интерфейсы — и вы, возможно, тоже. (Why I love ugly, messy interfaces — and you probably do too)
- Space — новая концепция дизайна от Google
- Как сделать дизайн в стиле Болливуда на тему Нового года Hindu (How to Design a Bollywood-Inspired Poster to Celebrate Hindu New Year)
- Художники мира: Индонезия (International Artist Feature: Indonesia)
- Проходит ли Ваш сайт «сотовый» тест? (Does Your Site Pass the Honeycomb Test?)
- Коллекция лучших сообщений пользователям (Just Good Copy)
- Простите за прокол пузырька вашего чата (Sorry to burst your [chat] bubble)
- Руководство для начинающих по UX прототипированию (The beginner’s guide to UX prototyping)
- Простое руководство по выбору цветовой палитры (A Simple Web Developer’s Guide To Color)
- Как использовать Adobe Fuse (How to Use Adobe Fuse)
- Sketch, Illustrator или Fireworks? Открываем новое приложение для дизайна UI: Gravit
- Соляризовать как Zayn: цифровой эффект сюрреалистичных черно-белых портретов (Solarized Like Zayn: The Digital Sabattier Effect for Surreal Black and White Portraits)
- Triangulart — простой редактор для рисования изометрических иллюстраций
- Детали типографики отобранных сайтов Typewolf за март 2016 (The Typographic Details Behind Typewolf’s Favorite Sites of March 2016)
- Представлены финалисты конкурса логотипа для олимпийских игр Tokyo 2020 (Tokyo 2020 Olympics unveils shortlisted logo designs)
- Новый логотип и айдентика для для Natsuki от Erretres: Moon Shot (New Logo and Identity for Natsuki by Erretres: Moon Shot)
- HP представила «новый» логотип (HP unveil «new» logo)
- Новый логотип HP, который никем еще не был использован (HP's new logo is the awesome one it never used)
- Музей логотипов: рисуем линию (Museum Logos: Drawing The Line)
Подборка бесплатных дизайнерских печенек
- Текстуры бумаги (130+ Free Paper Textures)
- Бесплатные фотографии, которые будут хорошо смотреться в качестве фона
- Наборы изображений с абстрактными фонами (Free Abstract Background Images, Mega Bundle and Resources)
- Голливудские сцены, превращенные в мокапы (Hollywood Mockuuups)
- Крутые паттерны с птицами в главной роли
- Бесплатный вектор на тему мотоциклов
- Свежие бесплатные mockup-файлы
- Набор контурных иконок: Интернет вещей (FREEBIE: The Internet of Things Stroke Icon Set)
- Набор шрифтов-монограмм (25+ Elegantly Designed Free Monogram Fonts)
- Упаковка преимущественно декоративных шрифтов (16 Free Fonts Bundle — Web Design Freebies List — #16)
Новости и занимательное
- SpaceX Элона Маска впервые успешно посадила первую ступень Falcon 9 на плавучую платформу в океане
- Доля Windows 10 приближается к 15%: более 270 млн пользователей по всему миру
- ФБР не может взломать iPhone 5s и более поздние модели
- «ВКонтакте» и Warner Music Group заключили внесудебное соглашение об использовании музыкального контента
- Rovio терпит убытки
- Windows 10 Insider Preview Build 14316 с Bash on Ubuntu уже доступен
- Medium нацелился на успех WordPress, предложив новый способ управления сайтами
- WSJ: Apple при Джобсе взламывала iPhone для властей США и заартачилась лишь в наши дни при Тиме Куке
- Почему умение программировать не спасет вашу работу
- Ну что, дописались, фантасты?!!
- Samsung тестирует сканер радужной оболочки глаза для смартфонов
- Фотогалерея: Где начинающие карьеру разработчики и дизайнеры живут в Кремниевой долине
- Нейросеть вместо фотошопа
- В MIT напечатали робота из твердых, гибких и жидких материалов одновременно
- Энтузиаст подключил Chromecast к ламповому телевизору 1978 года
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
