Как стать автором
Обновить
76
0
Rumkin @rumkin

Developer and tech writer

Отправить сообщение

Список полезных инструментов для CSS разработчика

Время на прочтение8 мин
Количество просмотров71K
Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях.


Чтобы инструмент был по-настоящему полезен, у него должна быть хорошая документация и дружелюбный интерфейс. К сожалению, некоторые инструменты в списке не полностью попадают под данные критерии. Если кто-то знает лучшие альтернативы с более дружелюбным интерфейсом и большей функциональностью, пишите в комментариях.
Читать дальше →
Всего голосов 179: ↑170 и ↓9+161
Комментарии65

Какие бывают META теги и зачем они нужны

Время на прочтение7 мин
Количество просмотров264K

META-теги


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

META-теги имеют два возможных атрибута


— <META HTTP-EQUIV="имя" CONTENT="содержимое">
— <META NAME="имя" CONTENT="содержимое">
META-теги должны находиться в заголовке HTML-документа между <HEAD> и </HEAD> (особенно это важно для документов, использующих фреймы).

Стандартом HTML 4.01 значения и имена мета-тегов НЕ оговариваются, поэтому мы будем рассматривать те значения, которые уже устоялись в интернете и используются чаще других.
подробнее о META тегах
Всего голосов 118: ↑89 и ↓29+60
Комментарии47

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

Время на прочтение7 мин
Количество просмотров33K
На минуту обратите свои мысли вспять, к прошлому, к завершившемуся тысячелетию. Отдайте должное утренней заре Всемирной Паутины, потому что заря эта готова ужé окончательно потухнуть, уступая место куда более яркому сиянию нового дня.

Первая типографская революция произошла во Всемирной Паутине настолько давно, что приходится производить поиски, чтобы установить подробности. Кажется достоверным то, что пишет Ian Graham: в Netscape Navigator 2.0 впервые появился элемент <font> (тогда он позволял задавать только размеры шрифта, и только в условных единицах), а в Internet Explorer 3 у этого элемента появился атрибут face, позволявший задавать начертание, задавать шрифтовое семейство. Википедия подсказывает, что Netscape Navigator 2.0 появился в марте 1996 года, а Microsoft Internet Explorer 3 — в августе того же года. В язык HTML версии 3.2 даже не входил атрибут face, хотя и упоминалося, что такой атрибут существует.

Тринадцать лет назад.

Все эти тринадцать лет для начертания текста сайтов в основном использовались несвободные шрифты, являющиеся частью операционных систем и офисных пакетов. Сайтам приходилося гадать о том, какие шрифты установлены у читателя, а какие не установлены, и какова вероятность того или другого, какие шрифты можно считать безопасными. Сочинялись специальные плагины jQuery и создавались специальные страницы, способные выяснить набор шрифтов на компьютере читателя. Особый дух того времени прекрасно передал despoth, сочинив превосходную серию статей о такой веботипографике, которая основана именно на подборе несвободных шрифтов (часть I часть II часть III часть IV часть V).

Наконец, это время кончилось: явствуют, зримо явствуют признаки Второй типографской революции, связанной с приходом @font-face.

Джон Даггетт сочинил познавательную статью о том, как все мы совсем скоро (после появления Safari 3.1, Firefox 3.5, Opera 10) сможем использовать загружаемые шрифты во всех популярных браузерах, а не только в одном наиболее популярном.

Марк Пилгрим грубо обрисовал ситуацию с лицензированием собственнических шрифтов. Ситуация эта немало напоминает глухой тупик. Даже создателям прекрасной демонстрации возможностей Firefox 3.5, чтобы изготовить страницу, пришлось специально связаться со шрифтопроизводителями и изготовлять такие особые (усечённые) версии использовавшихся шрифтов, чтобы их не было смысла копировать нелицензионно. А вон там предлагают раздавать особые паутинные обкусанные ужатые копии купленных шрифтов (которые сам покупатель вывешивать не имеет никого права, а только ссылаться). Остроумно. Открывает широкую дорогу в сторону Большого Брата: типа как недавно читальники Kindle удаляли книги Оруэлла за нелицензионность (даже честно купленные — просто оставляя стоимость их на счету покупателя в уплату). Так и тут. Внешний шрифт может неожиданно подохнуть, даже купленный заранее.

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

Англоязычному люду этот переход дастся достаточно просто: достаточно обратиться к белке-шрифтелке, чтобы получить буквально сотни шрифтов, каждый из которых можно без лицензионных проблем использовать в своей работе, на своём сайте. Тем же, кто пользуется русским языком (или, тем паче, другими языками на основе расширенной кириллицы), придётся гораздо, гораздо похуже. Свободных кириллических шрифтов совсем мало, а русского аналога белки-шрифтелки, похоже, вообще не существует в природе.

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

Список пошёл.
Всего голосов 160: ↑137 и ↓23+114
Комментарии85

Использование градиента в качестве фона страницы

Время на прочтение12 мин
Количество просмотров11K
За время существования web 2.0 в сети появились некоторые приемы так называемого web 2.0 дизайна, один из которых это градиент.
 
Создание подобного эффекта, если не брать в расчет элементы с фиксированной высотой доставляет верстальщику не мало сложностей. Ключевым моментом реализации является оптимизация графики, но с другой стороны слишком "пережатый" файл теряет качество, что особенно заметно при использовании такого элемента с нефиксированной высотой. А что делать если эффект градиента необходимо использовать в фоне страницы ?
Читать дальше →
Всего голосов 80: ↑72 и ↓8+64
Комментарии55

Cufón – используйте шрифты, какие душа пожелает

Время на прочтение4 мин
Количество просмотров91K
Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:
  1. Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
  2. Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
  3. W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
  4. sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
  5. Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.
Читать дальше →
Всего голосов 119: ↑111 и ↓8+103
Комментарии106

Typeface.js — не текст, а картинка (JavaScript + SVG/VML).

Время на прочтение2 мин
Количество просмотров5.8K
Достаточно часто случается так, что для оформления той или иной страницы требуется использование нестандартного шрифта. Если текст не генерируется динамически мы можем просто заготовить картинку с надписью. В противном же случае на помощь придет PHP c функцией imagettftext. Для выполнения же такой манипуляции на стороне клиента пригодится скрипт описанный в этой заметке.
Хочу знать как делаются такие делишки на стороне клиента.
Всего голосов 43: ↑38 и ↓5+33
Комментарии33

Nice alert

Время на прочтение1 мин
Количество просмотров2.3K
nice-alert.user.js заменяет модальный диалог alert

модальный диалог alert

на ненавязчивое сообщение в правом верхнем углу страницы.

Nice alert box

Работает в Opera, Firefox Greasemonkey и Safari GreaseKit.

Cкачать nice_alert.user.js. (для Оперы, и только для неё, нужно скачать nice_alert.js, без «user».)

Код на github-е. Скрипт на userscripts.org.
Всего голосов 79: ↑63 и ↓16+47
Комментарии58

Вредная верстка

Время на прочтение9 мин
Количество просмотров74K
Как определить, что сайт сверстан качественно?
Есть много статей о том, как делать хорошо, но совсем нет – о том, как делать не надо, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно.

Из этой статьи вы узнаете:


  • О плохих приемах современной верстки;
  • О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.


Читать дальше →
Всего голосов 203: ↑175 и ↓28+147
Комментарии339

И снова о раскладке Бирмана

Время на прочтение3 мин
Количество просмотров4.8K

Преамбула

Некоторое время назад я быстро и как-то незаметно «подсел» на эту раскладку и заимел привычку везде использовать тире, кавычки-ёлочки, многоточия и прочие символы, при повседневном использовании в большинстве случаев заменяемыми суррогатами. Переехав в Ubuntu, с огорчением убедился, что Compose-key для полного счастья все-таки не хватает. Перейдя по ссылке «некая версия для Линукса» с сайта Бирмана, я с огорчением обнаружил, что предложенное Сергеем Столяровым решение мне не нравится. Не нравится как минимум тем, что смешивать саму раскладку и способ переключения мне показалось весьма… странным. В полном соответствии с принципом «Критикуешь — предлагай» я несколько
модернизировал решение Сергея
Всего голосов 29: ↑27 и ↓2+25
Комментарии33

Go West

Время на прочтение4 мин
Количество просмотров541
image
Будем реалистами. Российский рынок инвестиций в интернет-стартапы существенно отличен от развитых рынков, бесспорный лидер среди которых — США. Отличия эти, увы, не в нашу пользу.

Читать больше и глубже:
Всего голосов 98: ↑92 и ↓6+86
Комментарии91

Аренда сервера для стартапа

Время на прочтение2 мин
Количество просмотров26K
Недавно озадачился вопросом поиска выделенного сервера для своего стартапа. После просмотра российского рынка пришел в ужас и перевел взгляд на зарубежный, парой интересных предложений которого и хочу поделиться.

К примеру аренда четырехядерного AMD Opteron 2344 HE (1.7 GHz), 4Gb RAM, 2x250GB HDD обойдется в $100, что сравнимо с арендой порта и места в стойке под сервер у нас в стране.
Читать дальше →
Всего голосов 86: ↑80 и ↓6+74
Комментарии166

Книги помогают рисовать иконки

Время на прочтение1 мин
Количество просмотров3K


Порой меня спрашивают, о том, как я рисую иконки. Ответ прост: мне помогают книги. Множество книг. А также: книжная полка и… суперобложки. Если не объяснить, догадаться сложно, поэтому обо всем по порядку. Мне помогает моя коллекция книг, серии «Азбука-классика». Это издания в мягком переплете одного формата, варьируется лишь толщина. В среднем она равняется 15-18 мм. Высота — 180 мм. Значит корешок можно легко разбить на 10 квадратов размером 18x18 мм. Это пиксели. Я печатаю суперобложки с заданным положением точек на них:
Читать дальше →
Всего голосов 149: ↑145 и ↓4+141
Комментарии71

Стенсилы для проектирования интерфейсов

Время на прочтение2 мин
Количество просмотров19K
Продолжая выкладывать на блоге Amazing Development всё, что может понадобиться компаниям или специалистам начать заниматься проектированием и работами над повышением юзабилити своих продуктов и проектов, опубликовал коллекцию стенсилов. Стенсилы – примитивы используемые для графического представления чего-либо. Ниже представлены стенсилы для программ Microsoft Visio, Adobe InDesign и OmniGraffle. Если Вы знаете ссылки на другие стенсилы, которые можно использовать в проектировании, то сообщите о них в комментариях.

Microsoft Visio


Стенсилы Nick Finck


Читать дальше →
Всего голосов 72: ↑69 и ↓3+66
Комментарии30

Ненужные отступы в списках

Время на прочтение1 мин
Количество просмотров5.1K
Если элементы списка отобразить как inline – между ними появляются ненужные отступы.
Далее о том, откуда они берутся, и как это исправить.

1. Броузер рендерит не тот код который вы пишете, а тот, который получится в результате валидации вашего.
2. В каком-то доисторическом стандарте (html 3.2 кажется) было сказано, что тег LI закрывать не обязательно.

IE чтоб ему было удобнее рендерить приводит и закрытые и не закрытые теги LI к одному варианту, конечно же к не закрытому. (А что вы от него ждёте?) После закрывающего тега LI идёт перевод строки, он идентичен пробелу. Этот пробел и добавляется к тексту внутри LI. В нормальных броузерах этот пробел становится между тегами.

Проверить можно тут.

Читать дальше →
Всего голосов 74: ↑46 и ↓28+18
Комментарии66

Кроссбраузерная одноцветная полупрозрачность

Время на прочтение3 мин
Количество просмотров13K
В этой статье я рассмотрю метод создания блоков с одноцветным полупрозрачным фоном.
Например, таких:


Сразу оговорюсь, что я не буду использовать opacity и абсолютное позиционирование, чтобы разместить контент поверх полупрозрачного блока.
Читать дальше →
Всего голосов 192: ↑186 и ↓6+180
Комментарии80

И снова Fugue!

Время на прочтение2 мин
Количество просмотров916
image
Я возможно уже вам все уши прожужжал про этот сет, но не смог снова его не упомянуть. Да-да, фугия снова обновилась. Данная версия 1.4.3 хоть и не последняя но все же уже актуальная для каждого. Наконец в нем есть все иконки необходимые для оформления вашего веб-приложения. Я понимаю что в сети есть множество полезных сетов иконок, но этот почему то затронул меня больше всего.
читаем дальше...
Всего голосов 72: ↑63 и ↓9+54
Комментарии32

3. Metaprogramming patterns — 20 кю. Замыкания

Время на прочтение7 мин
Количество просмотров5.9K
В предыдущем посте мы затронули важнейшую концепцию — замыкание (closure).
Суть этой концепции в том, что в любой блок как бы заключается «весь окружающий мир» так, как он виден в контексте, где блок создается. Правильнее сказать, что в блок заключается не весь окружающий мир (пространство имён), а фиксируется точка зрения на окружающий мир (пространство имён).
Читать дальше →
Всего голосов 32: ↑27 и ↓5+22
Комментарии8

Индикация языка ввода

Время на прочтение1 мин
Количество просмотров6.7K
После прочтения поста про пароль и раскладку клавиатуры решил набросать скрипт, который бы сигнализировал, на каком языке вводится пароль.
Читать дальше →
Всего голосов 52: ↑46 и ↓6+40
Комментарии53

13 плагинов для того, чтобы сделать Gedit более удобным редактором

Время на прочтение4 мин
Количество просмотров27K
Давайте уделим немного внимания старому доброму текстовому редактору Gedit. Он является дефолтным текстовым редактором для большинства Linux-дистрибутивов использующих Gnome в качестве оконного менеджера. Как выяснилось, и как мы в дальнейшем убедимся, Gedit поддерживает плагины, в числе которых есть много полезных и интересных.
Читать дальше →
Всего голосов 53: ↑51 и ↓2+49
Комментарии49

Проверка орфографии с помощью Google

Время на прочтение2 мин
Количество просмотров15K
Иногда в проекте требуется проверить данные на предмет орфографических ошибок, не полагаясь на познания пользователя по части языков. Тут нам сможет помочь компания Google, с таким их сервисом, как проверка орфографии, используемым в Google Toolbar. Но, к сожалению, Google не предоставляет открытого API для работы с ним.

Итак, краткое описание:
Для того, чтобы проверить текст нам нужно отослать его в POST на https://google.com/tbproxy/spell?lang=ru, где для смены языка следует заменить значение параметра lang на соответствующий по ISO 3166-1 alpha-2. Текст оформляется в XML вида:
<?xml version="1.0" encoding="UTF-8" ?><br/>
<spellrequest textalreadyclipped="0" ignoredups="0" ignoredigits="1" ignoreallcaps="1"><br/>
 <text>Текст для проверки</text><br/>
</spellrequest>
ignoredups — подсветка повторов
ignoredigits — считать цифры ошибками
ignoreallcaps — не проверять слова написанные капсом (подсказал pointum)

Если всё успешно, мы получаем ответ вида
<?xml version="1.0" encoding="UTF-8"?><br><spellresult error="0" clipped="0" charschecked="272"><br> <c o="27" l="13" s="0"></c><br> <c o="73" l="11" s="1">орфографии и орфографии</c><br> <c o="190" l="11" s="1">пользоваться</c><br> <c o="226" l="13" s="0">пред оставляет пред-оставляет</c><br></spellresult>
Атрибуты тега spellresult:
error — произошла ли ошибка
charschecked — количество проверенных символов

В нем идет перечисление допущенных ошибок (теги c), их параметры:
o — начало исходного слова в тексте
l — длина этого слова
s — точность результата

В самом теге c содержатся предполагаемые варианты написания слов, разделенные символом \t.

P.S. Когда этот текст уже был написан, случайно наткнулся на статью в блоге Paul Welter, которая, в принципе, описывает тоже самое…


UPD: Пользователь wayly написал на PHP класс для проверки текста с помощью этого сервиса, скачать можно по ссылке proxysoft.ru/files/spellchecker.zip (зеркало).

UPD2: mezhevikin подсказал ajax-решение с использованием этого сервиса — orangoo.com/labs/?page_id=3

UPD3: Список поддерживаемых языков

_________
Текст подготовлен в ХабраРедакторе
Код подсвечен в Source Code Highlighter
Всего голосов 88: ↑86 и ↓2+84
Комментарии45

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность