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

Первое впечатление — это все. Пословица «По одежке встречают, по уму провожают» актуальна не только в жизни, но и в дизайне. Впечатление от дизайна состоит из множества факторов, и один из важнейших — это цвет.

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

Основные цвета (Primary Colors)

Основные цвета палитры — красный, желтый и синий. Если говорить об основных цветах на экранах различных устройств — это RGB, красный, зеленый и синий.

Швеция. Население в два раза меньше, чем сейчас проживает в Москве. Но это не помешало им подарить миру Икею, H&M, Volvo, Saab, Ericsson и Карлсона.

А еще родом из Швеции замечательная компания Axis Communications или просто — Axis. Она не нуждается в представлении для тех, кто знаком с рынком IP-видеонаблюдения. Хотя бы потому, что в 1996 году Axis выпустила первую в мире IP-камеру.

    - Google выше ранжирует сайты, которые загружаются быстрее.
    - Если на eBay или Amazone увеличить время загрузки страниц на 9% они теряют 1% прибыли.
    - Сделать свой сайт быстрее, чтобы сэкономить на клиентском трафике и на числе обращений к серверу.

.htaccess — наш герой

Профессионалы знают, что такое htaccess.
Тем кто собираются уйти с народ.ру на php-хостинг только предстоит узнать, что это такое.
Те кто только что установил свои первые jooml'у или wordpress срочно должны узнать о нашем герое — htaccess

Зачем нам .htaccess ?

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

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

А ещё htaccess может решить некоторые вопросы с безопасностью вашего сайта.

А ещё…

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



Итак…

1. Отсутствие фирменной концепции (логотипа, слогана, и т.п.).

Первое, во что упирается мой взгляд при заходе на страницу – логотип сайта и слоган под ним. И благо, если на сайтах магазинов есть хотя бы логотип. Из 50 магазинов, выданных гуглом по разным конкурентным запросам, логотипа не было у 6. Не так уж и много, но и не так уж мало.

Многие владельцы интернет-магазинов банально не понимают (лично спрашивал) – огромная часть продаж строится на бренде. У человека в голове есть ряд ячеек, заполненных брендами известных фирм. К примеру, «наушники – Koss», «операционная система – MacOS X», «газировка – Coca-Cola», и т.д. и т.п. Первоочерёдная задача фирменой концепции – заполнить ячейку «интернет-магазин — ?» вашим названием. Тогда пользователь будет возвращаться снова и снова.

В последнее время появилось множество иконочных шрифтов для нужд веб-дизайнеров, но такой как Pictonic я вижу впервые. Это «логотипный» иконочный шрифт, где собрано более 220 логотипов известных сервисов, браузеров, операционных систем, языков программирования и т.д. Среди символов конечно нет русскоязычных сервисов.

Что такое SugarJS?

SugarJS — это open source (лицензия — MIT) библиотека Javascript, который расширяет нативные объекты полезными методами. Она разработана, чтобы быть интуитивным, ненавязчивым инструментом, повышающим выразительность кода, который позволял бы делать больше с меньшим количеством кода и меньше задумываясь над рутиной.

На самом деле у них очень информативный и простой сайт — где все уже хорошо написано.
Я просто постараюсь обозначить основные моменты.

Кратко...

• Расширяет нативные элементы Javascript полезными, интуитивными методами.
• Прост для понимания и в использовании.
• Метод SugarJS не используется при наличии метода в родной реализации браузера.
• Имеет систему тестирования, имеющую огромный набор тестов.
• Расширяет возможности работы с датой и временем, обеспечивает их форматирование на нескольких языках (русский есть).
• Отлично ладит с другими фреймворками и сторонним кодом.
• Модульность, вы можете включать только нужные пакеты.
• Полностью совместимый ECMAScript.
• Заявлена поддержка всех основных браузеров, включая мобильные.
• Поддерживает Node.js.
• Имеет хорошую и удобную документацию.

Заинтересовало? Добро пожаловать под кат.

Статья написана после прочтения статьи Копи деньги смолоду или пара утверждений, легко проверяемых в Excel.

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

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

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

Первая типографская революция произошла во Всемирной Паутине настолько давно, что приходится производить поиски, чтобы установить подробности. Кажется достоверным то, что пишет 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 удаляли книги Оруэлла за нелицензионность (даже честно купленные — просто оставляя стоимость их на счету покупателя в уплату). Так и тут. Внешний шрифт может неожиданно подохнуть, даже купленный заранее.

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

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

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

К своему удивлению, я не нашёл на Хабре исчерпывающей статьи на тему защиты от инъекций. Поэтому решил написать свою.


Ещё только начав интересоваться темой защиты от инъекций, я всегда хотел сформулировать набор правил, который был бы одновременно исчерпывающим и компактным. Со временем мне это удалось:

Правила, соблюдение которых гарантирует нас от инъекций

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

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

Но вперёд, читатель — перейдём уже к подробному разбору.

В этой статье я расскажу о некоторых новшествах, появившихся в проекте AMatch с момента написания первой статьи.

Напомню, что AMatch — класс, с помощью которого валидация входных параметров из большого набора if-ов превращается в удобную, лаконичную запись. К примеру:

Example: simple

$match = AMatch::runMatch($params)
	->doc_id(0, '<') // Левое значение меньше
	->subject_id(0, '!=') // Не равен нулю
;
$result = $match->stopMatch();
if (!$result) {
	die(var_export($match->matchComments(), true)); // для наглядности умрём
}

Товарищи! Эта статья не для high-high-highload систем. Скорость работы представленных решений определённо меньше простейших проверок. На многотысячных или очень глубоких структурах применять предлагаемый подход крайне не рекомендуется. В этом топике побеждает быстрое кодирование, а не быстрый код.

Без длинных

Давайте без длинных вступлений, но всё же с предысторией. Однажды в рамках создания очередного очень важного компонента веб-сервиса нам понадобилось проверять уйму очень разных входных параметров (в данном случае, пришедших через $_REQUEST). Компонент был очень сложный, внутренняя и внешняя логика вызывала ежедневный баттхёрт между всеми участниками, а отдуваться приходилась немногим «избранным» программистам, которые писали, переписывали, выпиливали и запиливали заново. Когда на вход в систему с фронтенда падают десятки разных переменных, в том числе массивов, программисты при этом делают перекрёстные задачи (меняя логику) и мешают друг другу — код очень быстро разрастается, количество цепочек if-ов начинает занимать не одну страницу. Возвращаться к такому коду всё более и более чуждо ранимой душе. Тесты уже не очень помогают, т. к. каждое изменение логики приводит к изменению тех же тестов, в которых ещё надо вспомнить, понять и простить. Вот тогда и встал вопрос о создании удобного способа проверять весь входной поток каким-то приятным глазу способом, да чтоб всегда и везде получать фидбек про ошибки в однотипном виде. Акцент тут изначально стоял именно на удобстве для разработчиков, строго прошу в дальнейшем иметь.

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

В «Smashing Magazine» 12 августа выложили гиперссылки, ведущие к тридцати бесплатным шрифтам, и краткий обзор их.

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

Во-первых, выпишем оттуда названия шрифтов по порядку в столбик да пронумеруем:

_{1) Piron
2) St Ryde
3) Nobile
4) Mr Jones Book
5) Pigiarniq Inuktitut
6) St Marie
7) Code
8) VAL Stencil
9) akaDora
10) Arcus
11) Crimson Text
12) Acid
13) Real Origami
14) Quadranta
15) Balonez Fantasia
16) Juice
17) Geomancy Typeface
18) Prociono
19) Edelsans
20) Neu Eichmass
21) Ingleby
22) Ibarra
23) Notice 1: Packaging Symbols
24) Notice 2: Navigation symbols
25) Notice 3: Cloth Symbols
26) Glyphyx
27) Free Symbol Signs Collection
28) Rally Character Set
29) Oblik Serif Bold
30) Paranoid
31) 01.BASE}

Как видно, счёт-то не такой уж и ровный. (Хорошо ещё, что обсчитались в нашу пользу.)

Во-вторых, из «тридцати» представленных шрифтов шесть («Notice 1: Packaging Symbols», «Notice 2: Navigation symbols», «Notice 3: Cloth Symbols», «Glyphyx», «Free Symbol Signs Collection», «Rally Character Set») являются попросту сборниками монохромных значков, а не символов какого-нибудь алфавита. Ещё девять шрифтов («01.BASE», «Paranoid», «Oblik Serif Bold», «Neu Eichmass», «Geomancy Typeface», «Balonez Fantasia», «Quadranta», «Real Origami», «VAL Stencil») обладают такими выдающимися декоративными особенностями начертания, которые делают их пригодными только для оформления заголовков, лозунгов и других крупных надписей — да и то не всяких.

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



Ingleby — прекрасная антиква (со вкусными очертаниями буквы «a», например), которую разработал David Engelby. Идёт в четырёх начертаниях (обычное, курсивное, полужирное, полужирный курсив). Бесплатно для всех видов использования, но требует упоминания автора шрифта.

_{Шрифт лежит на dafont.com — это, насколько я понял, не очень полезно, потому что сайт не поддерживает многопоточное скачивание шрифтов (а значит, и докачку после обрыва).}

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

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

Что должно получиться

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

Демонстрация

Активность хакеров никогда не сходит на нет. Например, только по данным одного хакерского сайта zone-h.org (см. раздел Onhold), взламываются ежедневно сотни сайтов. Вашего сайта там точно нет?

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

Как осуществляется взлом сайта?

В России рынок электронной коммерции растет очень быстро. Для тех, кто не имеет опыта открытия интернет-магазина, но задумывается об этом, описываю ключевые особенности построения данного бизнеса и основные моменты, на которые необходимо обращать внимание.
Большинство рекомендаций посвящены тем, у кого нет бюджета на создание крупного интернет-магазина. Примерная сумма затрат на небольшой магазин от 50 000 до 1 млн. руб.

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

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

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

PHP один из самых широко используемых языков для создания вебсайтов. PHP фреймворки, такие как Zend, CakePHP, CodeIgniter и т.д и open source классы и библиотеки упростили разработку.
Независимо от того, являетесь ли вы опытным разработчиком или новичком, инструменты, которые вы используете, имеют прямое влияние на вашу продуктивность. Здесь собран список действительно полезных утилит и расширений для PHP разработчиков, которые помогут ускорить разработку, и улучшит итоговое качество кода.