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

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!

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.

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

    Book review and notes: The $100 Startup.

    This book was on my mind to read for many years. I’ve always wanted to start a side business of some sort in addition to my day job to earn a little extra money and gain new skills and experiences. I’m really glad I did and now have a dog sitting business that I do part time on nights and weekends. This book is a nice entry into how to do that.
    Below are my typed up notes throught the book.

    Convergence is where you find your ‘passion’ and ‘will people pay you for it’ collide.

    ie. For sitting

    Skill transformation: Know that you’re probably good at more than one thing.

    passion/sill + usefulness = success($$$)

    You only really need three things.

    • Product or service, what to sell.
    • Dog sitting sells peace of mind.
    • People willing to pay: Customers.
      -People that go on vacation or are too busy with work/other obligations.
    • A way to get paid. How to exchange product/service.
      -Paypal, check, cash.

    Some sources of inspiration:

    new technology or opportunity (ie apps after iPhone was launched)
    Changing space
    spin off or side project of another thing
    inefficiency in the marketplace
    value: Is creating something desirable.

    how to get $
    how much to charge?
    Can I get paid to do it?
    Ask yourself, how can I give more value?
    i. How can I help customers more?

    Always dig deeper to hidden wants and needs. Make your customer a hero and sell what people buy.

    Step 2
    Setup a simple bootstrap website for pet sitting. (use bootstrap for experience)

    “An ounce of action is worth a ton of theory.”

    Free time, less stress/worry
    Market the core benefit(emotional) vs a list of features.

    Peace of mind, stress free, anxiety free, time to go travel and enjoy life.
    Don’t get paid for the hobby itself, but paid for helping other people pursue the hobby or something indirectly related to it.
    ie. fluent in 3 months example.

    Build dog sitting business
    The beginning there is a fair amount of fumbling and a large number of hours spent working on projects that may or may not succeed.

    Demographics: People with $$ and a little time who value their dogs well-being. OR people with lots of free time to travel that want peace of mind when they are gone.

    Use surveys to understand customers and prospects
    PG 82

    Action Plan
    get started quickly and see what happens.
    Idea: Dog sitting is it useful to peole that will pay $$ for it.
    “meet and greet”. Time usually an hour plus travel.
    My first ‘sale’ = $163
    “Your 1st sale in a new business is a very big deal”

    PG 102
    Mission Statement: I help dog owners feel at ease about their dogs when the;yre not able to be with them.

    _“Plan as you go”_to respond to changing needs of your customers, but launch it ASAP.
    140 char mission statement

    Understand what we want and what we say we want are not equal.
    People like to buy, but we don’t like to be sold.
    FAQ or also known as
    “What I want you to know”
    pg 121
    Connect your offer to the direct benefits that your customers will receive.
    Think about possible objections and respond to them in advance.

    Provide a nudge or call to action. Why should they act now? “I’m filling up fast!”

    Contain admission of uncertainty and then augment. Work and talk fue

    One page promotion plan
    Spend 50% connecting and 50% creating.
    Spend $ on things that will A) Build awareness or B) Boost sales. Always remember to focus on profit.
    Price product or service in relation that the benefit provides the customer not the cost.
    Offer a limited range of prices. low medium think. (Think apple example).
    Get paid more than once for the same thing.

    None of the people I met offered the lowest price
    Compete on value, not on price. Only the market will decide if its too expensive for other people.

    Anchor a really high price and then other prices as well ie. $80 hike + overnight stay.

    Recurring billing model will produce more income over time than a single sale repeat clients.
    “It’s not market share, its share of the customer.”

    ch 11.
    Getting started is the hardest part.
    Provide testimonials on the site, upsell hiking adventures.
    Encourage referrals, “3-days free” if you refer me to a new client.

    Building a pet sitting business, for working professionals/ 9-5ers.
    Service: Raise prices regularly. When clients say your prices are too low, you should listen. ie. Ethan telling me that I am underselling myself.

    Maintain a practice of regular price increases so it becomes normal and expected. Price on the basis of value not time. Talk about yourself and your business.

    Track record, meet and greets, nights got $$

    What do you love to do and what people will pay for.

    Cliff Notes

    • Give people the benefits, don’t teach them how to fish..just give them the damn fish.
    • Know that you are good at more than one thing.
    • Complete one page business plan
    • 140 char mission statement
    • Action always beats out planning.

    “Don’t waste your time living someone else’s life.”

    Freedom is the goal and delivering value is the currency that will take you there.

    Lots of additional resources at 100 startup website

    • Charming the serpent
    • Undercurrent
    • Govinda
    • Fragile state.

    What exactly does {box-sizing:border-box} do?

    box-sizing: border-box

    I first came across border-box during an assignment on making my own css column layouts from scratch. Those examples can be found here and here. I won’t delve into them right now, but will explain what box-sizing: border-box actually does.

    According to the MDN{:target=”_blank”}, content-box is the default style of the box-sizing property. This means that the width and height properties are measured including only the content, but not the padding, border or margin. border-box means that the width and height properties include the padding and border, but not the margin.

    Now if you are like me, I needed to build a codepen example to truly understand what I ust read. Take a guess at what will happen to the code below. Then scroll down for the result.


     <div class="content-box"></div>

    <div class="border-box"></div>


    border: 10px solid black;
    border: 10px solid black;

    Check out the size of the red and green divs for yourself by hovering over them after pressingCTRL + SHIFT + C in chrome and notice the difference. The only propery that has changed other than the color is box-sizing:border-box; on the .border-box div.

    See the Pen border-box functional example. by Franklyn (@franklynroth) on CodePen.

    In short, the border: 10px solid black;is taken into account when calculating the width:350px and height:100px of the green div. This shrinks the content area down to 330px by 80px to ensure that the entire element takes up the declared height and width of 350px by 100px instead of taking up a larger area than initially declared like the red div does at 380px by 120px.

    How to create: Fixed header on scroll.

    I had a project at work that one of the designers wanted to load search results(Conference Rooms) below a search bar. As the user scrolled down the label “Results” would stay at the top of the screen. This was inspired by the phone scrolling that many of us see as we scroll down our contact lists on iPhone, windows or android devices.

    I found plenty of examples on how to do a fixed header on page load, but very few examples of how to incorporate a fixed header once the user scrolled past a certain point. After an “aha” moment while taking a walk around the office park I thought their must be some way to track the scroll position using JavaScript and then use a conditional to display the fixed header when appropriate.

    Below was the completed code needed.

    // Show / Hide fixed label on scroll
    $('.toolbar').scroll(function (e) {
    if (e.currentTarget.scrollTop >= 130) {
    else {

    I found out about jQuery scroll function{:target=”_blank”} and tracked the event as I scrolled using console.log, which then led me to e.CurrentTarget.ScrollTop{:target=”_blank”} to get the current vertical position of the scroll bar for the element.

    Moving down the event to find currentTarget and finally ScrollTop

    The next step was to create a conditional based on where the scroll bar was. If it scrolled past where I wanted to I would use the addClass(){:target=”_blank”} and removeClass(){:target=”_blank”} functions. Its not super important how you style it, ust that you put position:fixed and it looks as seemless as possible when you scroll down. You can edit the left and right values as well as the width to make it work for your requirements.

    My styles for the fixed label

    See the Pen Sticky Header on Scroll by Franklyn (@franklynroth) on CodePen.

    Of course once I thought of the solution and built it. I was able to find many more examples. scroll-fix-content{:target=”_blank”}, sticky-header-after-scrolling-down{:target=”_blank”}, sticky-header-after-some-scrolling{:target=”_blank”}
    Either way, I learned a lot by figuring out how to build this myself. Hope this code helps.