Skip to content

Instantly share code, notes, and snippets.

View chriscoyier's full-sized avatar

Chris Coyier chriscoyier

View GitHub Profile
@chriscoyier
chriscoyier / podcast-migrate-to-s3.php
Created May 26, 2022 14:42
One-Time Metadata Migration
<?php
/**
* Plugin Name: Migrate Podcast Files to S3
* Text Domain: cp-podcast-migrate
* Version: 1.0.0
*
*/
/**
* Add menu item
@chriscoyier
chriscoyier / input.scss
Created February 26, 2021 17:11
Generated by SassMeister.com.
body::before {
content: "\f19c";
}
body {
font-family: "Trebuchet MS", sans-serif;
}
body {
font-family: "Trebuchet MS", sans-serif;
}
<div class="social-menu">
<h1>Social Media Button Hover Effect</h1>
<ul>
<?php if (get_field('twitter')): ?>
<li>
<a href="<?php the_field('twitter'); ?>">
<span class="link-label">Twitter</span>
atk git-credential-netlify libksba nspr redis
autoconf git-lfs libpng nss ruby
automake glib libtiff openssl ruby-build
cairo gobject-introspection libtool openssl@1.1 ruby@2.6
cmake graphite2 libxml2 pango sphinx-doc
dnsmasq gtk+ libyaml pcre sqlite
fontconfig harfbuzz lzo pixman wget
freetype icu4c makedepend pkg-config xz
fribidi jpeg mkcert python yarn
gdbm libffi mysql@5.6 python@3.8
@chriscoyier
chriscoyier / index.pug
Last active January 2, 2020 15:28
Playing with GistPad
# Hello World!
// 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)

@chriscoyier
chriscoyier / ip.json
Last active September 15, 2019 17:15
{
"continent":"North America",
"address_format":"{{recipient}}\n{{street}}\n{{city}} {{region_short}} {{postalcode}}\n{{country}}",
"alpha2":"CA",
"alpha3":"CAN",
"country_code":"1",
"international_prefix":"011",
"ioc":"CAN",
"gec":"CA",
"name":"Canada",