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.
I can talk about
https://www.w3.org/TR/WCAG22/ is finalized
WCAG requirements vs Best Practices at 2U/edX - Jeff Witt (Deactivated)
Redux For Kids - TJ Tracy (Deactivated)
Namespaced/Modular Redux for fun and profit - Ben Warzeski (Deactivated)
Developing for Paragon - Adam Butterworth (Deactivated)
Functional iterators and what's new in ES10 - Adam Stankiewicz
Screen reader, voice input, magnifier user experience - Jeff Witt (Deactivated)
CSS Variables - Adam Butterworth (Deactivated)
Phoenix LiveView - pushing server side data diffs to the DOM (philosophically similar to Turbolinks) - Dave Ormsbee
Webpack - David Joy (Deactivated)
I want to learn about
Frontend deployment workflows at edX (deploying anew, making edx-internal changes, feature switches, etc)
Backbone presentation
Require.js in edx-platform
Webpack in edx-platform
Legacy frontend testing at edX - Jasmine, Karma, Bok Choy
How to test
windows.analyticslibrary functions locallyHow to create react components and drop them into old js files for people who don't know React
How does JS make it from code files → minified/optimized production JS
Debugging JS locally
How to test functionality that bridges applications (e.g. LMS → frontend-app-payment)
Best practices around eventing / adding events
Best practices around adding new JS modules
How to CSS efficiently
Components unit tests using React Testing Lib
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 |
|---|---|---|---|
October 31, 2023 | Bundle/code splitting |
| |
September 19, 2023 | 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 ( | Follow along doc: https://openedx.atlassian.net/l/cp/AxUAXnsp
Transcript: https://drive.google.com/file/d/1MVVa5f6KbrkHbtoNW8qjFVX2HZ0eISuY/view?usp=sharing | |
June 27, 2023 | Solution for replacing enzyme | ||
Oct 5, 2021 | Unit testing React Redux | follow-along doc: https://docs.google.com/document/d/1wqGhHSd3XH-487ut6squxwc_jbMQTqpPa3oBaw14-tk/edit# Companion Respository: https://github.com/muselesscreator/ui-testing-playground/ | |
frontend-platform | 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 | ||
| Webpack and frontend-build | Recording: https://drive.google.com/file/d/1wdxq3KgD4KfO7mCW-YCHB29wJbjixoa1/view Companion repository: https://github.com/davidjoy/webpack-5-examples You’ll need to run | |
| How to design with Figma | ||
3/30/2021 | Testing React Components | ||
3/9/2021 | Building Components | ||
2/16/2021 | |||
1/26/2021 | Development in Paragon | 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 | ||
9/1/2020 | CSS-in-JS | ||
8/11/2020 | Frontend Testing Guide | 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. | https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni | |
6/9/2020 | WCAG 2.2 Updates | https://docs.google.com/document/d/1ma9_qx2ASQ7FRqVYjq93nyFA11ZuE8ILUo5_RNjdMrY/edit?usp=sharing | |
5/19/2020 | Hooks?¿🤮😋 | ||
4/28/2020 | Algolia | Can we also talk about some more backendy Algolia stuff in here? 30 mins on each? | |
4/7/2020 | Accessible responsive tables | https://docs.google.com/presentation/d/1kudQZhFeKzSbgSZa2VKQVPZ-JCKNk3a2wHb861tx93Q/edit?usp=sharing | |
3/17/2020 | Web Components | ||
3/3/2020 | "I Don't Like Hooks, But I Want To Be Wrong", or, "Hooks?" | ||
2/4/2020 | React Accessibility | ||
1/21/2020 | Pagination Component Discussion | ||
1/7/2020 | Render Props | ||
12/10/2019 | React Suspense | ||
11/26/2019 | Controlled vs uncontrolled components | ||
10/15/2019 | Text rendering and scaling | ||
9/3/2019 | Frontend Payment Code Review | Code Review > will send link out soon | |
8/6/2019 | React Hooks | ||
6/25/2019 | Real World I18n | ||
6/11/2019 | Css Grid | ||
5/28/2019 | Reducing Redux Boilerplate: reduxsauce & MFE folder structures | ||
5/14/2019 | Reconciling state and props in React Leveraging HTML forms in a React application | 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 | ||
3/19/2019 | WCAG 2.1 | ||
3/5/2019 | Unit tests - the best documentation! | ||
2/19/2019 | Bootstrap | https://github.com/abutterworth/bootstrap-exercise https://getbootstrap.com/docs/4.3/getting-started/introduction/ | |
2/5/2019 | Webpack | ||
1/8/2019 | Walkthrough of React/Redux | ||
12/11/2018 | CSS (styling) | ||
11/27/2018 | jq | https://stedolan.github.io/jq/ https://github.com/inventhouse/tutorials/tree/master/FE-SG-jq | |
11/13/2018 | Semantics & Page Structure | ||
10/30/2018 | Images and text alternatives | ||
10/2/2018 | ES6 | ||
9/18/2018 | Keyboard access & focus management | ||
9/4/2018 | Equality and Type Coercion |