Плейсхолдеры в полях формы вредны

Плейсхолдеры, замещающие лейблы

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

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

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

2. Без лейблов пользователь не сможет проверить свою работу до отправки формы

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

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

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

5. На поля с надписью внутри обращается меньше внимания

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

7. Иногда пользователям приходится удалить текст плейсхолдера вручную

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

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

Final Notes

As a conclusion, I want to highlight the following facts:

  • The plugin is able to recognize if the user types the same value of the placeholder, behaving as expected. So, you don’t have to worry about this case.
  • Recalling that the properties of the option have higher priority among those set in the class specified in the , if you want to set a text color (different than #A9A9A9) using a property defined in the class, you have to use the declaration. The latter allows you to give the property an even higher prority, so this color will apply instead of the one.
  • If you want to use a client-side validator remember to disable the plugin first as discussed in the «Enable/Disable the placeholder» section.

Advanced Examples

Example 1

The first example shown uses two of the three options seen before. Using the option, it’ll force browsers having support for the HTML5 placeholder attribute to be replace by Audero Unified Placeholders system. Besides, using , the placeholders will be shown using a black (#000000) color and in bold. The code of this example is the following:

Example 2

The next example is slightly more complex then the previous. In fact, it shows how the priority of the properties can override those specified in a class set using . Let that you want to apply to the placeholders a style defined in a class called and that the latter is defined as follows:

Now, say that you use the snippet listed below:

In this case, the result is that you’ll have an emulated placeholder even in browsers supporting natively the placeholder attribute, and that the placeholders’ texts will be shown using the color #FCAD22 with a normal font-style (so not the italic style).

The most observant of you might have noted the use of the declaration. For an explanation, see the «Final Notes».

События

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)

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 ❯

Анимации

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

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

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

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

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

Сдвиг вниз

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

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

Всё вместе

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

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

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

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

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

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

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 ❯

About Placeholders

A digital peer to peer network for the facilitation of decentralized compute platform transfer and operation.

Placeholders are typically used as a place to put something until you decide what is required.

Thank you to the Bitcoin developers.
Thank you to the Raven developers.

The Placeholders project is launched based on the hard work and continuous effort of over 400 Bitcoin developers who made over 14,000 commits over the life to date of the Bitcoin project. We are eternally grateful to you for your efforts and diligence in making a secure network and for their support of free and open source software development. The Placeholders experiment is made on the foundation you built.

Our Top 3 Stock Image Sources

There are many places to which you can go for stock images, but in our minds, there are three excellent sources that we think are much better than their peers.

Getty’s “editorial” images include photos of newsmakers, news events, and archival images of world leaders.

What makes a great site for stock images? Well, we look for several things:

  • Abundance and variety of images: we want to have lots of options; we’re not really interested in smaller or niche websites.
  • Ease of use: we want something that allows you to search for and find what you want with ease. Once we’ve found what we want, we then want to be able to download the images without much hassle.
  • Cost: some of our favorites are free, while others are not. Regardless, we take cost into consideration even if there isn’t a specific point at which we say, “We’ll never use this site because it is too expensive.”

With that in mind, here are our three favorite stock image sources.

  1. Getty Images: a subscription service offering royalty-free images, Getty Images is one of the largest (yet easily searchable) libraries of ultra-high quality stock images (and videos as well). Getty offers creative, historical, and “editorial” (news) photos. (Pro tip: If you have a small business or organization and want to use Getty, contact one of their reps and ask for a custom package. They can negotiate on rates based on the traffic to your site.)
  2. iStock: most everything that we’ve said about Getty Images applies to iStock (which is Getty Images’ budget-friendly sister site). If you want quality content, but your budget is limited, there are discounts you can apply.
  3. Adobe Stock: Adobe Stock is similar to Getty Images, but its libraries include graphics, 3-D objects, and templates in addition to photographic images and videos. They also offer editorial photos of newsmakers. For all that the site offers, its monthly subscription fee and use limits are very reasonable.

Adobe Stock includes professional quality vectors and illustrations.

You’ll probably notice that all of the options we’ve provided are subscription services. There’s no better price than FREE, but for convenience, ease of use, and access to high-quality content, a small subscription fee is well worth it.

Убираем placeholder при нажатии на поле

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

  :focus::-webkit-input-placeholder {opacity:0;}/* webkit */
  :focus::-moz-placeholder          {opacity:0;}/* Firefox 19+ */
  :focus:-moz-placeholder           {opacity:0;}/* Firefox 18- */
  :focus:-ms-input-placeholder      {opacity:0;}/* IE */

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

Usage

Using this plugin is very simple. Just call the method on the element(s) you want to apply the placeholder, typically the s and the s of a .
For example, let that you have the following code:

A basic call to the plugin is:

The plugin is able to detect what elements have a placeholder, so in case you’re lazy, you can use a snippet like the following as well (note the selector):

Please note using the selector could reselt in worst performance.

Enable/Disable the placeholder

This plugin uses the elements’ value property to emulate the placeholder attribute. Moreover, chances there are that in your form you are using a plugin to validate the data inserted by the user. This means that the validator plugin will validate the values written as well as the placeholders. Another problematic case occurs when the user don’t fill a field. In this circumstance, you probably want that the server will receive the field’s value as empty instead of valorized with your placeholder.

To solve these cases, you can simply disable the plugin before validate the data or sending them to the server. To achieve this goal, you can use the method. To call it, you have to call the same method seen until now () passing a string having value , as you can see in the next example:

Once the data are verified, if some of them are wrong, you can enable again the plugin using the method as shown in the next snippet:

Reset the placeholder

As said in the previous section, this polyfill uses the value property of the elements, so if your form has a reset button, once the user clicks it, all the elements will be cleared as well as the placeholders. To offer the expected behavior to your users, you have to use the method offered by the plugin instead of the native function. To use it you have to call the same method seen before () passing a string having value , as you can see in the next example:

Destroy the placeholder

In some cases (although I can’t really imagine what), you may need to destroy the changes applied by this polyfill. To achieve this goal, you can call the method passing the string . To see it in action, take a look at the following snippet:

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

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

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

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

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

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

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

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

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

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

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

Стоит ли использовать плейсхолдеры

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

Для этого обратите внимание на проблемы, которые негативно сказываются на юзабилити и конверсии

  • Можно перепутать подсказку с заполненным полем. То есть посчитать текст-заполнитель за значение по умолчанию.
  • Если пользователь ошибся, ему будет труднее понять, что исправить.
  • Без заголовков в поле трудно проверить, правильно ли заполнена форма. 
  • Из-за исчезновения текста-подсказки легко запутаться, ведь при заполнении формы не все запоминают подсказки и приходится удалять текст, чтобы вновь ее посмотреть. 
  • Пользователям приходится вручную удалять текст с подсказкой, когда разработчики не предусматривают автоматическое удаление. Это создает лишние затруднения.
  • Для слабовидящих текст плейсхолдера будет не заметен из-за контраста.

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

Testing

Testing and code review is the bottleneck for development; we get more pull
requests than we can review and test on short notice. Please be patient and help out by testing
other people’s pull requests, and remember this is a security-critical project where any mistake might cost people
lots of placeholders.

Testnet is now up and running and available to use during development. There is an issue when connecting to the testnet that requires the use of the -maxtipage parameter in order to connect to the test network initially.

After the initial launch the -maxtipage parameter is not required.

Use this command to initially start placehd on the testnet.

Automated Testing

Developers are strongly encouraged to write unit tests for new code, and to
submit new unit tests for old code. Unit tests can be compiled and run
(assuming they weren’t disabled in configure) with: . Further details on running
and extending unit tests can be found in /src/test/README.md.

There are also regression and integration tests, written
in Python, that are run automatically on the build server.
These tests can be run (if the test dependencies are installed) with:

Windows Dependencies

For Tapestry products, you are required to use the following console programs:
-mktorrent.exe
-aria2c.exe
-cygcrypto-1.0.0.dll
-cygwin1.dll
-cygz.dll
-prefix.exe

All of these projects are open source and can be found as forked sub-projects in the xagau workspace.

Manual Quality Assurance (QA) Testing

Changes should be tested by somebody other than the developer who wrote the
code. This is especially important for large or high-risk changes. It is useful
to add a test plan to the pull request description if testing the changes is
not straightforward.

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()

Сервис-воркеры (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: Сервис-воркеры позволяют веб-приложениям настраивать кэши и использовать их для загрузки ресурсов без использования сети, превращая веб-приложения в прогрессивные.

Скрываем placeholder красиво

Как реализовать скрытие placeholder в одном стиле для всех браузеров разобрались, теперь посмотрим, как можно это анимировать.

Плавное изменение прозрачности:

input::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
input::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
input:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
input:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

Сдвиг вправо

input::-webkit-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
input::-moz-placeholder                {text-indent: 0px;   transition: text-indent 0.3s ease;}
input:-moz-placeholder                 {text-indent: 0px;   transition: text-indent 0.3s ease;}
input:-ms-input-placeholder            {text-indent: 0px;   transition: text-indent 0.3s ease;}
input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
input:focus::-moz-placeholder          {text-indent: 500px; transition: text-indent 0.3s ease;}
input:focus:-moz-placeholder           {text-indent: 500px; transition: text-indent 0.3s ease;}
input:focus:-ms-input-placeholder      {text-indent: 500px; transition: text-indent 0.3s ease;}

Сдвиг вниз

input::-webkit-input-placeholder       {line-height: 20px;  transition: line-height 0.5s ease;}
input::-moz-placeholder                {line-height: 20px;  transition: line-height 0.5s ease;}
input:-moz-placeholder                 {line-height: 20px;  transition: line-height 0.5s ease;}
input:-ms-input-placeholder            {line-height: 20px;  transition: line-height 0.5s ease;}
input:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
input:focus::-moz-placeholder          {line-height: 100px; transition: line-height 0.5s ease;}
input:focus:-moz-placeholder           {line-height: 100px; transition: line-height 0.5s ease;}
input:focus:-ms-input-placeholder      {line-height: 100px; transition: line-height 0.5s ease;}
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector