-
Notifications
You must be signed in to change notification settings - Fork 15
Expand file tree
/
Copy pathindex.html
More file actions
241 lines (231 loc) · 15.9 KB
/
index.html
File metadata and controls
241 lines (231 loc) · 15.9 KB
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Estelle Weyl :: Projects and Presentations</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<div class="wrapper">
<header>
<h1>https://estelle.github.io</h1>
<p>Estelle Weyl<br/>
<a rel="me" href="https://front-end.social/@estelle">Mastodon</a></p>
<p><img src="https://secure.gravatar.com/avatar/8e75de08afdc1e0fe9333e758d3c7249?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png"></p>
<p class="view"><a href="https://github.com/estelle">View My GitHub Profile</a></p>
</header>
<section>
<h1>Table of Contents for Estelle's Github</h1>
<h2>2025 talks</h2>
<ol><li><a href="JS-in-CSS">JS-in-CSS</a></li></ol>
<h2>2019 CSS Workshop</h2>
<p><a href="CSS">CSS In Depth</a></p>
<ol><li><a href="CSS/intro/index.html">Introduction</a></li>
<li><a href="CSS/selectors/index.html">Selectors</a></li>
<li><a href="CSS/selectors/specificity.html">Specificity</a></li>
<li><a href="CSS/generated/index.html">Generated Content</a></li>
<li><a href="CSS/media/index.html">Media Queries</a></li>
<li><a href="CSS/values/index.html">Units & Values </a></li>
<li><a href="CSS/colors/index.html">Colors & Transparency </a></li>
<li><a href="CSS/math/index.html">Math & Variables</a></li>
<li><a href="CSS/fonts/index.html">Fonts</a></li>
<li><a href="CSS/text/index.html">Text</a></li>
<li><a href="CSS/images/index.html">Images</a></li>
<li><a href="CSS/background/index.html">Backgrounds</a></li>
<li><a href="CSS/gradients/index.html">Gradients</a></li>
<li><a href="CSS/boxmodel/index.html">Box Model</a></li>
<li><a href="CSS/flexbox/index.html">Flexbox</a></li>
<li><a href="CSS/tables/index.html">Tables</a></li>
<li><a href="CSS/grid/index.html">Grids</a></li>
<li><a href="CSS/transforms/index.html">Transforms</a></li>
<li><a href="CSS/animations/index.html">Transitions & Animation</a></li>
<li><a href="CSS/other/index.html">Other Features</a></li></ol>
<!--<h2>2019 Performance Workshop</h2>
<p>Coming soon</p>-->
<h2>Presentations</h2>
<p>Note: Browsers are my "PPT reader" for these decks. Most haven't been optimized cross browser.</p>
<ul>
<li>Browsers: Populating the page. <a href="browsers/index.html">We ♥️ Speed</a> in French, Lille, France,
<a href="rendering/index.html">English Translation</a></li>
<li>The humble radio button: <a href="https://estelle.github.io/flashback">Flashback Conf</a>, Orlando, FL
<li>Developer Experience v. User Experience:
<a href="mscwe/index.html">MSCWE</a>, Online,
<a href="https://estelle.github.io/ctwebdev">ctwebdev</a>, Copenhagen, DE,
<a href="https://estelle.github.io/accessu">AccessU</a>, Austin, TX, USA</li>
<li><a href="browsers/index.html">We </a>, Lille, France,</li>
<li><a href="https://estelle.github.io/fronteers">Fast to load. Fast to Code</a> - Fronteers 2018, Amsterdam
<li><a href="http://estelle.github.io/concat">Simple. Fast. Accessible.</a> - Conc.at() 2018, Salzburg, Austria</li>
<li><a href="http://estelle.github.io/id24">Inclusive Markup</a> - Inclusive Design 24, a.k.a. <a href="https://www.inclusivedesign24.org/">#ID24</a>, Online</li>
<li>
FrontEnd Masters CSS Mastery Workshop, November 2017
<ol class="column2">
<li><a href="cssmastery/intro/index.html">Introduction</a></li>
<li><a href="cssmastery/selectors/index.html">Selectors</a></li>
<li><a href="cssmastery/selectors/index.html#slide69">Specificity</a></li>
<li><a href="cssmastery/generated/index.html">Generated Content</a></li>
<li><a href="cssmastery/media/index.html">Media Queries</a></li>
<li><a href="cssmastery/colors/index.html">Colors & Transparency </a></li>
<li><a href="cssmastery/flexbox/index.html">Flexbox</a></li>
<li><a href="cssmastery/tables/index.html">Tables</a></li>
<li><a href="cssmastery/grid/index.html">Grids</a></li>
<li><a href="cssmastery/borders/index.html">Backgrounds & Borders </a></li>
<li><a href="cssmastery/gradients/index.html">Gradients</a></li>
<li><a href="cssmastery/transforms/index.html">Transforms</a></li>
<li><a href="cssmastery/animations">Transitions & Animation</a></li>
<li><a href="cssmastery/other">Other Features</a></li>
<li>Best Practices (no deck)</li>
<li>Debugging (no deck)</li>
</ol>
</li>
<li><a href="http://estelle.github.io/viewsource">Mobile Web Performance</a> - ViewSource Conf 2017, London</li>
<li><a href="http://estelle.github.io/lndwebperf">Speed Perception & Lighthouse</a> - London Web Performance Group, London</li>
<li><a href="http://estelle.github.io/minsk">Accessibility as Performance</a> - Front End Conf 2017, Minsk</li>
<li><a href="http://estelle.github.io/SpeedPerception">Measuring the Subjective: The Performance Dashboard</a> - Air Mozilla</li>
<li><a href="http://instartlogic.github.io/p/SFHTML5">Web Performance:
Perception & Metrics</a> - SFHTML5</li>
<li><a href="http://instartlogic.github.io/p/wtf/">CSS? WTF!</a> - Fluent</li>
<li><a href="http://instartlogic.github.io/p/elevate/">Simplifying Markup to Improve User Experience</a> - Elevate</li>
<li><a href="http://instartlogic.github.io/p/mobileperf/">Mobile Web Performance</a> (50m) - Istanbul Tech Talks</li>
<li><a href="http://instartlogic.github.io/p/spdperception">Speed Perception: understanding and measuring perceived performance</a> - ForwardJS</li>
<li><a href="http://instartlogic.github.io/p/overkill">You don't need a framework for that</a> - ColdFrontConf, FrontEndConf</li>
<li><a href="http://instartlogic.github.io/p/velocity/">Accessibility as Performance</a> Velocity Conf</li>
<li><a href="http://instartlogic.github.io/p/a11yperf/">Inclusive Markup </a>
<ul>
<li><a href="http://instartlogic.github.io/p/oscon/">Straightforward accessibility</a> OSCON, 3h</li>
<li><a href="http://instartlogic.github.io/p/cssbudapest/">Simply Accessible</a> CSS Budapest, 30m</li>
<li><a href="http://instartlogic.github.io/p/webdevcon/">Simple, Accessible Web Performance</a> WebDevCon, 40m</li>
</ul>
<li><a href="flexbox/">Flexbox</a> - (45m) <ul>
<li><a href="https://www.youtube.com/watch?v=qDlswTzbnmk">ForwardJS Video</a></li></ul>
</li>
<li><a href="welcome/">Creating Welcoming Environments</a>
<ul>
<li><a href="https://www.youtube.com/watch?v=_3xhFpPHESw" aria-label="Video of Welcoming the Web, the keynote at FluentConf 2015">FluentConf keynote Video</a> (25m), </li></ul>
</li>
<li><a href="cssintro/">Introduction to CSS</a> (45m)</li>
<li><a href="animation/">Animation</a> (45m - 60m)
<ul>
<li><a href="snow/">Animation with Snow</a> - <a href="https://www.youtube.com/watch?v=-49TUhnZs9U">video</a></li>
<li><a href="animation/30.html">Animation</a> (30m)</li>
</ul>
</li>
<li><a href="selectors/">Selectors</a> Tutorial (60 - 90m)
<ul>
<li><a href="selectors/30.html">Quicker version</a> (30m)</li>
<li><a href="selectors/45.html">Conference version</a> (45m)</li>
</ul>
</li>
<li><a href="doyouknowcss/">CSS? WTF!</a> <a href="https://www.youtube.com/watch?v=vTbV0ZBfxR8">Video</a>(40m) (<a href="doyouknowcss/index.2104.html">18m</a>)</li>
<li><a href="http://instartlogic.github.io/p/mobileperf/">Mobile Web Performance</a> (50m)
<ul>
<li><a href="mobileperf/">Mobile Web Performance</a> (60m) - 2013
<li><a href="rwdpanacea/">RWD is not a Panacea</a><ul>
<li><a href="http://instartlogic.github.io/fronteers">Fronteers</a> 20m, </li>
<li><a href="http://instartlogic.github.io/rwdsummit">RWD Summit</a> 60m</li></ul>
</li>
<li><a href="mobileperf/lxjs/">Performance Considerations in a mobile world</a> (20m / #LXJS)</li>
<li><a href="mobilecss/45.html">CSS Performance and Mobile Web</a> (FILive)</li>
<li><a href="mobilecss/">Mobile CSS3 & performance</a> (40m)</li>
</ul>
<li><a href="mobilecss/responsive.html">Responsive features in CSS3</a></li>
<li><a href="forms/">HTML5 Web Forms</a> <a href="https://www.youtube.com/watch?v=pHGUWNEE5nY">Video</a></li>
<li><a href="gradients/">CSS Gradients</a><ul>
<li><a href="gradients/30.html">Quicker version</a> (30m)</li>
</ul></li>
<li><a href="jsframeworks/">JS without Frameworks</a></li>
<li><a href="yslow/">Intro to Web Performance</a> (15m) </li>
<li><a href="http://standardista.com/jquery/">jQuery Selectors</a></li>
<li><a href="10/">Ten things you didn't know your browser could do</a></li>
</ul>
<h2>Workshops</h2>
<ul>
<li><a href="/cssdeepdive/">CSS Deep Dive</a> (7.5 hours)
<ul>
<li><a href="/cssdeepdive/index.html">TOC</a></li>
<li><a href="/cssdeepdive/selectors.html">Selectors</a></li>
<li><a href="/cssdeepdive/transforms.html">Transforms</a></li>
<li><a href="/cssdeepdive/animation.html">Transition & Animation</a></li>
<li><a href="/cssdeepdive/flexbox.html">Flexbox</a></li>
<li><a href="/gradients/">Gradients</a></li>
<li><a href="/snow/">Summary</a></li>
<li><a href="/doyouknowcss/">CSS? WTF!</a></li>
</ul>
</li>
<li><a href="development/">Practical & Powerful HTML5, CSS and JS</a> (8 hours)
<ul>
<li><a href="development/selectors.html">Selectors, Selectors API and Specificity</a></li>
<li><a href="development/js.html">More (or less) JavaScript</a></li>
<li><a href="development/elements.html">HTML5 elements</a></li>
<li><a href="forms/"><input> & forms</a></li>
<li><a href="development/flex.html">Flexbox, box-model and calc()</a></li>
<li>Sass, Mobile Perf and #a11y discussed throughout.</li>
</ul>
</li>
<li><a href="mobilecss/workshop.html">Mobile CSS3 (4 hours)</a>
<ul>
<li><a href="mobilecss/workshop.html">Overview of workshop</a>
<li><a href="mobilecss/responsive.html">CSS Media Queries & Responsive features (CCT)</a></li>
<li><a href="selectors/30.html">Know your selectors</a></li>
<li><a href="gradients/30.html">CSS Gradients</a></li>
<li><a href="animation/30.html">Transitions, Transforms and Animation</a></li>
<li><a href="mobilecss/30.html">Mobile CSS3 Quirks and Pitfalls</a></li>
</ul>
</li>
<li><a href="CSS-Workshop/">CSS (8 hours)</a>
<ol>
<li><a href="selectors/">Selectors</a></li>
<li><a href="CSS-Workshop/part_02_specificity.html">Specificity</a></li>
<li><a href="CSS-Workshop/part_03_generated.html">Generated Content</a></li>
<li><a href="CSS-Workshop/part_04_media.html">Media Queries</a></li>
<li><a href="CSS-Workshop/part_04_media.html#slide10">Debugging</a></li>
<li><a href="CSS-Workshop/part_06_colors.html">Colors & Transparency </a></li>
<li><a href="CSS-Workshop/part_07_fonts.html">Fonts / Typography </a></li>
<li><a href="CSS-Workshop/part_08_backgrounds.html">Backgrounds & Borders </a></li>
<li><a href="gradients/index.html">Gradients</a></li>
<li><a href="CSS-Workshop/part_10_transforms.html">Transforms</a></li>
<li><a href="animation/index.html">Transitions & Animation</a></li>
<li><a href="CSS-Workshop/part_12_features.html">Other Features</a></li>
</ol>
</li>
<li><a href="html5training/">HTML5/CSS3 (16 hours)</a></li>
<li><a href="html5mobile">HTML5/CSS3 for mobile (24 hours)</a></li>
<li><a href="jsintro">Intro to JavaScript (8 hours)</a></li>
<li><a href="oscon2012">CSS3: Making a slide deck (3 hours)</a></li>
<li><a href="mobileperf">Mobile UI Performance (2.5 hours)</a></li>
<li><a href="http://standardista.com/oscon/">HTML5 & CSS3: The good enough parts (4 hours)</a></li>
</ul>
<h2>Games & Tools</h2>
<ul>
<li><a href="http://github.com/estelle/input-masking/">Accessible Input Masking</a></li>
<li><a href="http://github.com/estelle/merry-go-round/">Merry-Go-Round</a>: The accessible carousel</li>
<li><a href="http://github.com/estelle/clowncar/">Clown Car Technique</a> for responsive images</li>
<li><a href="TwitterDM/">Bookmarklet: Make Twitter DMs appear read</a></li>
<li><a href="slides">Template for slidedeck</a></li>
<li><a href="iphone">Native iPhone look and Feel</a></li>
<li><a href="https://estelle.github.io/CSS-JS-Entity-Calculator"> CSS-JS-Entity-Calculator</a> - <a href="http://github.com/estelle/CSS-JS-Entity-Calculator">Github</a></li>
<li><a href="http://jsfiddle.net/estelle/6d5Z6/embedded/result/">Roll the Dice</a> - Roll up to 6 dice</li>
<li><a href="http://jsfiddle.net/estelle/cu2yB/">Temperature Converter</a></li>
<li><a href="http://estelle.github.io/HSLA-Color-Converter">HSLA-Color-Converter</a> - <a href="http://github.com/estelle/HSLA-Color-Converter">Github</a></li>
<li><a href="http://github.com/estelle/StopSOPA">screen hider (StopSOPA)</a></li>
<li><a href="http://cubeedoo.me?animation=needsHelp">Cubeedoo</a> Memory Game</li>
<li><a href="http://github.com/estelle/CSS3Gradients">CSS Gradients Library</a></li>
<li>Click on this link for a <a href="#" onClick="document.location.href=foo; return false;">WYSIWYG</a>
<script>
var foo = "data:text/html,<pre onkeyup=\"(function(d,t){d[t]('iframe')[0].contentDocument.body.innerHTML = d[t]('pre')[0].textContent;})(document,'getElementsByTagName')\" style=\"width:100%;height:48%;white-space:pre-wrap;overflow:auto;\" contenteditable></pre><iframe style=\"width:100%;height:48%\">";
</script> editor</li>
<li><a href="javascript:(function(){$('.promoted-tweet').closest('li.stream-item').css('display','none'); $('.DismissibleModule').css('display','none');})()">kill ads</a> - drag link to bookmarks bar to kill Twitter ads. Click on "kills ads" in bookmark bar when you're on Twitter.com to kill the inline ads. </li>
<li><a href="javascript:(function(){document.querySelector('.ego_unit_container').style.display = 'none';var likebuttons = document.querySelectorAll('.PageLikeButton');for(var i=0; i < likebuttons.length; i++){likebuttons[i].parentNode.parentNode.parentNode.style.display = 'none';}})();">Kill FB feed ads</a></li>
<li><a href="javascript:(function(){$('.promoted-tweet').closest('li.stream-item').css('display','none');$('.js-moments-tab, .DismissibleModule').css('display','none');$('.Icon--heartBadge').closest('li.stream-item').css('display','none');})()">kill moments, ads, and likes</a></li>
<li><a href="javascript:(function(){function kill(){$('.promoted-tweet').closest('li.stream-item').css('display','none');$('.js-moments-tab, .DismissibleModule').css('display','none');$('.Icon--heartBadge').closest('li.stream-item').css('display','none');setTimeout(kill, 1000);}kill();})();">TWELP</a> - Drag this link to your bookmarks bar, and click TWELP bookmarklet whenever you load Twitter. It kills the moments tab, all ads, and removes the "X liked" tweets. see <a href="http://www.standardista.com/twelp-twitter-bookmarklet/">http://www.standardista.com/twelp-twitter-bookmarklet/</a> to see the code and roll your own bookmarklet.</li>
</ul>
<h2>Archived Talks</h2>
<ul>
<li><a href="mobile/">Don't Break the Mobile Web (Mobile performance Considerations)</a></li>
<li><a href="forms/index_2012.html">Web Forms (2012)</a></li> <li><a href="html5jsapis/">HTML5 JavaScript API overview</a></li>
<li><a href="debugging/">Debugging Mobile Web Apps</a></li> <li><a href="web-components/">Introduction to Web Components</a></li>
</ul>
</body>
</html>