Gists
On gists
JavaScript
Content from Iframe
example.js #
// https://thewebdev.info/2022/04/22/how-to-get-the-bodys-content-of-an-iframe-in-javascript/
const iframe = document.querySelector("#id_description_iframe");
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
const iframeContent = iframeDocument.querySelectorAll("#frameBody");
On gists
Full Width Containers in Limited Width Parents
•
CSS
CSS trick
demo.css #
/* https://css-tricks.com/full-width-containers-limited-width-parents/ */
/* With Known % Width */
main {
width: 60%;
margin: 0 auto;
/* creates 20% margins on either side */
}
.full-width {
/* 1/3 of 60% = the 20% margin on either side */
margin-left: -33.33%;
margin-right: -33.33%;
}
/* With Known Non-% Parent Width */
@media (min-width: 500px) {
main {
width: 500px;
margin: 0 auto;
}
.full-width {
margin-left: calc(-100vw / 2 + 500px / 2);
margin-right: calc(-100vw / 2 + 500px / 2);
}
}
@media (min-width: $max-width) {
.full-width {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
}
@supports (width: 100vw) {
.full-width {
width: 100vw;
}
@media all and (min-width: 40rem) {
.full-width {
transform: translateX(calc((40rem - 100vw)/2));
}
}
}
/* No calc() needed */
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/*
tohle asi taky funguje
.my-image{
max-width: 100vw;
width: 100vw;
margin: 0 calc(-50vw + 50%);
height: 70vh;
}
*/
On gists
CSS
CSS trick
Textfield label animation
demo.html #
<!-- https://codepen.io/codegem-io/pen/poeeZOd -->
<style>
.wrapper {
display: block;
position: relative;
width: 300px;
}
.placeholder {
position: absolute;
left: 9px;
top: 13px;
padding: 0 4px;
color: var(--accent-color);
background-color: var(--bkg-color);
transform-origin: top left;
transition: all 120ms ease-in;
}
.textfield:focus + .placeholder,
.textfield:not(:placeholder-shown) + .placeholder {
top: -5px;
transform: scale(0.8);
font-weight: bold;
}
</style>
<label class="wrapper">
<input type="input" class="textfield" autocomplete="off" placeholder=" " />
<span class="placeholder">Name</span>
</label>
On gists
CSS
CSS trick
Inline horizontal rule
liner.scss #
// https://codepen.io/kcko/pen/qBrpVjO
.liner {
display: flex;
align-items: flex-start;
text-align: center;
&:before {
content: '';
flex-grow: 1;
height: 1px;
background: #D66853;
min-width: 20px;
margin: auto;
}
&:after {
content: '';
flex-grow: 1;
height: 1px;
background: #D66853;
min-width: 20px;
margin: auto;
}
&:after {
margin-left: 20px;
}
&:before {
margin-right: 20px;
}
}
On gists
JS oneliners
Objects
demo.js #
// https://blog.bitsrc.io/common-js-development-skills-5053f0a74ced
// Clone object
const _obj = { a: 0, b: 1, c: 2 };
const obj = { ..._obj };
const obj = JSON.parse(JSON.stringify(_obj));
// obj => { a: 0, b: 1, c: 2 }
// Merge objects
const obj1 = { a: 0, b: 1, c: 2 };
const obj2 = { c: 3, d: 4, e: 5 };
const obj = { ...obj1, ...obj2 };
// obj => { a: 0, b: 1, c: 3, d: 4, e: 5 }
On gists
JS oneliners
Arrays
demo.js #
// Clone array
const _arr = [0, 1, 2];
const arr = [..._arr];
// arr => [0, 1, 2]
// Merge array
const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr = [...arr1, ...arr2];
// arr => [0, 1, 2, 3, 4, 5];
// Deduplicated array
const arr = [...new Set([0, 1, 1, null, null])];
// arr => [0, 1, null]
// Obfuscated / randomize array
const arr = [0, 1, 2, 3, 4, 5].slice().sort(() => Math.random() - .5);
// arr => [3, 4, 0, 5, 1, 2]
// Empty array
const arr = [0, 1, 2];
arr.length = 0;
// arr => []
// Insert member at the beginning of the array
let arr = [1, 2];
arr.unshift(0);
arr = [0].concat(arr);
arr = [0, ...arr];
// arr => [0, 1, 2]
// Insert members at the end of the array
let arr = [0, 1];
arr.push(2);
arr.concat(2);
arr[arr.length] = 2;
arr = [...arr, 2];
// arr => [0, 1, 2]
// Count number of array members
const arr = [0, 1, 1, 2, 2, 2];
const count = arr.reduce((t, v) => {
t[v] = t[v] ? ++t[v] : 1;
return t;
}, {});
// count => { 0: 1, 1: 2, 2: 3 }
// Get random array member
const arr = [0, 1, 2, 3, 4, 5];
const randomItem = arr[Math.floor(Math.random() * arr.length)];
// randomItem => 1
// Create an array of specified length
const arr = [...new Array(3).keys()];
// arr => [0, 1, 2]
const arr = new Array(3).fill(0);
// arr => [0, 0, 0]
On gists
JS oneliners
Generate range random numbers
demo.js #
const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
const num = RandomNum(1, 10); // 5
On gists
JS oneliners
URL query parameters
demo.js #
const params = new URLSearchParams(location.search.replace(/\?/ig, "")); // location.search = "?name=test&sex=man"
params.has("test"); // true
params.get("sex"); // "man"
On gists
JS oneliners
Generate random ID
demo.js #
const RandomId = len => Math.random().toString(36).substr(3, len);
const id = RandomId(10);
// id => "xdeguewg1f"
On gists
CSS
CSS trick
Flex / Grid with border-bottom on each row
example.html #
<!--
https://jsbin.com/rekekomexa/1/edit?html,css,output
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h3>GRID</h3>
<section class="grid">
<div>AAA</div><div>AAA</div>
<div class="line"></div>
<div>BBB</div><div>BBB</div>
<div class="line"></div>
<div>CCC</div><div>DDD</div>
<div class="line"></div>
</section>
<h3>FLEX</h3>
<section class="flex">
<div>AAA</div><div>AAA</div>
<div class="line"></div>
<div>BBB</div><div>BBB</div>
<div class="line"></div>
<div>CCC</div><div>DDD</div>
<div class="line"></div>
</section>
</body>
</html>