Привет, Хабр!

В этой статье я бы хотел поделиться своими познаниями в кроссбраузерной и кроссмейлерной верстке почтовых рассылок. Под словом кроссмейлерность подразумевается — корректное отображение верстки во всех почтовых клиентах. Я считаю, что статья вполне актуальна, в виду того, что на хабре эта тема несколько раз освещалась, но некоторые нюансы были неточными, а другие просто устарели. По долгу службы я долгое время занимался версткой html расылок по всему миру, и приведенные ниже правила будут касаться следующих почтовых клиентов и веб-интерфейсов: MS Outlook 2003-2010, mail.ru, rabmler почта, Яндекс почта, Gmail, Yahoo! Mail (Classic), Thunderbird 2.0-3.0, Hotmail, Windows Live Mail, Apple Mail 3-4, AOL Mail, Lotus Notes 8-8.5.

Судя по тому, насколько популярен блог DIY, многие из нас любят изобретать. Наверное, каждый встречал человека, который способен сутками что-нибудь паять, программировать, отлаживать, не замечая ничего вокруг. Вот совсем свежие примеры.

В этой статье я расскажу про устройство, которое способно обеспечить досугом изобретателей очень надолго. Это, с одной стороны, серийно выпускаемые приборы. Но сделаны они в виде конструкторов, поэтому их применение ограничено лишь вашей фантазией.

Речь пойдет про устройства NetPing. Эта российская разработка периодически упоминается на хабре, но детального рассказа я не встречал. Пусть эта статья будет продолжением серии «Оборудование российского производства». Мне достался самый универсальный прибор линейки – UniPing RS-232. Основная сфера его применения – удаленный мониторинг и управление множеством устройств в квартире, доме, офисе. Конечно, давно существует понятие «умный дом», но, как правило, это преподносится как вариант для состоятельных людей, хотя получают они черный ящик с жестко заданным, пусть и большим, набором функций. Однако, можно ведь все собрать и запрограммировать самому!

Каждому, даже самому «молодому» верстальщику известны неприятности (проблемы) с интервалом между элементами, пробелами, которые вставляются между словами. Эти пробелы часто мешают нам при вёрстке того или иного блока. Избавиться от них бывает не так-то просто, а зачастую эти межсловные расстояния и вовсе ставят нас перед выбором, выбором способа решения данной проблемы.

В этой статье мы попытаемся понять, что же из себя представляют эти загадочные "Отступы", что это за звери и с чем их едят. Так же рассмотрим, что такое inline-block, и почему после себя он ставит эти непонятные интервалы. Ну, и, самое главное, мы увидим несколько универсальных решений данного вопроса и, конечно же, обсудим все их стороны.

Добрый день Хабр,

Хочу познакомить пользователей Хабра с проектом над которым работает наша небольшая команда. Axis — это CMS для создания интернет магазинов под открытой лицензией.

Репозиторий на GitHub: http://github.com/axis/axiscommerce
Сайт: http://axiscommerce.com

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

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

Тема уже достаточно избитая, но хочу поделится своим методом. Технологию придумал сам, на оригинальность не претендую, хотя пока что не встречал описание подобной техники.

Известно, что следуя идеям старой школы, а именно, добавляя ссылки на JS и CSS в страницы, может обернуться большим временем загрузки страницы. Браузер отображает страницу по мере скачивания, но останавливается, если натыкается на тег script со ссылкой, до того момента, пока скрипт не будет загружен и выполнен. Сайты стали использовать всё большее количество скриптов, начальное отображение страницы занимает всё больше времени, к примеру, на этой странице, которую вы читаете, 13 скриптов, 7 из которых находятся в head'е. Ко всему прочему, некоторые браузеры по-прежнему придерживаются ограничений на одновременное количество загрузок с одного хоста.

Сразу предлагаю принять, что все JS файлы минимизированы, и передаются в сжатом виде.

Существует несколько решений, как то:
— поместить стили и скрипты прямо в страницу;
— установка аттрибутов async/defer тегу script;
— склеить все скрипты в один файл;
— помесить ссылки на скрипты в конец body;
— разместить все файлы на CDN/на разных хостах;
— свой вариант…

Эти решения работают, каждое лучше или хуже в зависимости от того, как построен сам сайт, но обладают рядом недостатков, которые я опишу ниже.
Существует интересная техника, которая решает проблему паузы перед начальным отображением страницы, а заодно добавляет некоторые удобства. Рискну предположить, что техника эта многим знакома, но тем не менее здесь я о ней упоминаний не видел.

Началось всё, конечно, с того, что я взялся за один проект, и в какой-то момент мне показалось, что простенькая страница достаточно долго загружается, и посмотрел на график загрузки, и на результаты YSlow. Огонь на секунду потух в моих глазах, но зная, что может быть лучше, я полез искать,

В веб-дизайне элементы неправильной формы всегда вызывают интерес. Стреловидные формы и диагональные линии могут создать интересный визуальный поток и дать приятный результат. Я был вдохновлен проектами, в которых используются неправильные формы, и теперь хочу показать пару простых примеров с их использованием.

Добрый день, Хабр.

Я хочу написать цикл статей о создании расширений для Google Chrome. К этому меня побуждает, во-первых, практическая польза самого процесса разработки и последующего использования: вы сами определяете, какие ещё задачи хотите решить не выходя из браузера и, во-вторых, отсутствие каких-либо внятных гайдов, туториалов и справочников на русском языке, за исключением, пожалуй, этой и вот этой статей на Хабре. Основная цель цикла — систематизировать разрозненную информацию и облегчить поиск потенциальным разработчикам, благо индексируется Хабр хорошо :)

В первой (этой, то бишь) статье, на примере простейшего расширения, будут рассмотрены все основные моменты, связанные с разработкой, отладкой и использованием расширения, конфигурационный файл manifest.json и начала chrome.* API. Первая же статья, думаю, будет не очень полезна опытным разработчикам (это дисклеймер).

Привет, Хабр!

Хочу поделиться замечательным мастер-классом по созданию реалистичных теней для блоков на чистом CSS, найденном на просторах рунета по адресу http://mainview.ru/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij. Естественно, для того, чтобы примеры работали как надо, необходим браузер с поддержкой CSS3.

Озадачили меня тут написать демона на PHP. Т.е. скрипт, который будет заданное количество раз в заданное количество часов в случайное время (всегда случайное) выполнять определенные действия, и все это без использования cron'a.

До этого никогда не заморачивался, а тут после постановки задачи, начал было думать что так нельзя, что php скрипт надо вызывать браузером…ну задача то поставлена, надо выполнять.

Первая мысль — отключить ограничение времени выполнения скрипта. Запрещено хостером.

Вторая мысль — яваскриптом повторять аякс-запрос периодически (да хоть раз в секунду). — нельзя (требование заказчика).

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

В связи с тем, что на Хабрахабре не нашёл я описания данного простого и в то же время удобного способа создания простых «тултипов» — всплывающих подсказок, я решил о нём написать.
В данном методе не будет использоваться JS, мы довольствуемся лишь CSS3 и HTML5.

В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.

В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.

Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.

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

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

В данной статье я хотел бы показать вам некоторые приёмы создания эффектов при помощи CSS3 на примере меню. Идея заключается в простой композиции элементов: иконки, основного названия и вторичного названия, которое будет анимировано при наведении курсора, используя только CSS-переходы и CSS-анимацию. Мы рассмотрим несколько различных эффектов для элементов.

phpThumbOf — это аддон для MODx, основанный на популярном скрипте phpThumb. Он позволяет модифицировать изображения средствами различных графических библиотек «на лету».

Я не буду описывать процесс установки аддона из репозитория. Будем считать, что вы уже скачали его и установили.

Причиной написания поста послужил тот факт, что официальная документация по phpThumbOf просто ужасна. Прочитав ман, я подумал, что единственной функцией, которую можно использовать для модификации изображения при его выводе является зум-кроп (zoom-crop), ибо больше там ничего не сказано. Но позже, попробовав использовать некоторые другие опции phpThumb я выяснил, что они прекрасно работают!

Доброго времени суток, Хабр!

Хотел бы рассказать Вам, каким образом я добился плавной смены цветов иконок при наведении на них курсора. Подобная проблема часто встречается на Facebook. Если иконка представляет собой синий силуэт на белом фоне, то при наведении курсора оба цвета меняются местами, причём происходит это мгновенно и выглядит немного резко. Мои эстетические чувства были задеты, и я разработал своё решение.

Не встретив на просторах Интернета чего-либо подобного, я взял на себя ответственность назвать этот метод SITH (Soft Image Transition on :Hover) — плавный переход изображения при наведении.



Под хабракатом Вы найдёте полное описание техники, весь код, несколько скриншотов и ссылку на демонстрационную версию.

Вы же знаете, как это иногда бывает: погружённый в фантастический мир новых знаний, вы сидите, расслабившись, перед мануалом, и тут влетает некий истеричный субъект, мечет гром, молнии и икру. Когда удастся погасить взрыв эмоций, ситуация начнёт проясняться.
Итак, суть проблемы: есть некий компьютер/терминал в труднодоступном месте, до которого организован не очень стабильный канал связи. Если связи нет в нужный момент, этот терминал становится местом локального смерча, в вихре которого носятся все от мала до велика.
Суть задачи: организовать резервный канал связи с автопереключением на него, в случае падения основного и назад, когда основной поднимется.

В этой публикации я опишу своё решение на приснопамятном DLink DIR-320.
Я потратил много времени на тщетные поиски сначала способов и реализаций, потом прошивок и скриптов, прежде чем пришёл к ответу. Надеюсь эта информация окажется полезной.

В этой статье я хочу по возможности полно и последовательно рассказать о том, что такое объект в JavaScript, каковы его возможности, какие взаимоотношения могут строиться между объектами и какие способы «родного» наследования из этого вытекают, как это все влияет на производительность и что вообще со всем этим делать :)

В статье НЕ будет ни слова про: эмуляцию традиционной класс-объектной парадигмы, синтаксический сахар, обертки и фреймворки.

Сложность материала будет нарастать от начала к концу статьи, так что для профи первые части могут показаться скучными и банальными, но дальше будет намного интереснее :)