Joakim's public fiddles
-
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.
-
Elegant shadow
Just a nice CSS-shadow
-
Fluid/responsive font size with SCSS. With max/min size.
The vw size is great for responsive and fluid font size. But it comes with the challenge that it does not have a max or min size, which can cause some trouble. It is not possible to set max/min size in font-size, there is no such attribute. The solution is media-queries. This SCSS mix-in calculation helps you out really well when you want to set vw-size with max and min size.
-
Dynamic width depending on numbers of child elements. CSS only!
Sometimes you use dynamic/user created content and do not know how many elements there will be. And that may cause some problems if you want to be able to generate different numbers of child elements, in this specific case li elements - but keeping the layout fluid no matter what. Usually you need something else then CSS to count the child lements and add classes to parent to control this. But by doing this solution you only need pure CSS to handle different amount of elements dynamically. You can change or add as you want to fit your solution.
-
Form, with validation and full accessibility
This form will fullfill WCAG 2.0 requirements with no problem. It is very dynamic to add, edit or remove fields from it. Try this out by trying to submit the form with fails to see how it handles it, both visual and in wai-aria. If you want to, use a screen reader to see how it acts. See comments in jQuery code for more logic.
-
Tab shortcuts - for accessibility
Tab shortcuts for accessibility. Hidden accessible buttons, jump to things like navigation, search, content or whatever important content you have on the page. Only showing up when you tab the page. No Javascript needed. Try this out by using your tab button in this fiddle result.