Skip to content

Instantly share code, notes, and snippets.

View orioltf's full-sized avatar

Oriol Torrent Florensa orioltf

View GitHub Profile
@orioltf
orioltf / console-utils.js
Created November 28, 2013 12:34
Create shortcut to console.log() in Chrome
var log = console.log.bind(console);
var warn = console.warn.bind(console);
var info = console.info.bind(console);
var error = console.error.bind(console);
var table = console.table.bind(console);
@orioltf
orioltf / readme.md
Last active December 23, 2015 10:19
#HTML #HAML: Icon sizes snippet from new iOS7
  • The new OS7 icons are 5% bigger than in previous version.
  • System icons are flat now: apple doesn’t add shiny effect anymore.
  • apple-touch-icon precomposed is still supported but it will make same results as the apple-touch-icon
  • apple-touch-icon precomposed icon take precedence over apple-touch-icon
  • Available sizes according to apple:
    • iPhone / iPod Touch retina: 120×120
    • iPad non-retina (iPad 2 and iPad mini): 76×76
    • iPad retina: 152×152
  • Appple documentation
@orioltf
orioltf / loadDescFrontendConf.js
Created August 27, 2013 08:17
#JQUERY #WebEnhancer: Get whole description from each "more" link in FrontendConf via AJAX
var $talks = $('.schedule').find('article.talk');
$talks.each(function(){
$(this).on('click', 'p > a', function(e){
e.preventDefault();
var linkRef = $(this).attr('href'),
urlHash = linkRef.substring(linkRef.indexOf('#')),
urlWithoutHash = linkRef.substr(0,linkRef.indexOf('#')),
$container = $(this).closest('p');
@orioltf
orioltf / github.com.css
Created August 22, 2013 14:01
#CSS #WebEnhnacer: Change Github appearance to better use big screens (while still working on smaller ones). Add theese CSS changes to Stylish Chrome/Firefox extensions or similar ones. The filename shows where should be applied.
.container {
width: auto;
max-width: 100em;
}
/* Block formating context */
.repository-with-sidebar .repository-content,
.repository-with-sidebar.with-full-navigation .repository-content,
.discussion-timeline,
body.page-profile .profilecols .last,
@orioltf
orioltf / loadGithubAnswersAjax.js
Created August 6, 2013 15:24
#JQUERY #WebEnhancer: Get Github help answers via AJAX accordion like - no page jump. Add this code as Chrome snippet and run it when browsing github help
;(function($, window, document, undefined) {
var $questions = $('ul.chevron'),
answerClass = 'answer',
answerSelector = '.'+answerClass,
questionSelector = 'a.km-article-link',
questionWrapperSelector = '.article',
loadingIcon = 'https://github.global.ssl.fastly.net/images/spinners/octocat-spinner-32.gif',
// vars to fix css definitions
sheet = document.styleSheets[0],
rules = typeof(sheet) != 'undefined' ? ('cssRules' in sheet? sheet.cssRules : sheet.rules) : {}, // IE compatibility
@orioltf
orioltf / compare_dates.js
Last active April 17, 2022 07:40
#JS: create date objects with custom date formats
var startBookDate = $(this).find('input.startdate').val(),
endBookDate = $(this).find('input.enddate').val(),
startBookDateObj, endBookDateObj,
startSeasonDateObj, endSeasonDateObj;
// use function parseDate() own function to get a new Date object from a custom string format, cause the format delivered from the datePicker is Swiss date friendly
// Then use the JS Date function and its "parse" method to get a number (of milliseconds) to be able to compare dates.
startBookDateObj = Date.parse( parseDate(startBookDate) );
endBookDateObj = Date.parse( parseDate(endBookDate) );
@orioltf
orioltf / _partial.haml
Created April 18, 2013 06:53
#HAML: Conditional tag attribute depending on absence of value
%li{:hidden => (nav.shown == true ? nil : '')}
<article>
<h1>Documentation</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="all-questions">
<h3 id="one">How do you smurf a murf?</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
@orioltf
orioltf / index.haml
Last active December 14, 2015 18:59
#CODEPEN #SCSS #ANIMATION #FORMS #CSS3: focus tooltip - Tooltips folding out on :focus of the input fields. Done with CSS3 http://codepen.io/orioltf/pen/LpGwA http://codepen.io/vpegado/pen/daugx
.container
.info
%h1 :focus tooltip
.form
%input.form-input{:type => "text", :placeholder => "Select this to fold tooltip"}
.form-tooltip Information only visible on :focus
%input.form-input{:type => "text", :placeholder => "Or this to fold another"}
.form-tooltip Another tooltip with.<br> Only this with some more content.
.info
%p
/* Credit: http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-svg-background-images */
.module {
background: url('logo.png');
background: none, url('logo.svg');
}