When designing desktop apps, websites, and mobile applications, more than once I have tried using an application like mockingbird or Pencil Project. On one hand, mockingbird, is a web application that can be accessed from any browser and allows you to design multiple pages with different elements. On the other hand, Pencil Project, initially born as a Firefox extension, now has a multiplatform desktop application that allows you to mockup easily.
The drawback I see on these two applications is that for some reason, I always end up making simple mockups with a simple pen and paper. This way I can organize my ideas faster than using these applications. I guess the main reason for this is that I’m not a designer, so to me it is the same doing a shitty design in paper, than a shitty design with an application. Moreover, usually using a computer app for this task I end up spending more time to do the same…
Anyway, the other day I discovered Wireframe.cc, and the truth is that I was quite impressed by the UI. It is super-easy and fast to use. You just drag the mouse while clicking and voila, you have an item of the size of your selection. You click on the type of item you want and you are done with the item. Even if you want to change attributes, you just have to double click on it, and select the attributes you want to change.
Actually, it is the first time I feel that I do not waste my time doing mockups with an application of this kind. From what I’ve seen, this application is starting, and it still lacks of some functionalities and needs some polishment, but I suppose that those will be added in the future. Even I think this lack of complexity and lack of tons of box types is what makes you go faster.
I think choosing the right tool for a job is a matter of personal preferences and personal needs, but I would recommend trying wireframe.cc and taking a look at the other apps I pointed out at the beginning of the post.
Feel free to share any other tool you find useful in the comments 😉
Español
21/09/2010 at 1:42 am Permalink
Thanks – if there isn’t a native way of doing this in JavaScript then this is the most elegant method I’ve seen so far.
22/09/2010 at 12:53 pm Permalink
Trust me, there is no native way
08/12/2010 at 11:33 am Permalink
This should be coded as a while loop. Make a function for it 🙂
02/01/2011 at 7:18 am Permalink
Reminds me of the early there’s-more-than-one-way-to-do-it Perl days. Will definitely break large teams’ and projects’ necks.
06/01/2011 at 3:16 pm Permalink
@Bjorne Bjorson I’m totally agree with you, doing that in the code is totally a mistake, but you can always comment the code…
This is a quick-and-dirty-way of padding zeroes.
PS: OK, commenting the code is probably not the best solution (nobody forces you to say what you do… and even if you do comment, it won’t make people understand what happens underneath – like in perl), the best solution would be to create a “padzeroes” function but for doing that, you will have to use a loop, so there are other solutions more simple to understand that using slice… so again, this is a quick and dirty way of padding zeroes, but is up to you and your wiseness to decide when to use this trick. I know not everybody is wise enough to know when to use tricks… even sometimes, I doubt I am wise enough to use them… but sometimes, sometimes, this tricks are useful and a great way of solving a common problem.
If everyone knew about this trick, it will be common sense to use this, so it won’t be hard to understand to anybody (maybe the first time)… it will be great to have a trim/strip and a pad function native in javascript… that would be the best, most simple and most elegant solution.
14/03/2011 at 6:29 am Permalink
I like it, Pau. Very short and sweet piece of code. I’m commenting my use of it just in case colleagues scratch their head if they need to modify my code in future. He-he!
06/04/2011 at 7:49 am Permalink
The best I ever seen; why don’t you post it on stackoverflow too, I’m sure they will appreciate 🙂
Gratias,
13/04/2011 at 11:40 am Permalink
I really liked the l33t code, but performance wise this is what it yields:
http://jsperf.com/zero-padding
09/05/2011 at 11:33 pm Permalink
i prefer this:
('000' + h.toString()).substr(h.toString().length);
example:
‘000’ + ‘3’ => ‘0003’ => start position from the length of ‘3’ => 1 and by leaving the length parameter for substr, everything til the end is retreived => ‘003’
15/05/2011 at 8:17 am Permalink
@ola I thing the code you put on the previous comment is a little larger to write, but more clear to understand for any programmer.
Thanks!
29/11/2011 at 9:34 pm Permalink
Or, recursively:
function pad(v,s,c) {v+=”;return(v.length<s)?(c||'0')+pad(v,s-1,c):v}
v = value to pad
s- size of resulating string
\c char to pad with (defaulst to '))')
Cheers
14/11/2012 at 6:25 am Permalink
([1e10] + this).slice(-size) is even more elegant (changing 10 as required, of course).
To explain if it isn’t obvious, 1e10 creates 10000000000, the array get converted into “10000000000” when a string is concatenated, the rest is the same.
08/05/2013 at 9:59 pm Permalink
This is gorgeous, awesome solution! 🙂
25/07/2015 at 4:54 am Permalink
Thank you. This code was very helpful in formatting the current time in 24 hour format:
var today = new Date();
var today_h = today.getHours();
var today_m = today.getMinutes();
alert((“0” + today_h).slice(-2) + ‘:’ + (“0” + today_m).slice(-2)); // 09:00
Keep up the good work 🙂