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.


DevAcademy: final two weeks of Phase 0!

Week 8: Databases + Review

We did this stuff:

  1. Treehouse: Database Foundations
  2. Review JavaScript Objects with Codecademy: JavaScript – Data Structures, Objects I, and Objects II.
  3. JavaScript Gradebook
  4. JavaScript Tally Votes
  5. Fizz Buzz Super Edition
  6. Nums to Words
  7. Javascript Olympics

I quite liked learning more about SQL as I had learnt a little bit while teaching, so wasn’t anything that was new to me.

I have enjoyed learning JS but find it a very steep learning curve going into objects and OOP after not doing any JS for a few weeks. My head was well in Ruby-land.

Ruby seems so much easier – but is that only because I have been working with it intently for the last 3-4 weeks??

The challenges I enjoyed the most in Week 8 where doing the Fizz Buzz Super Edition and Nums to Words – these were Ruby challenges

Felt I learnt a lot during Week 8. I am still looking forward to seeing how all of these things work together in making a website or app.

Week 9: Review

Intro for this weeks challenges:

These challenges are difficult. If you feel like you need extra understanding to complete them, check out the optional but suggested activity below:

  1. OO-Basics
  2. Triangle-Debugger
  3. Reverse Words
  4. Rectangle Class
  5. Translate Ruby to Javascript
  6. Revisit Your Website

Most of these challenges were in Ruby, except for the translating. It seemed like they were in reverse order though, as the first one was a lot harder then the last ones.

I surprised myself quite a lot during these challenges as firstly we were told they were difficult and secondly at first glance they looked difficult. At least the OO-Basics did. But got them all done within two days, except for revisiting my website.

Every so often they throw in a challenge which has all or most of the code but needs debugging. I quite like these as I don’t need to worry about getting my code to work, I just need to try and found the errors in code given to me. I also really enjoyed making code look really neat and tidy as I think this makes a big difference to its readability.

It was fun translating some Ruby code to JavaScript. I ended up doing this with another guy in my cohort as we hadn’t done any pair coding and I was keen to have a go at this before starting Phase 1.

I chose a Ruby exercise on reversing words…

Screen Shot 2015-05-02 at 5.54.50 pm

…and did it in JS with Kyle and then refactored twice by myself…

Screen Shot 2015-05-02 at 5.55.13 pm

Screen Shot 2015-05-02 at 5.55.25 pm

Screen Shot 2015-05-02 at 5.55.36 pm

… quite happy with myself in finding the .map function in the JS documentation and getting it done to fewer lines.

The last challenge of the week was revisiting our website that we built and worked on in Week 2 and Week 3. After those weeks my site was looking like this:

After this week it is looking like this:

I’m pretty happy with how it looks at the moment. There are a few things I do want to do are to :

  1. add a drop down menu for smaller screens. I came across this post – Drop-Down Navigation: Responsive and Touch-Friendly, and it seems like it would be pretty easy to implement. They also have a demo site. When I have some spare time I will try to add this in.
  2. redo the photo, as think it takes too long to load
  3. tidy up the code as it is messy, as started with old site.

The change in design happened for a few reasons:

  1. initial one was too simpler and boring
  2. had used initial one for trying things out – e.g. JQuery drop down menu
  3. initial one didn’t have a clear purpose / context

A couple of sites that I took inspiration from where http://kendallflutey.com/# and http://amy.palamounta.in/about/. I was also thinking about how to present or “brand” me, as I was working on this.

During this process I discovered Font Awesome! I was looking for an icon to add an angle-up to use to get back to the top of the page and came across it. How cool! What other great sites are there out there for using when working on building a website?

So, that is Phase 0. Bootcamp / Phase 1 starts on Monday.

Phase 1 consists of:

  • Programming Fundamentals: Learn How to Think Like a Programmer
  • Introduction to the Dev Academy experience
  • Ruby, SQL, Active Record
  • Solving problems on the command line
  • Engineering Empathy: Explore your inner world

Phase 2:

  • Programming for the Web: Bring Your Applications to Life
  • Javascript, HTML, CSS and Sinatra
  • Learn to rebuild Twitter or create your own Hacker News
  • Engineering Empathy: Maximizing effectiveness with others

Phase 3:

  • Making Beautiful and Meaningful Things
  • Agile software development, user stories, scrum, and sprint planning
  • Introduction to the Rails framework
  • Final project pitches, lightning talks and demo day

The phases are three weeks long. I am hoping to do at least a post a phase. If not, there will be one very big one at the end of bootcamp! See you all on the other side!

More JQuery – mobile drop down menu

Note: 2 May – whoops, this one has been sitting in my drafts for about 5 weeks!

Last week I learnt a lot about JavaScript and JQuery. One of the challenges for Week 3 of Phase 0 (for Dev Academy) was adding interactivity to our own site/s. I added a simple Lightbox effect to my photo portfolio site.

Screen Shot 2015-03-22 at 5.39.20 pm

Another of the projects I did during the JQuery course on Treehouse was ‘Creating a Mobile Drop Down Menu’. I really like the look of drop down menus for smaller screen dimensions and was keen to add this to one of my sites. I decided to add it to my personal site (which is still a work in progress).

Here is two screenshots from the course project site:

And two from my site:

I am pleased that I have managed to add a drop down menu, although I am going to explore using straight HTML5/CSS3 for this in the future. I think it will look better. I am also going to be redoing the pages as well.

I would like to make a drop down menu that looks a bit like this:

And have the menu on a large screen like this:

It maybe awhile before I get it this good though!

Here are shots of portfolio site, moving from the large screen design of my photo portfolio site to the small screen design. The aim will be to add a drop down menu for the smaller screens:

Anyone know of any good tutorials or site going through how to make a good mobile drop down menu?

Dev Academy – Week 2

I’m now at the end of Week 2 of Phase 0 of Dev Academy. This week has focused on HTML and CSS. The main tasks we had to do this week via Treehouse I had already completed as I started on Treehouse back in the middle of January. I managed to find a link to a months free membership and started on the Front End Web Development track. So I have been working on trying to progress sites I have already made to improve the responsiveness and look. Here is my main site with links to others, all still works in progress.

I have started working through the CSS – Beyond the Basics course on Treehouse. I have particularly enjoyed learning about flexbox and multi-column layouts. It will be good to play around with these and use in sites, while still thinking about how to keep a site workable for browsers that don’t yet support these options.

I am just getting into transitions and transforms and have animations to look forward to. Who knew there was so much you could do with CSS3! I could see secondary school students doing lots of cool things with this kind of styling.

One area I would like to development more is the design of sites. I still feel that I have a very basic and limit idea of design of websites. I would like to be better at using colours and creating the look and feel of a website. Like Annie Lennox’s new albums site is wow – http://nostalgia.annielennox.com/.

Screen Shot 2015-03-14 at 4.52.48 pm

I like the pop out menu from the side and menus like this that pop down, mostly in mobile sites. Anyone know of a good place to start for basic but good design tips?

With Git and Github –

  • am really enjoying the power of branches
  • found site called “git – the simple guide” – http://rogerdudler.github.io/git-guide/, really useful
  • using GitHub pages to make websites for projects – doing this is slightly different from making a page for a user following GH pages. I found this page on how to make them manually confusing, so at the moment what I do is once I have pushed up the master branch with the inital commit, I create a new branch called “gh-pages” in GitHub and the site is created. When I want to updated the project site (website) I do have to pull the master changes down into my gh-pages branch and then push that up to the gh-pages branch on GitHub. Which is a bit round about. When I have another site I want to get online, or another one to start, I will have a go at following the Creating Project Pages manually instructions.
  • have also this week had a crack at using markdown language to add information to my copy of the weeks instructions, to show what I have and haven’t done.

Week 3 we will be getting into JavaScript and JQuery.

The start of a new journey – Enspiral Dev Academy


This week marks the start of Phase 0 of Enspiral Dev Academy for me. Have a look at their website to find out what it is all about, in short though I am learning to code! By the end of the bootcamp in early July I will be a whizz! (or at least a junior whizz!).

I’m in the Roa (think this means long / tall) cohort, doing Ruby and in Week 1 of Phase 0. I have learnt about the terminal, Git and GitHub so far. I had dabbled with Git and GitHub when I attended a RailsGirls Wgtn weekend in March 2014 but have never really done anything in the terminal. It has been exciting and scary installing things through the command line. I had visions of completely mucking up my computer. Thankfully that hasn’t happened….yet!

In Git I have created repos, forked them, cloned, branched  and I am enjoying learning how to do this stuff. We have also used GitHub Pages to upload our personal website. Today I decided I wanted to work on my personal site but starting with a mobile version. So instead of working on the master branch I created a mobile_site branch and was working on this. I then had the thought “but how do I view in Chrome what I am changing in my mobile_site branch?”. As a branch doesn’t make a copy that you can access via the Finder on a Mac (I think it is hidden and if it is I don’t know how to find it). I discovered through my playing on the terminal and opening up the index page from the Finder (the only index page for this project – which is where I was getting confused as having made another branch there are kind of two copies), that when I am in the mobile_site branch and I open the index.html page in Chrome (from the Finder), it will open up the version of the branch I am in within the terminal. Even if the terminal is closed, as long as when I exited it, the branch I was in was the mobile_site, then that is the page I will see in Chrome. Which I find pretty cool, as I assumed that it would be the page from the master branch. But I guess in a way that is what version control is all about. And just to make sure I understood what was happening, I changed branches a few times and checked what page came up in Chrome – low and beyond, when I was on the master branch my original page, with no changes from my mobile_site page, showed! I (strangely) find this quite exciting!

I also have the luxury of having an (old) iMac at home and having a MacBook Pro. I have been using both of them which means that I want to keep everything up to date on each device. So am getting a lot of practice at using Git. Early today I did some work on my website (on the laptop), on the mobile_site branch. I then pushed it up to GitHub and proceeded to pull it down to my iMac. However, with a git pull (I have just discovered) it pulls it down and merges it. So when I pulled it didn’t make a mobile_site branch for me and it merged into the master branch the changes I had made in the mobile_site branch. This is not what I wanted. Did a bit of searching online and found this guide to git.

Screen Shot 2015-03-04 at 3.04.07 pm

It has really clear and simple explanations of all the commands plus some visuals. And it talks about the working directory, index and HEAD – the three trees in Git. Kind of helps make sense of how Git works. I was also able to figure out the difference between a git pull and a git fetch and used a git reset to get my repo working the same way it is on my laptop. I am very pleased about that.

My personal website isn’t very interesting or exciting yet but it will be great to see how it develops over the next few weeks. Screenshot from today:

Screen Shot 2015-03-04 at 3.16.03 pm

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!