-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
508 lines (465 loc) · 22 KB
/
index.html
File metadata and controls
508 lines (465 loc) · 22 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
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
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
<!DOCTYPE html>
<html lang="en" id="index">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ffconf 2025 - UK web and JavaScript conference</title>
<meta name="description" content="ffconf - the UK's best JavaScript and Web conference in Brighton" />
<link rel="icon" href="/assets/icons/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" />
<link rel="manifest" href="/assets/manifest.json" />
<meta name="msapplication-TileColor" content="#000000">
<meta name="theme-color" content="#000000">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ffconf">
<meta name="twitter:creator" content="@ffconf">
<meta property="og:url" content="https://2025.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.">
<link rel="stylesheet" href="./style.css">
<script defer data-domain="2025.ffconf.org" src="https://plausible.io/js/script.outbound-links.js"></script>
<script>window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
<script>
// frame bust - can't believe we're still doing this in 2025
if (window.top !== window.self) {
window.top.location = window.self.location;
}
</script>
</head>
<body>
<section class="hero">
<div class="container">
<div class="logo">
<img id="logo" src="/assets/logo.svg" alt="FFConf logo">
<header>
<h1>ffconf</h1>
<time>14th Nov 2025</time>
</header>
</div>
<div class="tickets-holder">
<when-do show="2025-11-06T00:00:00Z">
<div class="tickets">
<a href="https://app.tickettailor.com/checkout/view-event/id/6028948/chk/fe2b/"
class="notice cta button">Buy your ticket</a>
<div class="notice">
<p class="heading">£299<small>+VAT</small></p>
<p>Late-bird rate tickets</p>
</div>
</div>
</when-do>
<when-do show="2025-09-04T10:00:00Z" hide="2025-11-05T23:59:59Z">
<div class="tickets">
<a href="https://app.tickettailor.com/checkout/view-event/id/6028948/chk/fe2b/"
class="notice cta button">Buy your ticket</a>
<div class="notice">
<p class="heading">£249<small>+VAT</small></p>
<p>Limited standard rate tickets</p>
</div>
</div>
</when-do>
<when-do show="2025-08-01T00:00:00Z" hide="2025-08-03T23:59:59Z">
<div>
<div class="notice cta">
<p class="heading">Ticket sales closed for summer</p>
<p>Re-opening in September</p>
</div>
</div>
</when-do>
<when-do show="2025-06-26T10:00:00Z" hide="2025-08-01T00:00:00Z">
<div class="tickets">
<a href="https://app.tickettailor.com/checkout/view-event/id/6028948/chk/fe2b/"
class="notice cta button">Buy your ticket</a>
<div class="notice">
<p class="heading">£219<small>+VAT</small></p>
<p>Limited early bird pricing</p>
</div>
</div>
</when-do>
<when-do hide="2025-06-26T10:00:00Z">
<div class="tickets">
<div class="notice">
<p class="heading">Limited early bird tickets</p>
<p>Released June 26th at 11am</p>
</div>
</div>
</when-do>
<script src="/assets/when-do.wc.mjs"></script>
<form id="newsletter" class="notice">
<p>Get notified of new speakers & event news</p>
<div style="position: absolute !important;left: -999em !important;">
<label for="name">We use the following field to detect spam bots. If you fill this in, your subscription
will be ignored. If you're using a voice over assistant make sure to exit the following text field and
move to the "name" field.</label>
<input type="text" id="name" name="name" autocomplete="off">
</div>
<div class="grid">
<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="Your email address" required>
<label for="first_name">Name</label>
<input type="text" placeholder="Your name" name="first_name" id="first_name" required>
<input hidden="" name="last_name" value="">
<input type="submit" value="Notify me">
</div>
</form>
<script>
(() => {
const target = 'https://mail.leftlogic.com/subscribe/6784a6a3-4975-409d-975b-64df4672ca9c';
const form = document.querySelector('#newsletter');
form.addEventListener('submit', (event) => {
if (form.method === 'post') {
return;
}
const spamCheck = form.querySelector('[name="name"]');
const firstName = form.querySelector('[name="first_name"]');
const lastName = form.querySelector('[name="last_name"]');
if (spamCheck.value || lastName.value) {
// falls into the thanks page ignoring the submit
return;
}
event.preventDefault();
let [first, ...last] = firstName.value.split(' ');
lastName.value = last.join(' ');
firstName.value = first;
form.method = 'post';
form.action = target;
form.submit();
});
})();
</script>
</div>
<p class="strap">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>
<div id="what-to-expect">
<ffconf-card-holder>
<ffconf-card class="boxed">
<img alt="" src="/assets/weather.svg">
<p>Located in <strike>sunny</strike> Brighton, UK</p>
</ffconf-card><ffconf-card class="boxed">
<img alt="" src="/assets/venue.svg">
<p>Held at the <a href="https://www.picturehouses.com/cinema/duke-of-york-s-picturehouse/information">Duke
of Yorks</a> cinema</p>
</ffconf-card><ffconf-card class="boxed">
<img alt="" src="/assets/date.svg">
<p>All-day conference (from 9-6pm)</p>
</ffconf-card>
<ffconf-card class="boxed">
<img alt="" src="/assets/speakers.svg">
<p>Eight amazing speakers</p>
</ffconf-card>
<ffconf-card class="boxed">
<img alt="" src="/assets/scholarship.svg">
<p><a href="https://ffconf.org/scholarship">Scholarship programme</a></p>
</ffconf-card>
<ffconf-card class="boxed">
<img alt="" src="/assets/party.svg">
<p>After party to network & play</p>
</ffconf-card>
</ffconf-card-holder>
</div>
</div>
</section>
<section class="schedule" id="sessions">
<div class="container">
<h2>Schedule</h2>
<ul class="sessions">
<li class="ffconf-session boxed joined info">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T09:00:00Z">09:00 — 09:35</time>
<h3>Registration</h3>
</div>
</div>
</li>
<li class="ffconf-session boxed info">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T09:35:00Z">09:35 — 09:50</time>
<h3>Opening remarks</h3>
</div>
</div>
</li>
<li class="ffconf-session boxed" data-order="1">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T09:50:00Z">09:50 — 10:30</time>
<h3><a href="/hellen.html">Bias in our products: The case for diversity in tech</a></h3>
</div>
<p class="speaker-name">A talk by Hellen Ward</p>
<p class="session-description">Bias isn't just a bug — it's a feature of who builds the product.</p>
<p class="tags">#DiversityInTech, #InclusiveDesign, #BiasInAI, #BuildBetterTech
</p>
</div>
<div data-speaker="hellen" class="speaker-image">
<div></div>
</div>
</li>
<li class="ffconf-session boxed" data-order="2">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T10:30:00Z">10:30 — 11:10</time>
<h3><a href="/chetan.html">Powerless by Design</a></h3>
</div>
<p class="speaker-name">A talk by Chetan Padia</p>
<p class="session-description">Your users often have to opt in to cookies, privacy policies, terms and
conditions, accounts, or apps,
just to use your product. What are you and your users giving away? How do we build for the benefit of
users first?</p>
<p class="tags">#BigTech, #Ethics, #Privacy</p>
</div>
<div data-speaker="chetan" class="speaker-image">
<div></div>
</div>
</li>
<li class="ffconf-session boxed info">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T11:10:00Z">11:10 — 11:40</time>
<h3>Coffee break</h3>
</div>
</div>
</li>
<li class="ffconf-session boxed" data-order="3">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T11:40:00Z">11:40 — 12:20</time>
<h3><a href="/hannah.html">An Uncomfortable Place</a></h3>
</div>
<p class="speaker-name">A talk by Hannah Clarke</p>
<p class="session-description">How do you build Design System component packages to keep everyone happy
regardless of framework? It's
not easy (and let's be honest, React die-hards will only be happy with pure React), but we're getting
there using web components and Stencil.
</p>
<p class="tags">#WebComponents, #DesignSystems</p>
</div>
<div data-speaker="hannah" class="speaker-image">
<div></div>
</div>
</li>
<li class="ffconf-session boxed" data-order="4">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T12:20:00Z">12:20 — 13:00</time>
<h3><a href="/serges.html">You're in a Code Cult (And That's OK)</a></h3>
</div>
<p class="speaker-name">A talk by Sergès Goma</p>
<p class="session-description">Programming languages often become more than tools—they’re badges of
belonging. This talk explores why
devs fight fiercely over languages, even though they share so much in common, uncovering the culture and
rivalries behind the code.</p>
</div>
<div data-speaker="serges" class="speaker-image">
<div></div>
</div>
</li>
<li class="ffconf-session boxed info">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T13:00:00Z">13:00 — 14:30</time>
<h3>Lunch break</h3>
<p>90 minutes — <a href="https://ffconf.org/food">lunch suggestions</a></p>
</div>
</div>
</li>
<li class="ffconf-session boxed" data-order="5">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T14:30:00Z">14:30 — 15:10</time>
<h3><a href="/asim.html">Don't be an Idiot</a></h3>
</div>
<p class="speaker-name">A talk by Asim Hussain</p>
<p class="session-description">What if open source isn't a Silicon Valley invention, but the latest
manifestation of ancient
technology for diluting power? The same principles that created democracy in Athens around 500 BC drive
modern open source & standards creation. As AI handles more tasks, the fundamentally human work that
remains is governance, but we've forgotten how to make collective decisions. Your role isn't as a
builder of something new, but as a guardian of something ancient.</p>
<p class="session-description">This talk is optimistic but realistic - about human agency rather than
human obsolescence. It's not
another "AI will save/destroy us all" talk. And yes, it's all linked to psychedelics!</p>
<p class="tags">#Democracy, #AncientWisdom, #Consensus, #AI, #DistributedPower</p>
</div>
<div data-speaker="asim" class="speaker-image">
<div></div>
</div>
</li>
<li class="ffconf-session boxed" data-order="6">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T15:10:00Z">15:10 — 15:50</time>
<h3><a href="/jessica-eda.html">Forgetting Machines: AI Coding Tools and Skill</a></h3>
</div>
<p class="speaker-name">A talk by Jessica Rose & Eda Eren</p>
<p class="session-description">AI coding tools are getting sold as an inevitable future, but using them
diminishes the processes
that drive learning for developers. What's this doing to individual skills and our industry as a whole?
Is it hopeless? What can we do to fix this?</p>
<p class="tags">#AI, #AICodingTools, #ForgettingMachines, #AIBrainDrain</p>
</div>
<div data-speaker="jessica-eda" class="speaker-image">
<div></div>
</div>
</li>
<li class="ffconf-session boxed info">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T15:50:00Z">15:50 — 16:15</time>
<h3>Ice cream break</h3>
</div>
</div>
</li>
<li class="ffconf-session boxed" data-order="7">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T16:15:00Z">16:15 — 16:55</time>
<h3><a href="/surya.html">Six to Sixteen: A Child's Programming Journey</a></h3>
</div>
<p class="speaker-name">A talk by Surya Rose</p>
<p class="session-description">Learning to code is not easy. It takes a lot of time and practise to become
a good developer,
especially with the hundreds of different technologies that exist, it's often hard to know where to
start. In this talk, I share my experience as a programmer, starting from when I first learned to code
at the age of six.</p>
<p class="tags">#LearnToCode, #Journey, #YoungDeveloper</p>
</div>
<div data-speaker="surya" class="speaker-image">
<div></div>
</div>
</li>
<li class="ffconf-session boxed" data-order="8">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T16:55:00Z">16:55 — 17:35</time>
<h3><a href="/sacha.html">The Good Internet: How Fandom Can Reclaim the Web</a></h3>
</div>
<p class="speaker-name">A talk by Sacha Judd</p>
<p class="session-description">How to escape the algorithmic doom loops and reclaim our digital lives.</p>
<p class="tags">#TheGoodInternet, #ReclaimTheWeb, #FanPower</p>
</div>
<div data-speaker="sacha" class="speaker-image">
<div></div>
</div>
</li>
<li class="ffconf-session boxed info joined">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T17:35:00Z">17:35 — 17:50</time>
<h3>Closing remarks</h3>
</div>
</div>
</li>
<li class="ffconf-session boxed info">
<div class="details">
<div class="session-slot">
<time datetime="2025-11-14T18:00:00Z">18:00 — Late</time>
<h3>After party</h3>
<p>Food & drink, games and chat available — <a href="https://ffconf.org/party">map</a></p>
</div>
</div>
</li>
<li hidden="" class="ffconf-session boxed info" data-id="more" data-order="more">
<time datetime="2025-11-14T09:00:00Z">09:00 AM</time>
<div class="details">
<p>More of our 8 speakers to be <a href="https://ffconf.org/news">announced</a> soon. Our <a
href="https://ffconf.org/cfp">CFP</a> is still open too.</p>
</div>
</li>
</ul>
</div>
</section>
<section class="info">
<div class="container">
<h2>Get involved</h2>
<ul class="card-links">
<li>
<a class="boxed" href="https://ffconf.org/cfp">
<span class="title">
Conference
</span>
<span class="description">
Apply to speak at FFConf
</span>
</a>
</li>
<li>
<a class="boxed" href="https://ffconf.org/scholarship">
<span class="title">
Equality for all
</span>
<span class="description">
Apply for our inclusion scholarship
</span>
</a>
</li>
<li>
<a class="boxed" href="https://ffconf.org/news">
<span class="title">
Subscribe
</span>
<span class="description">
Get the latest news for ffconf
</span>
</a>
</li>
</ul>
<div class="hflex">
<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>
</div>
<div class="sponsors">
<a class="sponsor boxed headline" href="https://web.dev/">
<span class="title">Headline Sponsor</span>
<img alt="Guidance to build modern web experiences that work on any browser"
src="/assets/sponsors/google.svg">
</a>
<a class="sponsor boxed" href="https://tetralogical.com/">
<span class="title">Day Sponsor</span>
<img alt="Tetra Logical, accessibility specialists" src="/assets/sponsors/tetra-logical.svg">
</a>
<a class="sponsor boxed" href="https://www.wearemirus.com/">
<span class="title">Day Sponsor</span>
<img alt="Mirus - bringing clarity, care, and confidence to every hire" src="/assets/sponsors/mirus.svg">
</a>
<a class="sponsor boxed" href="https://www.pleo.io/en">
<span class="title">Day Sponsor</span>
<img alt="Smarter spending for your business - Pleo" src="/assets/sponsors/pleo.svg">
</a>
<a class="sponsor boxed" href="http://krystal.io/?utm_source=ffconf">
<span class="title">Scholarship Sponsor</span>
<img id="sponsor-krystal"
alt="Krystal - Get ultra-fast, secure green web hosting powered by 100% renewable energy and backed by award-winning UK support"
src="/assets/sponsors/krystal.svg">
</a>
<a class="sponsor boxed" href="https://jsbin.com">
<span class="title">Day Sponsor</span>
<img alt="JS Bin - Collaborative Web Debugging" src="/assets/sponsors/jsbin.svg">
</a>
<a class="sponsor boxed"
href="mailto:events@leftlogic.com?subject=Request%20for%20sponsor%20pack%20%5B2025%5D">
<span class="title">Become a sponsor</span>
<span class="description">If you would like your company to be a sponsor, please <em>request a sponsorship
pack</em> today.</span>
</a>
</div>
</div>
</section>
<section class="footer">
<footer class="container">
<nav>
<ul>
<li><a href="https://ffconf.org/details">Attendee details</a></li>
<li><a href="https://ffconf.org/locations">Locations: food & hotels</a></li>
<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>
</ul>
</nav>
</footer>
</section>
</body>
</html>