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

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

Всем привет! В мае я запустил сервис управления доменами 2ns.info. Этот проект создан для людей, которым нужен «всё в одном» инструмент работы со своими доменами и сайтами, включая управление ДНС, регистрацию и парковку доменов и так далее — больше не нужно иметь для этого регистрацию на разных сервисах. В июне мой друг andorro написал свой обзор 2ns.info. Пост был положительно встречен хабрааудиторией, на сайте было много регистраций и стало ясно, что проект нужный. С тех пор прошло достаточно много времени, поэтому я бы хотел рассказать что было сделано.



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

Из основных изменений:

• Появилась регистрация доменов
• Появилась возможность отправки SMS с подменой номера
• Есть возможность приобретать лицензии на программное обеспечение
• Сайт теперь работает только через SSL

И еще много разных плюшек. Подробный обзор всех нововведений под катом.

В этой статье я расскажу об одной необычной проблеме, с которой мне однажды пришлось столкнуться по роду своей деятельности. Внимание: эта статья не для начинающих. Предполагается, что читатель уже имеет опыт веб-программирования и знаком с языком PHP, библиотекой CURL и основами HTTP.

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

Жил да был один проект. И был у него интерфейс для выбора неких сущностей, живущих в древовидной структуре.

Изначально он выглядел как обычные выпадающие менюшки со скроллингом. Однако через некоторое время сущностей стало много и работа с ними преобрела характер пытки. Пользователи попросили сделать хотя бы саджест.

Просто саджест делать было скучно, поэтому я сделал вот такую штуковину, которая немного напоминает по внешнему виду маковский Файндер в мультиколоночном режиме. Отсюда и название — b-finder.

Изначально, «Файндер» был заточен только под один проект. Но народу эта штука понравилась и меня неоднократно спрашивали, можно ли его использовать где-нибудь еще. Посему я решил «отвязать» его от проекта и сделать jQuery-плагином для пущей совместимости.

Выход версии 0.5 для меня было нечто большим, чем добавление страницы активности и ленты топиков из подписанных блогов. В новой версии реализованы ORM и ActiveRecord. Вместе они дают мощнейший инструментарий для разработчика, избавляя того от кучи однотипного кода, который приходилось писать каждый раз при разработке плагина. Тот-же форум, о котором будет идти речь в статье, после обновления похудел на 2177 строк кода. В этой статье я хочу углубиться в ORM и AR на примере создания плагина для LiveStreet.

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

В этом уроке будет рассказано как упаковать дополнение в транспортный пакет, который затем можно будет легко установить через «Управление пакетами». Упаковывать будем всё, что относится к, разработанному нами, дополнению: сниппет; файлы из core/components/ и assets/components/; действия; пункт в меню и пространство имен нашей CMP (страницы компонента); значения по умолчанию для сниппета с поддержкой интернационализации (i18n). А также добавим резольвер, который создаст пользовательские таблицы в БД.

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

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

Недавно делая сайт на Yii обнаружили такую вот дыру в загрузке файлов на сервер с помощью CMultiFileUpload (за что отдельное спасибо Mx21): есть возможность взять файл с произвольным расширением, дописать в конец имени что-то вроде .jpg и потом залить на сервер виджетом CMultiFileUpload. Даже не смотря на то, что свойство 'accept' имеет, к примеру, значения 'jpeg|jpg|gif|png', т.е. не должно аплоадить ничего кроме такого рода картинок, происходило следующее: файл без проблем закачивался на сервер, причем .jpg в конечном файле обрезалось и на сервере оказывался исходный файл с тем расширением какое оно было до того как мы его переименовали.
Используемая нами версия фреймворка 1.1.8.

Лечится следующим образом:
В файле /framework/web/js/jquery.multifile.js нужно исправить строки 222-223:

          if(MultiFile.accept && v && !v.match(MultiFile.rxAccept))//{
            ERROR = MultiFile.STRING.denied.replace('$ext', String(v.match(/\.\w{1,4}$/gi)));

вернее заменить их на следующий код:

			var str=this.value;
			var pattern='\.';
			var pos = str.indexOf(pattern);
			for (var count = 0; pos != -1; count++)
				pos = str.indexOf(pattern, pos + pattern.length);
          
          
          if((MultiFile.accept && v && !v.match(MultiFile.rxAccept)) || count>1)//{
            ERROR = MultiFile.STRING.denied.replace('$ext', String(v.match(/\.\w{1,4}$/gi)));

Т.е. добавили проверку на количество точек в имени загружаемого файла, если более одной точки получаем сообщение об ошибке «Invalid file type».

Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.

Далее все написано от имени автора оригинальной статьи.

Введение

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

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

Я называю себя «среднестатистическим» пользователем jQuery и я думаю, что всем остальным будет интересно почитать и что-нибудь почерпнуть из «фишек», «трюков» и техник, которые я освоил за последний год. Статья получилась куда длиннее, чем я предполагал изначально, так что в самом начале я привел «содержание» для более удобной навигации и возможности при желании пропустить не интересующие моменты.

Содержание

1. Загружайте фреймворк с Google Code
2. Используйте «шпаргалку» (cheat sheet)
3. Соединяйте все ваши скрипты и уменьшайте размер файла
4. Используйте возможности Firebug для ведения логов
5. Минимизируйте операции выборки в пользу кэширования
6. Сводите манипуляции с DOM-деревом к минимуму
7. Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
8. Используйте «id» вместо классов, где это возможно
9. Задайте контекст своим селекторам
10. Используйте последовательности вызовов методов с умом
11. Научитесь правильно использовать анимацию
12. Научитесь назначать и делегировать события
13. Используйте классы для сохранения состояния
14. Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
15. Пишите собственные селекторы
16. Подготавливайте HTML и модифицируйте его, когда страница загружена
17. Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
18. Используйте служебные функции jQuery
19. Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
20. Как узнать что картинки загружены?
21. Всегда используйте последнюю версию
22. Как проверить, что элемент существует?
23. Добавляйте класс «JS» в элемент «html»
24. Возвращайте «false» для отмены поведения по-умолчанию
25. Короткая запись для события готовности документа

Всем привет! Сегодня я расскажу Вам, как создавать динамически такую картинку, как выше с использованием PHP. Все наверное задумывались, как такое реализовать. Мне кажется, если очень хорошо подумать, то нам на ум придет новая технология, которая сейчас внедряется, особенно с приходом HTML5. Это, как наверное многие уже догадались — SVG. Для тех, кто не знает, по сути, это — всего-лишь обыкновенная картинка, но записанная в виде подобия XML. Картинку можно получить двумя способами: нарисовать самому например в Inkscape или скачать уже готовую. Я воспользуюсь вторым методом, так как ни времени, ни художественного таланта у меня нет. Я буду делать на примере личных сообщений/почты, поэтому мне понадобяться две картинки, первая — сообщений нет, вторая — мы имеем некоторое количество новых сообщений. Скачаем картинки вот тут. old.svg — сообщений нет, new.svg сообщение есть.

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

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

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

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

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

Как же утомителен процесс инициализации UI при разработке android-приложений. Раз за разом приходится писать горы шаблонного кода: findViewbyId, setOnClickListener, getResources().getDrawable, … Возникает естественное желание переложить эту работу на плечи AOP. Беглый поиск готовых решений, адаптированных под android, навел разве что на RoboGuice, о котором уже упоминалось на хабре. Однако библиотека имеет значительный размер (~0.5 mb), что для многих приложений недопустимо много, и к тому же требует наследования ваших классов application и activity от RoboApplication и RoboActivity, чего не всегда хочется делать. Потому и появился Aibolit, легкая (~40kb), простая в использовании и функциональная библиотека, использующая dependency injection для инициализации UI на android.

В прошлый раз мы рассказали о слоистой архитектуре во фреймворке yii, а сейчас хотим поделиться кодом.

В своей работе мы активно используем open source-решения и поэтому решили поделиться собственными разработками, которые могут быть полезны сообществу. Сегодня это расширения для, наверное, лучшего в мире PHP-фреймворка yii:

• DGSphinxSearch
• AMQP(RabbitMQ)
• MQLogRouter
• DGPinbaLogRoute
• DGApiClient

Рассмотрим эти расширения по порядку.

По моему скромному мнению, CMS Drupal наиболее близко подошла к понятию «идеальная CMS». Очень многое в Drupal сделано для облегчения жизни разработчиков. В этой статье мне хочется рассказать об основных моментах, которые мне нравятся в Drupal. Материал рассчитан на пользователей, мало знакомых с Drupal. Иногда мне придется говорить очень простые вещи, но именно из-за этих простых мелочей и складывается очень приятное впечатление от Drupal.

Сразу стоит предупредить, что Drupal это не готовое решение. После установки вы не получите настроенную и работающую социальную сеть, интернет магазин и т.д. В Drupal действует принцип «предоставление возможностей по мере необходимости». Именно поэтому на Drupal не делают сателиты и ГС в промышленном масштабе и, возможно, именно поэтому количество рабочих сайтов на Drupal уступает таким CMS как Joomla и Wordpress, любимым CMS строителей сателитов и ГС.

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

Мне давно хотелось попробовать что-нибудь новенькое, и вот, когда на работе предложили написать примеры использования API Яндекс.Денег на разных языках, я с удовольствием принял это предложение-challenge. Так как чаще всего подобный функционал используют в приложениях на различных хостингах, то было принято волевое решение первым делом попробовать написать сие на PHP. Причем API до этого я даже не видел; более того, никакого опыта работы с PHP, кроме как лабораторной в ВУЗе, у меня не было. Дело обещало быть интересным.

На Хабре уже опубликована хорошая статья в которой описано совместное использование ProgressDialog и AsyncTask, здесь я опишу, как добиться похожего функционала но на фрагментах, точнее используя DialogFragment и AsyncTaskLoader.

Итак, цель:

• отображать ProgressDialog при выполнении длительной операции, текст сообщения которого может информировать о ходе выполнения задачи;
• корректная поддержка смены ориентации приложением.

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

Выглядело это примерно так:



html

<div class="large_button"><br>  <span class="buttons submit_v2-button clickable"><br>    <i class="left left2"></i><br>    <i class="body"><br>      <b>В архив</b><br>      <i class="end"><br>        <i></i><br>      </i><br>    </i><br>  </span><br></div>

Видно, что запутаться в таком коде проще простого, тем паче, что вариантов кнопок на проекте накопилось не менее 30. Попытка создать такую кнопку на серверной стороне вызывала негодование у коллег «пехапистов».

Поэтому моей негласной задачей стало максимальное упрощение кода.

В чём проблема?

Бывали ли у вас случаи, когда во время долгого заполнения нудной формы или написания красноречивого и пылкого комментария *внезапно* крашился браузер? Или вы закрывали вкладку, в которой работаете, или отключалось электропитание (а ИБП, по известному закону, нет)? Если нет — то вам повезло, но страховки от подобных происшествий ни у кого нет.

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

Многие школьники осенью пишут сочинение на тему «Как я провёл лето». Вот и я, хоть давно не школьник, решил написать статью из серии «Как это было». Из нее узнаете как мы, организовав вместе с друзьями и родственниками компанию DAFGroup и заработали миллион на продаже своего программного обеспечения.

Случилось так, что одним холодным мартовским утром 2008 года, я совершил свою первую сделку на бирже ММВБ. Она оказалась удачной, и мой счёт увеличился на 20 рублей буквально за 5 минут. Ничего себе, сказал я,

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

Давайте взглянем на пример. Я специально не буду брать какой-нибудь страшный экземпляр «дизайнерской» работы, а возьму в качестве примера форму регистрации со стандартными полями ввода от Микрософта: