Press f to go full-screen.
I'm
Ahmad Awais
Principal Developer Advocate (JS/FOSS)
Node.js TLC Community Committee Member
Google Developers Expert in Web Technology
Open Sourcerer & WordPress Core Developer
Over 1,781,061 devs use my open source code
Over 631,123 sites use the products I have built
EE-CS Engineer turned Emojineer Most definite #TrueStory
Rants on Twitter @MrAhmadAwais β FOSS GitHub | AhmadAwais.com | LinkedIn
Follow
@MrAhmadAwais
Using it as a mini personal blog
#OneDevMinute development tips!
Developer jokes/rantsβ you name it
I Retweet/Like Good Content - No Automation there
MOAR: FOSS GitHub | AhmadAwais.com | LinkedIn
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 β£ my first code editor theme is used by over 1,555,060 developers in VSCode, iTerm2, Hyper, Slack, Alfred, Highlight.js, & more.
Sign up to become a VSCode Power User β
13,526+ Developers already learning
CLOUDYCAM.dev
Cloudinary's Developer Activation
Internet of Things (IoT)
Built with the JAMstack
Progressive Web Application
Project Requirements
Take a picture
Project Requirements
Take a picture
Upload to Cloudinary
Project Requirements
Take a picture
Upload to Cloudinary
Build a demo user page
Developer Experience
Build in less than 15 seconds
Developer Experience
Build in less than 15 seconds
Multiple simultaneous demos at an event
Developer Experience
Build in less than 15 seconds
Multiple simultaneous demos at an event
Multiple developer events with multiple demos
DECISIONS
Frontend?!
DECISIONS
Frontend?!
Backend?!
DECISIONS
Frontend?!
Backend?!
Documentation?!
β 
β 
β 
β β 
β 
FEELING OVERWHELMED?
JAMstack
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
JavaScript
Best* programming language at the moment.
JOBS: High-paid jobs
FUN: Super fun to write (*sometimes)
CUTTING EDGE: Always improving; dev tools
APIs
Application programming interface
REST: GET, POST
GraphQL: Query language for APIs
WHAT API: Best explanation for APIs β
MOAAR:
Frontend Options
NEED: First class routing
NEED: Server Side Rendering
GOOD TO HAVE: PWA Support
Gatsby.js
Blazing fast modern site generator for React.
Impressive documentation β
Learn everything with this Gatsby tutorial β
React/GraphQL/Plugins/Community β has it all
Routing is a second tier citizen
Next.js
Blazing fast modern site generator for React.
Impressive documentation β
Learn everything with this tutorial β
React/Examples/Community β has it all
Routing; well thought out & done right
SSR Server Side Rendering
Β± Progressive Web Apps
Backend Options
NEED: Serverless setup
NEED: Backendless backend
GOOD TO HAVE: Monorepo Support
Node.js
An open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.
Cross platform JavaScript
Built on Chrome's V8 JavaScript engine
Incredibly amazing eco-system for developers
Documentation
NEED: Markdown only
NEED: UI + Customizability
GOOD TO HAVE: Search Support
VuePress
Vue-powered Static Documentation Site Generator
Pretty amazing documentation
Build for docs/content focused sites
Markdown to rendered HTML Content
Content is searchable out of the box
Configurable & customizable extensions
β 
β β 
β 
β 
β 
JAMstack (Next.js & Cloudinary) + Monorepo (ZEIT Now) === !