Dawn Wages for San Jose's Inclusive Product Week 2021

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