user2314737's public fiddles
-
Building a search input in alpine.js
Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going. Alpine is a collection of 15 attributes, 6 properties, and 2 methods. (https://alpinejs.dev/) Demo from https://alpinejs.dev/start-here#building-a-search-input
-
Basic alpine.js demo
Source: https://alpinejs.dev/start-here#building-a-counter
-
Live typing a random quote
Quotes are from the Quotable API https://github.com/lukePeavey/quotable From mdn web docs "create fancy boxes": https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/create_fancy_boxes Nice styles for quotes: https://freefrontend.com/css-quote-styles/
-
Simulate typing with irregular speed and different kinds of typos
using some random noise in the typing speed some random typos that slow down typing and get corrected Typos list from: https://gist.github.com/iwek/4121650 Type whitespaces quicker
-
Simulate typing with irregular speed and different kinds of typos
using some random noise in the typing speed some random typos that slow down typing and get corrected Typos list from: https://gist.github.com/iwek/4121650
-
Simulate typing with typos and 🦆 sound 😁
Button is necessary becaue without interaction sound cannot be played (see https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide) using some random noise in the typing speed
-
Simulate typing with typos 😁
using some random noise in the typing speed
-
Play sounds
No-Library (pure JS), HTML, CSS, JavaScript
-
Simulate typing with typos 😁
using some random noise in the typing speed
-
Simulate typing with noisy speed
using some random noise in the typing speed
-
qdk47jaf
The advantages of SVG patterns: - small file size - same rendering for any resolution
-
Show a random quote
Quotes are from the Quotable API https://github.com/lukePeavey/quotable From mdn web docs "create fancy boxes": https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/create_fancy_boxes Nice styles for quotes: https://freefrontend.com/css-quote-styles/
-
Show a random quote
Quotes are from the Quotable API https://github.com/lukePeavey/quotable From mdn web docs "create fancy boxes": https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/create_fancy_boxes Nice styles for quotes: https://freefrontend.com/css-quote-styles/
-
Show a random quote
Quotes are from the Quotable API https://github.com/lukePeavey/quotable From mdn web docs "create fancy boxes": https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/create_fancy_boxes Nice styles for quotes: https://freefrontend.com/css-quote-styles/
-
Border with shadow
To get a random image from unsplash use: https://source.unsplash.com/random
-
Stilish blockquote
From mdn web docs "create fancy boxes": https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/create_fancy_boxes Nice styles for quotes: https://freefrontend.com/css-quote-styles/
-
A simple countdown
From https://getcssscan.com/css-buttons-examples
-
A button
From https://getcssscan.com/css-buttons-examples
-
Split canvas into a grid
Grid configuration: The canvas occupies the whole window and is resized when window is resized (see https://github.com/processing/p5.js/wiki/Positioning-your-canvas#making-the-canvas-fill-the-window) Click anywhere in the sketch to toggle fullscreen. p5.js fullscreen: https://p5js.org/reference/#/p5/fullscreen
-
Split canvas into a grid
Grid configuration: The canvas occupies the whole window and is resized when window is resized (see https://github.com/processing/p5.js/wiki/Positioning-your-canvas#making-the-canvas-fill-the-window) Click anywhere in the sketch to toggle fullscreen. p5.js fullscreen: https://p5js.org/reference/#/p5/fullscreen