bcmoney's public fiddles
-
-
Custom validation messages
How to use "setCustomValidity" validation messages with: text, radio, checkbox
-
AJAX Loader
Based on FutureBox (pure CSS overlay), see: https://jsfiddle.net/bcmoney/o7gskc45/
-
-
CSS Grid
auto-fill .vs. auto-fit
-
Image thumbnail gallery
Grow/shrunk Hover effects and thumbnail styling
-
Parallax (basic)
Minimal CSS/JS Parallax effect
-
-
HTML5 Form validation
Custom validation message example (setCustomValidity .vs. title)
-
Blur DOM elements effect
Useful for previewing info before logged in, pre-loaders on asynchronously loaded data, etc...
-
-
Small thumbnail grid
Centered text and image thumbnails in grid
-
HTML5 APIs - Speech Recognition
No-Library (pure JS), HTML, CSS, JavaScript
-
Closed Captions & Subtitles creator
Generates exportable CC & SRT files For YouTube API see: https://developers.google.com/youtube/iframe_api_reference
-
A11Y fonts - OpenDyslexic
Example of more accessible and readable text using OpenDyslexic
-
JUDO Weight classes table
For MBK Judo
-
Lazy Loading - Picture/Source set
Lazy loading on an "iFrame", "video" or "img" are all easy enough with the new `loading="lazy"` attribute; however it won't work with multi-source Picture or Video. This technique can extend it to work with those as well. For more, see: https://css-tricks.com/the-complete-guide-to-lazy-loading-images/
-
Mega Menu
Example of a "Mega" menu with dropdowns
-
Build JSON from Object/Array
Adobe Campaigns API example
-
XML Recursion example
Recursion can be extemenly useful in parsing data structures (such as XML, HTML or even JSON or regular JS Arrays/Objects) when the nesting of the data structure is unknown.