List of videos

Scalable Multi-Tenant Frontend for an E-Commerce Platform | Guilherme Dalla Rosa | Conf42 JS 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Guilherme_Dalla_Rosa_architecture_ecommerce_platform Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC NextJS Multi Tenant ➤ https://github.com/guidr/nextjs-multi-tenant Chapters 0:00 intro 0:22 preamble 0:37 about guilherme 1:01 about mercloud 1:43 what is a b2b e-commerce? 4:15 who are the customers? 4:23 product supply chain 5:05 where we started 5:23 our mvp architecture 5:54 constraints 7:11 re-imagining our architecture 8:26 the solution 8:35 what is a multi-tenant architecture? 9:02 tenancy models 9:34 isolation strategies 10:38 benefits of a multi-tenant architecture 12:13 technology choices 14:20 compute at the edge 15:35 serverless, in a nutshell 16:44 the idea 17:19 the challenges 17:25 mapping domains to tenants 19:46 api limits? 20:18 identyfying the tenant 23:51 routing 24:39 caching page outputs 25:12 incremental static regeneration (isr) 27:08 tenant-based routing 29:37 solution: url rewrites 30:40 demo time!! 34:55 source code 35:54 vercel platforms starter kit 37:42 where we landed - mercloud's architecture overview 38:42 outcomes 39:44 lessons learned 43:12 thanks!

Watch
Creating videos... with React! | Alfonso Graziano | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Alfonso_Graziano_videos_react Other sessions at this event ➤ https://www.conf42.com/js2023 Join https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 0:40 wait what? 1:00 about alfonso 1:10 what is a video? 1:58 how editing tools work? 2:10 about remotion 3:01 how does it work? 3:19 potential use cases? 4:32 let's see an example + source code 5:17 remotion is quickly evolving 5:29 the intuition 5:59 demo 5:59 how to render at scale? 12:25 we have a challenge! 12:43 about nearform 2:58 questions?

Watch
Why don’t browser dev tools understand your code? | Steven Schkolne | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Steven_Schkolne_browser_dev_tools_code Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Reach out to Steven ➤ steven@mightymeld.com Chapters 0:00 intro 0:22 preamble 0:38 overview 1:24 visual studio / windows apps 1:40 interface builder / ios apps 2:00 unity / games 4:40 web app development 5:46 why don't browser dev tools understand your code? 5:58 - we tried that 8:41 - we had that 10:32 - now we can 10:53 visual part of the code 12:25 "scene file" of the web 14:49 code-aware dev tool 15:16 demo 29:57 visual dev workflow 30:26 recap

Watch
Web Accessibility testing with playwright.js & axe-core | Taslan A. Graham | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Taslan_A_Graham_web_accessibility_testing_playwrightjs_axecore Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Reach out to Taslan ➤ taslan@taslangraham.com Chapters 0:00 intro 0:22 preamble 0:33 about taslan 0:47 agenda 1:18 what is accessibility (a11y) 2:03 why is accessibility important 3:58 web content accessibility guidelines 4:29 wcag's principles of accessibility 6:32 common accessibility issues 9:26 what is web a11y testing 10:06 automated a11y testing 11:29 axe ally engine 12:25 playwright 12:41 demo time! 31:40 get in touch with taslan

Watch
Typesafe Client for Smart Contracts | Albert Groothedde | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Albert_Groothedde_javascript_client_smart_contracts Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 0:42 albert 1:06 kadena/client 2:00 subscription process 2:36 subscription on streamtv 5:24 smart contract is... 6:01 pact 8:28 smart contract recap 14:16 why a javascript client? 18:12 nearley parser playground 23:20 back to smart contract 30:38 transaction building with js, recap 32:17 signing tools 32:23 blockchain client

Watch
Database Guardrails - new age for developers and databases | Adam Furmanek | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Adam_Furmanek_database_guardrails Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 1:03 where we used to be... 2:41 where we are now 5:00 everything is complex 5:28 monitoring doesn't make it simpler 6:35 what breaks in the current world? 8:00 problems with databases 10:12 slow queries 16:04 incompatible changes in schema 19:46 missing indexes 21:01 too many indexes 22:00 bugs orm challenges 24:18 - n+1 selects 26:37 - joins 27:04 - polymorphism 28:20 - data types 30:06 - lack of visibility 30:42 - migrations 31:21 - reviews 31:57 tests - do they work? 33:02 load testing? 35:01 solution - database guardrails 35:31 know the context to find the root cause 40:07 monitoring and observability 40:42 opentelemetry (otel) 41:20 traces and spans in otel and jaeger 42:39 what to observe? 42:51 executing the query: parser, rewriter, planner, executor 43:20 anatomy of an sql query 45:17 database guardrails 48:10 be proactive and push to the left! metis 48:22 - demo 52:37 - source code integration 52:46 - pull request analysis, observability 53:00 summary 53:55 thank you

Watch
Analyze the JS Heap and detect Memory Leaks | Julian Jandl | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Julian_Jandl_js_heap_memory_leaks Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Reach out to Julian ➤ julian.jandl@push-based.io Chapters 0:00 intro 0:22 preamble 1:04 about julian 1:12 memory consumption, what consumes memory? 2:00 immutability 2:23 dom nodes 2:37 composition layers 3:15 inspect dom & javascript memory 3:30 birdseye view 4:56 memory heap 5:47 object sizes 7:00 inspect dom & javascript memory 9:38 demo 1 11:42 what consumes memory 12:05 composition layers 13:23 layer inspection 14:28 demo 2 16:43 memory leaks what causes memory leaks? 18:55 console.log 19:37 global variables 20:13 left over callbacks / subscriptions 21:12 dom references 21:49 how to detect memory leaks? 22:07 detect memory leaks 23:09 don't forget to trigger GC 23:43 in-depth analysis - detect memory leaks 24:33 detached elements tools 26:56 demo 3 34:12 thanks for your time!

Watch
Git submodules: we have monorepo at home | Vadim Tsaregorodtsev | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Vadim_Tsaregorodtsev_git_submodules_monorepo Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 2:24 about vadim 2:39 about etg 4:00 how to do it once and forget? 4:20 monorepository 5:28 tools 5:45 bus factor = 1 6:18 polyrepository and packages 7:28 broken the loop? how to test reusable code? 8:46 _app.tsx + apollo client + generic getinitialprops = ? 9:56 git submodules 11:59 teach me 16:30 tips and tricks / trade off 17:28 common functionality should have common text translations 18:40 abstract, parameterize, minimize 19:03 collaboration is good 19:54 document the questions 21:02 thank you

Watch
Skeleton Mammoth - solving the problem of Skeleton Loaders | Aleksandr Tkachenko | Conf42 JS 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Aleksandr_Tkachenko_skeleton_mammoth_reusable_loaders Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Skeleton Mammoth project ➤ https://github.com/WOLFRIEND/skeleton-mammoth Chapters 0:00 intro 0:22 preamble 0:38 about aleksandr 0:55 introdution to skeleton mammoth 1:23 what are skeleton loaders? 1:52 skeleton loaders examples 2:02 why do you have to use skeleton loaders? 2:52 problems of most existing skeletons 4:16 skeleton loader alternatives 4:36 - spinner 5:30 - progress bar 6:46 - the absence of any visuals 7:12 creating versatile and reusable skeleton loader 10:30 - root variables. colors 10:59 - root variables. animations 11:09 - base styles 13:17 advanced features 13:28 color scheme 13:46 reduced motion 14:17 configuration 15:45 advanced usage 16:42 demo 18:13 let's wrap it up! 19:22 thanks

Watch