Здравствуйте, дорогие читатели. Сегодня хочу с вами поделиться чрезвычайно простым способом кроссбраузерной реализации css-свойства box-shadow. Способ настолько простой и очевидный, что я был чрезвычайно удивлен тем, что не смог найти на просторах интернета аналогичного решения (хотя я более чем уверен, что не являюсь первооткрывателем).
Ерошенков Сергей @TecHMeaT
Front End Developer
Мы это сделали — онлайн бухгалтерия для ООО
2 мин
Полгода назад я сделал свой первый пост на хабре, в котором рассказал о нашем проекте онлайн бухгалтерии, призванной упростить жизнь всему малому бизнесу. Концепция простая — онлайн бухгалтер, способный заменить живого и делающий всю бумажную работу — от расчета налогов до выставления счета клиенту.Скажу честно, тот пост для нас значил очень многое, и именно отличная реакция на хабре вдохнула в «Мое дело» жизнь: первые 100 активных пользователей, первые партнерские контакты, первые идеи об интеграции — все это мы получили благодаря хабру. Спасибо всем, кто присылал идеи по улучшению сервиса и находил баги в бета версии — благодаря Вам мы продолжаем двигаться вперед, продираясь сквозь идиотизм налоговых инспекций и бюрократические стремления нашей страны.
Сейчас мы уже обрели вес, и хотя так и не привлекли инвестиций (инвесторы, ау), чувствуем себя очень уверенно. И с кем, как ни с хабром делится главной новостью за последние полгода.
Бета версия бухгалтерии MoeDelo.org для ООО на УСН готова!
Мы перебрали более десяти различных вариантов представления всех ООО-ных заморочек в UI и наконецто пришли к решению.
Кроссбраузерный CSS3 градиент
3 мин
Для FF используется
-moz-linear-gradient, для Safari/Chrome — -webkit-gradient, для IE — DXImageTransform.Microsoft.gradient.Вот только Opera 10 ещё не поддерживает CSS3 Gradient :(
Выступаем публично. Подготовка к твоему первому выступлению на конференции
4 мин
Приветствую, коллеги по цеху. Начну с отказа от ответственности. Сам я не опытный рассказчик, а только учусь. Возможно, именно поэтому мой опыт будет интересен другим новичкам. Опытных презентаторов, кому есть что добавить — прошу отписаться в комментах или в личку — что можно было бы сделать лучше.Началось всё с того, что на РИФ+КИБ нашей компании выступить не удалось, в силу разных причин, а давно хотелось. Следующее интересное отраслевое событие — "Неделя электронной торговли", и наши доклады включили в программу мероприятия (не без помощи razmolot).
Начитавшись на Хабре статей (раз, два, три и т.д.), начал готовиться к первому своему публичному выступлению.
Итак. Первое: Цели. Как правильно писали умные люди на Хабре — презентация это не "о чем", а "зачем".
GWT приложение за 30 минут
2 мин
Буквально на днях вышла новая (пока нестабильная) версия Spring-Roo одной из основных фич которой является поддержка генерации пользовательского интерфейса на GWT.
Мне стало интересно, сегодня поэксперементировал, под катом перевод моего блога (для тех кому лень читать на английском) с описанием как сделать GWT приложение менее чем за 30 минут. Надеюсь хабровчанам это покажется интересным и полезным.
Мне стало интересно, сегодня поэксперементировал, под катом перевод моего блога (для тех кому лень читать на английском) с описанием как сделать GWT приложение менее чем за 30 минут. Надеюсь хабровчанам это покажется интересным и полезным.
Аккорды с применением высоких технологий
14 мин
Задача заверстать аппликатуру весьма не тривиальна и от того довольно интересна. Я тоже не устоял перед искушением решить её так как считаю правильным.
Помимо стандартных требований типа кроссбраузерности, масштабираемости, печатаемости и компактности, хотелось бы добиться также и возможности просто тупо скопировать аппликатуру и вставить её, например, в текстовый документ. То есть в текстовом виде аккорд должен иметь примерно следующий вид:
O — открытая струна, X — приглушённая, остальные буквы обозначают пальцы.
Помимо стандартных требований типа кроссбраузерности, масштабираемости, печатаемости и компактности, хотелось бы добиться также и возможности просто тупо скопировать аппликатуру и вставить её, например, в текстовый документ. То есть в текстовом виде аккорд должен иметь примерно следующий вид:
Am O - - - O F - - O - R - O - M - O - - - X - - -
O — открытая струна, X — приглушённая, остальные буквы обозначают пальцы.
Google представил API для кроссбраузерного подключения шрифтов
1 мин
Google Font API — API для подключеня нестандартных шрифтов.
<html>
<head>
<link rel="stylesheet" type="text/css" href="_http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>
10 хитростей Google Analytics
4 мин
Казалось бы, установка и настройка счетчика Google Analytics — задачи простые. На деле, эта «простота» скрывает за собой множество подводных камней. Мы постоянно сталкиваемся с тонкостями, неочевидными особенностями подсчета и глубоко спрятавшимися ошибками (конечно, обычно виноваты мы сами:).
На базе нашего опыта я сформулировал 10 советов, которые пригодятся большинству пользователей Analytics – когда-то это были и наши грабли! Некоторые темы заслуживают отдельных статей, но пока расскажу о более-менее очевидных и простых технических хитростях.
Проверка регулярных выражений при установке целей
Достаточно часто при указании адреса цели приходится использовать регулярные выражения: например, если искомый фрагмент адреса окружен другими частями. Регулярные выражения – тонкая материя, а ждать обновления данных для проверки правильности написания не хочется. Проверить правильность выражения можно мгновенно, перейдя в раздел «Содержание – Самое популярное содержание» и введя в поле фильтра выражение. Содержимое сразу же отфильтруется, а вы сможете убедиться в корректности кода.
На базе нашего опыта я сформулировал 10 советов, которые пригодятся большинству пользователей Analytics – когда-то это были и наши грабли! Некоторые темы заслуживают отдельных статей, но пока расскажу о более-менее очевидных и простых технических хитростях.
Проверка регулярных выражений при установке целей
Достаточно часто при указании адреса цели приходится использовать регулярные выражения: например, если искомый фрагмент адреса окружен другими частями. Регулярные выражения – тонкая материя, а ждать обновления данных для проверки правильности написания не хочется. Проверить правильность выражения можно мгновенно, перейдя в раздел «Содержание – Самое популярное содержание» и введя в поле фильтра выражение. Содержимое сразу же отфильтруется, а вы сможете убедиться в корректности кода.
Фильтруем с помощью jQuery большое количество данных
5 мин
У меня на хабре очень крупное Принцип работы прост, устанавливаем себе грабер, получаем заветный habrabookmarks.htm, и просто запускаем мой файл сортировки рядом.
Быстрый старт с openID
3 мин
Добрый день, друзья.
Сегодня я хочу поделиться своим опытом внедрения авторизации по openID на своем книжном сайте «Мои книги». Статья рассчитана на начинающих, поэтому вряд ли заинтересует тех, кто уже знает все нюансы этой технологии. Основная ее цель – ответить на вопрос: «да, это удобно, но как же мне сделать такое в моем проекте?!!»
Сегодня я хочу поделиться своим опытом внедрения авторизации по openID на своем книжном сайте «Мои книги». Статья рассчитана на начинающих, поэтому вряд ли заинтересует тех, кто уже знает все нюансы этой технологии. Основная ее цель – ответить на вопрос: «да, это удобно, но как же мне сделать такое в моем проекте?!!»
Никогда не говорите слово …, или регистрация в 2 щелчка мышью
4 мин
Люди не очень любят регистрироваться. Это же нужно (в общем случае) придумать логин и пароль, зайти в свою почту, дождаться письма, открыть его, перейти по ссылке активации аккаунта, а потом еще этот логин с паролем не забыть. Но ведь уже давно есть способ, с помощью которого все эти шаги не нужны. Более того, не нужно вообще ничего вводить с клавиатуры, 2 щелчка мышью и все, человек зарегистрирован.
Google Maps Javascript API V3 и управление маркерами
3 мин
Дело было глубокой осенью. Мне поручили разработку раздела, основной задачей которого является указание местоположения объектов фильтрации и поиска на карте. Что стало заметно сразу же — даже при отображении 10 объектов на карте, можно уменьшить зум до такого, при котором они просто сливаются. Если их будет 100 — появятся жутковатые наложения и тени. Не комильфо!
Решение очевидное, маркеры нужно группировать. В процессе поиска наткнулся на хабростатью, в которой рассмотрены различные способы группировки большого количества маркеров на карте. Нас вполне устраивали «костыли 1-2», то есть группировка маркеров на клиентской стороне, однако… если бы они подошли, не писал бы я сейчас статью ;)
Поиск решения
Решение очевидное, маркеры нужно группировать. В процессе поиска наткнулся на хабростатью, в которой рассмотрены различные способы группировки большого количества маркеров на карте. Нас вполне устраивали «костыли 1-2», то есть группировка маркеров на клиентской стороне, однако… если бы они подошли, не писал бы я сейчас статью ;)
Препроцессинг CSS на клиенте
6 мин
Представьте, что вы пишете блогохостинг и хотите позволить авторам блогов менять свой дизайн. Картиночки там вставлять, цвета менять, пропорции регулировать… Представили? Если хорошо представили, то уже поняли, что без констант и формул в CSS тут не обойтись.
При блуждании по блогам не хотелось бы грузить все стили заново, что неизбежно при серверном вычислении значений, а хотелось бы грузить лишь минимальную разницу — так называемый скин.
Итого, нам нужно грузить в дополнение к данным страницы: скин с константами и стили с формулами. Только две клиентские технологии позволяют сделать это: JS и XSLT. Однако первую очень любят отключать, а вторую отключать просто нет смысла. Поэтому вынесем CSS в XSLT контейнер, а заодно и не забудем про технологию XHTML-инклудов.
При блуждании по блогам не хотелось бы грузить все стили заново, что неизбежно при серверном вычислении значений, а хотелось бы грузить лишь минимальную разницу — так называемый скин.
Итого, нам нужно грузить в дополнение к данным страницы: скин с константами и стили с формулами. Только две клиентские технологии позволяют сделать это: JS и XSLT. Однако первую очень любят отключать, а вторую отключать просто нет смысла. Поэтому вынесем CSS в XSLT контейнер, а заодно и не забудем про технологию XHTML-инклудов.
Ubuntu: маленькие удобства для веб-разработчика
5 мин
Я установила себе Ubuntu второй системой примерно полгода назад. А за пару недель до выхода 10.04 отказалась от дабл-бута и перенесла Windows с фотошопом на виртуальную машину. Потому что фотошоп — это единственное, чего, к сожалению, не хватает для полноценной работы в Ubuntu. Зато в ней есть множество приятных мелочей, которых мне всегда сильно не хватало в Windows. Именно об этих полезных мелочах я и хочу рассказать.
Эта статья ни разу не претендует на исчерпывающее описание всех достоинств и недостатков Ubuntu с точки зрения веб-разработчика.
Я ни в коем случае не утверждаю, что в природе не существует аналогичных приспособлений под Windows. Но я — человек ленивый, а для Windows все, даже Putty, надо искать, скачивать, устанавливать… а за многое из найденного — еще и платить. В то время как в Ubuntu все это доступно прямо «из коробки».
Я еще не дошла до глубокого изучения прелестей консоли и конфигов. Меня пока чарует своими возможностями графический интерфейс.
Вряд ли эта статья будет полезна знатокам линукса, пользующимся консолью «с закрытыми глазами». Скорее она для таких как я новичков, а также для тех, кто еще решает — «А нужно ли мне это?»
Эта статья ни разу не претендует на исчерпывающее описание всех достоинств и недостатков Ubuntu с точки зрения веб-разработчика.
Я ни в коем случае не утверждаю, что в природе не существует аналогичных приспособлений под Windows. Но я — человек ленивый, а для Windows все, даже Putty, надо искать, скачивать, устанавливать… а за многое из найденного — еще и платить. В то время как в Ubuntu все это доступно прямо «из коробки».
Я еще не дошла до глубокого изучения прелестей консоли и конфигов. Меня пока чарует своими возможностями графический интерфейс.
Вряд ли эта статья будет полезна знатокам линукса, пользующимся консолью «с закрытыми глазами». Скорее она для таких как я новичков, а также для тех, кто еще решает — «А нужно ли мне это?»
Ubuntu «Lucid Lynx» 10.04 LTS
2 мин
Состоялся релиз Ubuntu «Lucid Lynx» («ясная рысь») 10.04 LTS популярного Linux дистрибутива!
Юзабилити презентаций
1 мин
Сегодня мне попался пост о засилии презентаций в американской армии. Я работаю в администрации лицея и могу сказать, что в образовании ситуация приблизительно такая же. К каждому чиху, публично сказанному слову и микродостижению нужна презентация. И в учреждении где учится 300 детишек создается порядка 600-700 презентаций в год, около 200 из них создаются педагогами, остальное — детишками. Даже если учреждение захочет остановить этот поток — оно не сможет, для любого внешнего выступления презентации — обязательное требование, они включены во все программы по информатике и т.д.
О качестве их исполнения, полагаю, рассказывать не стоит. И учителей и учащихся десятки часов учат делать презентации, но от этого не очень много толка.
Есть поговорка, что если бардак нельзя прекратить, то его надо возглавить. Тем более беда с визуальной подачей информации также повсеместна среди клерков, в науке, и где только нет.
Итак, сейчас я обкатываю часовой интенсив по юзабилити компьютерных презентаций, представленный в лекционной форме и сопровождающийся, как ни странно, презентацией. Основная цель: человек тратит час и избавляется хотя бы от «детских ошибок».
Этот курс ни в коем разе не ориентирован на профи, которые не почерпнут из него ничего нового, наоборот, он нуждается в их критике и пожеланиях. Собственно пост написан как раз для этого.
Пока у меня не дошли руки надиктовать текст лекции для полноценного видеоурока, так что к посту я прикладываю только вполне наглядный сам по себе сопровождающий материал.
О качестве их исполнения, полагаю, рассказывать не стоит. И учителей и учащихся десятки часов учат делать презентации, но от этого не очень много толка.
Есть поговорка, что если бардак нельзя прекратить, то его надо возглавить. Тем более беда с визуальной подачей информации также повсеместна среди клерков, в науке, и где только нет.
Итак, сейчас я обкатываю часовой интенсив по юзабилити компьютерных презентаций, представленный в лекционной форме и сопровождающийся, как ни странно, презентацией. Основная цель: человек тратит час и избавляется хотя бы от «детских ошибок».
Этот курс ни в коем разе не ориентирован на профи, которые не почерпнут из него ничего нового, наоборот, он нуждается в их критике и пожеланиях. Собственно пост написан как раз для этого.
Пока у меня не дошли руки надиктовать текст лекции для полноценного видеоурока, так что к посту я прикладываю только вполне наглядный сам по себе сопровождающий материал.
Видеозапись секции «Веб-аналитика и оптимизация конверсии: практическое пособие по набиванию синяков и шишек» (РИФ+КИБ 2010)
1 мин
21-23 апреля в подмосковном пансионате «Лесные дали» прошла конференция РИФ+КИБ 2010, на которой собралось около 5 000 человек.
Среди 100 секций одной из самых умных и популярных (второе место по итогам голосования) стала «Веб-аналитика и оптимизация конверсии: практическое пособие по набиванию синяков и шишек»
Тем, кто не доехал до РифоКиба или не добрался до нашей секции, предлагаем видеозапись докладов (непосредственно с места событий).
Среди 100 секций одной из самых умных и популярных (второе место по итогам голосования) стала «Веб-аналитика и оптимизация конверсии: практическое пособие по набиванию синяков и шишек»
Тем, кто не доехал до РифоКиба или не добрался до нашей секции, предлагаем видеозапись докладов (непосредственно с места событий).
Обработка гитарного звука в реальном времени на ПК
3 мин
Гитара — инструмент простой. И играть на ней — дело, в принципе, не хитрое. Но стоит только заменить старую потрепанную акустическую шестиструнку на лаковую электрогитару — сразу начинаются проблемы.
Электрогитара без усилителя и процессора (ампа, примочки, педали) — немой инструмент. Самый простой и эффективный способ озвучить ее — подключить к вашему компьютеру. Итак, хочу поделится своим опытом в обработке звука от гитары на ПК.
Подключить электрогитару к ПК — дело двух минут — стоит лишь подсоединить гитарный шнур к линейному (или микрофонному) входу звуковой карты. Только вот звучать она будет обычно. Чтобы окрасить звук — необходимо его обработать в специальной программе. Но, обо всем по порядку.
Электрогитара без усилителя и процессора (ампа, примочки, педали) — немой инструмент. Самый простой и эффективный способ озвучить ее — подключить к вашему компьютеру. Итак, хочу поделится своим опытом в обработке звука от гитары на ПК.
Подключить электрогитару к ПК — дело двух минут — стоит лишь подсоединить гитарный шнур к линейному (или микрофонному) входу звуковой карты. Только вот звучать она будет обычно. Чтобы окрасить звук — необходимо его обработать в специальной программе. Но, обо всем по порядку.
Как создать несколько магазинов, используя одну установку Magento
4 мин
Это вольный перевод вот этой статьи. Статья предназначена для людей, знакомых с Magento, поэтому многие элементарные вещи из оригинальной статьи были опущены. Существует несколько реализаций решения этой задачи:
В результате получится несколько магазинов, использующих один и тот же код, и управляемых из одной админки.
- Как поддиректории основного сайта, например,
- mall.com/shoes
- mall.com/shirts
- Использование разных доменных имен, например,
- shoes.com
- shirts.com
- Использование поддоменов основного сайта, например,
- mall.com
- shoes.mall.com
- shirts.mall.com
В результате получится несколько магазинов, использующих один и тот же код, и управляемых из одной админки.