Finding A Pixel in Canvas Image Data

I never have time, so this will be quick.

Let’s say we want to find a pixel index amoung all that image data canvas returns with:

var imgData = ctx.getImageData(x,y,w,h);

The formula is simple:

var y = [ROW];
var x = [COLUMN];
var w = imgData.width;
var pixIdx = (y * w + x) * 4;
var pixel = imgData[pixIdx];

Basically, you need to draw this one out. Let’s say we have a 3×3 image. Each pixel would have it’s own zero based index. The width would be three. Each row would stretch from 0 – 2 and each column would stretch from 0 – 2.

pixels

 

Now let’s say we want to select the 7th pixel. We know the formula is:

index => (y * w + x)

So we can calculate the index by selecting Row 2 and Column 1. Just like battleship.

pix-index

 

The only confusing part is why we should multiply by 4 at the end! It’s simple really, there are 4 values for every pixel (r,g,b,a).

To loop through and get the index for every pixel, might look something like:

for(var x = 0, w = imgData.width; x < w; ++x) {
	for(var y = 0, h = imgData.height; y < h; ++y) {
		var pixIndex = (y * w + x) * 4;
		var r = imgData[pixIndex];
		var g = imgData[pixIndex + 1];
		var b = imgData[pixIndex + 2];
		var a = imgData[pixIndex + 3];
	}
}

That’s it.

Mars VR Demo

Just wanted to post this. The source is pretty self explanatory and i’ll put up a github later once I clean up a few things.

I’ll explain later. Be patient, it takes a second to load.

DEMO –>

XHR Doesn’t Return responseURL in iOS8

So you’ve been making ajax calls and everything is going great.

Your onSuccess message looks something like this:

var onSuccess = function(data) {
    console.log(data.xhr.responseURL)
}

All of a sudden your QA professional says things aren’t working in iOS8!

No prob, bob. It’s actually that iOS8 and below doesn’t return a “responseURL” attribute of the xhr object. Look at the difference:

iOS8 xhr object:

ios8

Everything else:

everything-else

Anyway…

Vertical Center in CSS Without Transform

This one is quick.

Usually you can do:

top: 50%;
transform: translateY(-50%);

But sometimes you need to vertically center something without the use of transforms.

Here’s a little snippet:

top: calc((836px - (56.25vw))/2);

If you don’t know the height of the parent (as is most cases) this might work:

margin-top: calc((100vh - (56.25vw))/2);

And here’s a little demo. The “marker” div is using transforms. The “centered” div isn’t:

 

See the Pen zKwEoZ by Mike Newell (@newshorts) on CodePen.

Downloading Batch Images From S3

I know I know…

You’re afraid of the CLI, there’s not a good chrome extension and you can’t be bothered to boot up Firefox just for s3fox…

Dude, the CLI is so simps:

brew install awscli

aws configure

# 1. log into your aws console, click on "security and credentials" in the menu
# 2. access your IAM page, create a new user & group with access to your bucket
# 3. copy credentials to a safe spot
# AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
# AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
# Default region name [None]: us-west-2
# Default output format [None]: ENTER

#check you have access
aws s3 ls bucket-name

#download a whole folder to a folder on your Desktop
aws s3 cp s3://bucket-name/folder1/ ~/Desktop/folder1 --recursive

# profit

 

 

Securing Your Linux Server

There’s a great post about securing your new linux server (ubuntu) here:

http://www.codelitt.com/blog/my-first-10-minutes-on-a-server-primer-for-securing-ubuntu/

I wanted to summarize here and explain some details.

  1. To start, create a password for your user (root)
  2. Make a new user for day to day logins (production)
  3. Require ssh logins instead of username/password
  4. Remove root login
  5. Only allow login from specific IP (if using a static IP)
  6. White list only the ports you need, disable everything else
  7. Enable automatic updates

You should be all set! There’s of course more detail at the other page, but in general, these steps will ensure you have a decently secure system.

Now all you need to do is watch what you upload to the server!

 

Lost My Box Tool – XScope

 

If you lose your box tool:

box-tool

You can get it back by selecting it, as I’ve done in the photo above, then hitting “cmd + shft + 5”

Boom.

 

 

Add Server Side Includes to your MAMP Localhost

Super simple edit the file:

pico /Applications/MAMP/conf/apache/httpd.conf

Uncomment the following:

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

Then add an .htaccess file to your root:

AddType text/html .shtml
AddHandler server-parsed .html
AddHandler server-parsed .shtml
Options Indexes FollowSymLinks Includes

Restart MAMP and it should work like a charm!

SVN Create a Patch with Kaleidoscope

So here’s the sitch yo:

You have kaleidoscope as your diff tool. You go to make a patch:

svn diff > ~/Desktop/my-cool-diff.patch

Then you realize that it’s opening kaleidoscope instead and not exporting your diff to a file.

Well the problem is you’re using the wrong program. Do something like this:

svn diff --diff-cmd /usr/bin/diff -x "" > ~/Desktop/modal-fix.patch

Now you’re using the right diff tool!

Then you can apply the patch like this:

svn patch ~/Desktop/my-cool-diff.patch

 

Targeting iPhone 5 vs 6 with Media Queries

So most blogs will tell you to target different versions of iphone using “device-width”. There’s a good example of this here: http://stephen.io/mediaqueries/#iPhone. While these media queries aren’t wrong, they pose a challenge when trying to target an iPhone 5 vs iPhone 6. For that we need something a little more specific.

Fortunately, we have a media query that can help us out called:

device-aspect-ratio

With this we can target individual devices, lucky for us, the iphone 5/5s and 6/6s and 6+/6+s all have different aspect ratios:

  • iPhone 5/5s: 40/71
  • iPhone 6/6s: 375/667
  • iPhone 6+/6+s: 9/16

So the following would target each device:

// iphone 5/5s portrait/landscape
    .download-iphone5 {
      @media screen and (device-aspect-ratio: 40/71) {
        display: block;
      }
    }

    // iphone 6/6s portrait/landscape
    .download-iphone6 {
      @media screen and (device-aspect-ratio: 375/667) {
        display: block;
      }
    }

    // iphone 6+/6+s portrait/landscape
    .download-iphone6 {
      @media screen and (device-aspect-ratio: 9/16) {
        display: block;
      }
    }

This might be useful if you are trying to display a link only on iphone 5 vs a different link on iphone 6.

More here: http://stackoverflow.com/questions/12539697/iphone-5-css-media-query