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 and 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 3 – JavaScript and JQuery

I have really enjoyed learning more about JS and JQuery. I knew a tiny little bit. I think I understand more now, but definitely do not understand everything that I have gone through this week.

I had already completed the JS Basics and JS Loops, Arrays & Objects, so got on with JQuery Basics. Within this course the projects were:

  • Creating a Spoiler Revealer
  • Creating a Simple Lightbox
  • Creating a Mobile Drop Down Menu
  • Creating a Password Confirmation Form
  • Creating a Simple Drawing Application

It really works for me that the tutorials are focused on creating projects. I enjoy seeing how I can use what I am learning for myself, rather then just doing stuff for the sake of learning it (although you do have to do this at times when learning programming).

Besides working through the Treehouse tutorials, one of the suggested challenges for the week was to “Make your Website Interactive”. I liked the Lightbox idea and added this interactivity to my photo portfolio site.

Screen Shot 2015-03-22 at 5.37.40 pm

If you click on an image it should come up like this:

Screen Shot 2015-03-22 at 5.39.20 pm

If it doesn’t then you may have JavaScript turned off in your browser or your browser for some reason is blocking the loading of the JS.

I am also working changing the layout and structure of my personal website and am planning on adding a JQuery mobile dropdown menu. Although, you can create a dropdown menu using HTML/CSS and after I have had a go with JQuery I am going to look into doing it with HTML/CSS as I think it will look better!

The last project was creating a simple drawing application. I haven’t uploaded this, so just an image. Pretty fun making this and exciting to add the interactivity.

Screen Shot 2015-03-21 at 5.31.27 pm

Another suggested challenge was the Treehouse course “Interactive Web Pages with Javascript”. This is creating interactivity just using JS and no JQuery and using the DOM! I am into the third stage which is “Traversing and Manipulating the DOM with JavaScript”. It is taking quite a lot of my brain power and I know I won’t have grasped everything by the end but it is a start.

I have started early on Unit 2: Ruby Fundamentals, Week 4: Ruby Basics as I have work all week and am not to sure how much time I will have in the evenings. It is going well so far and I was also able to fix some Ruby stuff in my terminal so I could run the tests for the exercises. So all round quite a productive day. And I got a surf in this morning!

More on Ruby Fundamentals soon…

Finished JS Loops, Arrays and Objects – Treehouse

Liked this course, fun playing with loops, arrays and learning about objects. Had a few issues though.

First problem was that sometimes I type too fast or I’m not being careful enough. When I was meant to type ‘ += ‘ I would type ‘ =+ ‘, for when I wanted to add something to a variable. This caused me a few “OMG! Why isn’t it working?!” moments. Luckily though I figure out what I was doing wrong just before posting a question to the Treehouse forum.

Another thing I discovered was about errors showing up! The images below show the code with the error, the error message that came up in the console and the corrected code.

So, this problem has a 2-dimensional array and what I did was missed a comma in the outer array. This made the program throw an error BUT the error message was not coming up saying it was on line 6.

How did I realise I had made this mistake? Again, was about to ask a question in Treehouse and when you do start to ask a question it pops up questions that have already been asked that are similar to yours. Had a look at these and one mention that often errors occur by missing out a comma or semi-colon. So I had a closer, more careful look through my code, not just at the lines that the console and told me their were errors out.

Good to learn that the cause of an error may not be where you think it is! Something to try and remember and to get better at typing without missing out commas etc!! Also, to think about is that even though it the console did not give the line the error was on, with it saying line 17, I could have thought about what variables/objects/functions were in that line and then looked at them. This would be a good way to tackle errors in a large program!

The last thing that I got thinking about while doing this course was when to use/write a function? In the last challenge, in my solution I got it working with a for loop inside a while loop. The solution that Dave from Treehouse showed used a function for the for loop part. I want to know how do you decide when you should create/write/use a function?

JS Visualisation: Online Python Tutor – Visualise Python, Java and JavaScript code!!

Exicting! I have just started the course on JavaScript Loops Arrays and Objects on Treehouse and in the video “Simplify Repetitive Tasks with Loops” they are stepping through a random number while loop.

Screen Shot 2015-02-16 at 7.25.08 pm

This reminded me about the Online Python Visualiser that I was introduced to during a uni paper I took last year –

So, I searched for JavaScript visualiser to find that the online python tutor has the ability to run Java code and JavaScript code!! I am excited about this as I found it very useful in understanding some code and worked out some problems using it as well.

Screen Shot 2015-02-16 at 7.34.29 pm

Plus, you can add in code and then either share the link or embed it. One thing I had to change though was I was writing out the random number to the web page with document.write but this throw an error in the visualiser, so changed it to console.log and this then meant the program output worked.

I can see this being useful for some stuff but perhaps not big things!

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!

JavaScript Basics – Treehouse

Have just finished this block on the Front End Web Development track on Treehouse.

Screen Shot 2015-02-11 at 5.01.34 pm

My last post was about the Introduction to Programming, which was replaced in this track by the JavaScript Basics that I have just completed. I have to say that I enjoyed the JS Basics more than the Intro to Prog. There was more coding to do in Workspaces and the exercises I found more interesting. I thought the flow of information made more sense, it seemed more logical. Pleased I have done both as it as definitely solidified my learning of the basics in Javascript. And I am enjoying learning JavaScript and playing around with it. Here is the basic quiz I made. I think I particularly like the interactivity and being able to see results straight away that aren’t just lines of of code (like with Python).

One aspect of Treehouse that I really like is that the blocks that you do in a track will count for blocks in other tracks as well. For example, in the Front End Web Development track I have completed the How to Make a Website block, as well as the Introduction to Programming (although this no longer comes up as a block in this track). You get a tick and see that you have done all the stages for that block.

Screen Shot 2015-02-16 at 11.02.39 am

If I look at the Rails Development track, it shows that I have completed the How to Make a Website and the Introduction to Programming blocks. I quite like this as I am ahead in this track already!

Screen Shot 2015-02-16 at 11.01.31 am

Next for me on this track is HTML Forms.

On a side note, Enspiral Dev Academy, which I am starting Phase 0 in March, is now using Treehouse for a lot of its online learning through this initial stage.