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.
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)
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.