В подборке сервисы, плагины, темы и другие полезности, облегчающие работу с Twitter Bootstrap.

Стилизация

BootSwatchr — быстрая стилизация Twitter Bootstrap.

Псевдоэлементы :before и :after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.

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

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

В продолжение своего топика Новое в CSS3: многоколоночность, flexbox, сеточная разметка предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами.



Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div'ов. Но все может стать намного проще с CSS3 Multi Column Module.

Все, кто привык к полноценно оформленным страницам сайтов, предпочитает вид «прибитого» (прилипающего, sticky) к низу футера страницы. Но есть в интернете две беды: нерастущие вниз поля ввода и неприбитые (к низу окна) футеры. Например, когда открываем короткие по высоте страницы типа habrahabr.ru/settings/social — сразу бросается в глаза, что информация, призванная быть в нижней части окна просмотра, прилипает к содержанию и находится где-то посередине, а то и в верхней части окна, когда внизу — пусто.

Так, вместо того, чтобы .
Данное пособие для начинающих верстальщиков покажет, как за 45 минут сделать «прибитый» футер, исправив недоработки даже такого уважаемого издания, как Хабр, потягаться с ним в качестве исполнения своего перспективного проекта.

Я удивлен, что эта техника упоминалась на Хабре только один раз и вскользь — если верить поиску, конечно.
Меня не покидает ощущение, что на самом деле все про это знают, но я всё же расскажу.

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

Делается это несложно — нужно всего-то добавить пару мета-тегов в head:

<link rel="prefetch" href="NEXT PAGE URI" />
<link rel="prerender" href="NEXT PAGE URI" />

Теперь подробнее про ограничения и нюансы.

Предыстория:

Начался сегодня день не очень удачно… Начальство начало совокуплять мозг по поводу нестандартного поведения браузера Chrome относительно атрибута placeholder (не исчезание подсказки при появлении фокуса на элементе)

Сайтов много, желания что-то переделывать мало.

В результате данной совокупности факторов появился доработанный плагин для jQuery — powerful-placeholder, который добавляет поддержку placeholder старым браузерам + в Chrome при появлении фокуса на элементе скрывает placeholder.

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

 

Сегодня я хочу познакомить вас с замечательными примерами hover-эффектов от Mary Lou. Многим понравились её примеры с hover-эффектами для меню и на этот раз она решила порадовать нас не менее замечательными примерами для круглых элементов. Поскольку сейчас у нас есть возможность использовать свойство border-radius, мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на веб-сайтах. Один из вариантов использования, который мне более всего нравится, это круглые миниатюры, которые выглядят гораздо интереснее, чем обычные, прямоугольные. И сейчас мы собираемся создать несколько необычных эффектов при наведении на такие элементы!

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

Почти месяц назад вышла вторая версия прекрасного и замечательного jQuery Notification plugin для вывода самых разнообразных уведомлений на сайте, странно что Хабр вообще обошёл его стороной, исправлю ситуацию.

Поздравляю всех с пятницей и в качестве небольшого развлечения предлагаю представить, как бы выглядел популярный CSS-фреймворк Twitter Bootstrap, если бы он был от Google? Встречайте Plusstrap.

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

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

Это перевод и форма повествования от первого лица сохранена. Автор — Бен Бойтер, бакалавр информационных технологий в Университете Чарльза Стерта (CSU).


Большинство людей не в курсе, но моей диссертацией была программа для чтения текста с изображения. Я думал, что, если смогу получить высокий уровень распознавания, то это можно будет использовать для улучшения результатов поиска. Мой отличный советник доктор Гао Джунбин предложил мне написать диссертацию на эту тему. Наконец-то я нашел время написать эту статью и здесь я постараюсь рассказать о всем том, что узнал. Если бы только было что-то подобное, когда я только начинал…

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

Капча устроена так, что человек может прочитать текст без труда, в то время, как машина — нет (привет, reCaptcha!). На практике это никогда не работало, т. к. почти каждую капчу, которую размещали на сайте взламывали в течение нескольких месяцев.

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

На хабре в прошлом месяце была опубликована статья Конкурс ВК: Мессенджер для Android. Как это было!, в которой автор поделился своими мыслями о конкурсе и опубликовал список ресурсов и статей, которые помогли ему в создании приложения. Так как в последнее время я начал изучать разработку под iOS, то у меня скопилось некоторое количество ссылок, которые могут быть полезны для начинающих. Поэтому я последую его примеру и сделаю то же самое, только для своей платформы. Надеюсь, кому-нибудь они окажутся полезны и сэкономят немного времени.

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

Дизайнер-шрифтовик Иван Гладких, более известный как Джованни Лемонад (Jovanny Lemonad), вчера (1 августа 2012 года) объявил о выходе нового шрифта «Ораниенбаум», являющегося акцидентною антиквою необыкновенно красивых начертаний, что особенно проявляется в криволинейных элементах букв (в лапках, хвостиках и др.):

В рамках одного проекта столкнулся необходимостью работать с нейронными сетями, рассмотрел несколько вариантов, больше всего понравилась PyBrain. Надеюсь её описание будет многим интересно почитать.

PyBrain — одна из лучших Python библиотек для изучения и реализации большого количества разнообразных алгоритмов связанных с нейронными сетями. Являет собой удачный пример совмещения компактного синтаксиса Python с хорошей реализацией большого набора различных алгоритмов из области машинного интеллекта.

Предназначен для:

• Исследователей — предоставляет единообразную среду для реализации различных алгоритмов, избавляя от потребности в использовании десятков различных библиотек. Позволяет сосредоточится на самом алгоритме а не особенностях его реализации.
• Студентов — с использованием PyBrain удобно реализовать домашнее задание, курсовой проект или вычисления в дипломной работе. Гибкость архитектуры позволяет удобно реализовывать разнообразные сложные методы, структуры и топологии.
• Лекторов — обучение методам Machine Learning было одной из основных целей при создании библиотеки. Авторы будут рады, если результаты их труда помогут в подготовке грамотных студентов и специалистов.
• Разработчиков — проект Open Source, поэтому новым разработчикам всегда рады.

В декабре прошлого (2011) года, перед Рождеством, словолитнею type|depot (что из Софии в Болгарии) была объявлена бесплатная раздача (на условиях лицензии CC BY-ND 3.0) нового семейства заголовочных шрифтов Corki, состоящего из четырёх начертаний: Corki, Corki Rounded, Corki Tuscan, Corki Rounded Tuscan.

Каждый из этих шрифтов содержит 134 символа: латинский алфавит, кириллицу, восемь символов руки с указующим перстом (четыре направления: вверх, вправо, вниз, влево — и два варианта руки: тыльною стороною или ладонью к читателю), цифры, различные символы (в том числе внутри кружков), различные стрéлки.