HTML *

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.

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

Цель поста: поделиться с разработчиками решением использования кроссбраузерного «input type="number"» или узнать о лучших решениях. Основная проблема состоит в том, что данный тип input`a по-разному отображается в разных браузерах, и кастомизировать его, через css практически не возможно. Данное решение позволяет легко оформить стрелочки в соответствии с дизайном, а так же отобразить их в тех браузерах, в которых не поддерживается нативный «input type="number"».

На данный момент плагину передается только один параметр — это селектор, к которому применяется js код:

jQuery(function ($) {
	$('input[type=number]').iLightInputNumber();
});

Для примера возьмем три input`a с разными атрибутами:

<input type="number" id="input01" step="100" min="0" class="input1" placeholder="Your budget">
<input type="number" min="1" max="99" class="input2" placeholder="1">
<input type="number" min="1" class="input3 input4" value="1">

Рабочий пример.

Проверено: opera, chrome, ff, ie9+

Веб-компоненты — это новая эра веб-разработки и почувствовать ее мощь можно уже сегодня при помощи Polymer от Google. Вы можете создавать свои собственные «элементы» (тэги), содержащие шаблон и инкапсулированные стили и логику (js), а так же воспользоваться богатой коллекцией уже готовых элементов.

Пообщались мы как-то с пользователем icoz по поводу покупок в books.ru и решения, как не купить одну и туже книжку случайно дважды. Диалог получился не очень, а вот решение вышло удобное и показывающее, какие книжки куплены, а какие — нет. Причем, никаких параметров для скрипта не надо. Скрипт получит логин и пароль для взаимодействия с сайтом сам. Если вы купили что-то, то достаточно выйти с сайта books.ru и зайти обратно, чтоб скрипт подхватил купленные Вами книги.



Что нам понадобится?

При подготовке материала по Symfony Form я решил уделить некоторое внимание теоретической части по работе с формами со стороны клиента – что они из себя представляют, как ведут себя браузеры при отправке, в каком формате путешествуют, в каком виде поступают на сервер.

Вводная часть несколько растянулась и в итоге вылилась в отдельную небольшую статью, которая, по моему мнению, может быть интересна и другим бэкенд-разработчикам (не только PHP или Symfony).

Видеоконтент уже прочно вошёл в мир Интернета и без него уже трудно представить глобальную сеть. Тем не менее, технологии встраивания видео в гипертекстовые документы за прошедшее время прошли определённую эволюцию: от RealPlayer к QuickTime и Flash, а в настоящий момент до встроенной поддержки видео в HTML5. Тем не менее, всё это время различные реализации видеоплееров страдали как от проблем кроссплатформенности и кроссбраузерности, так и от низкого или вообще нулевого уровня accessibility. И если способы борьбы с первой группой проблем в целом понятны и существуют в форме готовых решений, то вот проблемы доступности для подавляющего большинства web-разработчиков и без того, как правило, сложны для понимания, а в отношении видео совсем оставались загадкой. Однако, к счастью, появилось готовое решение и второй проблемы, так что все желающие смогут обеспечить своим пользователям полностью доступный видеоплеер и без глубоких компетенций в web accessibility.

Привет, Хабр! В этот раз мы поговорим о стилизации инпутов без картинок и JS, особенностях вертикальных отступов, CSS счетчиках, необъятных возможностях в именовании классов, а также расскажем, как улучшить анимацию на слабых устройствах.

Соглашения по именованию CSS позволяют писать строгий, чистый и красивый код. При соблюдении правил именования вы всегда будете знать:

• Для чего используется класс;
• Где класс может быть использован;
• С какими другими классами связан этот класс.

В каждом проекте есть определенные нюансы и тонкости, которые помнят далеко не все, и худшее, что может случиться с разработчиком — это работа с кодом, который писал не он. Даже запоминание тонкостей своего собственного кода является возможным только до определенной степени, не говоря уже о чужом коде. Именно поэтому CSS надо комментировать.

Введение

CSS не идеален. Поначалу кажется, что он прост в освоении, но работая над реальным проектом вы столкнетесь со многими проблемами. Мы не можем изменить то, как работает CSS, но мы можем изменить тот код, который мы пишем.

Добрый день, %username%. Сегодня я хотел бы поделится своим опытом разработки прототипа онлайн lossless аудио плеера.

На сегодняшний день, вряд ли можно кого-то удивить аудио или видео плеером, встроенного непосредственно в веб-страницу. Существующие технологии, библиотеки и API позволяют легко наполнить сайт любым медиа-контентом. Но есть такие люди, которым этого недостаточно (в том числе я). Именно поэтому, как истинному любителю музыки в lossless, мне потребовалось сделать браузерный плеер поддерживающий такой формат аудио, как flac.

Как утверждает сама команда разработчиков, Ractive.js — это библиотека для разработки динамичных web интерфейсов, благодаря которой в мире web-разработки наступит расцвет: всем выдадут бонусы в 100%, холивары «кто круче» отступят в сторону, а разработчики, которые пишут интерактивные, динамичные сайты наконец то перестанут покрываться сединой и материться.

Короче, наступит бриллиантовый век веб-разработки.

Начиная очередной проект, прежде чем начать писать Backbone код (фу-фу-фу), решил применить это чудо в проекте (бриллианты!). А так как погуглив похабрив я понял, что на хабре всего одна статья о Ractive.js, нужно устранить эту несправедливость и заодно написать о том, правда ли нам всем свалится вагон счастья и будет ли вообще кто-то доволен. Ведь пообещать «диамантовый век» — это одно (каждые 4 года из телеков слышим), а сделать — совсем другое.

Под катом рассмотрю, что такое и как работает Ractive.js, и подробно распишу продакшн задачу с полной реализацией и описанием, чем это всё грозит уже всем нам.

Язык разметки Markdown разработали в 2004 году Джон Грубер и Аарон Шварц. Философия Markdown — писать текст, который легко читается и в то же время автоматически конвертируется в обычный HTML. Авторы сразу выпустили и парсер Perl, тот быстро приобрёл большую популярность, и Markdown пошёл в массы.

К сожалению, до сих пор так и не принято общепринятой спецификации Markdown, что порождает некоторую путаницу. Каноническое описание Грубера не даёт ответов на все вопросы, как и код вышеупомянутого парсера, оказавшегося слегка глючным. Во многих случаях он выдаёт явно плохой результат. В общем, проблема сохраняется уже 10 лет.

Своё решение предложила группа активистов, в которую вошли Джон Макфарлейн из университета Беркли (автор маркдаун-конвертера Pandoc и теста Babelmark), представители компаний Meteor, Github, Reddit, StackExchange и Discourse. За два года совместной работы они согласовали «наиболее оптимальные спецификации синтаксиса» в рамках проекта Standard Markdown (). Они также выпустили всеобъемлющий набор тестов для проверки каждой реализации Markdown на соответствие спецификациям.