Во время работы над последним проектом накопилось несколько интересных CSS-трюков, о которых хочу рассказать. Хотя, возможно, это уже придумано до нас и все об этом уже знают. В примерах используется LESS, а не чистый CSS.

Событие автоподстановки в инпут поля

Проблема: узнать, что пользователь воспользовался функцией автоподстановки. Задача была в том, чтобы подсвечивать кнопку Login, если в полях e-mail и password введено что-либо. Проблема в том, что если эти поля заполняются автоподстановкой из ключницы браузера, то событие change на инпутах не выстреливает.

Решение: использовать псевдокласс :valid. Он срабатывает у инпута, если в нем есть контент, который удовлетворяет типу инпута (text, e-mail) и если у этого инпута стоит атрибут required. Правда решение не работает в IE, но нам не требуется поддержка этого браузера.

<input required="required" class="email-input" type="email" />
<input required="required" class="password-input" type="password"/>
<div class="go">Login</div>

.email-input:valid ~  .password-input:valid ~ .go {
	//стили для активной кнопки Login
}

Добрый день, дорогие хабражители.

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

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

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

Различные веб-приложения позволяют пользователям загружать файлы. Форумы позволяют пользователям загружать «аватары». Фотогалереи позволяют загружать фотографии. Социальные сети предоставляют возможности по загрузке изображений, видео, и т.д. Блоги позволяют загружать опять же аватарки и/или изображения.

Часто загрузка файлов без обеспечения надлежащего контроля безопасности приводит к образованию уязвимостей, которые, как показывает практика, стали настоящей проблемой в веб-приложениях на PHP.

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

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

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

В субботу на прошлой неделе «дело было вечером, делать было нечего», и мы с хабраюзером sourcerer разговаривали не понятно о чём. И почему-то речь зашла речь о задаче обратной к задаче построения графика функции по её выражению. То есть, например, у нас есть выражение y(x) = (cos^0,5x ⋅ cos 200x + |x|^0,5 − 0,7)(4 − x²)^0,01. График такой функции чем-то напоминает сердечко. Но нам был интересен обратный вопрос, как, имея, например, изображение сердечка, получить выражение для функции, графиком которой будет это самое сердечко.

Какие-нибудь ряды Фурье вспоминать не хотелось, а хотелось чего-то простого и красивого. Мы начали вспоминать известные нам результаты, связанные с этим вопросом. В результате получилась программка, которая по изображению генерирует ломаную линию, чем-то напоминающую исходное изображение. На примере котёнка по имени Гав это выглядит примерно так (смотреть лучше издалека):



Если интересно как такое сделать, а также узнать про формулу конопли, формулу, график которой является этой же формулой, то добро пожаловать под хабракат. (Будет много картинок.)

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

Как развивалось помешательство, я решил описать в статье. Получилось длинно, но может кому-нибудь будет интересно. Думаю, статья ориентирована на тех, кто ещё не практиковался в робототехнике.

Вот что получилось в результате. Видео винтажное, снималось владельцем iPhone, а они ведь затейники, ну вы знаете. Звук я оставил закадровый сознательно, чтоб всё жужжало как взаправду.

Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию 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. Короткая запись для события готовности документа

Продолжая цикл статей «CSS3 сейчас!» (Первая статья — CSS Transitions), хотелось бы рассказать об анимации средствами CSS3, а конкретно — @keyframe и animate. Так же, в статье мы затронем свойства opacity и цветовую модель rgba(), кроссбраузерное использование border-radius, box-shadow и градиентов.

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

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

Так как серверные PHP-скрипты выполняются, бывает, много раз в секунду, скорость загрузки конфигов — достаточно важный параметр. Хотя ему, порой, уделяется не очень много внимания. Давайте сравним различные варианты хранения настроек для PHP-скриптов с точки зрения скорости их работы. Ну и коснемся вкратце их удобства.

Храните мелкие картинки, которые нельзя засунуть в спрайты, в data:image base64 в CSS — это экономит кучу запросов к вебсерверу.

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

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?

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

Доброго времени суток, хабравчане! В этой статье я подробно расскажу вам о трансформации и вращении в javascripte. Матрица трансформаций, на первый взгляд, штука непонятная и многие ею пользуются даже не осознавая, что она делает на самом деле, используя готовые значения из интернета. На MDC об этом рассказано скудненько, а информацию в английской Википедии тяжело назвать общедоступной. Постараемся разобраться в этом вместе.

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

На первый взгляд это обычные одноцветные иконки, но если призумить — их качество не ухудшится. Очевидный профит таких иконок: с ними можно свободно экспериментировать и не переживать за высоту и ширину, компактный вид, а не куча файлов в папке icons, ну и наверное маленький размер, хотя с этим поспорить можно. Есть некоторые ограничители в цвете, возможен один цвет либо градиент (но думаю с конвертером нарисованного вектора в js код, возможно и больше цветов)

Смотреть иконки

Если вы хотите использовать эти иконки или создавать свои на подобной основе, кликайте по иконке — внизу появится код выбранной иконки, он вставляется в:

paper.path(<код иконки>).attr({fill: "#000", stroke: "none"});

Поддержку иконок на себя берет Raphaël JS Lib

Источник

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

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

Сейчас мы поддерживаем четыре вида микроформатов:

• hCard — формат разметки контактной информации (адресов, телефонов и т.д.);
• hRecipe — формат для описания кулинарных рецептов;
• hReview —  формат разметки отзывов;
• hProduct —  формат разметки товаров; сейчас используется в партнерской программе «Отзывы об автомобилях» для разметки информации об автомобилях.

Также мы поддерживаем microdata – международный стандарт семантической разметки, позволяющий с помощью атрибутов описать смысл информации, содержащейся в HTML-коде страниц. Такие атрибуты позволяют роботам-обработчикам находить и извлекать нужные данные. В настоящий момент в Яндексе микроданные  используются для разметки словарных и энциклопедических статей, терминов и определений.Подробнее узнать о том, какие данные можно передать Яндексу, смотрите на странице «Передача данных о содержимом сайта». А о микроформатах и микроданных читайте в Помощи.

Также мы рассказывали о семантической разметке и использовании микроформатов на июльском Яндекс.Субботнике. Послушать выступление и посмотреть текст доклада вы можете здесь.

Привет!

В начале этого года мы писали о том, какие изменения ждут предпринимателей без сотрудников в текущем году. С тех пор Мое Дело подросло и готово рассказать уже про весь сектор малого бизнеса.

Итак, в 2011 году нас ждет 4 больших изменения:

1) Повышаются фиксированные взносы для ИП с 12 до 16 тысяч в год
2) Повышаются взносы в фонды с зарплат сотрудников с 14 до 34%
3) Меняется отчетность в ПФР за себя и за сотрудников
4) Отчитываться в ПФР нужно будет чаще

А вот верхний предел годовой зарплаты, с которой начисляются взносы, остался без изменения и по-прежнему составляет 415 тысяч рублей в год. Говоря простыми словами, топ-менеджер Газпрома с зарплатой в 500 тысяч рублей в месяц и программист с зарплатой в 35 тысяч рублей принесут в бюджет ПФР одинаковую сумму взносов — 141 тысячу рублей.

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

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

На протяжении уже 5-6 лет я использую только Firefox и никогда не думал, что захочу выбрать что-то другое. Firefox — отличный браузер, а делают его таковым все те тысячи расширений, которые каждый может скачать бесплатно. Можно найти расширение для чего угодно. Есть лишь один существенный недостаток — Firefox значительно медленнее, чем Chrome и сжирает больше ресурсов компьютера, чем остальные браузеры.

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

В этой статье я попытаюсь ответить на вопрос — могут ли дизайнеры, веб-разработчики, SMO-шники, SEO-оптимизаторы безболезненно перейти на Chrome. Есть ли расширения, которые могут послужить равноценной заменой на Хроме таким вещам как: Firebug, Webdeveloper, Color Picker, SEO для Firefox, Alexa Ranks, средства для отладки?