Šime Vidas simevidas

Articles about flexbox:

I did a quick poll in 4 chat rooms:

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:

	<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>
	(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 [

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

	// 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