Define skills under 'Coding / Scripting' competency for v1.5

[dajbelshaw]

Coding / Scripting Creating interactive experiences on the web

• Reading and explaining the structure of code
• Identifying and applying common coding patterns and concepts
• Adding comments to code for clarification and attribution
• Applying a script framework
• Querying a web service using an API

---

Proposed:

• Reading and explaining the structure of code

---

See spreadsheet at http://goo.gl/R1tjj3

[jgmac1106]

There was a comment to change:

• Reading and explaining the structure of code

to

• Reading, writing and explaining the structure of code

[gaditb]

Okay, but when dealing with it, I want us to be sure to emphasize the difference between "scripting" and "programming something big". Like, our target audience is people making their own websites -- to be "literate" in making your own website, you'll be mostly doing stuff like "onclick="$('.hiding_stuff').show()", and not, say, writing anything like the entire jQuery framework or a node.js application.

Also, we probably want that to be "understanding the structure of code" -- explaining it to other people is not necessary.

Additionally: "Composing working loops and arrays" is... not necessary. That will come with "reading code", and we especially don't need to cover it here -- that's a specific skill within "learning a programming language", that doesn't do much without other parts of the programming language, and it doesn't fit in the same list as things like "using a scripting framework". It's the wrong level of abstraction.

[jgmac1106]

Maybe we just stick with:

• Composing working loops and arrays
• Reading and explaining the structure of code

Since composing working loops and arrays is "writing" code.

[dajbelshaw]

Yep, suggest we go with four:

• Reading and explaining the structure of code
• Using a script framework
• Adding code comments for clarification and attribution
• Composing working loops and arrays

[dajbelshaw]

On the 16th March half-hour hack call, we changed the second of these to:

• Applying a script framework

Still some questions before we consider this done. What do people think?

[gaditb]

I still think "composing working loops and arrays" is way to specific. If you were trying to enumerate all the skills used when driving a car, you'd have "working the stereo system", not "turning the volume up or down when listening to talk radio".

I mean, unless there is something very specific about loops and arrays that isn't just "there a big part of basic imperative programming" that I'm just missing.

... Also, (-facepalm-) "using APIs-and-callbacks-and stuff and external services to get info." (obviously not phrased like that) We definitely need to talk about APIs.

[dajbelshaw]

Thanks @gaditb - I guess we're looking for something reasonably well-defined that people could create activities around? What would you suggest that would replace the loops/arrays skill? :)

Regarding APIs, how about:

• Querying a web service using an API

Probably needs finessing!

[jgmac1106]

Going to ping @chadsansing on this as he teaches coding to young students.

On Tue, Mar 17, 2015, 6:41 AM Doug Belshaw notifications@github.com wrote:

Thanks @gaditb https://github.com/gaditb - I guess we're looking for something reasonably well-defined that people could create activities around? What would you suggest that would replace the loops/arrays skill? :)

Regarding APIs, how about:

• Querying a web service using an API

Probably needs finessing!

— Reply to this email directly or view it on GitHub https://github.com/mozilla/webliteracymap/issues/29#issuecomment-82265828 .

[jgmac1106]

I spent some time reading lesson plans from Scratch and other kids can code objectives. Base on what I saw I would respectfully disagree with with @gaditb they all have basic lessons on loops and arrarys.

The other basic lessons all these include, and we do not speak to explicitly, are boolean logic.

[chadsansing]

APIs definitely merit consideration. Great catch, @gaditb. While I'm not sure what a 'scripting framework' is, I'm sure it would make sense if I knew. Is a framework a language? A function? A space within another document (like a webpage) in which a script or link to a script fits?

I try to work on concepts that cross languages with my kids. The big ideas we use to go from language to language and/or platform to platform are variables, functions, conditionals, loops, arrays, and boolean logic. Those ideas are generally new to my kids. They are new, procedural ways for kids to think and problem solve. For me, the metaphor here isn't that the syntax of loops, arrays, and, say, logic of a particular language are the stereos, glove compartments and door handles of a car, it's that in general, loops, arrays, and, say, logic are the locomotion, materials science, and guidance systems that go into conceptualizing any car.

Explaining/summarizing is also a pretty effective way of learning and assessing learning in schools in that it can ask kids to make meaning, rather than to accept something assigned to them as given.

Maybe something like the suggested second line here would work?

• Reading and explaining code.
• Identifying and applying universal coding concepts across languages.
• Adding comments to code for clarification and attribution.
• Querying a web service using an API.
• Applying a script framework.

While that second line is pretty big, it lets mentors play to their strengths and their learners' strengths in teaching the construction of loops, arrays, conditionals, etc. and the interactions between them. If I had to name two or three concepts specifically, I would pick loops, arrays, and Boolean logic.

[gaditb]

@chadsansing : A scripting framework is a, well, framework -- code and design patterns and stuff -- for making web applications and interactive web pages. A set of building blocks. On Wikipedia (Content note: Unnecessarily complicated language)

I like the more general phrasing of "Identifying and applying universal coding concepts across languages". I'm thinking maybe not necessarily "across languages", though? I feel like, in the concept of Web Literacy, we can just focus specifically on Javascript?

So maybe "Identifying and applying common coding patterns and concepts"? And, like @chadsansing said, in teaching it will come the loops, arrays, logic, and whatever else the specific teacher knows very well and considers very important -- abstraction, objects, recursion, whatever.

[jgmac1106]

I like @gaditb edits of @chadsansing's suggestions. I wanted something that got at computational thinking and this does both plus it encompasses many concepts.

On Tue, Mar 17, 2015 at 7:30 PM gaditb notifications@github.com wrote:

@chadsansing https://github.com/chadsansing : A scripting framework is a, well, framework -- code and design patterns and stuff -- for making web applications and interactive web pages. A set of building blocks. On Wikipedia https://en.wikipedia.org/wiki/Web_application_framework (Content note: Unnecessarily complicated language)

I like the more general phrasing of "Identifying and applying universal coding concepts across languages". I'm thinking maybe not necessarily "across languages", though? I feel like, in the concept of Web Literacy, we can just focus specifically on Javascript?

So maybe "Identifying and applying common coding patterns and concepts"? And, like @chadsansing https://github.com/chadsansing said, in teaching it will come the loops, arrays, logic, and whatever else the specific teacher knows very well and considers very important -- abstraction, objects, recursion, whatever.

— Reply to this email directly or view it on GitHub https://github.com/mozilla/webliteracymap/issues/29#issuecomment-82639376 .

[dajbelshaw]

So it sounds like we might be happy with the following:

• Reading and explaining the structure of code
• Identifying and applying common coding patterns and concepts
• Adding comments to code for clarification and attribution
• Querying a web service using an API
• Applying a script framework

I feel it's important to talk about the structure of code. How do those five skills look to everyone? :)

[jgmac1106]

I am fine with these skills though I think we agreed first skill is reading, writing, and explaining structure of code.

Gets my vote.

[chadsansing]

Thanks for the very helpful explanation, @gaditb!

On Tue, Mar 17, 2015 at 7:30 PM, gaditb notifications@github.com wrote:

@chadsansing https://github.com/chadsansing : A scripting framework is a, well, framework -- code and design patterns and stuff -- for making web applications and interactive web pages. A set of building blocks. On Wikipedia https://en.wikipedia.org/wiki/Web_application_framework (Content note: Unnecessarily complicated language)

I like the more general phrasing of "Identifying and applying universal coding concepts across languages". I'm thinking maybe not necessarily "across languages", though? I feel like, in the concept of Web Literacy, we can just focus specifically on Javascript?

So maybe "Identifying and applying common coding patterns and concepts"? And, like @chadsansing https://github.com/chadsansing said, in teaching it will come the loops, arrays, logic, and whatever else the specific teacher knows very well and considers very important -- abstraction, objects, recursion, whatever.

— Reply to this email directly or view it on GitHub https://github.com/mozilla/webliteracymap/issues/29#issuecomment-82639376 .

[jgmac1106]

• Reading, writing, and explaining the structure of code
• Identifying and applying common coding patterns and concepts
• Adding comments to code for clarification and attribution
• Querying a web service using an API
• Applying a script framework

Lets vote on these.

[dajbelshaw]

Hmmm... so I still have a problem with Reading, writing, and explaining the structure of code - mainly because it's so generic that it might as well be the competency descriptor!

Flow could be something like (these are not skill descriptors):

1. Read code (understand how it's structured, etc.)
2. Tinker with some code and see what happens
3. Add comments to document changes
4. Use a script framework to create something awesome
5. Query an API to build a simple app

I think we're there. I'm not going to throw my toys out of the pram, but I really don't see the need for 'writing' in the first skill descriptor.

[LauraHilliger]

/me agrees with @dajbelshaw – read + explaining should be enough. "Writing" code structure gets hairy b/c different languages have different indentation & spacing syntax as do different coders/organizations. I would say if you can read through a bot of code and explain why the bracket is there and not there, you're pretty literate. Writing != Copy/Paste IMHO.

Should I :microphone: drop again? I like that one :dancers:

[dajbelshaw]

LAURA HATH SPOKEN.

[jgmac1106]

Nice moved from favicon to gifs. I vote we close it.

[dajbelshaw]

So, just to be clear, unless anyone spits the dummy, we're going with:

• Reading and explaining the structure of code
• Identifying and applying common coding patterns and concepts
• Adding comments to code for clarification and attribution
• Querying a web service using an API
• Applying a script framework

Any thoughts on ordering? :)

[jgmac1106]

Just switch the last two. Based on listening to everyone speak Greek about APIs and frameworks it seems most APIs folks query will be a "script framework" they find somewhere else.

[gaditb]

@jgmac1106 In that case people (including me, probably) have just been kinda sucking at explaining what an API is, no offence.

An API is just some other website that you get information from. So, like, this is "Querying a web service using an API (A Tumblr block-a-specific-person-from-your-blog script): (I'm assuming with this that you sort of know how to read code a little? Sorry if I'm being rude and overassuming.)

<script type = "text/javascript" src="http://l2.io/ip.js?var=ip"></script>
<script type = "text/javascript">
    window.onload = init();
    function init() {
        var blocklist = ["x.x.x.x"];
        for (var i = 0; i < blocklist.length; i++) {
            if (blocklist[i] == ip) {
                document.body.style.background = "white";
                document.body.innerHTML = "<br/><br/>Get off my blog.";
                //window.location.replace("http://www.republiquedesmangues.fr/");
                break;
            }
        }
    }
</script>

The using-the-API part is just the first bit:<script type = "text/javascript" src="http://l2.io/ip.js?var=ip"></script> -- that just uses the web service http://l2.io/ip.js to get the visitor's IP address and put it in the variable named ip, which is then used in later code. That's it. That's APIs. (Well, there's more complicated stuff where you ask for specific information. And where you let the program decide what information to ask for. But that's the basic "what is an API" thing.)

---

I would also like to say, as an aside, that while "Writing != Copy/Paste", definitely, Copy/Paste is not emphasized enough in most learn-to-code things. Copy/Paste/Tweak is one of the best ways to learn HTML, CSS, and Javascript (any scripting, really), IMO.

Then you can learn structuring and proper form. But first, you need to learn that you can do something at all.

[dajbelshaw]

I would also like to say, as an aside, that while "Writing != Copy/Paste", definitely, Copy/Paste is not emphasized enough in most learn-to-code things. Copy/Paste/Tweak is one of the best ways to learn HTML, CSS, and Javascript (any scripting, really), IMO.

Agreed!

I'm ambivalent about changing the order of the last two. What do people think about the following order?

• Reading and explaining the structure of code
• Identifying and applying common coding patterns and concepts
• Adding comments to code for clarification and attribution
• Applying a script framework
• Querying a web service using an API

+1 from me. Others?

[jamiea]

+1

(Also agree about Copy/Paste, IMO one of the great things of the digital age! )

[jgmac1106]

I like this as well and as someone who doesn't know any code copy/paste is only way I can publish websites.

[jgmac1106]

@gaditb thanks!

[chadsansing]

+1. C

On Fri, Mar 20, 2015 at 7:09 AM, jgmac1106 notifications@github.com wrote:

I like this as well and as someone who doesn't know any code copy/paste is only way I can publish websites.

— Reply to this email directly or view it on GitHub https://github.com/mozilla/webliteracymap/issues/29#issuecomment-83987278 .

[jgmac1106]

Hey @gaditb How do I display code without it rendering?

[jamiea]

Wondering if @gaditb has thrown the "Hail Mary" with his Copy/Paste comments?

Just had a quick look around and it seems that copying & pasting from/onto the web via clipboards has some pretty powerful and increasing functionality.

A last minute Remixing skill?

[dajbelshaw]

@jamiea: worth considering, although I think that what @gaditb describes is probably covered by Identifying and applying common coding patterns and concepts.

Thoughts? I certainly don't want to re-open Remixing unless we have to... ;)

[jgmac1106]

It is covered under

• Identifying and applying common coding patterns and concepts

Copying and pasting is the dominant means for applying these patterns, but there are others. I think it is worthy of mentioning in the Tips section of curriculum when written.

To me this gets at how I have learned, am learning, and teach html/css code. If you stare at it long enough you find patterns in the poetry to poach.

[dajbelshaw]

OK, I think we're over-rotating at this point.

I've updated the overview and am closing this. Feel free to comment if you think it should be re-opened!

[gaditb]

Yeah, the Copy/Paste/Tweak comment was more about how coding/scripting is taught in general, not any suggestion for the Map.

@jgmac1106 : The "Markdown Supported" text-and-symbol on the top-right of the editing box is actually a link to what Markdown they support. Code is done with backticks (above the Tab key) -- inline code is surrounded by single backtick and for a block you put three backticks before and after. (I... can't figure out how to type code involving backticks, though...)

((Also, minor thing, though: "her Copy/Paste comments", not "his". I'm a "her".))