Skip to content

Instantly share code, notes, and snippets.

View tylersticka's full-sized avatar

Tyler Sticka tylersticka

79 followers · 17 following
View GitHub Profile
@OrionReed
OrionReed / dom3d.js
Last active November 15, 2024 17:48
3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.
// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
(() => {
const SHOW_SIDES = false; // color sides of DOM nodes?
const COLOR_SURFACE = true; // color tops of DOM nodes?
const COLOR_RANDOM = false; // randomise color?
const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
const MAX_ROTATION = 180; // set to 360 to rotate all the way round
const THICKNESS = 20; // thickness of layers
const DISTANCE = 10000; // ¯\\_(ツ)_/¯
@adactio
adactio / redirect.php
Last active January 2, 2024 23:24
A proxy that tries to redirect bad links to the internet archive.
<?php
// Check that the request is coming from my site.
if (!isset($_SERVER['HTTP_REFERER']) || !stristr(strtolower($_SERVER['HTTP_REFERER']), strtolower($_SERVER['SERVER_NAME']))) {
http_response_code(403);
exit;
}
// There has to be a URL provided in the query string.
if (!isset($_GET['url'])) {
@jh3y
jh3y / gsap-eases.css
Last active October 16, 2024 15:23
GreenSock eases with CSS linear()
:root {
--none: linear(0, 1);
--power1-in: linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.1914, 0.2499, 0.3164, 0.3906 62.5%, 0.5625, 0.7656, 1 );
--power1-out: linear( 0, 0.2342, 0.4374, 0.6093 37.49%, 0.6835, 0.7499, 0.8086, 0.8593, 0.9023, 0.9375, 0.9648, 0.9844, 0.9961, 1 );
--power1-in-out: linear( 0, 0.0027, 0.0106 7.29%, 0.0425, 0.0957, 0.1701 29.16%, 0.2477, 0.3401 41.23%, 0.5982 55.18%, 0.7044 61.56%, 0.7987, 0.875 75%, 0.9297, 0.9687, 0.9922, 1 );
--power2-in: linear( 0, 0.0014 11.11%, 0.0071 19.24%, 0.0188 26.6%, 0.037 33.33%, 0.0634 39.87%, 0.0978 46.07%, 0.1407 52.02%, 0.1925 57.74%, 0.2559 63.49%, 0.3295 69.07%, 0.4135 74.5%, 0.5083 79.81%, 0.6141 85%, 0.7312 90.09%, 1 );
--power2-out: linear( 0, 0.2688 9.91%, 0.3859 15%, 0.4917 20.19%, 0.5865 25.5%, 0.6705 30.93%, 0.7441 36.51%, 0.8075 42.26%, 0.8593 47.98%, 0.9022 53.93%, 0.9366 60.13%, 0.963 66.67%, 0.9812 73.4%, 0.9929 80.76%, 0.9986 88.89%, 1 );
--power2-in-out: linear( 0, 0.0036 9.62%, 0.0185 16.66
@bobmonsour
bobmonsour / getDescription.js
Created April 13, 2023 04:45
An Eleventy filter that extracts the meta description from within the <head> element of a web page
// getDescription - given a url, this Eleventy filter extracts the meta
// description from within the <head> element of a web page using the cheerio
// library.
//
// The full html content of the page is fetched using the eleventy-fetch plugin.
// If you have a lot of links from which you want to extract descriptions, the
// initial build time will be slow. However, the plugin will cache the content
// for a duration of your choosing (in this example, it's set to 1 day).
//
// The description is extracted from the <meta> element with the name attribute
@Andy-set-studio
Andy-set-studio / .eleventy.js
Last active August 20, 2018 19:35
Eleventy sort by order
const sortByOrder = require('./sort-by-order.js');
module.exports = function(eleventyConfig) {
eleventyConfig.addFilter('sortByOrder', sortByOrder);
}
@blackcater
blackcater / diagrams.md
Created July 6, 2018 16:45
Markdown Diagrams

Diagrams

Markdown Preview Enhanced supports rendering flow charts, sequence diagrams, mermaid, PlantUML, WaveDrom, GraphViz, Vega & Vega-lite, Ditaa diagrams. You can also render TikZ, Python Matplotlib, Plotly and all sorts of other graphs and diagrams by using Code Chunk.

Please note that some diagrams don't work well with file exports such as PDF, pandoc, etc.

Flow Charts

This feature is powered by flowchart.js.

@S1SYPHOS
S1SYPHOS / svg-url.scss
Created February 17, 2018 23:54
SASS function to create an inline SVG url() source.
/*
* Replacing SVG strings in data-uri style situations
* by Jakob Erikson -- https://github.com/jakob-e
*
* http://codepen.io/jakob-e/pen/doMoML
*/
// Function to replace characters in a string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@potch
potch / cool.js
Last active February 15, 2017 17:02
PURE ES6 HTML TEMPLATING
let index = ({title, name}) => `
<h1>${title}</h1>
${name ? `
<h2>Hello, ${name}.</h2>
`:`
<a href="#">Log in here</a>
`}
<div>footer</div>
`;
@jdembowski
jdembowski / not-gravatar.php
Last active July 13, 2021 23:04
Use Gravatar images in WordPress but don't reveal the Gravatar img src URL. Display the Gravatar inline instead.
<?php
/*
Plugin Name: Tin Foil Hat Gravatars
Description: Use Gravatars but don't use Gravatars. What? Shut up.
Author: Jan Dembowski
Author URI: https://blog.dembowski.net/
Version: 0.7
License: GPL2
*/
@dfrankland
dfrankland / checkered.css
Created August 25, 2016 21:30
CSS Checkered pattern that can be used on all modern browsers.
body {
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(135deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(135deg, transparent 75%, #ccc 75%);
background-size:25px 25px; /* Must be a square */
background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
}