Плейсхолдеры

Setup

Placeholders.js is incredibly easy to use. Just download the script,
include it at the bottom of any web page and let it do the rest. It’s just one extra line in your markup.
Browsers that support the attribute natively will be unaffected and work as usual.

If you want a bit more control over how the polyfill behaves, you can configure it with HTML5
attributes on the root element.

Options

Is there an option that you think would be useful? Just
open an issue on GitHub and we’ll look
into adding it. Alternatively, fork the project and add it yourself!

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Сервис-воркеры (Service Workers)

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

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

Теперь давайте разберёмся с тремя основными событиями, с которыми нам придётся работать:

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

Первое, что нам нужно сделать при установке, это воспользоваться CacheStorage Web API для создания кэша для веб-приложения и хранения любого статичного контента (иконок, HTML, CSS и JS-файлов). Это очень просто сделать:

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

Меньше чем в 20 строках мы сделали так, что наше веб-приложение использует кэш для своих ресурсов. Позвольте пояснить оду вещь. В ходе разработки наш JS-код компилируется в файл . Это одна из причуд нашего development/production-окружения, и мы разберёмся с ней на следующем этапе.

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

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

После всех настроек, откройте в Chrome Dev Tools окно Application и посмотрите, всё ли работает как нужно. Сервис-воркер должен правильно зарегистрироваться, активироваться и запуститься. Если пролистаете вниз, поставите галочку Offline и обновите, то начнёт работать оффлайн-версия страницы, использующая закэшированные ресурсы.

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

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

Стилизация

Для стилизации плэйсхолдеров используются следующие правила:

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

Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:

В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для отдельных элементов (опробуйте на SassMeister):

Как правильно пользоваться плейсхолдером

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

Основные рекомендации по использованию плейсхолдера:

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

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

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

AJAX

AJAX (Asyncronous JavaScript And XML) существует уже немало лет, и каждый разработчик так или иначе использовал его в своей работе (большинство из нас — посредством jQuery). Здесь я не будут углубляться в устройство AJAX, поскольку в сети есть сотни источников получше, но хочу отнять у вас минутку времени, чтобы просто восхититься теми возможностями, которые эта технология даёт фронтенд-разработчикам.

С помощью AJAX мы можем запрашивать ресурсы из одного одного или нескольких мест (или локально, если страница расположена на том же сервере, что и запрашиваемый URI) и в любое время, без замедления работы веб-приложений или необходимости начать отрисовку всех данных. Фактически, мы можем не грузить любой контент на страницу, а затем просто запрашивать его, как только будет загружена пустая HTML-страница. В сочетании с RESTful API получается невероятно гибкое, высокопортируемое и удобное в сопровождении решение для веб-приложений.

TL;DR: AJAX — очень мощный инструмент, который в сочетании с RESTful API позволяет создавать по-настоящему динамичные веб-приложения, которые быстро загружаются и отображают контент из ресурсов в вебе.

Summary

If you use WordPress, you should probably use a maintenance plugin so you can control how your site looks while it is under development. Otherwise, go crazy!

As you’ve probably noticed, there’s a free stock photo site for everybody, regardless of whether you want an all-encompassing library or a specialty source.

Furthermore, the last thing you want to do is use the same image as everyone else. As such, we recommend identifying several options you’d be happy with and checking them all whenever you need a stock image. You’ll find something you like, and you’ll be able to find options that are off the beaten path.

Contributing Editor: Sherrie Gossett

Нужно ли пользоваться плейсхолдерами

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

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

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

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

Плейсхолдер вместо заголовка

Худший вариант: плейсхолдер используется вместо заголовка

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

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

Тем не менее, даже с полем для логина могут возникнуть затруднения — должен ли пользователь ввести свой логин или адрес почты?

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

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

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

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

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

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

Кроссбраузерность placeholder

Устаревшие браузеры не поддерживают атрибут «placeholder» — он просто не будет отображаться. К таким браузерам относится IE8. Несмотря на прекращение поддержки Internet Explorer, есть «люди» которые им пользуются

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

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

Скачиваем его и подключаем. Не забываем, что должна быть подключена так же jquery библиотека. Применяем плагин к элементам ввода с атрибутом «placeholder»:

    <script src="/jquery.placeholder.min.js"></script>
    
    <script>
        $(function(){
            $('input, textarea').placeholder();
        });
    </script>
    
    <style>
        input.placeholder, textarea.placeholder. { color: green; }
    </style>

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

Photographer-Run Sources

The websites listed here could have been included in the section above feature sites offering high-resolution images, but because these sites feature work by a smaller number of photographers (whose biographies and portfolios are likely available to you), we have chosen to list these separately. There are also a number of agencies and photography collectives on this list.

If you need professional-quality images, look no further.

1. PDPhoto: PD Photo features images taken over the years by a single photographer.
2. MMT Stock: High-resolution photos free to use by photographer Jeffrey Betts.
3. Deviant Art’s Stock Art: Not photographer-run, but artist-run. Features work created by people all around the world.
4. Font Play: Offers free-to-use images taken by the website’s owner and his friends.
5. Freerange Stock: Site where photographers can share their photos and earn revenue whenever users click on ads next to their images.
6. The Photographs of Ricardo Martin Herrero: Features photographs taken by Spanish photographer Ricardo Martin Herrero.
7. Life of Pix: Stunning photographs put out by a Canadian advertising agency and its affiliated photographers.
8. AMG Media: Photos by professional photography that are free to use (attribution required).
9. Aarin Free Photo: 950 images for personal and commercial use taken by photographer Aarin Yu.
10. BigFoto: Free downloads of images created by amateur photographers who have opted to release ownership of the work they’ve created.
11. Little Visuals: Sadly, the photographer (and owner of the site) whose work was featured passed away unexpectedly in 2013. However, his family has left his work available for use, free of charge.
12. Free to Use Photography by Daria: Exactly as it sounds. Daria, a visual and UX designer, creates a lot of content which she enjoys sharing for public use.

Need professional photos of food? The FoodiesFeed site offers a collection of professionally shot food photos.

JavaScript-библиотеки

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

Преобразовать наш код в React не сложно. Фактически, нужно лишь вынести цикл из процесса отрисовки, чтобы можно было извлекать функцию, которая отрисовывает по одному пользователю за раз, а затем итерировать по нашему массиву пользователей, отрисовывая их как раньше. Здесь несколько специфических для React моментом, вроде того факта, что имя нашей новой функции должно начинаться с прописной буквы, мы должны передавать её единственный аргумент props, а элементы из списка должны быть . Звучит громоздко, но на самом деле это совсем не трудно соблюдать.

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

Я также взял на себя смелость преобразовать три инлайненых SVG в их собственные функции, так что теперь весь процесс отрисовки выглядит так:

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

C другой стороны, если вы хотите начать с более лёгкой версии React, без JSX и некоторых более причудливых и сложных вещей, то я очень рекомендую обратиться к Preact, потому что это прекрасная альтернатива, которая может уменьшить время загрузки на одну-две секунды.

TL;DR: Преобразование с помощью React неструктурированных вызовов HTML-отрисовки в функциональные компоненты — задача простая, и результат получается гораздо удобнее в сопровождении. При этом разработчик получает больше контроля над своим кодом, и повышается степень повторного использования.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Разновидности плейсхолдеров

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

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

В дополнение к названию

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

Вместо заголовка

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

The Argument Against Filler Text

If you’re thinking that filler text seems pretty boring and uncontroversial, you’d be wrong.

Surprisingly, there is a very vocal faction of the design community that wants to see filler text banished to the original sources from whence it came. Perhaps not surprisingly, in an era of endless quibbling, there is an equally vocal contingent of designers leaping to defend the use of the time-honored tradition of greeking.

The argument in favor of using filler text goes something like this: If you use real content in the design process, anytime you reach a review point you’ll end up reviewing and negotiating the content itself and not the design. This will just slow down the design process. Design first, with real content in mind (of course!), but don’t drop in the real content until the design is well on its way. Using filler text avoids the inevitable argumentation that accompanies the use of real content in the design process.