Gists
On gists
CSS
CSS trick
Anchor (product image with badge - by KP)
index.html #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.Card {
border: 1px solid gray;
border-radius: .75rem;
padding: 1rem;
background: lightgray;
img {
max-width: 100%;
border-radius: .75rem;
anchor-name: --product-image;
}
.badge {
position: absolute;
position-anchor: --product-image;
bottom: calc(anchor(bottom) + 10px);
right: calc(anchor(right) + 10px);
background: green;
padding: 0.25rem 0.65rem;
border-radius: 100vw;
color: white;
}
}
</style>
</head>
<body>
<div class="Card">
<h1>Classic line Solicí řeznická dusitanová směs PRAGANDA - RYCHLOSŮL 1kg</h1>
<img src="https://picsum.photos/id/92/800/600" alt="">
<div class="badge">Zlevněno</div>
</div>
</body>
</html>
On gists
CSS
CSS trick
Toasts with relatie colors - oklch vs hsl (Kevin Powell)
example.html #
<!-- https://codepen.io/kevinpowell/pen/wBMbozYhttps://codepen.io/kevinpowell/pen/wBMbozY -->
<!--
oklch maji lepsi vnimani barev a lepe pracuji s posunem barev ..
-->
<div class="toast-grid oklch">
<h2>using oklch</h2>
<div class="toast" data-toast="info">Some general info toast</div>
<div class="toast" data-toast="warning">This might end badly</div>
<div class="toast" data-toast="error">Oh no, something has gone wrong!</div>
</div>
<div class="toast-grid hsl">
<h2>using hsl</h2>
<div class="toast" data-toast="info">Some general info toast</div>
<div class="toast" data-toast="warning">This might end badly</div>
<div class="toast" data-toast="error">Oh no, something has gone wrong!</div>
</div>
On gists
CSS
CSS trick
Css Color: from var
index.css #
/*
https://jsbin.com/setohiqiwe/edit?html,css,output
*/
:root {
--color: red;
}
.a, .b, .c {
margin: 1rem;
padding: 0.55rem;
}
.a {
background: hsl(from var(--color) h s 90%);
}
.b {
background: hsl(from var(--color) h s calc(l + 40));
}
.c {
background: hsl(from var(--color) h s l / 0.2);
}
/*
Converted to HSL, red is hsl(0 100% 50%), thus:
Setting l to 90%,
Is just hsl(0 100% 90%).
Adding 40 to l,
Add the l components together:
hsl(0 100% (50% + 40%)) → hsl(0 100% 90%)
Changing opacity to 0.2,
This means mixing white (hsl(0 0% 100%)) with hsl(0 100% 50%) on top. I guess you can find some mathematical formula somewhere that resolves this to be hsl(0 100% 90%).
Do the same steps above for green hsl(120deg 100% 25%) and see you get different colors.
*/
On gists
PHP
PCRE - subroutine vs backreference
index.php #
<?php
$regex1 = '/(\d+) \1/'; // Backreference
$regex2 = '/(\d+) (?1)/'; // Subroutine
100 100 // ✅ only backreference
100 200 // ✅ both!
// https://github.com/Hamz-a/php-regex-best-practices/blob/master/07%20Writing%20modular%20regexes.md
// named subroutines
$regex = '/(?<number>\d+),(?&number)/'; // Named subroutine
// advanced
$regex = <<<'regex'
~
(?(DEFINE)
(?<id>\d+)
(?<username>user(?&id))
(?<protocol>https?|ftp)
(?<domain>example[.]com)
(?<url>(?&protocol)://(?&domain)/users/(?&id)/(?&username)/?)
)
^(?&url)$ # Anchor our match
~x
regex;
On gists
Vue.js
Tiny usefull composables
composables.js #
// useFormHandler.js
import { ref } from 'vue'
export function useFormHandler(initialData = {}) {
const formData = ref({ ...initialData })
const errors = ref({})
const validate = () => {
errors.value = {}
Object.keys(formData.value).forEach(key => {
if (!formData.value[key]) errors.value[key] = 'Required'
})
return Object.keys(errors.value).length === 0
}
return { formData, errors, validate }
}
// ======================================= //
// useTheme.js
import { ref, provide, inject } from 'vue'
const ThemeSymbol = Symbol('Theme')
export function provideTheme() {
const theme = ref('light')
const toggleTheme = () => {
theme.value = theme.value === 'light' ? 'dark' : 'light'
}
provide(ThemeSymbol, { theme, toggleTheme })
}
export function useTheme() {
const themeContext = inject(ThemeSymbol)
if (!themeContext) throw new Error('useTheme() must be used after provideTheme()')
return themeContext
}
<!-- App.vue -->
<script setup>
import { provideTheme } from './composables/useTheme'
provideTheme()
</script>
<!-- Navbar.vue -->
<script setup>
import { useTheme } from '../composables/useTheme'
const { theme, toggleTheme } = useTheme()
</script>
<template>
<button @click="toggleTheme">Toggle to {{ theme === 'light' ? 'dark' : 'light' }}</button>
</template>
// ======================================= //
// useEventBus.js
import mitt from 'mitt'
const emitter = mitt()
export function useEventBus() {
return emitter
}
// useNotification.js
import { useEventBus } from './useEventBus'
const bus = useEventBus()
export function useNotification() {
const notify = (msg) => bus.emit('notify', msg)
const onNotify = (handler) => bus.on('notify', handler)
return { notify, onNotify }
}
// ======================================= //
// useAppState.js
import { ref } from 'vue'
const globalState = ref({ user: null, theme: 'light' })
export function useAppState() {
return globalState
}
On gists
Popular ⭐
CSS
CSS trick
Image container edge breakout
index.css #
:root {
--container-width: 700px;
--columns: 12;
--gap: 20px;
--column-width: calc((var(--container-width) / var(--columns)) - var(--gap));
--breakpoint: 46em;
}
img {
max-width: 100%;
}
.image-edge-grid {
margin-bottom: 2rem;
display: grid;
grid-gap: var(--gap);
grid-template-columns: minmax(1em, 1fr) repeat(var(--columns), minmax(0, var(--column-width))) minmax(1em, 1fr);
max-width: initial;
}
.image-edge-grid__img {
grid-column-start: 1;
grid-column-end: 15;
display: flex;
align-items: center;
@media (min-width: 46em) {
grid-column-start: 1;
grid-column-end: 8;
}
}
.image-edge-grid__content {
grid-column-start: 2;
grid-column-end: 14;
display: flex;
align-items: center;
background: plum;
@media (min-width: 46em) {
background: lime;
grid-column-start: 8;
grid-column-end: 14;
}
}
.image-edge-grid[data-reversed]
{
.image-edge-grid__content
{
background: mistyrose;
grid-column: 2/8;
grid-row: 1;
}
.image-edge-grid__img
{
grid-column: 8/15;
grid-row: 1
}
}
On gists
MySql
MySql tricks
MySql - advanced
Prepared statements and another replace tricks
example.sql #
/*
1/ standard way
*/
INSERT IGNORE INTO product_transport_type (product_id, transport_type_id)
SELECT productId, transportId
FROM (
SELECT
p.id AS productId,
t.transportId
FROM product p
CROSS JOIN (
SELECT 6 AS transportId UNION
SELECT 7 UNION
SELECT 8 UNION
SELECT 9 UNION
SELECT 10 UNION
SELECT 13 UNION
SELECT 14 UNION
SELECT 15 UNION
SELECT 16 UNION
SELECT 17 UNION
SELECT 18 UNION
SELECT 20 UNION
SELECT 21 UNION
SELECT 23 UNION
SELECT 25 UNION
SELECT 26 UNION
SELECT 27 UNION
SELECT 28 UNION
SELECT 29
) t
WHERE p.`code` IN (
7230991, 9705946, 9710628, 9734100, 9734201, 9734500, 9740966, 9740967, 9740980,
9744605, 9744606, 9744631, 9744633, 9760507, 9760556, 9762549, 9762550, 9762551,
9762569, 9762570, 9762578, 9762639, 9762640, 9762641, 9762653, 9762689, 9762704,
9762707, 9763609, 9763617, 9763618, 9779064, 9779065, 9787016, 9787017
)
) AS ProductsTransportsCombination;
/* 2 find in set - nepodporuje index - asi pomale / pomalejsi */
SET @transport_ids = '6,7,8,9,10,13,14,15,16,17,18,20,21,23,25,26,27,28,29';
SET @product_codes = '7230991,9705946,9710628,9734100,9734201,9734500,9740966,9740967,9740980,9744605,9744606,9744631,9744633,9760507,9760556,9762549,9762550,9762551,9762569,9762570,9762578,9762639,9762640,9762641,9762653,9762689,9762704,9762707,9763609,9763617,9763618,9779064,9779065,9787016,9787017';
INSERT IGNORE INTO product_transport_type (product_id, transport_type_id)
SELECT p.id AS productId, t.transportId
FROM product p
CROSS JOIN (
SELECT 6 AS transportId UNION SELECT 7 UNION SELECT 8 UNION SELECT 9 UNION
SELECT 10 UNION SELECT 13 UNION SELECT 14 UNION SELECT 15 UNION SELECT 16 UNION
SELECT 17 UNION SELECT 18 UNION SELECT 20 UNION SELECT 21 UNION SELECT 23 UNION
SELECT 25 UNION SELECT 26 UNION SELECT 27 UNION SELECT 28 UNION SELECT 29
) t
WHERE FIND_IN_SET(p.code, @product_codes)
AND FIND_IN_SET(t.transportId, @transport_ids);
/* 3 prepared stm = rychlejsi kvuli pouzivani indexu */
SET @product_codes = '7230991,9705946,9710628,9734100,9734201,9734500,9740966,9740967,9740980,9744605,9744606,9744631,9744633,9760507,9760556,9762549,9762550,9762551,9762569,9762570,9762578,9762639,9762640,9762641,9762653,9762689,9762704,9762707,9763609,9763617,9763618,9779064,9779065,9787016,9787017';
SET @transport_ids = '6,7,8,9,10,13,14,15,16,17,18,20,21,23,25,26,27,28,29';
SET @sql = CONCAT('
INSERT IGNORE INTO product_transport_type (product_id, transport_type_id)
SELECT p.id AS productId, t.transportId
FROM product p
CROSS JOIN (
SELECT 6 AS transportId UNION SELECT 7 UNION SELECT 8 UNION SELECT 9 UNION
SELECT 10 UNION SELECT 13 UNION SELECT 14 UNION SELECT 15 UNION SELECT 16 UNION
SELECT 17 UNION SELECT 18 UNION SELECT 20 UNION SELECT 21 UNION SELECT 23 UNION
SELECT 25 UNION SELECT 26 UNION SELECT 27 UNION SELECT 28 UNION SELECT 29
) t
WHERE p.code IN (', @product_codes, ')
');
PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;
/* 3b, state stm, ale sestaveni UNIONu dynamicky */
SET @product_codes = '7230991,9705946,9710628,9734100,9734201,9734500,9740966,9740967,9740980,9744605,9744606,9744631,9744633,9760507,9760556,9762549,9762550,9762551,9762569,9762570,9762578,9762639,9762640,9762641,9762653,9762689,9762704,9762707,9763609,9763617,9763618,9779064,9779065,9787016,9787017';
SET @transport_ids = '6,7,8,9,10,13,14,15,16,17,18,20,21,23,25,26,27,28,29';
-- Vytvoření UNION části pro transport IDs
SET @transport_union = REPLACE(REPLACE(@transport_ids, ',', ' UNION SELECT '), ',', '');
SET @transport_union = CONCAT('SELECT ', @transport_union);
SET @sql = CONCAT('
INSERT IGNORE INTO product_transport_type (product_id, transport_type_id)
SELECT p.id AS productId, t.transportId
FROM product p
CROSS JOIN (', @transport_union, ') t
WHERE p.code IN (', @product_codes, ')
');
PREPARE stmt FROM @sql;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;
On gists
JavaScript
Self-Defining Functions
demo.js #
// standard
/*
Boolean flags (let firstRun = true;)
Global state (if (!window.cachedResult) {...})
Unnecessary wrappers that make code harder to read
*/
let config;
function loadConfig() {
if (!config) {
console.log("Fetching config...");
config = { apiKey: "123", theme: "dark" };
}
return config;
}
console.log(loadConfig()); // Fetching config...
console.log(loadConfig()); // Still checks condition every time
// better
let loadConfig = function () {
console.log("Fetching config...");
const config = { apiKey: "123", theme: "dark" };
// Redefine itself
loadConfig = function () {
console.log("Returning cached config");
return config;
};
return config;
};
console.log(loadConfig()); // Fetching config...
console.log(loadConfig()); // Returning cached config
// anohter examples
let initClickHandler = function () {
console.log("Setting up click handler...");
document.body.addEventListener("click", () => {
console.log("Body clicked");
});
// Rewrite to a no-op
initClickHandler = function () {
console.log("Handler already set");
};
};
initClickHandler(); // Sets up handler
initClickHandler(); // Handler already set
let fetchUserData = function (id) {
console.log("Fetching user from API...");
const cache = {};
fetchUserData = function (id) {
if (cache[id]) return cache[id];
// Simulated fetch
return (cache[id] = { id, name: "User " + id });
};
return fetchUserData(id);
};
console.log(fetchUserData(1)); // Fetch + cache
console.log(fetchUserData(1)); // Cached
console.log(fetchUserData(2)); // New fetch