Добрый день Уважаемые!

В этом посте я хочу поделиться своими личными наблюдениями и выводами в области применения html5 & css3.

Рано утром Хабр «выкатил» своё новое обновление, и я с чистой совестью достаю эту статью из черновиков.
Вчера у меня случился epic fail и этот топик частично, включая строчку об апдейте выше, попал в паблик на пару секунд. За эти секунды топик успело плюсануть несколько человек.
Ещё раз, теперь публично, прошу прощения у администрации!
Совет остальным — НИКОГДА не храните в черновиках информацию вроде этой.

В последнее время в сети Интернет можно найти очень много пособий для «Начинающих хакеров», в которых подробно описываются все основные методы взлома сайтов. Думаете, веб-разработчики стали от этого умнее и предприняли все возможные методы для защиты? Я так не думаю.

В настоящей статье я хочу ещё раз поведать разработчикам о том, как ломают сайты, а чтобы вам не было скучно, я попутно буду ломать Хабр и подробно описывать, как я это делал. Мы рассмотрим такие интересные штучки, как «Активная XSS в профиле», «Бесконечное обнуление кармы», «Публикация топиков со значком 'Из песочницы'», «CSRF через Flash и дыру в Internet Explorer 6» и многое другое.

Все уязвимости уже исправлены. Ну или почти все. Поэтому, если вы найдёте очередную дыру, то пишите на support@habrahabr.ru — миф о том, что эту почту никто не читает всего лишь миф.

Tinyicon это небольшая библиотека для манипуляции с favicon сайта для передачи информации о новых событиях. Для браузеров не поддерживающих canvas счетчик отображается в title страницы.

Друзья, я хочу вам рассказать историю развития проекта president2012.ru. Сайт является лидером по тематике выборов президента России, за 3 месяца его посетило около 2 млн. человек, в пике имел до 20 тыс. посетителей онлайн и более 1 млн. хитов в сутки, задействовано было 3 сервера облака.

Интересных моментов в процессе работы над проектом набралось столько, что держать в себе эти знания я не могу, и хочу поделится с вами. Я понимаю, что многое, о чем я сейчас собираюсь рассказать, уже описано качественнее в специализированных разделах, и ничего нового я не открою. Моя задача скорее в том, чтобы через отдельные нюансы передать ту атмосферу, в которой проходила работа над проектом. А так же в миллионный раз с помощью success story показать таким же как я людям, что всё возможно и всё в их руках.

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

Не так давно, а именно 2011-10-05 вышла новая версия фреймворка connect 2.0. На хабре был замечен пробел, а тут выдалось пару свободных часов. Буду писать сразу про версию 2.0.1 вышедшую 29 февраля. Во второй версии сделали много очень нужных и долгожданных изменений.

Аннотация

В статье я попробую рассказать о том, как на базе Twitter Bootstrap можно очень легко реализовать приятный пользовательский интерфейс небольшого (одностраничного) web-приложения, владея лишь базовыми знаниями html. Сразу предупреждаю, специалистам будет не интересно, речь пойдет о базовом стандартном функционале.

В прошлой статье я начал рассказывать о своём опыте разработки экспериментального WEB-проекта «Что делать?» на Node.JS. Первая часть была обзорной, в ней я постарался раскрыть плюсы и минусы технологии, а также предупредить о проблемах, с которыми, возможно, придётся столкнуться в ходе разработки. В этой статье я подробнее остановлюсь на технических деталях.

Несколько слов о «хабраэффекте»

GCTD — Getting Creative Things Done.

Началось это несколько недель назад. Мне нужно было написать исследовательский отчет, предстояла важная, неоднозначная, трудная задача. В первую неделю я повторял себе, что на данный момент это моя наиважнейшая задача и обращался к ней при первой же возможности. Я постоянно чувствовал вину за то, что недостаточно времени уделяю написанию отчета. В одну из ночей в конце недели я заперся в офисе до 9 утра, уже совсем отчаявшись привести дела в порядок. Результат работы оказался практически бесполезным. У меня получилось 15 страниц беспорядочного текста (исследовательский отчет должен быть максимум 3-5 страниц), и охватить предстояло еще многое. Работа была запутанная и «тонула» в прилагательных.

Иван Гладких и Павел Емельянов сегодня (20 февраля 2012 года) начали свободно (по лицензии OFL 1.1) раздавать шрифт под названием Prosto, разрабатывавшийся в течение последних шести месяцев:



Шрифт раздаётся в архиве (45 Kb RAR, включая лицензию OFL) и предназначен для логотипов, заголовков и презентаций. Начертание единственное (без жирных, тонких и наклонных вариантов).

Содержит буквы латиницы, кириллицы, центральноевропейские, западноевропейские, турецкие, а также буквы языков (народов, стран), соседствующих с Балтийским морем.

Вот обильная презентационная инфографика (≈½ мегабайта), дающая достаточное представление о форме и возможностях нового шрифта:

Компания Apple приглашает новичков начать разработку своих приложений под iOS, и в помощь опубликовала руководство "Start Developing iOS Apps Today", где указаны все необходимые действия на каждом этапе, даются советы по выбору языка программирования, дизайну интерфейса приложения и максимизации прибыли в App Store.



Руководство очень лаконичное, всего несколько строчек на каждой странице, но содержит все необходимые ссылки для более подробного изучения темы. Очевидно, оно предназначено для тех, кто ещё никогда не программировал под iOS.

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

Сначала эта задача показалась мне невыполнимой, но я нашел html2canvas.

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

Я отправился в свое одиночное плавание в океане мировой экономики около 5 лет назад, но безопасный промысел в прибрежной зоне быстро наскучил, меня всегда манил открытый океан, где вдали проплывали огромные лайнеры мировых корпораций и быстрые яхты стартапов.

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

Что такое “API-Centric” Web Application?
Это веб приложение которое большая часть функционала реализуется через API. Например: если вы авторизовываетесь, то вы отправляете свои данные через функции API, а API уже возвращает результат success или же ошибку. Другой характеристикой API является то что API не зависит от состояния пользователя.

Зачем это нужно ?
Как веб разработчики мы видим, что технологии развиваются каждый день. И все знают, что люди используют не только браузеры на pc, но и android, apple, windows phone и прочие гаджеты для доступа в интернет к своим любимым сайтам.

Так причём же тут API ?
Одним из преимуществ создания api-centric приложения это помощь в построении функциональности, которая может быть использована на любом другом девайсе, будь это браузер, мобильник, планшет или даже десктопное приложение. Все, что нужно сделать, это создать API, таким образом, чтобы все эти устройства могли взаимодействовать с ним.

Расскажу о личном опыте выпуска iPhone-приложения Pocket Lists, продажи которого за первые два с половиной месяца составили $12500 долларов США. Категория приложения: Productivity.



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

Первый месяц после выпуска

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

Чрезвычайно важно понимать, как работают JavaScript таймеры. Зачастую их поведение не совпадает с нашим интуитивным восприятием многопоточности, и это связано с тем, что в действительности они выполняются в одном потоке. Давайте рассмотрим четыре функции, с помощью которых мы можем управлять таймерами:

• var id = setTimeout(fn, delay); — Создает простой таймер, который вызовет заданную функцию после заданной задержки. Функция возвращает уникальный ID, с помощью которого таймер может быть приостановлен.
• var id = setInterval(fn, delay); — Похоже на setTimeout, но непрерывно вызывает функцию с заданным интервалом (пока не будет остановлена).
• clearInterval(id);, clearTimeout(id); — Принимает таймер ID (возвращаемый одной из функций, описанных выше) и останавливает выполнение callback'a.

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

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

1. Отображайте нажатия кнопок и кнопкоподобных ссылок

Мой излюбленный совет. Когда стиль кнопки задаётся в CSS, или когда для отображения необычной кнопки используется рисунок (либо как фон, либо как элемент <img />), то кнопка не реагирует на нажатие во всех или в некоторых браузерах (зависит от ситуации). Вот какой простой уловкою вы можете дать знать посетителю сайта, что он и впрямь нажал на нечто нажимаемое:

.mybutton:active {
   position: relative;
   top: 1px;
   left: 1px;
}

Этим кодом кнопка смещается на 1 пиксел направо и на 1 пиксел вниз, когда её нажимают. Испробуйте: выглядит весьма убедительно.

Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если где-то ещё на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них.

2. Плавные переходы (CSS3 transitions)

Что удивительного в этой картинке?



На самом деле она уникальна. Матрица размером 17 х 17 раскрашена четырьмя цветами, при этом на ней нельзя построить ни единого (!) прямоугольника, чтобы все углы его были одного цвета. Имеются в виду прямоугольники любого размера с вершинами в разных точках и рёбрами, параллельными осям x и y.

Каждый программист оказывается в ситуации, когда ему необходимо изучить какую-либо новую технологию или же фреймворк. Если в вашем ToDo листе в графе «Изучить» есть такой компонент, как jQuery, то данный курс для вас.
Курс состоит из 30 видео уроков, длительность каждого из них составляет 15 минут. Чтобы зарегистрироваться на курсе, вам необходимо оставить свой e-mail на странице Learn jQuery in 30 days.

На данный момент в курсе присутствуют следующие темы:

1. DOM Traversal
2. Events
3. DOM Manipulation
4. Effects
5. AJAX
6. Plugin Development

Присоединитесь к 30942 студентам, которые хотят изучить jQuery.

Как подсказывает alphard, курс можно скачать с rutracker'а.

Приветствую уважаемое сообщество! Как многие успели заметить, прошлый год давно кончился — успешно??? Чтобы с уверенностью судить об этом каждому лично для себя, полезно обзавестись "системой отчетности". Или, по выражению классика, PAS. В более ранних статьях того же автора приводятся обоснование, пример использования и обсуждение практик. В частности, высказана критика в адрес большинства программных инструментов для планирования (так называемый "hi-tech" самоменеджмента). Основная претензия — нехватка гибкости. В этом, преимущество за "mid-tech" и "low-tech" средствами (notepad, карандаш и бумага, пластиковые файлы и байндеры на кольцах — продолжите сами...).