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

• Нет возможности оптимизировать автоматически много файлов
• Сложно и неудобно использовать в рабочем процессе

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

Оптимизация изображений с помощью командой строки

Для каждого png файла используются optipng и pngcrush, а для jpg — jpegtran. Для начала опробуем optipng:

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

В недалекие времена, когда flickr ещё не предлагал терабайт под хранение фотографий, а BitTorrent Sync только вышел на экраны интернета в своей небезопасной альфа-версии, была у меня потребность: делиться фотографиями с друзьями и не только. Но как обычно у программистов это бывает, под словом «делиться» стоит гораздо больше, чем выложить фоточки во ВКонтактик. А именно:

• Выложить куда-нибудь фотографии на свой сервер с красивым и простым web-интерфейсом.
• Просто и массово заливать и скачивать оригиналы изображений.
• Иметь возможность разграничить доступ к определенным альбомам.
• Попытаться связать это с локальным сетевым хранилищем, чтобы не дублировать фотографии.
• По возможности удалять оригиналы фотографий с сервера через какое-то время и оставлять только фотографии с измененным размером.
• По-максимуму бесплатно! :)

После таких мыслей в голове начинает зарождаться идея: «Надо накреативить...» — и ты уже не можешь остановиться.

В проекте который мы сейчас разрабатываем много работы с фотографиями, в результате чего скорость графической библиотеки является фактически главным фактором при оптимизации сайта. Не секрет что ImageMagick давно стал стандартом разработки на PHP, хотя уже некоторое время его оттуда сталкивает форк под названием GraphicsMagick. Мне стало интересно насколько сильно они отличаются и сколько форы могут дать старому доброму GD. К счастью как раз недавно вышел графический модуль для PHPixie который поддерживает все три библиотеки, что и позволило мне провести достаточно интересные тесты.

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

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

При разработке дизайна необходимо учитывать корректность его отображения не только на больших экранах, но и на мобильных устройствах. И в первую очередь это касается читаемости контента. Поэтому необходимо уделять особенное внимание типографике, которая является основой веб-дизайна. На эту тему есть полезная статья шестилетней давности — Web Design is 95% Typography (автор Oliver Reichenstein).

Для начала рассмотрим основные моменты веб-типографики с примерами на мобильных устройствах.

В этой статье очень подробно описано пошаговое создание адаптивного меню для сайта с несколькими вариантами компоновки элементов (в зависимости от размера экрана девайса). Для поддержки retina-экранов используется иконочный шрифт.



Демо / Скачать исходники

В заметке собраны сайты с обучающими материалами для веб-дизайнеров и веб-разработчиков. Старался не повторяться с постом 27+ ресурсов для онлайн-обучения хабраюзера nicolausYes.

Academic Earth

Множество бесплатных лекций, в том числе от известных университетов (Гарвард, MIT, Стенфорд и др.).

Эта статья первая из серии статей, описывающих xdebug, свободной библиотеки для разработчиков PHP. xdebug – это расширение для PHP, написанное Derick Rethans, одним из разработчиков языка PHP. В данной статье описывается как установить xdebug и рассказывается о его базовых возможностях. В последующих частях мы детальнее взглянем на главные возможности xdebug, а именно трассировку, профайлинг, отладку кода.

Это перевод 1.17 версии руководства от Rafe Kettler.

Содержание

1. Вступление
2. Конструирование и инициализация
3. Переопределение операторов на произвольных классах
   • Магические методы сравнения
   • Числовые магический методы
4. Представление своих классов
5. Контроль доступа к атрибутам
6. Создание произвольных последовательностей
7. Отражение
8. Вызываемые объекты
9. Менеджеры контекста
10. Абстрактные базовые классы
11. Построение дескрипторов
12. Копирование
13. Использование модуля pickle на своих объектах
14. Заключение
15. Приложение 1: Как вызывать магические методы
16. Приложение 2: Изменения в Питоне 3

Вступление

Что такое магические методы? Они всё в объектно-ориентированном Питоне. Это специальные методы, с помощью которых вы можете добавить в ваши классы «магию». Они всегда обрамлены двумя нижними подчеркиваниями (например, __init__ или __lt__). Ещё, они не так хорошо документированны, как хотелось бы. Все магические методы описаны в документации, но весьма беспорядочно и почти безо всякой организации. Поэтому, чтобы исправить то, что я воспринимаю как недостаток документации Питона, я собираюсь предоставить больше информации о магических методах, написанной на понятном языке и обильно снабжённой примерами. Надеюсь, это руководство вам понравится. Используйте его как обучающий материал, памятку или полное описание. Я просто постарался как можно понятнее описать магические методы.

Всем привет. Недавно появилась необходимость поднятие VPS на debian 7 за скромные деньги.
О плясках с бубенчиком я бы хотел описать тут в подробностях.
Всё в этом посте было собрано на просторах интернета, доработано, разжевано и скинуто в одну статью.


Выбор пал на https://account.nt-vps.ru/register/ из-за низких цен и неплохой стабильности за эти деньги(правда 2 дня были серьезные проблемы с сетью). Был взят VPS за 5 рублей в сутки(или за 150р в месяц) с небольшими конфигурациями ОЗУ 128mb и 10Гб на диске.

В автоматическом режиме был установлен Debian 7.0 x86-64 Wheezy и VPS была готова к работе.
64 битная сиcтема была выбрана лишь для моих личных нужд, а вам же советую, на этом VPS, ставить x86.

В позавчерашнем выпуске «Mozilla Hacks Weekly» увидал гиперссылку «Morris.js», пошёл по ней, почитал, порадовался — а теперь и вам поведаю.

Morris — это легковесный джаваскрипт (всего-то 3052 байта после миниатюризации) с открытым исходным кодом (распространяемым по упрощённой лицензии BSD), который для работы требует jQuery и Raphaël и строит с их помощью графики на простой сетке горизонтальных линий, наподобие такого:



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

Графики реагируют на мышь: вспучиваются точки, соответствующие указанному мышью моменту во времени, и подле них появляются подсказки.

Достоинство скрипта — простота API. Приведённый мною пример создаётся вот таким вызовом:

// поквартальные данные, тонкие линии, цвета их заданы в явном виде
Morris.Line({
  element: 'quarterly',
  data: [
    {q: '2009 Q3', a: 100, b: 75},
    {q: '2010 Q2', a: 75, b: 50},
    {q: '2010 Q3', a: 75, b: 50},
    {q: '2011 Q1', a: 50, b: 25},
    {q: '2011 Q3', a: 50, b: 25},
    {q: '2011 Q4', a: 75, b: 50},
    {q: '2012 Q2', a: 100, b: 75}
  ],
  xkey: 'q',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  lineColors: ['#167f39','#044c29'],
  lineWidth: 2
});

Эта статья о некоторых технических аспектах реализации бесплатного сервиса для загрузки, хранения и просмотра видео. Будут рассмотрены вопросы настройки серверного программного обеспечения, даны примеры команд для конвертации видео и примеры кода на языке PHP.

Доброго времени суток. Вышла первая стабильная версия нового шаблонизатора Fenom. Для нетерпеливых, Fenom — это легковесный (статистика прилагается), быстрый (бенчмарк прилагается), гибкий (API прилагается) шаблонизатор, который может стать удачной заменой шаблонизаторам Twig или Smarty.

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

На разработку собственного варианта подсказок меня натолкнул Tipsy Tooltip используемый в Twitter Bootstrap. По началу я пользовался им, но все возможности плагина мне были не нужны и, будучи перфекционистом, лишний код смущал естество. Решил: напишу-ка я то, что нужно мне и ни строчкой больше. Написал и осмеливаюсь поделиться рецептом с сообществом. Авось кому-то приглянется…

Привет, Хабр!

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

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

Создание интерфейсов в проектировании больших сайтов – это самый объемный и один из самых важных этапов. Поэтому я отдельно решил выделить принципы и законы проектирования интерфейсов.

• Принцип KISS. От англ. «keep it short and simple». Интерфейс должен быть простой и понятный, задачи должны решаться минимальным числом действий, все должно быть понятно и очевидно.
• Не заставляйте думать. Нужно избегать сложных действий, которые заставляют пользователей думать.
• Убираем очевидное. Не стоит показывать очевидные элементы интерфейса, нужно сосредоточиться только на действительно необходимых вещах.
• Соотношение сигнал / шум. В каждом интерфейсе есть важные элементы (сигналы) и маловажные или даже бессмысленные для определенной части системы (шум), естественно, нужно концентрироваться на сигналах и избегать шума.
• Проверенное лучше модного. Не стоит цепляться за моду и делать что-то только потому, что так делают другие, лучше отдать предпочтение проверенным элементам интерфейса.

В PHPStorm есть встроенная возможность подключения автодополнения имен таблиц и полей в редакторе кода, однако не все об этом знают.



Если у вас код отображается примерно так, то прошу под кат.

Вступление

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

Уровень подготовки веб-мастера: любой

В Интернете немало сайтов, содержание которых доступно на нескольких языках, и таких ресурсов становится все больше. Тем не менее, создание многоязычного веб-сайта – это не просто перевод или локализация (L10N). Здесь необходимо принимать во внимание множество других аспектов, каждый из которых относится к интернационализации (I18N). В Справке Google вы можете найти информацию о том, как оптимизировать для Google Поиска мультирегиональные и многоязычные сайты, а в этой статье мы хотим поделиться несколькими советами по созданию ресурсов для многоязычной аудитории.

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

Язык и направленность текста тесно связаны с содержанием страницы. В этой связи старайтесь всегда использовать разметку, а не таблицы стилей. Задавайте язык и направление текста (по крайней мере для материалов в html) с помощью псевдоклассов lang и dir:

<html lang="ar" dir="rtl">

Мы не советуем применять оригинальные решения, такие как специальные классы или идентификаторы.
Полагаться на таблицы стилей не стоит: пользовательские агенты могут игнорировать такие свойства, как направление или двунаправленный текст Unicode. Для XML ситуация прямо противоположна: поскольку XML не поддерживает специальную разметку для интернационализации, в этом случае рекомендуется использовать таблицы стилей.