-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
374 lines (315 loc) · 15.6 KB
/
index.html
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
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Thank you notes | by Jeffrey Lauwers</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!--Article-->
<article>
<!--Intro-->
<header class="article-header">
<h1 class="article-header__headline">
Thank you notes
<span class="sr-only"> by Jeffrey Lauwers</span>
</h1>
<div class="diap-block">
<p class="diap-block__text">
For years I was making static mockups in Photoshop. But ever since I saw <a href="https://vimeo.com/67996448" class="diap-block__link">Steven Hay’s presentation</a> at Mobilism, I just knew that I really needed a better understanding of HTML/CSS. I was convinced it would make me a better webdesigner. So I started collecting and reading a ton of articles and books on these subjects. These new insights and understandings combined with getting my hands dirty in Sublime Text got me some great results.
</p>
<p class="diap-block__text">
I’m aware of the fact that the people that teached me things have no clue they did something great for me. So I would like to thank them here…
</p>
</div>
</header>
<!--Notes-->
<ul class="notes">
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Luke Wroblewski
</h2>
<p class="note__text">
For writing the first <a href="http://rosenfeldmedia.com/books/web-form-design/" class="note__link">book</a> I absolutely couldn't put down. And also for his second <a href="https://abookapart.com/products/mobile-first" class="note__link">book</a> which shifted my way of thinking.
</p>
<a href="https://twitter.com/lukew" class="note__link--button">
Twitter
<span class="sr-only"> account of Luke Wroblewski</span>
</a>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Shay Howe
</h2>
<p class="note__text">
Your <a href="http://learn.shayhowe.com/html-css/" class="note__link">website</a> does a fantastic job in guiding someone through the basic steps of HTML/CSS.
</p>
<a href="https://twitter.com/shayhowe" class="note__link--button">
Twitter
<span class="sr-only"> account of Shay Howe</span>
</a>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Ethan Marcotte
</h2>
<p class="note__text">
Your revolutionary <a href="http://alistapart.com/article/responsive-web-design" class="note__link">article</a> on responsive webdesign and your classy way of giving presentations has left a great impression on me.
</p>
<a href="https://twitter.com/beep" class="note__link--button">
Twitter
<span class="sr-only"> account of Ethan Marcotte</span>
</a>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Chris Coyier
</h2>
<p class="note__text">
For everything on <a href="https://css-tricks.com/" class="note__link">CSS-Tricks</a> and <a href="http://codepen.io/" class="note__link">CodePen</a>. But also for making me realise <a href="https://abookapart.com/products/practical-svg" class="note__link">SVG is awesome</a>.
</p>
<a href="https://twitter.com/chriscoyier" class="note__link--button">
Twitter
<span class="sr-only"> account of Chris Coyier</span>
</a>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Lara Hogan
</h2>
<p class="note__text">
Your <a href="http://larahogan.me/design/" class="note__link">book about performance</a> really gave me some hands on knowledge that I could quickly adapt into my work.
</p>
<a href="https://twitter.com/lara_hogan" class="note__link--button">
Twitter
<span class="sr-only"> account of Lara Hogan</span>
</a>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Jen Simmons
</h2>
<p class="note__text">
For reminding me to think outside of the box and not stay confined on a 12 column grid at 940px. <a href="http://labs.jensimmons.com/" class="note__link">Your demo’s</a> are great to watch as well.
</p>
<a href="https://twitter.com/jensimmons" class="note__link--button">
Twitter
<span class="sr-only"> account of Jen Simmons</span>
</a>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Harry Roberts
</h2>
<p class="note__text">
For making me see a <a href="http://cssguidelin.es/" class="note__link">new way of naming classes</a> which makes me break stuff less often.
</p>
<a href="https://twitter.com/csswizardry" class="note__link--button">
Twitter
<span class="sr-only"> account of Harry Roberts</span>
</a>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Jeffrey Zeldman
</h2>
<p class="note__text">
You helped genius people to write <a href="https://abookapart.com/" class="note__link">instructive books</a> which are so fun to read. And thanks for releasing <a href="https://aneventapart.com/news/tag/video" class="note__link">video’s</a> of events I could never attend, it really made my daily bus drive something to look forward to :)
</p>
<a href="https://twitter.com/zeldman" class="note__link--button">
Twitter
<span class="sr-only"> account of Jeffrey Zeldman</span>
</a>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Jeremy Keith
</h2>
<p class="note__text">
For making me <a href="https://abookapart.com/products/html5-for-web-designers" class="note__link">love HTML</a> and introducing me to the term <a href="https://vimeo.com/134260131" class="note__link">progressive enhancement</a>.
</p>
<a href="https://twitter.com/adactio" class="note__link--button">
Twitter
<span class="sr-only"> account of Jeremy Keith</span>
</a>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Brad Frost
</h2>
<p class="note__text">
For making me excited about the future of webdesign where i see something like <a href="http://patternlab.io/" class="note__link">patternlab</a> as a new standard for deliverables.
</p>
<a href="https://twitter.com/brad_frost" class="note__link--button">
Twitter
<span class="sr-only"> account of Brad Frost</span>
</a>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Heydon Pickering
</h2>
<p class="note__text">
I knew some tricks concerning visual design, but accessibility within HTML/CSS is my new favorite topic. <a href="https://www.smashingmagazine.com/2016/06/inclusive-design-patterns/" class="note__link">Your book</a> is the next one on my list!
</p>
<a href="https://twitter.com/heydonworks" class="note__link--button">
Twitter
<span class="sr-only"> account of Heydon Pickering</span>
</a>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Everyone else
</h2>
<p class="note__text">
Who shares their knowledge online which makes the internet such a great place to learn.
</p>
<a href="https://twitter.com/search?q=%23css&src=typd" class="note__link--button">
Twitter
<span class="sr-only"> searchresult of #css</span>
</a>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Nicoline & Pieter
</h2>
<p class="note__text">
My colleagues <a href="https://twitter.com/vandijkenik" class="note__link">Nicoline van Dijk</a> and <a href="https://twitter.com/iPieter" class="note__link">Pieter de Jong</a> for answering the question Google couldn’t solve!
</p>
</div>
</div>
</li>
<li class="notes__item">
<div class="note">
<div class="note__content">
<h2 class="note__heading">
<span class="sr-only">Thank you </span>
Mariette, Sam & Liam
</h2>
<p class="note__text">
My wife and kids that always cheer me up when I come home grumpy from a HTML/CSS problem I couldn’t solve. They remind me of the most important thing on this planet. Love.
</p>
</div>
</div>
</li>
</ul>
<!--Footer-->
<footer class="article-footer">
<div class="diap-block">
<p class="diap-block__text">
Even though learning HTML and CSS was sometimes a bit overwhelming, I am still convinced that it is made and is making me a better webdesigner (or front-end designer if you will). Are you reading this and want to learn more about HTML and CSS? I’d suggest to check out the people above and just go for it.
</p>
<p class="diap-block__text">
Have a nice day!
<a href="https://twitter.com/jeffreylauwers" class="yours-truly diap-block__link">
Jeffrey Lauwers
</a>
</p>
</div>
</footer>
</article>
<script src="js/modernizr-custom.js"></script>
<script>
/* fontfaceobserver Copyright (c) 2014 - Bram Stein https://github.com/bramstein/fontfaceobserver/*/
(function(){'use strict';function f(a){this.a=k;this.b=void 0;this.d=[];var b=this;try{a(function(a){l(b,a)},function(a){m(b,a)})}catch(c){m(b,c)}}var k=2;function n(a){return new f(function(b,c){c(a)})}function p(a){return new f(function(b){b(a)})}
function l(a,b){if(a.a===k){if(b===a)throw new TypeError("Promise resolved with itself.");var c=!1;try{var d=b&&b.then;if(null!==b&&"object"===typeof b&&"function"===typeof d){d.call(b,function(b){c||l(a,b);c=!0},function(b){c||m(a,b);c=!0});return}}catch(e){c||m(a,e);return}a.a=0;a.b=b;q(a)}}function m(a,b){if(a.a===k){if(b===a)throw new TypeError("Promise rejected with itself.");a.a=1;a.b=b;q(a)}}
function q(a){setTimeout(function(){if(a.a!==k)for(;a.d.length;){var b=a.d.shift(),c=b[0],d=b[1],e=b[2],b=b[3];try{0===a.a?"function"===typeof c?e(c.call(void 0,a.b)):e(a.b):1===a.a&&("function"===typeof d?e(d.call(void 0,a.b)):b(a.b))}catch(g){b(g)}}},0)}f.prototype.e=function(a){return this.c(void 0,a)};f.prototype.c=function(a,b){var c=this;return new f(function(d,e){c.d.push([a,b,d,e]);q(c)})};
function r(a){return new f(function(b,c){function d(c){return function(d){g[c]=d;e+=1;e===a.length&&b(g)}}var e=0,g=[];0===a.length&&b(g);for(var h=0;h<a.length;h+=1)a[h].c(d(h),c)})}function s(a){return new f(function(b,c){for(var d=0;d<a.length;d+=1)a[d].c(b,c)})};window.Promise||(window.Promise=f,window.Promise.resolve=p,window.Promise.reject=n,window.Promise.race=s,window.Promise.all=r,window.Promise.prototype.then=f.prototype.c,window.Promise.prototype["catch"]=f.prototype.e);}());
(function(){'use strict';function e(a){this.a=document.createElement("div");this.a.setAttribute("aria-hidden","true");this.a.appendChild(document.createTextNode(a));this.b=document.createElement("span");this.c=document.createElement("span");this.f=document.createElement("span");this.e=document.createElement("span");this.d=-1;this.b.style.cssText="display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;";this.c.style.cssText="display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;";
this.e.style.cssText="display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;";this.f.style.cssText="display:inline-block;width:200%;height:200%;";this.b.appendChild(this.f);this.c.appendChild(this.e);this.a.appendChild(this.b);this.a.appendChild(this.c)}function r(a,b,c){a.a.style.cssText="min-width:20px;min-height:20px;display:inline-block;visibility:hidden;position:absolute;width:auto;margin:0;padding:0;top:0;white-space:nowrap;font-size:100px;font-family:"+b+";"+c}
function s(a){var b=a.a.offsetWidth,c=b+100;a.e.style.width=c+"px";a.c.scrollLeft=c;a.b.scrollLeft=a.b.scrollWidth+100;return a.d!==b?(a.d=b,!0):!1}function t(a,b){a.b.addEventListener("scroll",function(){s(a)&&null!==a.a.parentNode&&b(a.d)},!1);a.c.addEventListener("scroll",function(){s(a)&&null!==a.a.parentNode&&b(a.d)},!1);s(a)};function u(a,b){this.family=a;this.style=b.style||"normal";this.variant=b.variant||"normal";this.weight=b.weight||"normal";this.stretch=b.stretch||"stretch";this.featureSettings=b.featureSettings||"normal"}var v=null;
u.prototype.a=function(a){a=a||"BESbswy";var b="font-style:"+this.style+";font-variant:"+this.variant+";font-weight:"+this.weight+";font-stretch:"+this.stretch+";font-feature-settings:"+this.featureSettings+";-moz-font-feature-settings:"+this.featureSettings+";-webkit-font-feature-settings:"+this.featureSettings+";",c=document.createElement("div"),k=new e(a),l=new e(a),m=new e(a),f=-1,d=-1,g=-1,n=-1,p=-1,q=-1,h=this;r(k,"sans-serif",b);r(l,"serif",b);r(m,"monospace",b);c.appendChild(k.a);c.appendChild(l.a);
c.appendChild(m.a);document.body.appendChild(c);n=k.a.offsetWidth;p=l.a.offsetWidth;q=m.a.offsetWidth;return new Promise(function(a,y){function w(){null!==c.parentNode&&document.body.removeChild(c)}function x(){if(-1!==f&&-1!==d&&-1!==g&&f===d&&d===g){if(null===v){var b=/AppleWeb[kK]it\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent);v=!!b&&(536>parseInt(b[1],10)||536===parseInt(b[1],10)&&11>=parseInt(b[2],10))}v?f===n&&d===n&&g===n||f===p&&d===p&&g===p||f===q&&d===q&&g===q||(w(),a(h)):(w(),
a(h))}}setTimeout(function(){w();y(h)},3E3);t(k,function(a){f=a;x()});r(k,h.family+",sans-serif",b);t(l,function(a){d=a;x()});r(l,h.family+",serif",b);t(m,function(a){g=a;x()});r(m,h.family+",monospace",b)})};window.FontFaceObserver=u;window.FontFaceObserver.prototype.check=u.prototype.a;}());
/*
Fonts are loaded through @font-face rules in the CSS whenever an element references them.
FontFaceObserver creates a referencing element to trigger the font request, and listen for font load events.
When all 3 fonts are loaded, we enable them by adding a class to the html element
*/
(function( w ){
// if the class is already set, we're good.
if( w.document.documentElement.className.indexOf( "fonts-loaded" ) > -1 ){
return;
}
var fontA = new w.FontFaceObserver( "Montserrat Bold", {
weight: 700
});
var fontB = new w.FontFaceObserver( "Montserrat Regular", {
weight: 300
});
var fontC = new w.FontFaceObserver( "PermanentMarker", {
weight: 300,
});
w.Promise
.all([fontA.check(), fontB.check(), fontC.check()])
.then(function(){
w.document.documentElement.className += " fonts-loaded";
});
}( this ));
</script>
</body>
</html>