-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
425 lines (382 loc) · 22.9 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
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ffconf 2023 - UK web and JavaScript conference</title>
<link rel="preload" as="font" crossorigin href="./webfonts/proto-mono-regular.woff2" fetchpriority="high">
<link rel="preload" as="font" crossorigin href="./webfonts/intertight-variablefont_wght-webfont.woff2"
fetchpriority="high">
<script type="module" src="./rem-details.js" async></script>
<link rel="stylesheet" href="style.css">
<!-- <script type="x-disabled" src="./when-do.mjs" async defer></script> -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ffconf">
<meta name="twitter:creator" content="@ffconf">
<meta property="twitter:image:src" content='https://2023.ffconf.org/images/2023-twitter-card.jpg'>
<meta property="og:url" content="https://ffconf.org/">
<meta property="og:title" content="ffconf 🌟 UK web conference since 2009">
<meta property="og:description" content="ffconf - the UK's best JavaScript and Web conference in Brighton.">
<meta name="description" content="ffconf - the UK's best JavaScript and Web conference in Brighton.">
<meta property="og:image" content='https://2023.ffconf.org/images/2023-twitter-card.jpg' />
</head>
<body>
<h1>
<svg viewbox="0 0 696 174" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>ff conf</title>
<path
d="M282.638 44.331c0-1.625.464-2.785 1.624-3.946l8.357-8.356c1.16-1.161 2.553-1.625 4.178-1.625h26.694c1.625 0 3.018.464 4.178 1.625l8.821 8.82c.696.929.928 1.857.928 2.786 0 .928-.232 1.857-.928 2.785l-75.208 74.743c-2.553 2.322-3.714 5.107-3.714 8.357v25.069c0 7.196 5.339 12.767 12.535 12.767h80.082c7.196 0 12.302-5.571 12.302-12.767s-5.106-12.767-12.302-12.767H290.53c-3.482 0-7.428-2.321-7.428-5.803 0-1.161.464-2.089 1.16-2.785l74.744-74.047c2.553-2.553 3.481-5.803 3.481-8.589V36.671c0-3.018-1.16-6.035-3.481-8.82L339.972 8.815c-2.322-2.553-5.339-3.946-8.821-3.946h-42.014c-3.482 0-6.732 1.393-8.821 3.946L261.282 27.85c-2.553 2.554-3.714 6.036-3.714 8.821v10.213c0 7.196 5.339 12.303 12.535 12.303s12.535-5.107 12.535-12.303v-2.553ZM396.594 8.816l-24.141 23.909c-2.553 2.553-3.714 5.339-3.714 8.82v89.135c0 3.482 1.161 6.268 3.714 8.821l24.141 23.908c2.321 2.554 5.107 3.947 8.588 3.947h32.265c3.25 0 6.036-1.161 8.589-3.714l23.908-23.909c2.554-2.553 3.714-5.339 3.714-9.053V41.546c0-3.482-1.16-6.268-3.714-8.821l-23.908-24.14c-2.553-2.554-5.339-3.715-8.589-3.715h-32.265c-3.481 0-6.499 1.393-8.82 3.946h.232Zm48.513 35.05c0 .233-.232.697-.464.93l-47.817 47.816c-.696.697-1.161.929-1.625.929-.696 0-.928-.697-.928-1.857v-42.71c0-1.625.464-3.018 1.625-4.179l12.766-12.766c1.161-1.161 2.554-1.625 4.178-1.625h16.945c1.625 0 2.786.464 3.946 1.625l10.91 10.677c.232.232.464.697.464.929v.232Zm-47.12 85.654c-.232-.232-.465-.697-.465-.929 0-.464.233-.928.465-1.16l47.585-47.585c.696-.697 1.16-.929 1.624-.929.697 0 .929.697.929 1.857v42.478c0 1.625-.464 3.018-1.393 4.179l-12.999 12.766c-1.16 1.161-2.321 1.625-3.946 1.625h-16.945c-1.624 0-3.017-.464-4.178-1.625l-10.677-10.677ZM504.98 44.331c0-1.625.464-2.785 1.624-3.946l8.357-8.356c1.16-1.161 2.553-1.625 4.178-1.625h26.694c1.625 0 3.018.464 4.178 1.625l8.821 8.82c.696.929.928 1.857.928 2.786 0 .928-.232 1.857-.928 2.785l-75.208 74.743c-2.553 2.322-3.714 5.107-3.714 8.357v25.069c0 7.196 5.339 12.767 12.535 12.767h80.082c7.196 0 12.302-5.571 12.302-12.767s-5.106-12.767-12.302-12.767h-59.655c-3.482 0-7.428-2.321-7.428-5.803 0-1.161.464-2.089 1.16-2.785l74.744-74.047c2.553-2.553 3.481-5.803 3.481-8.589V36.671c0-3.018-1.16-6.035-3.481-8.82L562.314 8.815c-2.322-2.553-5.339-3.946-8.821-3.946h-42.014c-3.482 0-6.732 1.393-8.821 3.946L483.624 27.85c-2.553 2.554-3.714 6.036-3.714 8.821v10.213c0 7.196 5.339 12.303 12.535 12.303s12.535-5.107 12.535-12.303v-2.553ZM616.151 44.099c0-1.393.464-2.553 1.624-3.714l8.357-8.356c1.16-1.161 2.553-1.625 4.178-1.625h26.23c1.625 0 3.017.464 4.178 1.625l8.356 8.356c.929 1.16 1.393 2.553 1.393 3.714V59.65a6.3 6.3 0 0 1-1.393 3.946l-8.356 8.589c-1.393 1.16-2.786 1.624-4.178 1.624h-25.302c-7.195 0-12.534 5.107-12.534 12.303 0 7.196 5.339 12.534 12.534 12.534h25.302c1.392 0 2.785.465 4.178 1.625l8.356 8.589a6.299 6.299 0 0 1 1.393 3.946v15.32c0 1.161-.464 2.553-1.393 3.714l-8.356 8.356c-1.161 1.161-2.553 1.625-4.178 1.625h-26.23c-1.625 0-3.018-.464-4.178-1.625l-8.357-8.356c-1.16-1.161-1.624-2.321-1.624-3.714v-2.785c0-7.196-5.339-12.071-12.535-12.071s-12.535 4.875-12.535 12.071v10.213c0 2.785 1.161 6.267 3.714 8.821l19.034 19.033c2.089 2.554 5.339 3.947 8.821 3.947h41.55c3.482 0 6.499-1.393 8.82-3.947l19.499-19.033c2.553-2.554 3.481-6.036 3.481-8.821v-30.176c0-3.482-1.16-6.5-3.481-8.82l-4.875-4.643c-1.393-1.393-2.089-3.25-2.089-5.803 0-2.321.696-4.178 2.089-5.571l4.875-4.642c2.321-2.322 3.481-5.34 3.481-8.821V36.671c0-2.785-.928-6.267-3.481-8.82L673.02 8.815c-2.321-2.553-5.338-3.946-8.82-3.946h-41.55c-3.482 0-6.732 1.393-8.821 3.946L594.795 27.85c-2.553 2.554-3.714 6.036-3.714 8.821v10.213c0 7.196 5.339 12.303 12.535 12.303s12.535-5.107 12.535-12.303V44.1Z"
fill="#D4AF37" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 80.137v26.438l37.177-13.219v40.482l33.047-13.219V80.137L107.4 66.92l37.177 13.219v40.481l33.046 13.219V93.356l37.177 13.219V80.137L177.624 66.92V52.874l37.177 13.219V39.656l-70.223-26.437V53.7l-37.177-13.218L70.224 53.7V39.656L107.4 26.437V0L37.177 26.437V66.92L0 80.137Z"
fill="#403700" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="m107.401 119.793-37.177-13.218V92.53l37.177 13.218V79.311L37.177 52.874v40.482L0 80.138v26.437l37.177 13.218v40.482l33.047 13.218v-40.481L107.4 146.23l37.177-13.219v40.482l33.046-13.218v-40.482l37.177-13.219V80.137l-37.177 13.219V79.31l37.177-13.218V39.655l-70.223 26.438v40.481l-37.177 13.219Z"
fill="#D4AF37" />
<path d="M107.4 120.753v24.383" stroke="#D4AF37" stroke-width="4" />
</svg>
</h1>
<h2>
<time datetime="2023-11-10T10:00:00">Fri 10 NOV 2023</time>
</h2>
<!-- <when-do do="show" id="button-when" apply="ease-in" datetime="2023-07-13T17:02 2024"> -->
<div class="button cta"><a href="https://www.tickettailor.com/events/ffconf2023/951482" target="_blank">
Sold out!
<!-- Buy tickets @ 249+VAT -->
</a></div>
<!-- </when-do> -->
<hr>
<main>
<section id="intro">
<p>A full day of eight carefully curated sessions for an audience that cares about the future of the web, and
who want their ideas challenged.</p>
<ul>
<li>Held at the <a href="https://www.picturehouses.com/cinema/duke-of-york-s-picturehouse/information">Duke of
Yorks cinema</a>
<li>In sunny* Brighton, UK
<li>Eight amazing and inspiring talks
<li><a href="https://ffconf.org/scholarship/">Inclusion scholarship programme</a>
<li>After party to socialise, network or play
<li><small>* Sunshine 100% (not) guaranteed</small>
</ul>
</section>
<section class="shadow" id="schedule">
<h2>Sessions</h2>
<!-- <p>Our <a href="https://ffconf.org/articles/cfp/">Call For Papers</a> is open and we'll be releasing each of the talks for 2023 in the coming weeks. Please do share and apply.</p> -->
<p>Day format: 9am registration, 90 minute lunch break (not provided), conference ends at 6pm with a social in
walking distance until late.</p>
<p>Keep up to date with the <a href="https://ffconf.org/news/">latest announcements here</a></p>
<ol>
<li class="break">
<div class="time">
<time>09:00</time>
<time>09:40</time>
</div>
<p class="title">Registration</p>
</li>
<li class="break">
<div class="time">
<time>09:40</time>
<time>09:50</time>
</div>
<p class="title">Opening remarks</p>
</li>
<li class="talk">
<div class="time">
<time>09:50</time>
<time>10:30</time>
</div>
<p class="title">Imposter syndrome, overworking, and working environments <span title="given by">/</span>
<a href="https://ambershand.co.uk/" class="name">Amber Shand</a>
</p>
<img height="256" width="256" loading="lazy" alt="Photo of Amber Shand" src="/images/8-amber.jpg">
<rem-details>
<dl slot="details">
<dt class="icon talk">The talk</dt>
<dd>Dealing with imposter syndrome, perfectionism and building a growth mindset - this talk is
essentially a survival guide on how to cope when we feel inferior in the tech space where we're
surrounded by people doing incredible things both in and outside of work time.</dd>
<dt class="icon pronouns">She/her</dt>
<dd>I was told that because I didn't have a Computer Science degree, I wouldn't be able to learn how to
code, I didn't listen and I'm now a multi award software engineer, keynote speaker and consultant</dd>
</dl>
</rem-details>
</li>
<li class="talk">
<div class="time">
<time>10:30</time>
<time>11:10</time>
</div>
<p class="title">The Expanding Dark Forest and Generative <abbr title="artificial intelligence">AI</abbr>
<span title="given by">/</span>
<a class="name" href="https://maggieappleton.com/">Maggie Appleton</a>
</p>
<img height="256" width="256" loading="lazy" alt="Photo of Maggie Appleton" src="/images/4-maggie.jpg">
<rem-details>
<dl slot="details">
<dt class="icon talk">She/her</dt>
<dd>The web is already an eerily lifeless place filled with automated predators like bots, advertisers,
clickbait attention-grabbers, SEO-optimisers, and angry twitter mobs - and they now have a generative
<abbr title="artificial intelligence">AI</abbr> hammer to swing. When language models can churn out
millions of human-like words, images, and
videos in seconds, what happens to human creation and connection on the web?
</dd>
<dt class="icon pronouns">About me</dt>
<dd>Built an elaborate Neopets page using only the HTML `<table>` element for positioning and
layout. Graduated to maximalist design aesthetics and animated cursors with CSS on MySpace.</dd>
</dl>
</rem-details>
</li>
<li class="break">
<div class="time">
<time>11:10</time>
<time>11:40</time>
</div>
<p class="title">Coffee break (30 mins)</p>
</li>
<li class="talk">
<div class="time">
<time>11:40</time>
<time>12:20</time>
</div>
<p class="title">We need to talk about the front web
<span title="given by">/</span>
<a class="name" href="https://gericci.me/">Angela Ricci</a>
</p>
<img height="256" width="256" loading="lazy" alt="Photo of Angela Ricci" src="/images/7-angela.jpg">
<rem-details>
<dl slot="details">
<dt class="icon talk">The talk</dt>
<dd>Why the front web became this monster, and how to fix it..!</dd>
<dt class="icon pronouns">She/her</dt>
<dd> I fell into a cauldron of a magic potion called the web, when it was
still cooking. Since then, web technologies became my super power for
designing new interfaces.</dd>
</dl>
</rem-details>
</li>
<li class="talk">
<div class="time">
<time>12:20</time>
<time>13:00</time>
</div>
<p class="title">Web accessibility - it's not just about HTML
<span title="given by">/</span>
<a class="name" href="https://ireaderinokun.com/">Ire Aderinokun</a>
</p>
<img height="256" width="256" loading="lazy" alt="Photo of Ire Aderinokun" src="/images/5-ire.jpg">
<rem-details>
<dl slot="details">
<dt class="icon talk">The talk</dt>
<dd>Plain Old Semantic HTML allows accessible web pages, but CSS and JavaScript can hinder accessibility
by altering element meaning, behavior, or blocking content. Learn how to use them appropriately to
enhance accessibility and adapt experiences for all users</dd>
<dt class="icon pronouns">She/her</dt>
<dd>I was a <em>little</em> too obsessed with Neopets as a teenager and had to build the best profile
page. Once I started down that rabbit hole I was hooked!</dd>
</dl>
</rem-details>
</li>
<li class="break">
<div class="time">
<time>13:00</time>
<time>14:30</time>
</div>
<p class="title">Lunch break (90 mins)</p>
</li>
<li class="talk">
<div class="time">
<time>14:30</time>
<time>15:10</time>
</div>
<p class="title">Ada Lovelace and The Very First Computer Program
<span title="given by">/</span>
<a class="name" href="https://www.marquisdegeek.com/">Steven Goodwin</a>
</p>
<img height="256" width="256" loading="lazy" alt="Photo of Steven Goodwin" src="/images/2-steven.jpg">
<rem-details>
<dl slot="details">
<dt class="icon talk">The talk</dt>
<dd>We all know that Ada Lovelace is credited as the first computer programmer. But what did she write?
What did it do? And how does it work?</dd>
<dt class="icon pronouns">He/him</dt>
<dd>I have been involved in computing, science, and technology since the family computer, a Sinclair
ZX81, moved in with me to become my first piece of domesticated hardware.
</dd>
</dl>
</rem-details>
</li>
<li class="talk">
<div class="time">
<time>15:10</time>
<time>15:50</time>
</div>
<p class="title">Embracing Neurodiversity in Tech: Building Empathy, Unveiling Strengths
<span title="given by">/</span>
<a class="name" href="https://www.jonathanfielding.com/">Jonathan Fielding</a>
</p>
<img height="256" width="256" loading="lazy" alt="Photo of Jonathan Fielding" src="/images/6-jonathan.jpg">
<rem-details>
<dl slot="details">
<dt class="icon talk">The talk</dt>
<dd>Unveil the power of neurodiversity. Through personal experiences and practical strategies, foster
empathy, challenge stereotypes, and create an inclusive environment for hidden disabilities. Celebrate
unique strengths together.</dd>
<dt class="icon pronouns">He/him</dt>
<dd>Escaping from an after school club I found my way back to my classroom where a student teacher
showed me BASIC on a Acorn.</dd>
</dl>
</rem-details>
</li>
<li class="break">
<div class="time">
<time>15:50</time>
<time>16:15</time>
</div>
<p class="title">Ice cream break (25 minutes)</p>
</li>
<li class="talk">
<div class="time">
<time>16:15</time>
<time>16:55</time>
</div>
<p class="title">Exploring the Potential of the Web Speech API in Karaoke
<span title="given by">/</span>
<a class="name" href="https://ohhelloana.blog/">Ana Rodrigues</a>
</p>
<img height="256" width="256" loading="lazy" alt="Photo of Ana Rodrigues" src="/images/3-ana.jpg">
<rem-details>
<dl slot="details">
<dt class="icon talk">The talk</dt>
<dd>Isn't it frustrating when the song you want isn't available at karaoke? Let's see if we
can solve
this. We will look at the current state of the Web Speech API and what's coming next, and have some
fun!</dd>
<dt class="icon pronouns">She/her</dt>
<dd>In the early 2000s, I needed more than my favourite band's official website. So I learned how to
code in order to build a proper fan site.
</dd>
</dl>
</rem-details>
</li>
<li class="talk">
<div class="time">
<time>16:55</time>
<time>17:35</time>
</div>
<p class="title">Entertainment as Code
<span title="given by">/</span>
<a class="name" href="https://whitep4nth3r.com/">Salma Alam-Naylor</a>
</p>
<img height="256" width="256" loading="lazy" alt="Photo of Salma Alam-Naylor" src="/images/1-salma.jpg">
<rem-details>
<dl slot="details">
<dt class="icon talk">The talk</dt>
<dd>This talk is about live streaming and learning in public, and about how writing silly code and
building silly websites in front of a live audience is a powerful (and hilarious) way to build a
community.</dd>
<dt class="icon pronouns">She/her</dt>
<dd>This is what happens when you combine a high school music teacher, a comedian, a front end
developer,
and the strange novelty of live streaming on the internet.</dd>
</dl>
</rem-details>
</li>
<li class="break">
<div class="time">
<time>17:35</time>
<time>17:50</time>
</div>
<p class="title">Closing remarks</p>
</li>
<li class="break">
<div class="time">
<time>17:50</time>
<time datetime="23:59:00">Late</time>
</div>
<p class="title">Post social</p>
</li>
</ol>
</section>
<section class="shadow" id="locations">
<h2>Locations</h2>
<ol id="venue">
<li><a href="https://www.picturehouses.com/cinema/duke-of-york-s-picturehouse/information"
target="_blank">Duke of Yorks cinema</a><em>The Conference</em></li>
<li><a href="https://facebook.com/MoesatTheCircus/" target="_blank">Moe's at the Circus</a><em>Early morning
networking from 7:30am</em>
</li>
<li><a href="https://thelounges.co.uk/alcampo/" target="_blank">Al Campo</a><em>Lunch with "Future Friends"
(on Fri)
&
pre event social on Thurs</em></li>
</ol>
<ol id="hotels">
<li><a href="https://www.travelodge.co.uk/hotels/18/Brighton-hotel" target="_blank">Travelodge</a><em>From
£53, short walk from station</em></li>
<li><a href="https://www.accorhotels.com/gb/hotel-6444-ibis-brighton-city-centre-station/index.shtml"
target="_blank">Ibis</a><em>From £87, outside the front of station</em></li>
<li><a href="https://www.leonardohotels.co.uk/hotels/brighton" target="_blank">Leonardo Hotels</a><em>From
£122, near train station (previously Jury's Inn)</em></li>
<li><a href="https://www.leonardohotels.co.uk/hotels/brighton-waterfront" target="_blank">Leonardo Hotels
Waterfront</a><em>From 117, close to after party venue</em></li>
</ol>
</section>
<section id="sponsors">
<h2>Sponsors</h2>
<p>Without our sponsors and supporters, our event would not be possible, please take a moment to look at their
web sites and find out more about them.</p>
<p>Include your company to support ffconf and <a
href="mailto:[email protected]?subject=Request%20for%20sponsor%20pack%20%5B2022%5D">request a sponsor
pack</a></p>
<div class="sponsors">
<div class="sponsor platinum">
<h3>Headline</h3>
<ol>
<li><a href="https://web.dev"><img loading="lazy" alt="Google" width="288.8" height="58" width=""
src="/images/sponsors/google.png"></a></li>
</ol>
</div>
<div class="sponsor">
<h3>Day</h3>
<ol>
<li><a href="https://webmonetization.org/docs"><img loading="lazy" alt="Interledger Foundation"
src="/images/sponsors/ilf.svg"></a></li>
<li><a href="https://jsbin.com/"><img loading="lazy" alt="JS Bin" src="/images/sponsors/jsbin.svg"></a>
</li>
</ol>
</div>
<div class="sponsor">
<h3>Scholarships</h3>
<ol>
<li><a href="https://www.legalandgeneral.com/careers/legal-and-general-life/"><img loading="lazy"
alt="Legal and General" src="/images/sponsors/landg.svg"></a></li>
</ol>
</div>
</div>
</section>
</main>
<footer>
<ul>
<li><a href="https://ffconf.org/accessibility">Venue Accessibility</a></li>
<li><a href="https://ffconf.org/covid">COVID policy</a></li>
<li><a href="https://ffconf.org/inclusion">Inclusion Statement</a></li>
<li><a href="https://ffconf.org/scholarship">Scholarship Programme</a></li>
<li><a href="https://ffconf.org/code-of-conduct">Code of Conduct</a></li>
<li><a href="https://ffconf.org/terms">Terms</a></li>
<li><a href="https://ffconf.org/privacy">Privacy</a></li>
<li><a href="https://ffconf.org/">Previous Years</a></li>
</ul>
</footer>
<!-- nope, no tracking here today. -->
</body>
</html>