Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Веб-разработка |
|
|
Браузеры |
Дизайн |
Новости |
Занимательное |
Веб-разработка
How-to: Процесс создания верстки html-писем- Еженедельная подборка красивых эффектов на CSS/SVG/JS #6
- Семантическая структура для HTML5 страницы. Семантика в HTML5
- Руководство по Web Animations API — Часть 5: приятная траектория движения
FLIF — бесплатный формат изображений без потери качества (FLIF — Free Lossless Image Format)- Paul Irish & Paul Lewis презентуют RAIL (Response, Animation, Idle, Load): ориентированную на пользователя модель для производительности (Introducing RAIL: A User-Centric Model For Performance)
- Разбиваем контент по секциям в HTML5 — div, section или article?
- Bootstrap 4 Tutorial: создание одностраничного шаблона
- Рисованное руководство по Flux (A cartoon guide to Flux)
- SVG и DOM, или «Самый странный баг, с которым я сталкивался» (SVG and the DOM, or «The Weirdest Bug I've Ever Encountered»)
- Свежая статья от Peter-Paul Koch о текущем состоянии вьюпортов и новой спецификации адаптации устройств (A new Device Adaptation spec)
- IndexedDB, WebSQL, LocalStorage – что блокирует DOM?
- Отладка Webpack приложений в WebStorm (Debugging Webpack applications in WebStorm)
- Помните впечатляющее демо LavaLamp на SVG? Вот статья о том, как она создавалась (How To Make An SVG Lava Lamp)
-
Доклад Addy Osmani на тему «Что нового в Chrome DevTools?» - Подборка видео с конференций JSConf и CSSConf 2015
- Появилось 7 свежих видео со SmashingConf Freiburg
CSS
- 19 принципов разработки по БЭМ, или что должен знать каждый разработчик библиотек
- Осваиваем CSS: BEM и ITCSS
- Эстетичный Sass. Часть 1: архитектура и организация, часть 2: цвета и палитры, часть 3: типографика и вертикальный ритм
- Улучшение загрузки шрифтов c помощью localStorage и WOFF2
- Когда бывает нужен calc()
- Индикаторы правильности заполнения полей на CSS
- Заметка о практической пользе CSS методологий на примере БЭМ и о проблемах Bootstrap
- Руководство по быстрому старту PostCSS: настройка Gulp (PostCSS Quickstart Guide: Gulp Setup)
- Встраивание критического CSS для динамических веб-приложений (Inlining Critical CSS for Dynamic Web Apps)
- Список SVG свойств, которыми можно манипулировать из CSS
- Затемненные объемные прогресс-бары: CSS/Sass упражнение (Shaded Progress Bars: A CSS/Sass Exercise)
- Corpus — коллекция CSS сниппетов для каждого проекта (SCSS)
- Несколько видео с SmashingConf Freiburg: CSS For Software Engineers For CSS Developers, Web Fonts Performance
- Доклад Glen Maddern на тему Interoperable CSS с CSSconf EU 2015
JavaScript
- JavaScript и Nginx = nginScript, а HTTP2 в придачу
- Matreshka.js: Matreshka.js 1.1: еще больше крутостей, События
- nginScript – почему мы создали свою собственную имплементацию JavaScript? (nginScript – Why Are We Creating Our Own JavaScript Implementation?)
- ES6:
- Totally Tooling Tips: ES2015. Разработчики Google делятся своими советами по инструментарию
- Эффект JavaScript 2015 (ES6) на разработку
- Состояние JavaScript на Android-е в 2015… печальное (The State of JavaScript on Android in 2015 is… poor)
- ES6: методы против коллбэков (ES6: methods versus callbacks)
- Документация ES6 с ESDoc (Document ES6 with ESDoc)
- ES6 промисы в деталях (ES6 Promises in Depth)
- Настройка ES6 с помощью хорошо известных символов (Customizing ES6 via well-known symbols)
- Гениальность шаблонов строк в ES6 (The Genius of Template Strings in ES6)
- ESLint: новое поколоение JavaScript валидаторов (ESLint: The Next-Generation JavaScript Linter)
- 6 хитростей, которые помогут вам изучить JS быстрее (Six Simple Mind Tricks to Help You Learn JavaScript Faster)
- 12 правил для JavaScript-профи в 2015 (12 Rules for Professional JavaScript in 2015)
- Функции без ”function” (Functions without ”function”)
- Видео: Быстродействие с requestAnimationFrame (Watch: Performance with requestAnimationFrame)
- Современный стратовый пакет с React на webpack (A modern React starter pack based on webpack)
- Введение в Rendr (Introduction to Rendr)
- Прототипирование 3D тач взаимодействий с Framer (Prototyping 3D Touch interactions with Framer)
- Плагины и библиотеки:
- clipboard.js — современный способ копирования в буфер, без флеша, всего 2Kb
- Как clipboard.js набрал 5000 звёзда за несколько дней? (How did clipboard.js get 5000 stars in a few days?)
- Rune.js — удобная JS библиотека для создания графических систем, объектов, сеток, типографики с помощью SVG.
- Использование библиотеки JSCharting (Using the JavaScript Charting Library)
- Реализация 3D Touch на JavaScript
- Подсветка текста внутри Textarea
- Popmotion — движок JS анимации с эмуляцией физики в 12 Кб
- Без jQuery — DOM манипуляции с NodeList.js (Lose the jQuery Bloat — DOM Manipulation with NodeList.js)
Браузеры
- Trainspotting: Firefox 41
- Выход Firefox 42-beta и Firefox Developer Edition 43
- Firefox 41 позволяет разработчикам делать скриншоты для отдельных элементов страницы
Сайты с интересным дизайном и функциональностью
- BioWars — сайт, насыщенный CSS анимацией, которая сочится практически из каждого компонента страниц
- Интерактивный сайт с оригинальной системой поиска, посвященный игре Assassins Creed
- lezilus.fr — сайт с нестандартными ховер-эффектами и переходами
- designdisruptors.com/ — лаконичная и приятная скролл-анимация
- Frontend inWonderland — промо-страница с креативным дизайном и параллаксом
- 88and90lex.com — слайд-скролл сайт с симпатичными эффектами
- homerhudson.com — нестандарная анимированная полноэкранная навигация
Дизайн
- Пространственные интерфейсы: Как использовать физические свойства реальных предметов в дизайне
- Психология цифр в дизайне
- Дизайн карты мира
- Визуализируй это. Бытовая картография не такая уж и сложная и запутанная штука, если ей немного увлечься.
- Channel 4 «разбил» логотип на части ради новой айдентики
- Графические редакторы:
- Sketch Plugins — Библиотека плагинов для выравнивание элементов, типографики и цветовых палитр
- 10 фишек в Sketch для дизайнеров
- 5 советов, которые помогут ускорить работу в Sketch
- Ссылка дня: Product Hunt для пользователей Photoshop
- Быстрый совет: как открыть поврежденный файл Adobe InDesign (Quick Tip: How to Open Corrupted Adobe InDesign Files)
- Редизайны:
- CodePen с новым дизайном
- Новый дизайн CSS Tricks получил смешанные отзывы
- Google изменил дизайн аватаров в аккаунтах пользователей
- Улучшение профилей Facebook на мобильных (Improving Mobile Profiles)
- Huffington Post презентовал новый классный дизайн (The Huffington Post debuts a bold new design)
- Закружились: история ребрендинга Asana (Circling Ourselves: The Story Behind Asana’s Rebrand)
- Новый логотип Opera был сделан внутри компании при сотрудничестве с фирмами Anti и DixonBaxi (New Logo for Opera done In-house with Anti and DixonBaxiOnline Portal)
- Типографика:
- 6 шрифтов сравнили на эффективность в рекламе
- Будущее UI это текст (The future of UI is text)
- Заставляют ли вас наживать на кнопки шрифты с засечками? (Do serifs make you tap?)
- Детали типографики лучших сайтов по версии Typewolf за сентябрь 2015 (The Typographic Details Behind Typewolf’s Favorite Sites of September 2015)
- UI/UX:
- Как IFTTT привлекает новых пользователей (How IF by IFTTT Onboards New Users)
- Готовы ли пользователи настольных компьютеров к иконке-гамбургеру? (Are Users Ready for the Desktop Hamburger Icon?)
- Действительно ли веб-дизайнеры должны знать UX? (Do web designers really need to know UX?)
- Как делать дизайн форм, которые конвертируют (How to design forms that convert)
- Три десятка примеров интерфейсов поиска на веб-сайтах (30 Examples of Website Search Interface Design)
- Узнаем о невидимом дизайне (Learning About Invisible Design)
-
Самый потрясающий когда-либо созданный UI
- Дизайн для веба против дизайна для приложений в эпоху мобильных устройств (Designing for the Web vs. Apps in the Mobile Era)
- Каждый веб-сайт выглядит одинаково, и это нормально (Every website looks the same, and that’s ok)
- Как запускать проекты в свободное время: пример проекта Screenings (How To Run A Side Project: Screenings Case Study)
- Дизайн быстрого приготовления (Fast Food Design)
- Клавиатурный шведский стол (Keyboard Smorgasbord)
- Origami: как создавать прекрасные прототипы за минуты (Origami: How to Build Terrific Prototypes in Minutes)
- Как оживить ваш плоский дизайн грязными точками (How to Liven up Your Flat Design with Dirty Dots)
- Представляем: стандарты веб-дизайна Соединенных Штатов (Introducing: U.S. Web Design Standards)
- BG Stock — сток HTML5 фоновых видео
- Как экспортировать для печати пиксель-арт в Adobe Photohop (How to Export Pixel Art for Printing in Adobe Photohop)
- Подробное создание иллюстрации стакана молока и печенек в Adobe Illustrator (Create a Detailed Glass of Milk and Cookies in Adobe Illustrator)
Подборка бесплатных дизайнерских печенек
- MOBIRISE WEBSITE BUILDER — Очень простой и бесплатный конструктор мобильных сайтов. (Create awesome mobile-friendly websites. No coding and free.)
- Бесплатный клипарт о пополнении в семье
- Векторный клипарт в стиле барокко
- Мокапы устройств Apple (Free Apple Devices Mockups)
- PSD с UI iOS 9 на iPhone 5, 6 и 6 Plus (iOS 9 Complete UI free PSDs for iPhone 5, 6 and 6 Plus)
- Векторные изображения ленточек (29 Modern Ribbon Vector Freebies to Download)
- Векторный бейдж Halal (Halal Food Free Vector Badge)
- Коллекция векторных изображений графиков и диаграмм (Freebie: Vector Graph & Chart Collection (AI, EPS, SVG, PSD & PNG))
- Иконки самых известных мест мира (AI, EPS, PDF, PNG and PSD) (Freebie: World Landmark Icons (AI, EPS, PDF, PNG and PSD))
- Иконки посвященные SEO (FREEBIE: 36 Free SEO Icon Set)
- Набор иконок Birply от Davide Pacilio (Birply – Free Icons Sets by Davide Pacilio)
- IconAlone: больше сотен контурных иконок (IconAlone: 110 Line Icons)
- Тысяча OpenType шрифтов от Creative Bloq (1000 Free OpenType Fonts by Creative Bloq)
- Relancer — шрифт в стиле арт-деко (Relancer // Free Display Font)
- NOVU — шрифт без засечек (NOVU — M Free Font)
Новости
- Новые Nexus, Chromecast и Android 6.0 Marshmallow: теперь официально
- Разработчик расширения для блокировки рекламы Adblock продал проект неизвестному покупателю
- В настольной версии Skype появилась поддержка синхронного перевода речи
- Tesla Model X: двери-крылья и супер-фильтр
- Twitter вскоре может отменить ограничение в 140 символов на сообщение
- Google и Microsoft прекратили затянувшуюся патентную битву
- GitHub объявил о доступности хранилища больших файлов для всех репозиториев
- Facebook за внедрение видеоаватаров
- Компания Yahoo представила Gryffin, открытый сканер безопасности для Web-приложений
Занимательное
- 11 простых лайфхаков, которые могут значительно повысить продуктивность работы
- Стивен Хокинг считает, что кочевые инопланетяне могут нас уничтожить
- Четыре месяца в Microsoft: От подачи заявки и первого собеседования до увольнения
- Открытое письмо, которое победило Adobe Flash
- Windows 10 как религия ИТ-деспотий
- ИгроМир 2015:
- Игромир/Comic Con Russia 2015: Косплей и стендистки
- Все свои: Comic Con Russia и «ИгроМир 2015»
- Лучший косплей и великолепные девушки Игромира 2015 и Comic Con Россия
- Река людей, день косплея и игра про котиков — первый публичный день «Игромира»/Comic-Con 2015 глазами ошалевшего гостя столицы
- iКольцо станет реальностью?
- 10 малоизвестных фактов о компании Logitech
- Грабли вай фая: как не нужно настраивать беспроводную сеть
- 9,200 высококачественных фотографий с миссии Apollo оцифрованы и выложены в сеть
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Комментарии (6)
porcelanosa
05.10.2015 20:30+1Новости и занимательное в этом дайджесте лишние, имхо. Хотя в этих разделах бывают интересные материалы.
Просто по-моему, не целесообразно тратить Ваше время на эти разделы. Это все-таки дайджест материалов для разработиков
deadmoto
05.10.2015 22:29Как человек, далекий от дизайна и верстки, я читаю только два раздела — новости и занимательное.
И мне кажется, что эти два раздела не просто «лишние», а заслуживают отдельного дайджеста :)
derSmoll
06.10.2015 00:18Тут вот в чем загвоздка. Если их сделать отдельным дайджестом, то он автоматически выпадет из тематики хабра и переместится на гиктаймз. А гиктаймз сам по себе состоит из новостей и занимательного, поэтому профит будет нулевой, имхо.
Задумка же примерно такая: довольно часто разработчики настолько погружены в работу, что им некогда или лень следить за новостями индустрии или тратить время на поиск релевантных интересных статей. Вот наш дайджест и предлагает в качестве бонуса подборку с такими ссылками. Это как блоки с анекдотами и кроссвордами на последних страницах бумажных газет, как печаталось раньше. (а может и сейчас продолжают такое печатать)
Maklaud
06.10.2015 23:49+1Я согласен с предыдущими комментариями. Сам не читаю css и javascript, часть разделов пробегаюсь, часть (дизайн, печеньки) внимательно просматриваю. Но если вам все еще по силам делать все, то конечно оставляйте как есть, места хватит! Каждый почерпнет что-то полезное для себя.
goooseman
Хотя и опрос показывает, что много людей хотят отказаться от раздела «Сайты с интересным дизайном и функциональностью», я все-таки взываю автора оставить этот раздел. По-моему, этот раздел просто прекрасен для поиска вдохновения и изучения на практике множества интересных технологий и методов верстки.
alexzfort
Вы абсолютно точно описали общий смысл этого раздела :)