Vertical Center in CSS Without Transform

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

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: [pastacode lang=”bash” path_id=”d420a352b1c0c2c38bd15750ce4ffaea” file=”” highlight=”” lines=”” provider=”gist”/]    

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. To start, create a password for your user (root) Make a new user for day to day logins (production) Require ssh logins instead of username/password Remove root login Only allow login from specific IP (if using a static IP)

Lost My Box Tool – XScope

  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.    

Add Server Side Includes to your MAMP Localhost

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

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: [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=””

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

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: [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”

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.

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