Читать дальше →
kulikoff @kulikoff
Пользователь
Настоящее скругление углов картинок на клиенте
3 мин
О скруглении углов в html-верстке сказано уже столько, что я пойму тех кто прочитав заголовок иронично улыбнется и подумает «опять 25, ну сколько можно...». Поэтому я постараюсь кратко изложить суть, и сразу предупрежу, что этот метод вы едва ли могли видеть раньше.
Самый короткий в мире маркетинговый план
1 мин
В догонку к посту про макет бизнес модели, не менее полезный «самый короткий в мире маркетинговый план» (так его назвал автор, Келли Одел).
Можно для любой новой идеи, продукта или услуги заполнить эту табличку и сразу увидеть общую картину с перспективами.
Можно для любой новой идеи, продукта или услуги заполнить эту табличку и сразу увидеть общую картину с перспективами.
MySQL шпаргалки
3 мин
Часто, когда разрабатываешь сайт, замечаешь, как на одни и те же грабли наступают разработчики при проектировании базы данных.
Сегодня я решил опубликовать свои шпаргалки, на самые часто встречающиеся ошибки при работе с MySQL.
Сегодня я решил опубликовать свои шпаргалки, на самые часто встречающиеся ошибки при работе с MySQL.
Еще несколько полезных плагинов
2 мин
За последний месяц, я написал уже два поста с обзорами плагинов jQuery (1 и 2). Надо сказать, что подобные статьи на английском языке появляются все чаще и чаще. Однако их содержание довольно быстро приедается. Галереи картинок, слайдеры, опять галереи картинок, многочисленные динамические меню и опять слайдеры. Мне не хочется описывать очередную порцию подобных плагинов. Поэтому сегодня я расскажу не о двадцати-тридцати как обычно, а только о семи важных на мой взгляд плагинах, о которых очень хотелось рассказать. Лучше меньше, да лучше.
Инструментарий веб-разработчика под мобильные устройства
2 мин
С каждым днем количество веб-сайтов и сервисов под мобильные платформы становится все больше и больше. Я уже как то писал про эмуляторы, а сейчас хочу представить несколько полезных инструментов, начиная от самых простых, показывающих как будет сайт выглядеть на том или ином устройстве, заканчивая различными оптимизаторами контента.
Обзор нескольких новых плагинов jQuery
4 мин
Перевод
Довольно часто я наступаю на одни и те же грабли. Стараясь выполнить какой-нибудь проект побыстрее, я с головой ухожу в реализацию необходимой функциональности. А через неделю, мне на глаза обязательно попадается описание библиотеки, фреймворка или плагина, воспользовавшись которыми, я мог бы выполнить свою часть работы в разы быстрее. В общем, сейчас я стараюсь быть в курсе готовых решений в интересующих меня областях. В последнее время мне часто приходится работать с javascript и поэтому, сейчас я уделяю особое внимание библиотеке jQuery и ее плагинам. Должен сказать, что упускать из виду такое разнообразие готовых решений просто нельзя. Данная статья сделана на основе обзора «50 Awesome New jQuery Plugins», который я прочитал пару дней назад.
Улучшаем border-radius.htc
1 мин
Думаю многим верстальщикам известно решение, которое заставляет IE рисовать скругленные уголки: «curved-corner» (или border-radius.htc).
В этой статье я расскажу, как избавиться от ошибок «Invalid argument» при его использовании, а также как в разы ускорить его работу.
В этой статье я расскажу, как избавиться от ошибок «Invalid argument» при его использовании, а также как в разы ускорить его работу.
Paginator3000 и колёсико мыши
2 мин
Потребовалось однажды реализовать пейджер постраничной навигации а-ля дёти.
Далеко в лес ходить я не стал, а решил найти, что же это за зверь такой раскопированный на множестве сайтов, а оказалось, что это детище karaboz. И даже есть аналог, переделанный под jQuery.
Но у каждой версии есть, как мне показалось, огромный недостаток, игнорирование колесика мыши. «Но ведь с этим было бы удобнее!» — воскликнул я и решил немного переписать, чтобы пейджер прокручивался на событие mousewheel. А также есть другие недостатки, которые я освещу под катом.
Далеко в лес ходить я не стал, а решил найти, что же это за зверь такой раскопированный на множестве сайтов, а оказалось, что это детище karaboz. И даже есть аналог, переделанный под jQuery.
Но у каждой версии есть, как мне показалось, огромный недостаток, игнорирование колесика мыши. «Но ведь с этим было бы удобнее!» — воскликнул я и решил немного переписать, чтобы пейджер прокручивался на событие mousewheel. А также есть другие недостатки, которые я освещу под катом.
Ещё 10 уловок для защиты Wordpress'a
6 мин
Перевод
На сегодняшний день Wordpress как никогда популярен. Блоги, мини-сайты, а то и целые порталы — всё это строится на основе такого удобного движка-конструктора как Wordpress. Но за удобностью и лёгкостью освоения кроются, прежде всего, вопросы, связанные с безопасностью вашего сайта. Большая распространённость — большее внимание злоумышленников.
В этой статье описаны десять простых уловок, которые позволят сделать ваш сайт на Wordpress’e ещё более защищённым и позволят спокойнее спать по ночам.
В помощь веб-разработчику: эмуляторы мобильных устройств
7 мин
Я думаю некоторые из веб-разработчиков сталкивались с задачей создания сайтов и сервисов под мобильные платформы. И проблема возникает в том момент, когда надо протестировать свое творение. И если найти тот или иной девайс все же не проблема, то протестировать на максимальном количеством устройств достаточно сложно. И тут на помощь приходят ОНИ — эмуляторы. В данном посте я рассмотрю вопросы установки и запуска эмуляторов следующих мобильных устройств, с целью запуска на них нужного сервиса: Win Mobile, iPhone, BlackBerry, Android, Symbian^3.
Vkontakte Open Media Player
2 мин
Вступление
Хочу представить вам свою опенсорс разработку — Vkontakte Open Media Player, которая позволяет удобно смотреть кино и сериальчики из вконтакта с выбором качества (имеется ввиду разрешение видео, а не качество рипа, хотя и оно часто указано :) ). Немного подробностей внутри.
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>
Внутренние технологии Яндекс.Карт стали доступны всем веб-разработчикам
2 мин
Перевод
Яндекс открывает в API технологию, которая раньше использовалась только на собственных проектах.
Называется технология «активные области». Её задача очень простая — дать возможность показать на карте столько активных меток, сколько это нужно проекту. Если 10000, значит десять тысяч. Если сто тысяч, то сто! И никаких компромиссов.
API Яндекс.Карт позволяет показывать стандартным способом не более тысячи меток, при добавлении большего числа меток, браузер пользователя начинает работать заметно медленее. Теоретический предел новой технологии измеряется сотнями тысяч активных меток на карте.
На Яндекс.Картах активные области применяются для отображения различных слоёв: пробок, фотографий, дорожных развязок и видеокамер. А теперь эту технологию можно увидеть и на других сайтах. Представляем вам три проекта, участвовавших в бета-тестировании:
"Банкоматор" — карта банкоматов и терминалов самых популярных сетей.
Вот так выглядит карта банкоматов Сбербанка на территории Москвы, на ней сейчас 1274 метки. Карта терминалов Qiwi выглядит ещё внушительнее. Здесь одновременно отображено 11 309 терминалов.
Проект "4rent.ru" использует активные области для того чтобы показывать объявления о недвижимости. Большое количество объявлений требует использования специальной технологии.
Так же активные области использует портал "Тили-Тесто" с обширным свадебным каталогом на карте.
Подробнее об активных областях читайте в документации.
Кроме активных областей в новой версии API, стали доступны и другие функции:
- Модуль «Метро» — поиск ближайших станций метро для 11 городов (а это 401 станция метро);
- Модуль «Регионы» — позволяет организовать выбор региона на карте России, Украины, Белоруссии и Казахстана;
- Геотаргетинг — определение координат региона пользователя по его IP адресу;
- Новый дизайн меток и балунов.
Будем рады вашим отзывам и предложениям!
Команда API Яндекс.Карт
Быстрая реализация резервного копирования в Amazon S3
3 мин
Я устал испытывать определённые опасения за сохранность данных на выделенном сервере, наблюдая за происходящим у хостеров последнее время… 3FN, Agava, Hosting.UA, МакХост — тенденция получается очень нехорошая.
В итоге, МакХост стал последней каплей, и, чтобы не оказаться в числе тех, кто «уже делает бекапы», я перевёл систему бекапов своего сервера на Amazon S3. Получилось вполне себе быстро и прозрачно.
Хочу поделиться с общественностью простейшей реализацией.
В итоге, МакХост стал последней каплей, и, чтобы не оказаться в числе тех, кто «уже делает бекапы», я перевёл систему бекапов своего сервера на Amazon S3. Получилось вполне себе быстро и прозрачно.
Хочу поделиться с общественностью простейшей реализацией.
Подборка роликов о создании макета дизайна и сайта в Adobe Fireworks
3 мин
Что такое Fireworks и зачем он нужен
В нашей стране данный графический редактор не снискал популярности. Так уж сложилось, что стоимость пакета Adobe Creative Suite у нас в среднем равна стоимости интернет-трафика на его скачивание, либо стоимости носителя, на который его записывают. Отчасти поэтому все используют Adobe Photoshop и Adobe Illustrator для создания веб-дизайна. Ну вот сейчас, лично для меня, пришло время задуматься о лицензионности софта.Я сам не являюсь веб-дизайнером, я программист. Основные задачи, которые я решаю с помощью графического редактора — это минимальная модификация растровой и векторной графики, нарезка готового дизайна, оптимизация изображений, создание прототипов и т.п. Photoshop и Illustrator без проблем решают эти задачи, однако их в состоянии решить и Fireworks. А теперь вспомним про стоимость Photoshop + Illustrator (700$ + 600$) и сравним со стоимостью Fireworks (300$).
Частенько бывает, что Fireworks не справляется с отображение родных файлов Photoshop и Illustrator. Возникают глюки с отображением некоторых эффектов. В таких случаях обычно помогает эталонный скриншот, который позволяет понять где проблема и при возможности исправить ее. Также есть альтернативные редакторы (Gimp, Pixelmator), которые открывают исходный файл, но уже со своими глюками, которых нет в Fireworks.
Таким образом, вряд ли Fireworks заинтересует дизайнеров, уже работающих в Photoshop, его основные пользователи — это программисты, верстальщики, проектировщики и небольшая часть дизайнеров (во всяком случае в России).
Подборка роликов о Fireworks
Покопавшись в рунете на предмет наличия видео о Fireworks на русском языке я наткнулся на некий вакуум. Все имеющиеся ссылки вели на Youtube. Вот к нему я обратился, а результаты поиска под хабракатом. Кому будут интересны эти ролики? Прежде всего программистам, отчасти верстальщикам, которые хотят понять как создается веб-дизайн и почему им не всегда нужен Photoshop.
Все о 960gs — отличном css-фреймворке для построения модульных сеток
6 мин
Я хочу дать исчерпывающее описание замечательному фреймворку для построения модульных сеток 960gs. Недавно где-то в комментариях сказали, что 960gs сложнее в понимании, чем blueprint, что меня удивило. Я не хочу заниматься сравнением этих фреймворком, хотя бы потому, что они выступают в разных весовых категориях, однако, для построения модульной сетки ничего легче и проще в понимании, чем 960gs я не видела.
Thick As Brick – простейший html шаблон для верстки
2 мин
Я почему вредный был?
Потому что у меня велосипеда не было!
Мультфильм «Трое из Простоквашино»
Когда десять раз делаешь одно и то же, на одиннадцатый раз ты волей-неволей начинаешь задумываться о том, как бы процесс оптимизировать. Так и с версткой: после десятка сверстанных страниц хочется слегка упростить свою задачу. Тут на помощь, конечно же, приходят разнообразные фреймворки (чего только стоит oocss или наикрутейший CSS-фреймворк от Яндекса или целая куча других не менее интересных фреймворков). Пригодятся и системы сборки (Ant стоит на службе у студии Артемия Лебедева, да и я потихоньку постигаю его Дао). Не стоит забывать и различные хаки и шаблоны лейаутов, коих в интернете бесчисленное множество.
Однако как быть с сайтом, для которого надо сверстать пару-тройку типичных страниц? Нет смысла тащить с собой кучу лишнего CSS-кода. Кроме того, многим верстальщикам гораздо проще написать качественный код с нуля, чем перегружать кучу заранее объявленных бесполезных классов. Что делать?
Чтобы решить этувысосанную из пальца нетривиальную задачу я написал простейший шаблон для верстки, который сильно облегчил мне работу над проектами. Шаблон примитивен и прост (потому так и зовется), на звание фреймворка ни в коем случае не претендует (минус в карму тому, кто обзовет его фреймворком! ;) ). Он несет в себе заранее объявленные CSS-классы для работы с меню, списками, формами, ресеты основных тегов (вроде сброса отступов у форм и правильных отступов у <p>) и еще кое-какие полезные для меня вкусности.
Потому что у меня велосипеда не было!
Мультфильм «Трое из Простоквашино»
Когда десять раз делаешь одно и то же, на одиннадцатый раз ты волей-неволей начинаешь задумываться о том, как бы процесс оптимизировать. Так и с версткой: после десятка сверстанных страниц хочется слегка упростить свою задачу. Тут на помощь, конечно же, приходят разнообразные фреймворки (чего только стоит oocss или наикрутейший CSS-фреймворк от Яндекса или целая куча других не менее интересных фреймворков). Пригодятся и системы сборки (Ant стоит на службе у студии Артемия Лебедева, да и я потихоньку постигаю его Дао). Не стоит забывать и различные хаки и шаблоны лейаутов, коих в интернете бесчисленное множество.
Однако как быть с сайтом, для которого надо сверстать пару-тройку типичных страниц? Нет смысла тащить с собой кучу лишнего CSS-кода. Кроме того, многим верстальщикам гораздо проще написать качественный код с нуля, чем перегружать кучу заранее объявленных бесполезных классов. Что делать?
Чтобы решить эту
ExtJS. Изложения в примерах
1 мин
Хотел бы начать знакомить всех с фреймворком ExtJS. Оказывается, все не так сложно как может показаться…
1. [ExtJS] :: Часть 1. Вводная. Модель DOM и типы данных в ExtJS
2. [ExtJS] :: Часть 2. Основы пользовательского интерфейса в ExtJS
3. [ExtJS] :: Часть 3. Загрузка, проверка и обработка форм в ExtJS
4. [ExtJS] :: Часть 4. Работа с выпадающими списками и календарем
5. [ExtJS] :: Часть 5. Отображение и редактирование табличных дан
6. [ExtJS] :: Часть 6. Обзор таблиц и списков
7. [ExtJS] :: Часть 7. Вкладки и деревья
Ссылка на ресурс тут
Пока все.
Думаю, что разработчиками будет интересно. Еще материалы планирую разместить немного позже, как появится свободное время.
PS. С НАСТУПАЮЩИМ!!!
1. [ExtJS] :: Часть 1. Вводная. Модель DOM и типы данных в ExtJS
2. [ExtJS] :: Часть 2. Основы пользовательского интерфейса в ExtJS
3. [ExtJS] :: Часть 3. Загрузка, проверка и обработка форм в ExtJS
4. [ExtJS] :: Часть 4. Работа с выпадающими списками и календарем
5. [ExtJS] :: Часть 5. Отображение и редактирование табличных дан
6. [ExtJS] :: Часть 6. Обзор таблиц и списков
7. [ExtJS] :: Часть 7. Вкладки и деревья
Ссылка на ресурс тут
Пока все.
Думаю, что разработчиками будет интересно. Еще материалы планирую разместить немного позже, как появится свободное время.
PS. С НАСТУПАЮЩИМ!!!
Поиск по сайту на основе Yandex.XML
3 мин
Почему-то вебмастера ленятся сделать нормальный поиск по своему сайту. Особенно это касается высокопосещаемых сайтов, где качественный поиск был бы очень удобен для рядового пользователя.
Чаще всего прибегают к готовому решению от Google, с помощью которого можно еще и подзаработать на контекстной рекламе. Но для рунета я бы посоветовал сделать поиск при помощи сервиса Yandex.XML, потому что такой поиск больше адаптирован под морфологию русского языка. К тому же вы можете получить шанс получить самые жирные биды для контекста, если будете использовать поисковый директ.
В этом посте я хочу подробно показать вам, что подобный поиск организовать совсем не сложно. Это займет всего несколько минут и выльется в десяток строк на PHP.
Чаще всего прибегают к готовому решению от Google, с помощью которого можно еще и подзаработать на контекстной рекламе. Но для рунета я бы посоветовал сделать поиск при помощи сервиса Yandex.XML, потому что такой поиск больше адаптирован под морфологию русского языка. К тому же вы можете получить шанс получить самые жирные биды для контекста, если будете использовать поисковый директ.
В этом посте я хочу подробно показать вам, что подобный поиск организовать совсем не сложно. Это займет всего несколько минут и выльется в десяток строк на PHP.