This one is quick.

Usually you can do:

[pastacode lang=”css” manual=”top%3A%2050%25%3B%0Atransform%3A%20translateY(-50%25)%3B” message=”” highlight=”” provider=”manual”/]

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

Here’s a little snippet:

[pastacode lang=”css” manual=”top%3A%20calc((836px%20-%20(56.25vw))%2F2)%3B” message=”” highlight=”” provider=”manual”/]

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

[pastacode lang=”css” manual=”margin-top%3A%20calc((100vh%20-%20(56.25vw))%2F2)%3B” message=”” highlight=”” provider=”manual”/]

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.

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:

[pastacode lang=”bash” path_id=”d420a352b1c0c2c38bd15750ce4ffaea” file=”” highlight=”” lines=”” provider=”gist”/]

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!

If you lose your box tool:

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

Boom.

Super simple edit the file:

[pastacode lang=”bash” message=”” highlight=”” provider=”manual”]

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

[/pastacode]

Uncomment the following:

[pastacode lang=”bash” message=”” highlight=”” provider=”manual”]

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

[/pastacode]

Then add an .htaccess file to your root:

[pastacode lang=”bash” message=”” highlight=”” provider=”manual”]

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

[/pastacode]

Restart MAMP and it should work like a charm!

So here’s the sitch yo:

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

[pastacode lang=”bash” message=”” highlight=”” provider=”manual”]

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

[/pastacode]

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:

[pastacode lang=”bash” message=”” highlight=”” provider=”manual”]

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

[/pastacode]

Now you’re using the right diff tool!

Then you can apply the patch like this:

[pastacode lang=”bash” message=”” highlight=”” provider=”manual”]

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

[/pastacode]

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:

[pastacode lang=”css” message=”” highlight=”” provider=”manual”]

device-aspect-ratio

[/pastacode]

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:

[pastacode lang=”css” message=”” highlight=”” provider=”manual”]

// 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;
      }
    }

[/pastacode]

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

Quick one today:

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

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

function stuff(e) {

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

}

[/pastacode]

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

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.

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

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

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];
    });
  });
}

[/pastacode]

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.