I made a guide tool for web development.

[nixnerd]

I had this idea late tonight… so I decided to code it up real quick. I thought it would be cool to have Photoshop-style guides for development in the browser. Here is what I made:

http://codepen.io/Joe_Temp/full/tjzCb/

I warn you… this is not coded in a very clever way, ESPECIALLY with regard to the very verbose jQuery. But, I was in a hurry to get something done. That’s what version control is for! Also, the data (coordinates) does not persist. As soon as you reload your browser the guides go away. I’ll fix that soon though. Also, there will be two inputs, should someone want to set an exact coordinate or rotate the guide to a certain angle. Didn’t feel like dealing with that today.

Here’s what you can do: Create color-coded guides and drag them around. Enjoy!

[Taufik Nurrohman]

I am thinking about bookmarking an article text. For example, if I haven’t yet finished reading a very-very long web pages, I can add a rule marker in the last line I have read then read the rest next time. You can use cookie or localStorage to save the offset.

[nixnerd]

That’s how I’m planning to do it!

[nixnerd]

So, right now this uses jQuery to make things draggable, I use it to append divs to the DOM, and it’s used for click functions. I wonder how much of this can be replaced by vanilla JS.

I often use just JS for click functions, but sometimes it comes out more verbose than jQuery. Draggable items can’t really be done any easier than with jQuery UI. But I wonder if there’s a cleaner way to structure the whole thing.

Over all, I think this is a legitimate use of jQuery and not an abuse. Let me know if you have pointers though, as this tool is for the community!

[nixnerd]

This tool does work with live reload… at least with Sublime Text + Firefox. Should work for any though.

[Author]

Posts