Skip to content

Instantly share code, notes, and snippets.

View webdesignberlin's full-sized avatar
:octocat:
...

Michael Raguse webdesignberlin

:octocat:
...
View GitHub Profile
@addyosmani
addyosmani / README.md
Last active April 2, 2024 20:18 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

@PaulKinlan
PaulKinlan / criticalcss-bookmarklet-devtool-snippet.js
Last active April 2, 2024 02:45
CriticalCSS Bookmarklet and Devtool Snippet.js
(function() {
var CSSCriticalPath = function(w, d, opts) {
var opt = opts || {};
var css = {};
var pushCSS = function(r) {
if(!!css[r.selectorText] === false) css[r.selectorText] = {};
var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
for(var i = 0; i < styles.length; i++) {
if(!!styles[i] === false) continue;
var pair = styles[i].split(": ");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen recorder</title>
</head>
<body>
<button id="recording-toggle">Start recording</button>
<script defer>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Single File Web Component</title>
<style>
body {
background-color: #eee;
font-family: Helvetica, sans-serif;
}
@davestevens
davestevens / LetsEncrypt.md
Last active March 28, 2024 10:35
Let’s Encrypt setup for Apache, NGINX & Node.js

Let's Encrypt

Examples of getting certificates from Let's Encrypt working on Apache, NGINX and Node.js servers.

Obtain certificates

I chose to use the manual method, you have to make a file available to verify you own the domain. Follow the commands from running

git clone https://github.com/letsencrypt/letsencrypt
cd letsencrypt
@loilo
loilo / pass-slots.md
Last active March 27, 2024 20:58
Vue: Pass Slots through from Parent to Child Components

Vue: Pass Slots through from Parent to Child Components

The Situation

  • We've got some components A, B and C which provide different slots.
    const A = {
      template: `<div><slot name="a">Default A Content</slot></div>`
    }

const B = {

@paulirish
paulirish / rAF.js
Last active March 22, 2024 00:00
requestAnimationFrame polyfill
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
@DavidWells
DavidWells / github-proxy-client.js
Last active March 15, 2024 08:28
Full Github REST api in 34 lines of code
/* Ultra lightweight Github REST Client */
// original inspiration via https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb
const token = 'github-token-here'
const githubClient = generateAPI('https://api.github.com', {
headers: {
'User-Agent': 'xyz',
'Authorization': `bearer ${token}`
}
})
@sergejmueller
sergejmueller / ttf2woff2.md
Last active March 9, 2024 13:37
WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
@hdragomir
hdragomir / sm-annotated.html
Last active March 5, 2024 08:57
The deferred font loading logic for Smashing Magazine. http://www.smashingmagazine.com/
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);