Обновить
0
0
Denis G.@crwin

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

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

Эффект слайдов на сайте. Версия вторая, дополненная и исправленная

Время на прочтение3 мин
Охват и читатели21K
Некоторое время назад я публиковал статью «Эффект слайдов на сайте. Через грабли на собственном велосипеде».
Статья справедливо набрала множество замечаний, в основном, касающихся отсутствия практической части и примеров кода.
Предлагаю вашему вниманию переработанную статью, снабженную живыми примерами.
Читать дальше →

Основы профессиональной верстки электронных писем

Время на прочтение7 мин
Охват и читатели105K
Верстка электронных писем
Ни для кого не секрет, что e-mail маркетинг только начинает набирать обороты во всем мире. А для России – это ещё и вовсе молодая ниша на рынке. И профессиональная верстка электронных писем здесь один из составляющих факторов успеха. Под профессиональной версткой понимается не только визуально красиво и надежно сверстанный макет, но и то, как выглядит usability открытки с маркетинговой точки зрения, как оптимизирована графика вместе с типографией для спам-фильтров и многое другое. Верстка электронных писем довольно обширная тема, в одной статье все не уместить, поэтому в данном посте постараюсь описать только базовые элементы и приемы, надежно проверенные за годы практики и работающие в top самых используемых почтовых клиентах мира: iPhone 4S/5; Outlook 07/10/13; iPad; Apple Mail; Android 2.3/4.0; Yahoo; Gmail. Если рассматривать только российский рынок, то нельзя не упомянуть о Mail.ru и Яндекс.Почта.

Что нужно знать в начале?


Сразу хочу выделить несколько из основных и важных моментов:

  1. В нашем арсенале имеется очень урезанный набор css-свойств, которые поддерживаются всеми почтовиками. При этом, стили нужно прописывать inline, а в head выносить только вендорные свойства и те блоки объявлений, которые не несут нагрузки на основную стилизацию письма. Ну и использовать link in head — крайне нежелательно.
  2. Не используйте background-image в основных визуальных элементах дизайна и не помещайте в изображения важную текстовую информацию. Вообще нужно всегда учитывать такой вариант, что письмо будет просматриваться получателем без единого изображения.


Каркас


Пожалуй каждый, кто хоть раз верстал письмо под рассылку, знает, что каркас лучше строить с помощью таблиц. На самом деле простая блочная модель div поддерживается на данный момент во всех перечисленных выше почтовиках, за исключением MS Outlook начиная с 2007 версии. Это связано с тем, что в качестве движка последние версии Outlook используют Microsoft Word, который в свою очередь много не знает о блочных css-свойствах. Игнорировать при верстке данный почтовый клиент я не рекомендую, поэтому в качестве фундамента все же используйте table. Да и добившись хорошего результата для Outlook, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.

В качестве примера рассмотрим наиболее важные элементы из следующего, не сложного шаблона:
Шаблон письма для рассылки
Читать дальше →

25 советов по улучшению вашего кода jQuery

Время на прочтение15 мин
Охват и читатели29K
Это перевод статьи, написанной Jon Hobbs-Smith. Я счел ее довольно интересной и решил выложить в своем блоге, а также поделиться им с хабрапользователями, также как и я заинтересованными в библиотеке jQuery. Перед тем как начать хочу отметить, что написана она (как и переведена) далеко не экспертом в jQuery, поэтому если вы найдете в ней ошибку, пожалуйста, сообщите. Итак, начнем.
Читать дальше →

Лёгкий сайт или как посадить браузер на диету

Время на прочтение14 мин
Охват и читатели145K

А что если объединить профессионалов, работавших над крупными web проектами, чтобы создать исчерпывающее руководство по оптимизации front-end разработки?
И получить в результате не скучную инструкцию, а что то поинтереснее? А если позвать Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), и Sérgio Lopes (Caelum) чтобы собрать лучшие практики?

Именно это мы и сделали! Мы научим вас создавать быстрые сайты.

Zeno Rocha, руководитель проекта.


Читать дальше →

Мобильная веб-разработка: жесты, фреймворки, цифры

Время на прочтение4 мин
Охват и читатели63K
Продолжая тему веб-разработки мобильных сайтов и приложений под мобильные устройства нельзя не затронуть такую тему как Фреймворки для манипуляции DOM и отправкой асинхронных запросов.
Стандартом на десктопе уже давно стал jQuery, но он никуда не годится для разработки под мобильную платформу. Давайте посмотрим, как jQuery дружит с мобильными устройствами.

Посмотреть

JavaScript обёртка скроллбара в виде jQuery плагина

Время на прочтение6 мин
Охват и читатели68K
Проблема стилизации скроллбара браузера до сих пор актуальна, несмотря на огромное количество скриптов, предназначенных для решения данной задачи. Рассмотрим реализацию стилизуемого скроллбара, максимально приближенного к родному поведению браузера.

Существует два основных подхода для стилизации скроллбара средствами HTML/CSS, каждый из которых имеет свои плюсы и минусы:

  • Эмуляция скролла средствами JavaScript
  • JavaScript обёртка над родным скроллом

Читать дальше →

Приручаем и прокачиваем огнелиса: The Ultimate Guide

Время на прочтение13 мин
Охват и читатели82K
Подчини себе этого 9-хвостого лиса

Лирическое вступление


Не люблю гонку версий, своей бессмысленностью отдаленно напоминающую гонку вооружений. Не успели как следует довести до ума текущую версию — выпускают новую, с новыми багами, уязвимостями и «особенностями». Для таких как я — любителей стабильных и проверенных решений для корпоративной среды, да и для себя тоже — у команды Мозилы есть сборка типа ESR: в течение длительного времени для нее выходят обновления, устраняющие ошибки и уязвимости, сама же major версия браузера не обновляется! Вот ссылка на страницу оф.сайта, откуда можно скачать эту замечательную ESR-версию (достигается путем не слишком очевидных ходов), также, ESR можно скачать с официального FTP ftp.mozilla.org/pub/firefox/releases/latest-esr/
Только что вышла давно мной ожидавшаяся 17-я ESR версия (предыдущая была только 10-я). В связи с этим событием решил написать подробное руководство по оптимизации нашего (не)любимого браузера — с разбором всех параметров, что каждый из них делает и откуда он получен.

Читать дальше →

Возвращаем приватность или большой брат следит за мной на стандартных настройках. Часть 3. Настраиваем «Фейсбук» и «Вконтакте»

Время на прочтение4 мин
Охват и читатели132K
В первой части мы говорили об общих настройках для всех браузеров, вскользь прошлись по паролям, шифрованию и бекапе, а также несколько усложнили жизнь «Гуглу».

Во второй части мы увидели, сколько статистики собирают на нас даже без использования сторонних (third-party) «куки»-файлов и рассказали о пользе и настройке VPN простым языком.

Сегодня поговорим о приватности в социальных сетях, благо даже в комментариях были прецеденты. Однако пока небольшое отступление.

Судя по комментариям, некоторые из вас считают, что простым людям это не нужно. Но вот, например, недавняя дискуссия на «Реддите», в которой показано, как то, откуда вы, сколько времени ищите билеты и также социальные предпочтения, влияет на цену билетов, которая показывается вам в форме покупки.
I bought a return flights to the Philippines a few days ago, just checked it with incognito mode….180$ cheaper!

I F… KNEW IT! I kept refreshing when I was buying airplane tickets and that f…er kept going up when I hit the refresh button. It eventually went up by $100 extra dollars!

I had been searching for a specific itinerary for a few weeks, just checking on prices. I saw this on the front page and decided to try it out. $400 DIFFERENCE!!!!

Если вы не знаете язык, можете почитать выдержку на русском здесь. Если даже после этого вам все равно, то человечество, все-таки, вымрет. Ну да вернемся к социальным сетям.


Читать дальше →

Эффективный интернет-магазин. Instagram, как инструмент для увеличения продаж

Время на прочтение1 мин
Охват и читатели30K
Бизнес сообщество и миллионы маркетологов придумывают все новые и новые способы взаимодействия с потенциальными клиентами, используя соц.сети. Очередной, очень интересный кейс — использование Instagram в качестве инструмента для создания огромной аудитории поклонников бренда.

Австралийский интернет-магазин женской одежды BlackMilk предлагает своим покупательницам сделать собственное фото в одежде, купленной в данном магазине и разместить его в Instagram с хэштегом определенного вида.


Читать дальше →

Возвращаем приватность или большой брат следит за мной на стандартных настройках. Часть 2. Блокируем следящие скрипты на сайтах и настраиваем VPN

Время на прочтение7 мин
Охват и читатели166K
В первой части мы говорили об общих настройках для всех браузеров, вскользь прошлись по паролям, шифрованию и бекапе, а также несколько усложнили жизнь «Гуглу».

Сегодня посмотрим (и избавимся) на то, сколько статистики собирают на нас даже без использования сторонних «куки»-файлов и расскажем о пользе и настройке VPN простым языком.

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


Читать дальше →

Как работают браузеры: принципы работы современных веб-браузеров

Время на прочтение2 мин
Охват и читатели191K
Просматривая одно из обучающих видео "Школы разработки интерфейсов" Яндекса, наткнулся на ссылку на офигенный труд израильской веб-программистки Тали Гарсиэль (Tali Garsiel) "How browsers work" (Как работают браузеры).

Она в течение нескольких лет отслеживала всю издаваемую информацию о внутреннем устройстве браузеров, изучала исходный код WebKit и Gecko и, в конце концов, собрала все воедино. Вот что пишет сама Тали:
Когда на 90% компьютеров был установлен IE, приходилось мириться с тем, что это загадочный «черный ящик», однако теперь, когда более половины пользователей выбирает браузеры с открытым исходным кодом, пришло время разобраться, что скрывается у них внутри, в миллионах строк программного кода на C++...
Пролистав, я был поражен — отличная работа. Внутреннее устройство браузеров, алгоритмы разбора — все хорошо иллюстрировано, доступно и понятно. И без излишних подробностей, страниц на 30-40. Как раз то, что нужно. Решил — это надо обязательно перевести. Покопался еще немного — оказалось перевод уже как 1,5 года есть!

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

Под катом содержание перевода, чтобы решить стоит ли читать.
Читать дальше →

Возвращаем приватность или большой брат следит за мной на стандартных настройках. Часть 1. Браузер и настройки сервисов «Гугла»

Время на прочтение7 мин
Охват и читатели369K
Вы любите смотреть таргетированную рекламу? Вы не против того, что фейсбук сам отметит вас на фотографии друзей (а ее увидят посторонние люди)? Вам нравится видеть релевантные запросы в поисковике? Вы не против того, чтобы ваши предпочтения использовали для рекламы товаров вашим друзьям? Вам все равно, что гугл хранит всю историю вашего поиска, и вы не боитесь, что это может кто-то увидеть через 10 лет («скачать Аватар бесплатно без смс» или «как избежать проверки налоговой»)? Вы не против того, что ваши фото и комментарии увидит потенциальный работодатель или весь интернет, если вы вдруг случайно станете кому-то интересны?

Тогда этот пост вам будет не интересен — желаю вам хорошего дня. Пост не благословлен ФСБ, различными рекламными биржами (привет, «Яндекс», «Tinkoff Digital» и т. д.) и соц. сетями.

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

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



Читать дальше →

CMS Koken для фотогалерей

Время на прочтение3 мин
Охват и читатели70K


Появилась надобность создать сайт с фотогалереей. И пошел искать CMS для сих утех. После некоторого поиска обнаружил неприятную тенденцию. Есть CMS для фотогалерей, но не с современной навигацией, без Lightbox и так далее. Есть красивые HTML шаблоны с всякими вкусностями (например, Gamma Gallery), но без системы управления контентом. Рассматривать Wordpress и др. для сайта только с фотками — слишком накладно. Даже опечалился, но поиск натолкнул на одну новую CMS Koken. После небольшого рассмотрения понял, что это именно то, что мне нужно: первоклассная админка с множеством настроек, и современное отображение галерей. А с напильником так вообще красота получается.
Читать дальше →

10 девайсов, которые вы можете проапгрейдить, немного поковырявшись с электроникой

Время на прочтение4 мин
Охват и читатели180K

Правило №1 в DIY: никогда не довольствуйтесь тем, что вам дано. Вы можете проапгрейдить или улучшить все что угодно обладая скромными познаниями и приложив немного усилий, особенно если вы немного знакомы с электроникой. Под катом 10 домашних предметов, которые вы можете круто прокачать, используя капельку припоя и ряд DIY ноу-хау.
Читать дальше →

Кроссбраузерная кастомизация системного скроллбара

Время на прочтение8 мин
Охват и читатели147K


Проблема размещения непрерывного контента произвольного объёма в экран, или окно, фиксированных размеров, существует несколько десятков лет. Примерно столько же существует и лучшее решение этой проблемы: элемент графического интерфейса — скроллбар.

Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.
Подробности

Интерактивная обучалка ветвлению в Git

Время на прочтение1 мин
Охват и читатели81K
Некий Питер Коттл (Peter Cottle) сделал интерактивную обучалку по основам ветвления в Git. Есть несколько простых обучающих уровней, где нужно сделать пару коммитов, а затем merge или rebase, есть и сложные уровни, над которыми придется подумать. Можно также сохранять уровни и делиться ими с друзьями.

Хотя сам автор утверждает, что приложение еще сырое, я советую всем, кто интересуется гитом, взглянуть на эту прикольную штуку.

image
Читать дальше →

Обзор инструментов для сжатия изображений

Время на прочтение15 мин
Охват и читатели380K


Для ускорения сайта, некоторые рекомендуют проанализировать каждую страницу: оптимизировать запросы HTTP и любые перенаправления, сжать скрипты и стили и т. д. Все это без сомнения необходимо, но в первую очередь важно рассмотреть основы. В частности, вы уверены, что любая графика, которую вы используете на создаваемых сайтах, полностью оптимизирована для Интернета?
Читать дальше →

Иконкомания или боязнь неиспользования иконок

Время на прочтение5 мин
Охват и читатели60K
«И эти дурацкие иконки! Пиктограмма — это знак, который ни на одном человеческом языке невозможно объяснить. Не зря же появилась речь!»
Джеф Раскин.

Сегодня, какой бы продукт не проектировался, почти всегда уместно или нет — используются иконки. Заказчики требующие использования иконок в интерфейсе настолько свыклись с ментальностью повсеместного использования иконок, что это обстоятельство можно принимать за культурный феномен. Того же принципа придерживаются почти все разработчики.
Почему так получилось? Что в иконках не так? Можно ли без них обойтись?
Давайте попробуем разобраться.

Читать дальше →

Тренды фронтэнда. Javascript APIs для мобильных устройств

Время на прочтение8 мин
Охват и читатели19K
Презентация: http://sergey.makoveev.info/2013/01/frontend.js-apis-mobile.presentation/.
Примеры: http://goo.gl/5jv4i.
Исходники: http://goo.gl/YYj0R.

В настоящее время нельзя не заметить общую тенденцию к миграции сервисов и приложений в веб, что подкрепляется появлением множества онлайн-сервисов, которые претендуют называться однозначно можно назвать веб-приложениями. Как следствие, теряют популярность standalone-приложения, функционал которых не предусматривает связи с массовыми веб-сервисами. Таким приложением приходится либо видоизменяться, добавляя в себя функционал для интеграции с внешним миром, либо мигрировать в веб.
Читать дальше →

Что нам стоит DOM построить

Время на прочтение6 мин
Охват и читатели57K
Скажу сразу, всю DOM-модель мы строить не будем, а лишь рассмотрим ее элементы и как с ними работать при помощи jQuery. Статья рассчитана на начинающих или тех кто хочет вспомнить как можно строить элементы «на лету», надеюсь кому-то это будет полезно.
Большинство веб-разработчиков сталкивается с необходимостью вставить какое-либо содержимое из js, возможно это ajax или событие. Но никто не задумывается о том что с вашим кодом возможно кому-то придется работать. И часто даже в очень известных плагинах можно встретить код такого типа:

var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'result ' +  i + '</td></tr>';
}
content += "</table>"

$('#table').append(content);


Сразу видно, что этот кусочек кода сделан на быструю руку, я и сам так когда-то делал, но ведь можно сделать и лучше.
В статье я вывел самые основные элементы которые используются при разработке, возможно они помогут вам сэкономить время.
Под катом много кода с примерами.
Читать дальше →

Информация

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