Skip to content

Instantly share code, notes, and snippets.

View b4z81's full-sized avatar

Stefano Guglielmi b4z81

14 followers · 71 following
  • Rome
View GitHub Profile
@b4z81
b4z81 / css_resources.md
Created October 31, 2013 10:58 — forked from jookyboi/css_resources.md
CSS libraries and guides to bring some order to the chaos.

Libraries

  • 960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
  • Compass - Open source CSS Authoring Framework.
  • Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
  • Font Awesome - The iconic font designed for Bootstrap.
  • Zurb Foundation - Framework for writing responsive web sites.
  • SASS - CSS extension language which allows variables, mixins and rules nesting.
  • Skeleton - Boilerplate for responsive, mobile-friendly development.

Guides

@b4z81
b4z81 / javascript_resources.md
Created October 31, 2013 10:58 — forked from jookyboi/javascript_resources.md
Here are a set of libraries, plugins and guides which may be useful to your Javascript coding.

Libraries

  • jQuery - The de-facto library for the modern age. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
  • Backbone - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • AngularJS - Conventions based MVC framework for HTML5 apps.
  • Underscore - Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
  • lawnchair - Key/value store adapter for indexdb, localStorage
@b4z81
b4z81 / video-html5.html
Last active December 26, 2015 20:59
html5 video
<video width="640" height="360" controls>
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
</object>
</video>
@b4z81
b4z81 / email-validation.html
Created October 29, 2013 11:55
Regexp pattern for email validation HTML5
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
@b4z81
b4z81 / gif1*1.html
Created October 29, 2013 11:54
Base64 gif 1*1
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
@b4z81
b4z81 / gist:7116440
Created October 23, 2013 10:46 — forked from lucasfais/gist:1207002

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T go to file
⌘⌃P go to project
⌘R go to methods
⌃G go to line
⌘KB toggle side bar
⌘⇧P command prompt
@b4z81
b4z81 / rgba-ie.css
Created October 17, 2013 14:48
Rgba IE8 - From http://stackoverflow.com/questions/3975688/css-background-opacity-with-rgba-not-working-in-ie-8
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
@b4z81
b4z81 / defer.js
Created October 14, 2013 14:21
How to defer loading of javascript From http://www.feedthebot.com/pagespeed/defer-loading-javascript.html?goback=%2Egde_2231152_member_275791491#%21
<script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>
@b4z81
b4z81 / webfont-ie.html
Created October 14, 2013 14:02
Using a conditional comment for webfont on IE
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
<![endif]-->
@b4z81
b4z81 / Homescreen.html
Created October 4, 2013 12:27
chrome Homescreen
<!doctype html>
<html>
<head>
<title>Awesome app</title>
<meta name=”viewport” content=”width=device-width”>
<meta name=”mobile-web-app-capable” content=”yes”>
<link rel=”shortcut icon” sizes=”1024x1024” href=”/icon.png”>
</head>
<body></body>
</html>