Skip to content

Instantly share code, notes, and snippets.

View vjandrei's full-sized avatar
:octocat:
Chill and Family

Andreas Koutsoukos vjandrei

:octocat:
Chill and Family
View GitHub Profile
@vasilisvg
vasilisvg / responsive-context-images.html
Created September 7, 2011 10:50
Responsive context aware images without cookies or server logic
<!doctype html>
<!--
WARNING!
You probably shouldn't use this technique since images never show up
if the script isn't loaded for one reason or another. Some reasons:
- The content is viewed using a RSS reader
- The content is viewed with a read-it-later service
- The user has a flaky connection (hotel wifi, Dutch train, etc)
-->
@richardvenneman
richardvenneman / _html5boilerplate.css.sass
Created September 25, 2011 16:18
HTML5 Boilerplate HAML & SASS
/*
* HTML5 ✰ Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
@craigmdennis
craigmdennis / multiple.bxslider.js
Created November 1, 2011 16:34
Dynamically generate multiple BX Sliders
$(function () {
var bxSliderInstances = {};
// Use a class rather than an ID
var $slider = $('.mini-slider');
// For each result
$slider.each(function (index, element) {
@andreasbovens
andreasbovens / viewport-meta-in-20-best-responsive-designs.md
Created July 17, 2012 15:56
Viewport meta tags used by the 20 sites that are listed in Social Driver's "20 Best Responsive Web Design Examples of 2012"

Intro

http://socialdriver.com/2012/07/20-best-responsive-websites/ lists 20 sites that are supposedly best-in-class when it comes to responsive design techniques. I had a look at the viewport meta tags used in these sites.

Findings

  • All sites use width=device-width, with in most cases an additional initial-scale=1. This is good practice.

However:

  • 8 sites turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. While there are some corner use cases for this, it does not make sense to do this on text-heavy sites as it impairs accessibility.
  • 3 sites use semi-colons as delimiters between viewport values. While this works in newer mobile browsers, it's not officially supported, and breaks in older mobile browser versions.
  • 1 site has 2 viewport meta tags (with different values) in the source...
@glebm
glebm / inline-css-font.rb
Last active October 12, 2018 15:36
inline web fonts | http://blog.glebm.com/2013/08/28/inline-css-fonts.html
#!/usr/bin/env ruby
require 'base64'
require 'open-uri'
# file or url
def get_css(src)
if src.start_with? 'http'
src = src.gsub('|', '%7C')
STDERR.puts "# GET #{src}"
# simulate modern browser to get woff
@fta2012
fta2012 / DragTransform
Last active May 1, 2024 21:15
Slightly modified compiled coffeescript from this codepen: http://codepen.io/fta/pen/ifnqH. Paste into console on a page that has jQuery to load the two dependent libraries (jquery-ui and numericjs). Then call makeTransformable('#selector-name') to make that element WYSIWYG editable. Use inspector to get the CSS for the transforms.
var selector = 'img' // Replace this with the selector for the element you want to make transformable
jQuery.getScript('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', function() {
jQuery.getScript('//cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js', function() {
(function() {
var $, applyTransform, getTransform, makeTransformable;
$ = jQuery;
@ericelliott
ericelliott / essential-javascript-links.md
Last active May 17, 2024 03:38
Essential JavaScript Links
@bendc
bendc / alphabet.js
Created January 30, 2015 21:38
Array of uppercase and lowercase letters
const letters = (() => {
const caps = [...Array(26)].map((val, i) => String.fromCharCode(i + 65));
return caps.concat(caps.map(letter => letter.toLowerCase()));
})();
@Phlow
Phlow / for-loop-sorted-collection
Last active April 30, 2024 13:30
This Liquid loop for Jekyll sorts a collection by date in reverse order
{% comment %}
*
* This loop loops through a collection called `collection_name`
* and sorts it by the front matter variable `date` and than filters
* the collection with `reverse` in reverse order
*
* To make it work you first have to assign the data to a new string
* called `sorted`.
*
{% endcomment %}
@stursby
stursby / README.md
Last active May 13, 2022 07:41
Vue + Firebase + Auth Demo

Vue + Firebase + Auth Demo

A simple App using Vue.js & Firebase with Auth.

See the DEMO.