## Dominic & Gareth's Markup Project
slide: https://hackmd.io/@Dominic-Gareth-Markup-Project/r1K8I0bMs#/1
---
## Who are we?
We are Gareth and Dominic, students on Founders & Coders' FAC26 Bootcamp cohort.
---
### What is the project?
We have been entrusted to build an agency website for our courier agency company - *Simpson Jones Ltd. Cycle Couriers* - in order to attract potential clients. Our website needs to have:
- An introduction to the courier agency
- Information about each of us
- A way to get in touch if potential clients are interested in working with us
---
### User Stories
- [x] See information about each member of our team so that I can know who you are - Gareth
- [x] Browse our website on mobile, tablet, and desktop devices - Gareth
- [x] Click to navigate to different sections of our webpage - Dominic
---
### User Stories
- [ ] Contact us to enquire about working with us - Dominic
- [x] Visit our website at a publicly accessible domain name - Gareth, Dominic
- [ ] Navigate our website using keyboard controls - Gareth
- [ ] Hear a screen reader describe the content on our website - Gareth
---
### :bulb: Acceptance Criteria
- [x] Navigation menu
- [x] 'About us' section
- [x] Contact form
- [x] A user cannot submit a form without filling out all of the mandatory fields (name, company name, email address)
- [x] Information from the form doesn’t get submitted until the user clicks a button
---
## Table
| User Story | Date finished | Y/N |
|:---------- |:--------: | --------:|
| Information on team | | Y |
| Browse website on different formats | | Y |
| Navigate to different sections | | Y |
| Contact Us form | | Y |
| Visit website at a publicly accessible domain name | | Y |
---
## Table
| User Story | Date finished | Y/N |
|:---------- |:--------: | --------:|
Navigate website using keyboard control | | |
Hear screen reader describe website content | | |
| A user cannot submit form without filling out all of the mandatory fields (name, company name, email address) | | Y
| Information from the form doesn’t get submitted until the user clicks a button | | Y |
---
Semantic HTML example
```htmlmixed
<article>
<h2>Sims</h2>
<img
src="/yaroslav-boshnakov-OzggbKG8hf8-unsplash.jpg"
alt="black and white photograph of Sims riding in the shadows, through a town square in Italy."
/>
<p>
Riding for 20 years come rain or shine in London, New York and Tokyo
Sims is a cycle courier you can depend on to get your package to it's
destination on time.
</p>
</article>
```
---
### What did we learn?
---
```graphviz
digraph {
compound=true
rankdir=RL
graph [ fontname="Source Sans Pro", fontsize=20 ];
node [ fontname="Source Sans Pro", fontsize=18];
edge [ fontname="Source Sans Pro", fontsize=12 ];
subgraph core {
c [label="Hackmd-it \ncore"] [shape=box]
}
c -> sync [ltail=session lhead=session]
subgraph cluster1 {
concentrate=true
a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
b [label="HackMD Editor"] [shape=box]
sync [label="sync" shape=plaintext ]
b -> sync [dir="both"]
sync -> a [dir="both"]
label="An edit session"
}
}
```
---
### Architecture of extension
---
---
## Content script
- Bind with each page
- Manipulate DOM
- Add event listeners
- Isolated JavaScript environment
- It doesn't break things
---
# :fork_and_knife:
---
<style>
code.blue {
color: #337AB7 !important;
}
code.orange {
color: #F7A004 !important;
}
</style>
- <code class="orange">onMessage('event')</code>: Register event listener
- <code class="blue">sendMessage('event')</code>: Trigger event
---
# :bulb:
---
- Dead simple API
- Only cares about application logic
---
```typescript
import * as Channeru from 'channeru'
// setup channel in different page environment, once
const channel = Channeru.create()
```
---
```typescript
// in background script
const fakeLogin = async () => true
channel.answer('isLogin', async () => {
return await fakeLogin()
})
```
<br>
```typescript
// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true
```
---
# :100: :muscle: :tada:
---
### Wrap up
- Cross envornment commnication
- A small library to solve messaging pain
- TypeScript Rocks :tada:
---
### Thank you! :sheep:
You can find me on
- GitHub
- Twitter
- or email me
---
title: Talk slides template
tags: Templates, Talk
description: View the slide with "Slide Mode".
---
# Dominic & Gareth's Markup Project
<!-- Put the link to this slide here so people can follow -->
slide: https://hackmd.io/p/template-Talk-slide
---
We are Dominic and Gareth, both studying for the FAC26 coding Bootcamp cohort at Founders & Coders.
---
## Who am I?
- Front-end developer
- VSCode :heart:
- I use tabs. :cat:
---
### 70% of our users are developers. Developers :heart: GitHub.
---
{%youtube E8Nj7RwXf0s %}
---
### Usage flow
---
```graphviz
digraph {
compound=true
rankdir=RL
graph [ fontname="Source Sans Pro", fontsize=20 ];
node [ fontname="Source Sans Pro", fontsize=18];
edge [ fontname="Source Sans Pro", fontsize=12 ];
subgraph core {
c [label="Hackmd-it \ncore"] [shape=box]
}
c -> sync [ltail=session lhead=session]
subgraph cluster1 {
concentrate=true
a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
b [label="HackMD Editor"] [shape=box]
sync [label="sync" shape=plaintext ]
b -> sync [dir="both"]
sync -> a [dir="both"]
label="An edit session"
}
}
```
---
### Architecture of extension
---
---
## Content script
- Bind with each page
- Manipulate DOM
- Add event listeners
- Isolated JavaScript environment
- It doesn't break things
---
# :fork_and_knife:
---
<style>
code.blue {
color: #337AB7 !important;
}
code.orange {
color: #F7A004 !important;
}
</style>
- <code class="orange">onMessage('event')</code>: Register event listener
- <code class="blue">sendMessage('event')</code>: Trigger event
---
# :bulb:
---
- Dead simple API
- Only cares about application logic
---
```typescript
import * as Channeru from 'channeru'
// setup channel in different page environment, once
const channel = Channeru.create()
```
---
```typescript
// in background script
const fakeLogin = async () => true
channel.answer('isLogin', async () => {
return await fakeLogin()
})
```
<br>
```typescript
// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true
```
---
# :100: :muscle: :tada:
---
### Wrap up
- Cross envornment commnication
- A small library to solve messaging pain
- TypeScript Rocks :tada:
---
### Thank you! :sheep:
You can find me on
- GitHub
- Twitter
- or email me
{"metaMigratedAt":"2023-06-17T10:31:03.290Z","metaMigratedFrom":"YAML","title":"Talk slides template","breaks":true,"description":"View the slide with \"Slide Mode\".","contributors":"[{\"id\":\"0fe1acd5-d513-4022-b015-e7ca6ce695e9\",\"add\":5091,\"del\":836},{\"id\":\"149aff40-dc36-4285-bf01-3b66bed6e7b8\",\"add\":653,\"del\":61}]"}