JSFiddles
There are quite a lot of online sandbox environments in which you can quickly mockup HTML, CSS and JS. There's CodePen, plnkr, JS Bin, CodeSandbox and JSFiddle to name a few.
I myself have always been fond of JSFiddle. I cannot think of a particular reason why, maybe it's the simplicity.
I use it for testing functionality, quick mockups like this skeleton loader or even to make quick illustrations. I do use CodeSandbox from time to time if I want to quickly test something more complex.
Threehundredandforty fiddles
I have been using JSFiddle for about ten years now. 17 pages of fiddles, which amounts to 17 * 20 = 340 fiddles. I never bothered to clean it up so a lot of it is junk. But there are some nice little ones that are maybe worth showing. So I thought I'd sift through all of them and list some nicer ones below (and maybe cleanup along the way).
The oldest
The nice thing about this one is that it is the oldest one, written with jQuery, using setTimeout, systems Hungarian notation. All stuff I don't do anymore. But we all came from somewhere, had phases, do everything we used to do differently now. Except using asdf for quick names, asdf and poepjes.
One element
Once I had the idea the logo I use should be a single element: some psuedo selectors, roundings and transformations.
Project invoice spinner
Animating SVG is a tricky thing (since we lost Flash). This here is the mockup of the loading spinner used in project invoice.
Middle ellipsis
The ellipsis is used to shorten text and show there is more. But using it as a suffix is less clear if a list of strings all start the same. An ellipsis in the middle can be better because you can see the ending of the string. Unlike overflow: hidden; text-overflow: ellipsis; this should be coded and updated on resize.
Pinch generator
A generator written to help traverse an array starting somewhere in the middle and making your way outwards. The generator is used in the giant lists post.
Paper shade
This note is just one HTMLElement and some CSS. Note the layered shadow for realism. What you can do with CSS is really underrated.
A command line interface
It's a bit cliche to use command line interfaces in designs, so I eventually removed it from the disconnect project.
Proxy keymap
Most developers I know never use(d) Proxy because it is a bit abstract. Well, basically you can use it for anything you'd normally have to define a lot of properties for: like this keyboard binding example.
You'll need a proper keyboard for this to work though.
HTML to image
Yes you can render HTML to an image, but in a weird stupid way (should be way easier).
Golden angles
This is a great example how I sometimes use JSFiddle: for the disconnect project I needed a pattern or form to place 28 pieces of content in nine chapters. This here is the start of finding that form:
A cardboard box
Like I said: CSS is underrated.
This was created as the last example in the post about front-end logic without JavaScript.
Trippy background
Totally forgot what this was for, but it looks nice. I think I was trying to figure out why background gradients rotate so strangely.
Rainbow box
An illustration for the MC Picker blog post
Zandloper
This spinner used on this site
CSS background
Just a nice background-gradient in CSS (think I saw it here).
Text gradients
Totally forgot about text gradients
That's about it
There's more, but I didn't want to make this post too long. Hope you liked it.