This repository has been archived by the owner on Jun 1, 2021. It is now read-only.
/
index.jade
296 lines (267 loc) · 13.9 KB
/
index.jade
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
!!! 5
html
head
meta(charset="utf-8")
meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1")
title Improving user experience in HTML forms
//- Check out "src/bower_components/prism/themes/" for available themes
link(rel="stylesheet", type="text/css", href="bower_components/prism/themes/prism-coy.css")
link(rel="stylesheet", type="text/css", href="styles/main.css")
body
//- header Improving user experience in HTML forms
article
section
h1 Improving user experience in HTML forms
a(href="http://joelpurra.com/") joelpurra.com
a(href="http://joelpurra.com/r/html-forms/") joelpurra.com/r/html-forms/
section
h2.bullet Improve what?
.bullet
h3 Usability
.columns.two
.column.left
ul.no-bullets
li Reduce confusion
li Reduce complexity
li Reduce perceived length
li Reduce frustration
li Normalized browser behavior
.column.right.bullet
ul.no-bullets
li ↔ Logical input ordering
li ↔ Hide fields until needed
li ↔ Split up form to steps/parts
li ↔ Early feedback, error messages
li ↔ Override dependent behavior
hr
.bullet
h3 Input speed
.columns.two
.column.left
ul.no-bullets
li Autocompletion
li Automatic formatting
li Skipping low-frequency fields
.column.right.bullet
ul.no-bullets
li ↔ Based on already existing data
li ↔ Based on rules
li ↔ Based on user consent/usage
section(data-bespoke-hash="h5validate", data-bespoke-state="emphatic")
h2: a(href="https://github.com/joelpurra/h5Validate") h5Validate
h3 An HTML5 form validation plugin for jQuery.
p Usability (normalize browser behavior, early feedback, error messages)
hr
code.block.language-javascript
pre.
$("form").h5Validate();
p Not super active, but my fork is one year old, and only partially re-integrated.
section(data-bespoke-hash="plusastab-1", data-bespoke-state="emphatic")
h2: a(href="http://joelpurra.github.com/plusastab") PlusAsTab
p(style="text-align: center;")
img(src="resources/images/4895095_f520.jpg", style="max-width: 75%; max-height: 75%;")
section(data-bespoke-hash="plusastab-2", data-bespoke-state="emphatic")
h2: a(href="http://joelpurra.github.com/plusastab") PlusAsTab
p(style="text-align: center;")
img(src="resources/images/kedudukan-normal-meja.jpg", style="max-width: 75%; max-height: 75%; transform: scale(-1, -1);")
section(data-bespoke-hash="plusastab-3", data-bespoke-state="emphatic")
h2: a(href="http://joelpurra.github.com/plusastab") PlusAsTab
div.bullet(style="height: 350px; background-image: url(resources/images/61O35Ec0UnL._SL1500_.jpg); background-position: center center; background-size: cover;")
.bullet(style="top: 227px; left: 20px; position: absolute; width: 75px; height: 50px; border-radius: 75px; border: 5px solid red;")
.bullet(style="top: 227px; left: 567px; position: absolute; width: 50px; height: 75px; border-radius: 75px; border: 5px solid red;")
section(data-bespoke-hash="plusastab", data-bespoke-state="emphatic")
h2: a(href="http://joelpurra.github.com/plusastab") PlusAsTab
h3 A jQuery plugin to use the numpad plus key (configurable) as a tab key equivalent.
p Speed (physical keyboard distance)
hr
code.block.language-javascript
pre.
JoelPurra.PlusAsTab.setOptions({
// Enter, arrow down, numpad plus
key: [13, 40, 107]
});
$(selector).plusAsTab();
code.block.language-markup
pre.
<input type="number" data-plus-as-tab="true" />
section(data-bespoke-hash="skipontab", data-bespoke-state="emphatic")
h2: a(href="http://joelpurra.github.com/skipontab") SkipOnTab
h3 A jQuery plugin to exempt selected form fields from the forward tab order.
p Speed (reduce field tabbing)
hr
code.block.language-markup
pre.
<input type="text" data-skip-on-tab="true" />
<ol data-skip-on-tab="true">
<li><input type="checkbox" /> Checkbox</li>
<li><input type="checkbox" /> Another checkbox</li>
...
p Not the same as
code tabindex="-1"
, see
a(href="https://github.com/joelpurra/skipontab/wiki/SkipOnTab-versus-tabindex") SkipOnTab versus tabindex
.
section(data-bespoke-hash="emulatetab", data-bespoke-state="emphatic")
h2: a(href="http://joelpurra.github.com/emulatetab") EmulateTab
h3 A jQuery plugin to emulate tabbing between elements on a page.
p Usability (normalize browser behavior)
hr
code.block.language-javascript
pre.
// From the currently focused element
$.emulateTab();
// Reverse tab from a specific element
$(selector).emulateTab(-1);
p For example, go to the next field after selecting a value in a dropdown.
p This is a developer library/tool.
section(data-bespoke-hash="followup", data-bespoke-state="emphatic")
h2: a(href="https://gist.github.com/joelpurra/3024198") Followup
h3 A jQuery plugin to show and hide follow up questions in a form.
p Usability (reduce complexity/fewer visible fields), speed (reduce field tabbing)
hr
code.block.language-markup.smaller
pre.
<p data-has-follow-ups="">
Ever had a close encounter with a UFO?
<div>
<input type="radio" data-has-follow-up="sibling" /> Yes
<div data-is-follow-up="">
Please explain the encounter, especially what kind it was
<textarea data-is-follow-up-required="required"></textarea>
</div>
</div>
<input type="radio" /> No
</p>
section(data-bespoke-hash="autocleancallback", data-bespoke-state="emphatic")
h2: a(href="https://gist.github.com/joelpurra/2254354") AutoCleanCallback
h3 Automatic HTML input field cleaning onkeyup/onchange using jQuery.
p Usability (takes care of formatting), speed (reduced efforts)
hr
code.block.language-javascript.smaller
pre.
var $telephoneInputs = $("[type=tel]");
$telephoneInputs.each(function() {
// /^\(?([0-9]{3})\)?[\-. ]?([0-9]{3})[\-. ]?([0-9]{4})$/
// "($1) $2-$3"
JoelPurra.autoCleanNorthAmericanPhoneNumber($(this));
});
p Works well with copy-pastes, regexp beauty fixes.
p Easily extensible. Comes with trim, lowercase, uppercase, normalize whitespace, numbers only.
section(data-bespoke-hash="editdidwhat", data-bespoke-state="emphatic")
h2: a(href="http://joelpurra.github.com/editdidwhat") EditDidWhat
h3 Compare two strings to see what has changed, and perform some string manipulation.
p Usability (reduced complexity, fewer fields/freetext), speed (autocompletion)
hr
code.block.language-javascript.smaller
pre.
var change = EditDidWhat.detectChange(previous, current),
diffIndex = EditDidWhat.findDifferenceIndex(previous, current),
diffLastIndex = EditDidWhat.findLastDifferenceIndex(previous, current),
diffLineNumber = EditDidWhat.getLineNumberAt(current, diffIndex),
diffLinePrevious = EditDidWhat.getLine(previous, diffLineNumber),
diffLineCurrent = EditDidWhat.getLine(current, diffLineNumber),
diffLineReplaced = EditDidWhat.replaceLine(current, diffLineNumber, replaceWith);
p Detects inserts, truncations, replacements, appends, splices.
p Works best on small changes, for example per keystroke.
section(data-bespoke-hash="pagehasformchanges", data-bespoke-state="emphatic")
h2: a(href="https://github.com/joelpurra/pagehasformchanges") PageHasFormChanges
h3 A jQuery plugin to check if anything has changed in any form on a page, and warn the user before leaving the page.
p Usability (reduces frustration)
hr
code.block.language-javascript
pre.
// Just load the script!
p Made for pages with only one form, where "any" change means the user should post ("save") the form.
section(data-bespoke-hash="changepolling", data-bespoke-state="emphatic")
h2: a(href="https://gist.github.com/joelpurra/2944926") ChangePolling
h3 A jQuery plugin to check if the value has changed in an input/select/textarea without relying on the jQuery .change() event.
hr
code.block.language-javascript
pre.
$("#my-input-to-poll").changePolling({
interval: 1000,
autoStart: true
});
p Polling at a configurable interval, which will then trigger the jQuery .change() event. Useful when you've got third-party plugins that don't play well with others, when performing changes in forms.
p This is a developer library/tool. See also
a(href="http://joelpurra.github.com/jquery-mutation-summary") jquery-mutation-summary
.
section(data-bespoke-hash="formfieldinfo", data-bespoke-state="emphatic")
h2: a(href="https://github.com/joelpurra/formfieldinfo") FormFieldInfo
h3 A javascript plugin used to collect information about forms in a page.
hr
code.block.language-javascript.smaller
pre.
var fields = JoelPurra.FormFieldInfo.getFields(selector, $context);
var fieldGroups = JoelPurra.FormFieldInfo.getFields()
.removeEmptyNames().mergeArrays().groups().toArray();
p This is a developer library/tool.
p Useful when running automated tools to test or extract information -
a(href="https://github.com/joelpurra/extract-fields") for example using phantomjs
.
p The form field information is used to filter out potential form problems, like missing values for radio buttons etcetera.
//- section(data-bespoke-hash="", data-bespoke-state="emphatic")
h2: a(href="")
h3
p Usability (), speed ()
hr
code.block.language-javascript
pre.
// script code here
section(data-bespoke-hash="questions")
h2 Improving user experience in HTML forms
h3 Questions?
ul.no-bullets.two-columns
li: a(href="https://github.com/joelpurra/h5Validate") h5Validate
li: a(href="http://joelpurra.github.com/plusastab") PlusAsTab
li: a(href="http://joelpurra.github.com/skipontab") SkipOnTab
li: a(href="http://joelpurra.github.com/emulatetab") EmulateTab
li: a(href="https://gist.github.com/joelpurra/3024198") Followup
li: a(href="https://gist.github.com/joelpurra/2254354") AutoCleanCallback
li: a(href="http://joelpurra.github.com/editdidwhat") EditDidWhat
li: a(href="https://github.com/joelpurra/pagehasformchanges") PageHasFormChanges
li: a(href="https://gist.github.com/joelpurra/2944926") ChangePolling
li: a(href="https://github.com/joelpurra/formfieldinfo") FormFieldInfo
section(data-bespoke-hash="joelpurra")
h2 Joel Purra
h3: a(href="http://joelpurra.com/") joelpurra.com
p Swedish full stack, generalist, freelance, software engineer.
p If your company needs reinforcements, let's talk!
hr
p You'll find the presentation at
a(href="http://joelpurra.com/r/html-forms/") joelpurra.com/r/html-forms
p Presented at the
a(href="http://www.meetup.com/Berlin-HTML5-User-Group/") Berlin HTML5 Meetup Group
| in December 2013.
hr
p Images:
a(href="http://lcbenefield.hubpages.com/hub/Making-Your-Home-Office-Ergonomically-Correct") 1
a(href="http://penyakitkomputer.com/amalanterbaikict/elak-sakit-msd-dengan-meja-ergonomi/") 2
a(href="http://www.amazon.com/IBM-USB-Keyboard-In-Beige/dp/B001150KDK") 3
p Code snippets/examples may be copied freely.
p The rest of the presentation is licenced under
a(href="https://creativecommons.org/licenses/by-sa/3.0/") CC BY-SA 3.0
.
//- section(data-bespoke-hash="")
h2 Header
h3.bullet Powered by <a href=""></a>
ul
li Bullet 1
li Bullet 2
li Bullet 3
footer
a(href="http://joelpurra.com") joelpurra.com
script(src="bower_components/bespoke.js/dist/bespoke.min.js")
script(src="bower_components/bespoke-bullets/dist/bespoke-bullets.min.js")
script(src="bower_components/bespoke-scale/dist/bespoke-scale.min.js")
script(src="bower_components/bespoke-hash/dist/bespoke-hash.min.js")
script(src="bower_components/bespoke-progress/dist/bespoke-progress.min.js")
script(src="bower_components/bespoke-state/dist/bespoke-state.min.js")
script(src="bower_components/bespoke-convenient/dist/bespoke-convenient.min.js")
script(src="bower_components/bespoke-logbook/dist/bespoke-logbook.min.js")
script(src="bower_components/bespoke-jumpy/dist/bespoke-jumpy.min.js")
script(src="bower_components/bespoke-indexfinger/dist/bespoke-indexfinger.min.js")
script(src="bower_components/bespoke-secondary/dist/bespoke-secondary.min.js")
script(src="bower_components/prefix-free/prefixfree.min.js")
script(src="bower_components/prism/prism.js")
script(src="scripts/main.js")