Rubber duck debugging

Last week I was working in the Music Library CLI Lab and I was not able to solve the last method I had to pass all the tests. I do not think it was more difficult than all the previous ones but even so I was not able to see what I was doing wrong. Maybe I was tired because I had been studying for several hours and I needed to clear my mind so I took a break. Talking to a friend about this situation, he told me why I did not try to explain my problem to a rubber duck.

Yap. I thought he was kidding but when I started working in my Lab I tried it and while I was explaining to the duck my problem I realised what was happening in 5 minutes!

Rubber duck debugging is a method of debugging code and a very effective one.

Here I leave a picture of my best study partner!Rubber Duck Debugging

What I have learned so far about OO Ruby

From what I’ve understood Object-Oriented programming is very popular and it has lots of advantages. The programmer may have a closer feeling of working with real-life entities due to the multitask nature of the objects in OOP. From my point of view OOP is a good way to keep all your code organise. Each object contains its data and functionality within its scope and if its methods are written in an abstract way they can be reused for other objects or for a different project.

I am still working in the OO Ruby section and it is taking me some time to understand all the concepts and why or when to use them. Here it is what I have learned so far:

Creating a class

Class names begin with capital letters because they are stored in Ruby constants. If our class name contains two words, the name should be CamelCased.

Instantiation

Every time we want to represent a new individual in our program we should instantiate an object of that type (Dog.new). We call these individuals instances.

Instances variables

An instance variable represents a singular property of an individual, of an instance. This variable is accessible in any instance method in a particular instance of a class. The name of the instance variable is written with a @ at the beginning of the word: @instance_variable_name.

Instance methods

We call the methods defined within the object’s class instance methods because they are methods that belong to any instance of the class.

They provide a mechanism for an object to expose to the outside world its data. They can manipulate the internal state of an object and provide some functionality for an individual object too.

Attribute readers, writers and accesors

Our object’s instances can have attributes, like a name or hair colour in the case of our Dog class. In order to set these attributes we have to use a writer and in order to have these data available in the outside world we have to have a reader. It is very important to use an instance variable (@name), otherwise the getter method couldn’t read the data that we set in the writer method because it is out of scope.

This is the explicit method for the attribute @name. There is another faster way to do it using a macro: the attr_writer, the attr_reader and the attr_accessor that does the work of the two previous macros. In Ruby a macro is like a method that instead of returning a Ruby datatype returns more Ruby code. The implementation of macros is considered metaprogramming.

When to use attr_accessor vs a custom reader/writer.

The attr_accessor macro will provide a naive interface for reading and writing to an instance variable. Anytime we need something conceptually different or more complex, we should build our own reader or writer.

Self

Whenever an object needs to refer to itself, the keyword “self” is used.

In an instance method, self will always refer to the instance itself and in a class method, self will always refer to the class itself.

Class variable

Class variables are for properties that belong to the entire class. A class level variable can be used for example for instance memoization, for keeping track of all instances of a class or for collaborating data. The name of the class variable is written with a double @ at the beginning of the word: @@class_variable_name.

#self.all is a class method for reading data stored in the class variable @@all. This is a class reader, very similar to an instance reader method that reads an instance property.

Class methods

With these methods we can access any class variable. A class method operate on the entire class and expose the class’ scope to the rest of our program. They don’t have access to the instance scope.

The most common class methods are:

Class finders

A class finder method returns existing instances.

Custom class constructors

A class constructor is any class method that instantiates an instance of the class.

Class operators

A class operator is perfect to manipulate any class level data.

 

Programming paradigms

A programmer can follow different approaches, also known as programming paradigms, when writing code.  Two of the most important programming paradigms are the procedural and the Object-Oriented ones.

Usually a programming language falls under one paradigm like  Ruby , that is mainly an OOP language. But some other languages as JavaScript can be multi-paradigm and support procedural, object-oriented (prototype-based) and functional programming styles.

The main difference between them is how you organise your code:

-In a procedural approach your code is a list of instructions or steps to be carried out.

-In an Object-Oriented approach your code is organised using objects and classes.

Reading about the different paradigms I found lots of new and very complicated concepts as: modularisation as a main trait of the procedural paradigm, and data abstraction, encapsulation, polymorphism, inheritance and serialisation-marshalling as traits for the Object-Oriented paradigm.

Apart from the desire to look the other way, I decided create some short and easy to understand definitions. Maybe the next time I find these concepts I don’t feel so uncomfortable!

  • Modularisation: It is used for reducing the complexity of a system subdividing a computer program into modules  or separate software components.
  • Data abstraction: It is the reduction of data to a simplified representation of the whole.  In OOP the programmer would just keep the relevant data inside the object hiding everything else. Data hiding is a software development technique.
  • Encapsulation : It is the inclusion within an object  of all the data and methods need for the object to function.
  • Polymorphism: It is the ability to present the same interface (Shape) for differing data types (square, circle, etc).
  • Inheritance: It enables new objects (subclasses or derived classes) to take on the properties of existing objects (superclasses or base classes).
  • Serialisation and marshalling:  Both are for transforming objects into series of bits. In particular, marshalling is about getting parameters from here to there, while serialisation is about copying structured data to or from a primitive form such as a byte stream. What is byte stream? A sequence of bits. What is a bit? It is the smallest unit of data in a computer. And what am I doing right now? Yak shaving!

About me

Hi! My name is Diana and my professional background is in the Art Market.

I have a degree in Clarinet Performance, studied Art History in University and have a Masters degree in Art Market studies and management of related companies, all in Spain.

I moved to London after finishing my master’s degree and have held posts across the art world where I strengthened my knowledge of the commercial aspect of contemporary art with established artists and learned more about the avant-garde and experimental work of younger and emerging artists.

Following the birth of my daughter in 2017 I decided to change career and retrain as a web developer. This change was motivated by the possibility of using my creativity in a technical context and having an intellectually challenging job where the learning process is crucial.

Nowadays I am doing the Online Software Engineering Bootcamp at Flatiron School and I am busy creating a website using Bootstrap and writing a game registration web app for a local sports team’s website. For this last project I am learning a little bit of PHP and MySQL.

Before applying to my programming bootcamp I have been doing some readings and completing various online education courses in order to get the basics on HTML, CSS and JS. Here is a list of what I have done so far:

Online education courses:

OpenClassrooms

  1. Understanding the Web
  2. Manage your code with Git and GitHub
  3. Learn the command line in Terminal
  4. Learn to Code with JavaScript
  5. Use JavaScript in your web projects

Code Academy

  1. Introduction to HTML
  2. Learn CSS

Flatiron School

  1. Coding Bootcamp Prep

Books:

  1. Coding with JavaScript for Dummies
  2. Eloquent JavaScript
  3. Static Site Generators

Exercises:

GitHub.io where I include my work.

GitHub Pages

You can have a website with GitHub Pages hosted directly from your GitHub repository. First thing you have to create this repository, and it will be named using your GitHub username + github.io. For example, my username in GitHub is DianaBaRo, so my GitHub Page is: https://dianabaro.github.io/.

They just allow one web page for user. What I did is create a table with links to all my different projects, a page that works as a kind of an index.

Your repository has to have an index.html. After adding folders with my projects to this repository I changed index.html to home.html and it didn’t work well, they ask you for the first one. Don’t change its name!

Solitaire Game

So, this is my first JS project, in which I am still working to implement most of the conditions with the drag and drop and make some sense according to the game rules.

I have used HTML, CSS and JS.

Here it is my HTML, where I have created a navigation bar and a structure made of divs to display the stack, the waste, the spades, hearts, diamonds and clubs piles and a second row with seven piles. In my first attempt I made a table with rows but it was much easier using divs when I started to modify everything with CSS.

Here it is my CSS code. I have had many problems trying to put the image I was dragging on top of another one. Everything has to say with their position, absolute and relative positions. The position property.

And finally, the fun part! All my little “monstruos”, aka my functions. There are some pertinent comments along the code.

WORK TO DO:  I am still working in all the necessary conditions to delimit the drop function according to the rules of the game. Now, you can drag and drop everywhere, you can even pick a card that it isn’t on the top of the pile!

Environment Setup for Javascript

In order to create a project I have had to setup my development environment. I used the following tools:

  1. Browser
  2. Editor

I could use any browser but I choose working with Google Chrome due to Chrome DevTools. To access them:

  • open a Chrome page
  • open the View menu at the top of your browser window
  • select Developer
  • and then select Developer Tools

As my editor I have chosen Visual Studio Code and jsfiddle.net to keep some snippets I was interested on.

Visual Studio Code is a cross-platform editor, that means you can use it with Windows, Linux and macOS. It helps you with debugging, with Git control and you can install plugins.

Visual Studio vs Visual Studio Code

The main difference is that VS Code is an Editor while VS is an IDE.  Check these two posts for more information:

 

 

Getting the Basics on Web Development

Online Education courses I have completed:

OpenClassrooms courses are concise. They are great if you want to have a general idea about the subject that is covered.

Good courses to get the fundamental info but you have to pay if you want to do a project to practise your new skills.

The Javascript part is a lot harder than the Ruby one. They explain the fundamentals and you do some exercises and some projects as a Rock Dodger using JS and a Tic Tac Toe with Ruby. I had really enjoyed this course.

Books:

WordPress.org

Here are the reasons why I have  chosen this publishing platform:

[ First: WordPress.org is not WordPress.com. Nice post about this matter. ]

  1. It is a free open-source.
  2. You own your website and can customise as wanted using PHP, CSS and MySQL.
  3. Self-hosted version. I already had my web domain and hosting with Go Daddy. It is very easy install WordPress on your Hosting Account.