Skip to content

Instantly share code, notes, and snippets.

View cballenar's full-sized avatar

Carlos Ballena cballenar

6 followers · 10 following
View GitHub Profile
@cballenar
cballenar / gist:b71de8117b7042b01e92
Created August 21, 2014 17:16
Craft & Twig bits
{# Convert hyphenated-string to camelCase #}
{{ string | regex ( '/-([a-z])/e', 'ucfirst("\\1")' ) }}
{# Convert camelCasedString to hyphenated-one #}
{{ string | regex( '/(^|[a-z])([A-Z])/e', 'strtolower( strlen("\\1") ? "\\1-\\2" : "\\2" )', (type.handle) ) }}
@cballenar
cballenar / _setting-up-mt-self-managed-vps.md
Last active August 29, 2015 14:26
Walkthrough for setting up MediaTemple's self managed server with VirtualMin and getting your websites running.

Setting up MediaTemple Self Managed VPS

I recently moved from MediaTemple's Legacy (dv) 4.0 VPS server to their new Self Managed DV server. You get to save up some money at the expense of all the software that comes pre installed on a server. All you get when you rent one of these badboys is an empty box with your choice of OS. Sounds exciting!? You bet your ass it does! It can also be a bitch if you're not as familiar with how things work in a web server. Getting this setup helped me understand servers unlike never before and having full control over everything that happens in your box does feel kinda nice.

Installing VirtualMin

The best free application I found for managing websites is Webmin + VirtualMin. Though I would like to mention Ajenti, which looks pretty badass and seems to be in active development.

I come from Plesk which was definitely a superior tool but so far I envy noth

@cballenar
cballenar / css-baseline-grid.css
Last active October 14, 2015 00:08
/* This gist was inspired by DigitPaint [ http://advent2012.digitpaint.nl/13/ ] */ This is a baseline grid created using some (perhaps all) of the new CSS background properties. it simulates a baseline grid based on ems which will allow you to size according to your site's font size. A clear disadvantage is that it is limited to be a background.…
/* ---------------------------------------------------
Production Versions ( Minified )
--------------------------------------------------- */
/* Background */
/**/ .baseline{font-size:1em;background:none;background-image:-webkit-linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-image:-moz-linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-image:linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-size:100% 1.5em;background-origin:content-box;background-attachment:local}
/**/ .baseline *{background:none !important;outline:1px dashed rgba(100%,0%,0%,.5)}
/* Overlay + Hover switch */
/**/ body{position:relative}body:hover:before{width:100%;height:100%;display:block;content:"";position:absolute;z-index:9999;pointer-events:none;background-size:100% .75em;background-origin:content-box;background-attachment:local;background-image:-webkit-linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px);background-image:-moz-linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px);bac
@cballenar
cballenar / better-server-permissions.md
Last active November 6, 2015 22:09
Avoid having to manually change the permissions after adding files as root or another user. These commands have to be ran as root. After running these commands the files and directories inside www will inherit the ownership and permission given. 
# add user to www-data
gpasswd -a user www-data

# change ownership
chown -R user:www-data /var/www/

# find all files, set permissions to rw-r-----
find /var/www -type f -exec chmod 0640 {} \;
@cballenar
cballenar / typography-test.html
Last active December 9, 2015 18:28
The following gist was built to help developers test their websites, particularly how type elements line up in relationship to one another. This can be used in combination with a baseline grid for more precision. I can't remember who built this originally, but I think it's safe to assume that it was Jukka Korpela, as his name appeared in the cod…
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Typography Test</title>
<meta name="description" content="">
@cballenar
cballenar / index.html
Last active December 13, 2015 22:18
Numbers & CSS - Looking for ways to improve how columns and objects work in CSS
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper body">
@cballenar
cballenar / wrap-around.css
Last active December 14, 2015 03:58
Create the illusion an element wrapping around a container. While this technique has been around for a while. It reamins a very interesting style that can help certain pieces of content pop-up. Depending on the class you select the code will pull an element off to the left, right or both sides, and add a triangle for the wrap around illusion. Vi…
/* Wrap Around - http://jsbin.com/agegux/2/
---------------------------------------------------------------------------------
The following code allows you to create the illusion an element
wrapping around a container.
While this technique has been around for a while. It reamins a very
interesting style that can help certain pieces of content pop-up.
Depending on the class you select the code will pull an element
@cballenar
cballenar / my-terminal.md
Last active December 21, 2015 15:59
My Terminal Settings

My Terminal Settings

Saving & Sharing my terminal settings.

Tools

Settings

Local Command Prompt

@cballenar
cballenar / data-print.css
Last active December 22, 2015 09:58
Adding the data-print attribute to an element, will print the value after the element. This addresses elements that may contain information you want to see only when printed. This is a variation of the HTML5Boilerplate's solution to links [https://github.com/h5bp/html5-boilerplate/blob/master/doc/css.md#print-styles] . Live example: http://jsbin…
@media print {
/* data-print="print-me"
* ==================================
* Adding the data-print attribute to an element, will print the value after the element.
* This addresses elements that may contain information you want to see only when printed.
*
* This is a variation of the HTML5Boilerplate's solution to links
* [https://github.com/h5bp/html5-boilerplate/blob/master/doc/css.md#print-styles]. */
@cballenar
cballenar / browser-guides.css
Created October 21, 2013 04:32
In-browser Photoshop-like guides. After designing in browser for a little while there's been a few times that I wished I had guides in the browser so I decided to see how this worked out. Test page: http://jsbin.com/uHujOyo/3/edit
.guides {
div {
cursor: move;
content: ' ';
display: block;
position: fixed; }
#x {
top: 50%;
width: 100%; height: 1px;
background: cyan; }