Conf42 JavaScript 2023

2023

List of videos

Premiere - Conf42 JavaScript 2023

Schedule, Lineup & RSVP ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Upcoming CFPs ➤ https://www.papercall.io/events?cfps-scope=&keywords=conf42 0:00 Sponsors and Partners getting started 0:53 Daniele Fontani & Daniele Ciulli - https://www.conf42.com/micr_JavaScript_2023_Daniele_Fontani_Daniele_Ciulli_frontend_unchained_develop_apis 1:37 Aleksandr Guzenko - https://www.conf42.com/JavaScript_2023_Aleksandr_Guzenko_breaking_monolith_code_splitting_techniques 2:21 Cesar Cordero Rodriguez - https://www.conf42.com/JavaScript_2023_Cesar_Cordero_Rodriguez_develop_web3_webapp_python 2:58 Arundeep Nagaraj - https://www.conf42.com/JavaScript_2023_Arundeep_Nagaraj_easy_mode_fullstack_figma_aws_amplify node.js 3:38 Vladi Stevanovic - https://www.conf42.com/JavaScript_2023_Vladi_Stevanovic_nodejs_app_realtime_collaboration 4:13 Lorenzo Pieri - https://www.conf42.com/JavaScript_2023_Lorenzo_Pieri_nodejs_eventloop_fairytale 4:50 Gabriel Liechtman Manor - https://www.conf42.com/JavaScript_2023_Gabriel_Liechtman_Manor_building_auth_nodejs 5:30 Anton Kalik - https://www.conf42.com/JavaScript_2023_Anton_Kalik_ai_nodejs_custom_sports_activity react 6:07 Tejas Kumar - https://www.conf42.com/JavaScript_2023_Tejas_Kumar_react_server_components 6:50 Andrey Makarov - https://www.conf42.com/JavaScript_2023_Andrey_Makarov_battleship_game 7:07 Guilherme Dalla Rosa - https://www.conf42.com/JavaScript_2023_Guilherme_Dalla_Rosa_architecture_ecommerce_platform 7:40 Alfonso Graziano - https://www.conf42.com/JavaScript_2023_Alfonso_Graziano_videos_react 8:11 Steven Schkolne - https://www.conf42.com/JavaScript_2023_Steven_Schkolne_browser_dev_tools_code tools 8:58 Taslan A. Graham - https://www.conf42.com/JavaScript_2023_Taslan_A_Graham_web_accessibility_testing_playwrightjs_axecore 9:33 Albert Groothedde - https://www.conf42.com/JavaScript_2023_Albert_Groothedde_javascript_client_smart_contracts 10:08 Adam Furmanek - https://www.conf42.com/JavaScript_2023_Adam_Furmanek_database_guardrails 10:47 Julian Jandl - https://www.conf42.com/JavaScript_2023_Julian_Jandl_js_heap_memory_leaks 11:23 Vadim Tsaregorodtsev - https://www.conf42.com/JavaScript_2023_Vadim_Tsaregorodtsev_git_submodules_monorepo 12:00 Aleksandr Tkachenko - https://www.conf42.com/JavaScript_2023_Aleksandr_Tkachenko_skeleton_mammoth_reusable_loaders 12:24 Peleg Porat - https://www.conf42.com/JavaScript_2023_Peleg_Porat_everythingascode deep dive 12:54 Julia Ziebinska - https://www.conf42.com/JavaScript_2023_Julia_Ziebinska_better_web_reducing_carbon_emissions 13:37 Ankit Gupta - https://www.conf42.com/JavaScript_2023_Ankit_Gupta_shadow_dom 14:00 Kilian Valkhof - https://www.conf42.com/JavaScript_2023_Kilian_Valkhof_moving_features_css_html 14:41 Daniel Espino Garcia - https://www.conf42.com/JavaScript_2023_Daniel_Espino_Garcia_magic_oss_project 15:15 Dmitrii Ivashchenko - https://www.conf42.com/JavaScript_2023_Dmitrii_Ivashchenko_webgl_to_webgpu 15:44 Maksim Zemskov - https://www.conf42.com/JavaScript_2023_Maksim_Zemskov_glorious_monolith_scaling_application_microfrontends 16:25 Francesco Sciuti - https://www.conf42.com/JavaScript_2023_Francesco_Sciuti_browsers_made_by_others 18:08 Joshua Arvin Lat - https://www.conf42.com/JavaScript_2023_Joshua_Arvin_Lat_securing_applications lessons learned 19:00 Chris Ng - https://www.conf42.com/JavaScript_2023_Chris_Ng_zero_lint_failures_tackling_codequality_challenges 19:26 Gil Zilberfeld - https://www.conf42.com/JavaScript_2023_Gil_Zilberfeld_apis_refactoring_patterns 19:59 Ken Snyder - https://www.conf42.com/JavaScript_2023_Ken_Snyder_remix_philosophy 20:34 Juan Felipe Gomez - https://www.conf42.com/JavaScript_2023_Juan_Felipe_Gomez_cms_jamstack_innovation_web_dev 21:00 thank you, join Discord ➤ https://discord.gg/DnyHgrC7jC

Watch
How to develop your APIs without a backend | Daniele Fontani & Daniele Ciulli | Conf42 JS 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Daniele_Fontani_Daniele_Ciulli_frontend_unchained_develop_apis Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 1:17 we are daniele^2 1:48 developing an application in 2023 2:36 modern app architecture 3:31 that's good because 4:25 ...but brings some issues 6:14 who is impacted more? 6:52 it's still possible develop a web app with ease? 7:11 yes, with crudit you can 9:38 what is crudit? 10:06 what is crudit for? 11:49 but how? 12:48 what can crudit do? 13:59 features! 14:16 mutli tenant restful api for crud operations 16:06 a database interface 16:56 custom endpoint for dedicated api routes 18:10 server side validation 19:44 hooks on events 21:38 mutations 23:32 and what about devops? don't need it either! 24:16 who is for? / who needs something else 27:10 what we want to add? 28:18 thank you!

Watch
Breaking the Monolith: A Comprehensive Guide to Code Splitting | Aleksandr Guzenko | Conf42 JS 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Aleksandr_Guzenko_breaking_monolith_code_splitting_techniques Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 0:38 who is aleksandr 1:04 speech plan 1:36 there are 2 approaches 2:53 monolith - is it bad? 6:02 when should a monolith be broken? 7:34 iframe 8:08 nginx or another proxy server 9:24 web components 10:44 npm 12:47 microfrontends 13:19 single-spa 14:13 webpack 5 module federation 14:54 - iframe 16:28 - proxy server 16:50 - web components 17:10 - npm 17:22 - single spa 17:54 - webpack 5 module federation

Watch
Develop a Web3 webapp in Blockchain, with JS and Python | Cesar Cordero Rodriguez | Conf42 JS 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Cesar_Cordero_Rodriguez_develop_web3_webapp_python Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 preamble 0:29 agenda 0:59 introduction to pi network pi browser and pi api platform 0:59 latinchain repository 0:59 how to develop a pi app? 0:59 latinchain repo

Watch
Easy mode for full-stack development with Figma & AWS Amplify | Arundeep Nagaraj | Conf42 JS 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Arundeep_Nagaraj_easy_mode_fullstack_figma_aws_amplify Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble design to app: 0:45 - expectation 1:15 - reality 1:55 developers spend months pixel-pushing 2:28 what if... 2:37 aws amplify studio 4:38 aws amplify overview 6:03 features you can build with aws amplify 7:02 demo - build a cat reviews app 20:09 thank you!

Watch
Every Node.js app should have real-time collab features | Vladi Stevanovic | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Vladi_Stevanovic_nodejs_app_realtime_collaboration Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Reach out to Vladi ➤ vladi@multiplayer.app Chapters 0:00 intro 0:22 preamble 0:44 ingredients 1:47 about vladi 2:12 about multiplayer 4:31 what is real-time collaboraion? 5:44 how do you implement it? 7:04 operational transformations and conflict-free replicated data types 8:28 crdts 9:15 y.js 11:38 here's what we do with y.js 12:31 which real-time collaborative features did we implement? 13:08 awareness / presence 13:58 state synchronization what we learned 15:42 - how to keep track of order 16:58 - architecture options 17:37 - scope of collaboration 18:35 - changes to dependent views 19:48 recap benefits 20:56 final notes 22:01 thank you

Watch
The Node.js Eventloop Fairytale | Lorenzo Pieri | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Lorenzo_Pieri_nodejs_eventloop_fairytale Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 0:53 about lorenzo 2:32 about birdie 3:08 it was history 3:41 enter the knights of the thread 5:17 the lands of promise 6:31 the inhabitants 7:18 sir call-a-stack 8:25 the heart of the village, the loop 9:33 the desert of asynchrony 9:59 the forest of the threadpools 10:44 the libuv elves 11:28 the path back to the city 11:44 join the queue once more 12:35 the menacing dragon blocks 13:46 the event loop phases 15:18 knowledge is everything 16:32 inside the loop 18:08 which magic scroll would first be read by the mages? 19:19 strenght is found in the mind, but is accrued with time 19:54 lorenzo, the bard that sang this story 20:15 want to get into open-source? 20:28 thank you

Watch
Building Authorization with Node.js: Dos and Don’ts | Gabriel Liechtman Manor | Conf42 JS 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Gabriel_Liechtman_Manor_building_auth_nodejs Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Opal Project ➤ https://github.com/permitio/opal Chapters 0:00 intro 0:22 preamble 0:46 find the difference 4:01 authentication advanced features 5:44 about gabriel 6:38 innovations 12:12 staging & production 13:05 express & flask 13:55 authorization best practices 15:44 - model 18:48 acl - access control list 19:45 rbac - role based access control 21:06 abac - attribute based access control 22:25 rebac - relationship based access control 23:36 - author 23:46 contracts create better relationships 25:47 cedar 27:40 generate code from ui 28:21 - analyze: cedar agent 29:01 - enforce authorization policies 30:22 casl - frontend feature toggling sdk 30:46 - audit 31:04 authorization system building blocks 31:40 opal - open policy administration layer 32:19 opal based authorization architecture 33:40 demo 42:00 about permit.io 42:25 thank you

Watch
AI Meets Node js With Crafting a Custom Sports Activity Service | Anton Kalik | Conf42 JS 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Anton_Kalik_ai_nodejs_custom_sports_activity Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Anton's Repos ➤ https://github.com/antonkalik?tab=repositories&q=&type=&language=&sort= Chapters 0:00 intro 0:22 preamble 0:50 lineup 1:32 introduction 3:05 openai 4:15 setup openai 6:19 dependencies 9:29 knex setup 9:51 knex migrations 11:10 models 11:42 user model 12:09 indicator model 12:33 activity model 12:51 initial point 13:16 redis 13:47 auth middleware 14:32 routes 15:18 expectations 19:27 openai api config 19:53 controller 21:41 system prompt 22:04 completions 22:16 system prompt 23:24 user prompt 27:56 suggestion controller 28:32 update indicator 29:31 activities 29:54 github 30:32 thank you for the attention

Watch
React Server Components: A Deep Dive | Tejas Kumar | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Tejas_Kumar_react_server_components Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC More Tejas ➤ @tejask CrabNebula ➤ https://crabnebula.dev/ Chapters 0:00 intro 0:22 preamble 02:53 react as an architecture 06:10 what is react server components? 08:39 building a sample application 12:00 adding server rendering 15:12 creating server components 16:40 rendering server components 25:11 persisting state with client-side react 33:38 rsc and csr and ssr 35:19 tools for adopting rscs 37:57 react is a community

Watch
Battleship game | Andrey Makarov | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Andrey_Makarov_battleship_game Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Battleship game project ➤ https://github.com/vivalaakam/conv42-battleship Chapters 0:00 intro 0:22 preamble 0:33 brief 1:33 rules 1:55 ships 2:18 interaction 2:59 cellstatus 3:38 making the game 27:25 result 30:38 thank you

Watch
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
Everything-as-Code: It's time to fix configurations | Peleg Porat | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Peleg_Porat_everythingascode Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Configu project ➤ https://github.com/configu/configu Chapters 0:00 intro 0:22 preamble 0:45 about peleg 1:13 what we will cover 2:08 application configuration 3:36 challenge with configurations 5:33 everything-as-code 5:54 configuration-as-code (cac) 7:49 introduction to configu 10:05 hands-on example 17:44 thank you!

Watch
The Role of Frontend Code in Reducing Carbon Emissions | Julia Ziebinska | Conf42 JS 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Julia_Ziebinska_better_web_reducing_carbon_emissions Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC ec0lint project ➤ https://github.com/ec0lint Chapters 0:00 intro 0:22 preamble 0:49 digital ecology... 1:20 how does the internet emit co2? 2:23 data transfer and power lines 2:39 end devices 3:31 4% of all greenhouse gases 4:02 what can we do about it? 4:10 emails 5:42 browsing 6:33 devices 7:05 websites 10:07 sistainable web design by tom greenwood 10:27 the formulas 11:28 how can we create more sustainable websites? 11:39 - programming language 12:35 - libraries 13:22 call to external apis resources 13:44 images 14:07 videos 14:35 fonts 15:04 colors 15:21 hosting 16:04 user data collection 16:48 why? 17:21 ec0lint 17:48 features 18:05 environmental impact 18:35 scaling 19:19 references 19:26 reach out to julia

Watch
Unlocking the Power of Shadow DOM | Ankit Gupta | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Ankit_Gupta_shadow_dom Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 0:34 what we will cover 0:53 what is shadow dom 1:37 popular apps using shadow dom 1:59 reactjs 2:15 angular 2:33 demo 5:28 thank you

Watch
Stop using JS for that: moving features from JS to CSS & HTML | Kilian Valkhof | Conf42 JS 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Kilian_Valkhof_moving_features_css_html Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Polypane ➤ https://polypane.app/ Chapters 0:00 intro 0:22 preamble 0:29 do i hate js? 1:01 i love... 1:17 the rule of least power 2:19 browser makers are listening 2:34 once you learn something 3:28 lets get started 3:45 custom toggles 10:01 datalist 13:19 in-page transitions 13:43 jquery. awesome. 14:59 in javascript 15:30 accessibility 16:20 smooth 18:19 carousels 20:19 video by adam argyle: https://youtu.be/34zcWFLCDIc?si=t3F4DV2res2ji6wx 20:36 accordions and modals 23:18 dialog 27:18 container queries 29:10 stop using js... in the future 29:34 masonry layout 32:18 the parent selection :has() 34:27 scroll driven animations 35:20 no more js needed! 35:42 i hope you love css and html now, too!

Watch
How the magic of open source helps our project | Daniel Espino García | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Daniel_Espino_Garcia_magic_oss_project Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Mattermost community ➤ https://community.mattermost.com/landing#/ Chapters 0:00 intro 0:22 preamble 0:28 about daniel 1:36 agenda 1:39 what is open source? 5:32 what kind of open source exist? 7:27 npm and node_modules 7:58 what is npm? 8:31 node_modules folder 9:32 understanding 14:04 fixing 17:36 changing 20:32 closing 22:22 give back 23:35 summary 24:41 thank you, connect

Watch
Migration from WebGL to WebGPU | Dmitrii Ivashchenko | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Dmitrii_Ivashchenko_webgl_to_webgpu Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 0:38 background 0:46 timeline of webgl & webgpu 2:41 current state of webgpu 3:44 webgpu core concepts 4:06 gpu adapter 4:48 gpu device 5:17 features and limits 5:58 gpucanvascontext 6:19 resource types 7:21 queue 7:54 recording gpu commands 8:24 passes 9:25 high-level conceptual differences 9:29 initialization 10:33 buffers 10:57 shaders 11:27 programs vs pipelines 13:34 drawing 14:07 uniforms 14:18 - in webgl 1.0 14:34 - in webgl 2.0 15:35 - in webgpu 16:37 shaders 16:52 glsl vs wgsl 17:13 comparison of data types 17:36 structures 17:53 function declarations 18:05 built-in functions 18:55 convention differences 19:07 texture 2d 19:49 viewport space 20:07 clip spaces 21:43 webgpu tips 23:26 resources & links

Watch
Scaling an application without microfrontends | Maksim Zemskov | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Maksim_Zemskov_glorious_monolith_scaling_application_microfrontends Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Reach out to Maksim ➤ maxaz74@gmail.com Chapters 0:00 intro 0:22 preamble 1:18 contents 1:59 about maksim 2:44 frontend of yandex direct 3:19 the scalability issue 4:38 complexity in a regular monolith 5:02 the source of complexity 5:52 how about adding a microfrontend? 6:26 advantages of microfrontends 8:05 microfrontends make every project better? 8:33 the cost of microfrontends 9:59 glorious monolith 12:02 the path to the glorious monolith 13:07 requirements for modules 13:30 module structure 14:48 one-way imports for segments 15:54 the benefits of segments 16:33 module isolation 17:46 code isolation 18:57 entrypoint 19:27 public api 21:31 the size of public api 22:35 styles isolation 23:22 options to isolate styles 23:57 example rules for css modules 25:15 data isolation 28:15 runtime for modules 29:15 runtime example 30:08 the size of runtime 31:07 breaking code into modules 33:08 feature sliced design 34:59 summary 36:36 what's next? 37:21 thank you!

Watch
We are all good with browsers made by others | Francesco Sciuti | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Francesco_Sciuti_browsers_made_by_others Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 0:47 how many of us have never said a $%^&*? 1:31 what is a browser 3:29 why should i care? 4:20 how is it made 4:32 architecture 5:16 processes & threads 6:42 browser processes 9:46 multi-process architectures: pros & cons 11:38 how does it work 13:05 rendering 13:47 scared, huh? 14:01 render a page 14:28 parsing 16:50 style calculation 18:09 layuot 20:34 paint 21:35 compositing 23:39 compositing - events 25:43 critical rendering path (crp) 26:38 jank - your worst enemy 27:02 critical rendering path (crp) 27:49 main thread 28:05 a quick distinction 28:13 browser event loop 29:17 recap 29:47 i motori 29:53 what do they use? 30:06 maybe it's not what we thought 30:20 any ideas? 32:04 links 32:12 francesco sciuti 32:30 thank you!

Watch
Beyond the Basics: Securing JS Applications | Joshua Arvin Lat | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Joshua_Arvin_Lat_securing_applications Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 0:31 about joshua 1:11 reality 3:46 understanding the cyber attack chain 9:45 code review 14:20 why use js for machine learning? 15:11 security considerations 16:34 how to secure the librairies and frameworks? 18:08 automated vulnerability management 19:06 network isolation 20:07 how about iam privilege escalation? 21:40 restrictive iam permissions 23:19 how about denial of wallet attacks? 25:24 recap 26:08 thanks

Watch
Road to Zero Lint Failures: Tackling Code Quality Challenges at Scale | Chris Ng | Conf42 JS 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Chris_Ng_zero_lint_failures_tackling_codequality_challenges Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 0:33 overview 0:52 why lint rules? 2:01 automated 3:24 prettier 3:42 benefits 4:35 example: no-unsafe-optional-chaining 6:47 expand the "well lit path" 7:05 let's add all the lint rules! 7:17 code quality at scale 9:02 problem 9:34 campsite analogy 10:08 how to limit even more lint failures 12:11 campsite analogy (revisited) 13:08 how to limit even more lint failures (revisited) 14:44 lint rule process: all existing failutres must be resolved 16:41 how to fix it: road to zero lint failures 16:57 incentives, incentives, incentives! 17:26 road to zero lint failures 17:56 how we ran it 19:10 tooling for engineers 19:41 single owner per file 20:10 lint failure visualizer 21:30 checkup 22:43 collect data from sarif and match by team 23:38 weekly scorecard 25:47 dealing with the last mile 26:38 road to zero journey 27:20 sustainability is key 28:20 summary 30:45 key results and next steps 31:40 road to zero lint failures stats 33:09 thank you

Watch
APIs - Refactoring to Patterns | Gil Zilberfeld | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Gil_Zilberfeld_apis_refactoring_patterns Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC More Gil ➤ @TestinGil Chapters 0:00 intro 0:22 preamble 1:01 about gil 1:35 code that works over and over again 2:12 when you need to fix bugs in your microservice.again. 2:42 refactor the code / use it as a trap 3:07 we want the code to be... 6:15 cohesion 6:46 separation of concerns 6:56 loose coupling 8:36 entities 9:02 architecture 9:40 the api 10:11 problems 11:35 demo 16:43 ports and adapters 18:24 anti-corruption layer 19:50 demo 21:03 repository 24:04 adapter win 25:03 demo 28:07 welcome to the factory 28:49 singleton 29:26 demo 32:43 summaries 36:30 any questions?

Watch
The Remix Philosophy is not Just for Remix | Ken Snyder | Conf42 JavaScript 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Ken_Snyder_remix_philosophy Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Remix Demo - Shopping List ➤ https://github.com/kensnyder/remix-demo-shopping-list Chapters 0:00 intro 0:22 preamble 0:31 what we'll cover 0:48 about ken 1:27 why should you care? 2:02 let's create a real remix app 13:18 try it on github 13:27 outlet 14:20 more complex forms 16:29 philosophy: embrace server/client model 17:21 bundles 18:13 single page app 18:39 remix app 20:10 server & runtime adapters 20:41 official list 21:23 work with web foundations 21:43 standards 23:09 request, response 23:48 fetch loves requests & response 24:26 headers 25:28 url search params 26:13 traditional react components 27:11 more traditional react page 27:46 ...or just use remix 28:07 work without js 30:11 demo without js 31:15 roadmap and future flags 31:43 roadmap highlights 32:47 future flags 34:08 applying the philosophy outside remix 35:11 we chose a new mindset 36:14 hello shoreline 36:26 thank you

Watch
CMS and JAMstack: A Tale of Innovation in Web Development | Juan Felipe Gomez | Conf42 JS 2023

Read the abstract ➤ https://www.conf42.com/JavaScript_2023_Juan_Felipe_Gomez_cms_jamstack_innovation_web_dev Other sessions at this event ➤ https://www.conf42.com/js2023 Join Discord ➤ https://discord.gg/DnyHgrC7jC Chapters 0:00 intro 0:22 preamble 0:53 about juan 1:23 bc: before cms 1:49 rise of cms 2:42 lamp stack 3:25 why a cms? 4:51 mobile web, a new paradigm 5:33 headless cms 6:33 what a headless cms looks like? 7:13 jamstack 9:01 jamstack ecosystem 9:24 resources 9:44 find your template 11:38 thanks!

Watch