Modx. xpdo. плейсхолдеры (placeholders)

Multi-Functional Sources

The photo sources listed in this section offer stock images, but they also come with additional tools or services that you might find helpful. For example, you might get things like access to an editor that allows you to customize your image.

1. Canva: Offers stock images and editing tools, making it easy to create custom images. Ideal for social media or ads and flyers. There are also a number of alternatives to Canva.
2. Snappa: Site allowing you to create online graphics for social media, ads, blogs, and more.
3. Creative Commons: This is actually a search engine from nonprofit Creative Commons that allows you to search for images based on license type. It includes information on how to attribute appropriately when using those images.
4. Iso Republic: Offers a large number of free stock images and videos.
5. Snapwire Snaps: Allows you to license and commission photos from any of the 200,000 photographers affiliated with the site. Offers seven free photos every seven days.
6. Free Pixels: Searchable source of free stock images, as well as background images and signs, symbols, and icons.
7. Obsidian Dawn: This isn’t, strictly speaking, a source for images. Instead, it’s a source for artist tools that can be helpful when making images.
8. Storyblocks Video: Stock images aren’t the only thing that’s available to you — you can get stock videos as well.
9. Freepik: Free graphics resources, including vectors, stock photos, and icons.
10. Kaboom Pics: Free stock photography and color palettes for all of your art projects.

A subscription to StoryBlocks gives you access to stock video clips like this one of downtown Havana.

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

Загружаем ещё больше контента

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

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

TL;DR: Бесконечная прокрутка — главное свойство любого современного веб-приложения. Она легка в реализации и позволяет динамически подгружать контент по мере необходимости.

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

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

RESTful API

Первое, о чём я хочу рассказать, это концепция RESTful API. Термин REST, или RESTful API, всплывает во многих беседах между веб-разработчиками, и на то есть веская причина. REST (REpresentational State Transfer, передача состояния представления) API и веб-сервисы предоставляют простой способ взаимодействия с архитектурой бэкенда без необходимости разбираться в этой самой архитектуре.

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

RESTful API бывают самыми разными. Наиболее популярные из них возвращают JSON-объекты, которыми можно легко манипулировать посредством JavaScript на стороне клиента, что позволяет фронтенд-разработчикам эффективно работать с одними лишь частями View и Controller паттерна MVC (Model-View-Controller).

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

Что делать с особенностями плейсхолдеров

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

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

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

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

Анимации

Идеи анимаций принадлежит блогу html5.by.

Все следующие примеры написаны с использованием препроцессора Sass. К каждому прилагается ссылка на SassMeister, по которой вы сможете найти скомпилированный CSS код.

Скорее всего, вы захотите применять анимации к плэйсхолдерам при фокусе на поле ввода. Делается всё это достаточно просто. Достаточно всего несколько раз использовать написанный ранее миксин :

Сдвиг вправо и влево

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

Сдвиг вниз

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

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

Всё вместе

Чтобы использовать код анимаций для плэйсхолдеров было приятно и удобно, можно написать небольшую библиотеку миксинов для любого препроцессора. Библиотека выглядит следующим образом (посмотреть на SassMeister):

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

Placeholder Color

Try it Yourself »

Step 1) Add HTML:

Use an input element and add the placeholder attribute:

Example

<input type=»text» placeholder=»A red placeholder text..»>

Step 2) Add CSS:

In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard selector. Note that Firefox adds a lower opacity to the placeholder, so we use 1 to fix this.

Example

::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */  color: red;  opacity: 1; /* Firefox */}:-ms-input-placeholder { /* Internet
Explorer 10-11 */  color: red;}::-ms-input-placeholder
{ /* Microsoft Edge */  color: red;}

Tip: Read more about the ::placeholder selector in our CSS Reference: CSS ::placeholder Property.

❮ Previous
Next ❯

Проблемы доступности

Контрастность

Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.

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

Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

• WebAIM: Color Contrast Checker
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Использование

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

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

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

Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows (en-US). Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.

Greg Whitworth — How to use -ms-high-contrast

Placeholder не является заменой элемента . Без метки, которая программно связывается с формой с помощью  и атрибутов, такие программы, как скринридеры не смогут анализировать элементы .

• MDN Basic form hints
• Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Community-Influenced Sources

Naturally, stock image sites feature work created by many people, but some are explicit in soliciting contributions from the community in general. In addition to serving up images to eager viewers, these community-oriented sites encourage photographers to submit photos for use. Some of these sites allow artists to be compensated, while some are strictly free to use.

1. Dreamstime: Lots of images (over 96 million), lots of contributors (24 million users), low prices (starting at $0.20 per image . . . assuming the image isn’t free to use).
2. Every Stock Photo: Searches through a variety of image-sharing sites, so you don’t have to.
3. Image After: Look for stock images and textures, and converse with other artists using the community forum.
4. Unprofound: Run by designers, Unprofound offers images that you can use for your projects freely (no mass distribution or redistribution allowed, however).
5. Studio25: Search for images or narrow down your options based on category. You can also upload and share images that you create.
6. Abstract Influence: Another source featuring stock images on a wide variety of subjects with a community forum for you to chat with other image creators and users.
7. Flickr: Photo sharing website (some professional, some not). Licensing varies, so check before you use an image (the site features a robust search so you can omit results that you aren’t allowed to use).

Flickr offers a filter to search by license, such as “All creative commons.” Be aware that there are many different kinds of creative commons licenses. Be careful to read the license that accompanies each photo you want to use to ensure you comply with any specific restrictions on that photo. Possible creative commons restrictions include a requirement that you credit the photographer and a requirement that you do not alter the image in any way (by cropping, use of filters, etc).

Подводные камни применения плейсхолдеров

Следует учесть особенности автоперевода страниц сайта на другой язык. Во многие браузеры встроены автоматические переводчики. Они будут полезны иностранцам, которые хотят получить доступ к национальному сайту. Если эта функция включена, то некоторые части страницы не будут переведены. Переводчик не обрабатывает плейсхолдер, и такая подсказка останется непонятной. Как итог, человек не поймёт, какие данные ему вводить. А если отсутствуют лейблы, которые переводятся встроенной программой, то ситуация усугубится. Иностранец не сможет даже предположить, какие данные нужно вписывать в определённые поля.

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

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

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

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

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

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

Сервис-воркеры (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:

.placeholder-form {
box-sizing: border-box;
width: 320px;
margin: 20px auto;
}
.placeholder-container {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.placeholder-container input {
background-color: #FFF;
border: 2px solid #BFE2FF;
box-sizing: border-box;
color: #000;
font-size: 16px;
line-height: 16px;
height: 50px;
outline: 0;
padding: 0 20px;
width: 100%;
}
.placeholder-container label {
color: #000;
font-family: Verdana, sans-serif;
background-color: #FFF;
font-size: 16px;
line-height: 16px;
padding: 5px 10px;
pointer-events: none;
position: absolute;
transition: all 200ms;
top: 12px;
left: 10px;
background-color: #FFF;
}
.placeholder-container input:focus + label,
.placeholder-container input:not(:placeholder-shown) + label{
top: -10px;
left: 10px;
font-size: 11px;
background-color: #BFE2FF;
padding: 2px 10px;
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

.placeholder-form { box-sizingborder-box; width320px; margin20pxauto; } .placeholder-container { positionrelative; width100%; margin-bottom20px; } .placeholder-container input { background-color#FFF; border2pxsolid#BFE2FF; box-sizingborder-box; color#000; font-size16px; line-height16px; height50px; outline; padding20px; width100%; } .placeholder-container label { color#000; font-familyVerdana,sans-serif; background-color#FFF; font-size16px; line-height16px; padding5px10px; pointer-eventsnone; positionabsolute; transitionall200ms; top12px; left10px; background-color#FFF; } .placeholder-container input:focus + label, .placeholder-container input:not(:placeholder-shown) + label{ top-10px; left10px; font-size11px; background-color#BFE2FF; padding2px10px; }

Сборка для production

Всё, что мы сделали, прекрасно работает на localhost, но осмотр production-файлов после быстрого выполнения обнаруживает кучу ошибок, которые нужно исправить. Прежде всего, многие файлы неправильно залинкованы на/из HTML-страницы. Для решения этой проблемы нужно добавить одну строку в package.json:

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

Следующая проблема: наш сервис-воркер указывает на неправильные JS-файлы, потому что больше не существует. Если внимательнее посмотреть на собранные файлы, то станет понятно, что наш JS был преобразован в файл , где часть отличается для каждой сборки. Нам нужно иметь возможность загружать из сервис-воркера файл . Следовательно, нужно переименовать его, но этого сломает ссылку внутри index.html, чего мы не хотим. Для решения обеих проблем воспользуемся сборочными инструментами из реестра npm — renamer и replace. Также нам нужно минифицировать наш , поскольку по умолчанию он не слишком компактен, потому что является частью папки public, так что воспользуемся ещё и утилитой uglify-js.

Три простые команды, и мы получаем нужные нам инструменты. Пользоваться ими сравнительно легко после ознакомления с документацией, так что я продолжу и покажу, как выглядит свойство «scripts» в моём package.json после создания всех необходимых скриптов.

Давайте разберёмся, что тут происходит:

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

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

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

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

Option	Description
	Set this to if you want your placeholders to hide when a user enters something in the field, instead of just giving focus to the field. This is how later versions of Chrome and Safari behave natively.
	Set this to if you don’t want your placeholders to update if you change them via JavaScript, or add new elements to the page after it’s loaded. If you know you won’t be changing the page in this way, you should always set this to .

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!

High-Resolution Images Only

If you want the best quality images, shot by professionals in high resolution, these are the sites for you.

1. Photocase: Offers professionally-created stock photos that don’t look like stock photos.
2. PicJumbo: Free, high-resolution stock photos, backgrounds, and images that are free for both personal and professional use.
3. Picography: Lots of free-to-use, high-resolution images taken by professional photographers.
4. SplitShire: Lots of free, high-quality images available for commercial use.
5. Negative Space: Offers only high-resolution stock photos in a variety of categories that can be used for personal or commercial purposes.
6. Death to Stock: Employs photographers to create monthly photo packs featuring over 20 photos that you can use.
7. Burst by Shopify: High-quality images from e-commerce giant Shopify that’s free for personal and commercial use.
8. This site doesn’t brand itself as a professional resource, but you’ll find nothing but quality pictures here.
9. ReShot: Source of free, unique photos that are high quality and don’t look like stock photos.

Pablo by Buffer enables you to create right-sized social media images in seconds. You can upload your own images or use their stock library for free.

События

DataBinding	Происходит при привязке серверного элемента управления к источнику данных.Occurs when the server control binds to a data source. (Унаследовано от Control)
Disposed	Происходит при освобождении памяти, занятой серверным элементом управления, т.е. на последнем этапе жизненного цикла серверного элемента управления при запросе страницы ASP.NET.Occurs when a server control is released from memory, which is the last stage of the server control lifecycle when an ASP.NET page is requested. (Унаследовано от Control)
Init	Происходит при инициализации серверного элемента управления, который находится на первом этапе его жизненного цикла.Occurs when the server control is initialized, which is the first step in its lifecycle. (Унаследовано от Control)
Load	Происходит при загрузке серверного элемента управления в объект Page.Occurs when the server control is loaded into the Page object. (Унаследовано от Control)
PreRender	Происходит после загрузки объекта Control, но перед отрисовкой.Occurs after the Control object is loaded but prior to rendering. (Унаследовано от Control)
Unload	Происходит при выгрузке серверного элемента управления из памяти.Occurs when the server control is unloaded from memory. (Унаследовано от Control)

The Modern Alternatives

Many modern alternatives often incorporate humor or other content that actually detracts from the primary purpose of filler text: to be unobtrusive, yet provide the feel, look, and texture of filler text.

Our advice: use filler text that has been edited for length and format to match the characteristics of real content as closely as possible

To avoid creating a distraction, when starting a new design project, we always go back to one of the old mainstays: lorem ipsum or li Europan lingues.

Both have realistic-looking sentence structure and word shape, but are foreign languages that won’t create a distraction during a design review meeting.

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

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

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

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

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

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

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

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

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

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

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

Плейсхолдеры и доступность

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

1. Светло-серый цвет текста плейсхолдера по умолчанию имеет слабый контраст по сравнению с цветом большинства фонов. Для пользователей со зрительным нарушением слабый контраст цвета делает такой текст сложным для восприятия. Поскольку не все браузеры позволяют изменить стиль текста плейсхолдера, используя CSS, это остаётся важным моментом.
2. Пользователи с когнитивными или двигательными нарушениями сильнее обременены. Как мы уже видели, у всех пользователей могут быть проблемы с плейсхолдерами: исчезающие плейсхолдеры увеличивают нагрузку на память; постоянные затемнённые плейсхолдеры вызывают замешательство, когда выглядят кликабельными, но таковыми не являются, и плейсхолдеры, которые не исчезают, требуют больше действий с клавиатурой или мышкой для их удаления. Эти сложности имеют большее значение для людей с когнитивными или двигательными нарушениями.
3. Не все средства для чтения с экрана озвучивают текст плейсхолдера. Слепые пользователи или пользователи с нарушением зрения могут полностью пропустить подсказку, если их ПО не озвучивает содержимое плейсхолдера.