Как стать автором
Обновить
5
0
Зюзин Виталий @juwain

Пользователь

Отправить сообщение

Предварительный просмотр HTML-писем в браузерах и мобильных клиентах

Время на прочтение3 мин
Количество просмотров20K
Многим знакома печальная ситуация, когда замечательно оформленное письмо на мобильном устройстве или просто в определённом почтовом клиенте смотрится как нечитаемая каша из символов. Это мало того, что обидно, но ещё и вредно. Тому есть несколько причин:

1. Отсутствие единых стандартов отображения email-сообщений — это значит, что каждая почтовая служба и email-клиент будут показывать ваши письма, как захотят, в зависимости от собственных возможностей и доступных функций.

Читать дальше →
Всего голосов 25: ↑16 и ↓9+7
Комментарии6

Backbone.js для «чайников»

Время на прочтение13 мин
Количество просмотров288K
Backbone.js для чайников
Как то поздним вечерком мне пришла мысль изучить Backbone.js и привязать его к уже написанному на jQuery сервису. Сервис уже серьёзно расширился и меня достало это нагромождение обработчиков кликов, запросов и логики. Поэтому, я как усердный школьник полез в официальную документацию. Но либо я тупой, либо мой английский меня подкачал, либо то и другое вместе, но я не черта не понял. Я прочитал уже второй раз, внимательно, и для особо одарённых мест использовал google translate. Прочитал также и пример ToDo List. Всё показалось понятно, ровно до той поры пока я не стал писать. После чего я взял всё что нашел по этой библиотеке, как на английском так и переводы. Прочтя кипу документации я решил, что сейчас вроде всё понял. Я напрягся, но… Не вышел каменный цветок у мастера Данилы, т.е. вышло, но это явно был не цветок, и камень как то неправильно пах. Тогда, как прилежный ученик, я решил написать «Hello, KittyWorld» с нуля. Попутно комментируя и сохраняя шаги в hg, у меня получилось введение в backbone.js framework для таких как я, особо одарённых.
Данные 7 шагов с комментариями.
Всего голосов 113: ↑110 и ↓3+107
Комментарии51

Перевод официальной документации по Backbone.JS

Время на прочтение1 мин
Количество просмотров9.9K
Доброго времени суток!



В полку Open Source прибыло! Мы (@kulakowka, k12th, dhomich и я) рады представить вашему вниманию перевод официальной документации по Backbone.JS — каркасу для создания RIA приложений на JavaScript, автором которого является Jeremy Askenas — создатель CoffeeScript.
Читать дальше →
Всего голосов 125: ↑122 и ↓3+119
Комментарии48

Полезные ссылки для изучения CSS анимации

Время на прочтение3 мин
Количество просмотров24K
Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом @keyframes (покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.


Читать дальше →
Всего голосов 72: ↑69 и ↓3+66
Комментарии10

CSS3 градиент для границ блока

Время на прочтение2 мин
Количество просмотров60K


В этой статье я покажу один из вариантов создания градиента для границ у любого блока с помощью CSS3.
Читать дальше →
Всего голосов 39: ↑31 и ↓8+23
Комментарии32

Коллекция паттернов и антипаттернов JavaScript

Время на прочтение1 мин
Количество просмотров5.5K
Несколько месяцев назад на Гитхабе появилась очень неплохая коллекция паттернов и антипаттернов JavaScript и jQuery на все случаи жизни. Автор проекта Shi Chuan проделал отличную работу, собрав десятки примеров кода из книг и других источников. Репозиторий уже набрал почти полторы тысячи подписчиков и активно пополняется. Всё очень удобно разложено по категориям и откомментировано. Наслаждайтесь!
Всего голосов 68: ↑54 и ↓14+40
Комментарии81

Звезды мирового фронтенда

Время на прочтение5 мин
Количество просмотров28K
В любой профессии есть тонкая прослойка людей, которые являются действительно высококлассными специалистами. Не исключение и область фронт-енд разработки — здесь также есть выдающиеся личности. К их мнению прислушиваются, за ними следят в блогах и социальных сетях и читают их книги. В процессе своей работы они рождают различные оригинальные решения или техники, которые мгновенно расходятся по миру веб-разработки и остаются актуальными не один год. Они создают удобные онлайн-сервисы для верстки, пишут полезные js-библиотеки, совершенствуют браузеры, пропагандируют веб-стандарты и оказывают непосредственное влияние на их развитие. Они могут называть себя front end engineer, front-end developer, web developer, web designer, UI Designer, browser compatibility expert или просто css lover, но для большинства из нас они — звезды мирового фронт-енда, которые делают интернет таким, каким мы его знаем. На Хабре довольно часто появляются обзоры интересных решений, техник и новостей из мира веб-разработки с указанием западных авторов, однако далеко не все знают что-нибудь о них кроме имени. Мне захотелось вкратце рассказать для широкой публики о некоторых из этих товарищей.


Читать дальше →
Всего голосов 105: ↑92 и ↓13+79
Комментарии83

Затухающие полоски на CSS3 без изображений

Время на прочтение2 мин
Количество просмотров22K
Хочу поделиться с вами моим способом создания затухающих полосок без использования изображений. Дальше под катом описан метод создания таких элементов с комментариями и примером.


Читать дальше →
Всего голосов 97: ↑85 и ↓12+73
Комментарии21

Знак рубля на сайте: экспресс-метод

Время на прочтение2 мин
Количество просмотров104K
Знак рубля

Задача


Без лишней головной боли начать использовать знак рубля на сайте.

Идея


В свободно распространяемых (в том числе для использования в вебе) шрифтах PT Sans и PT Serif среди символов есть и знак рубля. Если использовать эти шрифты на сайте, то для решения задачи можно обойтись без лишнего html-кода, css-бубнов, векторной графики и прочих джедайских извращений.

Читать дальше →
Всего голосов 102: ↑91 и ↓11+80
Комментарии183

Morris.js: средство рисования красивых графиков при помощи jQuery и Raphaël

Время на прочтение2 мин
Количество просмотров19K
В позавчерашнем выпуске «Mozilla Hacks Weekly» увидал гиперссылку «Morris.js», пошёл по ней, почитал, порадовался — а теперь и вам поведаю.

Morris — это легковесный джаваскрипт (всего-то 3052 байта после миниатюризации) с открытым исходным кодом (распространяемым по упрощённой лицензии BSD), который для работы требует jQuery и Raphaël и строит с их помощью графики на простой сетке горизонтальных линий, наподобие такого:

[график]

По оси абсцисс откладывается время, по оси ординат — какие-нибудь зависящие от времени значения. (Morris изначально разрабатывался для сайта, показывающего общее число автомашин той или иной марки в Великобритании, так что для него естественно, что ось абсцисс — это ось времени.)

Графики реагируют на мышь: вспучиваются точки, соответствующие указанному мышью моменту во времени, и подле них появляются подсказки.

Достоинство скрипта — простота API. Приведённый мною пример создаётся вот таким вызовом:

// поквартальные данные, тонкие линии, цвета их заданы в явном виде
Morris.Line({
  element: 'quarterly',
  data: [
    {q: '2009 Q3', a: 100, b: 75},
    {q: '2010 Q2', a: 75, b: 50},
    {q: '2010 Q3', a: 75, b: 50},
    {q: '2011 Q1', a: 50, b: 25},
    {q: '2011 Q3', a: 50, b: 25},
    {q: '2011 Q4', a: 75, b: 50},
    {q: '2012 Q2', a: 100, b: 75}
  ],
  xkey: 'q',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  lineColors: ['#167f39','#044c29'],
  lineWidth: 2
});

Читать дальше →
Всего голосов 52: ↑48 и ↓4+44
Комментарии20

Новый метод замены текста картинкой, или избавляемся от -9999px

Время на прочтение3 мин
Количество просмотров37K
Хотелось бы поговорить о техниках замены текста изображением. Думаю, практически все сталкивались с моментами в верстке, когда, к примеру, для заголовка страницы нужно использовать графический объект, при этом сохранив под ним текст и для поисковых роботов, и для печатной версии. Да и в принципе, никогда не хочется ломать семантинку страницы.



Немного об истории решения этого вопроса.


Самой первой популярной техникой была так называемая FIR (она же — Fahrner Image Replacement), которая появилась в 2003-м году. Она проста как пень, и многие начинающие верстальщики ее до сих пор используют:
Читать дальше →
Всего голосов 108: ↑100 и ↓8+92
Комментарии87

Использование Deferred объектов в jQuery 1.5

Время на прочтение6 мин
Количество просмотров37K
Deferred объекты появились в jQuery 1.5. Они позволяют отделить логику, которая зависит от результатов выполнения действия от самого действия. Для JavaScript Deferred объекты не новы, они уже были в MochiKit и Dojo, но с изменениями логики jQuery ajax от Julian Aubourg, внедрение Deferred объектов было неминуемо. С Deferred объектами несколько callback могут быть связаны с результатом задачи и любые из них могут быть привязаны к действию даже после начала его выполнения. Выполняемая задача может быть асинхронна, но не обязательно.

Deferred объекты теперь встроены в $.ajax() таким образом вы будете получать их автоматически. Обработчики теперь могут быть связаны с результатом следующим образом:
// $.get, ajax запрос, он асинхронный по умолчанию
var req = $.get('foo.htm')
   .success(function( response ){
      // что-нибудь делаем с ответом
   })
   .error(function(){
      // делаем что-нибудь если запрос провалился
   });
 
// это выполнится перед тем как $.get() будет выполнено
doSomethingAwesome();
 
// Делаем что-то ещё перед завершением запроса
req.success(function( response ){
   // делаем  что-то ещё с ответом
   // он будет выполнен когда запрос завершится, а если запрос завершен, то будет вызван немедленно
   // если запрос уже был выполнен
});

Читать дальше →
Всего голосов 116: ↑113 и ↓3+110
Комментарии19

Неназойливые регистрация и вход на сайт

Время на прочтение5 мин
Количество просмотров28K

Надоело отправлять пользователям подтверждения аккаунта и сброса пароля по утере на почту?
Пользователи уходят, устав заполнять вашу форму регистрации?
Вы точно уверены, что у посетителей вашего сайта есть аккаунт на Facebook или Вконтакте?
Не хотите хранить никакие персональные данные?
Ваши пользователи устали вводить логин и пароль?
Вашим пользователям лень даже нажать на кнопку «Войти»?
Видели, как это сделано на stackoverflow и хотите так же, и даже лучше?

Ниже о том, как сделать вход на ваш сайт ненавязчивым, автоматическим, и без особых затрат.
Читать дальше →
Всего голосов 64: ↑52 и ↓12+40
Комментарии71

Равномерное выравнивание блоков по ширине

Время на прочтение4 мин
Количество просмотров19K
Продолжая свои «css-раскопки» возникла новая идея, разобрать по косточкам ещё одну актуальную тему, которая касается равномерного выравнивания блоков по ширине. В принципе мои доскональные исследования я уже запостил у себя в блоге, но так как прошлая моя работа очень понравились Хабра-сообществу, то я решил сделать здесь небольшой краткий обзорчик этой статьи, чтобы ни одна хабра-душа не пропустили её наверняка. Так что, как говорил Гагарин: «Поехали».

В общем в задачах вёрстки периодически возникают моменты, когда появляется необходимость выровнять какой-нибудь список по ширине экрана. При этом пункты этого списка должны выравниваться равномерно, прижимаясь своими крайними элементами к границам контейнера, а расстояние между ними должно быть одинаковым.
image
Читать дальше →
Всего голосов 172: ↑163 и ↓9+154
Комментарии87

Считываем hash: пуленепробиваемый способ

Время на прочтение3 мин
Количество просмотров27K
Это, вероятно, одна из тех задач, о которой все думают, что знают решение, но многие решают её в итоге некорректно. Наткнувшись на ещё один сверхслабый кусок кода, написанный для этой цели, я задумала разъясняющую блогозапись.

Суть проблемы


Вы хотите убрать символ решётки (#) из значения location.hash. Например, когда hash равен "#foo", Вы хотите получить строку, содержащую "foo". Это же просто, правда?

Сложные случаи


Вот что большинство разработчиков, кажется, упускает из виду: в современных, мощно наджаваскриптованных, приложениях переменная hash может содержать любые юникодовые символы. Она не обязательно должна соответствовать значению реального атрибута id с той же страницы. А когда она и соответствует, атрибуты id теперь могут содержать почти любые юникодовые символы. Да ещё часто забывают, что на странице может и не быть никакого хэша. Даже если URL оканчивается символом «#», строка location.hash равняется на самом деле "" (пустой строке), а не "#".

Наивные подходы


Вот наиболее недавний — я нашла его в книге, на которую составляла техническую рецензию:

var hash = location.hash.match(/#(\w+)/)[1];

У него сразу несколько проблем:

Читать дальше →
Всего голосов 74: ↑43 и ↓31+12
Комментарии26

flotr2 — графики и диаграммы на HTML5

Время на прочтение1 мин
Количество просмотров36K
flotr2 — это библиотека с открытым кодом для построения HTML5 графиков и диаграмм. Flotr2 — так как стала ответвлением от Flotr, но уже без привязки к Prototype JS и с множеством усовершенствований.


Читать дальше →
Всего голосов 85: ↑81 и ↓4+77
Комментарии26

3D кнопки с помощью CSS3

Время на прочтение6 мин
Количество просмотров44K
Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки CSS3! Они основаны на популярной PSD фриби от Orman Clark для его веб-сайта Premium Pixels. Мы постараемся создать копию этих кнопок с помощью CSS с минимальным количеством кода HTML.

Preview

Читать дальше →
Всего голосов 98: ↑73 и ↓25+48
Комментарии59

Подборка html/javascript/css инструментов и библиотек от SmashingMagazine

Время на прочтение5 мин
Количество просмотров22K
Разработка вебинтерфейсов дело не самое легкое. Причем начать вроде бы несложно, а вот добиться совершенства поистинне проблематично. Уж очень многое необходимо учесть. Просто масса настроек и ньюансов, в которых легко запутаться и сделать что-то не так. К счастью, разработчики и дизайнеры склонны упрощать этот нелегкий труд и постоянно изобретают всяческие инструменты позволяющие сделать больше и лучше за то же самое время, а главное не погрязнуть в мелочах и состредоточиться на чем-то более важном.

Множество удобных инструментов, найденных командой популярного онлайн журнала SmashingMagazine, приводится под катом
Читать дальше →
Всего голосов 125: ↑123 и ↓2+121
Комментарии19

impress.js — презентации на CSS3, рвущие шаблон

Время на прочтение4 мин
Количество просмотров19K
Даже хорошие презентации, не содержащие списков из двадцати пунктов восьмым кеглем и вызывающих рвотный рефлекс картинок из бесплатных сборников клипарта “встречи и партнёрство” или “офисная жизнь”, следуют давным-давно заданному стандарту, без изменений перенесённому в офисные пакеты из мира старинных диапроекторов. Презентация всегда представляет собой набор прямоугольных картинок одинакового формата и размера. Иногда между ними добавляют переходы и анимацию, раздражающую не меньше разноцветных надписей и бессмысленно улыбающихся абстрактных офисных работников. Стандартом де-факто для хорошей презентации давно стала последовательность статичных слайдов без всякого мельтешения, с очень коротким текстом крупным шрифтом и несколькими тщательно подобранными фотографиями или скриншотами.

Основанный на трансформациях и переходах CSS3, javascript-фреймворк для создания презентаций impress.js выходит за рамки понятия “слайд” и позволяет строить презентации в открытом, неограниченном трёхмерном пространстве. Источником вдохновения для него послужил сервис prezi.com. Репозиторий impress.js на Гитхабе появился меньше месяца назад, но уже стал одним из самых популярных. Нетерпеливые могут посмотреть небольшую демку здесь, а остальные — создать пример необычной презентации прямо сейчас.
Читать дальше →
Всего голосов 101: ↑96 и ↓5+91
Комментарии46

Чёртова дюжина советов начинающим верстальщикам. Часть первая

Время на прочтение6 мин
Количество просмотров32K
Доброго времени суток!

Введение


Я являюсь фрилансером. Раньше я не особо задумывался над тем, как и что делают верстальщики. Я делал серверную часть, а мой друг верстал и набивал контент. Совсем недавно мне захотелось попробовать «что и как». Пару дней назад мне на глаза попался материал, который мне очень понравился. Он наглядно обЪяснял, что и как нужно писать. К сожалению, сылку дать не могу, так как я не запаомнил, где располагался сей мануал, но… Казалось бы, можно это и запомнить, но я пошёл ещё одним путём — законспектировал это дело. Собственно, добро пожаловать в мою записку.
Читать дальше →
Всего голосов 233: ↑192 и ↓41+151
Комментарии186

Информация

В рейтинге
Не участвует
Откуда
Санкт-Петербург, Санкт-Петербург и область, Россия
Дата рождения
Зарегистрирован
Активность