Skip to content

Instantly share code, notes, and snippets.

View Legends's full-sized avatar

Legends

48 followers · 20 following
View GitHub Profile
@Legends
Legends / Containing-Block.html
Last active December 25, 2019 11:58
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html{
position:relative;
min-height:100vh;
@Legends
Legends / parseHtml.js
Created December 20, 2019 16:32
var doc = document, win = window;
var frag;
function parseHTML(str) {
if (!frag) {
frag = doc.implementation.createHTMLDocument(null);
var base = frag.createElement("base");
base.href = doc.location.href;
frag.head.appendChild(base);
}
@Legends
Legends / install-prompt.js
Created December 19, 2019 19:32
export function installPrompt() {
let deferredPrompt;
const addBtn = document.querySelector('.install-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
@Legends
Legends / manifest.js
Last active December 19, 2019 19:39
var WebpackPwaManifest = require('webpack-pwa-manifest')
var path = require("path");
// .mimetype: application/manifest+json - .webmanifest
exports.pwaManifest = new WebpackPwaManifest({
filename: "manifest.webmanifest",
short_name: "legends",
name: "legends.github.io",
description: "work biography & experience",
start_url: "index.html",
@Legends
Legends / layout-pwa-reg.html
Created December 19, 2019 19:20
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('p-cache.js') // register the serviceWorker: p-cache.js /service-worker
.then(reg => console.log('Service Worker: Registered (Pages)'))
.catch(err => console.log("Service Worker: Error:" + err));
@Legends
Legends / pwa-sw.js
Created December 19, 2019 19:18
// ******************************************* p-cache.js ***********************************************
// What it does: it caches all requests a site makes (css, js, html, etc.) and when the app is offline it loads the cached version.
// On the Developer Tools' Network tab, if Disable cache is checked, requests will go to the network instead of the Service Worker. Uncheck that.
// Incognito mode skips the service worker as well!
var cacheName = 'pc-v2';
// Installing Service Worker
// "https://legends.io/index.html"
@Legends
Legends / dev-cert.ps1
Last active December 19, 2019 18:44
# https://docs.microsoft.com/en-us/powershell/module/pkiclient/new-selfsignedcertificate?redirectedfrom=MSDN&view=win10-ps#examples
# OPEN MMC --> CERTIFICATES (LOCAL COMPUTER)
# CREATES A CERTIFICATE IN: Local Computer | Personal | Certificates:
# where legends.io is setup as dns in hosts file as: --> 127.0.0.1 legends.io
#CREATE THE CERTIFICATE:
New-SelfSignedCertificate -DnsName "legends.io", "*.legends.io" -CertStoreLocation "cert:\LocalMachine\My"
# OPEN MMC --> CERTIFICATES (LOCAL COMPUTER)
# Local Computer | Personal | Certificates --> Right-Click the cert --> All Tasks --> Export:
@Legends
Legends / package.json
Last active December 5, 2019 13:11
"scripts": {
"prod": "webpack --config webpack.config.prod.js --colors --mode production && .\\delfolder.bat && yarn deploy2",
"deploy":"xcopy \"C:\\Users\\User\\Source\\Repos\\legends.static.github.io\\dist\" \"C:\\inetpub\\wwwroot\\afolder\" /S /Y",
"deploy2":"robocopy \"C:\\Users\\User\\Source\\Repos\\legends.static.github.io\\dist\" \"C:\\inetpub\\wwwroot\\afolder\" /COPY:DATS /MOVE /PURGE /S",
},
delfolder.bat in project root: (deletes all files/folders of a specified directory)
del /q "C:\inetpub\wwwroot\legends\*"
@Legends
Legends / robocopy.bat
Last active December 3, 2019 00:27
// ############################### COPY DIRECTORIES
// the source and destination folder should not end with a backslash `\`, this irritates robocopy --> error
robocopy "C:\Users\Admin\Source\Repos\legends.static.github.io" "C:\Users\Admin\Source\Repos\legends.static.github.io.copy" /S /ZB /COPY:DATS /XD "node_modules" "dist"
// ############################### MOVE DIRECTORIES --> XCOPY
robocopy "C:\Users\Admin\Documents\" "D:\SystemFolders\Documents" /S /ZB /COPY:DATS /MOVE
@Legends
Legends / node-sass-setup.txt
Last active November 25, 2019 12:05
1. Install Node.js
2. Initialize NPM
2.1 Install & configure Python --> https://github.com/nodejs/node-gyp#on-windows
3. npm init -y (to create packages.json)
4. yarn add node-sass
5. add compile command 'scss' under scripts:
6. yarn run scss (this will watch for changes & compile when changes occur)
{
"name": "sass-tutorial",