HTML *

Мега интересная лекция от знаменитости в области веб-разработки, основателя и шеф-редактора журнала Smashing Magazine. Мероприятие произошло благодаря Mail.ru. Ключевые темы: UI/UX, проектирование, отзывчивый дизайн, производительность, трюки с SVG. Все это на примере реальных кейсов от The Guardian, BBC и конечно же Smashing Magazine.

От себя хочется добавить, что Smashing Magazine я читаю ежедневно и многое беру от туда для моих подборок. А тут все эти «трендовые постулаты» Perfomance Budget, Mobile First, Atomic Design, Critical Path и др. из первых уст! Еще Фридмана просто интересно слушать. Очень харизматичный спикер с постоянной дружелюбной улыбкой на лице. Рекомендую всем к просмотру.

Сей опус это вольный перевод публикации Криса Койлера [Chris Coyier] от 2 Июля.

В качестве вступления

Как вы наверняка знаете, CSS свойство table-layout предназначено для управления режимом формирования ширины столбцов в таблице. Оно может принимать следующие значения: авто, фиксировано или наследственно. По умолчанию в браузерах для отображения таблицы используется стандартное поведение: браузер рассчитывает ширину строки как сумму ширины всех ячеек. Следом, по тому же принципу рассчитывает ширину 2-й строки, и если размеры какой-либо ячейки превышают размеры вышестоящей ячейки, перестраивает всю таблицу. Далее определяет ширину 3-й ячейки, 4-й и т.д. В случае если таблица имеет много, очень много рядов, расчет ширины может немного затянуться…

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Walkway.js и Vivus.js

Вы видели этот великолепный лэндинг посвященный анонсу Sony PlayStation 4? Обратите внимание на анимацию SVG объектов состоящих из контуров. Они словно рисуются художником в режиме реального времени. Отныне этот эффект можно легко повторить с помощью Walkway и Vivus. Обе библиотеки максимально просты в использовании и применимы только для path элементов, поскольку принцип их работы основывается на взаимодействии с CSS свойством strokeDashoffset. Хоть и у Walkway значительно больше звезд на Гитхабе, зато Vivus предоставляет несколько вариантов отрисовки: Delayed, Async и OneByOne.

//Walkway
var svg = new Walkway('#test');

svg.draw(function() {
  console.log('Animation finished');
});

//Vivus
new Vivus('my-svg-id', {type: 'delayed', duration: 200}, myCallback);

Здравствуй, дорогой читатель хабра!
Сегодня мы поговорим о градиентных границах, режимах наложения, о том, как рациональнее сверстать стандартную иконку меню. А так же откроем для себя заново старое css-свойство visibility и рассмотрим новое медиа-выражение @Supports.

В этой статье я познакомлю вас с появившимися в CSS3 единицами измерения vw, vh, vmin и vmax.

Здравствуй, дорогой хабрадруг! В этом уроке мы создадим простой сайт-портфолио, который будет базироваться на фотографиях из вашего аккаунта в Instagram. Дизайн сайта сделал Tomas Laurinavicius, и он получился у него простым, функциональным и просторным. Итак, начнем.

Скачать исходники | Демо

Пару недель назад я начал цикл о том, как делал некоммерческий музыкальный проект (первый пост есть в «я пиарюсь», не буду ставить ссылок), но, к сожалению, в первой же статье увлекся, и вместо того, чтобы рассказывать о том, как делал конкретно его, начал вспоминать эффективные трюки из других проектов. Видимо, именно это вкупе с прописанным акцентом на сам проект привело к тому, что за мной и постом прилетело НЛО.

Однако все то, что было в статье, было по крайней мере малоизвестно, а половина ее была вообще уникальна, как я уверен, и каждый из этих советов может ощутимо облегчить работу с gulp, поэтому мне действительно было бы жаль, если этот материал безвозвратно пропал бы.

Поэтому я постарался убрать все упоминания проекта и повторно публикую (с доработками и правками) статью, которую по сути никто еще не видел. Если вы фанат grunt — почитайте хотя бы вторую часть: то, что вы не любите gulp, не значит, что вы не любите browserify.

Краткое содержание:

1. Простой способ обработки ошибок;
2. Универсальная структура для хранения исходных файлов;
3. Объединение нескольких потоков (например, скомпилированный coffee и js) в один;
4. Создание потока из текста;
5. создание собственных плагинов для Browserify;
6. создание плагинов из плагинов Gulp для Browserify.

Я думаю, что большое количество людей, занимающихся или интересующихся веб-разработкой давно уже опробовали open-source IDE Brackets. На хабре не раз упоминали о ней (например, тут), поэтому не буду много разглагольствовать и перейду к сути.

Сегодня, спустя почти 3 года, в течение которых участвовало 245 контрибьюторов, наконец вышла версия 1.0 — способ объявить миру, что Brackets готов. Несмотря на то, что выпуск имеет версию 1.0, разработчики относятся к нему как и к любому другому релизу. Новые продолжат выпускаться так же часто как и сейчас — каждые 3-4 недели.

Встречайте Extract for Brackets (preview)

Отдельно заслуживает внимания плагин Extract for Brackets, который наконец доступен для публичного тестирования, предназначенный упростить верстку веб-сайтов.

Susy — тулкит для создания сеток, с помощью которого можно решать множество разнообразных задач по расположению контента. В отличии от фреймворков, таких как Bootstrap или Foundation, Susy не предоставляет предопределенных классов для использования, а только лишь набор функций и миксин, после знакомства с которыми можно сделать много большее.

В этой публикации будут рассмотрены основные возможности Susy на примерах, а так же будет добавлен вывод с использованием flexbox.

Новость очень короткая, но от этого не менее важная: W3C официально объявила HTML5 рекомендацией.

«Сегодня мы, совершенно не задумываясь, смотрим видео и слушаем аудио напрямую в браузере, не задумываясь, используем браузер в телефоне,» — говорит Тим Бернерс-Ли, директор W3C. — «Мы ожидаем, что сможем делиться фотографиями, покупать, читать новости и получать информацию где угодно, на любом устройства. HTML5 и открытая веб-платформа, оставаясь невидимыми для большинства пользователей, делают возможными и двигают вперед подобные ожидания пользователей.»

Официальный анонс здесь: www.w3.org/2014/10/html5-rec.html.en

По случаю столь большой радости, к очередному заседанию TPAC и к 20му юбилейному симпозиуму W3C мы подготовили совместно с консорциумом небольшой ролик о важности открытых веб-стандартов:

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Исходники Reddit

Gravit

Замечательный графический редактор с открытым исходным кодом. Есть приложения под Mac, Linux, Windows, а также браузерная версия. В Gravit на данный момент реализован базовый функционал: слои, шейпы, пентул и множество различных функций для манипуляций с объектами. Но данный проект по большему счету ориентирован именно на веб-дизайн. Правильнее всего сказать, что Gravit — это смесь графического редактора в типичном представлении с визуальным редактором для разработки сайтов. Именно эта идея и ее реализация в формате open source делает продукт уникальным.

Duo — это новое поколение пакетного менеджера, который совмещает в себе лучшие идеи Component, Browserify и Go. Он предназначен для быстрого и безболезненного написания фронтового кода.

sketchometry — это интерактивная динамическая геометрия, веб приложение, разработанное на базе библиотеки JSXGraph. Эта статья является учебным пособием по её использованию.

1. Описание задачи

Разрабатывая крупное mind map приложение, мы выбрали Backbone в качестве основной библиотеки построения приложения. При этом карта ума рисуется через canvas элемент с помощью различных примитивов. Мы выбрали библиотеку KineticJS для работы с canvas, так как она отлично поддерживает работу с событиями для объектов на холсте.

Чтобы соответствовать архитектуре Backbone все работа с canvas (точнее с экземплярами объектов KineticJS) происходила в экземплярах Backbone.View:

var Node = Backbone.View.extend({
   initialize : function(params) {
        this.layer = params.layer;
        this.node = this.el();
        this.bindEvents();
    },
    el : function(){
        var rect = new Kinetic.Rect({
          x : 100,
          y : 100,
          width : 50,
          height : 50,
          fill : 'green',
          id : 'rect'
        });
        return rect;
  },
  bindEvents: function() {
         this.node.on('click', function(){
             console.log("on rectangle clicked");
          }
          // etc ...
   }
});

2. Проблема

Но Backbone View спроектирован для работы с DOM элементами, и при таком подходе генерировал не нужные нам div объекты и объявлять события в декларативном стиле (http://backbonejs.org/#View-delegateEvents) тоже не получалось.

Знаете ли Вы, уважаемые читатели, про такой замечательный и, я бы сказал, прикольный тег fieldset? Думаю, конечно знаете! А часто ли Вы им пользуетесь? Думаю очень редко. Ну ладно, ладно, уговорили — именно вы, уважаемый, достаточно часто его используете, а вот верстальщик Вася из соседней фирмы — точно редко, а может и всего один раз его «пробовал на вкус», когда узнал про него. Ну да ладно, не об этом речь. Если Вы часто его использовали, то возможно натыкались на необычное поведение fieldset, а именно игнорирование width, если вложенный элемент шире и ни какие overflow делу не помогают. Сразу приведу пример. Этот и последующие примеры смотреть в актуальных версиях FF (32) и Хром (35); IE11, как ни странно, показал себя с лучшей стороны и отработал правильно; остальные браузеры не проверял.

Внимание! В статье все примеры упрощены до максимума — до одного вложенного элемента!

Все уже знают про Flexbox. Кто-то испытывает его на продакшене, кто-то только изучает, а кто-то недоумевает, чем он лучше таблиц. Пока вы занимаетесь этим, поделюсь с вами приятной новостью: flexible контейнеры неплохо анимируются с помощью CSS transition.

Расскажу, как это использовать и что с этой радостью можно делать.

В девелоперских сборках браузеров Chrome, Firefox и Opera появилась поддержка нового элемета picture, призванного решить ряд проблем возникающих при разработке адаптивных дизайнов. Давайте рассмотрим его подробнее.

Для прогрессивной визуальной разработки нельзя просто внедрить пару тройку фишек. Нужно радикально изменить сознание и фундаментально поменять подход. Я не буду разбивать процесс на избитые заезженные этапы. Опишу более свежо. Две основных составляющих агрессивно нового подхода: «Дизайн в Браузере» и «Автоматизация фронт-энда».

Начнем с первого — «дизайна». Тут проблема в отношении к дизайну как к статической .psd. По ощущению это должно было потерять свою актуальность в тот момент, когда появился адаптив, добавилась динамика и доработка на живую макета стала привычным делом. Теоретически смерть статичных .psd-шек наступила вместе с отходом табличной верстки. Зачем пытаться оживить то, что отслужило?! Тогда это было актуально, так как фактически в таблицу запахивалась картинка макета, только в нарезанном виде. Сейчас же макет выполняет роль ориентира. В большинстве случаев мы не вырезаем ни пикселя. А просто держим макет открытым в соседнем окошке. Для того, чтобы написать всю эту «красоту» кодом.

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.

Сегодня у нас вышла новая книга — HTML5. Разработка приложений для мобильных устройств.



Книга доступна в печатном и электронном формате. При покупке виртуальной книги вы получите два формата — PDF и ePub. В течение недели действует скидка 10% на разделы HTML и XHTML. Языки разметки web-страниц и Бестселлеры O'Reilly. Код купона — e46e73d.

Немного информации о книге.