JSFiddle

Joakim's public fiddles

• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Testing to group by/map from array to an object and sum rows

  See result by looking at the console.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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? :)

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Vanilla JS, CSS - 3D card

  Just a card that animates on hover. Some nice CSS and some vanilla Js.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Simple css style for HTML5 input type="date"

  No-Library (pure JS), HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• filter() and map()

  Just tested some effective ways of filtering and mapping data.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• select styling

  also inputs and textarea

• Private fiddle Extra
• Delete fiddle
Groups Extra
• My first AngularJS app

  Just a test to do a http request.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• rm197xbf

  No-Library (pure JS), HTML, SCSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Design grid system

  Just made a simple grid system.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• A totally accessible form with validation (WCAG)

  With form validation, nice tab focus and shortcuts. Made this for a customer.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Elegant shadow

  Just a nice CSS-shadow

• Private fiddle Extra
• Delete fiddle
Groups Extra

• 1
• ▶︎
• 2