How to set up an HP Deskjet 3050 Printer on Google Cloud Print

I’ve spent a lot of time going through forums and message boards looking for directions on how to set up my standard (non e-print ready) printer with Google Cloud Print, and I found quite a few different “answers.” But none of them worked. Some had me creating accounts at hp.com and doing this and that. I gave up for a while, and thought I’d have to buy a new printer. But it turns out, it’s pretty SIMPLE.

Here’s what I did:

  1. Confirm that your printer is connect to your router (push the wireless button on your printer to see if it displays an IP address).
  2. Add printer to a Mac or PC computer. Print from your PC/Mac to test that you are connected wirelessly (you may need a friend’s computer for this).
  3. Go to the chrome browser on your PC/Mac and go to Chrome advanced settings > Google Cloud Print and hit the “Manage” button.
  4. Log in with your google account (the one you use on your Chromebook).
  5. Add the printer to your google cloud printing account (still on your PC/Mac computer)
  6. Now go back to your Chromebook and print something!

This seems much simpler than logging into hp.com and setting up your printer through them. Try it out, and let me know if it worked for you, or if it didn’t. I hope this helps all the people out there who have been having trouble with this.

Get Ready for Meteor Day!

Meteor Day is coming on November 6, 2014. So get ready to meet some other Meteor developers, learn more about what Meteor is, show off what you’ve been creating, and overall have a good time. Stay tuned for more info about where it will be. As of right now I’m working on getting approval to host MeteorDay at GangPlank in Chandler, AZ. Stay tuned!

UPDATE: Our location at GangPlank in Chandler has been approved, and our Meetup group page is live. It’s going to be the first Meteor Meetup group in Phoenix, so come get started with us! Here’s the link: http://www.meetup.com/Meteor-Phoenix

Changes

Just gave BigWilliam.com a facelift. Still more changes to come. Enjoy…

Real-time Internet Data

Check out this interesting chart from pennystocks.la that shows just how much data is getting transferred every second over some major internet-based companies:


Click the animation to open the full version (via PennyStocksLab).

jQuery fire event AFTER window resize is completed

I found this useful snippet here on Stack Overflow, super useful for when you need to fire an event only after the user is done resizing the window, or other events. Works great.

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();


// Usage
$(window).resize(function () {
    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");
});

Auto distribute footer widgets in WordPress, with Bootstrap (roots theme)

Here’s a code snippet to help auto distribute widgets in your footer. It will automatically add the correct Bootstrap class to each widget, so if you have 2, the classes will be “col-sm-6″ but if you have 3 widgets then the classes will be “col-sm-4″, etc.

This is pretty specific for the environment I work in, which is WordPress, using the Roots theme starter and Bootstrap. First, here is the Javascript. Place this in _main.js (if using roots).

// Distribute footer widgets evenly
var footer_widgets = $('footer .row > .widget'),
    widget_count   = footer_widgets.length,
    col_num        = Math.floor(12 / widget_count);

footer_widgets.each(function(index, val) {
    $(this).addClass('col-sm-' + col_num);
});

Here is what the HTML/PHP looks like. This code is found in templates/footer.php (roots theme). Notice that I wrap it in the “row” bootstrap class…

<div class="row">
    <?php dynamic_sidebar('sidebar-footer'); ?>
</div>

 

Turn off responsive behavior for Bootstrap 3

Bootstrap 3 comes as a responsive layout out of the box – which is great. But sometimes you need to make a site which is not responsive. Basic instructions are found here, but they don’t say how to disable the navbar responsive behaviors.

So, that’s why I’m writing this. It’s fairly simple, so here’s how you do it…

  1. Remove the meta from the header
  2. Set a static container width
  3. Set the media query breakpoints (to prevent navbar from collapsing)

Step 1: Remove the meta from the header

Go to the header of  your site (usually head.php or header.php in WordPress) and comment out this line:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Step 2: Set a static container width

Add this in your css file. Just create a selector like this:

.container { width: @container-desktop !important; }
note: @container-desktop is defined in variables.less
You could also just use any number you like, i.e. 940px

Step 3: Set the media query breakpoints (to prevent navbar from collapsing)

Find the variables.less file inside bootstrap, and starting around line 214 you will see the variables that control when the @media queries fire in your CSS. Change the mobile screen variables to 0. You can leave the desktop values, or any value which matches the container you just set.

/**
 * File: bootstrap/variables.less
 * The following starts around line ~214, but has been
 * reduced here just to show what was changed.
*/
// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  0; //480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  0; //768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

Optionally: You could accomplish step 3 by just changing the container sizes in variables.less (line 629) to just be a single size you specify (i.e. 960px;)

Notes

When doing a non-responsive site, I generally like to still keep the large and medium media queries functioning in Bootstrap, just so that the site expands a little for people with larger screens. The difference in sizes is usually not significant enough to create extra work, but it also makes the site a little nicer for different screens.

Only Coin, I just got one

So I just pre-ordered an Only Coin as a Christmas Present for someone. It’s a really cool idea that I think will really be fantastic. Check out the video and then if you want one, the link below will take you to their website (it’s an affiliate link, so that if you buy one, I’ll get $5 off my order). It’s a new company so they are trying to get the word out.

Click Here to check it out (onlycoin.com)