Emerging Tech Class Teaches Web Skills Through Hands-On Projects

IST 402
Start up?
Let's Tool up!
haxtheweb.org
elmsln.org

IST 402
#EdTechJoker
oer.hax.psu.edu
/bto108/sites/ist402
haxtheweb.org
elmsln.org

Hey everybody
btopro
<bee-tee-oh-pro>
here

Mexico City: iPhone vs. Android [OC]

Mexico City: iPhone vs. Android [OC]
https://www.reddit.com/r/MapPorn/
comments/d3scm4/mexico_city_ip
hone_vs_android_oc

(parts of class 1st day)
Welcome to IST 402!
“Who controls the past, controls the
future: who controls the present,
controls the past…”
- Orwell, 1984
Penn State
HAXTheWeb.org
Bryan Ollendyke
[at]btopro
Developer Activist

Let’s get some things
out of the way 1st

Q1: Is this class
about making a start
up?

This is learning about
the technologies
start ups are often
built on

Q2: Do I need to be a
1337 (leet) dev to
take this class?

This is about getting
”hello world” level skills by
doing hands-on labs

CIMG4000 by Scurzuzu, on Flickr, https://www.flickr.com/photos/scurzuzu/271232366
Now. To the brain eating part

Emerging technologies [w00t]
- The class I wish I had in college
- Expose you to the ideas and technologies
that make the web work
- We’ll help shape the topics of the class
together though the first month or two
is mapped out here
- Learn about the magic behind major web
platforms
- Learn how programmers work, not
necessarily coding outright, though
we will at times.
IST
402

Most importantly. We are
resources here for you!
(Use this, you pay for it. Literally.)

Who my IST 402 say they are (36)

But... Who the hell
are you?
(it’s weird he didn’t start there
isn’t it?)

- Loud / Yelly / friendly
- Dresses odd / wears hockey jerseys
- Loves my family
- I’ve never taught in a classroom..
- But I coached ‘10 National Champions
- Parents were both public school
teachers for 35 & 33 years
- Science (8th grade)
- Computer Programming (HS)
Bryan Ollendyke
”normal” Human

- 2X IST grad BS ‘08 MS ’15 of PSU
- I contribute 100% to FOSS projects
ELMS:LN and HAXTheWeb
- Lead developer on both projects
- A unicorn aka ”Full stack” dev
[at]btopro =
Developer

multi-million downloads of..
126+ Drupal Modules
461+ Web Components

- 20 Talks/trainings/interviews ‘18-’19
- Organized multiple Drupal / web
components events in Pitt, PSU, Duke
- 8x ~100 people
- IST Master of Sciences thesis in
“studying” Drupal adoption at PSU
[at]btopro =
Organizer

Large Land Grant University, 2007

Now
Which was the catalyst for..

- Our institutions & world deserve more
- Improve education, improve society
- Embedded in edu to development tech
society needs to shift beyond what
market norms can produce
[at]btopro =
Developer
Activists

{“[at]btopro” : new DeveloperActivist() }
typeof DeveloperActivist
undefined?

DeveloperActivist()
All code enacts change.
A DeveloperActivist writes code
to enact social change.

Establishing a larger purpose / context
- Edu / Tech unapproachable to all but 1%
- Tech operates without constraints
- Lack of constraints can lead to
destruction of social fabric,
addiction, lack of humanity
- We aren’t just here to learn, we are here
to enact change in society
- technology is a powerful change agent
#EdTechJoker

The web needs a
moonshot if we
are to ever grow
beyond the
vendors of 2000

HAX is my moonshot
To change publishing

35 issues opened as a result of this class! 21 closed already!

Establishing self as coach, not teacher
- Deconstructing notions of academic
- This outfit is intentional
- I started doing this 3 years ago
- My work / history / career was making me
unapproachable
- Attempt to break imposter syndrome
- Clothing and language choices..
- Approachable
- “Normal” person “just like me”
- I am them 13 years later
- Brand / marketing
- Helps LA is hockey player / IST undergrad
#EdTechJoker

[[date]] – <when-i-started-coding date=“1996”>

I made sites like this with a lot of practice by 1999
My HS summer project in ’99 from internet archive

I learned to code on a website like this ‘98 – ‘02
My dad’s Lesson plans from internet archive

So what classes did I
take to learn how to
do all these things?

Addressing their reality head on
- This degree puts you at the start line
- You are “special” because you will have a
tech centric degree or specialization
- But.. 10,000+ others will hit that same
“special” job market with you
- Fickle, but it might come down to
1 word that gets you a job or interview
- it may signal ~3 months less training
- We’re going to equip you with that 1 word
- “I know you can do this because I did!”
#EdTechJoker

static get classStructure(section) {
if (section === ‘2’) {
return [...this.lessons];
}
}

Course structure
- Micro-topics covering pieces of the web
- Course split into three larger themes
- Web fundamentals
- Brand, Git, HTML/CSS/JS, Web components
- CMSs
- GravCMS, WordPress, Drupal, HAXcms
- Action / Job role oriented
- UX iteration (HAXcms as transition)
* Accessibility remediation
* Accessible application design
* Docker / web infrastructure
* OER / Project lead recommendation
#EdTechJoker
* Guest speaker

#EdTechJoker
Assessment types breakdown
- 12 Labs, 10 pts/each, 120 pts (80%)
- Each week, started at end of class
finished prior to next class
- 1 mid-term, 15 pts (10%)
- ”open google” exam
- 1 Project, 15 pts (10%)
- Last lab extended into a pitch of how
they would create a solution for a
solution space given the skillsets
picked up in class

Structure of lesson each week
- Recap / examples / some feedback of
previous week based on their work
- Topic / terms
- What, Why, How, market need
- Live demo of technique / skill
- Activity where we both do it together
- Lab / open time to begin on the problem
space and ask questions
- Explainer Video as evidence
#EdTechJoker

Structure of my lesson each week
- Class Wed (3H), Lab and evidence due Mon
- I accept Tues / Wed without penalty
- I don’t give these feedback
- This is not spoken...
- Lab
- highly topic specific
- hands on skill / scenario driven
- Evidence methods (varies but typical):
- ~500 word writing piece
- ~5 minute explainer YouTube video
- Link submitted to Channel
#EdTechJoker

- Create a Slack account & join IST 402
- Create an identity as an IT professional
Lab details are on course website
- GitHub, YouTube, Twitter, LinkedIn
- Socials suggested but not required
- Create a screencast that’s ~5 min long
- Explain your brand and talk about an
interesting tech blog or article you’ve
read recently (just to jog the process)
- Post to #lab-1-brand-management in Slack
Lab 1

What we’ll do now
- See how my team uses GitHub / git everyday
- make a Pull Request against our course
content itself!
https://github.com/btopro/ist402
- Fork and do an in class activity
- Lab time fixing minor documentation
issues in some HAX related pages to get
our feet wet at what contributions
workflows look like in real FOSS projects
Lab 2
GitHub

What we’ll do now
- Mess with Inspector to modify psu.edu
- Play with and explore CodePen.io
- Fork a pen of mine that we’ll step
through it together
- Ask questions, this is just a foot
in the door to this topic and we’ll
be exploring other technologies and
related platforms as the semester
progresses
Week 3
In class
Activity

Lab
- Start modifying a pen to reverse engineer
a resume boilerplate
- Fork Reflection Pen
- write your reflection post there
- add a link to your video response there
Reflection topic (pick at least one)
- Explaining styling an element in CSS
- Explain how to use JavaScript and
getElementById to add a click event to
an element in an existing codepen
- Value of CodePen as a platform
Lab 3
CodePen.io
Accounts for
skillset and
EX diff 

Tools we use in
class that you
can use to teach
any number of
topics..

CMS section
2 weeks
$$$$$$
comparison UX leading
into
activism
Kicks off
Reclaim
Tour

HAXcms 2019 < 10 Experimental
Edu
GravCMS 2014 < 100 Docs
Edu
WordPress 2003 > 10,000,000 Small / Mid
NGO
EDU
Drupal 2000 > 100,000 Top level
Gov, EDU
Marketing
Name Age Community Industries

HAXcms 💰 🦑 < 0.0000001%
GravCMS 💰 💰 🦑 🦑 < 0.5%
WordPress 💰 💰 💰 🦑 🦑 🦑 33%
(of top 10 mill)
Drupal 💰 💰 💰 💰 💰 🦑 🦑 🦑 🦑 🦑 4% - 6%
Name Cost Complexity Popularity

hax.psu.edu
oer.hax.psu.edu/bto108/sites/ist402/

Do you like the hybrid lab / open platform
submission approach and would you want
other courses to do things in this “YouTube
brand” style or is it obnoxious and you’d
rather keep work closed off?
34 yes
- 1 felt it was time consuming
“I like it, sometimes the video thing can
get annoying every week but this is my
favorite class by far”
1 felt hard to “pick a brand”
1 felt 3x a week would be better suited
3 felt might be difficult to scale to all
classes or topics
Midsemester
survey

“I enjoy using youtube because it helps me
explain using my words like I would in an
interview”
“I think it’s a really good approach.
Doesn’t feel like busy work”
“I like using Youtube. It forces me to
think and explain what I’m doing”
Midsemester
survey

“It’s something cool/different and I think
it’s given me a new hobby”
“I think it is a good way to show what we
learn and to get ourselves out of our
comfort zone”
“It helps me think outside my coursework
and allows me to get creative”
Midsemester
survey

“It helps me understand the topic better
and improves my speaking skills. It makes
me feel more confident with my opinion on
tech topics”
“It’s non-traditional but seems to fit a
21st century society. I have been learning
so much from the hands on experience. Most
other IST classes are definitions and
overviews”
Midsemester
survey

What I think can transfer to other courses
- YouTube explainer series approach
- Students like it as practice of public
speaking without being in front of people
- Imagine if this was integrated across
large parts of the IST curriculum
- Some really running with the idea
- Yes, others do bare minimum, oh well.
- Alternative submission format: unlisted
or private video, some do on Box/Drive
Wrap up

What I think can transfer to other courses
- web services utilized to teach tech
to varying tech audiences can scale and
does not have issues with student exp:
- Reclaim hosting (cheap, $30/year)
- codepen.io (fork, break to learn HTML)
- glitch/stackblitz (fork full front-end)
- Play with docker (4 hour container)
- hax.psu.edu (PSU service...)
Wrap up

What probably can’t transfer as well
- My style. I believe in my work and as a
result can often inspire others to follow
along out of attacking status quo.
- Many things might only work because these
are juniors / seniors and thus thinking
about how to present themselves in
interview form
- The many small topics approach is most
likely novel but impractical for other
topics.
Wrap up

What needs clean up / refinement
- Students have put more effort into the
scenario based assignments
- Web components assignment I did a poor
job explaining (which made me put more
into the scenarios)
- I need to make the accessibility portions
more robust
- The course is an entry into the ideas of
many things (good/bad)
- Many asking for more Docker then I can
actually cover
Wrap up

My recommendations ”As a web developer”..
- Stop silo’ing programming. No one sees
themselves as programmer until forced to
- Most web devs I meet have no formal
training in CSE. Many from iSchools or
humanities
- HTML is the most approachable language
and can be taught to anyone
- CSS is then how to style HTML
- JavaScript is then how to make HTML
interactive
Wrap up

The future is entirely web
- Web components are object oriented JS
that let you build new HTML tags. They
are going to create a revolution in web
- Electron / Ionic let you compile
HTML/CSS/JS to native phone and desktop
applications.
- VSCode editor is built out of HTML
- Github Desktop is built out of HTML
- updated Twitter is a PWA
- WASM (Web Assembly) allows compiling
any language with browsers able to handle
in a localized Virtual machine
Wrap up

Building the future of the web
- If your interested in teaching via HAXcms
reach out to me or email hax@psu.edu
- We are currently in a closed pilot but
every student in my class knows how to
get in now so it’s not like we hide it
much ;)
Wrap up

Questions?
Critique?
Bryan
Ollendyke
[at]btopro
hax@psu.edu

Emerging Tech Class Teaches Web Skills Through Hands-On Projects

Recomendados

Recomendados

Más contenido relacionado

Similar a Emerging Tech Class Teaches Web Skills Through Hands-On Projects

Similar a Emerging Tech Class Teaches Web Skills Through Hands-On Projects (20)

Más de btopro

Más de btopro (20)

Último

Último (20)

Emerging Tech Class Teaches Web Skills Through Hands-On Projects

Notas del editor