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

    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 me..dog 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 model..ie 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.

    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.

    javascript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // Show / Hide fixed label on scroll
    $('.toolbar').scroll(function (e) {
    //console.info(e.currentTarget.scrollTop);
    if (e.currentTarget.scrollTop >= 130) {
    $('.results-label').addClass('fixedSimilarLabel');
    }
    else {
    $('.results-label').removeClass('fixedSimilarLabel');
    }
    });

    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.

    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.

    HTML

    1
    2
    3
    <div class="content-box"></div>
    <div class="border-box"></div>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .content-box{
    background-color:tomato;
    width:350px;
    height:100px;
    border: 10px solid black;
    }
    .border-box{
    background-color:seagreen;
    box-sizing:border-box;
    width:350px;
    height:100px;
    border: 10px solid black;
    margin-top:10px;
    }

    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.