Gists
On gists
JavaScript
DOC
Vue.js
JS Doc
example.js #
data() {
return {
// https://medium.com/@trukrs/type-safe-javascript-with-jsdoc-7a2a63209b76
// https://devhints.io/jsdoc
// better suggestion ... eg: this.overlay?. + tab
/**
* @type {boolean}
*/
delaySet: false, // je nastaveny delay?
/**
* @type {?number}
*/
timeout: null, // timeout delay
/**
* @type {number}
*/
ttlIn: 400, // delka prodlevy najeti
/**
* @type {number}
*/
ttlOut: 300, // delka prodlevy pri odjeti
/**
* @type {HTMLElement}
*/
overlay: null, // HTML prvek zacileneho overlaySelector-u
/**
* @type {Array}
*/
listChildren: [] // LI-cka pod zacilenym UL-kem
}
},
On gists
Tailwind CSS
Tailwind addCustom component
tailwind.config.js #
const plugin = require('tailwindcss/plugin')
module.exports = plugin(({ addComponents }) => {
addComponents({
'.text-h1': {
'@apply text-lg md:text-2xl lg:text-3xl': {},
'@apply text-red-400 md:text-green-500 lg:text-blue-600': {},
'@apply leading-relaxed': {},
},
});
//
module.exports = {
// ...
plugins: [
plugin(function ({ addComponents, theme }) {
addComponents({
'.card': {
backgroundColor: theme(colors.white),
borderRadius: theme(borderRadius.lg),
padding: theme(spacing.6),
boxShadow: theme(boxShadow.xl),
}
})
})
]
}
On gists
Visual Studio Code
HTTP plugin
req.http #
POST https://mybrokis.cz/openapi?handler=Brokiscz HTTP/1.1
content-type: application/json
{
"apptoken": "Y@McvfTjsrWnZr6u7x!"
}
#
On gists
Tailwind CSS
TailwindCSS default config
tailwind.config.js #
/*
Tailwind - The Utility-First CSS Framework
A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink),
David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger).
Welcome to the Tailwind config file. This is where you can customize
Tailwind specifically for your project. Don't be intimidated by the
length of this file. It's really just a big JavaScript object and
we've done our very best to explain each section.
View the full documentation at https://tailwindcss.com.
*/
/* Utilities */
const pxToRem = (px, base = 16) => `${px / base}rem`
const getScaleValues = (step = 4, limit = 64) => {
let scale = {}
Array(limit / step).fill()
.map((value, key) => pxToRem(key + 1))
.forEach((value, key) => {
scale[(key + 1) * step] = value
})
return scale
}
/* Config */
// const defaultConfig = require('tailwindcss/defaultConfig')()
const colors = {
transparent: 'transparent',
'black': '#000',
'white': '#fff',
}
const spacing = {
px: '1px',
'0': '0',
'1': pxToRem(4),
'2': pxToRem(8),
'3': pxToRem(12),
'4': pxToRem(16),
'5': pxToRem(20),
'6': pxToRem(24),
'8': pxToRem(32),
'10': pxToRem(40),
'12': pxToRem(48),
'16': pxToRem(64),
'20': pxToRem(80),
'24': pxToRem(96),
'32': pxToRem(128),
}
const sizing = {
auto: 'auto',
px: '1px',
'1': pxToRem(4),
'2': pxToRem(8),
'3': pxToRem(12),
'4': pxToRem(16),
'5': pxToRem(20),
'6': pxToRem(24),
'8': pxToRem(32),
'10': pxToRem(40),
'12': pxToRem(48),
'16': pxToRem(64),
'20': pxToRem(80),
'24': pxToRem(96),
'32': pxToRem(128),
'48': pxToRem(192),
'64': pxToRem(256),
}
module.exports = {
colors: colors,
screens: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
},
fonts: {
sans: [
'system-ui',
'BlinkMacSystemFont',
'-apple-system',
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
'sans-serif',
],
serif: [
'Constantia',
'Lucida Bright',
'Lucidabright',
'Lucida Serif',
'Lucida',
'DejaVu Serif',
'Bitstream Vera Serif',
'Liberation Serif',
'Georgia',
'serif',
],
mono: [
'Menlo',
'Monaco',
'Consolas',
'Liberation Mono',
'Courier New',
'monospace',
],
},
textSizes: {
'xs': pxToRem(12),
'sm': pxToRem(14),
base: pxToRem(16),
'lg': pxToRem(18),
'xl': pxToRem(20),
'2xl': pxToRem(24),
'3xl': pxToRem(30),
'4xl': pxToRem(36),
'5xl': pxToRem(48),
},
fontWeights: {
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
},
leading: {
none: 1,
tight: 1.25,
normal: 1.5,
loose: 2,
},
tracking: {
tight: '-0.05em',
normal: '0',
wide: '0.05em',
},
textColors: colors,
backgroundColors: colors,
backgroundSize: {
auto: 'auto',
cover: 'cover',
contain: 'contain',
},
borderWidths: {
default: '1px',
'0': '0',
},
borderColors: global.Object.assign({
default: 'currentColor',
}, colors),
borderRadius: {
default: '0.25rem',
'full': '9999px',
},
width: global.Object.assign({
'1/2': '50%',
'1/3': '33.33333%',
'2/3': '66.66667%',
'1/4': '25%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.66667%',
'5/6': '83.33333%',
'full': '100%',
'screen': '100vw',
}, sizing),
height: global.Object.assign({
'full': '100%',
'screen': '100vh',
}, sizing),
minWidth: {
'0': '0',
'full': '100%',
},
minHeight: {
'0': '0',
'full': '100%',
'screen': '100vh',
},
maxWidth: {
'xs': '20rem',
'sm': '30rem',
'md': '40rem',
'lg': '50rem',
'xl': '60rem',
'2xl': '70rem',
'3xl': '80rem',
'4xl': '90rem',
'5xl': '100rem',
'full': '100%',
},
maxHeight: {
'full': '100%',
'screen': '100vh',
},
padding: global.Object.assign({}, spacing),
margin: global.Object.assign({
'auto': 'auto',
}, spacing),
negativeMargin: global.Object.assign({}, spacing),
shadows: {
default: '0 2px 4px 0 rgba(0, 0, 0, 0.10)',
'md': '0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08)',
'lg': '0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08)',
'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
'outline': '0 0 0 3px rgba(52, 144, 220, 0.5)',
'none': 'none',
},
zIndex: {
auto: 'auto',
'0': 0,
'10': 10,
'20': 20,
'30': 30,
'40': 40,
'50': 50,
},
opacity: {
'0': '0',
'25': '0.25',
'50': '0.5',
'75': '0.75',
'100': '1',
},
svgFill: {
current: 'currentColor',
},
svgStroke: {
current: 'currentColor',
},
/*
|-----------------------------------------------------------------------------
| Modules https://tailwindcss.com/docs/configuration#modules
|-----------------------------------------------------------------------------
|
| Here is where you control which modules are generated and what variants are
| generated for each of those modules.
|
| Currently supported variants:
| - responsive
| - hover
| - focus
| - focus-within
| - active
| - group-hover
|
| To disable a module completely, use `false` instead of an array.
|
*/
modules: {
appearance: ['responsive'],
backgroundAttachment: false,
backgroundColors: [],
backgroundPosition: false,
backgroundRepeat: false,
backgroundSize: false,
borderCollapse: [],
borderColors: [],
borderRadius: false,
borderStyle: false,
borderWidths: [],
cursor: [],
display: ['responsive'],
flexbox: ['responsive'],
float: false,
fonts: [],
fontWeights: [],
height: ['responsive'],
leading: ['responsive'],
lists: ['responsive'],
margin: ['responsive'],
maxHeight: ['responsive'],
maxWidth: ['responsive'],
minHeight: ['responsive'],
minWidth: ['responsive'],
negativeMargin: ['responsive'],
objectFit: false,
objectPosition: false,
opacity: [],
outline: ['focus'],
overflow: [],
padding: ['responsive'],
pointerEvents: [],
position: ['responsive'],
resize: false,
shadows: false,
svgFill: [],
svgStroke: [],
tableLayout: false,
textAlign: ['responsive'],
textColors: ['responsive', 'hover'],
textSizes: ['responsive'],
textStyle: [],
tracking: false,
userSelect: false,
verticalAlign: false,
visibility: false,
whitespace: [],
width: ['responsive'],
zIndex: [],
},
/*
|-----------------------------------------------------------------------------
| Plugins https://tailwindcss.com/docs/plugins
|-----------------------------------------------------------------------------
|
| Here is where you can register any plugins you'd like to use in your
| project. Tailwind's built-in `container` plugin is enabled by default to
| give you a Bootstrap-style responsive container component out of the box.
|
| Be sure to view the complete plugin documentation to learn more about how
| the plugin system works.
|
*/
plugins: [
// require('tailwindcss/plugins/container')({
// center: true,
// padding: '1rem',
// }),
],
/*
|-----------------------------------------------------------------------------
| Advanced Options https://tailwindcss.com/docs/configuration#options
|-----------------------------------------------------------------------------
|
| Here is where you can tweak advanced configuration options. We recommend
| leaving these options alone unless you absolutely need to change them.
|
*/
options: {
prefix: '',
important: false,
separator: ':',
},
}
On gists
Tailwind CSS
Tailwind advanced config
tw.config..js #
/*
URL: https://www.viget.com/articles/tips-for-your-tailwind-config/
*/
// Spread + negative
margin: (theme, { negative }) => ({
auto: 'auto',
...theme('spacing'),
...negative(theme('spacing')),
})
// different units
const em = px => `${px / 16}em`
const rem = px => ({ [px]: `${px / 16}rem` })
const px = num => ({ [num]: `${num}px` })
screens: {
sm: em(640),
md: em(768),
lg: em(1024),
xl: em(1280),
},
borderWidth: {
...px(2),
...px(3),
...px(5),
},
fontSize: {
...rem(12),
...rem(13),
}
// colors
const tinycolor = require('tinycolor2')
module.exports = {
// [...other tailwind code]
theme: {
colors: {
'purple': '#9f7aea',
'purple-50': tinycolor('#9f7aea').setAlpha(0.5).toRgbString(),
}
}
}
// or
module.exports = {
// [...other tailwind code]
theme: {
colors: {
'purple': '#9f7aea',
'purple-50': 'color(#9f7aea a(50%))',
}
}
}
// screens, downwards, eg: only <= lg
screens: {
tyd: { max: em(399) },
ty: em(400),
xsd: { max: em(599) },
xs: em(600),
smd: { max: em(767) },
sm: em(768),
mdd: { max: em(959) },
md: em(960),
lgd: { max: em(1023) },
lg: em(1024),
xld: { max: em(1279) },
xl: em(1280),
}
On gists
CSS
CSS trick
Grid trick - stacking & centering (no position absolute needed)
index.html #
<!--
https://jsbin.com/febanurovo/edit?html,css,output
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
.stacked {
display: grid;
border: 1px solid red;
place-items: center;
isolation: isolate;
}
.stacked > * {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.stacked > .media {
z-index: -1;
}
img {
max-width: 100%;
height: auto;
}
</style>
<body>
<div class="stacked">
<h1>Some heading</h1>
<img class="media" src="https://kinsta.com/wp-content/uploads/2021/07/web-components-1024x512.png" alt="">
</div>
</body>
</html>
On gists
JavaScript
Web components
Web component
calendar.js #
class AmbiCalendar extends HTMLElement
{
constructor()
{
super();
this.shadow = this.attachShadow({ mode: "open"});
}
connectedCallback()
{
this.render(true, []);
fetch('/api/v1/dk_workshop_date?filters[dk_voucher_id]=' + this.getAttribute('voucherId'))
.then((response) => {
if (response.ok) {
return response.json();
} else {
return Promise.reject(response);
}
}).then((data) => {
this.render(false, data);
}).catch(function (err) {
// There was an error
console.warn('Something went wrong.', err);
});
}
render(loading, data)
{
let body = '';
if (loading) {
body = '<div>loading...</div>';
} else {
data.map((item) => {
body += `<li>${item.date_from} - ${item.date_to}</li>`;
});
}
this.shadow.innerHTML = `
<h1>Ambi calendar</h1>
<lu>
${body}
</lu>
`;
}
}
customElements.define('ambi-calendar', AmbiCalendar);
On gists
JavaScript
JS Parallax
parallax.js #
// https://github.com/yablko/responzivny-web-kurz/blob/crave-game-verzia-z-kurzu/index.html
const headerEl = document.querySelector('header')
const logoEl = document.querySelector('.crave-logo img')
const setTranslate = (xPos, yPos, el) => {
el.style.transform = `translate3d(${xPos}, ${yPos}px, 0)`;
}
let xScrollPosition;
let yScrollPosition;
const scrollLoop = () => {
xScrollPosition = window.scrollX;
yScrollPosition = window.scrollY;
setTranslate(0, yScrollPosition * 0.75, headerEl);
setTranslate(0, yScrollPosition * -0.25, logoEl);
requestAnimationFrame(scrollLoop);
}
window.addEventListener('DOMContentLoaded', scrollLoop, false);
On gists
Ref slot (Options vs Composition, Parent / Child, Child / Parent)
•
Popular ⭐
Vue.js
ChildToParent-ScopedSlot.vue #
<!-- 1) From Child to Parent via scoped slot and dynamic ref-->
<!-- App.vue-->
<template>
<div id="app">
<HelloWorld v-slot="{ setRef }">
<input type="text" :ref="(el) => setRef(el)" />
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld,
},
};
</script>
<!-- Hello world -->
<template>
<slot v-bind="{ setRef }"></slot>
<button @click="setFocus">SET</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
ref: ''
}
},
methods: {
setFocus()
{
this.ref.focus()
},
setRef(el) {
this.ref = el
console.log(el)
}
}
}
</script>