Skip to content

Instantly share code, notes, and snippets.

View renatocarvalho's full-sized avatar
💭
🤘✨

Renato Carvalho renatocarvalho

💭
🤘✨
122 followers · 329 following
View GitHub Profile
@renatocarvalho
renatocarvalho / example.html
Created June 17, 2010 12:20 — forked from chriseppstein/example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0068)http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Compose a Vertical Rhythm example</TITLE>
<LINK rel="stylesheet" type="text/css" href="sassy.css" title="sassy">
<LINK rel="alternate stylesheet" type="text/css" href="original.css" title="original">
</HEAD><BODY>
<H1>Aboard Minerva off the Coast of New England</H1>
@renatocarvalho
renatocarvalho / gist:2384612
Created April 14, 2012 13:55 — forked from jmwhittaker/gist:847243
Border-image CSS3 Mixin for Compass & SASS
/* Mixin for Compass - border-image
$border-image([$image-url], [$offsets], [$repeats])
Example:
@include border-image(url(../my_image.png), 10, stretch)
@include border-image(url(../my_image.png), 10 5 10 5, stretch repeat)
---------------------------------------- */
@mixin border-image($url, $offsets, $repeats) {
@renatocarvalho
renatocarvalho / mobile-meta-links.html
Created April 24, 2012 04:13
iOS Web App Configuration
@renatocarvalho
renatocarvalho / web-app.html
Created April 24, 2012 04:37 — forked from tfausak/ios-8-web-app.html
Web app with icons and startup images for iOS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<!-- iPhone -->
<link href="http://taylor.fausak.me/static/images/apple-touch-icon-57x57.png"
sizes="57x57"
@renatocarvalho
renatocarvalho / url-scroll-fix
Created May 3, 2012 05:46 — forked from foliomob/url-scroll-fix
iOS webkit hide url bar and native scrolling
<!DOCTYPE html>
<html>
<!-- NOTES
I've been looking for a simple way to persistently show a header and hide the url bar (beyond just position:fixed; top:0, which is only persistent until you scroll back home). I think this is it. Maybe there are better ways, but this sure is simple! One thing that's missing though is to have the URL bar disappear again once you scroll anywhere else on the page.
It's based on the awesome work of mattsahr, bjrn, and bradbirdsall here: https://github.com/joelambert/ScrollFix/issues/2. It's not the problem they were trying to fix, but it's an awesome collateral benefit. To get what I was looking for, I tore a lot of their stuff out, and made the simplest starting file I could.
I tested it on an iPhone running iOS 5.1 and it seems to do what I was looking for.
@renatocarvalho
renatocarvalho / dabblet.css
Created September 19, 2012 22:46 — forked from Daniel-Hug/dabblet.css
A "deeper" indented text effect with the :before and :after pseudo-elements.
/**
* A "deeper" indented text effect with the :before and :after pseudo-elements.
*/
html, body {
height: 100%;
}
body {
margin: 0;
@renatocarvalho
renatocarvalho / gist:4250910
Created December 10, 2012 14:39 — forked from boriskaiser/gist:3908158
Easy retina-ready images using SASS + Compass
=background-2x($background, $file: 'png')
$image: #{$background+"."+$file}
$image2x: #{$background+"@2x."+$file}
background: image-url($image) no-repeat
@media (min--moz-device-pixel-ratio: 1.3),(-o-min-device-pixel-ratio: 2.6/2),(-webkit-min-device-pixel-ratio: 1.3),(min-device-pixel-ratio: 1.3),(min-resolution: 1.3dppx)
background-image: image-url($image2x)
background-size: image-width($image) image-height($image)
// usage for „logo.png” + „logo2x.png”
@renatocarvalho
renatocarvalho / gist:5923508
Created July 3, 2013 22:44 — forked from afeld/gist:5704079

This was tested using Ruby 2.0.0 and Rails 4.0.0.rc1.

Bower

  1. Set the install directory for Bower components:

    // .bowerrc
{

"directory": "app/assets/components"

@renatocarvalho
renatocarvalho / gist:6747673
Created September 28, 2013 23:15 — forked from olivierlacan/gist:4062929

Screencasting Framework

The following document is a written account of the Code School screencasting framework. It should be used as a reference of the accompanying screencast on the topic.

Why you should care about screencasting?

You're probably aren't going to take the time to read this document if you're not interested, but there are a lot of nice side effects caused by learning how to create quality screencasts.

  1. Communicating more effectively - At Envy Labs we produce screencasts for our clients all the time. Whether it's demoing a new feature or for a presentation for an invester, they're often much more effective and pleasent than a phone call or screen sharing.
@renatocarvalho
renatocarvalho / gary_bernhardt_screencasting_parley.md
Created September 28, 2013 23:15 — forked from olivierlacan/gary_bernhardt_screencasting_parley.md

I'm planning on either writing this up in detail or maybe doing a screencast about screencasting, but I'll give a short version here.

On sound quality:

This matters a lot. In decreasing order of importance:

  1. Remove echo. You have to hear this to understand. Set up a mic in front of your mouth and record a sentence. Then, put a thick comforter over you and the mic and say it again at the same distance. Listen to