SlideShare a Scribd company logo
Ethical and Accessible Stack
Wagtail + Gatsby + Ethical Source Licenses
+
+ +
+
Who Am I?
+
. . . . . . . . . . . .
Django Engineer & Wagtail Core Team Member
● Software Engineer, React and Django Consultant at
Rugby Street Designs
● Build enterprise tools for SMBs, NGOs, Black, Brown
and Queer Enterprise
● Ethical Source Organizer
Where you can find me:
● Twitter @DawnWagesSays
● DjangoCon(s)
● GlitterTech.dev
● http://DawnWages.info
+
+
. . . . . . . . . . . .
Feature-packed and fast
React-based open source prgresssive web app generator
Rich, frontend and optimized websites on a cloud platform
Tools we’ll be talking about today!
Django-based Content Management System
10.6K Stars on Github and just released feature-rich version 2.13
www.DawnWages.info || @DawnWagesSays
Can we have it all?
Exploring if a GatsbyJS + WagtailCMS could be
a solution for small and medium clients and
personal project.
Fully automate your development set up
Always ready to code, turn almost any repo into a prebuilt collaborative
VSCode like dev environment in your browser.
Query language on a single data layer
Not tied to any database or storage engine and can “easily” combine
multiple data sources
+
+
. . . . . . . . . . . .
A case study of sorts...
React-based open source prgresssive web app generator
Rich, frontend and optimized websites on a cloud platform
Two powerful frameworks + two active communities
Django-based Content Management System
10.6K Stars on Github and just released feature-rich version 2.13
www.DawnWages.info || @DawnWagesSays
Content Management System
A content management system provides a way for users to update
information on their own. The developer equips the end user with
“widget” like functionality and an admin login to update the website
themselves.
Progressive Web App Generator
We’ve seen the rise of static-site generators in the past few years
which take data content, provided in different formats, content and
templates, processes them, and output a folder full of all the resultant
pages and assets. Gatsby is different because it is written in React and
outputs what could be an web app experience with stateful
components.
+
+
. . . . . . . . . . . .
Removes the presentation layer of what would be a full stack framework and adds
its own presentation layer.
What is headless?
ANSWER: Flexibility
When you abstract all of your decisions away to the top level
of your application, you have a single point of decision but
also a single point of failure.
www.DawnWages.info || @DawnWagesSays
Everything is a trade off.
● By separating your frontend and backend, you’re able to put
data into one big “bucket” in order to be more flexible with
the way that you render your application.
● Hard to do “stateful” frontend components with static
templating
● Can bring in other services from the headless infrastructure
beyond just web apps. Eg. SMS messages, email, rules
engines, data analysis all done in your backend language of
choice.
. . .
. . . . . . . . .
. . . . . . . . . .
. . . . . . . . .
. . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . .
. . . . . . .
. . .
Frontend
Backend
Data Storage
Development Environment
+
+
. . . . . . . . . . . .
and what the heck is a static site generator (SSG)?
Why headless?
www.DawnWages.info || @DawnWagesSays
. . .
. . . . . . . . .
. . . . . . . . . .
. . . . . . . . .
. . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . .
. . . . . . .
. . .
Frontend
Backend
Data Storage
Development Environment
Icons made by Freepik from flaticon.com
Data /
Content
Static Site
Generator
Website
End Users Hosting
BUILD
TIME
REQUEST
TIME
Wagtail uses the Model View Controller paradigm when it does not have a
frontend. It has its own templating and view structure that leans into common web
development patterns. When headless, we hand the “VC” to another
framework, but still use django’s powerful model and migration, data
management architecture that many node applications still wrestle with, we
have out of the box!
...more data stores
+
What sets Gatsby apart?
+
01
Accessibility
Gatsby is passionate about making sites that work for
everyone and gives tools to help your site be WCAG
compliant.
03
Gatsby Themes + Starters
Starters are pre-configured sites with specific
functionality for an expressed purpose to start your site
with: eg. Blog, portfolio, ecommerce, and you can
customize from there. Themes take the configuration
from the site to an npm package.
. . . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . .
. . . . . . . .
. . .
www.DawnWages.info || @DawnWagesSays
02
Plugin Library
Thousands of plugins from analytics, ecommerce
payment and auth, CSS and UI, to accessibility, etc. The
gatsby community authors new themes all the time.
04
Community
The users of Gatsby are passionate about the product.
Gatsby authors excellent guides and documentation, but
so does the community. The resources for questions,
help and seeing examples of what’s possible are easy to
find.
+
What sets Wagtail apart?
+
. . . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . .
. . . . . . . . . . .
. . . . . . . .
. . .
www.DawnWages.info || @DawnWagesSays
01
Tight release cycle
Wagtail just release 2.13 - we use a time-based release
schedule, with feature releases every three months.
03
Made with Wagtail
A showcase of sites and apps made with wagtail, their
authors and should the site have open code, it’s can be
included
02
Plugin Library
Like Gatsby and Django, Wagtail has lots of plugins that
make the ecosystem even more feature rich. From
Authentication, C calendar,, Localization, Workflow,
Inventory, ecommerce, image editing, etc.
04
Community
Wagtail shows up at conferences, has its own Wagtail
Space, hosts tutorials an active Slack and Twitter
community.
+
+
. . . . . . . . . . . .
Pretty fast, and getting faster
www.DawnWages.info || @DawnWagesSays
So how fast is it to spin up a new site?
● Python 3.8 (3.9)**
● wagtail==2.10.1 (2.13)**
● wagtail-grapple==0.0.6.0
● wagtail-media==0.6.0
● graphene==2.1.8
● graphql-core==2.2.1
● graphene==2.1.8
● Django==3.0.9 (3.2)**
**Update to tutorial coming soon!
http://bit.ly/wagtail-gatsby-latest-tutorial
+
+
. . . . . . . . . . . .
Here’s where you could describe
open GitPod
Steps
www.DawnWages.info || @DawnWagesSays
001
002
003
004
005
006
007
008
009
010
./manage.py startapp blog
and update blog models
pip install graphene,
wagtail-grapple, wagtailmedia
configure graphene and grapple in the base.py and
urls.py for graphql and graphiql view
Add graphene_django, wagtail_graphql,
wagtaimedia, grapple and blog to
INSTALLED APPS in settings.py file
./manage.py migrate
./manage.py runserver 8080
add new blog posts
https://8080[gitpodurl]/admin
navigate to
https://8080[gitpodurl]/api/graphiql to
test graphql’s endpoints
npm i -g gatsby-cli
to install gatsby globally
gatsby new site
https://github.com/tm-kn/w
atail-graphql-api-gatsby
edit cd site and gatsby develop to run the
site front end
011
012
013
edit .env to connect gatsby and wagtail
WAGTAIL_GRAPHQL_ENDPOINT=http://local
host:8080/graphql/
VISIT YOUR SITE RUNNING IN DEVELOPER
MODE AT PORT 8000!
. . .
. . . . . . . .
. . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . .
. . .
+
Building projects
+
. . . . . . . . . . . .
At The Root
EST. June 2020
An Anti-Racist License for Open Source Projects.
. . .
. . . . . . . .
. . . . . . . . . .
. . . . . . . . . . . .
. . . . . . . .
. . . . . . . . . .
. . . . . . . . . . . .
. . . . . . .
www.DawnWages.info || @DawnWagesSays
Radical simply means 'grasping things at the root',”
- Angela Davis
+
+
. . . . . . . . . . . .
Anti-Racist Ethical Source License
AtTheRoot.dev
001
What is an Ethical Source License?
A new license that explicitly restricts use of open code on the basis of an ethics.
At The Root
www.DawnWages.info || @DawnWagesSays
Icons made by Freepik from flaticon.com
At The Root License Anti-Racist Check List At The Root Review Board
+
+ . . . . . . . . . . . .
A movement that started in 2018, gaining traction
001
Empowers open source engineers
Be confident that you are creating code that will build a world you
want to live in.
Ethical Source Movement
. . .
. . . . . . . .
. . . . . . . . . .
. . . . . . . . . . . .
. . .
. . . . . . . .
. . . . . . . . . .
. . . . . . . . . . . .
. . . . . . . .
Where
next?
www.DawnWages.info || @DawnWagesSays
002
Tech is not neutral, nor is it apolitical
Regardless of how much we may want it to be, what we build and
what we build it for is not neutral.
003
We’re building a movement
Recently founded Organization for Ethical Source has full time
member and partnerships with the Corporate Accountability Lab
https://ethicalsource.dev/resources/
. . .
. . . . . . . .
. . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . .
. . . . . . . .
. . .
+
+
Where you can find me:
● Twitter @DawnWagesSays
● DjangoCon(s)
● GlitterTech.dev
● http://DawnWages.info
Thank you!
. . . . . . . . . . . .
dawn@glittertech.dev

More Related Content

Similar to Final gatsby + wagtail - Inclusive product week

GDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 SlidesGDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
Heather Rock
 
Why and How SmartNews uses SaaS?
Why and How SmartNews uses SaaS?Why and How SmartNews uses SaaS?
Why and How SmartNews uses SaaS?
Takumi Sakamoto
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
Rachel Andrew
 
[drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance![drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance!
DrupalDay
 
Speed up your Drupal instance!!
Speed up your Drupal instance!!Speed up your Drupal instance!!
Speed up your Drupal instance!!
bmeme
 
What I Learned At Drupal Con Dc 2009
What I Learned At Drupal Con Dc 2009What I Learned At Drupal Con Dc 2009
What I Learned At Drupal Con Dc 2009
Neil Giarratana
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
Mark Fayngersh
 
Tacacs+ with gui support
Tacacs+ with gui supportTacacs+ with gui support
Tacacs+ with gui support
Asmit Panday
 
Tacacs+ with gui support
Tacacs+ with gui supportTacacs+ with gui support
Tacacs+ with gui support
Asmit Panday
 
Tacacswithguisupport 160906102531
Tacacswithguisupport 160906102531Tacacswithguisupport 160906102531
Tacacswithguisupport 160906102531
Asmit Panday
 
Digital Content Retrieval Final Report
Digital Content Retrieval Final ReportDigital Content Retrieval Final Report
Digital Content Retrieval Final Report
Kourosh Sajjadi
 
Making sense of microservices, service mesh, and serverless
Making sense of microservices, service mesh, and serverlessMaking sense of microservices, service mesh, and serverless
Making sense of microservices, service mesh, and serverless
Christian Posta
 
Bringing JAMStack to the Enterprise
Bringing JAMStack to the EnterpriseBringing JAMStack to the Enterprise
Bringing JAMStack to the Enterprise
C4Media
 
Smwcon spring2011 tutorial applied semantic mediawiki
Smwcon spring2011 tutorial applied semantic mediawikiSmwcon spring2011 tutorial applied semantic mediawiki
Smwcon spring2011 tutorial applied semantic mediawiki
Jesse Wang
 
Meteorjs
MeteorjsMeteorjs
Meteorjs
MeteorjsMeteorjs
Workshop Report
Workshop ReportWorkshop Report
Workshop Report
lakshitha perera
 
Cloud view platform-highlights-web3
Cloud view platform-highlights-web3Cloud view platform-highlights-web3
Cloud view platform-highlights-web3
Enterprise Technology Management (ETM)
 
Power to the Users (and Librarians)
Power to the Users (and Librarians)Power to the Users (and Librarians)
Power to the Users (and Librarians)
Guus van den Brekel
 
Ambrosius Lee. - AutoCAD Platform Customization VBA .Pdf
Ambrosius Lee. - AutoCAD Platform Customization  VBA .PdfAmbrosius Lee. - AutoCAD Platform Customization  VBA .Pdf
Ambrosius Lee. - AutoCAD Platform Customization VBA .Pdf
Joshua Gorinson
 

Similar to Final gatsby + wagtail - Inclusive product week (20)

GDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 SlidesGDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
 
Why and How SmartNews uses SaaS?
Why and How SmartNews uses SaaS?Why and How SmartNews uses SaaS?
Why and How SmartNews uses SaaS?
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
[drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance![drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance!
 
Speed up your Drupal instance!!
Speed up your Drupal instance!!Speed up your Drupal instance!!
Speed up your Drupal instance!!
 
What I Learned At Drupal Con Dc 2009
What I Learned At Drupal Con Dc 2009What I Learned At Drupal Con Dc 2009
What I Learned At Drupal Con Dc 2009
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
Tacacs+ with gui support
Tacacs+ with gui supportTacacs+ with gui support
Tacacs+ with gui support
 
Tacacs+ with gui support
Tacacs+ with gui supportTacacs+ with gui support
Tacacs+ with gui support
 
Tacacswithguisupport 160906102531
Tacacswithguisupport 160906102531Tacacswithguisupport 160906102531
Tacacswithguisupport 160906102531
 
Digital Content Retrieval Final Report
Digital Content Retrieval Final ReportDigital Content Retrieval Final Report
Digital Content Retrieval Final Report
 
Making sense of microservices, service mesh, and serverless
Making sense of microservices, service mesh, and serverlessMaking sense of microservices, service mesh, and serverless
Making sense of microservices, service mesh, and serverless
 
Bringing JAMStack to the Enterprise
Bringing JAMStack to the EnterpriseBringing JAMStack to the Enterprise
Bringing JAMStack to the Enterprise
 
Smwcon spring2011 tutorial applied semantic mediawiki
Smwcon spring2011 tutorial applied semantic mediawikiSmwcon spring2011 tutorial applied semantic mediawiki
Smwcon spring2011 tutorial applied semantic mediawiki
 
Meteorjs
MeteorjsMeteorjs
Meteorjs
 
Meteorjs
MeteorjsMeteorjs
Meteorjs
 
Workshop Report
Workshop ReportWorkshop Report
Workshop Report
 
Cloud view platform-highlights-web3
Cloud view platform-highlights-web3Cloud view platform-highlights-web3
Cloud view platform-highlights-web3
 
Power to the Users (and Librarians)
Power to the Users (and Librarians)Power to the Users (and Librarians)
Power to the Users (and Librarians)
 
Ambrosius Lee. - AutoCAD Platform Customization VBA .Pdf
Ambrosius Lee. - AutoCAD Platform Customization  VBA .PdfAmbrosius Lee. - AutoCAD Platform Customization  VBA .Pdf
Ambrosius Lee. - AutoCAD Platform Customization VBA .Pdf
 

Recently uploaded

If we're running two pumps, why aren't we getting twice as much flow? v.17
If we're running two pumps, why aren't we getting twice as much flow? v.17If we're running two pumps, why aren't we getting twice as much flow? v.17
If we're running two pumps, why aren't we getting twice as much flow? v.17
Brian Gongol
 
The world of Technology Management MEM 814.pptx
The world of Technology Management MEM 814.pptxThe world of Technology Management MEM 814.pptx
The world of Technology Management MEM 814.pptx
engrasjadshahzad
 
Sustainable construction is the use of renewable and recyclable materials in ...
Sustainable construction is the use of renewable and recyclable materials in ...Sustainable construction is the use of renewable and recyclable materials in ...
Sustainable construction is the use of renewable and recyclable materials in ...
RohitGhulanavar2
 
Software Engineering and Project Management - Activity Planning
Software Engineering and Project Management - Activity PlanningSoftware Engineering and Project Management - Activity Planning
Software Engineering and Project Management - Activity Planning
Prakhyath Rai
 
# Smart Parking Management System.pptx using IOT
# Smart Parking Management System.pptx using IOT# Smart Parking Management System.pptx using IOT
# Smart Parking Management System.pptx using IOT
Yesh20
 
FINE-TUNING OF SMALL/MEDIUM LLMS FOR BUSINESS QA ON STRUCTURED DATA
FINE-TUNING OF SMALL/MEDIUM LLMS FOR BUSINESS QA ON STRUCTURED DATAFINE-TUNING OF SMALL/MEDIUM LLMS FOR BUSINESS QA ON STRUCTURED DATA
FINE-TUNING OF SMALL/MEDIUM LLMS FOR BUSINESS QA ON STRUCTURED DATA
kevig
 
Chapter 1 Introduction to Software Engineering and Process Models.pdf
Chapter 1 Introduction to Software Engineering and Process Models.pdfChapter 1 Introduction to Software Engineering and Process Models.pdf
Chapter 1 Introduction to Software Engineering and Process Models.pdf
MeghaGupta952452
 
Hate speech detection using machine learning
Hate speech detection using machine learningHate speech detection using machine learning
Hate speech detection using machine learning
rakeshrocking3
 
NOVEC 1230 Fire Suppression System Presentation
NOVEC 1230 Fire Suppression System PresentationNOVEC 1230 Fire Suppression System Presentation
NOVEC 1230 Fire Suppression System Presentation
miniruwan1
 
Santa Barbara City College degree offer diploma Transcript
Santa Barbara City College degree offer diploma TranscriptSanta Barbara City College degree offer diploma Transcript
Santa Barbara City College degree offer diploma Transcript
owbetho
 
AI chapter1 introduction to artificial intelligence
AI chapter1 introduction to artificial intelligenceAI chapter1 introduction to artificial intelligence
AI chapter1 introduction to artificial intelligence
GeethaAL
 
Presentation python programming vtu 6th sem
Presentation python programming vtu 6th semPresentation python programming vtu 6th sem
Presentation python programming vtu 6th sem
ssuser8f6b1d1
 
How to Formulate A Good Research Question
How to Formulate A  Good Research QuestionHow to Formulate A  Good Research Question
How to Formulate A Good Research Question
rkpv2002
 
OME754 – INDUSTRIAL SAFETY - unit notes.pptx
OME754 – INDUSTRIAL SAFETY - unit notes.pptxOME754 – INDUSTRIAL SAFETY - unit notes.pptx
OME754 – INDUSTRIAL SAFETY - unit notes.pptx
shanmugamram247
 
AFCAT STATIC Genral knowledge important CAPSULE.pdf
AFCAT STATIC Genral knowledge important CAPSULE.pdfAFCAT STATIC Genral knowledge important CAPSULE.pdf
AFCAT STATIC Genral knowledge important CAPSULE.pdf
vibhapatil140
 
charting the development of the autonomous train
charting the development of the autonomous traincharting the development of the autonomous train
charting the development of the autonomous train
huseindihon
 
Generative AI and Large Language Models (LLMs)
Generative AI and Large Language Models (LLMs)Generative AI and Large Language Models (LLMs)
Generative AI and Large Language Models (LLMs)
rkpv2002
 
李易峰祝绪丹做爱视频流出【网芷:ht28.co】可爱学生妹>>>[网趾:ht28.co】]<<<
李易峰祝绪丹做爱视频流出【网芷:ht28.co】可爱学生妹>>>[网趾:ht28.co】]<<<李易峰祝绪丹做爱视频流出【网芷:ht28.co】可爱学生妹>>>[网趾:ht28.co】]<<<
李易峰祝绪丹做爱视频流出【网芷:ht28.co】可爱学生妹>>>[网趾:ht28.co】]<<<
amzhoxvzidbke
 
Technical Seminar of Mca computer vision .ppt
Technical Seminar of Mca computer vision .pptTechnical Seminar of Mca computer vision .ppt
Technical Seminar of Mca computer vision .ppt
AnkitaVerma776806
 
Disaster Management and Mitigation presentation
Disaster Management and Mitigation presentationDisaster Management and Mitigation presentation
Disaster Management and Mitigation presentation
RajaRamannaTarigoppu
 

Recently uploaded (20)

If we're running two pumps, why aren't we getting twice as much flow? v.17
If we're running two pumps, why aren't we getting twice as much flow? v.17If we're running two pumps, why aren't we getting twice as much flow? v.17
If we're running two pumps, why aren't we getting twice as much flow? v.17
 
The world of Technology Management MEM 814.pptx
The world of Technology Management MEM 814.pptxThe world of Technology Management MEM 814.pptx
The world of Technology Management MEM 814.pptx
 
Sustainable construction is the use of renewable and recyclable materials in ...
Sustainable construction is the use of renewable and recyclable materials in ...Sustainable construction is the use of renewable and recyclable materials in ...
Sustainable construction is the use of renewable and recyclable materials in ...
 
Software Engineering and Project Management - Activity Planning
Software Engineering and Project Management - Activity PlanningSoftware Engineering and Project Management - Activity Planning
Software Engineering and Project Management - Activity Planning
 
# Smart Parking Management System.pptx using IOT
# Smart Parking Management System.pptx using IOT# Smart Parking Management System.pptx using IOT
# Smart Parking Management System.pptx using IOT
 
FINE-TUNING OF SMALL/MEDIUM LLMS FOR BUSINESS QA ON STRUCTURED DATA
FINE-TUNING OF SMALL/MEDIUM LLMS FOR BUSINESS QA ON STRUCTURED DATAFINE-TUNING OF SMALL/MEDIUM LLMS FOR BUSINESS QA ON STRUCTURED DATA
FINE-TUNING OF SMALL/MEDIUM LLMS FOR BUSINESS QA ON STRUCTURED DATA
 
Chapter 1 Introduction to Software Engineering and Process Models.pdf
Chapter 1 Introduction to Software Engineering and Process Models.pdfChapter 1 Introduction to Software Engineering and Process Models.pdf
Chapter 1 Introduction to Software Engineering and Process Models.pdf
 
Hate speech detection using machine learning
Hate speech detection using machine learningHate speech detection using machine learning
Hate speech detection using machine learning
 
NOVEC 1230 Fire Suppression System Presentation
NOVEC 1230 Fire Suppression System PresentationNOVEC 1230 Fire Suppression System Presentation
NOVEC 1230 Fire Suppression System Presentation
 
Santa Barbara City College degree offer diploma Transcript
Santa Barbara City College degree offer diploma TranscriptSanta Barbara City College degree offer diploma Transcript
Santa Barbara City College degree offer diploma Transcript
 
AI chapter1 introduction to artificial intelligence
AI chapter1 introduction to artificial intelligenceAI chapter1 introduction to artificial intelligence
AI chapter1 introduction to artificial intelligence
 
Presentation python programming vtu 6th sem
Presentation python programming vtu 6th semPresentation python programming vtu 6th sem
Presentation python programming vtu 6th sem
 
How to Formulate A Good Research Question
How to Formulate A  Good Research QuestionHow to Formulate A  Good Research Question
How to Formulate A Good Research Question
 
OME754 – INDUSTRIAL SAFETY - unit notes.pptx
OME754 – INDUSTRIAL SAFETY - unit notes.pptxOME754 – INDUSTRIAL SAFETY - unit notes.pptx
OME754 – INDUSTRIAL SAFETY - unit notes.pptx
 
AFCAT STATIC Genral knowledge important CAPSULE.pdf
AFCAT STATIC Genral knowledge important CAPSULE.pdfAFCAT STATIC Genral knowledge important CAPSULE.pdf
AFCAT STATIC Genral knowledge important CAPSULE.pdf
 
charting the development of the autonomous train
charting the development of the autonomous traincharting the development of the autonomous train
charting the development of the autonomous train
 
Generative AI and Large Language Models (LLMs)
Generative AI and Large Language Models (LLMs)Generative AI and Large Language Models (LLMs)
Generative AI and Large Language Models (LLMs)
 
李易峰祝绪丹做爱视频流出【网芷:ht28.co】可爱学生妹>>>[网趾:ht28.co】]<<<
李易峰祝绪丹做爱视频流出【网芷:ht28.co】可爱学生妹>>>[网趾:ht28.co】]<<<李易峰祝绪丹做爱视频流出【网芷:ht28.co】可爱学生妹>>>[网趾:ht28.co】]<<<
李易峰祝绪丹做爱视频流出【网芷:ht28.co】可爱学生妹>>>[网趾:ht28.co】]<<<
 
Technical Seminar of Mca computer vision .ppt
Technical Seminar of Mca computer vision .pptTechnical Seminar of Mca computer vision .ppt
Technical Seminar of Mca computer vision .ppt
 
Disaster Management and Mitigation presentation
Disaster Management and Mitigation presentationDisaster Management and Mitigation presentation
Disaster Management and Mitigation presentation
 

Final gatsby + wagtail - Inclusive product week

  • 1. Ethical and Accessible Stack Wagtail + Gatsby + Ethical Source Licenses + + +
  • 2. + Who Am I? + . . . . . . . . . . . . Django Engineer & Wagtail Core Team Member ● Software Engineer, React and Django Consultant at Rugby Street Designs ● Build enterprise tools for SMBs, NGOs, Black, Brown and Queer Enterprise ● Ethical Source Organizer Where you can find me: ● Twitter @DawnWagesSays ● DjangoCon(s) ● GlitterTech.dev ● http://DawnWages.info
  • 3. + + . . . . . . . . . . . . Feature-packed and fast React-based open source prgresssive web app generator Rich, frontend and optimized websites on a cloud platform Tools we’ll be talking about today! Django-based Content Management System 10.6K Stars on Github and just released feature-rich version 2.13 www.DawnWages.info || @DawnWagesSays Can we have it all? Exploring if a GatsbyJS + WagtailCMS could be a solution for small and medium clients and personal project. Fully automate your development set up Always ready to code, turn almost any repo into a prebuilt collaborative VSCode like dev environment in your browser. Query language on a single data layer Not tied to any database or storage engine and can “easily” combine multiple data sources
  • 4. + + . . . . . . . . . . . . A case study of sorts... React-based open source prgresssive web app generator Rich, frontend and optimized websites on a cloud platform Two powerful frameworks + two active communities Django-based Content Management System 10.6K Stars on Github and just released feature-rich version 2.13 www.DawnWages.info || @DawnWagesSays Content Management System A content management system provides a way for users to update information on their own. The developer equips the end user with “widget” like functionality and an admin login to update the website themselves. Progressive Web App Generator We’ve seen the rise of static-site generators in the past few years which take data content, provided in different formats, content and templates, processes them, and output a folder full of all the resultant pages and assets. Gatsby is different because it is written in React and outputs what could be an web app experience with stateful components.
  • 5. + + . . . . . . . . . . . . Removes the presentation layer of what would be a full stack framework and adds its own presentation layer. What is headless? ANSWER: Flexibility When you abstract all of your decisions away to the top level of your application, you have a single point of decision but also a single point of failure. www.DawnWages.info || @DawnWagesSays Everything is a trade off. ● By separating your frontend and backend, you’re able to put data into one big “bucket” in order to be more flexible with the way that you render your application. ● Hard to do “stateful” frontend components with static templating ● Can bring in other services from the headless infrastructure beyond just web apps. Eg. SMS messages, email, rules engines, data analysis all done in your backend language of choice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Frontend Backend Data Storage Development Environment
  • 6. + + . . . . . . . . . . . . and what the heck is a static site generator (SSG)? Why headless? www.DawnWages.info || @DawnWagesSays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Frontend Backend Data Storage Development Environment Icons made by Freepik from flaticon.com Data / Content Static Site Generator Website End Users Hosting BUILD TIME REQUEST TIME Wagtail uses the Model View Controller paradigm when it does not have a frontend. It has its own templating and view structure that leans into common web development patterns. When headless, we hand the “VC” to another framework, but still use django’s powerful model and migration, data management architecture that many node applications still wrestle with, we have out of the box! ...more data stores
  • 7. + What sets Gatsby apart? + 01 Accessibility Gatsby is passionate about making sites that work for everyone and gives tools to help your site be WCAG compliant. 03 Gatsby Themes + Starters Starters are pre-configured sites with specific functionality for an expressed purpose to start your site with: eg. Blog, portfolio, ecommerce, and you can customize from there. Themes take the configuration from the site to an npm package. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . www.DawnWages.info || @DawnWagesSays 02 Plugin Library Thousands of plugins from analytics, ecommerce payment and auth, CSS and UI, to accessibility, etc. The gatsby community authors new themes all the time. 04 Community The users of Gatsby are passionate about the product. Gatsby authors excellent guides and documentation, but so does the community. The resources for questions, help and seeing examples of what’s possible are easy to find.
  • 8. + What sets Wagtail apart? + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . www.DawnWages.info || @DawnWagesSays 01 Tight release cycle Wagtail just release 2.13 - we use a time-based release schedule, with feature releases every three months. 03 Made with Wagtail A showcase of sites and apps made with wagtail, their authors and should the site have open code, it’s can be included 02 Plugin Library Like Gatsby and Django, Wagtail has lots of plugins that make the ecosystem even more feature rich. From Authentication, C calendar,, Localization, Workflow, Inventory, ecommerce, image editing, etc. 04 Community Wagtail shows up at conferences, has its own Wagtail Space, hosts tutorials an active Slack and Twitter community.
  • 9. + + . . . . . . . . . . . . Pretty fast, and getting faster www.DawnWages.info || @DawnWagesSays So how fast is it to spin up a new site? ● Python 3.8 (3.9)** ● wagtail==2.10.1 (2.13)** ● wagtail-grapple==0.0.6.0 ● wagtail-media==0.6.0 ● graphene==2.1.8 ● graphql-core==2.2.1 ● graphene==2.1.8 ● Django==3.0.9 (3.2)** **Update to tutorial coming soon! http://bit.ly/wagtail-gatsby-latest-tutorial
  • 10. + + . . . . . . . . . . . . Here’s where you could describe open GitPod Steps www.DawnWages.info || @DawnWagesSays 001 002 003 004 005 006 007 008 009 010 ./manage.py startapp blog and update blog models pip install graphene, wagtail-grapple, wagtailmedia configure graphene and grapple in the base.py and urls.py for graphql and graphiql view Add graphene_django, wagtail_graphql, wagtaimedia, grapple and blog to INSTALLED APPS in settings.py file ./manage.py migrate ./manage.py runserver 8080 add new blog posts https://8080[gitpodurl]/admin navigate to https://8080[gitpodurl]/api/graphiql to test graphql’s endpoints npm i -g gatsby-cli to install gatsby globally gatsby new site https://github.com/tm-kn/w atail-graphql-api-gatsby edit cd site and gatsby develop to run the site front end 011 012 013 edit .env to connect gatsby and wagtail WAGTAIL_GRAPHQL_ENDPOINT=http://local host:8080/graphql/ VISIT YOUR SITE RUNNING IN DEVELOPER MODE AT PORT 8000! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  • 11. + Building projects + . . . . . . . . . . . . At The Root EST. June 2020 An Anti-Racist License for Open Source Projects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . www.DawnWages.info || @DawnWagesSays Radical simply means 'grasping things at the root',” - Angela Davis
  • 12. + + . . . . . . . . . . . . Anti-Racist Ethical Source License AtTheRoot.dev 001 What is an Ethical Source License? A new license that explicitly restricts use of open code on the basis of an ethics. At The Root www.DawnWages.info || @DawnWagesSays Icons made by Freepik from flaticon.com At The Root License Anti-Racist Check List At The Root Review Board
  • 13. + + . . . . . . . . . . . . A movement that started in 2018, gaining traction 001 Empowers open source engineers Be confident that you are creating code that will build a world you want to live in. Ethical Source Movement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Where next? www.DawnWages.info || @DawnWagesSays 002 Tech is not neutral, nor is it apolitical Regardless of how much we may want it to be, what we build and what we build it for is not neutral. 003 We’re building a movement Recently founded Organization for Ethical Source has full time member and partnerships with the Corporate Accountability Lab https://ethicalsource.dev/resources/
  • 14. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + + Where you can find me: ● Twitter @DawnWagesSays ● DjangoCon(s) ● GlitterTech.dev ● http://DawnWages.info Thank you! . . . . . . . . . . . . dawn@glittertech.dev