JSFiddle

Joakim's public fiddles

• Assert function: Make TypeScript know data is defined when it theoretically can be undefined

  Data is coming from somewhere. In TS it can be undefined. But it should not and if it is undefined = Something is wrong and we should crash the site. Then you can use this utility function so you are insuring TS that this is defined. Pretty handy in some cases.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Animate with JS.

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

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Intersection observer

  Make some nice effects when elements enters the screen.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Advanced clip-path / svg-path (inverted masking)

  In this case a square is cut out in the middle. It is kind of an inverted clip path, showing the outer area. Test to type your SVG path here. https://svg-path-visualizer.netlify.app/#

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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. Three ways to run this function.

• 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

• 1
• 2
• ▶︎
• 3