Skip to content

Instantly share code, notes, and snippets.

Chris Coyier chriscoyier

Block or report user

Report or block chriscoyier

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
chriscoyier / index.pug
Last active Jan 2, 2020
Playing with GistPad
View index.pug
# Hello World!
View gulpfile.js
// gulpfile.js
// Initialize modules
const gulp = require('gulp');
// Importing all the Gulp-related packages we want to use
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
//const browserSync = require('browser-sync');
//const server = browserSync.create();
const child = require('child_process');

The top property in CSS goes hand in hand with positioning. By default, elements are static positioned in which the top property has no effect whatsoever. But when the positioning of an element is relative, absolute, or fixed, the top value plays a big role.

div {
  top: value (px, em, %, pt, etc) || auto || inherit;   /* can be negative */

The value for top is any of the valid lengths of CSS.

"The Nudge" (Relative Position)

View ip.json
"continent":"North America",
"address_format":"{{recipient}}\n{{street}}\n{{city}} {{region_short}} {{postalcode}}\n{{country}}",
View embed.js
const App = () => {
return (
penTitle="My sweet demo"
description="Renders a barebones React component"
View tags.php
class CTF_Register_Taxonomies {
* Initialize the class
public function __construct() {
add_action('init', array( $this, 'tags_support_all') );
add_action('pre_get_posts', array( $this, 'tags_support_query') );

Keybase proof

I hereby claim:

  • I am chriscoyier on github.
  • I am chriscoyier ( on keybase.
  • I have a public key ASAOqGFRMkYF7J1yITeO3M2VMTRRoozedjmZoEz-UBGVTwo

To claim this, I am signing this object:

View highlighting.css
.token.cdata {
color: #777;
.token.attr-name {
View gulpfile.js
// Should I be ES6+ing this file? Does it matter? Seems like it would feel nicer but running Babel over this file feels like ouroboros.
// I'm using Gulp 3.x. I couldn't for the life of me get Gulp 4.x going, I think because my Gulp CLI was at too high (??) of a version and no amount of uninstalling and reinstalling would bring it back down.
var gulp = require("gulp");
// I thought I needed this until I found out about gulp.series. Can I refactor anything here?
var runSequence = require("run-sequence");
// Would this be a speed boost for anything? As in, only looking at files that have changed instead of all files?
View broken.css
.asdf2 {
opacity: 1;
animation: pi-fadein 0.5s ease 3s forwards; }
.my-module {
opacity: 1;
opacity: 1;
opacity: 1;
opacity: opacity: 1; }
You can’t perform that action at this time.