Chris Violette pixleight

## Tie Return Type of a Function to its Arguments.ts
// The return type matches the type of argument provided
const doSomething = <T>(data: T) : T[] => {
    // processing...
    return result; // array of type T
}

const something = doSomething(1) // type number[]


// For more complex narrowing...

## Typing Objects with Records.ts
// Instead of typing an object like this:
interface Person {
    [key: string]: unknown
}

// Only allow certain keys
type AllowedKeys = 'name' | 'age';

type StrictPerson = Record<AllowedKeys, unknown>;
/**

## carousel.css
.snap {
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scroll-behavior: smooth
}

.snap::-webkit-scrollbar {
  display: none;
}

## format-google-calendar.js
!function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";window.formatGoogleCalendar=function(){var e,t=function(e,t){var n=[];n=e.items.filter(function(e){return e&&e.hasOwnProperty("status")&&"cancelled"!==e.status}).sort(l).reverse();var r,a=0,o=0,u=[],c=[],m=[],p=document.querySelector(t.upcomingSelector),d=document.querySelector(t.pastSelector);-1===t.pastTopN&&(t.pastTopN=n.length),-1===t.upcomingTopN&&(t.upcomingTopN=n.length),!1===t.past&&(t.pastTopN=0),!1===t.upcoming&&(t.upcomingTopN=0);for(r in n)s(n[r].end.dateTime||n[r].end.date)?a<t.pastTopN&&(u.push(n[r]),a++):m.push(n[

## A-Pen-by-Chris-Violette.markdown

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                pixleight
                / A-Pen-by-Chris-Violette.markdown
            
            
              Created
              November 13, 2013 21:58
            
              
                A Pen by Chris Violette.
              
          
    A Pen by Chris Violette

A Pen by Chris Violette on CodePen.
License.

  
## dabblet.css
/**
 * Polaroid photo gallery experiment
 */

@import url(http://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo);

html {
	background: #f06;
	background: linear-gradient(60deg, #AAA, #EEE);
	min-height:100%;

## dabblet.html
<div id="info">
	<h1>Skyrim-inspired drop-down menu</h1>
	<p>This lunchtime CSS experiment was inspired by the menu styles in the videogame <em>Skyrim</em>.</p>
</div>
<ul id="menu">
	<li>
		<a href="#">Parent 1</a>
		<ul>
			<li>
				<a href="#">Child A</a>

## dabblet.html
<div id="info">
	<h1>Skyrim-inspired drop-down menu</h1>
	<p>This lunchtime CSS experiment was inspired by the menu styles in the videogame <em>Skyrim</em>.</p>
</div>
<ul id="menu">
	<li>
		<a href="#">Parent 1</a>
		<ul>
			<li>
				<a href="#">Child A</a>

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
	// The return type matches the type of argument provided
	const doSomething = <T>(data: T) : T[] => {
	// processing...
	return result; // array of type T
	}

	const something = doSomething(1) // type number[]


	// For more complex narrowing...
	// Instead of typing an object like this:
	interface Person {
	[key: string]: unknown
	}

	// Only allow certain keys
	type AllowedKeys = 'name' \| 'age';

	type StrictPerson = Record<AllowedKeys, unknown>;
	/**
	.snap {
	-ms-scroll-snap-type: x mandatory;
	scroll-snap-type: x mandatory;
	-ms-overflow-style: none;
	scroll-behavior: smooth
	}

	.snap::-webkit-scrollbar {
	display: none;
	}
	/**
	* Polaroid photo gallery experiment
	*/

	@import url(http://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo);

	html {
	background: #f06;
	background: linear-gradient(60deg, #AAA, #EEE);
	min-height:100%;
	<div id="info">
	<h1>Skyrim-inspired drop-down menu</h1>
	<p>This lunchtime CSS experiment was inspired by the menu styles in the videogame <em>Skyrim</em>.</p>
	</div>
	<ul id="menu">
	<li>
	<a href="#">Parent 1</a>
	<ul>
	<li>
	<a href="#">Child A</a>