# Dev Advocacy Topics
The following is list of topics that our Fluent UI collective needs to communicate to our customers.

We must create a consistent dialog with our customers and subsequently grow an audience.

Our goals are to **educate**, **entertain**, and **build a community** around our Fluent UI products.

**Usage**, **Adoption**, and **Mindshare** are our baseline metrics that we use measure our success.

Tactial ways that we can create an audience and a commmunity (we are not limited to just these, so we should be creative!):
- How to documenation
- Appearing on M365 Developer Community calls
- YouTube Videos
- Mixer/Twitch streaming
- Instagram, Dribble, Twitter, Vimeo

Our team is uniquely positioned because we sit with **Design** and **Engeineering**. We have the opporunity to create beautiful visual experiences that inspire, materialize it, and democratize it to our audeince to make them the most productive people on the planet.

**Design to Code** is our part of our Fluent UI mission. Let's make that concrete:

We should be able to go from **Instagram to GitHub** in a matter of weeks and consistently communicate and deliver value to our audience.


Let's use this opportunity to inspire, educate, and create audiences for the Fluent Design System and Fluent UI.

## Fluent UI React

:::info
These topics are applicable to @fluentui/react (v7)
:::
1. Getting started
2. What's the difference between @fluentui/react, react-next, and react-northstar
3. Styling & Theming
1. Create and apply a theme
2. How to use the Customizer for component overrides
4. Components
1. How to create a custom components
2. How to participate with theming (palatte & semantic colors)
3. How to create variant components

:::info
These topics are applicable to @fluentui/react-next (v8)
:::
1. Getting started
2. Styling & Theming (what's different from v7)
1. Create and apply a theme
2. How to use the ThemeProvider for component overrides
3. How to convert from Customizer to ThemeProvider
4. Components
1. How to create a custom component
2. How to participate with theming (ThemeProvider)
3. How to create variant components

## Fluent UI React Native
1. Getting started
2. Styling & Theming
1. Create and apply a theme
2. How to use customize()
3. How to create a variant
5. Components
6. How to create a custom component
7. How to participate in themeing

## Fluent UI iOS & Mac
1. Getting started
2. Styling & Theming
3. Create and apply a theme
4. How to use customize()
5. How to create a variant
5. Components
6. How to create a custom component
7. How to participate in themeing

## Fluent UI Android
1. Getting started
2. Styling & Theming
1. Create and apply a theme
2. How to use customize()
3. How to create a variant
5. Components
1. How to create a custom component
2. How to participate in themeing

## Fluent UI Icons
1. Getting started
2. Usage
1. How to export Icons

## Fluent UI x Collabs

### Fluid Framework
1. Take Badge exampl and make it a Fluent UI x Fluid example
2. How to build a co-authoring component with Fluent UI component with the Fluid Framework
3.

### Open UI
1. How does Fluent UI use OpenUI

### Adaptive Cards

### PowerApps

### SharePoint Add-ins

### Office Add-ins

# 3x3 Topic break down
Our current target is create media that a customer could easily reason over between 10 to 15 minutes. This could be a video, code sample, document, etc. For each topic you should be able to break it down into 3 takeaways you want the viewer to learn with 3 supporting talking points for those takeaways.

The following is example:

Topic - How to use Themes in your Fluent UI project

1. Takeaway 1 - Leverage the Fluent UI Theme Designer
1. Point 1 - Create a theme using the Theme Designer
2. Point 2 - Demonstrate the contrast checker support
3. Point 3 - Export the theme using Code

2. Takeaway 2 - Import your Theme into your application
1. Point 1 - Paste in theme from Designer
2. Point 2 - include the necessary `createTheme` `loadTheme` functions
3. Point 3 - Call `loadTheme`


3. Takeaway 3 - How to use the Theme colors in your application content
1. Point 1 - Show documentaion on Color Palatte
2. Point 2 - Show documentation on Semantic Colors
3. Point 3 - Demonstrate how to use them in a sample

# Timeline

## Week 1 - Due June 4th
- 3x3 Points for your specific Topic
- Add any other topics to the above list you would want to see covered for any of the Fluent UI Products

@micahgodbolt
- Topic - [How to use Customizer](https://hackmd.io/Bkyusd-0R7eQ3Q6aW3JkSA) to use create scoped style changes to your application
- subtree
- customized controls
- custom targeted controls?

@paulgildea
- Topic - Creating, loading, and using a theme - see above :-)

@Aneesha
- Getting started with iOS
- https://hackmd.io/Qoz4eB5bTdOE2AnBou-DbQ