• Google представил API для кроссбраузерного подключения шрифтов

      Google Font API — API для подключеня нестандартных шрифтов.
      <html>
        <head>
          <link rel="stylesheet" type="text/css" href="_http://fonts.googleapis.com/css?family=Tangerine">
          <style>
            body {
              font-family: 'Tangerine', serif;
              font-size: 48px;
            }
          </style>
        </head>
        <body>
          <h1>Making the Web Beautiful!</h1>
        </body>
      </html>
      Читать дальше →
    • CSSDoc — формат комментариев для CSS

        Уже неоднократно видел утверждение, что CSS необходимо комментировать, чтобы потом было проще сориентироваться себе или тому, кто также поддерживает или будет в дальнейшем поддерживать ваш код. Но почему-то никто не предлагает использовать какой-то универсальный формат комментариев, который был бы понятен всем, хотя в программировании такое используется повсеместно: JavaDoc, JSDoc, PHPDoc и т.п.

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

        Если интересно, то нужно нажать на эту ссылку.
      • Вытаскиваем кучу паролей из пиринговых сетей

          Появилась эта задумка уже давно — с тех самых пор, когда узнал про wand.dat. До недавнего времени всё никак не доходили руки.

          Итак, что у нас есть
          1. Браузер Opera. Хранит он все запомненные пароли от сайтов в файле wand.dat в открытом виде. Правда в открытом только в том случае, если не стоит мастер-пароль, который конечно же никто не ставит. Что заставило разработчиков сохранять пароли в незашифрованном виде, если нет мастер-пароля? Неизвестно. Логичней было бы форсированно не сохранять пароли вообще, пока пользователь-таки не установит мастер-пароль.
          2. Direct Connect. «Частично централизованная файлообменная (P2P) сеть». Пользователь расшаривает папки/файлы на своём компьютере, заходит на хабы, качает/раздаёт. Поиск работает в пределах подключенных хабов. Уникальность файлов определяется через Tiger Tree Hashing. Люди, которым нечего расшаривать (на многие хабы не пускают без минимальной шары в 10-15 ГБ), расшаривают Program Files, Windows, ну и иже с ними.
          3. /dev/hands. Ну а без этого никак.

          Под хабракатом много текста
        • 15+ полезных документов по jQuery

            Как известно, пару месяцев назад свет увидела jQuery 1.4, в которой мы можем наблюдать множество новых функций и возможностей. А значит, стало еще больше информации для изучения и запоминания. И не важно, насколько хорошо вы владеете искусством jQuery — запомнить всё в любом случае не удастся. И вот здесь нам на помощь приходят всевозможные сборники документаций и шпаргалки, которые очень полезно держать под рукой и периодически в них заглядывать).
            Читать дальше →
          • Полезные инструменты для разработчиков CSS3

            • Translation
            image
            Вообще говоря, язык CSS достаточно прост. Но как только производители браузеров приступили к реализации функций CSS3, то все немного усложнилось. Нет — это не стало трудным, но усложнилось. Это объясняется главным образом по двум причинам: во-первых появилось много новых свойств CSS3 (например, переход, градиент, преобразования и т.д.), и во-вторых, мы должны ориентироваться на расширения, используемые конкретным браузером.

            Поэтому теперь вашими лучшими друзьями по CSS3 будут генераторы, шпаргалки, справочники и решения на базе JavaScript. Это именно те инструменты, которые помогут вам в обучении и применении CSS3 сегодня.
            Читать дальше →
          • Установка драйверов за 5 минут

              Дорогие коллеги!


              Рад представить вам новую версию программы DriverPack Solution 10. Это универсальный менеджер установки драйверов для всех версий Windows, который можно совершенно бесплатно скачать с официального сайта: http://drp.su/

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

              image

              Читать дальше →
            • Вспомогательные классы

                imageЛично мне, иногда, при верстке очередной страницы или изменении существующей, требуется (или просто хочется) добавить несколько простейших параметров стилей. Писать определение стиля в разметке не очень хочется, не только из-за того, что это набор достаточно длинной строки, но и потому, что это определение потом может остаться в разметке навсегда (как говориться: нет ничего постояннее временного). Кроме того, в каждом отдельном файле CSS-стилей порой валяются одни и те же классы стилей в одну строчку. Давно собирался определить для себя некую библиотеку с набором таких стилей и с установленным навсегда названиями. И вот такой получился результат.
                Читать дальше →
              • elFinder — файловый менеджер для сайта. Новый вкус

                  Некоторое время назад мы представляли уважаемой публике наши open source продукты для веб-разработчиков — редактор elRTE и файловый менеджер elFinder. После анонса мы получили немало отзывов и надо сказать были изрядно удивлены, что интерес к файловому менеджеру оказался заметно выше чем к редактору.

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

                  И сегодня с удовольствием от хорошо сделанной работы предлагаем попробовать наше фирменное блюдо elFinder!

                  elFinder

                  Читать дальше →
                • Колоночная верстка

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

                    Плюсы
                    • Есть прижимающийся к полу футер
                    • Колонки меню растягиваются по 100% высоте
                    • Колонок может быть сколько душе угодно
                    • Колонки могут быть как лево- так и правосторонними, а также совмещенными, например 2 справа и 1 слева
                    • Ширина как резиновая, так и фиксированная
                    • Критический минимум хаков
                    • Не используется Javascript
                    • Не используются бекграундовые изображения для создания эффекта колонки
                    • Никаких таблиц
                    • Одинаковый результат в ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 (Если у вас не работает в каком-то браузере — отпишитесь, пожалуйста, в комментах. Исправим и приведем к универсальному виду)

                    Минусы
                    • Есть несколько «лишних» блоков. (Я бы и сам рад от них избавиться)
                    • Есть несколько абсолютно-позиционируемых блоков
                    Читать дальше →
                  • Тонкости использования селекторов аттрибутов в CSS

                    • Translation
                    CSS может связываться с HTML элементами используя любые из его атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:
                    <h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

                    Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-title) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:
                    h2[rel=friend] {
                      /* woohoo! */
                    }

                    Читать дальше →
                  • Динамическая висячая пунктуация в HTML

                      Наверняка вы видели на многих сайтах свешивающиеся в начале строк кавычки и скобки. И хотя на бумаге такое полное свешивание в простых текстах (не заголовках) как минимум спорно, на вебе это выглядит отлично. Такое поведение текста называется «висячая пунктация», и на текущий момент есть ровно один способ её реализации в (X)HTML/CSS — добавление парных стилей. Этот способ, скажем, применён на сайте Артемия Лебедева.

                      Главный минус классической «лебедевской» реализации висячей пунктуации на вебе — её статичность. Поясню, как у них это сделано.

                      В CSS прописаны парные стили: .h[symbol] и .s[symbol], например, .slaquo и .hlaquo. Для каждого из них прописан отвес через margin. При использовании свешивающихся символов в тексте к пробелу перед символом добавляется стиль s[symbol], а к самому символу — h[symbol]. Соответственно, когда и пробел, и символ, находятся в одной строке, отвесы взаимно компенсируются, и текст выглядит как обычно. А когда свешивающийся символ по каким-то причинам сносится на следующую строку — первый стиль (балансирующий второй блок) остаётся на предыдущей строке, поэтому нужный символ свешивается влево на заданный отвес.

                      Реализация по сути хорошая, с одним «но» — шрифты. Для каждого шрифта отвес, скажем, открывающей кавычки-ёлочки или открывающей скобки разный. Да, конечно, мы можем его вычислить вручную и прибить в таблице стилей гвоздями (так и сделано у Лебедева на сайте), но для этого придётся быть уверенным, что как минимум у 90% посетителей сайта будет именно этот шрифт. В случае, если браузер покажет это каким-то иным шрифтом, начнутся проблемы с разъезжающимися строками.

                      Что было сделано?
                      Читать дальше →
                    • Thick As Brick – простейший html шаблон для верстки

                        Я почему вредный был?
                        Потому что у меня велосипеда не было!
                        Мультфильм «Трое из Простоквашино»


                        Когда десять раз делаешь одно и то же, на одиннадцатый раз ты волей-неволей начинаешь задумываться о том, как бы процесс оптимизировать. Так и с версткой: после десятка сверстанных страниц хочется слегка упростить свою задачу. Тут на помощь, конечно же, приходят разнообразные фреймворки (чего только стоит oocss или наикрутейший CSS-фреймворк от Яндекса или целая куча других не менее интересных фреймворков). Пригодятся и системы сборки (Ant стоит на службе у студии Артемия Лебедева, да и я потихоньку постигаю его Дао). Не стоит забывать и различные хаки и шаблоны лейаутов, коих в интернете бесчисленное множество.

                        Однако как быть с сайтом, для которого надо сверстать пару-тройку типичных страниц? Нет смысла тащить с собой кучу лишнего CSS-кода. Кроме того, многим верстальщикам гораздо проще написать качественный код с нуля, чем перегружать кучу заранее объявленных бесполезных классов. Что делать?

                        Чтобы решить эту высосанную из пальца нетривиальную задачу я написал простейший шаблон для верстки, который сильно облегчил мне работу над проектами. Шаблон примитивен и прост (потому так и зовется), на звание фреймворка ни в коем случае не претендует (минус в карму тому, кто обзовет его фреймворком! ;) ). Он несет в себе заранее объявленные CSS-классы для работы с меню, списками, формами, ресеты основных тегов (вроде сброса отступов у форм и правильных отступов у <p>) и еще кое-какие полезные для меня вкусности.

                        Читать дальше →
                      • HABRAтопик в PDF

                          Это еще не полноценный сервис, но…

                          Уже несколько раз проблема перевода html-страницы в pdf проскакивала в постах на хабре. К сожалению, все предложенные решения меня не устроили и пришла идея сделать свой сервис.

                          Так появилась "Сохраняшка".

                          Сохраняшка

                          Читать дальше →
                        • Использование picasaweb в качестве фотохостинга

                            Нужно использовать много изображений на сайте? Не хочется забивать хостинг изображениями? Хочется уменьшить нагрузку на сервер?
                            Тогда можно использовать сервис от гугл picasaweb і Picasa API как хостинг для изображений

                            процесс загрузки фотографий на сервер
                            Читать дальше →
                          • Быстрочтение featuring Восприятие текста

                              Привет всем. Основываясь на предыдущем опыте, считаю нужным сразу расставить все точи над ё. Описанная ниже методика — не мое изобретение. Однако из собственного опыта могу уверить вас, что она работает. Ровно так, как обещано.
                              Идея, описанная в посте, появилась давно (под катом есть история), в том виде, в каком расскажу ее я, по большей части она представлена в чудесных книгах Тони Бузана Use You Head и The Speed Reading Book (в последней много воды).

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

                              Написано с подачи пользователя cympak. Посвящается всем кто много читает: будь то деловые документы, художественные произведения или статьи на Хабре типа этой.

                              Прежде чем приступить к самому главному, прошу вас пройти тест из шести вопросов на Да/Нет.

                              1. Чтение со скоростью свыше 1000 слов в минуту невозможно?
                              2. Медленная скорость чтения способствует лучшему пониманию текста?
                              3. Пропускать слова во время чтения — плохая привычка, ухудшающая понимание текста?
                              4. По умолчанию мы все читаем с «естественной» для нас скоростью, а следовательно, наилучшей?
                              5. Если вы не поняли слово или предложение, лучше перечитать его и понять?
                              6. Ваши глаза находятся в непрерывном движении во время чтения?
                              За результатами и, наконец-то, интересными штуками добро пожаловать под кат.
                              Читать дальше →
                            • Типографика в движении

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

                                Пока что удалось обнаружить два вида интересных с точки зрения типографики видеороликов:
                                • титры в кино (movie title sequence),
                                • кинетическая типографика (kinetic typography).
                                Под хабракатом приведу несколько роликов-иллюстраций и дам ссылки на дальнейшее копательство в YouTube.

                                Читать дальше →
                              • Верстка повторяющихся блоков

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


                                  Читать дальше →
                                • Создание расширения для Google Chrome

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

                                    Для работы с расширениями вам понадобится переключить канал обновлений на Dev или Beta.
                                    Читать дальше →