Joakim's public fiddles
-
Ellipsis to the left CSS
No-Library (pure JS), HTML, CSS, JavaScript
-
Three function versions to get fibonacci number
Recursive, array and variable solutions.
-
jyforL40
No-Library (pure JS), HTML, CSS, JavaScript
-
Tooltip, only CSS
This is usually made through JS. But you can do this with CSS only.
-
Scroll with snapping sections - CSS only
This works in touch devices. When you scroll it snaps to each section. Works very well in accessibility, try to tab links and button.
-
How to truncate text with ellipsis in a flex child
The main trick is the .min-w-0 CSS. It will not work without it.
-
Testing to group by/map from array to an object and sum rows
See result by looking at the console.
-
SVG animation hover
Just a little illustration with animation for a project. Designed first in Illustrator and then I cleaned the code a bit and wrote the animations. Pretty cute, isn't it? :)
-
Vanilla JS, CSS - 3D card
Just a card that animates on hover. Some nice CSS and some vanilla Js.
-
Simple css style for HTML5 input type="date"
No-Library (pure JS), HTML, CSS, JavaScript
-
React destructuring
This is the way how you destruct data from a component to child component (and their child components). I have tried to comment my best.
-
filter() and map()
Just tested some effective ways of filtering and mapping data.
-
select styling
also inputs and textarea
-
My first AngularJS app
Just a test to do a http request.
-
Timer function with locale, made for a server session timeout
A JS-project for work, where we have a session timing out. Needed to warn the user that a session is running timing out soon and give the opportunity to extend. Very accessible, alerting the different stages in screen reader without spamming every second.
-
rm197xbf
No-Library (pure JS), HTML, SCSS, JavaScript
-
Design grid system
Just made a simple grid system.
-
Accessible custom checkboxes and radio buttons
No js. Just CSS. In this case I use Font Awesome icons. But you could use svg, pure css solutions or whatever works. This works perfectly in screen readers. Tab focus works.
-
A WCAG solution for modals
Making focus staying inside modals and making focus going back to opening button when closed. Works as a charm in screen readers. Tab, enter and esc key are working perfectly.
-
Function with passed options
In this case I tested to use underscore.js for an object, to set defaults and change them if custom options are sent. Underscore [ _ ] is doing basically the same thing as Object.assign in this case. But Object.assign is not compatible with IE11. This works in IE11 without processors/compilers like babel.