Constructors.

Constructors confused me for a while, but once you understand the basics of OOP, fields, objects etc it becomes easier to grasp the concepts of them and why they are necessary in OOP. It deals with object initalization. When we gave the properties of the map to Width and Height we weren’t doing anything with them. This is where a constructor comes in to construct new instances of a class.


Conventions tell us that we need to name the constructor the same name as the class and make sure you put public in front of it or else it will be private by default and useless! A quick tip if you are using visual studio is to type out “ctor” and then hit tab tab. Their are so many more useful snippets at this web address. This constructor is called when the object is created. Make sure to put the parameters in the signature.

1
2
3
4
5
Public Map(int width, int height)
{
Width = width;
height = height;
}


Lowercase letters are convention and are method level variables. That means they only exist in the constructor method and local to the scope of the constructor. The instance variables are accessible thought the class and possible other classes as well. We may need other objects to know about the Map width and height.


When we initalize the objects field with values, sometimes we want to be able to change the values. Should the map values be allowed to change? Probably not. So making the fields readonly will help ensure that the Map size and coordinates doesn’t change. If this were to happen their would be a lot of wierd errors going on down the line.

Fields

When assind fields or properties to a class you need to think about what attributes that a class has. Ideally you want to set the minimal amount of attributes. A super simple example would be a map. It can be divided into X for the width and Y for the height. You start adding fields by listing the protection level, the type and then finally the name.



Every field in a class has an accessibility level, meanind how protected they make the declared properties. Their are private, protected and public.



  • Public: The field can be accessed by any method in any class.

  • Private: The field can be accessed by only the same class they were declared in. This is the default value.

  • Protected: The field can be accessed by only the current class and subclasses



private int Width
private int Height

Next up we will cover how to use these fields with constructors.

Types, Classes and Objects.

In OOP every object is of a certain type. Whenever you use int, double, string etc these are types. You can create your own objects for a particular type as well. This is done with using a class.

An easy way to think of a class is a cookie cutter. The cookie cutter is the class or template on how to make cookies. It is not a cookie itself, just a template. Classes are templates for amking objects of a particular type. Each time a cookie is create it is called an instance of that Cookie class. You can make many copies of cookies over and ocer and can make them a little different by changing their attributes.


Typically you would declare a class with an uppercase letter.

1
2
3
4
5
6
7
8
9
10
11
namespace Bake
{
class Cookie
{
public Void Main()
{
Cookie cookie = = new Cookie();
}
}
}

The above code create a new variable called cookie and assigns it to a new Cookie object. Typically you want to keep the variables a meaningful name. This is how to instnatiate an object from the Cookie class.

So to recap



  • “Frank” is an object of type string.

  • The new keyword is used to create a new object or instance of that class

  • In a GUI, each individual button is a distinct object.

  • Classes are templates from which objects are created from

Namespaces.

Namespaces explained

A namespace is a confusing topic when you first encounter it in OOP. The namespace is the encompassing code block and is usually the company name. You can have multiple levels to the namespace to further differentiate things.



Next up is the class you are able to have multiple classes with the same name, as long as they are in different namespaces. Much like you can have the same city names in different states. Manhattan, KS and Manhattan, NY are very different places.

You often may see System.Console.Write.


  • System is simply the namespace.

  • Console is the Class name.

  • Write is the method called.

This can be shortened by putting a using directive at the top of the program. This is common and makes your code more readable with using System;

To think of it in terms of a a mailing address you would need to put the state and country, city and street address for the post office to know what you do with your letter. A namespace works much the same way.



  1. Namespace = State and Country

  2. ClassName = City

  3. Method = The street address



Hopefully this makes wrapping your head around namepaces a little bit easier.

Object Oriented Basics.

Object Oriented Programming

Object oriented programming or OOP for short is defined by how objects interact with each other. It is very common to break a large software application down into smaller and smaller components or objects

Objects can have attributes and bahaviors.

Pez Dispenser Example


  • Attributes


    1. Having a green head

    2. Having an orange body

    3. Holding 10 pieces of pez candy


  • Behaviors


    1. Dispense a Pez Candy

    2. Reload the dispenser




Objects can also be composed of other objects. Such as the head of a pez dispenser and the body of the dispenser. This lets you switch out different head and body designs with ease.

In software this benefits developers be forcing you to design the software and break it down in smaller and smaller chunks (objects). This makes building large applications eaaier and you can implement interactions with those objects one at a time. Software reuse is also another benefit, you can reuse objects that you have built in one project or file into another project or file.

OOP is pretty powerful once you wrap your head around it. Significant object-oriented languages include Java, C++, C#, Python, PHP, Ruby, Perl, Delphi, Objective-C, Swift, Common Lisp, and Smalltalk.

HTML Entities.

Helpful HTML entities.


Its often quite challenging to find a one stop shop for unicode characters or html entities that you often see in the protoypes. You can go about creating icons in a number of different ways.


  • You could replace them with CSS via content but that creates accessibility issues.

  • You could use a sprite but then you have to map out the coordinates just right, and is quite anoying to resize.

  • Or you could use something like font awesome

A very helpful site that I came accross recently is the one at the web address below. It is a quick interactive reference of 14,500 HTML
character entities. They have everything that I have needed when putting togather quick prototypes in the browser. You don’t have to mess with sprites, SVGs or font awesome. I’d highly reccommend you check it out.

http://www.amp-what.com/

CSS Specificity.

This week I refreshed my memory on CSS specificity. In laymen terms certain selectors have different point values. The more specific a selector the greater precedence that selector takes. In cases with equal specificity the selector that came last will be applied aka the cascade in cascading stylesheets. Specificity is the reason why CSS-rules don’t apply to some elements when you think that they should? Hacve you ever pulled your hair out asking yourself why that certain style is not applying? Then you’ve wresteled with CSS specificity. Higher specificity wins if two selectors are applied to the same element.

Code Examples

See the Pen Wwmayb by Franklyn (@franklynroth) on CodePen.

Will Ferral Quote. If you are not first, you are last. >The opponents were equally matched and the declaration that comes last wins. Now lets look at another example, based on what you saw above you would think that the text would still be red. But its not because of specificity.

See the Pen GZeYGe by Franklyn (@franklynroth) on CodePen.

body h1 has a greeater value than just h1 even though h1 came last. Lets see how to calculate this.

How to calculate specificity

  • HTML selectors and pseudo elements have a value of 1 point.
  • A class or pseudo-class has a value of 10 points. HTML selectors and pseudo elements have a value of 1 point.
  • An ID selector is 100 points.

Add them up with some high school math and you have your specificity value. Lets see some examples. Try and gues what the values will be before looking at them.

selector point value
p 1
div h1 2
.boat 10
div p.boat 12
#green 100
body #content .main p:hover 122

Some lesser known things

  • * has a rule of 0
  • not() has no value by itself but not(.btn) has a value of 10. Only whats inside the parentheses matter.
  • !important is superhuman, it can beat anything. Yes even inline styles which have a value of 1000. !important isn’t the best practice and makes debugging difficult because it breaks the natural cascade in the style sheets.
  • !important can be useful when debugging something you are currently working on to see if your declaration is simply being overrulled by something else. Also useful to utility calsses.
  • !important is like doing this…It goes to 11!!{:target=”_blank”}
  • Combinators have no value.

ul > li {color: red}
ul li {color: blue}
Blue Wins!

  • You can chain a selector to itself to increase its specificity.
  • .btn.btn will double its specificity Using an #ID is way wat too high, it is 100 points and cannot be overruled by 255 classes even.{:target=”_blank”}
  • .btn.btn has little maintenance overhead, has no reliance on location or context like an #ID might and this prevents the use of inline styles or god forbid !important.

A very useful specificity calculator can be found at the web address below.

Example of the specificity calculator website at the link below.

https://specificity.keegan.st/{:target=”_blank”}

On Creating Selectors.

You want to be a general as possible in your selectors because if you start using very specific selectors then in order to change something then the next selector needs to be more specific and so on and so forth. It’s like when you are at a bar or restaurant and then a loud group comes in, then your group needs to speak louder and eventually everyone is shouting and you get really busy inefficient selectors this way.

  • The shorter the rules, the better.
  • Shorter selectors are more efficient and easier to read.
  • Getting fancy with nav .nav > ul > li > a should be the exception when li a works just fine.

Thanks for reading. In short its not that hard but its also really easy to forget. I know I’ve had more than one occasion where this tripped me up.

The basics of .less

This week I learned the basics of less. It’s a preprocessor that is the strongest competitor to Sass. But that may change soon as bootstrap is moving towards sass. The two biggest things that I used this week were Mixins and using the &:Extend pseudo class.

A .mxin() or .mixin is basically a way of including a bunch one or more properties from one rule to another ruleset. Say you have a base button and you want to keep the main styling the same but change one or two things like the color of the button. You can make a .button base class and add a modifier to the next class. Button, button cancel example.

.Less

See the Pen eZLbzR by Franklyn (@franklynroth) on CodePen.

Compiled CSS


css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.btn {
display: inline-block;
width: 20%;
max-width: 200px;
border-raduis: 5px;
background-color: seagreen;
color: #fff;
font-size: 15px;
margin: 5px;
padding: 8px;
}
.btn-cancel {
display: inline-block;
width: 20%;
max-width: 200px;
border-raduis: 5px;
background-color: seagreen;
color: #fff;
font-size: 15px;
margin: 5px;
padding: 8px;
background-color: tomato;
}

&:Extend came up when we had a really long comma separated rule declaration list. At first it was super confusing to me but it is basically a pseudo-class in less which merges the selector that it is put on with the one what matches what it references. I think of it as extending the class or mixin that is passed in.

.Less

See the Pen aNjqaN by Franklyn (@franklynroth) on CodePen.

An example is instead of having a huge list of food, drink, desert etc. We can just use a css selector on what we want and use the &:extend() pseudo-class and pass in what properties that we want to extend to.

Compiled CSS

css
1
2
3
4
5
6
.list,
.food,
.drink,
.desert {
color: tomato;
}

There are many more features available in less and you can do much more logic like variables, passing values and functions. This was a super simple intro to just two of the features .less offers over CSS.

Intermediate git and the 2 commands that saved me.

I just moved from a project that was on SVN to git. Having not much git experience or command line experience, this was a little stressful. Especially since this project was using a form of git workflow called “git flow”. More about git flow here.
Oh and this all goes on top of the everyday stress I always get thinking “Do I know how to build this? “or “ What if I can’t build it in time?” The answer is mostly yes. It just takes time.

So here is what happened. I made my changes in my feature branch but forgot to keep them up to date with the develop branch. I did git pull origin develop to try and update my changes and followed a rebase tutorial and ended up with the dreaded “develop branch and “origin/develop” have diverged. I somehow was 12 commits behind and 5 ahead. I really messed up and had no idea how to fix it. The first thing I thought was okay, don’t panic this is only on your local machine, it’s not like you pushed any changes up (even if I did, it’s easy to roll back changes).


Git Flow Demonstration
An example of Git Flow. I was the bottom green one all sorts of behind from the purple develop branch.

Command #1: git reflog

Many people know about the git log command but a really handy one is git reflog. I could see where I wanted to roll back my changes to, essentially as if they never existed. There were two options.

  1. git revert Which undoes a committed snapshot by undoing the changes introduced by the commit and appending a new commit with the resulting content.
  2. git reset Which was a permanent undo. As if my mistake never existed, which is exactly what I wanted! Since it was only on my local branch I decided to go with this method. More on git reset here.

Git reflog command line
What happens when you run the git reflog command

Command #2: git reset –hard HEAD@{4}:

I had to put the HEAD@{4} in single quotes for it to work. I ran the command and crossed my fingers and hoped that it would work. A few seconds later I’m back where I started whoohoo!

Next up I did

  • git pull origin develop

    • This brought my feature branch up to date with what I missed in the develop branch.
  • I then fixed any merge conflicts manually. You can find them with conflict markers that start with <<<<<<< and end with >>>>>>>

    Alright, things are looking hunky dory in my feature branch. Now to actually merge the changes into develop.

    • git checkout develop
      • This switches me from the feature branch I was on, to the develop branch.
  • git merge feature/yourfeaturebranchname

    • This merges my feature changes to the develop branch. Since I already updated my feature branch with everything that had happened in develop with git pull origin develop, It only brings in the feature branch changes instead of bringing develop up to speed and also merging the feature branch.
    • git push origin develop
      • At last! I pushed up all of the changes from my feature into the develop branch. No merge conflicts or anything. I had a victory beer to celebrate (not really, it was 10:30am in the morning on a Wednesday…

I highly suggest that you use the command line if you currently use a GUI application. Its faster and much easier to troubleshoot when you can paste the exact error code you get into google. What I did was run the command and then see how it updates in the GUI application, I used sourcetree. If you want an intro to what git is there is an excellent write up at Luke Towney’s blog here. Please comment with any questions or comments, I’m still learning and their may be an even better way to do this. Thanks!

Expand Collapse toggle button.


I really really enjoy bootstrap. I use it constantly at work and it solves a lot of problems that Front-End Dev’s have had for a while. Probably the biggest one is its grid system, but it’s also got build in JavaScript components. I recently used Collapse.js to create an expand/collapse functionality so the user can view the entire news article or just the teaser.


You can find more about Collapse.js here

It needs a few important things to work.

  1. A container of what you want to show hide and that container must have an ID. In my case it was id="article-1-expanded"
  2. Set the class of that container to class=”collapse”
  3. A Button that toggles the show/hide functionality that must have.
    • data-toggle=”collapse”
    • data-target=”Must match ID in step 1"
{% codeblock html %}

    
  • This Is a News Article

    Wednesday, March 16, 2016 | By Franklyn Roth

    ua. Ut enim ad minim veniam, quis nostrud exercitation ullamco quis nostrud.

    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

  • {% endcodeblock %}

    In the CSS I am switching the content to display + Expand/- Collapse with:
    CSS Code of content: '+Expand'
    It could probably have been done with JavaScript/jQuery, but CSS makes it easy with a one liner and that lets you leverage Collapse.js which is already written for you by the smart people at Bootstrap.

    Naming the class took me a while. I eventually settled on btn-toggle because…

    1. It’s a button at the end of the day.
    2. Its main purpose is to toggle and it can be added to the Buttons.less file as a modifier.

    Bonus: Add in <span class=”sr-only”>Expand to full article</span> so that a user with a screen reader knows what the functionality of the button is.
    The entire code and working example can be viewed at the codepen below.

    See the Pen wGyVQQ by Franklyn (@franklynroth) on CodePen.