bash

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

 

 

bash

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!

 

blender

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.

 

 

bash

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!

bash

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

 

code

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

 

javascript-site

JavaScript Function to get Target From Event

Quick one today:

When you’re looking for the target from an event. It’s a good idea to do the following:

function stuff(e) {

    var target = e.target || e.srcElement;

}

For older IE browsers don’t have “.target” and instead have “srcElement”

javascript-site

Curry vs Factory vs Class

Hey all just thought I’d make a quick rosetta stone of different ways to say the same thing.

In this example, I setup different forms of currying, a factory and a class all serving to become a messenger app.

Rule #1: You must pass a name as an argument first.

Rule #2: later in your code, you must pass a message.

See the Pen Messenger Rosetta Stone by Mike Newell (@newshorts) on CodePen.

javascript-site

Organizing Table Data

Quick one today, I just wanted to add a cute little function that quickly traverses a table and organizes an array of html dom elements by table head tag (th).

NodeList.prototype.toArray = function() {
  return Array.prototype.slice.call(this);
};

function CollectData(className) {
  var table = document.querySelector(className);
  var thead = table.querySelector('thead');
  var tbody = table.querySelector('tbody');
  var ths = thead.querySelectorAll('th').toArray();
  var trs = tbody.querySelectorAll('tr').toArray();
  
  return ths.map(function(th, idx) {
    return trs.map(function(tr) {
      return tr.querySelectorAll('td')[idx];
    });
  });
}

It basically, manually walks the table, then returns an array based on what it finds in the table headers. The Nodelist function at the top just adds a “toArray()” function to the nodelist object so you can get output from querySelector as an array.

javascript-site

Very Simple Line Graph With D3

I’ve been learning more about D3 and decided to apply what I learned about composition to make a very simple line graph. I’ll just post the pen and comment on it below:

See the Pen Very Simple Line Graph with D3 by Mike Newell (@newshorts) on CodePen.

Basically, the important parts are that I’m using a factory to create “LineGraph()”. It takes some data, a class name of the actual svg element to target and some default options. Once you call, “lineGraph.draw()” the real work begins.
First we get the dimensions of the svg element on the page:

var svgElem = state.svg[0][0];
  var width = svgElem.offsetWidth;
  var height = svgElem.offsetHeight;

Then we get the min,max of each set of data. In this case we get min/max for x and y datasets.

var extentX = d3.extent(state.data, function(d) { return d.x });
  var extentY = d3.extent(state.data, function(d) { return d.y });

We also need to tell the graph how to scale the data to actual dimensions of the graph itself. This is done by plugging the width and height of the graph into a function d3 can use to scale our data points. We also add some padding so the data doesn’t touch the edge of the graph and get cut off. Moar on scaling here: http://www.d3noob.org/2012/12/setting-scales-domains-and-ranges-in.html

var scaleX = d3.time.scale().range([state.padding, width - state.padding]);
  var scaleY = d3.scale.linear().range([height - state.padding, state.padding]);
  scaleX.domain(extentX);
  scaleY.domain([0,extentY[1]]);

Once we have our data ranges and scales, we can create our line:

var line = d3.svg.line()
    .x(function(d) { return scaleX(d.x); })
    .y(function(d) { return scaleY(d.y); })
    .interpolate(state.interpolation);

In many cases, d3 will return a function you’ve prepared before hand to run on some data. In this case we prepare a line. You can see we pass functions into the x and y values.

function(d) { return scaleX(d.x); }

These functions are used by d3 to “loop the data” and the return value is what the actual data value is set to. So we use our scale functions here to scale the x and y values after we have pulled them out of each object. We then return the scaled value to the loop.
Finally, we set up our “draw()” method, when called, will draw the actual line on the graph:

draw: function() {
      state.svg.data([state.data]).append('g').append("path").attr("d", line);
    }