Вопрос о стилизации <input type=«file» /> настолько стар, что наверное только ленивый не пробовал собственную реализацию этого, несомненно, важного в web дизайне элемента.
Однако, в большинстве своём, решения очень не однозначны и зачастую предлагают примерно следующие варианты:

• Наложить файл инпут поверх картинки и сделать его прозрачным.
• Использовать flash.

При этом, в первом случае, чтобы всё работало относительно одинаково во всех браузерах, предлагается «спорные области» — те что в одном браузере являются активными для нажатия, а в другом неактивными — закрыть, например, наложив сверху <div></div>. Стоит ещё добавить, что тут же используется значительное количество css со всяческими отрицательными отступами и float`ами.
А во втором случае мы имеем ряд не удобств связанные с активацией flash элементов (например в IE), а лично у меня (и думаю у всех, кто в ФФ использует Add Block Plus дополнение) кнопочка block совсем не красит флешевый инпут файл.

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

Я подумал: «Как было бы здорово сделать дисплей лаптопа продолжением дисплея настольного ПК, и при этом управлять ими одной и той же клавиатурой и мышью!». Оказалось, выход есть. И называется он Synergy.

Всем привет.
В этом посте я опишу несколько маленьких и удобных windows-программ, к тому же абсолютно бесплатных. Предыдущий пост вызвал бурную дискуссию, в результате которой, как водится, родилась истина :)
Итак, этот пост — дань благодарному хабрасообществу — в комментариях по крупицам собрались полезные программки, о которых, возможно, мы бы никогда и не услышали. Заранее извинюсь перед людьми, которые предлагали свои программы, не вошедшие в этот обзор — в каментах было много утилит, так или иначе дублирующих функции друг друга, и опробовать их все, сравнить и разложить по полочкам — задача для википедии. :)
Ну что ж, от слов к делу.

01) Сворачиваем окно в заголовок и не только — куча возможностей в обмен на 90 килобайт
02) Сворачиваем окно в трей правым кликом по «крестику»
03) Создаем виртуальные рабочие столы — теперь с помощью бесплатной программы
04) Двигаем кнопки окон на панели задач как табы в браузере
05) Клейкие листочки на рабочем столе — когда не хочется заносить в ToDo
06) Мини-консоль для быстрого запуска программ по алиасам
07) Мгновенный поиск по компьютеру — программа-индексатор жесткого диска
08) Копируем текст откуда угодно, даже из рисунков
09) создаем хранилище заметок с вложениями посредством быстрой и бесплатной программы
10) управляем буфером обмена — теперь можно запомнить больше!

По многочисленным просьбам — перевод статьи «The Bumper List of Windows 7 Secrets».

Здесь пропущено вступление о том как здорово, что Windows 7 вышла в свет, которое все равно все пропустят и будут читать сами «секреты».

1. Управление окнами

Вы, наверное, уже знаете, что Windows 7 делает работу с окнами во многом проще. Окно можно «прикрепить» к левой или правой половине экрана просто придвинув к соответствующему краю, а так же окно можно разворачивать/восcтанавливать по вертикали двойным щелчком по нижней границе окна. Но вот чего вы, наверное, не знаете, так это того, что все эти действия доступны через горячие клавиши.

• Win+Влево и Win+Вправо — прикрепить окно
• Win+Вверх и Win+Вниз — разворачивает и восстанавливает/сворачивает окно
• Win+Shift+Вверх и Win+Shift+Вниз — разворачивает и восстанавливает окно по вертикали

Было время, когда я ничего не знал про VCS, ни что это такое, ни тем более зачем это мне. И верхом своих достижений считал папочку с архивами версий. К моменту осознания необходимости системы контроля версий я уже набил шишек и прочувствовал необходимость такого инструмента. Но борландовский аналог CVS меня не впечатлил. У каждого файла свой номер версии. Как мне получить срез определенного релиза я так и не разобрался. А в это время SVN победоносно шла сквозь умы разработчиков. Черт, это было то, чего мне так не хватало. Прочитав доку и начав работать я просто влюбился в нее. Да, были трудности и определенные неудобства, но куда без них.
Так я и работал бы в SVN, но ничего не стоит на месте. В интернете уже потекли тонкие ручейки новостей про Git. Я не кидаюсь за каждой новой технологией, и прошло уже достаточно много времени, пока мне не прожужжали этим Git’ом все мозги. Мне стало любопытно, я вначале присматривался, примерялся, а потом плюнул и начал новый проект на Git. Мучался с ребятами 2 недели, накачал литературы, написал шпаргалку… ничего, привыкли, … а потом меня поперло.

Теперь меня регулярно просят рассказать про Git и что в нем такого. Уже надоело, поэтому этот пост для тех, кто еще сомневается.

По просьбам некоторых читателей решил написать топик про контекст в javascript. Новички javascript часто не понимают значение ключевого слова this в javascript. Данный топик будет интересен не только новичкам, а также тем, кто просто хочет освежить данный аспект в памяти. Посмотрите пример ниже. Если вы затрудняетесь ответить на вопрос «что будет выведено в логе» хотя бы в одном из пунктов или хотите просто посмотреть ответы — добро пожаловать под кат.

var f = function() {
    this.x = 5;
    (function() {
        this.x = 3;
    })();
    console.log(this.x);
};

var obj = {x: 4, m: function() {
    console.log(this.x);
}};


f();
new f();
obj.m();
new obj.m();
f.call(f);
obj.m.call(f);

На Хабре уже проскальзывали обзоры плагинов для стилизации селекта (раз и два)

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



Итак, задача — сделать плагин с блэкджеком и ш… для стилизации селекта, который по максимуму повторяет поведение стандартного. А это навигация с клавиатуры, автоподгонка ширины дропдауна, поддержка optgroup, автокомплит и самое главное полная кастомизация, включая скроллбар*.

Когда я работал над сервисом заметок jotsky.com, еще до работы в Островке, надо было сделать ввод телефонного номера из двух инпутов. Примерно такой:



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

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

Питер Гасстон, автор книги по CSS3, опубликовал статью под названием The future of CSS layouts, перевод которой специально для читателей хабра представлен ниже.

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

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

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

Консорциум W3C и создатели браузеров в курсе этих проблем и работают над рядом решений. Лидером среди них является (как не удивительно) Internet Explorer. Похоже, что IE10 будет предвестником новой эры CSS разметки, которая позволит создавать отличные, динамические и привлекательные сайты, используя недосягаемые ранее возможности.

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

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

В 2002 году Марк Ньюхаус (Mark Newhouse) опубликовал статью «Укрощение списков» ("Taming Lists"), довольно-таки интересную часть которой он посвятил объяснению того, как создавать собственные списки, украшенные псевдо-элементами. Почти десять лет спустя Николас Галлахер (Nicolas Gallagher) изобрел технику, которая использует псевдо-элементы из спрайтов, для создания фоновых изображений.
Сегондя, основываясь на опыте гигантов, мы постараемся развить эту тему. Мы обсудим, как можно украсить элементы без дополнительной разметки, используя только технику CSS-спрайтов. Результат будет работать также в Internet Explorer 6 и 7 версии.

В этой теме я хочу поделиться своими знаниями про устройство мозга и тем, как применяю это на практике.



Итак, как известно, мозг — важнейший орган нашего тела. Кто-то говорит, что он — самая сложная вещь во вселенной. И незнание некоторых его особенностей может очень плачевно сказать на жизни человека.

Но обо всем по порядку.

Понимание роли мозга

Нет невежества страшнее, чем невежество по отношению к самому себе.

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

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

Здравствуйте!

В свое время я не без удовольствия прочитал замечательную статью «Гитаризм для линуксоида — why not?». И решил написать небольшое продолжение этой статьи и рассказать о некоторых вещах более практического плана, а именно создать небольшое руководство для тех, кто, скажем, неожиданно решил увековечить свое творчество путем записи относительно непростого гитарного произведения. :)
Итак, поехали.

Задача

Итак, вам приходит макет, а в нём (о ужас!) блок картинок дизайнером старательно выровнен по обе стороны. Примерно так:

Ну в верстаем мы только резину!

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

HTML5 для веб-дизайнеров

1. Краткая история языка разметки
2. Модель HTML5
3. Мультимедиа
4. Формы 2.0
5. Семантика
6. HTML5 и современные условия

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

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

Говоря о формах, тут возможности CSS довольно ограничены. И теперь на сцену снова выходит HTML5. Следуя тому же принципу, он вводит новые функции, которые на самом деле вовсе не новые, но сделаны проще и удобнее.

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

Не так давно встала задача, установить заглушку для sendmail, дабы письма из PHP не отсылались на ложные адреса (при тестинге) или просто не возникала ошибка, а складывались аккуратно в папку. Аналогично тому, как это делает Денвер.

Что такое HTML-валидация?

HTML-валидатор производит несколько проверок Вашего кода. Основные из них:

1. Валидация синтаксиса — проверка на наличие синтаксических ошибок. <foo bar="baz"> является корректным синтаксисом, несмотря на то, что <foo> не является допустимым HTML-тэгом, так что проверка синтаксиса является минимально полезной для написания хорошего HTML.
2. Проверка вложенности тэгов — тэги должны быть закрыты в обратном порядке относительно их открытия. Например, эта проверка отлавливает ошибки с неправильно закрытыми <div>.
3. Валидация DTD — проверка соответствия Вашего кода указанному Document Type Definition. Она включает проверку названий тэгов, атрибутов, и «встраивания» тэгов (тэги одного типа внутри тэгов другого типа)
4. Проверка на посторонние элементы — проверка выявляет все, что есть в коде, но отсутствует в DTD. Например, пользовательские тэги и атрибуты.

Имейте ввиду, что это логические проверки, и не важно как реализован валидатор. Если хотя бы одна из проверок не проходит успешно, то HTML считается невалидным. И в этом заключается проблема.

Здравствуйте.
Исполняю обещаное, описываю установку Aptana на Kubuntu 8.04.
Что такое Aptana?
На официальном сайте разработчики заявляют:
«Aptana Studio — это мощная среда разработки веб-страниц и веб-приложений. Присутствует поддержка для разработки JavaScript, Ruby on Rails, PHP с использованием Ajax, DOM, HTML, CSS. Кроме того, предоставляются плагины, позволяющие разрабатывать приложения для Adobe AIR и Apple iPhone.
Для искушенных веб-разработчиков пакет Aptana Studio Pro предоставляет дополнительные преимущества производства продуктов, а также превосходную поддержку.
Aptana Studio 1.1 также имеет встроенную версию сервера Ajax от Aptana — Aptana Jaxer.»
Вкусно?