Summary of my teaching with ACM Hack at UCLA

During college, I was part of a club called ACM Hack. The club runs beginner friendly workshops focused on web development, mobile development, or anything we find useful and fun. We also did some intermediate/advanced workshops. Another big components we did was (mini) Hackathon, socials and expo type events.

I enjoy teaching so I taught a lot during my time at Hack. The blog post is a summary of what I have taught before. The assets of each workshop usually include a set of slides, a README (a text format of the workshop), and maybe recording (mostly during the pandemic).

Table of contents

• Web Development: Hackschool
  • Hackschool Fall 2018 Session 3 Backend: What is an API?
  • Hackschool Fall 2018 Session 5 Frontend: Intro to React
  • Hackschool Fall 2019 Session 4 Backend: More on Express.js
  • Hackschool Fall 2019 Session 6 Backend: Introduction to Database
  • Hackschool Fall 2020 Session 3: Webpage Interaction with the DOM
• Developing in Python: Learn.py
  • Learn.py Spring 2019 Session 7: Web Dev Part 2
• Intermediate/Advanced JavaScript: JavaScript Chats
  • JavaScript Chats Fall 2019 Session 1: Function and this
  • JavaScript Chats Fall 2019 Session 3: A Gentle Introduction to React Hooks
  • JavaScript Chats Fall 2019 Session 4: Optimizing Frontend and React Apps
  • JavaScript Chats Fall 2019 Session 6: Introduction to Testing with JavaScript
  • JavaScript Chats Spring 2021 Session 2: Node.js Profiling
  • JavaScript Chats Spring 2021 Session 4: WebRTC
• Mobile app development: Hack Sprint
  • Hack Sprint Winter 2020 Session 4: Navigation
  • Hack Sprint Winter 2021 Session 5: Asynchronous Programming and useEffect
• Tooling for developers: Tooling Series
  • Tooling Series Spring 2020 Session 4: $\LaTeX$

Web Development: Hackschool

ACM Hack Hackschool is a signature event that introduces beginner to web development.

Hackschool Fall 2018 Session 3 Backend: What is an API?

• topic: HTTP, JSON, API, how to use Postman, how to create this an endpoint in express
• assets:
  • README
  • slides

One of the major hurdles in learning web development is understanding client server interaction and the concept of API. The workshop aims to taught participants how to create an API endpoint in Express.js.

Hackschool Fall 2018 Session 5 Frontend: Intro to React

• topic: what is React, what is class in JavaScript (this is the time before hooks), setState
• assets:
  • README
  • slides

As people abandoned jQuery and moved on to more structured way to write web apps, we kept up with trend to introduce beginners to React. We did so by drawing connections between HTML and JSX syntaxes.

Hackschool Fall 2019 Session 4 Backend: More on Express.js

• topic: module system in node.js, using express for API endpoint routing
• assets:
  • README
  • slides

Understanding the module system helps people break code into smaller, more manageable chunks. Knowing how URL and routing works helps to break an APIs service into smaller, more manageable chunks as well.

Hackschool Fall 2019 Session 6 Backend: Introduction to Database

• topic: what databases are and why we need it, using Firebase
• assets:
  • README
  • slides

Server programs are forgetful if we just store things in memory, they get wiped out after the server shuts down. We need a way to persist data and therefore we need a database. Using Firebase, we can set up a database quickly without much hassle.

Hackschool Fall 2020 Session 3: Webpage Interaction with the DOM

• topic: how is JavaScript connected to HTML, what DOM is, how to manipulate the DOM
• assets
  • README
  • slides
  • recording

DOM is the representation of the HTML within JavaScript. JavaScript’s ability to manipulate the DOM allows web pages to become interactive. This is where web dev gets fun. The event listener pattern is engrained within DOM. We learn how to use it to react to user inputs in JavaScript.

Developing in Python: Learn.py

Learn.py is a beginner friendly Python course that goes beyond the syntax. The series touch on practical application like scripting, web scraping, data mining, web development, etc.

Learn.py Spring 2019 Session 7: Web Dev Part 2

• topic: creating endpoint in Django, what is an API, JavaScript, JSON
• assets:
  • README
  • slides

We covered using Django to serve webpages in the session before this one. So this session is about creating API endpoints so that the frontend pages can interact with it. I explained API calls as invoking function on a different computer, and borrowed the term RPC (remote-different computer, produce-function, call-invoke) to explain the concept.

Sometimes you don’t even realize how abstract concepts can be. Explaining what an API is to a new programmer is hard, like “NP-hard” hard.

Intermediate/Advanced JavaScript: JavaScript Chats

JavaScript Chats is a series Timothy Gu and I started. I will quote the blurb we wrote for it to explain what it is:

Learning a language or a framework outside of class can be hard, especially past the syntax and the standard APIs. Come out to JavaScript Chats with ACM Hack, a weekly discussion on intermediate/advanced JavaScript. This series aims to deepen your understanding of the language’s features and designs. We also plan to cover frameworks related topics.

The theme was to whine about JavaScript, but learn about it while complaining.

JavaScript Chats Fall 2019 Session 1: Function and this

• topic: function () {} vs () => {}, this, comment arg passing syntax (.../object destruction)
• assets:
  • README
  • slides

Yes, one of the most annoying pitfall of JavaScript, the magical this. And why the hell are there two ways to write functions in JavaScript.

the topic is repeated again for JavaScript Chats Spring 2021 Session 1

• assets:
  • README
  • slides

JavaScript Chats Fall 2019 Session 3: A Gentle Introduction to React Hooks

• topic: React.useState, React.useEffect
• assets:
  • README
  • slides

React hooks were the hippest coolest new kid in town back then. We wanted to introduce people with previous React experience to transition to hook. I touched on the philosophical differences between the class and the function components (spoiler alert: it is how logic are grouped together in code, read the README to learn more).

JavaScript Chats Fall 2019 Session 4: Optimizing Frontend and React Apps

• topic: Chrome DevTools, how does React load, React optimization
• assets:
  • README
  • slides

A lot of people have frontend development experience. Knowing how to use the DevTools in Chrome definitely makes life easier. We taught how to profile a web app and how to interpret different metrics. We explained how React loads and why it might be slow due to excessive rendering.

JavaScript Chats Fall 2019 Session 6: Introduction to Testing with JavaScript

• topic: TTD, Jest, mocking
• assets:
  • README
  • slides

Testing is important. We all know that. This gives an introduction to the benefits of Test Driven Development, how to use Jest for a good Test Driven Development experience (extremely important), and what/why is mocking.

the topic is repeated again for JavaScript Chats Spring 2021 Session 6

• assets:
  • README
  • slides

JavaScript Chats Spring 2021 Session 2: Node.js Profiling

• topic: Chrome DevTools for Node.js application
• assets
  • README
  • slides

Since both Chrome and Node.js are built on top of the v8 engine, their share quite a portion of debugging infrastructure. We can use the Chrome DevTools for debugging and profiling Node.js application as well. We teach people how to read interpret the flame graph.

JavaScript Chats Spring 2021 Session 4: WebRTC

• topic: P2P video protocol, how to use WebRTC
• assets
  • README
  • slides

The pandemic makes video communication one of the most useful feature of the Internet. But the inner working of video communication is obscure to most. We help people understand how to set up a basic P2P video calling web application using the WebRTC API, and why the API are designed that way.

Mobile app development: Hack Sprint

Mobile apps are how people interact with the world right now. Hack Sprint is a beginner friendly workshop series that teaches mobile app development.

Hack Sprint Winter 2020 Session 4: Navigation

• topic: Gradle the build tool, Fragments, navigation through Fragments
• assets
  • README
  • slides

We teach people to use Kotlin ~~, the superior language over Java, ~~ for developing mobile applications. And Gradle is the default build tool. Having multiple screens is important within an application. Using Fragments, we can set up multiple screen and how to move between them.

Hack Sprint Winter 2021 Session 5: Asynchronous Programming and useEffect

• topic: Promises, async/await, the useEffect hook
• assets
  • README
  • slides
  • recording

One way to support cross platform mobile app is though React Native, which is written, well, in JavaScript. To achieve concurrency in JavaScript, async/await is the way to go. And when we need to capture some possibly asynchronous side effects we use the useEffect hook to do so.

Tooling for developers: Tooling Series

There are a lot of useful tools that helps boost developer efficiency. But it might also have some steep learning curve. Tooling Series introduce and teach tools that can be useful.

Tooling Series Spring 2020 Session 4: $\LaTeX$

• topic: using Overleaf for easy compilation of $\LaTeX$ document, simple layout and math commands within $\LaTeX$
• assets
  • README
  • slides
  • recording

$\LaTeX$ allows you to gain more control over typesetting a document. It lets you write beautiful documents that can contain domain specific text such as math equations, chemical equations, graphs, code, etc. It is used heavily within academics for typesetting research paper and homeworks. But it is also useful in other context since forums like stackoverflow allows you to write math equation in $\LaTeX$ syntax.