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

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

Сегодня W3C обнародовал логотип HTML5. Логотип доступен в соответствии с лицензией «Creative Commons Attribution 3.0» поэтому он может быть адаптирован дизайнерами под свой проект.

Кроме главного логотипа так же есть логотипы сопутствующих технологий:


Подробнее Вы сможете ознакомиться на странице логотипов.

Там же можно сгенерировать для своего проекта кнопочку, которая как бы намекает на качество сайта (ниже полный набор):


Конечно же сама страница сверстана на HTML5, если кто-то из верстальщиков не курил эту тему — пора начинать, будущее рядом.

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

Один мой друг однажды сказал: „Я смотрю на код восемь часов в день, и я хочу, чтобы смотреть было приятно“. Он имел в виду качество кода, и здесь все понятно (или, наоборот, ничего не понятно). Но что с самим изображением? Все ли с ним хорошо? Можно ли сделать лучше? Это вопросы, которые совсем недавно пришли мне в голову, и я решил озаботиться ими серьезно. Оказалось, что это поле непаханое для улучшений.

jQuery очень мощная библиотека, но некоторые его богатые возможности неясны, если вы не изучали исходный код jQuery и не читали книгу jQuery Pocket Reference (автор пишет my new book), вы можете не знать о них. В этой статье представлены отрывки из этой книги — 5 полезных вещей о которых вы могли не знать.

1) Вы вы не обязаны использовать $(document).ready() Если вы хотите выполнить функцию, когда документ готов для манипулированию просто передайте её в $()

2) Вы, наверное, уже знаете, что вы можете передать тэг в функцию $() для создания элемента этого типа и, что вы можете передать атрибуты объекта (в качестве второго аргумента), которые будут установлены на созданный элемент. Вторым аргументом может быть любое свойство, который вы передаете в метод attr(). Кроме того, если какое-либо свойство имеет тоже самое имя, что и событие (click, mouseover), то значение свойства используется в качестве функции обработчика данного события.
Следующий код, например, создает новый элемент, устанавливает три HTML атрибута и регистрирует функцию обработчика события(click) на нем:

var image = $("<img>", {
                  src: image_url,
                  alt: image_description,
                  className: "translucent_image",
                  click: function() {$(this).css("opacity", "50%");}
               });

CANVAS шаг за шагом:

1. Основы
2. Изображения
3. Понг
4. Пятнашки

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.

Так получилось, что в течение нескольких месяцев я занимался разработкой букмарклетов, сделав их около десятка. Использовал как jQuery, так и native JavaScript. О том, с какими подводными камнями я столкнулся, что нового узнал и нашел — об этом пойдет речь под катом.

Поучительная история о техниках оптимизации наглядно.

Техзадание

Объявим в рамках топика небольшой конкурс по архитектурно-ориентированной оптимизации программного обеспечения.
Вкратце, код состоит из пачки функций, производящих невнятные на первый взгляд манипуляции с исходными данными, и примочки-драйвера, который n раз запускает неоптимизированную версию, затем оптимизированную, сравнивает насчитанные циферки, и, в случае их совпадения, выдает отношение времени выполнения. Вот так:

Executing original code… done
Executing optimized code… done
Checking results… PASSED
Number of runs: 3
Original code average time: 11.954537 sec.
Optimized code average time: 1.052994 sec.
Speedup: 11.35

Разрешено использовать любые техники оптимизации, компилятор GCC с любыми опциями, и, скажем, сервер с двумя четырехъядерными процессорами Intel Xeon E5420 2.5 GHz.
Вот, кстати, код:

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

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

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

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

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

Источник

Мне для одного проекта понадобилось создать базу географических наименований России. Из всех источников подобной информации наиболее авторитетными мне показались 2:

• Эталонный справочник индексов объектов почтовой связи.
• И база окато которую можно взять с сайта главного научно-исследовательского вычислительного центра федеральной налоговой службы

Последняя показалась мне более простой, полной и менее избыточной, хотя наименований населенных пунктов там в четыре раза больше. Я выбрал ОКАТО, поскольку нашел хотя бы какое-то описание базы на википедии, а в почтовых индексах присутствовала совсем непонятная информация. В этой базе предстояло отсеять ненужные административные единицы от требуемых мне географических.