Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №190 (13 — 20 декабря 2015)

2015-12-20 в 21:17, admin, рубрики: Без рубрики

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

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

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

CSS

Javascript

Браузеры

Дизайн

Новости

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

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

Итоги 2015: веб-разработка
Mozilla выпустила фреймворк A-Frame для создания сайтов виртуальной реальности
Техники работы с DOM: родительские, дочерние и соседние элементы
Запись конференции Web Standards Days в Москве, 2015
Адаптивное прогрессивное доступное поле для поиска (Responsive Progressive Accessible Vanilla Search)
Урок, посвященный возможностям OpenType, когда их использовать и почему они важны (Caring about OpenType features)
Что нужно знать верстальщикам писем про Outlook 2016
Новинки от разработчиков Google: Дебют Security Panel в Chrome DevTools, Представление фоновой синхронизации (Introducing Background Sync)
Оптимизация процесса разработки шаблонов писем (Optimize Your Email Development Workflow)
Лучшие практики руководств по стилям от Brad Frost с конференции Beyond Tellerrand (Style Guide Best Practices)
satyr.io — новый инструмент для создания image placeholders c расширенными возможностями — симуляция медленной загрузки, понимание пропорций, работа оффлайн и другое
Реализация полей ввода для тач-устройств с 2013-го года улучшилась всего на 9% (60% до сих пор используют их неправильно)
5 ресурсов для разработчиков, связанных со Звездными Войнами (5 Star Wars Resources for Developers)
Компилирование в WebAssembly: это произошло! (Compiling to WebAssembly: It’s Happening!)
Интерактивность — это улучшение (Interaction Is an Enhancement)
Основы доступности в вебе (The web accessibility basics)
Создание собственных веб-компонентов с X-Tag (Building Custom Web Components with X-Tag)
SMIL мертв! Да здравствует SMIL! Руководство по альтернативам к основным особенностям SMIL (SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features)
Веб-производительность:
- Примеры настройки производительности enterprise-решений (Enterprise web front-end performance tuning – worst practices case study)
- Что мы узнали после четырехлетнего мониторинга развития веба (What I’ve learned from monitoring four years of web page bloat)
- Использование отзывчивых изображений и асинхронной загрузки позволяет уменьшить вес начальной загрузки страницы на ~80%
- Critical Metric: Critical Resources
SVG:
- Анимация обрезанных элементов в SVG (Animating Clipped Elements In SVG)
- SVG Text On A Path — Part 1
- SVG иконки просты, но фоллбеки их — нет (SVG icons are easy but the fallbacks aren't)
- Частичная размытость в SVG и прозрачность в стиле iOS (SVG Partial Blur and iOS Style Translucency)
Эффектный веб:
- Еженедельная подборка красивых эффектов на CSS/SVG/JS #17
- Лучшие библиотеки для анимации в 2016-м (Top 9 Animation Libraries to Use in 2016)
- Создание режима ночного для вашего сайта, часть 1
- Анимация пути на картах для интерактивного повествования (Animated Map Path for Interactive Storytelling)

CSS

Почему я в восторге от «родных» CSS-переменных. Перевод статьи Why I’m Excited About Native CSS Variables сообществом css-live.ru
CSS-переменные стали кандидатом в рекомендации
Псевдостоинства и непсевдостатки. Перевод статьи Pseudo and pseudon’t сообществом css-live.ru
Управляем поведением font-face в CSS
Flexibility — свежий полифилл для Flexible Box Layout Module Level 1, позволяющий пользоваться флексбоксом в старых IE
Страница для тестирования правил CSS Flexbox
Сравнение инструментов для построения разметки: Flexbox Vs. Susy
Сетка, Flexbox, выравнивание блоков: наша новая система для разметки (Grid, Flexbox, Box Alignment: Our New System for Layout)
Sierra library — самая маленькая и легкая библиотка для scss (ранее известная как penguin)
Эволюция CSS
Почему Bootstrap 4 означает, что Sass выиграл (у Less) (Why Bootstrap 4 Means Sass Has Won)
Лучшие демки и концепты 2015-го года на чистом CSS (Best Pure CSS Pens of 2015)
Понимание методологии CSS-модулей (Understanding the CSS Modules Methodology)
За гранью руководств по стилю (Beyond the Style Guide)

JavaScript

Фреймворки:
- Angular2 теперь «бета»
- Google переписал свой Angular JavaScript фреймворк
- Переход с 1.X
- React в 2015 — ретроспектива
- Rista — легкая альтернатива для ReactJS
- Victory — экосистема для модульных компонентов для визуализации под React
- React Refetch — простой, декларативный и компонуемый способ получения данных для React компонентов
A Rundown of the Best New Features in ES2015
xto6 конвертор ES5 кода в ES6 вживую (Transpile ES5 code into ES6 live !)
4 шаблона для JS разработчика, о которых вам следует знать (4 JavaScript Design Patterns You Should Know)
Remy Sharp: моя стратегия тестирования в node
Алгоритм Math.random был улучшен в Chrome (There's Math.random(), and then there's Math.random())
Что делает “!--” в JavaScript? (What does “!--” do in JavaScript?)
Как будет выглядеть рынок работы в области JavaScript в 2016-м (Forget the Click Bait. Here’s What the JavaScript Job Market Really Looks Like in 2016)
Конвертор из Java в TypeScript/JavaScript (A transpiler from Java to TypeScript/JavaScript)
Детальный разбор CORS (An in-Depth Look at CORS)
Быстрый совет: прекращайте писать циклы, используйте лучше Maps (Quick Tip: Stop Writing Loops and Start Thinking with Maps)
Как использовать RethinkDB с Node.js приложениями (How to Use RethinkDB with Node.js Applications)
Представление Lokka — простой JavaScript клиент для GraphQL (Introducing Lokka — A Simple JavaScript Client for GraphQL)
Использование Google Maps без проблем с GMaps.js (Google Maps Made Easy with GMaps.js)
Руководство для начинающих по WebGL (A Beginner’s Guide to WebGL)
Создание приложения для настольных устройств с Angular 2 и Electron (Create a Desktop App with Angular 2 and Electron)
Плагины и библиотеки:
- timbre.js — осуществляет функциональную обработку и синтезирование аудио в ваших веб-приложениях (provides a functional processing and synthesizing audio in your web apps with modern JavaScript's way like jQuery or node.js.)
- Colorify.js — библиотека для извлечения цветов из изображений и работы с ними
- daterangepicker — компонент с зависимостями (jQuery, Moment, Knockout) для выбора диапазона дат
- grooscript — библиотека для конвертации Groovy кода в JavaScript

Браузеры

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

emojitracker.com — использование emoji в твиттере в реальном времени
oursroux.c — одностраничный сайт-слайдер
Soleil — скролл-сайт с интересными анимационными эффектами и переходами
sfcd.com — вертикальный скролл-сайт продуктового агенства с качественной графикой и анимациями
Креативный сайт от Borjomi
Frank Underwood — cайт, посвященный предвыборной кампании сабжа
Обзор года музыки от Spotify
bonnemarque.se — сайт с крутыми эффектами
Интерактивный видео-сайт
motiv-studio.com/ — симпатичный концептуальный сайт с параллаксом и анимацией загрузки компонентов
because-recollection.com/rita-mitsouko — музыкально-визуальный проект

Дизайн

Убеждающий веб-дизайн
Вертикальные заголовки: кто прав?
Простота в UX-дизайне переоценена
Новинки в веб-дизайне сайтов электронной коммерции. Часть 2
Графические редакторы:
- Прототипирование ios приложения с помощью Marvel и Sketch: Часть 1 из 2
- Полное руководство по дизайну iOS 9 в Sketch
- Дебаггинг (Debugging) плагинов Sketch
Уроки:
- Урок по дизайну карточного интерфейса профиля в Sketch App 3
- Рождественская гора подарков в Adobe Photoshop
- Зимние уроки для Adobe Illustrator
Подведение итогов года:
- Редизайны года: «Почта России», «Кинопоиск», «Мотор», «Ведомости»
- Обзор года от Vox Media (Year in Review)
- Лучшие дизайны обложек в 2015-м (The best book cover designs for 2015)
- Обзор года от Campaign Monitor (Email marketing continues to grow because of what you do)
- Лучшее прочитанное мной о дизайне в 2015 (The Best Design Things I Read in 2015)
- Мои любимые статьи о дизайне в 2015-м (My favourite design articles 2015)
- MailChimp 2015
- Что я узнала о продуктовом дизайне в этом году (What I Learned about Product Design This Year)
7 основных принципов дизайна, которым учат Star Wars
Новогодние логотипы для вдохновения
Лучшие практики для UX навигации (Best Practices for the UX of Navigation)
Лучший метод для создания отзывчивого дизайна в 2016-м году (A Better Responsive Web Design Process for 2016)
7 причин, по которым бесконечный скроллинг, возможно, плохая идея (7 reasons why Infinite Scrolling is probably a bad idea)
Пользовательский опыт важен для веб-дизайнеров (User Experience Is Important For Web Designers)
Рекомендованное чтиво для дизайнеров (Recommended Reading For Designers)
Вызовет ли мобилгеддон революцию веб-дизайна? (Will Mobilegeddon Cause a Mobile Website Design Revolution?)
Выявленные ограничения Apple Watch (Embracing the Constraints of the Apple Watch)
Этюд: Mixcloud (Etude: Mixcloud)
Дизайн коллажа Facebook (Designing Facebook Collage)
Для @Elonmusk: восемь улучшений UI Tesla (For @Elonmusk: 8 improvements for the Tesla UI)
Этнография = лучший дизайн (Ethnography = Better Design)
Делаем акцент на данных (Bring the data forward)
Четыре совета по использованию анимации в дизайне (4 Tips for Using Animation in Design)
Как создать иллюстрацию мультяшного пингвина в Affinity дизайнeр (How to Create a Cartoon Penguin Winter Illustration in Affinity Designer)
Как сделать дизайн открытки в ретро-стиле в Adobe Illustrator (How to Design a Retro Christmas Postcard in Adobe Illustrator)
Дизайн логотипа олимписких игр от дошкольников (PreSchool Olympic Logo Design)
Да пребудут с вами шрифты! (The Original Trilogy: ITC Serif Gothic, the Star Wars logo, and Times)

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

Текстуры с фото космоса (Free Space Photoshop Textures)
Бесплатные новогодние баннеры
Топ 15 бесплатных символьных шрифтов (The top 15 free symbol fonts)
Свежие наборы UI (Fresh Free UI Kits to Download Today)
Мокап iPhone 6s (Freebie: iPhone 6s Mockups)
Небольшой набор рождественских иконок (Christmas Icons Freebie 3/3 — Holidays)
Набор иконок с плоским дизайном и тенями «Freelancer» (Freebies: Beautiful Freelancer Icon Set For Your Business)
Иконки с обозначениями видов пищевой аллергии (AI, EPS, PSD, SVG, PNG) (Freebie: Allergy Info Cosmetic & Food Icons (AI, EPS, PSD, SVG, PNG))
UIcons – контурные иконки (AI, EPS, SVG, PNG) (UIcons – Free Line Icons (AI, EPS, SVG, PNG))
Рождественские веб-иконки (Free Christmas Web Icons)
Рождественский набор иконок (AI, PSD, EPS) (Freebie: Christmas Icons Set (110 Icons, AI, PSD, EPS))
Три десятка рождественских контурных иконок (30 Free Christmas Icons)
Коллекция бесплатных шрифтов (Collection of Free Fonts and Typefaces)
Декоративный шрифт Tessellate (Tessellate FREE FONT)
Декоративный шрифт Curely (Free download: Curely font)
Шрифты с эффектом кисти (20 Free powerful brush fonts)

Новости

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

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

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

Автор: Zfort Group

Источник

Информация

Обсуждаемое

Рекомендуем