JSFiddle

Joakim's public fiddles

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Private fiddle Extra
• Delete fiddle
Groups Extra
• Clip-path effect with background image (cover)

  Just a test for a upcoming project I designed. The hero will get this CSS effect.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Clip-path effect with an image

  Just a test for a upcoming project I designed. The hero will get this CSS effect.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• scrollShadow hook (React + TypeScript)

  This hook receives an object with a element that has scroll, two optional key/values and two callback functions : One for right shadow, one for left shadow. In that way you can add whatever you want when the callbacks fires, shadows, arrows, or whatever fits. Since there is some vanilla in this the re-renders are controlled.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Private fiddle Extra
• Delete fiddle
Groups Extra
• Truncating text inside flex is not that easy...

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

• 1
• 2
• ▶︎
• 3