Frontend Guidelines

Правила и руководства оформления, форматирования HTML, СSS и JavaScript кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

От переводчика

Приветствую всех снова, меня зовут Максим Иванов, и сегодня я подготовил перевод, который, возможно, окажется для вас полезным. Бенджамин Де Кук (Benjamin De Cock), разработчик из Бельгии, собрал некоторые указания по оформлению кода, которые позиционируют себя как лучшие практики по написанию HTML, CSS, JS. Конечно, существует множество рекомендаций, например, есть хороший гайдлайн от Google, наверное, есть еще что-то, однако, если следовать хотя бы некоторым из них, то можно надеяться, что ваш код станет лучше. В отдельных случаях следование этим гайдлайнам не полезно, а совсем наоборот. В общем и целом, все зависит от вашего опыта и виденья дела, если вы новичок, то скорее вам будет полезно оценить то, что пишут другие и в обществе считается верным, если вы гуру, то наверное вам и не нужны гайдлайны, которые написаны непонятно кем на ваш взгляд. Итак, приступим.

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

impress.js — популярный фреймворк предназначенный для создания неординарных, искрящихся профессиональным блеском презентаций, которые демонстрируются просто в браузере^*.

В опубликованной несколько дней назад статистике GitHub impress.js занимает 2-е место по количеству звездочек среди проектов, созданных одним автором. Совсем небольшой фреймворк, главный прикол которого заключается в том, что он служит не для создания слайдов, а для отображения переходов между слайдами и, очень часто, для отображения сразу нескольких слайдов в трехмерном пространстве.

3D трансформации между слайдами делают игру.

Предыстория: я веду свой паблик ВК о веб-разработке, в связи с чем я каждый день имею дело с большим количеством материалов о веб-разработке. Однажды (3 месяца назад) мне пришла в голову идея опубликовать на хабре подборку «30 полезных сервисов для веб-разработчика». Тот пост набрал почти 100 000 просмотров, и мне приятно, что он оказался полезен сообществу. С тех пор у меня поднакопилось больше 30 новых сервисов, которые будут полезны как разработчикам, так и дизайнерам. Лучшие из них я собрал в этом посте. Осторожно, под катом много картинок!

Да, да, это очередная статья про html5 и тэг < video >. Но главным ее отличием будет то, что здесь будут рассмотрены самые базовые понятия и теории. Так что приготовились внимательно читать и записывать, let html5 rocks!

Визитные карточки – такая же привычная часть бизнеса, как и электронная почта или телефон. Многие уже давно предрекают им смерть в связи с «прогрессом» QR-кодов, соцсетей и передачи файлов, но они до сих пор живее всех живых. Мы пока не можем обойтись без бумажных карточек для передачи контактных данных нашим клиентам и партнёрам. QR-коды не стали популярными, так как требовали установки дополнительных приложений, хорошего освещения и были слишком громоздкими для хранения всех нужных данных. В соцсетях зарегистрированы не все и хранить там персональные данные порой непозволительная роскошь. А передача файлов с помощью различных технологий типа AirDrop, Alljoyn или Beam, будем честны, пока недостаточно удобна и широко распространена.

И всё-таки есть способ добавить немного магии в ваши бумажные визитки и быстро передать ваши контактные данные прямо в записную книжку телефона партнёра. Я говорю об NFC.

Собственно, с бумажными визитками понятно, что делать: сканируем и распознаем с помощью ABBYY Business Card Reader и сохраняем в контакты. Но вот для того, чтобы добавить визиткам «айтишность» и некоторый шарм, нужно что-нибудь дополнительное. В этой роли отлично сыграет NFC-метка.

Сегодня JavaScript лежит в основе большинства современных веб-приложений. При этом за последние годы появилось большое количество JavaScript-библиотек и фреймворков для разработчиков Single Page Application (SPA), графики, анимации и даже серверных платформ. Для веб-разработки JavaScript используется повсеместно, и поэтому качество кода обретает всё большее значение.

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

Доброго времени суток, уважаемые хабравчане. Сегодня я хочу поделиться с вами одним небольшим событием — ровно год назад, 15 августа 2013 года я опубликовал свой первый дайджест для веб-разработчиков. С тех пор было опубликовано 25 выпусков и мои подборки обрели некоторую «популярность», а мне приятно ощущать себя «полезным» для хабраобщества.

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

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

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

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

На текущий момент все более-менее просто. Мы можем верстать иконки с помощью SVG, создавать иконочные шрифты, ну и никуда не делась старая добрая техника с применением растра, в частности PNG. Правда добавились некоторые нюансы с появлением кучи HDPI устройств с совершенно разной плотностью пикселей.

Зачем вам это?

• Если вы знаете как делать сайт, этот метод поможет вам убедить заказчика, почему вы предлагаете ему именно этот вариант.
• Если вы заказываете сайт, то сэкономите от 2 до 10 часов объяснений что вам нужно и зачем.
• Если вы стартапер, то вся ваша команда сможет участвовать в создании нового сайта или лэндинга. Тот самый случай, когда одна голова хорошо, а команда лучше.
• Если вы учите стартаперов, то сможете помочь им выглянуть из позиции «я знаю как надо» и без сопротивления подвести их к началам CusDev-a.

Как превратить посетителей сайта в ваших клиентов?

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

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

В глаза бросились изменения в интерфейсе Youtube. И так как достаточно часто встречаю такую проблему, то решил сделать пост об этом.

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

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

NB: Микрокопия — небольшие фразы или даже отдельные слова, которые добавляют вашему сайту индивидуальности, повышают лояльность клиентов и побуждают их совершить целевое действие.

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

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

История моего опыта в интернет коммерции началась в 2011 году, когда я «дорос» до ведения достаточно трудоемкого проекта. Опыт создания и верстки сайтов визиток и сайтов на CMS-ках приобрел еще в 2003 году, тогда пару раз делал клансайты для War3TFT, после этого делал еще 5-6 сайтов на Joomla, в основном тоже для гильдий и кланов. Конечно, это нельзя назвать полноценным ресурсом, но минимальные нужные знания, перед открытием своего интернет-магазина, уже имелись.

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

Под катом хочу рассказать о том, как этих ошибок избежать.

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

По данным MarketingSherpa покупатели, которые используют поиск по сайту, совершают покупку в 2-3 раза быстрее, чем другие. Для десятков миллионов покупателей поиск – это самый удобный метод для того, чтобы найти нужную им информацию в дебрях сайта. Когда речь идет об интернет-магазинах, жизненно важно помочь посетителю в его поисках. Вот несколько критериев, которым должен отвечать любой поиск:

Основное:

1. Поместите окно поиска на каждой странице вашего сайта.

2. Оно должно легко находиться. Обычно пользователи ожидают увидеть его в верхней части экрана.

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Привет, читатель хабра.

Наверное, ты сразу спросишь меня: «Да кто ты такой, чтобы давать мне советы?». Итак, немного обо мне.

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

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

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

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