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

Данное направление можно и нужно оптимизировать на этапе вёрстки/frontend-разработки, поскольку, очевидно, что разметка, стили и скрипты принимают в рендеринге непосредственное участие. Для этого соответствующие специалисты должны знать некоторые тонкости.

Простите, но накипело.
Много шишек уже набито на тему безопасности сайтов. Молодые специалисты, окончившие ВУЗы, хоть и умеют программировать, но в вопросе безопасности сайта наступают на одни и те же грабли.

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


Итак, каким должен быть безопасный сайт?

Возможно, вам уже попадался на глаза этот приём. Это поле ввода, которое выглядит так, как будто в нем есть текстовая подсказка (placeholder), но при начале набора текста она не исчезает, а отодвигается в сторону. Мне нравится эта идея. Брэд Фрост написал очень хорошую статью об этом приёме, подробно рассмотрев все «за» и «против».

Большинство примеров использования этой техники полагаются на JavaScript. В один прекрасный день я зашёл на nest.com, увидел там этот приём и задумался: а нельзя ли реализовать то же самое без JavaScript? И вот что из этого вышло.

Вот так выглядит форма на nest.com:

Лучше один раз день потерять, а потом за 5 минут все согласовать

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

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

Планирование бюджета на ИТ можно разделить на три этапа:

Здравствуйте, меня зовут Алексей и я независимый разработчик игр. Два года назад я уволился из Wargaming чтобы немного поэкспериментировать и сделать MMO игрушку, в которую мне было бы интересно играть. Со временем ко мне присоединилась пара замечательных людей — Александр и Елена Дедковы. Сейчас я кратко расскажу что получилось из этой затеи.

Мы ходим в японские рестораны,
но не едим рыбу. Кто мы?

Максимально честный и открытый рассказ о том, как мы прошли путь от идеи до инвестиций и пошли дальше. Для самых шустрых в конце есть выводы.

Идея

Ровно год назад в декабре 2012 года мы сидели с женой в одном из ресторанов. Был новогодний ажиотаж, поэтому меню, как водится, не хватило на всех, а обслуживали достаточно долго. Даже чек пришлось ждать минут 20. Неделей ранее я впервые увидел в другом ресторане механическую кнопку вызова официанта. Тогда у меня в первый раз промелькнула идея о том, что неплохо бы каждому ресторану иметь электронное меню и такой же электронный вызов официанта. Сначала появилась мысль о маленьком Atom PC, который будет стоять в ресторане и по wifi принимать запросы от ресторанных планшетов. Подумал, обсудил с женой и забыл на пару недель. Спустя две недели ситуация с меню повторилась и тогда я понял, что все можно обернуть в красивый SaaS сервис. Сейчас, даже странно смотрится то, что эта идея не пришла ко мне сразу. Так появилась идея сервиса, который мы назвали «47 ресторанов».

От переводчика: CTO и кофаундер компаний GrantTree и Woobius Daniel Tenner делится своими мыслями по поводу привлечения финансирования начинающими предпринимателями. Он утверждает, что это сильно увеличивает риски, и я с ним соглашусь. По моему мнению, начинающим предпринимателям нужно идти в бизнес-инкубаторы и акселераторы, но вот только в большинстве случаев туда берут проекты с расчетом, что они сразу начнут привлекать дополнительные венчурные инвестиции после выпуска. Считаю, что это неправильно. Например, у меня есть проект, который слабо масштабируется и не очень привлекателен для инвестора, но он уже генерирует выручку. Я уверен, что смогу зарабатывать и развиваться за счет собственного оборота, зачем мне тогда инвестиции? Собственно, перевод:

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

JavaScript занимательный язык программирования.

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

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

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

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

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

Книга «Основы стиля в типографике» (The Elements of Typographic Style), которую стоит рекомендовать всем начинающим дизайнерам, начинается со слов:

Типографика существует, чтобы отдавать должное содержанию.

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

Правильное сочетания букв позволяет максимально ярко передать настроение текста. А лучше всего это умеют делать дизайнеры логотипов!

Пожалуй, самый популярный логотип, который демонстрирует «владение буквами» — это логотип FedEx, разработанный Линдоном Лидером (Lindon Leader). На первый взгляд, это обычное применение Futura Bold. Однако если присмотреться, видно, как были изменены буквы «E» и «x», чтобы образовалась стрелка:

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

Вкратце об истории вопроса

В сентябре 2009 года Пол Айриш (Paul Irish) огласил пуленепробиваемый синтаксис для записи деклараций @font-face. Синтаксис был компактным и в то время действовал во всех браузерах. Недавно стали поступать, со временем усиливаясь, жалобы на отказ шрифтов загружаться в Android — поэтому мы стали вместо того рекомендовать синтаксис «Mo' Bulletproofer», сочинённый Ричардом Финком (Richard Fink). К сожалению, синтаксису «Mo' Bulletproofer» требуется двойная запись деклараций, так что поддержка его сложнее.

Синтаксис Fontspring @Font-Face

А вот таким этому коду следовало бы быть с самого начала. Чистым, ясным и простым:

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?') format('eot'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

Что? Я не понял.

Хак Трюк, заставляющий этот код заработать — символ «?» вслед за именем файла EOT. Без шуток.

Как это срабатывает

Одно из самых важных правил пиара — не затрагивать негатив в собственном контенте. Это просто увеличит количество контактов аудитории с вредной информацией. А оправдаться практически невозможно: даже самые сильные аргументы воспримет лишь небольшой процент рациональных людей, нацеленных на получение беспристрастной информации и формирование адекватной картины реальности. Но у большинства просто «остается осадочек». Следовательно, правильная стратегия для политика такова: если его очерняет конкретными (пусть и выдуманными) фактами конкретный человек в конкретном месте, не нужно давать на него ссылку и писать: «Посмотрите, какая ерунда! На самом деле все не так, и вот почему...» Наоборот, необходимо либо игнорировать нападки, либо расплывчато упомянуть о них: мол, «враг не дремлет, продуцирует безумие, но я продолжу спасать мир»…

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

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

Однажды на пикнике я заметил математиков, толпящихся возле игры, интереса к которой я ожидал меньше всего: крестики-нолики.

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



Но математики на пикнике играли в более изощренную версию игры. В каждой из клеток на квадратном поле они нарисовали поле поменьше:

Небольшой и полезный чеклист по usability. Проверьте свой ресурс перед тем как перейти к юзер-тестированию. Не претендует на «столп usability», которому необходимо следовать, но здесь собраны довольно полезные вещи.

Как часто Вы используете конструкции вида «5 минут назад», «Полчаса назад» на вашем сайте? А что если пользователь открыл вкладку и забыл про нее на пару часов? «5 минут назад» явно теряет свою актуальность.
Именно для того чтобы исправить это досадное недоразумение служит uptodate.js

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

Тот, кто хоть раз делал форму с <input type="file">, знает, что ничего сложного в этом нет, но есть неприятные моменты, возникающие по пути. Вот только некоторые из них:

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

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

Существует два основных подхода для стилизации скроллбара средствами HTML/CSS, каждый из которых имеет свои плюсы и минусы:

• Эмуляция скролла средствами JavaScript
• JavaScript обёртка над родным скроллом

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

Итак, три самые ненавистные вещи для пользователей: изменения, неожиданности, разрыв контекста.

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

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

Изменения

Компьютеры позволяют менять интерфейс (напоминаю, речь про интерфейс для решения задачи) очень быстро и легко. Появление новых функций ставит программиста/разработчика интерфейса/etc перед проблемой логического переупорядочивания элементов. Например, было три функции в top level, теперь их стало семь, давайте разделим их на две логические группы (3 и 4) — всё ок, никакого хаоса.
С точки зрения пользователя: раньше было три логические функции, теперь они куда-то исчезли, на их месте появились два меню, причём одно действие в первом меню, а оставшиеся два во втором. Ад, ужас, погибель, проклятье программисту.

Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб в минифицированном и сжатом виде и чуть больше 6 Кб исходного кода, базовые функции редактирования на основе execCommand, drag-and-drop для вставки изображений, поддержка стандартных горячих клавиш и ничего лишнего. Редактор работает в современных браузерах (Chrome 26, Firefox 19, Safari 6) и на мобильных платформах (IOS 6 iPad/iPhone, Android 4.1.1 Chrome). Зависимости — jQuery, jQuery HotKeys и Bootstrap.

Мы, в компании XIAG, в разных проектах постоянно решаем одну и ту же задачу: как хранить и показывать бинарные пользовательские данные. Это могут быть логотипы компаний, PDF файлы с описанием вакансий или приветственное видео. Причем это содержание нужно показывать на страницах сайта самым разнообразным способом: лого должно быть нужного размера, PDF — в виде маленькой превью-картинки, а из видео нужно показать пару стоп-кадров.

Уверен, такая задача знакома всем веб-разработчикам. В этой статье мы хотим поделиться нашим решением проблемы, опубликованным под открытой лицензией на ГитХабе.

Познакомьтесь с веб-сервисом Barberry (https://github.com/Magomogo/Barberry), который мы успешно используем уже около года. Суть сервиса в том, что он хранит оригиналы загруженных документов и способен по-разному отдавать их, конвертируя на лету.

Эта подборка полезных сниппетов, использующих HTML5, может помочь вам улучшить ваш сайт.

Автозаполнение в текстовых полях

Используя HTML5-элемент datalist вы можете создать текстовое поле с автозаполнением. Очень удобно!

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>