Dev Academy Bootcamp: Wk 2 — OOP

Dev Academy Bootcamp: Phase 1 – Week 2 — Object Oriented Programming

The focus of this week has been Object Oriented Programming.

During this week I have learnt:

  • a lot about classes and fruit trees! (The first activity was creating an Orange Tree Grove and then converting it into a Tree Grove with different types of fruit trees – enough said.)
  • introduction to test driven development
  • inheritance
  • encapsulation
  • coupling
  • law of Demeter
  • private / public
  • user stories
  • MVP – minimum viable product
  • made cookies and ovens (no, not in the real sense)
  • parsing data
  • MVC – model view controller
  • working with others

Wednesday evening our homework was to watch a video on Models, Views and Controllers, to set us up for Thursdays challenges on MVC. We had built a Flashcards console app the day before and on Thursday we had to change it so that it was suing MVC design pattern. I enjoyed this and using classes really started to make sense to me.

It has been good to get to a point where we are making things that do stuff – actually making a flashcard app (even if extremely basic and only in the console) compared with making orange trees, cookies and hospitals.

This image really helped me understand MVC the flow of how it all works. mvc-sequence

After completing our Flashcard challenge and making it follow the MVC pattern I was feeling pretty good leading into our first group project on Friday.

I wasn’t too sure what to expect except that we would be working as a team of four Rubyists and building something to do with what we had been learning over the first two weeks. The project was pretty open, we could decide what we wanted to build, obviously though, a console run program was used, as thats all we know so far.

Our group of four has probably focused more on our group processes over the last two weeks then the technical aspects of coding. I have enjoyed this as I have learnt a lot already about working with others in the environment. I feel that this meant that we had a strong base as a group to work from with our project. We took our time with planning out what, when and how we were going to do things. Although we may  possibly have gotten bogged down in choosing a product/idea to make if one of the teacher aides hadn’t come over and given some thoughts and suggestions.

A side note – I am really appreciating the way that the teachers and teacher aides at Dev Academy interact with us. When needed we are given the time we need to solve a problem, rather then being given a possible solution to soon and we are also gently nudged in a certain direction when we might be going off on a tangent.

Our planning board started of with a user story and then we had a think about what we needed and then put the parts into the MVC design pattern.

planning board

We used a Kanban board when we got into the creating. I really liked the physical nature of using a whiteboard as I enjoyed being able to move the post it notes once tasks were complete.

kanban board

We unfortunately hadn’t gone over agile roles before we started. Even though as a group we worked really well, I feel that if our roles had been more defined rather then blended we may have been even more efficient. I guess a good learning opportunity!

So, what we made – Cocktail Suggester! Github link – https://github.com/libbyschuknight/cocktail_suggester and a demo.

I really enjoyed working on a group project, right from deciding on the idea to presenting our minimum viable product to everyone at EDA. There are couple of features we nearly got to – printing out the recipe of a cocktail, adding a cocktail to the list.

Cool things from this week:

  • learning about the ascii artii gem for the console art / fonts
  • on the macbook being able to swipe across when in full screen to go from presentation to code to terminal! (Got rather excited about this one – must be all the presentations I’ve done in the past where I couldn’t do that!)
  • oh and MVC has been good, it has tied in a lot of components that now make more sense!

Also this weekend, Rails Girls Wellington has been on at Enspiral Dev Academy and from all the tweets it sounds like it has been a great time. At the RailsGirlsWgtn weekend last year is where I was first introduced to Ruby and where I found out about EDA. A lot has happened since then and I never would have thought I would be actually a student at EDA. It has been one interesting year. I hope to in the future join the cool people that make RailsGirlsWgtn happen. For those that stepped into Ruby and Rails land this year, anything is possible!

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

logoEnspiralDevAcademy

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

Github, html, css – starting out!

Early this year I was introduced to Github at the RailsGirlsWgtn Weekend back in March. Over the weekend there was the chance to create your own Ruby on Rails app, using Github and other sites to get it working. I must admit it was all a bit of a mystery to me and I doubt I could go back and recreate any of it, including the command lines to get stuff onto Github.

Since then I have learnt quite a bit more about programming (see posts about Python) and have developed my knowledge of HTML / CSS. For our Y12 Digital Technology class this year we have done quite a bit of website stuff and I have learnt more about using divs for layouts and cool sytling in CSS and my skills and confidence have improved.

Not long ago I came across Alyx Gillett’s website, which I think has a really cool and simple layout and design. So I started to look into creating one for myself. I looked at what hers is made in, which is www.squarespace.com. Looks cool but you have to pay after a free 14 day trial and it gives a bunch of stuff but nothing I think I need at the moment. And the  i had a brainwave, as I am a DT teacher wouldn’t it be cool if I made my own site completely from scratch. So I started have a play around with some ideas, look at some sites that had layouts I liked. This one provides the HTML & CSS – www.maxdesign.com.au. I started playing around with the Two column fixed width example and the One column fixed width layout.

site2

After playing for a bit I got busy with other things until just the last few days. I decided I wanted to have a crack again and also thought it was about time I started a wee project of my own. I thought creating my own site and getting it up online would be a good place to start plus it is a chance for me to really embed my own learning and think about how I can improve my own teaching of HTML & CSS.

So, after doing some Google searches about using Github and discovering Github for Windows and Mac, and learning about being able to use gh-pages to host a static website I pushed my wee site out into cyberspace. Using Github for Windows/Mac is so much easier then using the command lines – although I am sure it will be useful to know those sometime in the future.

Here is my site – http://schuknight.github.io/schuknight-site/. Still very much a work in progress and a learning tool for me.

ghiosite

Here I am on Github – https://github.com/schuknight. Useful stuff from RailGirlsWgtn Github page.

Next few steps with my site will be planning out what I want and also in November I am doing a 2 day HTML course at Yoobee, so hoping to learn some cool stuff there. It will be good to learn properly after a few years of picking things up here and there!

I have also rediscovered Sublime Text text editor. I like it as it just seems nicer then Notepad++ and can put on Windows and Mac!

sublime

How did you learn about HTML/CSS, webdesign? Got any goto sites that you think are essential? Either that you use now or learnt heaps from? What site do you recommend for me to keep developing my HTML/CSS? What site is good to start learning about Javascript?