JSFiddle

Joakim's public fiddles

• Simple boiler plate React

  With CSS transition group

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Ellipsis to the left CSS

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

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Three function versions to get fibonacci number

  Recursive, array and variable solutions.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Destructuring an object

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

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Tooltip, only CSS

  This is usually made through JS. But you can do this with CSS only.

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

• 1
• ▶︎
• 2