Šime Vidas simevidas

## gist:5930986

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                simevidas
                / gist:5930986
            
            
              Last active
              December 19, 2015 09:09
            
          
    Articles about flexbox:

“Old” Flexbox and “New” Flexbox by Chris Coyier (August 2012)
Flexbox — fast track to layout nirvana? by Cris Mills (October 2012)
Dive into Flexbox by Greg Smith (December 2012)
Flexbox syntax for IE 10 by Zoe Gillenwater (February 2013)
Using Flexbox: Mixing Old and New for the Best Browser Support by Chris Coyier (February 2013)
Working with flexbox: The new specification by Steven Bradley (March 2013)
Advanced cross-browser flexbox by Chris Mills (April 2013)
[Animating flexboxes: the lowdown](http://dev.opera.com/articles/view/animating-flexboxes-the-lowdown


## encoding.html
<head>
<script>document.write('<meta charset="utf-8">')</script>
</head>
<body>
<script>
document.body.innerHTML += "✓";
</script>
</body>

## gist:6612409

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                simevidas
                / gist:6612409
            
            
              Last active
              December 23, 2015 09:09
            
              
                Poll: Code blocks in blog posts
              
          
    I did a quick poll in 4 chat rooms:
http://chat.stackoverflow.com/transcript/message/11867788#11867788

http://chat.stackoverflow.com/transcript/message/11867799#11867799

http://chat.stackoverflow.com/transcript/message/11867796#11867796

http://chat.stackoverflow.com/transcript/message/11867794#11867794
The response: People tend to agree with me that they would like have the code block fully expanded, or at least with an option to fully expand.
I'd add an "expand" toggle below the code block:

  
## gist:6640655
// Page 3

document.addEventListener('DOMContentLoaded', function init() {

	var testD = document.querySelector('#testDetails');
	var summary = testD.querySelector('summary');

	summary.addEventListener('click', function () {
		var open = !testD.hasAttribute('open');
		console.log(open);

## gist:6708899
<script>
if (screen.width <= 640) document.write('<meta name="viewport" content="width=device-width, initial-scale=1">');
</script>

## gist:7407373
<script>
(function () {
	google.maps.event.addDomListener(window, 'load', init);

	var map;

	function init() {
	    var mapOptions = {
	        center: new google.maps.LatLng(45.8167,15.9833),
	        zoom: 2,

## perfect-plugin.html
<!doctype html>

<html>
<head>
  <title>Tabs Demo!</title>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    .container {
      margin-top: 20px;
    }

## gist:8272443
// This is my refactored version of the code available in AppFog’s documentation here:
// https://docs.appfog.com/services/mongodb#node

// The version string is passed to the IIFE as an argument ('mongodb2-2.4.8' in my case)

var mongourl = (function (mongo_version) {
	var VCAP = process.env.VCAP_SERVICES;
	var obj = VCAP ? JSON.parse(VCAP)[mongo_version][0].credentials : {};

	return [

## gist:9302143
"Exception caught during observer callback: @data:text/javascript;base64,CiAgICBQb2x5bWVyKCdwb2x5bWVyLXNlbGVjdG9yJywgewogICAgICAvKioKICAgICAgICogR2V0cyBvciBzZXRzIHRoZSBzZWxlY3RlZCBlbGVtZW50LiAgRGVmYXVsdCB0byB1c2UgdGhlIGluZGV4CiAgICAgICAqIG9mIHRoZSBpdGVtIGVsZW1lbnQuCiAgICAgICAqCiAgICAgICAqIElmIHlvdSB3YW50IGEgc3BlY2lmaWMgYXR0cmlidXRlIHZhbHVlIG9mIHRoZSBlbGVtZW50IHRvIGJlCiAgICAgICAqIHVzZWQgaW5zdGVhZCBvZiBpbmRleCwgc2V0ICJ2YWx1ZWF0dHIiIHRvIHRoYXQgYXR0cmlidXRlIG5hbWUuCiAgICAgICAqCiAgICAgICAqIEV4YW1wbGU6CiAgICAgICAqCiAgICAgICAqICAgICA8cG9seW1lci1zZWxlY3RvciB2YWx1ZWF0dHI9ImxhYmVsIiBzZWxlY3RlZD0iZm9vIj4KICAgICAgICogICAgICAgPGRpdiBsYWJlbD0iZm9vIj48L2Rpdj4KICAgICAgICogICAgICAgPGRpdiBsYWJlbD0iYmFyIj48L2Rpdj4KICAgICAgICogICAgICAgPGRpdiBsYWJlbD0iem90Ij48L2Rpdj4KICAgICAgICogICAgIDwvcG9seW1lci1zZWxlY3Rvcj4KICAgICAgICoKICAgICAgICogSW4gbXVsdGktc2VsZWN0aW9uIHRoaXMgc2hvdWxkIGJlIGFuIGFycmF5IG9mIHZhbHVlcy4KICAgICAgICoKICAgICAgICogRXhhbXBsZToKICAgICAgICoKICAgICAgICogICAgIDxwb2x5bWVyLXNlbGVjdG9yIGlkPSJzZWxlY3RvciIgdmFsdWVhdHRyPSJsYWJ

## transition-flex
// Hey! Listen!
// The above slide animation is transition:flex.
// No hard-coded px/% width values!

@media (min-width: 800px)
  .services
    display flex
  .services__item
    flex 1
    transition flex .25s ease-in-out .1s
	<head>
	<script>document.write('<meta charset="utf-8">')</script>
	</head>
	<body>
	<script>
	document.body.innerHTML += "✓";
	</script>
	</body>
	// Page 3

	document.addEventListener('DOMContentLoaded', function init() {

	var testD = document.querySelector('#testDetails');
	var summary = testD.querySelector('summary');

	summary.addEventListener('click', function () {
	var open = !testD.hasAttribute('open');
	console.log(open);
	<script>
	if (screen.width <= 640) document.write('<meta name="viewport" content="width=device-width, initial-scale=1">');
	</script>
	<script>
	(function () {
	google.maps.event.addDomListener(window, 'load', init);

	var map;

	function init() {
	var mapOptions = {
	center: new google.maps.LatLng(45.8167,15.9833),
	zoom: 2,
	<!doctype html>

	<html>
	<head>
	<title>Tabs Demo!</title>
	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
	.container {
	margin-top: 20px;
	}
	// This is my refactored version of the code available in AppFog’s documentation here:
	// https://docs.appfog.com/services/mongodb#node

	// The version string is passed to the IIFE as an argument ('mongodb2-2.4.8' in my case)

	var mongourl = (function (mongo_version) {
	var VCAP = process.env.VCAP_SERVICES;
	var obj = VCAP ? JSON.parse(VCAP)[mongo_version][0].credentials : {};

	return [
	// Hey! Listen!
	// The above slide animation is transition:flex.
	// No hard-coded px/% width values!

	@media (min-width: 800px)
	.services
	display flex
	.services__item
	flex 1
	transition flex .25s ease-in-out .1s