Skip to content

Instantly share code, notes, and snippets.

View georgiee's full-sized avatar
👻
Ghosting github.com since a while

Georgios Kaleadis georgiee

👻
Ghosting github.com since a while
View GitHub Profile
@whoisryosuke
whoisryosuke / add-codepen-script-to-react-gatsby.js
Created July 9, 2018 22:12
ReactJS / GatsbyJS - Add a Codepen script to your blog posts. To see Codepens show in your posts, add the embed code into your Markdown files without the external Codepen JS script. Make sure to add this to the component you use to `createPage()` blog posts in `gatsby-node.js`
export default class BlogPost extends Component {
constructor(props) {
super(props);
this.state = {
'codepen': false
};
}
@cecilemuller
cecilemuller / 2019-https-localhost.md
Last active May 2, 2024 16:43
How to create an HTTPS certificate for localhost domains

How to create an HTTPS certificate for localhost domains

This focuses on generating the certificates for loading local virtual hosts hosted on your computer, for development only.

Do not use self-signed certificates in production ! For online certificates, use Let's Encrypt instead (tutorial).

@sergeicodes
sergeicodes / accessibility.md
Last active July 15, 2019 19:07
Info collected about accessibility topics.
@jayphelps
jayphelps / package.json
Last active May 3, 2024 14:51
TypeScript output es2015, esm (ES Modules), CJS, UMD, UMD + Min + Gzip. Assumes you install typescript (tsc), rollup, uglifyjs either globally or included as devDependencies
{
"scripts": {
"build": "npm run build:es2015 && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:umd:min",
"build:es2015": "tsc --module es2015 --target es2015 --outDir dist/es2015",
"build:esm": "tsc --module es2015 --target es5 --outDir dist/esm",
"build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
"build:umd": "rollup dist/esm/index.js --format umd --name YourLibrary --sourceMap --output dist/umd/yourlibrary.js",
"build:umd:min": "cd dist/umd && uglifyjs --compress --mangle --source-map --screw-ie8 --comments --o yourlibrary.min.js -- yourlibrary.js && gzip yourlibrary.min.js -c > yourlibrary.min.js.gz",
}
}

⚠️ this is now stupidly out of date

Computers

  • 13" Macbook Pro 3.3 GHz i7 (late 2016)
  • Microsoft Surface Book (2016)

Peripherals

@praveenpuglia
praveenpuglia / shadow-dom.md
Last active March 28, 2024 15:06
Everything you need to know about Shadow DOM

I am moving this gist to a github repo so more people can contribute to it. Also, it makes it easier for me to version control.

Please go to - https://github.com/praveenpuglia/shadow-dom-in-depth for latest version of this document. Also, if you find the document useful, please shower your love, go ⭐️ it. :)

Shadow DOM

Heads Up! It's all about the V1 Spec.

In a nutshell, Shadow DOM enables local scoping for HTML & CSS.

#!/usr/bin/python2
import requests
import os
import sys
import random
import string
FILTERS = [
"smile",
"smile_2",
@jonico
jonico / Jenkinsfile
Last active January 31, 2024 09:43
Example for a full blown Jenkins pipeline script with CodeQL analysis steps, multiple stages, Kubernetes templates, shared volumes, input steps, injected credentials, heroku deploy, sonarqube and artifactory integration, Docker containers, multiple Git commit statuses, PR merge vs branch build detection, REST API calls to GitHub deployment API, …
#!groovy
import groovy.json.JsonOutput
import groovy.json.JsonSlurper
def label = "mypod-${UUID.randomUUID().toString()}"
podTemplate(label: label, yaml: """
spec:
containers:
- name: mvn
image: maven:3.3.9-jdk-8
@ebidel
ebidel / fancy-tabs-demo.html
Last active March 8, 2024 23:08
Fancy tabs web component - shadow dom v1, custom elements v1, full a11y
<script src="https://unpkg.com/@webcomponents/custom-elements"></script>
<style>
body {
margin: 0;
}
/* Style the element from the outside */
/*
fancy-tabs {
margin-bottom: 32px;
@paulirish
paulirish / what-forces-layout.md
Last active April 30, 2024 17:56
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent