Webcraft 101 Challenges
high level goals:
- existing challenges are TOO easy, not technical enough
- want to build towards a portfolio
- webcraft == WEB development
- people should be producing things
- would be kind of nice if challenges built on each other (or at least had the
option to do so)
- integrate peer collaboration as possible
observations/suggestions:
- it's not a school of programming, it's a school of webcraft. there's tons of
sites and free resources out there already that help people learn to program.
our challenges should focus on getting them to USE those skills, at various
levels of experience, in web-related activities. to give them a web-lens on
their skills.
- what's missing? a) providing concrete ways to put those pieces together with
a learner's interests simplifies the learning process while avoiding purely
procedural repetition. also getting feedback and learning with a community of
peers.
- unlock a forum of others who have completed the challenges - Really like this idea (JB) See Alex H's comments in chat (and copied at the end of this pad)
- mentorship/community/peer-learning: can ask questions of others who have
already arrived here.
- a bit like an alumni network, where you shared this experience and can help
you find others of common interests, skills. (The time-based piece of this is important. If you can create bottom-up, organic cohorts that would be ideal.)
- comparison (cf. project euler) - how did others solve the problem?
components of a good challenge (awesome list from chloe)
- simple "setup" (easy to understand) -complex problem
- clear, tangible goals
- giving them a role
- need to know: reputation, personal interest, etc.
- embedded assessment/feedback
- achievements are meaningful
- risk taking/exploration
- scaffolding
- tool/something to unlock?
- fun/playful aspect?
- agency (choosing the content/web service/problem to apply the challenge to)
webcraft 101: categories of skills. focus on exposure and application.
- programming, control logic, data structures
- design (layout, css, assets)
- APIs (both a cateogry and great way to tie all the other categories
together...)
- basic server configuration, project deployment. (? maybe? is this 101? or
maybe early 201?)
- data processing, databases, storage
- participation in the open web ecosystem: posting blogs, sharing code,
participating in forums, mailing lists, submitting bugs, submitting patches.
additional cultural exposures and supporting skills
- command line - definitely worthwhile (JB)
- text editors (version control? I wonder how early git can be introduced. -AH)
- following technology developments - know what's out there to use for tools +
get ideas from what others are developing (eg. readwriteweb, techcrunch,
etc.)
- attend/organize a hackathon - attending is much easier than organizing... there should be badges for both. (JB)
- reading code (commenting code / self-documenting -AH)
=============== CHALLENGE IDEAS ==============
strongly advise using jsfiddle.net in your challenges, I've done some lessons with people and it works really well for newbies. Gets them up and building really fast. (JB)
overall arc of 101 challenges (to incorporate categories above)
- pick an editor (and use it!) - how hard is this really? Maybe it's more of a getting started task/pre-requisite (JB)
- retrieve remote documents (API) (json/xml formats...)
- parse them in a for loop of some kind (skill: programming)
- apply some kind of condition to them (skill: programming)
- save the data somewhere that it can be easily queried (skill: storage, maybe basic sysadmin)
- create a user-facing web page for the data (skills: css, UI/UX)
- could be complex/simple, depending... JS, python, ruby, html... get to
expose ideas of dynamic content, the fact that html is not dynamic content,
how to get dynamic content from a script into a document that can be
displayed by the webserver.
- deploy the site (deployment, system admin/interaction, command line tools, etc.)
- benefits: can be done multiple times in different languages, with different
search terms, etc. - Repeating in different languages is great, unlock a badge for each language? (JB)
programming challenge
- general approach: let user choose APIs (of interest to them) from which to
get data. they'll use this info to apply basic/core programming skills.
- leverage the tools out there (free resources/books/sites on intro programming)
- make it clear that the first ones might take some trial and error, that's ok!
- language is up to them but would suggest/recommend one of ruby, javascript,
or python
- sources with very broad and dynamic data, have both json/yaml and xml
response formats:
- twitter API - receive latest public tweets with a specific hashtag.
- times newswire API: http://developer.nytimes.com/docs/times_newswire_api
- wikipedia API:
http://en.wikipedia.org/wiki/Wikipedia:Creating_a_bot#APIs%5Ffor%5Fbots
(probably a little harder, feel like it's not as clearly documented--
should look into it more before suggesting it). - you can access the docs by hitting the api with a browser. Very detailed docs, but not the easiest to read/navigate (JB) And a great way to alienate the WP community. Bad bots (WP or other) can be very bad :( (AH).
- choose a search term or criteria, think about what documents you want to
retrieve
- provide some speciifc guidance here for people who don't have their own
idea yet: ie, a search term related to a current event, a specific
interest... We should provide an example implementation that is funny, easy to understand, and still covers all the key points (JB)
- read the API docs, register for an API key if necessary.
- start programming. with your editor of choice, open a new file in a directory
for your project. it can be anywhere on your machine... explain what a directory structure is? maybe we can assume they know this already. (JB)
- in your language of choice, retrieve and parse your documents:
- read about how to make an HTTP "GET" request in your language of choice
(insert helpful/descriptive text/links about http, what is a get request,
how it works, etc. here... maybe link to john's webmaking 101 stuff)) - GET / POST / PUT / DELETE - I think this is a good place to include a video explaining that the web is client/server and that web pages are documents. Browser requests include VERBS that tell the server what to do. (JB)
- determine the URL that you want to call. this will be determined by the
docs for the API and the features of the API that you want to use.
- make note of what format will you request the response in? why? - give a few example formats (XML, JSON, CSV) (JB)
- set up the HTTP call
- retrieve the data
- using a for-loop, iterate over the documents your API call retrieved and
pull out the data/body, and any of the included metadata that interests you.
- you will need to create one or more variables to store this extracted data! - Some langauges require variable declaration and typing... does yours? (JB)
- how many documents did your call retrieve?
- print out some information about the retrieved documents, and/or the
documents themselves, to the command line. play around with formatting, and
consider different statistics you might want to present to the user. how many documents were retrieved? at what time of day?
- Sort your results by date / title (JB)
- bonus? instead of hard coding the search term, let the user specify the
search term as input once your script is running.
- what is the output? post the code to a public code repo? blog about it? - recommend github (JB)
- badges? logic, APIs, web plumbing (HTTP)? (Comments in Chat- AH)
storage challenge:
- instead of printing out, save it to a local data store
- mysql, nosql...
- will probably involve local installation (avoid server installation for now,
but still a bit of sysadmin/configuration exposure) (learning to configure your machine to do some of these things ends up being more complex than learning to do them on a remote server in my experience - AH)
- what fields from the retrieved data do you want to save?
- there may be other fields you want to add too-- perhaps retrieval time, user
who did the search, search term, etc.
- demonstrate saving it and subseqently retrieving it, perhaps by doing a query
over multiple saved documents.
- output:
- badges? configuration, database-something-something
data challenge
- the learner can then compare/have an understanding of what it means to use an
API versus download data, pros and cons of each
- can relate it back to the search term or theme from API challenge
- use their data storage experience (from data storage challenge, above) to
store the data, and realize they have to figure out how to store and retrieve
data from different sources with different fields.
- sources:
- infochimps: infochimps.com
- world bank data: data.worldbank.org
UI/UX challenge
- design a very simple layout or use a template?
- need a SUPER simple web framework for ruby and python (not needed for JS)
Ruby - Sinatra
Python - Flask
UI/UX - Twitter Bootstrap / 960.gs
Code Re-use / reading code challenge
- find someone *else's* webcraft 101 programming challenge, and build your own
UI for it. (how do we bootstrap this when there are no examples yet? (JB)
- chance to read code
- appreciate importance of documentation (or lack thereof)
- person whose project you pick gets the benefit of having someone critique
their project.
(Really important to get at this
======================================
other challenge ideas (still 101-level but aren't necessarily part of the "arc"
described above)
=======================================
UX: really like this one, could go be any site, not just sites from webcraft (JB)
- go through existing sites and critique them from a UX perspective. what is
the site's goal? are you enabled in accomplishing that goal by the layout of
the content? are the action buttons clear? can you find what you need? can
you identify a clear path through the site? etc...
- write up a critique, using some web tool that lets you annotate screenshots, publish a blog post on it.
- find a site you like but that doesn't do this well. mock up a wireframe,
using one of the many online wireframing tools, that tells a new story for
this site. document how the missing actionable items/navigation/paths through
the site are implemented by your design.
- do a mini user-study. show the layout to someone, ask them what they think
its purpose is, if they understand it, like it. accept their feedback
graciously :). - this is also a great task, I think we'd need an example and a couple videos (JB)
So, I guess my fear in the above is this feels a lot like UX-light. Maybe that's the formalist/old-school in me talking, but I would worry that this encourages a very superficial idea of both UX and user studies. I would split these into separate challanges with a bit more of an expectation in the spec. E.g., an IA task, a UI design task, a user study, etc. -AH
Comments from Alex:
November 21, 2011
15:45Alex H.: Just to note, I like the idea of unlocking a forum too.
15:45Alex H.: That said, there is a balance to be struck between transparency and peer pedagogy.
15:46Alex H.: I survived my math courses by flipping to the back of the book and working backwards. Which (and I doubt I was alone) was better than working through the solutions in the "teaching" part of the book.
15:47Alex H.: You want people to figure stuff out on their own, but it's also good to have a model.
15:47Philipp: Could be that the forum is read-only until you unlock the ability to post?
15:48Alex H.: To take a counter-example, I was pretty surprised at how the Zen-influenced Japanese arts--particularly tea ceremony and flower arranging, and sushi prep by extension--are based on modeled behavior.
15:48Alex H.: Philipp: yeah, that makes sense.
15:49Alex H.: (Judo is the exception to this, and a heavily western influenced mediation of the standard.)
15:49Alex H.: But for flower arranging, for example, your aim is to *exactly* duplicate a master model.
15:50Alex H.: That seems like (a) a really boring way to study and (b) lame.
15:50Alex H.: But it's hard to argue with results, which they do produce.
15:50Philipp: Nothing says mastery like a fine flower arrangement.
15:50Alex H.: Now, mastering the flow of ink to write a perfect, expressive, artistic character is different than coding.
15:50Alex H.: You can't copy-paste flower/tea/calligraphy.
15:51Alex H.: You can copy-paste math. Kids do it all the time and learn nothing.
15:51Alex H.: And writing code wrong is actually a really good way to learn.