Frontend Study Group

Owned by George Babey
Last updated: Sept 04, 2024 by David Joy
2 min read

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

Frontend Study Group

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

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

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

Recording (Transcript)

Comments Log

January 23rd, 2024

@Adam Stankiewicz

Code splitting in React.

Improving frontend performance with code splitting in React

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

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: https://github.com/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: https://edx.github.io/frontend-platform/

frontend-platform repository: https://github.com/edx/frontend-platform

 

Jul 13, 2021

Webpack and frontend-build

@David Joy (Deactivated)

Recording: https://drive.google.com/file/d/1wdxq3KgD4KfO7mCW-YCHB29wJbjixoa1/view

Companion repository: https://github.com/davidjoy/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 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



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



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



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



9/18/2018

Keyboard access & focus management

@Jeff Witt (Deactivated)



9/4/2018

Equality and Type Coercion

@George Babey