The main page for Frontend Study Group is now located under the Frontend Development section of the wiki.

https://openedx.atlassian.net/wiki/spaces/FEDX/pages/3890315360

Goal

Frontend Study Group meets every three weeks to share knowledge about frontend topics. The best way to learn is to teach! Feel free to add a discussion topic below that you're passionate about.

Schedule

Frontend Study Group meets every three weeks on Tuesdays at 2pm, on rotation with the Python and Architecture Study Groups.

Date	Topic	Presenter	Notes

Date	Topic	Presenter	Notes
Oct 1, 2024	@Braden MacDonald	Vite vs Webpack
Sep 10, 2024	@David Joy	OEP-65 and frontend-base	This session will (tentatively) have two parts: A deep dive on how builds and development will work with frontend-base and frontend projects. A brainstorming session on potential “gotchas” and complexities that may trip us up as we try to migrate MFEs to the new architecture.
Aug 20, 2024	@Adam Stankiewicz (Deactivated)	Integrating third-party services into MFEs (logging, analytics) Using `env.config` to override `loggingService`, `analyticsService`, etc. Injecting vendor-specific HTML attributes on individual UI elements [clarification] `loadExternalScripts` during MFE initialization (source)	https://drive.google.com/file/d/1jwV1I4czxw8HH41JDES6suNmUe_F65ih/view?usp=sharing
Jul 30, 2024	@Braden MacDonald	TypeScript in Open edX	Recording Slides
May 28, 2024	@Adam Stankiewicz (Deactivated)	Scaling Paragon design system styles with design tokens and CSS variables	Slides Recording
Apr 16, 2024	@David Joy	OEP-65	Recording
Mar 5, 2024	@Jason Wesson @Braden MacDonald	Frontend Plugin Share-out Course Authoring MFE - UI Plugins Frontend Plugin Framework library Communications MFE - Dynamic Plugins	Recording (Transcript) Comments Log
January 23rd, 2024	@Adam Stankiewicz (Deactivated)	Code splitting in React. https://openedx.atlassian.net/wiki/spaces/FEDX/pages/4015357975	https://drive.google.com/file/d/18BECQBH56F8fRoQ0nMjtRrgQT1SL4e9L/view?usp=sharing
December 12, 2023	@Brian Smith	Github Actions (Slides) Open edX .github directory	https://drive.google.com/open?id=1UzqZ2v-sNIE5rD-PcCi_PTg6V3WRCibk
December 5, 2023	@Pedro Martello	Piral	https://drive.google.com/file/d/1l8upjHIAz9YHJ6i55mtR38f6KTUjQDXt/view?usp=sharing
October 31, 2023	@Jeff Witt (Deactivated)	WCAG 2.2 Requirements	https://drive.google.com/file/d/1DW8lyzcI1Save39JE9IzIKO6mr9MpwnA/view?usp=sharing
September 19, 2023	@Jesper Hodge (Deactivated)	Everything about client-side/server-side rendering (Next.js)	Video link: https://drive.google.com/file/d/1ZOlApBJs3asKzsnnG-PAyy41XO1lDd_-/view?usp=sharing
Aug 8, 2023	Headings (`hN` tags) — when and how to use them	@Max Frank	Follow along doc: https://openedx.atlassian.net/l/cp/AxUAXnsp Video link: https://drive.google.com/file/d/1b5znmSLAE-5u4F64K69DGC3lbWEww5KR/view?usp=sharing Transcript: https://drive.google.com/file/d/1MVVa5f6KbrkHbtoNW8qjFVX2HZ0eISuY/view?usp=sharing
June 27, 2023	Solution for replacing enzyme	@Ben Warzeski (Deactivated)
Oct 5, 2021	Unit testing React Redux	@Ben Warzeski (Deactivated)	follow-along doc: https://docs.google.com/document/d/1wqGhHSd3XH-487ut6squxwc_jbMQTqpPa3oBaw14-tk/edit# Companion Respository: GitHub - muselesscreator/ui-testing-playground
Aug 3, 2021	frontend-platform	@David Joy (Deactivated)	Recording: https://drive.google.com/file/d/19cChcSOhptcMxTYQ2ef1Hx7XGPhjU4-g/view frontend-platform docs site: JSDoc: Open edX frontend-platform API Documentation frontend-platform repository: GitHub - openedx/frontend-platform: A framework for Open edX micro-frontend applications.
Jul 13, 2021	Webpack and frontend-build	@David Joy (Deactivated)	Recording: https://drive.google.com/file/d/1wdxq3KgD4KfO7mCW-YCHB29wJbjixoa1/view Companion repository: GitHub - davidjoy/webpack-5-examples: Webpack 5 examples. You’ll need to run `npm i` in the sub-directories in order to follow along with any commands that are run in the recording.
Jun 22, 2021	How to design with Figma	@Adam Butterworth (Deactivated)
3/30/2021	Testing React Components	@Lael Birch (Deactivated)
3/9/2021	Building Components	@Adam Butterworth (Deactivated)
2/16/2021
1/26/2021	Development in Paragon	@Adam Butterworth (Deactivated)	Developer onboarding for Paragon. How to get the Paragon workbench running, where code lives, how to create a new component.
1/5/2021
11/3/2020	Webpack 5
10/13/2020
9/22/2020	Screen reader, voice input, magnifier user experience	@Jeff Witt (Deactivated)
9/1/2020	CSS-in-JS	@Adam Butterworth (Deactivated)
8/11/2020	Frontend Testing Guide	@David Joy (Deactivated)	Let's use this time to collaboratively write a frontend testing guide for the organization! HOMEWORK: Bring one thing you think should go in the guide.
7/21/2020	How to use Accessibility Insights for Web browser extension for pre-checkin automated and manual testing.	@Jeff Witt (Deactivated)	https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni
6/9/2020	WCAG 2.2 Updates	@Jeff Witt (Deactivated)	https://docs.google.com/document/d/1ma9_qx2ASQ7FRqVYjq93nyFA11ZuE8ILUo5_RNjdMrY/edit?usp=sharing
5/19/2020	Hooks?¿🤮😋	@Adam Stankiewicz (Deactivated) and @David Joy (Deactivated)
4/28/2020	Algolia	@Rickie Reilly (Deactivated)	Can we also talk about some more backendy Algolia stuff in here? 30 mins on each?
4/7/2020	Accessible responsive tables	@Jeff Witt (Deactivated)	https://docs.google.com/presentation/d/1kudQZhFeKzSbgSZa2VKQVPZ-JCKNk3a2wHb861tx93Q/edit?usp=sharing
3/17/2020	Web Components	@Adam Butterworth (Deactivated)
3/3/2020	"I Don't Like Hooks, But I Want To Be Wrong", or, "Hooks?"	@David Joy (Deactivated)
2/4/2020	React Accessibility	@Jeff Witt (Deactivated)	https://accessibility.deque.com/react-accessibility-webinar
1/21/2020	Pagination Component Discussion	@TJ Tracy (Deactivated)
1/7/2020	Render Props	@TJ Tracy (Deactivated)
12/10/2019	React Suspense	@Adam Stankiewicz (Deactivated)
11/26/2019	Controlled vs uncontrolled components	@Adam Butterworth (Deactivated)
10/15/2019	Text rendering and scaling	@Jeff Witt (Deactivated)
9/3/2019	Frontend Payment Code Review	@Adam Butterworth (Deactivated) @David Joy (Deactivated)	Code Review > will send link out soon
8/6/2019	React Hooks	@David Joy (Deactivated)
6/25/2019	Real World I18n	@Ben Holt (Deactivated)	Slides
6/11/2019	Css Grid	@Rickie Reilly (Deactivated)
5/28/2019	Reducing Redux Boilerplate: reduxsauce & MFE folder structures	@Adam Stankiewicz (Deactivated)
5/14/2019	Reconciling state and props in React Leveraging HTML forms in a React application	@David Joy (Deactivated) @Adam Butterworth (Deactivated)	Not a link: Controlled/uncontrolled components and forms, componentWillReceiveProps, getDerivedStateFromProps, selector libraries, redux state... what do I do here!? Starter repo we'll work through: https://github.com/abutterworth/using-forms
4/2/2019	GatsbyJS	@Brandon Baker (Deactivated) & @Alasdair Swan (Deactivated)	Example gatsby project
3/19/2019	WCAG 2.1	@Jeff Witt (Deactivated)
3/5/2019	Unit tests - the best documentation!	@Rickie Reilly (Deactivated)
2/19/2019	Bootstrap	@Adam Butterworth (Deactivated)	https://github.com/abutterworth/bootstrap-exercise https://getbootstrap.com/docs/4.3/getting-started/introduction/
2/5/2019	Webpack	@David Joy (Deactivated)
1/8/2019	Walkthrough of React/Redux	@Adam Stankiewicz (Deactivated)
12/11/2018	CSS (styling)	@Rickie Reilly (Deactivated)
11/27/2018	jq	@Ben Holt (Deactivated)	https://stedolan.github.io/jq/ https://github.com/inventhouse/tutorials/tree/master/FE-SG-jq
11/13/2018	Semantics & Page Structure	@Jeff Witt (Deactivated)
10/30/2018	Images and text alternatives	@Jeff Witt (Deactivated)
10/2/2018	ES6	@Adam Stankiewicz (Deactivated)
9/18/2018	Keyboard access & focus management	@Jeff Witt (Deactivated)
9/4/2018	Equality and Type Coercion	@George Babey (Deactivated)