В этой статье я покажу один из вариантов создания градиента для границ у любого блока с помощью CSS3.

Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target. Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1.

Ура! Еще один, свеженький… чем он лучше других?



а) Новенький! Всегда, кто берется что-то делать, то обычно смотрит: есть ли в этом смысл, и если есть — делает это.
б) Красивенький! Можно не точить, а ставить из коробки. Основан на Bootstrap'е и иконках Glyphicons
в) Само собой мультиселект файлов, Drag&drop, прогрессбар и превьюшки фотографий.
г) Поддержка кросдоменного соединения, докачка и ресайз фоток на стороне клиента.
д) Готов для любой платформы сервера (PHP, Python, Ruby on Rails, Java, Node.js, и тому подобное.)

blueimp.github.com/jQuery-File-Upload

Поддержка браузеров:

github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

Уважаемые коллеги, которые сталкивались с классификатором адресов Российской Федерации КЛАДР знают, насколько это странная база (в первую очередь своей структурой), а также большим количеством неточностей в самих данных.

В 2011 году за дело взялась ФНС, которая начала разрабатывать новую единую базу Федеральной информационной адресной системы (ФИАС) для того, что бы покончить с адресным бардаком, царящим среди различных ведомств.

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

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

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

Немного об истории решения этого вопроса.

Самой первой популярной техникой была так называемая FIR (она же — Fahrner Image Replacement), которая появилась в 2003-м году. Она проста как пень, и многие начинающие верстальщики ее до сих пор используют:

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

Как-то давно я уже писал об этом, но немного скудно и сумбурно. После я решил расширить список инструментов в обзоре, добавить статье структуры, учесть критику (большое спасибо Lefty за советы) и отправил ее на конкурс на СекЛаб (и опубликовал ссылку, но по всем понятным причинам ее никто не увидел). Конкурс закончен, результаты объявили и я с чистой совестью могу ее (статью) опубликовать на Хабре.

Бесплатные инструменты пентестера веб-приложений

В данной статье я расскажу о наиболее популярных инструментах для пентестинга (тестов на проникновение) веб-приложений по стратегии «черного ящика».
Для этого мы рассмотрим утилиты, которые помогут в данном виде тестирования. Рассмотрим следующие категории продуктов:

1. Сетевые сканеры
2. Сканеры брешей в веб-скриптах
3. Эксплойтинг
4. Автомазация инъекций
5. Дебаггеры (снифферы, локальные прокси и т.п.)

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

Ниже предлагаются простые 5 шагов, с которых можно начать, на примере сайта WHOIS Digger.

Шаг 1. Аналог favicon.ico

Когда пользователь создает ссылку на ваш сайт в виде иконки в SpringBoard, iPhone автоматически формирует картинку из скриншота страницы. В результате почти всегда получается неразборчивая каша, которая на гордое звание «иконки для iPhone» никак не тянет. Пропишите этот тег в заголовке страницы:

<link rel="apple-touch-icon" href="res/iphone_icon.png" />

и добавьте соответствующую картинку res/iphone_icon.png размером 57х57 пикселов. iPhone сам добавит скругленные углы и полукруглый блик, сделав вашу иконку похожей на остальные.

Вот так выглядит исходная картинка и иконка на рабочем столе iPhone:

Здравствуй, дорогой хабрадруг! Сегодня существуют более тысячи способов создать кнопку; чтобы понять их сущность, вам нужно лишь потратить немного времени, просмотрев работы на сайте dribbble.com. Большинство из этих примеров очень похожи друг на друга, однако время от времени попадаются и такие кнопки, на создание которых потратили чуть больше внимания, времени и сил.



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

Надоело отправлять пользователям подтверждения аккаунта и сброса пароля по утере на почту?
Пользователи уходят, устав заполнять вашу форму регистрации?
Вы точно уверены, что у посетителей вашего сайта есть аккаунт на Facebook или Вконтакте?
Не хотите хранить никакие персональные данные?
Ваши пользователи устали вводить логин и пароль?
Вашим пользователям лень даже нажать на кнопку «Войти»?
Видели, как это сделано на stackoverflow и хотите так же, и даже лучше?

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

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

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

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

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

Задача сервиса Postmaster.mail.ru, которому посвящена эта статья, – помочь веб-проектам контролировать поток электронной корреспонденции, идущей в почтовые ящики пользователей.

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

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

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

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

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

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

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

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





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

В этом коде могут быть ошибки; я только доказал, что он правилен, а не проверял его.
Дональд Кнут

Сегодня я наткнулся на пост, в котором утверждалось, что использовать функцию C++ STL make_heap нельзя, потому что почти никто не умеет использовать ее правильно. Сначала я возмутился смехотворностью этой идеи — любой человек, имеющий хотя бы начальное представление об алгоритмах, должен знать, как правильно использовать make_heap. Но потом я задумался о том, сколько программистов не знают, что такое куча, более того, им это даже не нужно… А потом я понял, что все эти люди в равной степени зовутся программистами.

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

Термин «программист» покрывает колоссальный спектр способностей и умений. По вертикальной оси, программист может едва уметь писать на vbscript — или разрабатывать компиляторы для Intel или научный софт для авиакомпаний. По горизонтальной оси, он может быть экспертом в базах данных, улучшать производительность GPU, писать библиотеки параллельных вычислений, физические движки или драйвера для принтеров, заниматься обработкой изображений, генерацией 3D моделей или исследованиями в области искусственного интеллекта, использовать coffeescript, HTML5 и AJAX для разработки веб-приложений или nginx и PHP для разработки LAMP-стека, на котором веб-приложения работают… И это все — программисты.

Перевод статьи Джейсона Фрида (Jason Fried) "Why I Run a Flat Company". Джейсон — один из основателей компании 37signals и соавтор книг "Getting Real" и "Rework".

Несколько месяцев назад в компании 37signals, которую я возглавляю, случилось необыкновенное событие: мы расстались с одним из наших сотрудников. Казалось бы, что в этом необычного? Но дело в том, что в нашей компании подобное происходит крайне редко. За 11 лет работы мы потеряли всего лишь пять человек, причем один из них вернулся к нам семь лет спустя.

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

Вдохновившись статьёй Привет из свободного от libc мира, я так же решил проделать нечто подобное. Чтобы не заниматься этим бесцельно, я решил поставить перед собой следующую задачу. Сделать программу, выводящую какую-нибудь простую строку, вроде «ELF, hello!». Разобраться с тем, как именно она будет представлена в исполняемом файле. Ну и попутно, постараться уложиться в 100 байт.

flotr2 — это библиотека с открытым кодом для построения HTML5 графиков и диаграмм. Flotr2 — так как стала ответвлением от Flotr, но уже без привязки к Prototype JS и с множеством усовершенствований.

Вышла новая версия офигительного UI фреймворка от Twitter — Bootstrap 2.0 Для тех кто не в курсе что это, настоятельно рекомендую ознакомиться. Этот набор позволяет создавать отличные шаблоны сайтов за считанные часы (проверено на собственном опыте) на основе готовых элементов и экономить килотонны нервов на адаптации кода под разные браузеры.

Особенности Bootstrap:

• Полный набор компонентов в виде стилей и анимаций поведения для элементов интерфейса
• Поддержка возможностей HTML5, CSS3 (но при этом работает и в IE7!)
• Поддержка идеологии 940-пиксельной сетки
• Поддержка идеологии fluid-grid
• Кросплатформенность — наборы стилей для десктопных и мобильных браузеров
• Возможность кастомизации и добавления собственных стилей
• Возможность добавлять jQuery плагины

Мастхэв для верстальщиков и проектировщиков интерфейсов!