Skip to content

Instantly share code, notes, and snippets.

View Kcko's full-sized avatar
🦜
fly like a bird ...

Roman Janko Kcko

🦜
fly like a bird ...
View GitHub Profile
/*
@source: https://javascript.plainenglish.io/50-javascript-shortcuts-that-will-make-you-a-code-wizard-in-2025-14dd7aee319c
*/
// 1. Ternary Operator
const status = loggedIn ? "Welcome!" : "Please login.";
// 2. Default Parameters
function greet(name = "Stranger") {
return `Hello, ${name}`;
}
const user = { name: "Alice", age: 30 };
// 1. for...in loop - iteruje přes všechny enumerable vlastnosti
console.log("1. for...in loop:");
for (let key in user) {
console.log(`${key}: ${user[key]}`);
}
// 2. Object.keys() - vrací pole klíčů
console.log("\n2. Object.keys():");
// https://www.reddit.com/r/tailwindcss/comments/1icfwbo/here_are_10_tailwind_tricks_shared_by_shadcn_they/
// https://x.com/shadcn/status/1842329158879420864
// 1. Dynamic CSS Variables in Tailwind
<div style={{ "--width": isCollapsed ? "8rem" : "14rem" }} className="w-[--width] transition-all" />
// 2. Data Attribute State Management
<div
data-state={isOpen ? "open" : "closed"}
<!--
https://jsbin.com/bihofirugo/2/edit?html,css,output
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
// 1 Když neobalíš objekt do reactive():
const filtersStorage = {
priceValue: computed({
get: () => selectedFilters.value.priceValue,
set: v => selectedFilters.value.priceValue = +v
})
}
// Pak filtersStorage.priceValue je přímo ComputedRef objekt. A ComputedRef se chová jako ref - musíš použít .value pro přístup k hodnotě:
const eventHandler = e => {
const keyActions = {
Escape: closeGallery,
ArrowLeft: prevMedia,
ArrowRight: nextMedia
}
if (e.key === 'ArrowLeft') {
prevMedia()
}
if (e.key === 'ArrowRight') {
<template>
<div>
<ul>
<li v-for="task in tasks" :key="task.id" :class="{ 'task-overdue': isOverdue(task), 'task-completed': task.completed }">
{{ task.name }}
</li>
</ul>
</div>
</template>
Vývoj software je často o hledání správné rovnováhy mezi:
čistotou kódu vs. praktičností
přehledností vs. flexibilitou
striktními pravidly vs. pragmatickým přístupem
A jak jste správně poznamenal - je to neustálý proces učení a přizpůsobování. Co fungovalo včera, nemusí být nejlepší řešení zítra. A to je v pořádku!
Důležité je:
Dělat informovaná rozhodnutí
Nebát se změny, když je potřeba
Učit se z předchozích zkušeností
Zachovat si zdravý rozum a neupnout se na jeden přístup
<!--
The inert attribute completely disables interactivity.
Screen readers and keyboard navigation will ignore it.
It’s a cleaner, more semantic approach to managing hidden elements.
-->
<nav inert>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>