TheOpenDevCon2018: Using JAMstack to Build Self-Branding Without Any Cost | by Ahmad Awais

![image](img/jamstack.png)

[![img](https://d3ui957tjb5bqd.cloudfront.net/op/font-preview/2772760/3/14?2&s=%7B%22size%22%3A72%2C%22text%22%3A%22by%20Ahmad%20Awais%22%7D)](https://twitter.com/mrahmadawais/)

.footCenter.bio[⚠️ Press f to go full-screen.]
---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #7F16F2, #1E1D40)

.column_t2.font10em[

</a>
]
.column_t2[.vmiddle.pushfront[

#### 👋 I'm

# Ahmad Awais

---

🥑 Open Source JS Developer Advocate

👓 WordPress Core Dev (Full Stack)

👨‍💻 EE-CS Engineer turned Emojineer

👍 Worked with Google, Microsoft, HP, etc

🤯 Over 1,767,883 devs use my open source code

🌍 Over 892,330 sites use the products I have built

---

.bio[Rants on Twitter [@MrAhmadAwais →](https://twitter.com/mrahmadawais/)]
.bio.smLnk[[FOSS GitHub](https://github.com/ahmadawais) | [AhmadAwais.com](https://AhmadAwais.com/) | [LinkedIn](https://www.linkedin.com/in/mrahmadawais/)]

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #875EFF, #28A1F2)

#### 🐦 Follow

# .noLnk[[@MrAhmadAwais](https://twitter.com/mrahmadawais/)]

---

🔥 #OneDevMinute video dev tips!

🤣 Developer jokes/rants‚ you name it

💯 I Retweet/Like Good Content - No Automation there

---

.bio.smLnk[MOAR: [FOSS GitHub](https://github.com/ahmadawais) | [AhmadAwais.com](https://AhmadAwais.com/) | [LinkedIn](https://www.linkedin.com/in/mrahmadawais/)]

]]
.column_t2.font10em[

</a>

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #373277, #4D43D1)

# 👨‍🏫 VSCode.pro

---

After ten years of Sublime, in 2017 I completely switched over to this new open source code editor called Visual Studio Code. I couldn't be happier.

---

✅ JavaScript Based Open Source Editor

🎉 I was able to contribute 👨‍💻 to VSCode

💜 [Shades of purple ↣](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) my first code editor theme is used by over 50,000 developers in .smLnk[[VSCode](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)], .smLnk[[iTerm2](https://github.com/ahmadawais/shades-of-purple-iterm2)], .smLnk[[Hyper](https://github.com/ahmadawais/shades-of-purple-hyper)], .smLnk[[Slack](https://github.com/ahmadawais/shades-of-purple-slack)], .smLnk[[Alfred](https://github.com/ahmadawais/shades-of-purple-alfred)], .smLnk[[Highlight.js](https://github.com/ahmadawais/Shades-of-Purple-HighlightJS)], etc.

---

🌟 Sign up to [become a VSCode Power User →](https://VSCode.pro/)

---

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #F2C54B, #E44E27)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

# STORY TIME

---

Let's talk about a the **THEETA FAMILY**.

---

👉  Class gets an assignment

👉  Doing everything on time score 100%

👉  Name of assignments are `assignment.pdf`

👉  Just another day, just another assignment

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #F2C54B, #EA0E0A)

# YO!

---

**ANOTHER** assignment in the same week.

---

❌ What's wrong with teachers?

🎩 Copy-pasta skill-score 110%

🎯 Name of the assignment `??????.pdf`

]]
.column_t2.font10em[

]

---

# Phenomena of Naming An Assignment

<hr>

👀  Copy pasta — name the assignment?

<hr>

✅  One student `assignment.1.pdf`

<hr>

✅  Another student `assignment.final.pdf`

<hr>

✅  Yet another student `2015-CS-XYZ-assignment.pdf`

<hr>
---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #F5AE16, #EA0E0A)

# YO!

---

Oh let me think of an **ORIGINAL NAME**.

---

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #F5AE16, #E65143)

# YO!

---

🤣 Names the assignment

---

# `ass.pdf`

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #F5AE16, #E65143)

# YO!

---

🤣 Names the assignment

---

# `ass.pdf`

# `ass.2.pdf`

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #F5AE16, #E65143)

# YO!

---

🤣 Names the assignment

---

# `ass.pdf`

# `ass.2.pdf`

# `ass.3.pdf`

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #4285F1, #72D0FC)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

# New Folder Algorithm

---

**STANFORD** did a research and found out.

---

1️⃣ UETians best at creating `NEW FOLDERS`

2️⃣ More `NEW FOLDERS` than regular folders

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #7F16F2, #1E1D40)

## WHY IS THIS HAPPENING?

---

Two hardest things in Computer Science:

—  Phil Karlton

---

1️⃣ Naming things

2️⃣ Cache invalidation

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #7F16F2, #1E1D40)

## WHY IS THIS HAPPENING?

---

Two easiest things in Computer Science:

— Steve Jobs

---

😟 Ignoring your health

😢 Getting fat

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #7F16F2, #1E1D40)

## WHY IS THIS HAPPENING?

---

Two easiest things in Computer Science:

— Ahmad Awais

---

😟 Ignoring your health

😢 Getting fat

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #424242, #000000)

# 🎯 GIT

---

Git is a version-control system for tracking changes in computer files and coordinating work on those files among multiple people.

---

👇 [Download and install Git →](https://git-scm.com/downloads)

✅ Every good developer uses it

🐾 Complete history of a project

😎 Collaborate with others

👨‍🏫 Resources to [learn Git →](https://github.com/ahmadawais/hacktoberfest)

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #424242, #000000)

# 💯 GIT IS AWESOME

---

Git is a version-control system for tracking changes in computer files and coordinating work on those files among multiple people.

---

👇 [Download and install Git →](https://git-scm.com/downloads)

✅ Every good developer uses it

🐾 Complete history of a project

😎 Collaborate with others

👨‍🏫 Resources to [learn Git →](https://github.com/ahmadawais/hacktoberfest)

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #7D15EE, #24243E)

# [JAMstack](https://jamstack.org/)

---

A revolution in itself. Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

---

😎 **JavaScript**: Running entirely on the client

🤯 **APIs**: Reusable APIs, accessed over HTTPS

🤩 **Markup**: Templated markup e.g. Markdown

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #F0DB4F, #F0DB4F)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

# JavaScript

---

Best programming language at the moment.

---

✅ **JOBS**: Highly paid job

🔥 **FUN**: Seriously to code jS

⚡ **CUTTING EDGE**: Always improving

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #E435AA, #703993)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

# APIs

---

Application programming interface

---

✅ **REST**: GET, POST

🔥 **GraphQL**: Query language for APIs

❓ **WHAT API**: Best [explanation for APIs →](https://www.youtube.com/watch?v=s7wmiS2mSXY)

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #DCE35B, #48B749)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

# Markup

---

Markups are converted into HTML via build tools.

---

🌟 [**Markdown**](https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf): The best lightweight [markup](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)

🔥 [**MDX**](https://github.com/mdx-js/mdx): Markdown + JSX for JavaScript + React

🌐 **MOAAR**:  [Pug](https://pugjs.org/) | {{ [mustache](http://mustache.github.io/) }} | [Handlebars.js](https://handlebarsjs.com/)

]]

---

# 😭  → 😫  → 😠  → 😐  → 🤔  → 🧐  → ❓

<hr>

## FEELING OVERWHELMED?
---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #0E1E25, #2D3B41)

# Let's DO A PROJECT

---

Let's build a blog with JAMstack.

---

👀 Demo [UET-JAMstack.netlify.com →](https://uet-jamstack.netlify.com/)

⚛️ **Gatsby**: React.js based Static Site Generator

✅ [**Netlify**](https://netlify.com/): #JAMstack Hosting & a lot more

💥 **MOAAR**:  [Linode](https://www.linode.com/) | [DigitalOcean](https://www.digitalocean.com/) →

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #6EC049, #333333)

# Node.js

---

An open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.

---

⬇️ [Download & Install →](https://nodejs.org/)

🌍 Cross platform JavaScript

🖲 Built on Chrome's V8 JavaScript engine

🎯 Incredibly amazing eco-system for developers

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #CA3534, #611014)

# npm

---

[`npm`](https://www.npmjs.com/) is the node package manager.

---

✅  It's used for the JavaScript language

🎯 It is the default package manager for Node.js

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #663399, #1E1D40)

# Gatsby

---

Blazing fast modern site generator for React.

---

💯 Impressive [documentation →](https://www.gatsbyjs.org/docs/)

🎯 Learn everything with this [Gatsby tutorial →](https://www.gatsbyjs.org/tutorial/)

🙌 React.js/GraphQL/Plugins/Community has it all

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #663399, #1E1D40)

.column_t2.font10em[

</a>
]
.column_t2[.vmiddle.pushfront[

## .center[⚛️ Gatsby Usage]

---

```shell
# 1. Install Gatsby CLI globally.
npm install --global gatsby-cli

# 2. Create a new Gatsby blog.
gatsby new blog gatsbyjs/gatsby-starter-blog

# 3. Browse the new blog folder.
cd blog

# 4. Start the gatsby
gatsby develop

# 5. To build gatsby site
gatsby build
```

---

---

]]

---

<video controls
 muted
 src="img/gatsby.mp4"
 >
 Sorry, your browser doesn't support embedded videos.
</video>
---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #0E1E25, #2D3B41)

# Netlify

---

It's a #JAMstack hosting but a lot more than that.

---

🤖 Automatic deployment / Cache invalidation

⚡ HTTPS, Custom domain, DNS Management

😮 Serverless: Deploy AWS Lambda functions

📨 Contact forms without JS or server-side code

🦄 Authentication signups, logins, & pass recovery

🤫 [MOAR features →](https://www.netlify.com/features/)

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #0E1E25, #2D3B41)

# Netlify: Connect

---

It's a #JAMstack hosting but a lot more than that.

---

1️⃣ Connect your repository

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #0E1E25, #2D3B41)

# Netlify: Build

---

It's a #JAMstack hosting but a lot more than that.

---

1️⃣ Connect your repository

2️⃣️⃣ Add your build settings

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #0E1E25, #2D3B41)

# Netlify: Deploy

---

It's a #JAMstack hosting but a lot more than that.

---

1️⃣ Connect your repository

2️⃣️⃣ Add your build settings

3️⃣️⃣️ Deploy your website

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #070741, #200EA2)

# Personal Branding

---

As a CS Engineer, you must have a blog on a domain with your own name.

---

✅  Buy `YourName.tld` right away

✍️  Write content to share what you stand for

🎯 Create `Contact Me` + `About Me` Pages

📨  You must have a clear email address

→ E.g. `hello@yourname.tld`
    → E.g. `MrName@gmail.com`
    → E.g. `NameMe@gmail.com`

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #542B3E, #542B3E)

.column_t2.font10em[

<img class='w100p pulseImg '
 src="img/hacktoberfest.png" />
</a>
]
.column_t2[.vmiddle.pushfront[

# HACKTOBERFEST

---

Event for open source awareness.

---

👕 Earn a limited edition T-shirt

✍️  Do 5 pull requests on GitHub

📺 Watch my [#OneDevMinute to learn how →](https://www.youtube.com/watch?v=MnCfVxSw3ak)

]]

---

# 🤔 → 🙃 → 🧐 → 🤞 → 🤫 → 😁 → 🤗

<hr>

## BE PROFESSIONAL!
---

[![sponsors](img/sponsors.jpg)](https://2018.theopendev.com/#sponsors)

<hr>

## THANKS TO OUR SPONSORS!
---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #292F33, #654500)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

---

🎯 Follow Ahmad on Twitter [@MrAhmadAwais →](https://twitter.com/mrahmadawais/)

💯 I'll share the slides [link on Twitter →](https://twitter.com/mrahmadawais/)]

---

]

]]