Skip to content

Instantly share code, notes, and snippets.

Avatar

Georgios Kaleadis georgiee

View GitHub Profile
@whoisryosuke
whoisryosuke / add-codepen-script-to-react-gatsby.js
Created Jul 9, 2018
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`
View add-codepen-script-to-react-gatsby.js
export default class BlogPost extends Component {
constructor(props) {
super(props);
this.state = {
'codepen': false
};
}
@cecilemuller
cecilemuller / 2019-https-localhost.md
Last active Dec 3, 2020
How to create an HTTPS certificate for localhost domains
View 2019-https-localhost.md

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 Jul 15, 2019
Info collected about accessibility topics.
@jayphelps
jayphelps / package.json
Last active Nov 16, 2020
TypeScript output es2015, esm (ES Modules), CJS, UMD, UMD + Min + Gzip. Assumes you install typescript (tsc), rollup, uglifyjs either globally or included as devDependencies
View package.json
{
"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",
}
}
View workstation.md
@praveenpuglia
praveenpuglia / shadow-dom.md
Last active Nov 26, 2020
Everything you need to know about Shadow DOM
View shadow-dom.md

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.

View faceapp.py
#!/usr/bin/python2
import requests
import os
import sys
import random
import string
FILTERS = [
"smile",
"smile_2",
@jonico
jonico / Jenkinsfile
Last active Nov 22, 2020
Example for a full blown Jenkins pipeline script with 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, stage timeouts, stage c…
View Jenkinsfile
#!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-alpine
@ebidel
ebidel / fancy-tabs-demo.html
Last active Nov 3, 2020
Fancy tabs web component - shadow dom v1, custom elements v1, full a11y
View fancy-tabs-demo.html
<script>
function execPolyfill() {
(function(){
// CustomElementsV1.min.js v1 polyfill from https://github.com/webcomponents/webcomponentsjs/tree/v1/src/CustomElements/v1.
/*
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
@paulirish
paulirish / what-forces-layout.md
Last active Dec 3, 2020
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
You can’t perform that action at this time.