Skip to content

Instantly share code, notes, and snippets.

View sisidovski's full-sized avatar

Shunya Shishido sisidovski

View GitHub Profile
@sisidovski
sisidovski / example.html
Created January 20, 2021 06:27
Image aspect ratio box pattern for CLS improvement
<div class="imageWrap">
<a>
<div class="thumbWrap">
<div class="thumb">
<img />
</div>
</div>
</a>
</div>
@sisidovski
sisidovski / example.css
Last active January 20, 2021 06:27
Image aspect ratio box pattern for CLS improvement
.imageWrap {
display: inline-block;
width: /* actual image width, or the width when the height is 300px */
max-width: 100%;
}
.thumbWrap {
margin: 0;
height: 0;
overflow: hidden;
background-color: #fff;
@sisidovski
sisidovski / list-accept-header-values.sql
Created February 6, 2019 12:16
HTTPArchive queries
#standardSQL
CREATE TEMPORARY FUNCTION CUSTOM_JSON_EXTRACT(json STRING, key String)
RETURNS string
LANGUAGE js AS """
try {
var parsed = JSON.parse(json);
for (i = 0; i < parsed.length; i++) {
if (parsed[i].name == key) return parsed[i].value.trim()
}
} catch (e) {}
@sisidovski
sisidovski / remove_eb_versions.js
Created March 7, 2018 01:39
Remove multiple AWS ElasticBeanstalk application versions
document.querySelectorAll('table[data-table="resource"] tr.ng-scope').forEach(a => a.querySelector('th input').click())
@sisidovski
sisidovski / old_tls_warning.js
Last active February 28, 2018 03:02
Show warning message on the top of screen when browser seems to be old TLS protocol, mainly android version is under 4.4
(function() {
var isOldTLSBrowser = function() {
var ua = navigator.userAgent.toLowerCase();
// Android detection. Major version more than 5 is fine.
if (!/android [1234]/.test(ua)) {
return false;
}
// Browser detection. Chrome, Firefox, Edge, SamsungBrowser is almost fine.
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox
// https://blogs.windows.com/msedgedev/2017/10/05/microsoft-edge-ios-android-developer/
function bytes2(str) {
return(encodeURIComponent(str).replace(/%../g,"x").length);
}
What is the best solution for icons?
1. Icon fonts
1. - Bigger download
2. - Hard to maintain
3. - Can break badly
4. + Super easy to style
2. <img src=‘something.svg’>
1. - Requires asset path in HTML
2. - Impossible to change style
@sisidovski
sisidovski / corser.md
Last active February 16, 2017 14:31
corsでのローカル開発

X-Requested-Withとかなんでもいいけどヘッダをクライアント側にも付与する必要がある。 PUTとかDELETEのときはpreflightリクエストが投げられる

var corser = require("corser");
app.use(corser.create({
  methods: corser.simpleMethods.concat(["DELETE", "OPTIONS"]),
  requestHeaders: corser.simpleRequestHeaders.concat(["X-Requested-With"])
}));
@sisidovski
sisidovski / hacks.js
Last active August 29, 2015 14:17 — forked from notmasteryet/hacks.js
(function() {
try {
var a = new Uint8Array(1);
return; //no need
} catch(e) { }
function subarray(start, end) {
return this.slice(start, end);
}
@sisidovski
sisidovski / table.html
Created January 22, 2014 08:17
table bug on chrome 32 ?
<!doctype html>
<html>
<body>
<style>
td {
padding: 0px;
}
</style>
<table border="0">
<tbody>