Joakim's public fiddles
-
nkoub3Lf
No-Library (pure JS), HTML, SCSS, JavaScript
-
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.
-
Identify and trim social security number or card number (Username) V2 - Global function
I had a case where I needed to check if there is a Swedish social security number or a card number that was entered into a login input before sending. The reason is to delete all unwanted spaces and/or special characters, if I can identify it. If I found a Swedish social security number, I needed to trim it into YYMMDDXXXX, if I identified a card number I needed it to be trimmed to XXXXXXX0303 / XXXXXXX0330. What can identify a social security number is the length of it. If it only consists digits, it should be ten or twelve characters entered in total, not more or less. In this case the card number is always 11 digits, if you remove all other characters and they always ends with "0303" or "0330". This gives me some info to identify card numbers and social security numbers. I am returning false in this function when you submit, just to make sure we do not acually post any values - so you can see the effect. In the real case I return true in all cases, even if not trimmed. If I identify it, I trim the number before sending the data. Other usernames is also used in this form, as "support", etc, that is the reason all get through, even untrimmed usernames.
-
WAI-ARIA: ARIA-LIVE - How to tell the user by sound that dynamic data is loaded into the page.
WCAG. Accessibility for dynamic loaded content.
-
A totally accessible form with validation (WCAG)
With form validation, nice tab focus and shortcuts. Made this for a customer.