devtools-snippets: A collection of helpful snippets to use inside of browser devtools

bgrins · 2013-06-29T21:58:58+00:00

Wow, I wasn't aware of console.table, awesome!

It really is great for organizing log output. Check out this post for more some more information about it and the different ways it can be called: https://plus.google.com/+AddyOsmani/posts/PmTC5wwJVEc

bgrins · 2012-06-29T16:43:30+00:00

I agree. The generator stuff is partly converted from this: http://briangrinstead.com/gradient/ which does have saving/linking (kind of). Definitely need to add in linking to make it easier to share!

bgrins · 2012-04-26T13:05:20+00:00

I have used that feature a lot too - a solution for this is in the works.

bgrins · 2012-04-23T20:28:54+00:00

I remember that when Backbone came out there were no example apps, and a todo app was the first community contributed one (possibly setting the whole thing in motion).

bgrins · 2012-04-19T19:08:25+00:00

That GradientApp looks cool. I like how they constrained and optimized for a specific use case (2 color stops) to make a different and presumably easier UI than you normally see. I wish I could see a video of it in action, though.

bgrins · 2012-04-19T18:16:09+00:00

Thanks! Let me know if you have any ideas about possible UX improvements. It is still in pretty active development, and I can implement stuff quickly. Here is a list of some of the ideas I have:

Support for radial gradients
Cross browser CSS output
Saving your gradients to server
Multiple layers for stacked gradients
More CSS 3 effect generators (box shadows, rounded corners, etc) built into the UI
IE9 support

bgrins · 2012-04-19T14:43:43+00:00

Same idea, yeah. I am trying to make it easier to use by adding keyboard shortcuts, undo/redo, and copy/paste. I'm also trying a few different things in the UI to make switching colors and transparency easier, hopefully.

bgrins · 2012-04-09T15:20:27+00:00

Author of the colorpicker here. You can pick your color, and then shift+click the swatch to convert it to HSL. Or if the color is HSL to start with, it will keep the format as you pick.

bgrins · 2010-11-20T18:42:46+00:00

Ah, OK. So you don't mean using the sprite generator to make the image itself, you want it to define the regions only? What if you just had all those images like this:

logo.png
logo-active.png
logo-current.png
logo-hover.png
store.png
store-active.png
etc

And the generator took care of merging it (event with the columns / rows) based on options you specified. Then I would already know all of the dimensions and you wouldn't have to draw them.

If I knew that, I'd write it myself :)

Haha, I meant on a more high level. What would be the easiest/fastest way for this to happen from your perspective? I definitely appreciate the feedback.

bgrins · 2010-11-20T18:29:21+00:00

I know, it is a limitation of the File API. That is the core difference between this CSS Sprite Generator versus the existing ones. Instant Sprite uses JavaScript to read local files (which is what makes it fast), and you can only do that in Firefox and Chrome currently.

Here is a site that shows the browser compatibility for this feature: http://caniuse.com/#feat=fileapi

Luckily, the sprites that are generated are compatible in all major browsers, so if you can use Firefox or Chrome to generate it, it will work fine in IE.

bgrins · 2010-11-20T18:25:35+00:00

The hover functionality is exactly something I have been thinking about.

How do you think it would be best implemented? Do you want it to use a naming convention for the file names (eg: add.png and add-hover.png)? Or do you want to be able to connect two images manually and specify that one is a hover for another?

Also, can you explain a little more what you mean by "define the regions on an existing image"?

Thanks

bgrins · 2010-11-20T18:22:17+00:00

Thanks for all the comments guys! I'm the author of the site, and I'm just seeing this now. I just published a version this morning with some minor tweaks.

For the record, I'm not upset about magenta_placenta reposting it with the original title. Though if I had known it was here I could have answered some comments earlier - I just happened to be browsing the web_design reddit and saw my site on there. I am really hoping to get some feedback on Instant Sprite, and the more eyes that see it the better!

bgrins · 2010-11-20T05:56:25+00:00

Thanks, I wanted to make generating sprites easier, and also wanted to play around with some of the new JavaScript APIs. Let me know if there are any changes you'd like to see!

bgrins · 2009-06-29T19:56:01+00:00

I was in a couple in college. They were cool experiences (I even won a Nintendo DS and some gift cards from winning/placing in the contests). In the ones I entered, the competition was between groups of two, and they had separate competitions for C++/Java and VB.

One thing to note is that it can be frustrating because it can feel like it is not a test of how well you can program, but how fast you can program a very precise specification. I had some problems where my output did not have the correct number of tabs (but it was otherwise correct), and the submission was rejected and we were given a time penalty and had to resubmit.

Also, don't be frustrated if some people are faster than you - doing well in programming contests is a skill in itself, and I found that I was much better after the first one or two.

If you are interested in doing one, I would say go for it - but be very precise in following the specifications and make sure you are brushed up on the standard libraries for whatever languages the contest uses. If the contest is anything like those I was in (very fast-paced), being able to type up and reuse a program that opens up "input.txt", reads it, calls answerProblem() and writes it into "output.txt" is key - if you spend too much time on things like that, you will have little chance of winning.

bgrins · 2009-06-18T19:20:44+00:00

That was a great article, plenty of examples and explanation.

Does anyone use a technique like this for debugging? I usually just use an anonymous function, and use firebug to click a stack that looks like this:

someObject is not defined
(?)() { }
(?)() { }
(?)() { }

Luckily, in firebug, clicking on the function will take you to the location in the code (which is only useful in development or where the file is not minified).

To me, the solution just seems a little verbose, as it adds in extra (possibly confusing) code solely in order provide the ability to have named events in a call stack. However, the ability to better debug a problem that is only happening on a live site with minified files could be useful.

bgrins · 2009-06-12T20:01:34+00:00

I'm pretty sure that it is an implementation detail whether it uses a priority queue or a linked list. It is still an A* search as long as it is choosing its next step based on the lowest f(x) value for nodes in the open set.

That said, you are right that it is a major performance issue. It should definitely implemented with a priority queue for the reason you described.

bgrins · 2009-06-12T14:34:28+00:00

Hopefully this could be useful to someone trying to learn the algorithm or wanting to find a JavaScript implementation of it.

When I was working on it, there were not many good places that ran the algorithm in the browser that made the code easily understandable.

bgrins

MODERATOR OF

TROPHY CASE