css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Make your own performance budget!


  1. something buggy when value change~

    and I re-write js part with prototype,

  2. Pretty neat!

    I'm looking to have the HTML in there for each "template" so that I could save a permanent HTML page of perf budgets to ref later, but when I edit the HTML directly (as opposed to the button) and copy the .b element I don't think the JS likes that. It's adding all of the inputs together instead of for each template. The actual and budget values of the different templates get messed up with each other. Will have to check out the JS to see what I can tweak to do that.

    UPDATE 1: Ah, I think I found that it only happens on load because of the budgetOverUnder($('.b')); call on load. That call isn't scoped on load any longer. Otherwise you have everything else nice and scoped!

    UPDATE 2: Yep, that was it! though more than just the budgetOverUnder. I noticed you had it for calculateActualSize and setCatWidths as well. Fixed


Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.