# data[].attributes.body
Post new topic requests in the comments of this card.

- Review sessions?
- More backend sessions?
- Juggling?!?

# data[].attributes.body
Tips for independent contractors.

- Registering a tradename
- Operating as a sole proprietor vs incorporation
- Invoicing and common payment models
- Client management
- Expensing clients
- Hiring sub-contractors
- Taxes and GST

# data[].attributes.body
A hands-on activity:

- Toggle theory: checkboxes vs buttons
- Styling toggles
- Controlling colour globally with CSS Variables, HSL and data attributes
- Light CSS transitions

# data[].attributes.attachment_link.readable_text
Giving your users a way to customise the interface to their preference is a huge win for user experience. Here we are going to provide the user with a simple switch to toggle between dark mode and light mode and we will also try to remember their preference for future visits.

If you don't have a website of your own to which you wish to add this functionality, use this demo website to follow along.

We will be adding CSS custom properties also known as CSS variables, which we can reference and modify throughout the document. If you wish to read more about custom properties you can read on MDN.
Here's the tldr; version -

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);)

First, we'll add our light or default mode css variables to the :root pseudo class. It matches with the root element in your document tree, generally the <html> tag. We will use :root because we want to avail the variables globally.

Second, we'll add our dark mode css variables.

What is [data-theme="dark"]? This means we are referencing a data attribute called data-theme with a value "dark". We will find the use of it in a while.

Then, we can reference these variables in our stylesheets like so-

This is essentially just a checkbox, however we will add some additional markup to style like a toggle switch. I referenced the styles from this codepen.

The final part is to add the bit of JavaScript to tie it all together.
We have 3 tasks in hand-

Add event handlers to handle accordingly the check/uncheck event of toggle-switch

Store the user preference for future visits

Check for saved user preference, if any, on load of the website

Adding the event handlers

Remember, the data-theme attribute we referenced in CSS above, this is where it's getting added to our root element.

Store the user preference for future visits

We will use browser's localStorage to store the user preference.
Let's modify our switchTheme function -

Check for saved user preference, if any, on load of the website

We will check if the theme preference is saved, if yes then we will, accordingly-
- set our data-theme attribute
- check/uncheck our toggle-switch checkbox

That's it! Check out the full demo below.

I recently added this to my website, so check that out as well, maybe!

Pro-Tip: How to decide on the color scheme?
My suggestion is to stay in the same spectrum of your primary or brand color and generate a palette out of it. Use the darkest shade from the palette as the background color and the lighter shades as font colors when in dark mode. I used this color shades generator for generating my color palette.

Even if you don't end up using the exact colors generated, it is still a good place to start. Even I ended up fine tuning the colors I ultimately used.

# data[].attributes.attachment_link.title
Create A Dark/Light Mode Switch with CSS Variables

# data[].attributes.attachment_link.description
Giving your users a way to customise the interface to their preference is a huge win for user experience. Here we are going to provide the user with a simple switch to toggle between dark mode and light mode and we will also try to remember their preference for future visits.

# data[].attributes.body
SVGs and CSS are awesome together.

- Building custom SVGs with Figma
- Optimizing SVGs with
SVGOMG
- Using SVG in HTML: img elements vs inline SVG
- Intro to responsive SVGs
- Styling inline SVGs with CSS

# data[].attributes.body
You can never cover functions enough.

- Review: declaration, invocation, scope, return values
- First-class functions and callbacks
- Closures
- Default parameters in ES6
- Arrow functions and this
- Better conditional logic with guard clauses
- Arbitrary number of arguments with rest parameters and the spread operator

# data[].attributes.body
Key goal of Docker: to stop a dev from saying "Well, it works on MY machine..."

- First time install and setup
- Docker images
- Containers
- Shared directories
- Port forwarding
- SSH access
- Common Docker recipies (Node/Mongo, Python/MySQL, etc)
- Example Git workflow for teams

# data[].attributes.headline
Stage work: Improving your video streams and presentations

# data[].attributes.subject
Stage work: Improving your video streams and presentations

# data[].attributes.body
For anyone interested in improving their Zoom (or whatever) game. Tips for all budgets (with a slight Mac bias).

- OBS + Zoom == Boom!
- Useful tools
- Mics and audio
- Lighting
- Cameras
- Presenter best practices

# data[].attributes.body
Seriously, I could talk about CSS all day. Request topics in the comments.

# data[].attributes.body
You can extend CSS with Photoshop/Illustrator-level effects using SVG filters!

- Theory: what is SVG and the SVG filter element? What are filter primitives?
- Importing an SVG filter into CSS with url().
- Specific filter examples

# data[].attributes.attachment_link.title
“SVG Filters: The Crash Course” by Sara Soueidan—An Event Apart video

# data[].attributes.body
Useful information for your own personal/professional online presence. Also an option for deploying React, VueJS, etc.

- What is a static website generator?
- GitHub Pages deep dive
- Jekyll overview: natively supported by GitHub Pages
- Static CMS fundamentals: layout templates, scripting, posts vs pages
- Static generators as build tools.
- Jekyll alternative: Eleventy
- GH Pages alternative: Netlify

# data[].attributes.body
This session is based largely on the video below, plus extra html image tips.

- High frequency (jpg) vs low frequency (png, gif) image formats
- webp: the jpeg/gif/png format replacement
- Optimizing raster images with Squoosh
- Batch processing sm/md/lg image sizes with Photoshop
- Basic (and free) image editing with Pixlr
- Responsive image basics
- Optimizing image performance with lazy loading and the srcset attribute

# data[].attributes.headline
Adding scroll logic with the Intersection Observer API

# data[].attributes.subject
Adding scroll logic with the Intersection Observer API

# data[].attributes.body
I haven't used it much but I've been looking for an excuse to play more with it.

- Scroll-activated events
- "Inifinite scrolling"
- Pausing video when out of view
- Scroll metrics (i.e. has the user read this article?)

# data[].attributes.attachment_link.title
Introduction to the Intersection Observer JavaScript API

# data[].attributes.body
An architecture I'm currently researching for building games. Fair warning: I'm still a beginner but I can share what I've learned.

- What is a finite state machine?
- Finite state diagrams
- Basic example in vanilla JS
- FSM frameworks: XState vs Robot3
- UI use cases