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.

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 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.


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.


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.


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

Compiled CSS

.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.


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

.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.

    Why I restarted this blog.

    I really wanted to start a blog around this time last year. I really did and I regret not doing so. I was still in school, working at a call center during the day and riding my bike in the Colorado winters 4 miles down and back for night school. I’d later learn that everything I learned at the community college was outdated, but I did do a few very important things.

    1. It got me an interview at my current company.
    2. Introduced to the very basics of programming.

    My blogging plan was to follow my experience going from someone just about finishing school and to their very first paid internship. Hooray no more answering phone calls for a living! Well school got fairly busy and I honestly slacked off in writing the blog. I origionally got the idea from John Sonmez over at simpleprogrammer.com. Their is even a 3 week course that walks you through the entire process.

    I remember applying for the internship and thought, this is way over my head but I’ll apply anyways. I then received an email from HR with a few basic screening questions. What does semantic HTML mean to you, in your own words? I passed that and got invited to a phone interview. It went well and it went longer than normal, which is usually a good sign. I put my Codepen Account on my resume and the hiring manager actually poked around and asked me about my school projects. He asked how can this be made better. It was the midterm project for my JavaScript class.

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

    I stumbled through something about how I am setting the value twice and I could just grab it from the HTML? I honestly had little to no idea. He then says “Yea, I’d like to see that”. Let’s setup a time to meet in the office next week. After the call I was ecstatic but also horrified that I had to figure out how to make this calculator better. After all weekend, lots of google, stackoverflow and coffee I had a solution. From 64 lines of JavaScript down to 18.

    See the Pen A better JavaScript Calculator by Franklyn (@franklynroth) on CodePen.

    I didn’t have a car at the time, so I rode my bike and took 3 buses to get from Fort Collins, CO to the office in Boulder, CO for the interview. It was in February and thankfully in the mid 50s. Interview went really well, and the next day as I was writing the thank you letter I got an email from HR that they are moving to a formal offer for the Summer 2015 internship. Internship went well and I eventually landed up on the Front End Development team after it.

    I again restarted this blog after wishing I had posts of what I was doing during the first few weeks of the internship, the middle and the stressful last few weeks with everyone wondering if they were getting offers or not.

    John Sonmez was a big motivator in his free blogging course and is like the Tim Ferriss of software development/lifestyle design. His course pushes homework on you and to my pleasant surprise, he responds to every email I have sent. I definitely enjoyed the course and his advice on simpleprogrammer.com is more and more helpful as I settle into my new developer role. The actual course link is here

    The blog will be about all the things I experience in my first year as a front-end web developer. Expect to see course content on all things HTML, CSS and JS and how to extend your soft skills to have successful code reviews, standups and taking initiative on presentations.

    Accessible Data Tables.

    The semantic purpose of a data table is to present tabular data. Sighted users can quickly scan the table but a screen reader goes through line by line. Proper markup must be added to help the screen reader help make the correct associations that a sighted user would.

    Example of an accessible data table.

    See the Pen Accessible Data Tables by Franklyn (@franklynroth) on CodePen.

    Making an accessible table isn’t hard and can be broken down into two main things.

    1. Have a table caption.

    2. Use scope=”col” on column headers, and scope=”row” on row headers.

    Table Captions

    Table captions are added right after the opening

    tag with Your caption goes here.

    The screen reader will then say “Table with 3 rows and 4 columns, Monthly Budget” or something to that effect. Without this, the screen reader will just start reading off the values inside the table, which is going to be frustrating and not super useful. Imagine reading and entire table cell by cell and then piecing together what the table is trying to tell you.

    See the Pen Accessible Data Tables by Franklyn (@franklynroth) on CodePen.

    Scope=”col” or scope=”row”

    The scope typically goes on the element. If the is a column like the “Amount Earned”, “Amount Spent” and “Amount Saved” are in my example, you would put them all as scope=”col”. This lets the screen reader know that the ’s are column headers for that entire column.

    The scope=”row” is typically put on the first of the row. In this case “January” and “February” would get them.

    The screen reader will most likely be able to figure out what is a column header and row header, but assigning this makes it unambiguous to the screen reader on what is a row or column header and how to proceed.

    That’s pretty much it on how to make an accessible table. Use them for tabular data, assign a caption and use scope=”col” or scope=”row”.