Joakim's public fiddles
-
tez68Ld7
No-Library (pure JS), HTML, CSS, JavaScript
-
JS Class example
No-Library (pure JS), HTML, CSS, JavaScript
-
Animate with JS.
No-Library (pure JS), HTML, CSS, JavaScript
-
Intersection observer
Make some nice effects when elements enters the screen.
-
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/#
-
Simple boiler plate React
With CSS transition group
-
Ellipsis to the left CSS
No-Library (pure JS), HTML, CSS, JavaScript
-
Three function versions to get fibonacci number
Recursive, array and variable solutions. Three ways to run this function.
-
Destructuring an object
No-Library (pure JS), HTML, CSS, JavaScript
-
Tooltip, only CSS
This is usually made through JS. But you can do this with CSS only.
-
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.
-
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.
-
Testing to group by/map from array to an object and sum rows
See result by looking at the console.
-
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? :)
-
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.