Have you ever noticed how we all silently think, "My amount is okay" about our life choices? It's a common thought process that really shows up when we see others making different choices. Whether it's about how much we spend, our lifestyle choices, or even our habits, we all have our own 'amounts' that feel right. This idea is what led me to come up with the "My Amount" concept a few years back.

"My Amount" is one's personal acceptable limit on a consumption, purchase or other decision.

'My Amount' Examples

Example: one person might easily spend $100 on high-quality jeans but choose to be frugal when it comes to eating out. Another might never spend over $40 on jeans 'cause 'why would you?', yet loves to drop $100 on a nice dinner out.

But it's not all about money, it can be about anything. Take drinking habits: for some, four drinks is their max for a big night out, citing their health, while others might set their limit to ten (or infinity) 'cause 'I like to enjoy myself'. Each 'amount' reflects what we consider okay for ourselves, influenced by our health views, lifestyle, and personal choices. I propose we try to appreciate these differences as what makes us unique, in an effort to reduce judgement and seek empathy.

Where do our 'Amounts' Come From?

So, why do we all have different 'amounts'? From my observations, it has a million factors. Our upbringing, culture, relationship with money, genetics, and life experiences shape our views. What's a splurge for you might be a no-brainer for someone else. It's all about perspective.

My Amount is Okay (and so is yours)

We've all been there, judging someone else's 'amount'. But maybe we can flip the script and get curious instead. Understanding why someone has a different 'amount' can open our eyes. It's about stepping into their shoes and seeing things from their angle.

'My Amount' is a lens through which we all view the world. By recognizing and respecting the different 'amounts' people have, we're taking a step towards being more understanding and less judgmental. Next time you bump into a different 'amount', why not ask about the story behind it?

QR Code contents:

(Right Click > Save Image As...)

I wrote this simple script (that uses the free google charts api) because I like QR Codes and I hate that everyone over complicates this.

Many of the "fancy" generators (that you often have to pay for) stylize the QR Code too much, making them hard to scan by many phones. Just keep it simple and use a clean QR code. Enter your URL or whatever else you want and this will output the easiest to scan QR Code for you. Fast, east, and 100% free.

The strike line adjusts in thickness to match your font size and it slightly transparent to help with readability.

See the Pen Better Strikethrough / Strikeout Style (good for prices) by Jesse Schoberg (@schoberg) on CodePen.

You can see the code in the above pen. In short we've removed the text-decoration and used the ::before pseudo-element to create a nice angled line that even has rounded ends that you can observe at larger font sizes.

Great news! Eric Franklin has created a WP Plugin using my code and added Vimeo support.

Background

I noticed that YouTube <iframe> embeds are really slow. Upon investigation they are ~450kb for each embed. This is not the video, just the "ready to play" player. If you have a few videos on a page this could be loading a few mb of data for videos that never even get played.

The Solution

The idea is simple. Only load the screen shot of the video with a play button, then load the player only after it's been clicked. This essentially reduces each instance from ~450kb to about ~30kb.

With a bit of research I found out I was not the only one with this idea. However, no one had put together a comprehensive solution that was up to the current coding standards and fully responsive. My version is based off of the code of Alexis Ulrich who had a pretty good version of this.

Working Example & Code

See the Pen Fast & Agile YouTube Embed by Jesse Schoberg (@schoberg) on CodePen.

Usage

1. You must have jQuery running on your page. This can be done by including a single line of code that pulls from the Google CDN as shown here.
2. Any spot you want to include a video simply put in the <div> as shown above on the HTML tab. Just set the id of the <div> to the ID of the video on YouTube.
3. The first HTML example just shows the standard embed. If you'd like to get fancy and add some parameters, you can by adding them to the div's data-params attribute as shown in the second example.
4. Add the CSS shown to your style sheet.
5. Add the javascript to your existing .js file, or directly into a <script> tag.

Notes

• Works on all screen widths while keeping the correct dimensions of the video. However, on mobile the user will have to tap a second time due to YouTube disabling "autoplay" on mobile. (I think this is a minor inconvenience for the data saved)
• Early versions of the responsive video concept I'm using have an additional 25px of height to accommodate the YouTube player bar. I have removed this as YouTube is now loading HTML5 players and they are truly 16:9.
• It dynamically loads the http or https version of the screen shot and the embed.
• The thumb I'm loading is about 30kb and is the "HQ Default". If you'd like to change this based on your needs there are some other options. Just replace hqdefault.jpg in the JS code with the chosen option.
• The "play" button is image free and can be edited to match your site in the CSS. Just be sure if you alter the height/width of anything you also watch the margin which is centering it.

Turns out I wasn't the only one.. a quick search yielded this post over at Creative Code. The only thing I didn't really like about it is that it doesn't apply the wrapper on the fly. I don't like to add extra markup when I don't have to, especially when it's not even for all users. So I decided to make a tweak to apply the wrapper on the fly with jquery. Here are some examples in action (see the Plans table)

jQuery

$(document).ready(function(){ 
// Mobile tables
     if ($(window).width() < 980){
          $("table").wrap( '<div class="mogrid"></div>' );
     }
});// end document.ready

I used 980 as my breakpoint as that is the width of my largest desktop size, but you could set this to whatever you want. Also if you didn't want to do all tables you could replace $("table") with something identifying the particular tables you want to effect. Maybe like: $("table.datagrid")

CSS

.mogrid {overflow-y:auto;-webkit-overflow-scrolling: touch;}

That's it! On the Creative Code example they use overflow-y:scroll; Which I replaced with overflow-y:auto; as that will only allow scrolling when needed opposed to all the time. Also big hat tip to them for the -webkit-overflow-scrolling: touch; That makes the scrolling feel great on iPhone.

Visual and Working Examples

What it looks like (non functioning)

Full Code and Working Example

Clean Example

How it works

This is so easy to implement.. it's fantastic. Essentially you build your form how you normally would using input type="checkbox" and then using a little jQuery we hide the original input and create a new div class="tog" which is the toggle. Then when you click the toggle it adds / removes class="on" from the element and adds/removes checked from the hidden input so your form will submit the data as expected :)

The HTML

Your form just needs to have a checkbox input with a name and id.

<input id="toggle1" type="checkbox" name="toggle1" />

The Jquery (put this in the head or external JS file)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
/* Super Simple Fancy Checkbox by davemacaulay.com updated by schoberg.net  */
(function( $ ) {
    $.fn.simpleCheckbox = function(options) {
        var defaults = {
            newElementClass: 'tog',
            activeElementClass: 'on'
          };
        var options = $.extend(defaults, options);
        this.each(function() {
            //Assign the current checkbox to obj
            var obj = $(this);
            //Create new element to be styled
            var newObj = $('
<div/>', {
                'id': '#' + obj.attr('id'),
                'class': options.newElementClass,
                'style': 'display: block;'
            }).insertAfter(this);
            //Make sure pre-checked boxes are rendered as checked
            if(obj.is(':checked')) {
                newObj.addClass(options.activeElementClass);
            }
            obj.hide(); //Hide original checkbox
            //Labels can be painful, let's fix that
            if($('[for=' + obj.attr('id') + ']').length) {

                var label = $('[for=' + obj.attr('id') + ']');
                label.click(function() {
                    newObj.trigger('click'); //Force the label to fire our element
                    return false;
                });
            }
            //Attach a click handler
            newObj.click(function() {
                //Assign current clicked object
                var obj = $(this);
                //Check the current state of the checkbox
                if(obj.hasClass(options.activeElementClass)) {
                    obj.removeClass(options.activeElementClass);
                    $(obj.attr('id')).attr('checked',false);
                } else {
                    obj.addClass(options.activeElementClass);
                    $(obj.attr('id')).attr('checked',true);
                }
                //Kill the click function
                return false; 
            });
        });
    };
})(jQuery);

$(document).ready(function(){ 

// replace checkboxes with Toggles
$('input:checkbox').simpleCheckbox();

});// end document.ready
// ]]></script>

You'll note at the very end is where I actually call it. In my example I'm hitting all checkboxes. You can easily change that by say putting id="userform" or whatever on your form tag and then replacing input:checkbox above with #userform input:checkbox

CSS

/* === Start Schoberg.net Toggle Switches === */
div.tog{display:block;margin:1em auto;height:40px;width:100px;position:relative;cursor:pointer;font:18px/18px arial;background:#ccc;
-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;}
div.tog:after{content:'';display:block;height:30px;width:40px;background:#fff;position:absolute;top:5px;left:5px;
-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;}
div.tog:before{content:'OFF';position:absolute;right:11px;top:12px;color:#fff;}
div.tog:hover:after{left:10px;}
div.tog.on:before{content:'ON';right:60px;}
div.tog.on{background:#0c0;}
div.tog.on:after{left:55px;}
div.tog.on:hover:after{left:50px;}
/* === End Schoberg.net Toggle Switches === */

Bonus Styles!

OK don't dig the flat square look? Here's an example of something a bit more "realistic".

Now this can be altered to your needs, I'm using 0.2 seconds of transition and the "ease" effect. You can pop over to w3c for all the gritty on property. But in short just add this to the css of any link (or other element you have associated a :hover with) and BAM. Nice smooth animation in everything except for IE. (IE10 will support it but that's not quite out as of this writing)

The css3 transition code

-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;-ms-transition: all .2s ease;transition: all .2s ease;

css3 transitions working example

Here is a working comparison example over at jsbin.

The if/else shorthand php snippet

<?=$age=='old'?'Hi Old Guy':'Hi Youngster';?>

The breakdown of the statement in a diagram

In this example we say "if the $age is old" then echo "Hi Old Guy" else echo "Hi Youngster". The syntax highlighting is not perfect since I'm using the shorthand open and closing php tags. But this is the absolute shortest you can make this statement. You'll also notice I'm using single quotes. This is handy because then you do not need to escape double quotes like in the example below that I use a lot for adding a class to a tag.

Adding a class to a tag with a php shorthand statement

<a href="about.php" <?=$page=='about'?'class="now"':'';?>>About Us</a>

In this example I have a simple anchor tag for my "About Us" menu item. Then I've put in the conditional statement indicating if the $page variable is equal to "about" then echo class="now". Then of course you will have some additional styling put onto your .now class to indicate the current page. Then in the top of your about.php file you just have to set the $page variable to $page='about';.

<?php if (date('Ymd') &gt;= '20120120' and date('Ymd') &lt;= '20120125' ): ?>
Show the promo banner
<?php else: ?>
Show the normal banner
<?php endif; ?>

So in English that says.. if today’s date is greater than or equal to 2012-01-20 and it’s less than or equal to 2012-01-25 show the promo banner. Otherwise show the normal banner.

Or if you only want to show the promo banner during some dates and do not have alternative content you can just end the statement like this:

<?php if (date('Ymd') &gt;= '20120120' and date('Ymd') &lt;= '20120125'): ?>
Show the promo banner
<?php endif; ?>