Веб-разработка *

День Программиста традиционно отмечается на 256-й день года. Число 256 выбрано потому, что это количество чисел, которые можно выразить с помощью одного байта. В високосные годы этот праздник попадает на 12 сентября, в невисокосные — на 13 сентября.

Часто, когда требуется решить какую-то задачу на новом или старом и позабытом языке возникают довольно простые вопросы, например у меня сегодня возник вопрос как сделать проверку на null (nil, none, nothing, empty) в Tcl.

RosettaCode — хрестоматия программирования, содержит решения типовых задач на разных языках, вот например решение моей.

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

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

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

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

Пятнадцать лет назад трудно было представить, что когда-нибудь HTTP, HTML, CSS и Javascript станут основными технологиями для доступа к информации и заменят целые классы десктопных приложений. Например, вот десять примеров того, что сложно было ожидать от веб-технологий в 2010 году, но они это делают.

1. Интерактивный рендеринг физики ткани


2. Распознавание объектов на видео в реальном времени

Обновление Хабра, проходившее вчерашним вечером, побудило написать краткую заметку. Во время тех.работ Хабр вывешивает одностраничную заглушку, текст на которой гласит о происходящих работах. Заглушка отдается по всем запрошенным адресам. Никакого редиректа: по какому адресу статьи не зайди — везде одинаковый текст о ремонте. При этом ответ сервера сопровождается статусом «HTTP/1.1 200 OK». Так делает большинство известных мне сайтов. И если человеку, по большому счету, все равно, то поисковик, проводящий индексацию сайта в этот момент, видит, что по адресу со статьей обновилось содержание — надо обновить индекс.

Это всё модальные окошки, которые придумали программисты:
[произошла какая-то фигня] — [OK] — Да это же ни фига не ОК!
@mad_escape

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

Fat-Free чем-то похож на известный Ruby-фреймворк Sinatra. Автор Fat-Free помешан на минимализме и чистоте кода, что положительно отразилось на этом простом каркасе для разработки самых разнообразных приложений.

Fat-Free состоит из одного файла и весит всего 55KB. При этом фреймворк обладает таким функционалом: специфический и довольно удобный шаблонизатор, гибкое кеширование, автоматическая защита от спама, интегрированные средства для юнит тестов, профайлер кода.

Он настолько маленький и быстрый, что даже может использоваться для контроля траффика Web-сервера.

Это, также, единственный фреймворк, который защищает Ваше приложение от хотлинкинга и DoS атак.

Сегодня удалось случайно одним глазком увидеть, что у них там на сервере происходит.
Все мы знаем, что EMS работает хреновато, а в последнее время у них частенько «Sorry. Server on maintenance. ».

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

PS. На всякий случай, EMS emspost.ru — служба экспресс доставки через которую жители exUSSR приобретают «качественные недорогие товары» из Китая. В последний год работает медленно, доходит все за месяц а не 6-7 дней как они обещают.

После всего этого на ум приходит только один вопрос: И этим людям мы доверяем наши посылки на 1000$/месяц, а кто и больше?

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

И если некоторые для этого занимались сжатием кода при помощи PNG, то мы решали обратную задачу — сжимали PNG при помощи js кода.

Очередная порция экспериментов на HTML5. Автор просит не использовать их в спорах HTML5vsFlash :)

Пару недель назад все начали писать о предстоящей майкрософтовской конференции PDC (Professional Developers Conference). В частности, Дуг Рейли написал пост «Кто управляет вашей карьерой?». Многие прочитали и сослались на пост, а некоторые (например, Сэм Джентайл или Роберт Херлбат) даже развили идею в ответных постах.

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

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

Не так давно на Хабре уже писали о контесте 10К Apart — соревновании на лучшее веб-приложение общим объемом до 10К, созданное с использованием только клиентских технологий: (HTML, CSS, Javascript, SVG и т.д).



Я хочу представить вашему внимаю нашу работу для этого контеста, которую мы с private_face делали по вечерам в течение двух недель: адвенчуру в стиле dungeon-crawler под названием «Fontanero» (исп. водопроводчик).

Что такое HTML-валидация?

HTML-валидатор производит несколько проверок Вашего кода. Основные из них:

1. Валидация синтаксиса — проверка на наличие синтаксических ошибок. <foo bar="baz"> является корректным синтаксисом, несмотря на то, что <foo> не является допустимым HTML-тэгом, так что проверка синтаксиса является минимально полезной для написания хорошего HTML.
2. Проверка вложенности тэгов — тэги должны быть закрыты в обратном порядке относительно их открытия. Например, эта проверка отлавливает ошибки с неправильно закрытыми <div>.
3. Валидация DTD — проверка соответствия Вашего кода указанному Document Type Definition. Она включает проверку названий тэгов, атрибутов, и «встраивания» тэгов (тэги одного типа внутри тэгов другого типа)
4. Проверка на посторонние элементы — проверка выявляет все, что есть в коде, но отсутствует в DTD. Например, пользовательские тэги и атрибуты.

Имейте ввиду, что это логические проверки, и не важно как реализован валидатор. Если хотя бы одна из проверок не проходит успешно, то HTML считается невалидным. И в этом заключается проблема.

Любовь к HTML5 продолжает вдохновлять Поля Айриша. Во-первых, он подарил нам Modernizr, а сейчас он объединился с Divya Manian для создания шаблона HTML5, который использует передовые техники, чтобы Вы могли начать использовать его в своей практике.

Он, в сущности, является хорошей отправной точкой, состоящей из HTML и CSS, предлагающим также и структуру папок, которая работает. Но созданным с учётом многих лет передового опыта профессионалов в разработке клиентской части. Загляните в исходные тексты, чтобы почувствовать, что находится внутри. А если вы думаете, что этого слишком много, просто удалите лишнее.

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

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

1. Верстка, аутсорсинг и технические задания

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

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

Последнее время, в области баз данных, внимание сконцентрировано на интенсивно развивающихся NoSQL решениях. Складывается обманчивое впечатление, что в секторе реляционных СУБД затишье: основные продукты давно известны, все ниши заняты. Казалось бы, новому игроку сюда так просто не попасть. Только если речь идёт не о проекте с пятнадцатилетней историей, не о развитой объектно-реляционной СУБД с открытым кодом, оптимизированной для использования в веб-приложениях, не о системе, которая имеет поддержку хранимых процедур, партиционирование, опции высокой доступности, репликацию и распределённые транзакции. Имя этой «тёмной лошадки» — CUBRID. И, судя по заявлениям создателей, она претендует на лавры MySQL.

Сегодня мне кинули ссылку на прикольный сервис для быстрого генерирования изображений-заглушек. Может пригодиться для html-верстки. На мой взгляд, это удобно тем, кто и так использует заглушки — экономит время при вёрстке, т.к. сами заглушки уже готовы. Можно цвета/размеры подбирать, меняя только числа/буквы в коде, не отвлекаясь на сам файл картинки — и сразу видеть эффект. И сами размеры видеть написанными, если нужно, чтоб к коду не возвращаться для проверки. Или вместо размеров можно текст добавить, чтоб всегда знать, для чего эта заглушка (типа «Бан(н)ер» или там «Лого», или «Фотография»).

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

<img src="http://placehold.it/350x50" />

и получаете:


Update. Благодаря усилиям k0rv1n, найден вариант этого сервиса, только лучше :)
Во-первых, там поддерживается кириллица. Во-вторых, там даны ссылки на исходники для разных языков.
Автор dummyimage.com — тот же Russell Heimlich, что и у placehold.it. У placehold.it есть ещё один автор, но будем считать, что он делал дизайн (дизайн там правда круче, но видимо как раз из-за понтового шрифта Unicode и не выходил).

Примеры (см. под хабракатом) я поменял с placehold.it на dummyimage.com, раз уж он функциональнее…

Что мы имеем:
1. компьютер с осью и установленными mysql, apache, php (тут ничего писать не буду, благо мануалов хватает)
2. интернет с присваиваемым динамическим IP, роутер.

Что мы хотим:
1. Что бы люди вбивая в адресную строку браузера доменное имя второго уровня (купленное нами или полученное на каком либо сервисе), попадали на наш сайт (в независимости от того на каком IP он сейчас находиться).
2. Хотим это бесплатно.

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

Если вы полагаете, что масштабируемость Вашего нового, web приложения — это основное на чем Вам надо сосредоточиться,… подумайте дважды. Можно с уверенностью утверждать, что в обозримом будущем массового нашествия пользователей не ожидается. Вместо этого этого следует готовиться к медленному увеличению количества посетителей, с возможным пиком увеличения их числа (прим. переводчика: хабраэффект например). Но сосредотачиваться на архитектуре и масштабируемости Вашего приложения до миллионов пользователей — не очень хорошая идея. Миллионы это много. Скорее следует приготовиться к борьбе за первую тысячу пользователей. Возможно даже меньше, если Ваш сервис платный.

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

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

Есть ряд книг, которые, на мой взгляд, являются своеобразными «библиями» для тех, кто решил связать свое будущее с разработкой ПО. С одной из них я хотел бы начать цикл статей. Это книга Эрика Рейнмонда, «Искусство программирования под Unix». Я бы рекомендовал эту книгу не только тем, кто выбрал для себя открытые операционные системы. В основе лежит довольно универсальная философия, пригодная абсолютно всем, связавшим свою профессию с программированием.

Эрик Реймонд выделяет 17 правил этой «философии». Я буду посвящать по одной заметке на каждое правило. Я постараюсь изложить эти концепции в максимально понятной, упрощенной и популярной форме, насколько это будет возможно.

Начнем с самого первого правила — Правила модульности. Оно звучит так: «Простые блоки связывайте друг с другом ясными и понятными интерфейсами» (Rule of Modularity: Write simple parts connected by clean interfaces).