Roman Janko Kcko
🦜
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // https://medium.com/@ThinkingLoop/12-dom-tricks-no-libraries-required-61268e398c50 | |
| // 1) Query once, act many | |
| const $ = (sel, root = document) => root.querySelector(sel); | |
| const $$ = (sel, root = document) => [...root.querySelectorAll(sel)]; | |
| const app = $('#app'); | |
| const buttons = $$('.action', app); | |
| buttons.forEach(btn => btn.addEventListener('click', onAction)); |
Kcko
/ layers.css
Last active
September 19, 2025 06:43
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 1. Define the order of all layers */ | |
| @layer reset, base, library, components, utilities, overrides; | |
| /* 2. Place different styles into corresponding layers */ | |
| /* reset.css or normalize.css */ | |
| @layer reset { | |
| /* ...reset the browser's default styles... */ | |
| * { box-sizing: border-box; } | |
| } |
Kcko
/ index.html
Last active
September 18, 2025 13:02
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="cs"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>SVG Mask Test</title> | |
| <style> | |
| .container { | |
| display: flex; | |
| gap: 20px; |
Kcko
/ index.html
Created
September 17, 2025 11:48
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| https://jsbin.com/tuticinojo/1/edit?html,css,output | |
| --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Pure CSS Interactions Demo</title> | |
| <style> |
Kcko
/ index.html
Last active
September 13, 2025 06:56
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| https://jsbin.com/kiliyineca/2/edit?html,css,output | |
| --> | |
| <!-- /// 1 /// --> | |
| <!-- .btn --> | |
| <div class="btn" style="--status: success">Success</div> |
Kcko
/ example.css
Last active
August 30, 2025 18:12
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* works in one direction, if both direction is needed, we need to use | |
| @starting-style for second direction, @see: https://www.youtube.com/shorts/xVt8Foa2u7I (Kevin Powell) | |
| /* toggle - two 2 , starting-style needed */ | |
| /* https://jsbin.com/sokazavera/edit?html,css,output */ | |
| .txt { | |
| background-color: #eee; | |
| padding: 20px; | |
| margin-top: 15px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // plugins/api.ts | |
| export default defineNuxtPlugin((nuxtApp) => { | |
| const api = $fetch.create({ | |
| baseURL: 'https://api.example.com', | |
| onRequest({ options }) { | |
| options.headers.set('Authorization', 'Bearer your-token'); | |
| }, | |
| }); | |
| return { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // index.js | |
| export * as MathUtils from "./math.js"; | |
| export * as StringUtils from "./string-utils.js"; | |
| // Usage: | |
| // import { MathUtils, StringUtils } from './index.js'; | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| _ |
Kcko
/ Dynamic.vue
Last active
July 8, 2025 11:04
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 1 --> | |
| <component | |
| v-if="transport?.image" | |
| :is="typeof transport.image === 'object' ? 'aw-img' : 'img'" | |
| v-bind=" | |
| typeof transport.image === 'object' | |
| ? { image: transport.image, size: 'eop-icon', style: 'max-width: 40px' } | |
| : { src: transport.image, size: 'eop-icon', style: 'max-width: 40px' } | |
| " | |
| /> |
NewerOlder