В предыдущей статье я рассказал о видах передвижений и перемещений в плиточном мире. Сегодня расскажу подробней о векторных способах. Как и в прошлый раз расскажу теорию, объясню суть и покажу пример реализации перемещений на языке C++.
User
CSS печатной версии страницы
3 min
168K![](https://habrastorage.org/storage2/9e3/c03/ed0/9e3c03ed0fb4675a48a160937c904be4.png)
На многих сайтах есть возможность отобразить версию страницы для печати, но всегда ли удобно ими пользоваться?
Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @media:
+93
Новое для веб-дизайнера за ноябрь 2012
1 min
57KПродолжаю подборку новых полезных штук для веб-дизайнера за прошедший месяц. Прошлые выпуски: октябрь, сентябрь.
Photo Raster — новый мощный графический редактор онлайн.
![](https://habrastorage.org/storage2/238/32f/67e/23832f67e63f15e89579b6309804db85.png)
Сервисы и инструменты
Photo Raster — новый мощный графический редактор онлайн.
![](https://habrastorage.org/storage2/238/32f/67e/23832f67e63f15e89579b6309804db85.png)
+80
Код CSS «с душком»
8 min
107KTutorial
Translation
Недавно Крис Койер отвечал на вопросы читателей Smashing Magazine. Один из вопросов был о том, как распознать код CSS с «душком»:
Я подумал, что могу расширить и дополнить ответ Криса исходя из собственного опыта.
Я работаю в BSkyB. Я делаю большие сайты — над последним из них я тружусь уже больше года. Плохой код CSS доставляет мне очень много проблем. Когда занимаешься одним сайтом месяцами, ты просто не можешь себе позволить плохой код, и его обязательно надо исправлять.
Я хочу поделиться несколькими вещами, на которые я обращаю внимание прежде всего, чтобы составить впечатление о качестве, сопровождаемости и чистоте кода CSS.
Как можно определить, что ваш CSS пованивает? Какие признаки указывают на то, что код неоптимален или что разработчик писал его спустя рукава? На что вы смотрите в первую очередь, чтобы определить, плох или хорош код?
Я подумал, что могу расширить и дополнить ответ Криса исходя из собственного опыта.
Я работаю в BSkyB. Я делаю большие сайты — над последним из них я тружусь уже больше года. Плохой код CSS доставляет мне очень много проблем. Когда занимаешься одним сайтом месяцами, ты просто не можешь себе позволить плохой код, и его обязательно надо исправлять.
Я хочу поделиться несколькими вещами, на которые я обращаю внимание прежде всего, чтобы составить впечатление о качестве, сопровождаемости и чистоте кода CSS.
+145
Ресурсы имеют значение
2 min
23K![](https://habrastorage.org/storage2/dfc/4d1/55d/dfc4d155de6f4d070ee4ea33220d699c.png)
Я уже писал о ресурсе, который отбирает лучшие и бесплатные пользовательские интерфейсы. Сейчас настала очередь более интересеного и потенциального ресурса AgileDesigners , Созданный Гонкогской компанией Webalys, известная разработкой User Interface Design Framework для Illustrator.
AgileDesigners
Является тематическим каталогом лучших ресурсов, которые рекомендуют специалисты со всего мира. Ресуры разбиты на 4 типа:
- Дизайн;
- Разработка;
- Управление;
- Обучение;
В которых вы найдете все что душа пожелает, начиная ресурсами с кисточками, шрифтами, интерфейсами и маркетплейсами, заканчивая интструментами для разработчиков и фреймворками для программистов, а для начинающих и интересующихся, есть раздел, где рекомендуют что почитать, где вдохновляться, какие конференции посетить.
Ресурс позволят собрать из имеющихся, или создать свою собственную подборку ресурсов и делится ею с друзьями, коллегами, читателями.
Методика проекта очень простая: Под каждым ресурсом есть счетчик людей которые им пользуются и рекомендуют. Если Вы нашли ресурс, который посещяете и рекомендуете, просто поставье «Лайк» I USE THIS (поскольку проект еще в бете, лайки пока работают только со страницы ресурса, а не в общей ленте), что поднимет общий рейтинг ресурса. Сейчас Проект находится в стадии «Beta», много подчерпнуть из него врядли удасться, но потенциально пользоваться им будет удобней, нежели вычитывать по одной рекомендации по разным источникам.
PS: Хабрахабр уже добавлен.
+41
+7
Подводные камни JavaScript
6 min
150KМне очень нравится JavaScript и я считаю его мощным и удобным. Но для большинства начинающих JS-программистов, много проблем создаёт недопонимание аспектов языка. Часто конструкции языка ведут себя «нелогично». В данной статье я хочу привести примеры «граблей», на которые я наступил; объяснить поведение языка и дать пару советов.
+95
Phalcon — скомпилированный PHP MVC Framework
7 min
56KTutorial
![](https://habrastorage.org/storage2/ede/b07/dd7/edeb07dd7dacef7135ae417b1ecedb46.png)
Создание скомпилированных MVC фреймворков для PHP не раз приходила на ум кодерам.
Достоинства такого подхода:
- Высокая производительность
- Малая нагрузка файловой системы
- Меньший расход памяти (при строгой типизированности)
- Частичная обработка данных без интерпритации
И само собой не менее явные недостатки:
- Если Вы не знаете C, то Вы полностью зависите от разработчиков
- Проект может в любую секунду сдуться
- В зависимости от архитектуры, часть модулей все равно приходится писать самому, что уменьшает выигрыш
+39
CSS спрайты: основные техники и полезные инструменты
3 min
245KTutorial
Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.
![](https://habrastorage.org/storage2/161/84d/2e5/16184d2e56b35c4fdaa8b4699f80cd51.png)
Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.
![](https://habrastorage.org/storage2/161/84d/2e5/16184d2e56b35c4fdaa8b4699f80cd51.png)
Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.
+66
Арсенал веб-дизайнера
2 min
162KВ интернете существует множество сайтов, помогающих веб-дизайнеру в работе: ресурсы с иконками, плюшками для фотошопа, UI-китами, шрифтами, вдохновляющими работами других дизайнеров и многим другим. В этой статье я постарался собрать самые полезные сайты для веб-дизайнеров.
Behance - работы лучших дизайнеров со всего мира
![behance](http://koulikov.com/wp-content/uploads/2012/11/behance.png)
Большие и популярные сайты
Behance - работы лучших дизайнеров со всего мира
![behance](http://koulikov.com/wp-content/uploads/2012/11/behance.png)
+85
Как преуспеть со своим мобильным приложением
16 min
36KRecovery Mode
Translation
Большинство приложений провальны. Эта жестокая реальность приводит многих разочарованных разработчиков к заключению, часто подсознательному, что преуспевание в App Store — всё равно, что разбогатеть на «золотой лихорадке»: нужно быть чертовски удачливым.
![image](https://habrastorage.org/getpro/habr/post_images/739/186/6d3/7391866d39501b131e96a4909c1c790f.png)
Идея «удачи» — опасное успокоительное средство, облегчающее боль неудачи. А боль — это хорошая вещь. Она показывает, что что-то идёт не так. Если моё приложение потерпело крах, я хочу знать почему. Вместо того, чтобы обвинять мироздание, почему бы не посмотреть, что ребята из tap tap tap и Tapbots делают для того, чтобы снова и снова достигать успеха.
Несмотря на то, что безупречное следование этой формуле невозможно, работа в этом направлении резко увеличит ваши шансы на успех. Эти принципы выработаны для iOS, но многие из них могут быть применены и для других платформ.
![image](https://habrastorage.org/getpro/habr/post_images/739/186/6d3/7391866d39501b131e96a4909c1c790f.png)
Идея «удачи» — опасное успокоительное средство, облегчающее боль неудачи. А боль — это хорошая вещь. Она показывает, что что-то идёт не так. Если моё приложение потерпело крах, я хочу знать почему. Вместо того, чтобы обвинять мироздание, почему бы не посмотреть, что ребята из tap tap tap и Tapbots делают для того, чтобы снова и снова достигать успеха.
Несмотря на то, что безупречное следование этой формуле невозможно, работа в этом направлении резко увеличит ваши шансы на успех. Эти принципы выработаны для iOS, но многие из них могут быть применены и для других платформ.
+43
Как развернуть несколько версий сайтов на одном инстансе YII
10 min
16KВ этой статье мы расскажем, каким образом мы организовали работу наших сайтов в одном проекте на фреймворке yii. В первой части приведем немного теории о том, в каких случаях такое может потребоваться и что для этого нужно. А во второй части приступим к технической реализации.
Многие компании поддерживают работу нескольких сайтов для продвижения своих товаров на разных рынках. Так делаем и мы. У нас есть сайты для русского, американского, европейского и других рынков, отдельные сайты для mobile-устройств, сайты партнерских программ, которые также различны для разных стран. В разработке мы используем фреймворк yii, на который мы в прошлом году перевели наш главный сайт Alawar.ru, а в этом году также Alawar.com, Alawar.pl и сайты iOS-устройств. Одна из особенностей деплоймента наших сайтов на yii заключается в том, что все они работают на одном инстансе этого замечательного фреймворка.
Проблемы в решении этой задачи нет, мы рассмотрим одну конкретную реализацию.
Часть 1
Введение
Многие компании поддерживают работу нескольких сайтов для продвижения своих товаров на разных рынках. Так делаем и мы. У нас есть сайты для русского, американского, европейского и других рынков, отдельные сайты для mobile-устройств, сайты партнерских программ, которые также различны для разных стран. В разработке мы используем фреймворк yii, на который мы в прошлом году перевели наш главный сайт Alawar.ru, а в этом году также Alawar.com, Alawar.pl и сайты iOS-устройств. Одна из особенностей деплоймента наших сайтов на yii заключается в том, что все они работают на одном инстансе этого замечательного фреймворка.
Проблемы в решении этой задачи нет, мы рассмотрим одну конкретную реализацию.
+20
Работаем с SteamWorks. Часть 1
3 min
40K![](https://partner.steamgames.com/public/images/logo_steamworks.gif)
+18
Верстка рассылок — что мы имеем?
7 min
64KTutorial
![](https://habrastorage.org/storage2/e5e/3bd/148/e5e3bd1481cce36b0388a4089c3ef3ea.jpg)
Изображение честно позаимствовано с Dribbble.com
Прошло немногим менее два года с момента публикации моего первого топика по теме. Что за это время произошло? Mail.ru, Rambler, Yahoo и Яндекс дружно перелопатили свои почтовые интерфейсы, и как следствие — парсеры писем, что доставило приятных эмоций, т.к. было исправлено много противных багов. Gmail стал поддерживать фоновые изображения. Ну а благодаря развитию рынка мобильных платформ к нам на помощь приходят media queries.
Смысл поста — подытожить методику верстки писем под сегодняшние реалии, при этом не забывая про ископаемые клиенты.
И да, в посте картинок почти нет. За картинками прошу в обзоры css3 фич.
На данный момент занимаюсь версткой писем, скорей как хобби, поэтому времени на тестирование opera mail, sparrow и прочих «вроде как популярных» клиентов не было. Речь пойдет о следующих:
— Все версии MS Outlook
— Mail.ru
— Rambler почта (в новом интерфейсе не исключены баги)
— Яндекс почта
— Gmail
— Yahoo!
— Thunderbird начиная с версии 2.0
— Hotmail
— Windows Live Mail
— Apple Mail начиная с третьей версии
— AOL Mail
— Lotus Notes 8-8.5.
— theBat! дотошно не тестировал, но и нареканий особенно не было
+81
Продуктивное использование PHPStorm
7 min
326KВ процессе использования IDE иногда случайно, иногда специально находятся полезные фишки, сочетания клавиш и прочие заложенные разработчиками приятные штуки, которые никогда не оседают в памяти без регулярного их использования и всячески ускользают при чтении мануалов.
Не претендуя на библию или «настольную статью программиста» я хочу поделиться полезными находками в моей любимой IDE, не скатываясь в тупую копипасту мануалов и скучных списков хоткеев, только то, что я сам использую постоянно и над чем удивляются коллеги: «о! а так можно?»
Не претендуя на библию или «настольную статью программиста» я хочу поделиться полезными находками в моей любимой IDE, не скатываясь в тупую копипасту мануалов и скучных списков хоткеев, только то, что я сам использую постоянно и над чем удивляются коллеги: «о! а так можно?»
+114
Использование Media Queries в Sass 3.2
4 min
63KС выходом Sass 3.2 начал продвигаться в массы путь объектно-ориентированного CSS (OOCSS), принося с собой принцип DRY и программистское мышление. Media queries и OOCSS стали жизненно важны для современной фронтенд разработки.
![](https://habrastorage.org/storage2/825/884/65a/82588465a8833e4f84089bcd76230dfc.jpg)
![](https://habrastorage.org/storage2/825/884/65a/82588465a8833e4f84089bcd76230dfc.jpg)
+30
Сравнение адаптивных CSS фреймфорков: Bootstrap, Foundation и Skeleton
1 min
105K![](https://habrastorage.org/storage2/01d/bc0/513/01dbc051334924dfd43c4bc3e4b50b52.png)
Недавно Brian Haveri в блоге vermilion.com сделал отличное наглядное сравнение популярных CSS-фреймворков (статья), которые можно использовать для разработки адаптивных сайтов.
За последний год мне удалось поработать со всеми этими фреймворками: Bootstrap, Foundation и Skeleton, и могу сказать, что в свое время такая табличка сохранила бы кучу времени. Поэтому я перевел ее на русский язык, добавив немного своих комментариев. Надеюсь будет полезно хабровчанам.
+67
Подборка инструментов для эффективной frontend разработки
3 min
101KВ эту прекрасную пятницу осмелюсь предложить хабрасообществую небольшую подборку приложений, предназначенных для увеличения продуктивности во время работы с фронтэндом. Если ваш любимый апп здесь не представлен — добро пожаловать в комментарии!
Form Builder
![image](https://habrastorage.org/getpro/habr/post_images/24d/835/ee6/24d835ee6fcc65455422e32a3030f749.jpg)
Этот прекрасный генератор форм поможет вам в создании красивейших CSS логин-боксов и прочих input вещей, при минимальных временных затратах. Помимо форм на сайте этого проекта можно создавать и другие не менее красивые CSS элементы, в том числе кнопки и ленты.
Form Builder
![image](https://habrastorage.org/getpro/habr/post_images/24d/835/ee6/24d835ee6fcc65455422e32a3030f749.jpg)
Этот прекрасный генератор форм поможет вам в создании красивейших CSS логин-боксов и прочих input вещей, при минимальных временных затратах. Помимо форм на сайте этого проекта можно создавать и другие не менее красивые CSS элементы, в том числе кнопки и ленты.
+190
Подборка полезного для любителей Twitter Bootstrap
2 min
250KВ подборке сервисы, плагины, темы и другие полезности, облегчающие работу с Twitter Bootstrap.
BootSwatchr — быстрая стилизация Twitter Bootstrap.
![](https://habrastorage.org/storage2/25b/79e/63c/25b79e63cbec5b1c3a5ab1ec22de7829.png)
Стилизация
BootSwatchr — быстрая стилизация Twitter Bootstrap.
![](https://habrastorage.org/storage2/25b/79e/63c/25b79e63cbec5b1c3a5ab1ec22de7829.png)
+238
Пользовательские запросы к БД в MODx Revolution
5 min
50KДанный топик наверняка будет полезен тем, у кого довольно большие проекты на MODx Revolution, так как с обычными сайтами-визитками достаточно и стандартных методов работы а-ля $modx->getObject(), $modx->getCollection() и т.п. И данные методы по сути своей не просто работа с базой данных, а еще и с объектами MODx.
При работе с большими проектами методы а-ля $modx->getCollection() для нас не лучшее решение по двум причинам:
1. Перерасход ресурсов. Данные методы не просто получают данные из БД, но еще и создают инстанции получаемых объектов. В данном случае получая информацию о 10000 документов, мы получаем 10000 объектов modResource, что не очень круто.
2. Осложняется задача подсчета получаемых записей. Помимо прямых сложностей подсчета еще на уровне запроса, даже если вы получите 10 записей одного и того же документа (к примеру), MODx вернет вам как результат только один объект modResource. И хотя часто такое устроит многих программистов (они получили уникальные объекты и рады), кого-то это не устроит, так как опять же происходит перерасход ресурсов, а по конечному результату сразу и не видно, что запрос не оптимизированный.
К тому же при работе на крупных проектах нам чаще всего нужны не сами объекты, а только информация (записи из базы данных).
Описанные здесь методы работы с БД ставят 2 задачи:
1. Дать бОльшую гибкость в написании запросов к БД.
2. Придерживаться стандартных методов xPDO, то есть избежать чистого SQL, так как чистый SQL по некоторым причинам в фреймворках вообще не кашерно (хотя бы с точки зрения возможной миграции на другой тип БД, смены названий таблиц, префиксов или еще чего-нибудь)
При работе с большими проектами методы а-ля $modx->getCollection() для нас не лучшее решение по двум причинам:
1. Перерасход ресурсов. Данные методы не просто получают данные из БД, но еще и создают инстанции получаемых объектов. В данном случае получая информацию о 10000 документов, мы получаем 10000 объектов modResource, что не очень круто.
2. Осложняется задача подсчета получаемых записей. Помимо прямых сложностей подсчета еще на уровне запроса, даже если вы получите 10 записей одного и того же документа (к примеру), MODx вернет вам как результат только один объект modResource. И хотя часто такое устроит многих программистов (они получили уникальные объекты и рады), кого-то это не устроит, так как опять же происходит перерасход ресурсов, а по конечному результату сразу и не видно, что запрос не оптимизированный.
К тому же при работе на крупных проектах нам чаще всего нужны не сами объекты, а только информация (записи из базы данных).
Описанные здесь методы работы с БД ставят 2 задачи:
1. Дать бОльшую гибкость в написании запросов к БД.
2. Придерживаться стандартных методов xPDO, то есть избежать чистого SQL, так как чистый SQL по некоторым причинам в фреймворках вообще не кашерно (хотя бы с точки зрения возможной миграции на другой тип БД, смены названий таблиц, префиксов или еще чего-нибудь)
+12
Information
- Rating
- Does not participate
- Location
- Москва и Московская обл., Россия
- Registered
- Activity