Skip to content

Instantly share code, notes, and snippets.

View thescientist13's full-sized avatar
🎯
The right time is always now

Owen Buckley thescientist13

🎯
The right time is always now
View GitHub Profile
@thescientist13
thescientist13 / hero.css
Last active February 21, 2024 18:49
Vision for HTML Modules in Greenwood
:host {
text-align: center;
margin-bottom: 40px;
}
:host h2 {
font-size: 3em;
}
@thescientist13
thescientist13 / get-inner-html.md
Created May 10, 2022 01:56
getInnerHTML clarification

To quote from the web.dev article on serializing Declarative Shadow DOM

Passing the includeShadowRoots:true option serializes the entire subtree of an element, including its shadow roots. The included shadow roots are serialized using the <template shadowroot> syntax.

In the context of server side renderinbg (SSR), I'm not sure if it is saying that if it was set to false a) It would not literally does not render shadow roots at all b) just doesn't render / return them in <template>

So for example, given these custom elements + shadowRoot

@thescientist13
thescientist13 / package.json
Last active September 11, 2018 00:47
Example of ExpressJS SSR Dependencies
{
"@babel/core": "^7.0.0",
"@babel/node": "^7.0.0",
"express": "^4.16.2",
"pm2": "^2.7.2"
}
@thescientist13
thescientist13 / package.json
Created September 11, 2018 00:44
Example of dependencies for a basic React App
{
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2"
},
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/preset-env": "^7.0.0",
@thescientist13
thescientist13 / server.js
Last active September 13, 2018 20:24
Example server.js for an Express app
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send(`
<html>
<head>
<title>SSR App</title>
</head>
@thescientist13
thescientist13 / Dockerfile
Last active September 11, 2018 00:36
ExpressJS Dockerfile
FROM node:8
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json
# AND package-lock.json are copied
COPY package*.json ./
@thescientist13
thescientist13 / custom-element-example.js
Last active September 1, 2018 19:53
Basic Custom Element Example
// https://jsfiddle.net/thegreenhouseio/qjj9hvv9/
class HelloWorld extends HTMLElement {
constructor(name) {
super();
this.subject = name || 'World';
// creates a Shadow DOM tree
this.root = this.attachShadow({ mode: 'closed' });
}
@thescientist13
thescientist13 / providence-geeks-stats-pt3.csv
Last active May 15, 2018 18:05
Build stats for the Providence Geeks website article series, pt. 3
Benchmark Before After Difference
JS Payload 198KB 166KB ⬇️32KB
CSS Payload 12.1KB 11.2KB ⬇️.9KB
DOMContentLoaded 340ms 203ms ⬇️137ms
Lighthouse Performance Score 72 86 ⬆️14
Time To First Meaningful Paint 4.4s 1.2s ⬇️3.2ms
Time To Interactive 4.4s 4.9s ⬆️.5ms
@thescientist13
thescientist13 / webpack4-build-stats-local.csv
Last active May 15, 2018 17:53
Local build stats for webpack v4 for Providence Geeks
Benchmark Before After Difference
JS Payload 716KB 622KB ⬇️94KB
Build Time 44.71s 29.08s ⬇️15.63s
Lighthouse Performance Score 47 52 ⬆️5
module: {
rules: [{
test: /\.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}]