JSFiddle

Braden's public fiddles

  • Console

    Quick n' dirty DOM console. Faster and easier than console.log()

  • Random Pattern Tile Generator

    Inspired by a cool repeating 8x7 wall tile thing I saw in a kitchen. This one's 8x8 because 8x7 just raises too many questions

  • Image Magnifier

    This is a test to see if I could make an in-page image magnifier. I started this after being intrigued by the fancy magnifier gizmo over at https://yourlogicalfallacyis.com/poster Seemed simple enough. Just get an image, and a box with the same image inside, scale them differently, and have the box follow the mouse, while moving the full-sized image from the box in the opposite direction to compensate. If the mouse isn't colliding with the picture, then don't show the box. Ran into a few hurdles here and there with my math when it came to exactly where to position the full-size picture, and with events. I thought I was doing something wrong until I realized that my inspiration lagged exactly the same way. Well, here it is. It's funny how when you get deep enough into a language, the task seems relatively simple, but when you step back and look at the whole picture after finishing, you chuckle at how no novice could ever wrap their head around what you just crafted, despite how pain-free it was for you to craft from scratch. You remember back when you looked at tutorials on how to do relatively trivial things. You don't really think about it until you step back and take in the complexity of it all.

  • Best Story In The Universe

    Read along as I write the best story in the universe right before your eyes! -Braden Best a.k.a. B1KMusic

  • Quick Link Converter

    Quick Note: you can view this full-screen without all the code here: http://jsfiddle.net/B1KMusic/c5fryf2r/show I had an idea for implementing a delete-via-button feature for the Link Converter. This is the prototype. It keeps track of the contents of the text area via a global array, and splices from the array using an id stored in each delete button, then wipes the textarea, and re-renders it using the array, and re-renders the links. Unfortunately the code for the Link Converter is very messy and complicated, so this might take a while to implement into the real thing... Edit: On second thought, I'm really loving how fast this is, due to its simplicity. I'll still try to implement this in the old Link Converter, but I might consider putting this on my site as well. Update #1: So I spent some extra time making this pretty Update #2: I've added an undo function when you delete a link. Those who are familiar with Gmail will understand what I mean by "one-step undo". Update #3: I have added the ability to save the contents of the text box. Done manually as auto-save tends to bog apps down Update #4: I added Key combos Ctrl+S = Save Ctrl+Z/U = Undo (when available)

  • [CSS] Navbar Arrow-style

    This is a CSS experiment using simple CSS to achieve arrow-like shapes in navbar menu items. The way it works is that Two right-pointing triangles are put on either end of the rectangle containing the text. The left one is white, and is pushed into the rectangle, and the right one is the same color as the rectangle, and is fit snugly at the edge. By simple, I mean no vendor prefixes are used such as -webkit-xxxx-property, and that no complex fine-tuning has been done. All measurements are in units of 5 (or any multiple of) pixels. This ensures that it should render the same in most browsers.

  • Color Clock

    This is my quick stab at making a "color clock". Seems to be buggy with the colors. Edit: Fixed color bug Edit: Added radial background

  • frames demo

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

  • Dice Thingy

    I noticed this pattern with the sides of a die. And this is the result.

  • Prototypes

    A demo of JS prototypes

  • Here's a way to improve strokeRect()

    This improves upon the strokeRect() function (which renders blurry lines unless you specify half-coordinates) to draw solid lines no matter what

  • Bitwise key tracker

    Using bitwise operation and bitmasks to map every ascii char to an array of 8 integers This would be great in a C application where memory and performance are at a premium. In Javascript, I'm not sure the speed increase really warrants this level of complexity.

  • First Node.js program

    I was trying out an online node.js interpreter, and this was the first thing I hammered out. I thought it was pretty cool so I ported it to client JavaScript to save it here.

  • Text Reverser

    Reverse Text!

  • Node thingy

    Left click to drag handles, right click to add new ones

  • Starfield

    It's a starfield thingy

  • Asteroids Demo

    Woohoo! I made a working asteroids game! But holy crap did I make it hard. Not only the wonky controls (maybe having a ship graphic will fix that?), but just the insane amount of asteroids that suffocate you from the get-go. Good luck winning this! I will make graphics for this (rocky irregular circles for asteroids, and a shippy shape for the ship sorta like original asteroids), but resources can't be included in jsfiddle, so I'll post a link to it when I finish it.

  • Typo generator

    Generates all the possible single alphabetical typos for a given word you enter.

  • Random Walk

    Started out as an attempt to create a maze generator...I got a fancy random walk instead.

  • Cursor rings

    Random experiment with mouse trails