Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Дизайн |
| Новости |
| Занимательное |
Веб-разработка
БЭМ-методология: с чего всё начиналось и зачем это всё нужно- Записи с конференции Web Standards Days — Москва 2015
Видео с FrontendFellows Conf- Создаем блог используя Jekyll и GitHub Pages
- Первые 8 выпусков скринкаста по Gulp от Ильи Кантора
- Performance Weekly. Issue #0. Дайджеста новостей за прошедшую неделю, посвященный производительности в вебе
- Как избежать ошибок при технической оптимизации сайта. Руководство по первичной настройке
Подробное руководство по Grunt для новичков (A Beginner’s Guide To Grunt)- Как выбрать фреймворк для фронтенда (How To Pick a Frontend Web Framework)
- Почему понятие «Mobile First» уже устарело (Why Mobile First Is Outdated)
- Начинаем пользоваться Webpack ч.1: путешествие разработку фронтенда с Webpack, React, Redux и TDD (Let’s start Webpack Part 1)
- Unpacking Webpack. Подробное ознакомление с новой парадигмой в процессе создания проектов
- Tyler Sticka: Наш процесс создания SVG-иконок (Case Study: Our SVG Icon Process)
- svg-icon-system-boilerplate — система для сборки svg иконок в спрайт
- The Service Worker Cookbook — коллекция практических примеров от Mozilla
- Создание Service Worker: пример. Подробная статья от Lyza Danger Gardner (Making A Service Worker: A Case Study)
- Осваиваем типографику в HTML письмах (Master HTML typography in email)
- Accelerated Mobile Pages
- Таблица элементов HTML5 (HTML5 Elements)
- Искусство создания коммитов (The Art of the Commit)
- Серия видео, посвященная разработке игр на HTML 5 (HTML 5 game development video series)
- Адаптивные изображения с умной автоматической обрезкой (Automatically art-directed responsive images)
- Эффектный веб:
- Еженедельная подборка красивых эффектов на CSS/SVG/JS #23
- Распознавание голоса (Web Speech Demo)
- Анимированная драм машина (SVG) (SVG Animated Drum Kit (Play Me!))
- Эффектный инструмент для предпросмотра и демонстрации сайта с помощью CSS и JavaScript
CSS
- Конец эры глобального CSS
- Подборка полезных утилит SCSS
- Золотая рыбка CSS3 Grid Layout (часть 3)
- Подробно о размещении элементов в грид-раскладке (CSS Grid Layout). Перевод статьи Deep Dive into Grid Layout Placement сообществом css-live.ru
- Еще раз о плавающей метке на CSS. Перевод статьи Revisiting the Float Label pattern with CSS сообществом css-live.ru
- SVG-маски
- Умная прокрутка со Scroll Snap Points
- Подробнейшая статья о свойстве `background-clip` с примерами. (The `background-clip` Property and its Use Cases)
- CSS переменные: почему мы должны думать об этом? (CSS Variables: Why Should You Care?)
- Перезагрузка последней версии clearfix (The very latest clearfix reloaded)
- Sass: структура каталогов, которая облегчит поддержку кода (Sass: Directory Structures That Help You Maintain Your Code)
- Действительно отзывчивые таблицы с помощью CSS3 Flexbox. Really Responsive Tables using CSS3 Flexbox
- Небольшая заметка про улучшение юзабилити прокручиваемых областей (Short note on improving usability of scrollable regions)
- Flexbox и отключение клавиатурной навигации (Flexbox & the keyboard navigation disconnect)
- Звездочный рейтинг с помощью Flexbox
- Foundation 6: новая Flex сетка (Foundation 6: The New Flex Grid)
- Как мы работаем с «CSS» в BigCommerce (How we «CSS» at BigCommerce)
- Масштабный рефакторинг CSS в trivago (Large Scale CSS Refactoring at trivago)
- Управляем шрифтами: Google Fonts + Chrome = проблемка? (Control Your Type: Google Fonts + Chrome = trouble?)
- TestMyCSS — онлайн инструмент для анализа Вашего CSS
JavaScript
- Chakra официально принят Node.js
- ES6:
- ES6: символы изнутри (Перевод статьи ES6 Symbols in Depth)
- ES6 стрелочные функции: новый клевый и лаконичный синтаксис в JavaScript (ES6 Arrow Functions: The New Fat & Concise Syntax in JavaScript)
- Представление ES2015 Proxies (Introducing ES2015 Proxies)
- Стоимость траспилинга es2015 в 2016 (Investigating the overhead cost of compiled es2015 )
- ES предложения: async функции, Object.getOwnPropertyDescriptors()
- Фреймворки:
- Сравнение Angular 2 и Aurelia side by side
- Почему я больше не использую MVC фреймворки (Why I No Longer Use MVC Frameworks)
- React:
- Про использование React с элементом canvas
- 10 причин, по которым каждый разработчик ДОЛЖЕН выучить React (10 reasons why every developer SHOULD learn React)
- Доклад Sasha Aickin на тему Reactjs — Speed up Server Side Rendering
- Производительная разработка с React (Performance Engineering with React (Part 1))
- Создание универсального блог приложения на React: внедрение Flux (Building a React Universal Blog App: Implementing Flux)
- Начало работы с React: создание Hello World демо (Getting Started with React: Building a Hello World Demo)
- Пять шагов для изучения разработки React-приложений (5 Steps for Learning React Application Development)
- react-designer — простая в настроке, легкая и редактируемая векторная графика в ваших react компонентах
- Angular:
- Релиз Angular 1.5.0
- Юнит тестирование AngularJS контроллеров с Karma и Jasmine (Unit Testing AngularJS Controllers using Karma and Jasmine)
- Создание мультипользовательских игр с Angular (Building multiplayer games with Angular)
- Angular 2 компоненты: вводы и выводы (Angular 2 Components: Inputs and Outputs)
- От Angular 1.x ng-repeat к Angular 2 NgFor с компонентом (From Angular 1.x ng-repeat to Angular 2 NgFor with Component)
- Angular 2 компоненты и провайдеры: классы, фабрики и значения (Angular 2 Components and Providers: Classes, Factories & Values)
- Пять причин почему Meteor идеален для стартапов (5 Reasons Why Meteor Is Ideal for Startups)
- Пишем переиспользуемые JavaScript модули нового поколения на ECMAScript 6 (Writing Next Generation Reusable JavaScript Modules in ECMAScript 6)
- JavaScript AI для HTML пазлов (JavaScript AI For An HTML Sliding Tiles Puzzle)
- Изучение JavaScript по примерам (JavaScript by Examples)
- Как исправить JS… возможно (How to fix Javascript… maybe)
- Как писать пуленепробиваемую функцию обертки в JS (How to write bulletproof function wrappers in JavaScript)
- Что ожидать от JS в 2016-м — вне браузера (What To Expect From JavaScript In 2016 – Beyond the Browser)
- Понимание JavaScript's async await (Understanding JavaScript's async await)
- Запись аудио и видео с MediaRecorder (Record audio and video with MediaRecorder)
- Leveling Up Your JavaScript
- Плагины:
- jQuery Select Box компоненты – Chosen против Select2 (jQuery Select Box Components – Chosen vs Select2)
- samsaraJS — библиотеа для создания анимированных интерактивных интерфейсов
- Gridifier — адаптивные сетки с сортировкой (Gridifier rethinks HTML layout & improves browser's grid layouting engine with the improved version of the Skyline 2D bin-packing algorithm.)
- Instadate — высокопроизводительная библиотека для работы с датами
- Multi-Screen.js — простой jQuery плагин, который превращает страницу в несколько экранов анимированной навигации в разных направлениях
- Whitestorm — движок WebGL на базе Three.js (Introduction to Whitestorm Modern WebGL engine based on Three.js technology, including physics and post effects.)
Браузеры
- Microsoft Edge для разработчиков в 2016-м: ES2016 Modules, Fetch API, Web Notifications, Beacon API, WOFF 2.0, High Resolution Time Level 2 и др.
- Расширения для Microsoft Edge скоро станут доступны инсайдерам и будут распространяться через Windows Store
- Firefox Developer Edition 46: инструментарий для работы с памятью, media sidebar и другое
- Тестирование Firefox 45-beta и Firefox Developer Edition 46
- Firefox переходит на плавающий график подготовки релизов
- Google планирует выпустить Chrome в стиле Material Design
- Плавный скроллинг в Chrome 49
- Chrome 49 Beta: кастомные CSS-свойства, фоновая синхронизация с service workers, и новые функциональности ES2015
- Упраздненные и убранные API в Chrome 49 (API Deprecations and Removals in Chrome 49)
- Google начинает блокировать сайты с обманными кнопками загрузки программ
- Opera 35 released
- Тренды браузеров февраль 2016: снижение рынка мобильных? (Browser Trends February 2016: Mobile Market Decline?)
Дизайн
- Новый интерфейс — это отсутствие интерфейса
- Дайджест продуктового дизайна, январь 2016
- Полное руководство для начинающих по стратегии работы с контентом (Complete Beginner’s Guide to Content Strategy)
- Графические редакторы:
- Photoshop, Sketch инструментарий UI/UX-дизайнеров: что выбрать для разработки интерфейсов?
- Серия уроков Sketch (часть 4 из 5): Дизайн планшетной и мобильной версии
- Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику
- Плагин git-sketch. Это Git клиент, встроенный прямо в Sketch
- Подробный урок по дизайну приложения под iOS в Sketch: Часть 1 из 3
- Переход с Photoshop на Sketch
- Как пересадить вашу команду на Sketch
- Полезные советы по использованию Sketch (5 Very Special, 10 Useful Sketch Tips)
- Дизайн с динамическим содержанием благодаря плагину Craft от InVision LABS в Sketch (Holy Sh!t~ Designing with Craft by InVision LABS in Sketch)
- Uber представила новый логотип и новые иконки приложений
- «Мы поняли, кто мы»: Как создавался новый фирменный стиль Uber
- Новый логотип и айдентика для Uber (New Logo and Identity for Uber done In-houseYour Identity is Arriving Now)
- Что стоит за редизайном Budweiser? (What’s behind Budweiser’s new look?)
- Микровзаимодействия: дьявол в деталях (Microinteractions: The Devil is in the Details)
- Клевая типографика, которая поднимет ваши заголовки на новый уровень (Awesome Typography That Takes Titles to the Next Level)
- Как мы делали дизайн для Dream Crew (How we’re designing Dream Crew)
- Как делать дизайн UI анимаций (How To Design User Interface Animations)
- Переосмысливаем чтение в вебе (Re-thinking reading on the Web)
- Руководство по персональному брэндингу для дизайнeров (Personal Branding Guide for Designers)
- Видео галерея для вдохновления привлечением пользователей различными мобильными приложениями (A Video Gallery for Mobile Onboarding Design Inspiration)
- Цвета альбомов года (ALBUM COLORS OF THE YEAR)
- Любовное письмо фрилансу (A love letter to freelancig)
- Все размеры рекламных блоков (The ultimate social & digital ad size guide!)
- Международные художники: Россия (International Artist Feature: Russia)
- Как цифровой номадизм превратил меня в мотивированного дизайнeра (How Digital Nomadism Turned Me Into a Highly Motivated Designer)
- Индустриализация дизайна (или почему Кремниевой Долине больше не нужны UX дизайнеры)
- Ценность последовательности в дизайне (The value of consistent design)
- Советы для UX дизайна приложений, часть 2 (UX design tips for your app, part 2)
- Illustrator за 60 секунд: как создать и экспортировать цветовые наборы (Illustrator in 60 Seconds: How to Create and Export Color Swatches)
- Инструмент «ручка» против Live Trace: подробное сравнение (Pen Tool Vs. Live Trace: The Big Comparison)
- Это лучшая иконка «сохранить»? (Is this the perfect save icon?)
- Прибытие в San Francisco (Arriving at San Francisco)
Подборка бесплатных дизайнерских печенек
- Векторные наборы ко Дню Влюбленных
- Бесплатные UI-наборы
- Craft — плагины для Sketch и Photoshop (Craft — UI design plugins for Sketch and Photoshop powered by real data)
- Набор кистей к фотошопу с элементами футуристического интерфейса (25 Best Tech Interface Photoshop Brushes Ever Created)
- Набор, включающий бесплатную графику и шрифт Hellena Script (Free Downloads: Valentine's Day Doodles, Graphics, and Brush Script Font)
- Лучшие кисти с водяными красками для дизайнеров (Top Free Photoshop Watercolor Brushes for Designers)
- Лучшие Smart PSD с классными текстовыми эффектами (30 Free Smart PSDs to Help You Create Easy Text Effects)
- Иконки еды в SVG формате ([Freebies] Food icon)
- Упаковка иконок ко Дню святого Валентина (Free Valentine’s Day Icon Pack + More Lovely Resources)
- Логотипы в AI-формате (Free Logo Designs For Your Projects, Added Every Tuesday)
- Pacha — декоративный шрифт (Pacha is a display typeface with a rustic and ethnic design, inspired in the ancient cultures of Latin America.)
- Fibon Sans – тонкий шрифт без засечек (Fibon Sans – Regular Weight Free)
- Прекрасные шрифты «нарисованные кистью» (15 Beautifully Imperfect Free Brush Fonts)
Новости
- Alphabet теперь самая дорогая публичная компания в мире
- Visa открыла API своих технологий для сторонних разработчиков
- «Яндекс» начнет понижать в выдаче «немобильные» сайты
- В «Одноклассниках» появилась функция денежных переводов
- В Facebook проверили теорию шести рукопожатий (на самом деле их три с половиной)
- Новый рекорд «ВКонтакте»: 5 млрд сообщений в день
- К 2030 году у Facebook будет 5 млрд пользователей
- Facebook закроет облачный сервис для разработчиков Parse через год
- Google расширил поддержку JSON-LD на микроразметку для отзывов и товаров
- Google расширит поддержку микроразметки в 2016 году
- Google: валидность HTML-кода не является фактором ранжирования
- Mozilla убивает Firefox OS для смартфонов и фокусируется на «Интернете вещей»
- Стоимость LinkedIn упала на $10 млрд после негативного прогноза на 2016 год
- Windows 10 обошла по популярности Windows 8.1 и XP
- BlackBerry откажется от собственной ОС в пользу Android
Занимательное
- Domain Name System — сложная технология, объясненная простыми словами
- Gmail стал седьмым сервисом Google, преодолевшим отметку в миллиард пользователей
- Как собеседуют и отбирают лучших сотрудников?
- Флексирамика — новый материал для печатных плат
- Китай опубликовал цветные фотографии после высадки на Луне
- Видео дня: впечатляющая демонстрация возможностей шлема дополненной реальности Microsoft HoloLens
- Почему блокчейн мог бы уничтожить государство, но не сделает этого
- Маркетинг в браузере: что такое push-уведомления и как получить от них пользу
- Самые странные объекты на картах Google Earth
- Превращение в Slack: история сына Glitch (Becoming Slack: The Story of a Son of a Glitch)
-
Мое зеркало в ванной умнее твоего (My Bathroom Mirror Is Smarter Than Yours) - nest-100.com — необычный аудио-визуальный опыт для веба
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Комментарии (2)
spmbt
08.02.2016 22:27> что такое push-уведомления и как получить от них пользу
Как надоедать пользователям на новом уровне.
kovalevsky
Кстати, в Chrome уже есть material design, в chrome://flags/ можно включить, но выглядит, мягко говоря, не очень :)