Webstock 2016

In January this year I applied for a scholarship to attend Webstock 2016 in mid February. I had seen information about the scholarship a few weeks before I applied but I wasn’t too sure if Webstock would be good/useful to go to being a very new developer. I didn’t actually really know what Webstock was all about.

Screen Shot 2016-06-18 at 10.25.50 PM.png

Then I came across this post by Natasha Lampard. Makes for fascinating reading. And so I applied and gained a scholarship to attend Webstock.

Having attend a few different conferences while teaching (Ulearn comes to mind), and having attended WDCNZ in 2015, I had an idea of what a large scale conference would be like.

However, Webstock is run differently. There is one stage, one stream of presentations, no smaller venues for different speakers or multiple themes. One stage, one presenter about every half hour. So actaully quite different to other events.

And what a mixture of speakers. From Luke Wroblewski talking about Screen Time (the kind of thing I was expecting) to Annie Machon who is a former MI5 intelligence officer-turned-whistleblower and Cindy Gallop telling us Why The Next Big Thing In Tech Is Disrupting Sex.

I think there was something for everyone in the eclectic mixture of speakers.

I think all the talks will be up sometime soon at http://www.webstock.org.nz/talks/, there is already six years of Webstock talks up to view (if I could only take a month off and watch them all!).

Screen Time

Luke Wroblewski – www.lukew.com

Screen time used to mean sitting in front of a TV. Today we move between screens of various sizes, proportions, and quality all day. The abundance and diversity of devices can overwhelm teams delivering software. We need practical ways to tackle the problems that come with this diversity of screens. Luke explores a deeper understanding of screen time today and ways to design effective cross-screen experiences for tomorrow.

Here is a link to his talk, not the one he did at Webstock but the same talk (with slides, handy!). He talked about history of glass and four things to consider 1. know your screen, 2. output, 3. input, 4. posture. One thing I didn’t know is that you can get a lot of data about users and what devices they have via your website and apps and from that you can then tail content for them.

The Map and The Territory

Ethan Marcotte – ethanmarcotte.com

When we create for the web, we participate in a kind of public art. We code, we design, we build for an audience, making digital experiences that provide a service, that create joy, or that simply connect readers with words written half a world away. But in this session we’ll revisit what we’ve learned about responsive design, and ensure our content, not just our design, is readily accessible to them wherever they are. In doing so, we’ll look at some ways in which our audience reshapes the way we think about our medium, and see where they might be leading us—and the web—next.


This talk started off with looking to the past and the mapping of Manhattan. Ethan coined the term “responsive web design”. He talked about the digital divide and how in parts of the world most devices a sub 3G and that this will change the way people design sites. The idea of “good design” will change. It also look at the performance budget, reducing and revisiting, pages should not weight more then 300kbs, and to consider loading speed? 

This shows how much I have yet to learn. As I don’t even know how to figure out how quickly a page loads, how fast it is, what things effect it (besides image sizes!).

CSS Wizardry

Harry Roberts – csswizardry.com

For his Webstock presentation, dressed as a wizardHarry will perform an interpretive mime cycle, translating the array of human emotions in architecting, writing and scaling CSS for large sites, apps, and products in large-team environments.

His silent exercises, which include such classic works as the cage, walking against the wind, the mask maker, and satires on everything from sculptors to matadors, have been described as works of genius.

I was looking forward to this talk about CSS, however, due to it being a non-technical audience, Harry changed the focus. He talked about doing lots of travelling and talking at conferences. Some interesting travel tips like using a different card to keep the power on in your hotel room when you go out.

Did a Google search to find a presentation of his, What Is A CSS Framework Anyway?, from Industry Conf, and slides https://speakerdeck.com/csswizardry/what-is-a-css-framework-anyway. Haven’t watched it yet.

Adaptive Content, Context, and Controversy

Karen McGrane – karenmcgrane.com

In 2016, “adaptive content” has become a buzzword. To some, it’s a complex, long-term initiative to structure content for flexible reuse and dynamic targeting. To others, it’s a way to ensure that everyone, everywhere, sees exactly what they want—like magic! In this talk, Karen shares her perspective (and reservations) on how adaptive content is being used today. She’ll discuss how adaptive content supports targeting content to device type—and why that’s rarely necessary. She’ll also describe ways that adaptive content can support tailoring content according to context—and ways that can go wrong. You’ll walk away with a better understanding of when adaptive content is necessary and how to get the most value from it.

This was good. Difficult for me to describe as by this point if the day I decided just to soak everything up and didn’t take many notes. I will definitely be watching this when the videos come out. In the mean time, here is one from her site https://karenmcgrane.com/2012/09/04/adapting-ourselves-to-adaptive-content-video-slides-and-transcript-oh-my/.

Bug Fixes & Minor Improvements, Writ Large (aka Humorous Self-Flagellation and the Multiple Benefits of Being Old On The Internet)

Anna Pickard – annapickard.com

Somehow, improbably, the release note — that little space used by apps to describe their latest updates – has become a remarkable, human way for the creators of software to communicate with their users, and Slack (where Anna words*) has been at the forefront of the movement to turn that microcopical nugget of technical documentation very few people bother reading into (basically) a new literary genre. This little revolution didn’t happen by accident though: it’s the result of a fortunate series of events, a short list of values about how to behave as a company, and a long trail of people feeling out what it means to be oneself on the interweb.

This was a great talk and I now read all the release notes for Slack. If you are involved in writing well worth a watch.

Why The Next Big Thing In Tech Is Disrupting Sex

Cindy Gallop – @cindygallop

The tech world welcomes, supports and funds innovation and disruption in every area of our lives and work – except one. Join Cindy Gallop, founder & CEO of http://makelovenotporn.com/, for a provocative, insightful and revelatory examination of what constitutes sextech, how it can bring about world peace, the battles she and other sextech entrepreneurs fight every day to build their ventures, the huge amount of money there is to be made, and why New Zealand has a unique opportunity to become a global hub for sextech.

Now this was a talk that I wasn’t expecting at a tech conference (although, I learnt that Webstock isn’t really a tech conference). This was a fascinating presentation. Here is her talk at TED a few years ago – http://blog.ted.com/cindy_gallop_ma/

That’s my brief (and rather late) blog post about Webstock ’16.

As I was writing it I started thinking about professional development in the developer world. My next post will be about this.


HTML Forms – Treehouse

So, have now completed the HTML Forms course in the Front End Web Development track on Treehouse. This course has three stages – Form Basics, Organizing Forms and Choosing Options. This was a nice short sharp course as it took me less than two hours to complete. I enjoyed the coding for the form we made.

Screen Shot 2015-02-16 at 5.05.34 pm

Even though it won’t do anything as I am far away from doing anything with a server side program, it has been cool to create something that people can enter information into. The look of the form comes from the CSS, which was already set up. One of the suggested extensions is to play around with the CSS for the form, as form elements apparently often do odd things! This is what it would look like without any CSS.

Screen Shot 2015-02-16 at 5.17.57 pm

Through most of the courses as well there links to useful resources. For example, for the HTML Forms course the links to the MDN HTML forms guide. As well as specific pages in this guide when I video was focusing on it.

Another part of how Treehouse works I am really enjoying. It appeals to my need to like to have evidence of what I have done. When you complete a stage/achievement it gets added to your profile. Here are the three achievements (stages completed) from the HTML Forms course.

Screen Shot 2015-02-16 at 5.06.27 pm

Also as your work through the different courses you get points for the quizzes and code challenges that you complete. These are then displayed on your profile page as well as on every page you are on, next to the picture of yourself.

Screen Shot 2015-02-16 at 5.23.28 pm Screen Shot 2015-02-16 at 5.25.02 pm

I like this as it shows me how I am going and there is always something more to achieve!

More Treehouse – CSS Basics

It’s amazing how much you can get done when you don’t have a full time job!

So this morning I completed the CSS Basics block on the Front End Web Development track on Treehouse. I started this before the How to Make a Website block which I completed yesterday.

As I mentioned in my last past I have enjoyed learning little tips and tricks to using CSS to make websites look good. For example, just using a top or bottom border on an element.

from CSS Basics

It was also great to learn about using gradients, how you can change images with CSS (which means you don’t need to be a  whizz at photo manipulation, plus it would be a time saver!), for example make them round by using border radius. Now, some of you reading this might be like ‘doh! yeah!’ but I didn’t know these things and it is opening a new world of coolness! Also, has me looking at  websites differently as well. I was looking at http://www.springload.co.nz/  yesterday and had a look at their people page and the cool coloured circles with images of everybody. Now, would have thought ‘Photoshop’, but actually not so much.

First image is what the page looks like and the second and third images are from after I have played around with the developer tools and styles in Chrome.

I am going to continue on this track with the next block – Introduction to Programming. At some point I am also going to revisit my resume site (only done top bit for mobile size) that I am revamping and apply some of the stuff I have learnt in How to Make a Website and CSS Basics.

The journey continues!

Treehouse – How to Make a Website

I have been learning code now on Treehouse for about two weeks.

Screen Shot 2015-02-04 at 4.21.28 pm

I decided I would start on the Front End Wed Development Track as it covers:

  1. How to Make a Website
  2. CSS Basics
  3. Introduction to Programming
  4. JavaScript Foundations
  5. HTML Forms
  6. jQuery Basics
  7. HTML Tables
  8. HTML Video and Audio
  9. AJAX Basics
  10. Accessibility
  11. Website Optimization
  12. Console Foundations
  13. Git Basics

The time for all of this is 41 hours.

I started at the CSS Basics block as I have made websites before with the code I do know. And had recently finished a Yoobee online course. So I kind of thought I wouldn’t learn much from it.

I got about half way through the CSS Basics and decided to have another look at How to Make a Website (instructor Nick Pettit).

How to Make a Website covers:

  1. Beginning HTML and CSS
  2. HTML First
  3. Creating HTML Content
  4. CSS: Cascading Style Sheets
  5. Customizing Colors and Fonts
  6. Styling Web Pages and Navigation
  7. Adding Pages to a Website
  8. Responsive Web Design and Testing
  9. Sharing a Website
  10. Debugging HTML and CSS Problems

I liked the structure of it in that you can make your own portfolio site as your progress through the tutorials (recently someone suggested that I could sell photos I take, not sure if I could but I decided to use a few of my own photos for this project, which makes it more interesting). So, I decided I would work through this first block.

I am glad I did. A few amount I already knew but I was able to skip through the videos easily. The way that I have learnt HTML and CSS has been quite adhoc. Started by learning to do the layout of pages with tables! Didn’t know anything about divs! So it has been really good to work through a course and not only use better techniques but begin to understand how they all work together.

The techniques/tips that have really stood out for me have been:

  • learning about ids and classes
  • how effective use of margins and paddings can be in styling a page
  • beginning to understand display, float, clear so as to create fluid designs
  • and using simple CSS techniques for design.

For example, the image from CSS Basics, all it is at the top is a orange border, but it looks pretty cool. It would be good to be able to show school students simple tips like this that can really make quite a difference to the look of a site.

The other part that I liked was the Responsive Web Design block. It was not complex at all and something that I think students in NCEA should be getting into early on.

Another part that was useful was the section on Sharing a Website. This covered:

  • Find a Domain
  • Pick a Web Host
  • Upload the Website

This might seem simple to those that have done it and do it regularly, however for me it was useful to be stepped through the process even though I won’t be doing it anytime soon.

This is my attempt at the project for this section – my portfolio site. It should look like this…

Screen Shot 2015-02-04 at 5.08.07 pm

…there are a few things I will fix up at some point and maybe one day it will be a full on site!

Overall, it was worthwhile taking the time to go back and complete the How to Make a Website section. I have about 2 weeks left of my free trial with Treehouse but I will be paying the $25 USD to continue learning. Also, you can pause your enrolment where you aren’t charged until you resume your enrolment. Cool idea.

If you think you might be keen or would like to try it out, help me by using this referral link http://referrals.trhou.se/libbyschumacherknight. For every person that signs up I can get 20% off my monthly subscription! That would be cool!

Coding online – YOOBEE: HTML and CSS Beyond the Basics


I have been working through Yoobee’s online course ‘HTML and CSS Beyond the Basics’. It has covered using wireframes to design your site to ending with responsive design.

Screen Shot 2015-01-20 at 9.37.41 am

There were 7 sections in total and I learned a number of things. What I am particularly happy about is learning more about responsive design.

Some screenshots…

… positioning, typography, hybrid layouts, CSS downdown menus and different ways of creating buttons.

The final project was to create your own site based on your wireframe from the first lesson. My aim was to create a CV/resume site for myself.

Here is my original wireframe (done in Photoshop) and my adjusted one after doing more of the course (done in Pixlr Editor – great online photo editing tool).

Screenshots of my final site:

I tried to make it a responsive design, which works when making the browser window smaller. However, I have hosted it up on Google Drive and Github and when I look at them on my iPhone it is not coming up with the mobile layout! I’m not sure why this is, anyone got any ideas?

I had a thought that there must be sites out there that can imitate what a website would look like on different devices and with a quick search found this site – http://quirktools.com/screenfly/, you can paste in a website url and change the device and also share that link. Of course you can do the same thing using the developer tools in Chome or Firefox, although I have found Chrome a bit of hassle as I go down in devices sizes, sometimes it doesn’t load the responsive design.

Overall I enjoyed doing this course. The video tutorials were good and activities/tasks useful. I liked that the aim was for participants to have built a site (even if one page) by the end of the course. I personally like to create sites rather then just go through learning of the code without an tangible outcome. And I got a certificate!

Screen Shot 2015-01-20 at 11.55.34 am

The online course was run using Moodle and again it is a great example of how Moodle is an excellent platform for a completely online course – easy to use, navigate and communicate.

I have now started with Treehouse with a free trial. Have picked up some good theory, deeper understanding of how CSS selectors work already.

Next-level Web Design with jQuery – #cs4hschch

This session is a taster for interactive web development using jQuery. An understanding of HTML and CSS is required, but no experience with JavaScript or programming is necessary. Learn how to easily add a slideshow to your website, create an interactive image gallery, and dynamically load a set of images from Flickr. If you’ve ever wondered how jQuery and JavaScript fit into web design, this session is for you. The tools used are all freely available for use in your classroom.


What is jQuery?

  • It is a JavaScript library
  • Adds interactivity to websites
  • DOM manipulation (DOM = Document Object Model) – the structure of objects on your webpage

A web page is made of three main languages – HTML / CSS / JS. Good example using google.co.nz showing HTML only page, then with CSS then JS.

Workshop Mission: Fun with jQuery

Neocities: Getting online fast

jQuery Basics

What is this thing anyway?

jQuery vs JavaScript
  • JavaScript is a programming language.
  • jQuery is a library of code which is written in JavaScript.
Handwritten jQuery
  • Can be used to modify a single element
  • Or to modify a whole lot of elements in the same way
jQuery Plugins
  • A plugin is a pre-written piece of functionality.
  • Plugins need to be included in your site and then initialised.

Workshop Plan

  • Use a plugin to create a slideshow
  • Use a plugin to create an image gallery
  • Write some code to import images from Flickr
  • Allows you to add a dynamically-resized, slideshow-capable background image to any page or element.


  • Popup image gallery
  • Provides a simple way to create a gallery with both thumbnails and full-view images.

Flickr Integration

  • Pulling in themed images
  • Flickr Public API
    Flickr provides a way to search their images from code.
  • This means we can get a list of information about a set of images automatically.
  • The API we will be using is the public feed found here.
  • API = Application Programme Interface (a way to get data in and out of an application)


  • Many APIs offered by web applications use JSON as a way of transferring data.
  • (JavaScript object notation)

My site – http://schuknight.neocities.org/