Dmitry Pashkevich

+1 for the use of prompt

You should add the blur filter to the demo :)

@jsfeutx Thanks for the heads up!

I never needed to set up NFS so far, but I thought it's more complex than that! Thanks for sharing :)

Nice breakdown, thanks for sharing!

Nice writeup!

Why not use rsync?

rsync -az --progress /local/dir user@host:/target/path

So will that override the default collations on individual columns?

I just memorise that they're in clockwise order, starting from top (12:00 on a clock)

Neat! Thanks for sharing!
I haven't thought of using JavaScript in this context

You can create a small install script for your dotfiles that will create symlinks and possibly do other stuff. Here's mine:

https://github.com/dpashkevich/dotfiles/blob/master/cli/install.sh

I loved the idea of a passwordless sudo in the beginning but it's generally advised against, see this thread:
http://serverfault.com/questions/580881/is-it-ok-to-set-up-passwordless-sudo-on-a-cloud-server

@guya it's amazing how this topic is still alive! Interesting approach :) My results are unstable though - the text keeps changing between 'Opened' and 'Closed', all I do is move the mouse around.

I've been using Ubuntu for web development for over 4 years and don't feel like switching for anything else.

The absense of a native version of Photoshop for Linux has been the biggest missing part, but I managed to run a portable version through Wine, it worked pretty well. Anyway, I'm glad when I don't need to use Photoshop for the job at all (yes, sometimes this is the case!).

As for IE and Safari, a virtual machine is one solution. Another is to use a service like Browserstack

Great time saver, I've used it for a while!

Thanks for sharing your experience! I also try to do time tracking (I use Toggl), which is also a form a of logging, only you also capture the time it takes you to complete tasks.

Hm the jsFiddle doesn't work, it only has HTML and no CSS/JS

@astropanic I know, but I think something like v def conf is way too cryptic

@astropanic fasd looks too hardcore to me :)

I rolled a simpler, more specific solution that I still use:

# quickly jump to a project
prj() { cd "$HOME/projects/${*}"; }

Thanks for sharing! Are there any caveats with this approach compared to the interactive rebase?

Keep in mind that it runs slowly and hogs CPU if GPU acceleration is unavailable in the browser.

There's a neat SublimeText plugin for that: https://github.com/jonathandelgado/SublimeTodoReview

Cool! So how does that work? What does Shift+z+z actually do in Vim?

@datishans I see your point here, one should definitely strive to write code that's idiomatic and self-explanatory and avoid adding obvious comments. It is useful, however, to always put comment blocks before class definitions and methods for the purposes of generating documentation.

@esolitos, I haven't had enough time yet to play through the game, but I'll follow up when I reach level 13

Nice brief introduction, thanks!

You should also check out http://bonsaiden.github.io/JavaScript-Garden/ , it's another collection of JavaScript's "confusing" parts.

@seuros me too! Do you know any other games like that?

@mattstyles true, it's very easy to unintentionally break native browser/OS functionality. By the way, Cmd+click on Mac does the same action as middle click, and event handlers that hijack clicks would hijack Cmd+clicks as well unless the corresponding check are in place. I updated the article and the code example slightly.

@jyanes83 There's a simple answer here: the security of your application should not rely on the secrecy of its algorithms (including API endpoints). See http://en.wikipedia.org/wiki/Kerckhoffs's_principle

I suggest posting a slightly longer example to make the point, like this one:

$('<li>', {
     html: $('<a>', {
          href: item.href,
          text: item.title
     })
 });

I agree that you shouldn't mix html and js though, but it may not be worth it to include a template engine into your project if you're adding a small and simple feature to a website.

Neat! I use custom search engines but didn't know one can add them easily by just right-clicking the search field on a website. Thanks for sharing.

So I guess this is more relevant to distributed teams, not the ones that work in the same office?

Really neat :)

Or, the ES5 way :)

userList.forEach(function(user) {
    console.log(user.name);
});

Hey could you explain why chat rooms and bots are so popular and why should a team use them?

Neat! Thanks for sharing

In JavaScript, you can just do new Date() / 1000, no need to call getTime() as Date.prototype.valueOf (which gets called when you try to perform an arithmetic operation on a date object) returns a timestamp.

You've correctly described how inheritance in JS works but the reason people call things "classes" is that they are applying the OOP paradigm to JavaScript, which is a perfectly OK way to use the language if you like, I wouldn't rant about it :)

The order of object keys is not guaranteed and you shouldn't rely on it. See
http://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order

Cool, there's a flag now!

I think we just need a button to flag posts, like on StackOverflow and many other systems.
But whatever solutions the maintainers come up with, I'd be happy to help :)

Effective! But I'm massively against this, would love to see the opposite of this, i.e. 'give user default access'.

Plain HTML is always accessible, searchable, responsive, etc. :) Well, unless you really screw it up

Does blacking out the entire screen count? :)

I hope you don't use it in real life :)

Some more guidance on how to upgrade one's existing code and practices to the ones you listed would be super helpful :)

Wow, I never knew that exists! Thanks a ton!

I guess I meant somehow restricting/changing the API you're exploiting, not shutting down the service

Just make sure you have a backup plan in case G+ cuts you off :)

So how is the performance compared to ST2/ST3?

Brilliant, thanks!

Aliased, thanks! :)

alias myip='dig +short myip.opendns.com @resolver1.opendns.com'

For the front-end, there's a little library called PJAX that does exactly what you're describing:
http://pjax.heroku.com/

@jimmykane thanks!

Is there a similar solution for when we have no write permissions to a catalog and have to restart vim with sudo?

@james-duncan you can explicitly specify a version as long as it is in semver format (which is encouraged to use for NPM packages).

npm version 0.1.5 -m "Fixed a bug in X"

Doc: npm-version

Wait isn't this what npm version does?
E.g.

npm version patch -m "Fixed a bug in X"

• Bumps the version in package.json (the patch part)
• Creates a commit with specified message
• Tags that commit with the new version

@steve-jansen I think @koen meant that if you open locally an html file that has e.g.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Then the browser will try to fetch file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js instead of http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js Which causes a problem unless you use a smarter script loader with local file fallback.

So do you put rejected tasks in a separate list in practice or just hide them from the dashboard?

On a PC, we use Ctrl+Backpace:)

You may want to format the command lines in your post for better readability (indent them with four spaces)

@oparty you can't alias sudo !!, as !! is expanded by bash when you type it. This worked for me instead:

alias please='sudo $(history -p !!)'

Source: How can I alias sudo !!? | Unix & Linux Stack Exchange

@jan0sch oh, ok, got you

@jan0sch but Chrome does have private windows (called incognito mode). I think it's better to run a private session in a separate window so it's better isolated from your main session UI-wise. Plus, incognito window also disables all the plugins.

I organized the best practices for page load performance into a mindmap, see my tip:
https://coderwall.com/p/jhnuza

I organized the popular webpage load performance best practices in an easy to read mindmap, check out my tip: https://coderwall.com/p/jhnuza

@jan0sch, I find javascript debugging quite decent in Chrome and it keeps blowing my mind with every update :) In fact, powerful javascript debugging was one of the reasons I switched away from Opera and Firefox (I used both for a while).

Also, apparently Chrome's DevTools now let you search elements by XPath selectors:
https://plus.google.com/+UmarHansa/posts/T4Hd9nwQemA

Thanks for sharing, I like your organization!

Didn't quite get the idea of bashmarks, what to you have in your ~/.bash/bookmarks?

Stop drinking coffee and buy SSDs instead.
Love that! :)

I switched from Opera to Chrome a couple of years ago, too. Still wish they get a bigger browser share though...

I'm curious, what features in Dragonfly make it better than Chrome's Devtools? I tried Dragonfly a while ago and didn't like the experience.

Wow that's fun, thanks for sharing! :)

@sindresorhus Hehe, back to the window height method :) Thanks for sharing!

Sounds like you want to capture window resize events. Typicall you put all your components inside Ext.container.Viewport and use Ext's layout mechanism that automatically tracks window resizing. You can override it if you want to. Check out these two methods:

• Ext.AbstractComponent.afterComponentLayout()
• Ext.container.AbstractContainer.doLayout()

If you provide more details on what you're trying to do I'll try to help (here or on StackOverflow)

console.error() and console.debug() also output stack trace (at least in Chrome) which is pretty handy!

Yup, it no longer works as console.profiles was removed. See https://codereview.chromium.org/15816002

When you already know CSS :)

Thanks for sharing your experience! I have some questions...

1) Web engineering relies very little on CS academics, algorithms, big O etc

I studied CS and I think it's very helpful, aquiring a solid knowledge base delivered to you in a systematic way is not only more efficient way of learning than reading books and writing amateurish code but also enables you to further learn myriads of new things when you're on your own, systemize things in your head, have a holistic approach to problem solving. I agree that to become good Web Engineer and solve real world problems just having a university degree is not enough, it takes time to learn to actually apply your knowledge in an efficient way (along with developing quality standards, aquiring methodologies, etc.). But you've gotta have that base knowledge first just so you don't get buried in the avalanche of information flowing at you at high speed.

I'll be looking for a new job soon and I'm planning on refreshing and/or filling that gaps in my "CS academics, algorithms, big O" skills (besides updating my portfolio, of course). I'm curious to know, which IT field do you think actually requires CS skills if not Web Engineering, as you suggest?

4) Avoid SQL joins in your website code

That's an interesting statement! In my mind, even a small website would have multiple tables with references between them, thus the need to use JOINs at least somewhere. Do you, perhaps, mean that one should avoid doing so in runtime by employing a caching mechanism? Can you elaborate on that point?

Otherwise, thanks again for some advice!

Thanks for sharing! Often it's also handy to check if any external resources failed to load:

casper.on('resource.received', function(resource) {
    var status = resource.status;
    if(status >= 400) {
        casper.log('Resource ' + resource.url + ' failed to load (' + status + ')', 'error');

        resourceErrors.push({
            url: resource.url,
            status: resource.status
        });
    }
});

Sadly, it's not a real REPL (see here), but that's the best we have at the moment.

The one-liner example you provided is too cryptic and unreliable, I would prefer the first code block in this case. I like using logical operands for quick short conditionals but I rarely go beyond something like

someCondition && doActionIfTrue();
anotherCondition || doActionIfFalse();

I came up with the following rules of thumb in that area:

• Never use assignments in conditionals (even in a regular if-block). They are easy to overlook, besides you have to enclose them in extra parentheses if you want to use them in a one-liner (looks a bit messy)
• Don't use more than 1-2 actions in a logical one-liner (someCondition && doActionIfTrue();)
• If you want an if-else one-liner substitute, it's better to use the ternary operator instead if && and ||, especially if you want to assign assign the result of the expression to a variable. E.g. x = condition ? method1() : method2() is shorter and also more robust than x = condition && method1() || method2(), because in the second case you won't get the intended result if condition is true and method1 returns false
• Sometimes it's OK to nest ternary operators but not deeper than 2 levels (and definitely break it into several lines with nice formatting)
• Finally, clarity is more important than brevity. Please don't write one-liners like in the original example.

At the moment I use lucidchart.com for diagramming, including UML. The pro version is paid, but not too expensive. Definitely worth checking out if you need collaboration.

Thanks for the tip! Do you know a standalone solution that's not tied to xcode? I'm also searching for an easy linux solution.

These are two different things: function declarations and function expressions.
See, for example, http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

Awesome tip, thanks a lot for sharing!

Great writing, thanks for sharing!

I'd also notice, though, that your commit messages shouldn't turn into project documentation: while you should put a summary and a short list of things you changed in a commit, long explantions of algorithms, data structure and overall project architecture should remain and be maintained in project wiki (or whatever tool you use for internal documentation).

Thanks for discovering 3v4l.org, didn't know that exists for PHP :)

I don't see a problem with .news h4 but if you have several modules with a similar look, why not use "OOP inheritance" principle in CSS to let them share some common styles?

For example your HTML might look like

<section class="widget news">...</section>
...
<section  class="widget featured">...</section>

So now the news and the featured elements would be subclasses of the widget element.
And if you want both elements to share a header style, your CSS would start like this:

.widget h4 {
    /* styles for h4 within any module that is a widget */
}

This way you don't have to modify CSS as you add new modules on the page that share the same style.

Alternatively, instead of having a confusing [and non-semantical] <h4 class="h2"> (if you count classes as part of semantics which I believe you should) you can have <h4 class="widget-header"> as suggested by @ultimatedelman. This way you "mix in" the styles inside .widget-header into your h4 styles.

Haha, very radical and very meta! :)

I don't see anything wrong with +'01010101' or '01010101' | 0

@slimmen Firefox too: http://caniuse.com/#feat=download

It's better to juse install the Tag package and have your html/xml tags close automatically when you start to type </. The package also provides some other features

Works in Android too, at least on 4.1 running Chrome

Also, please try to avoid disk I/O on a UI thread as well :)

This applies to any shell, not necessarily zsh. It's just a git configuration

You forgot webplatform.org

Funny, just like good ol' IE did this)

What made you not go with reveal.js?

Great find, thanks a lot!

Thanks for sharing! I also find html5boilerplate's .htaccess file pretty insightful.

Also, console.info, console.warn, console.error, console.assert, console.trace are very useful.

Hidden gem: console.error actually combines the functionality of log and trace so it's preferrable in many cases.

@shell Great find, thanks! Looks like at the moment it's identical to log but has more letters :)

@michd Yeah I learned about that recently. Feels very counter-intuitive (what? leave a tag unclosed?!) but makes sense.

@thasmo, @diogoandre thanks! That's a kind of explanation I've been looking for. I'm not trying to argue against the practice, I was just curious of it's origin and practical implications.

Also, worth noting that it's discouraged to put a new line at the end of PHP files since it may end up being in the response if you have a closing ?> tag in the end.

I've seen this requirement a lot in different code standards. Threads on SO suggest that it originated from C and the only reasonable argument that I've found is that it makes sure my shell prompts starts from new line after outputting file contents to the terminal with cat or something similar. I wonder if there are any other reasons.

Can you elaborate a little bit on the advantages and/or actual need for that newline? Is this practice still relevant and applicable everywhere?

Yes but when in real world would you pass a string as "this" reference to a function?

But what is the actual problem that you face as a result of "auto boxing" in this case?

You should also take into account styles like line-height, text-transform, letter-spacing

So basically it's almost the same as using a regular column with a custom renderer function specified?

Hah, someone brought it even this far! :) Thanks)

@vimishor oh, sorry then, I thought you're affiliated.

@vimishor I've already been there and there's no answer to my question :)

Also, will you consider selling an offline version without any limitations? The product looks like a good rival to Photoshop but I'm sure a lot of people will want it as an app, not a service.

Looks promising! When's the release? :)

Thanks for the \cmd tip!

why not just sudo apt-get install vim?

This is AMAZING!!!

Cool, thanks!
Only for me it's console.assert(), not assertion. Using Chrome Version 25.0.1364.172

You can do it solely with chown thanks to -R (recursive) and --from options:

chown -R --from current_owner newuser:newgroup /dir-name

And I believe you don't need to fetch uid of current user, simply pass his name in --from option

Also be sure to checkout commandlinefu

Isn't there a built-in analog of DOS-like tree? I always thought that's weird, sounds like a common task...

Good points!

P.S. I think you meant odt format, not otf

Ubuntu Mono

Worth mentioning that if you use Inconsolata, you want the version with straight quotes.

Funnily, the outline for pro tips here on coderwall is little weird :)
Hopefully, your tip will get many votes and deserve the devs' attention :)

You can even omit the > 0 part - it's enough to check that the value is non-zero.

Even better, add mdn to your browser's search engines and assign a keyword (e.g. mdn). That way you would Werner searches like mdn addEventListener and be sure that the search will be performed inside MDN. Also, this way may be faster since you skip Google's search result page.

Even better, you can save this as a Snippet in Chrome Developer Tools (be sure to enable the Snippets experiment in CDT settings)

I find doing console.error('X called', arguments) more useful than console.log(X.caller); in the case from your first example, because you often want to inspect the whole stack trace, not the immediate caller of the function in question (especially if you use libraries).

One of the most useful flags I enabled.

The fastest query is no query at all :)
Make as many things static as you can + care about proper caching (again, this is both on client and server side).

I think you should use strict comparison here

if(r[x]===this[i])

I knew there must be such method but never wondered, thanks! :)

Of course it's always best to just lock your computer when going AFK if you're concerned about your co-workers ;)

I spend some time in the shell but probably not as much as you do :) And I don't use vim or emacs.

So does this reduce finger strain or you do the remapping because you want to use ctrl for something else?

Why would that be useful?

Well, the actual "payload" of vertically aligning css code is only under 10 lines :)

@joakwest Don't get me wrong, I'm not calling you out :) This is the method that I use too and it probably is the best know way so far (except for Browserscope which is a service). My rant is at Microsoft and the methods they use. While it was very "generous" of them to provide those VM images for free, such approach is very far from being satisfactory (the images weigh around 20Gb each!!!! A little too much to just launch a browser, right?). They never seem to truly care about the experience of their users (including developers), that's something they keep getting wrong over and over again. Other commenters got my point here :)

I wouldn't call having to run 5 virtual machines on your computer "an easy way". Running multiple versions of IE on a single machine is much harder than running multiple versions of any other browser. Thanks, Microsoft.

How does gpl apply to icon font? Would I have to release the source code of my application if it uses these icons? Doesn't sound intuitive...

Continuous scrolling also kind of breaks the standard search in page functionality, since the results depends on the amount of content loaded. Unloading content that is not visible only makes it worse. The webpage must provide its own search mechanism in this case (perhaps even overriding the default ctrl+f hotkey since the default behavior doesn't make much sense anymore)

@moox but that would search among only my repos. What I'm saying is that I wish there was some kind of "I'm feeling lucky" search functionality on github that would automatically take you to the most relevant result instead of showing the result page. E.g. when I type grunt, it's VERY likely that I want to navigate to https://github.com/gruntjs/grunt although many other users have a repo with the same name. I don't want to type the "username" part, I don't remember it anyway most of the time, I just remember the name of the project.

Ok, thanks for sharing your experience anyway! I'm just curious how other people do it.

Behave.js looks awesome :) But why not use something like CodeMirror?

Yeah, classic layout is crucial to people who write code.

Doesn't the "wrong" home-end-ins-del-pgup-pgdown key cluster bother you on the Illuminated keyboard? I'm considering getting the wireless variant just because they "fixed" it on that model...

To me one of the advantages of using a graphical git tool is being able to click on any sommit in the log and quickly perform operations with it (diff or view or something else...). Of course you can copy-paste the short hash in console but it's still a bit longer and less natural. Do you have a preference here?

The problem is that sometimes jsfiddle's server is responding very slowly or not at all... Maybe they have no issues now but this happened in the past

@mikhailov hm, interesting, didn't know about that option!

--quick, -q

The docs say:

This option is useful for dumping large tables. It forces mysqldump to retrieve rows for a table from the server a row at a time rather than retrieving the entire row set and buffering it in memory before writing it out.

So for "small" databases (< available RAM I guess) it would be faster to go without that option, as all the rows would be read out at once?

Why not just install node from package?

If only I somehow didn't have to enter the "User" part...

Also, MSYS is somewhere in the middle. Not a real linux environment but more lightweight and better integrates with Windows.

I think your tip title is misleading. It suggests that you are against using the shorthand font syntax altogether (which is actually fine on first declaration), while it's actually telling people not to repeat the whole thing every time they want to override font size or font weight, etc.

Alternatively, it can make sense to init your repo one level above your web server root. Most hostings have the following subdirectories for each virtual host:

cgi-bin   # not accessible via http
tmp        # not accessible via http
www      # web root

Because you may have some scripts (e.g. cron jobs) running outside of www that are also part of the project.

@magnetikonline I read about that. There seems to be two major approaches:

1) make the repo non-bare with its working tree pointing to live website path (as suggested in the article you shared). Post-receive hook on the repo checks out the worktree.
2) actually init two repos on your development server: first one will be bare and used by developers for pushing/pulling and the second one would be a regular repo at live website path. Post-receive hook on the bare repo navigates to the live website repo and does a pull from the former.

The first approach looks like less steps to make (and no extra repo) but feels like some kind of hack. Also, it's less flexible than the second approach - it only works when the repo is on the same machine as the website and you are not allowed to edit the working directory. I was wondering if there are any other pitfalls besides mentioned with the two approaches and which one do people actually prefer.

What if I want to deploy the code on the same development server on each commit?
What's the best way to do this?

Google's V8 engine supports code hot swapping, hence you can modify your application live from Chrome Developer Tools!

See for example The Chrome Javascript editor can do hot swapping

I just had another thought - would it be problematic if you just changed display: inline to display: block; instead of the suggested way? Of course you'd need to check your margins to preserve the same visual line height.

@mattquirk \A is a linebreak character (hexadecimal code A, or 10 in decimal)

See my tip on how to easily start python's webserver from Nautilus: Simple HTTP server from Nautilus context menu

Great find, thanks!

@pe1999 I'm familiar with Compass, I was just making a point that mixins can be used for "mixing in" some common snippets like clearfix. Thanks for the reference to Susy though!

@rachelnabors that's interesting, thanks for sharing! So the only difference here is that if my .container already has the properties defined in clearfix, they won't appear twice?

I would also use a mixin for something like clearfix or other css hack.

Just remember to take care of the whitespace between blocks!

Where do you use this? Generated files?

Looks awesome, and it even has a configuration UI! Thanks for sharing!

@zachthezman Technitally, 50% is actually enough cause one there are two borders on one side of the element.

parseInt works correctly, please look at the docs.

String representations starting with "0" are considered octal numbers. So parseInt('09') starts parsing '09' as octal and stops when if encounters an invalid character ('9' in this case) so you get 0 as result.

Always use the second parameter (radix) with parseInt:

parseInt('09', 10); // returns 9

Browsers like Chrome seem to always assume 10 as default value of the second parameter but you must not rely on that.

Btw, another simple way of converting String to Number is the following:

'09'*1; // 9

It will even work with floats:

'3.14'*1; // 3.14

If you only want integer part, you can use a bitwise operator:

'3.14'|0;  // 3

No quirks that I know of...

I was always wondering why isn't it the default behavior in jQuery...

Thanks for the article and the links! Very insightful!

Oh, now I see :)
You can use backticks (`) for inline code

Interesting tip on the same topic: Preventing accidental system halts and reboots

Thanks, very helpful! And the second part gives a very good, very illustrative explanation of merge vs rebase.

Bare links without any comments are also annoying...

You mean, you accidentally invoke those commands when you Ctrl+R or something?
Or all team members surrender their bash history files when a production server goes down? :)

Now I know this trick is really cool and I'm excited about it as everybody else but... how is it better than just opening a new tab/window/pane in SublimeText2 or other editor of choice?

Obvious but I loved the metaphor with classroom! :)

Why not just * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } ?

O puedes usar Meld que es gratis y con código abierto (existe paquete para Mac también). La única función que falta es la comparación de los imágenes pero no es tan necesario para programación web :)

So where does browser cache fall short?

How about git archive? :)

Awesome, thanks! I never knew there's even a built-in utility on Windows!

Interesting! I wonder what makes it behave like that.

UPD. Found the answer! See The magic of “overflow: hidden”

@dperrymorrow oh ok, now I see!

Um, doesn't this simply work? Why create a jquery object?

$('body').html('<div class="spinner"></div>')

It's still pretty confusing to me - so how do you write a big application without using inheritance (which is difficult/impossible to achieve with modules)?

@khasinski I would say JavaScript is a paradigm-agnostic language. It's all up to you how to use it.

Here's a tribute to your tip :)
Simple HTTP server from Nautilus context menu

Is there a way I can make the python module find an available port to serve so I can start multiple servers by running the same command in different directories?

Interesting find! Is there a spec for the function somewhere? I wonder what's the browser support...

Yep, works under Linux as well.

Isn't the option name highlight_modified_tabs (with underscores?)

Why would you make a distinction between "Web App" and "Hybrid App" if they're technically the same? I don't see a clear line between them, the "look and feel" is a subjective matter. What would you call Gmail web interface? A Web App or a Hybrid App? What apps would you call Web Apps but not Hybrid Apps?

I would call a "Hybrid App" what you call a "Compiled App" and eliminate the latter. IMHO it makes more sense cause then it justifies the word "hybrid" - those apps are hybrid because they're put into a native wrapper for specific platform(s) that can also provide extended access to OS functionality but the app itself (i.e. not the wrapper) is still written using open web technologies - HTML/CSS/JS.

@musyo people just call it crop :)

agreed, that's not resizing

Even better, you can do border-radius: 50%; so you don't have to change it together with the size.
Worth noting that you have to make sure that the element has the same border and padding on all sides...

Yeah that's one great hidden gem!
You may want to add -o-text-overflow: ellipsis; for older versions of Opera. Browser support here

I smiled at the last paragraph :)

Actually it appears that in JavaScript, in 99% of cases you don't need to use constructors for any built-in type (e.g. Array, Number, Boolean, Object), except for maybe Error:

throw new Error('whoops!')

It's funny how the constructors are there but you don't need to use them directly.

ExtJS is good for certain kinds of large javascript applications. The framework gives you a solid OOP & MVC foundation, widgets, docs & doc tool, dependency management (a-la requirejs), data layer, relatively convenient debugging (compensates framework's complexiness) and its own build tool (but you can use your own grunt-based setup).

The framework is pretty big and powerful which means you have a robust foundation to rapidly develop big multi-panel, data-intensive rich webapp but it has a steep learning curve, a bit slow to adopt new standards (and IE6 support is definitely complicating things), difficult to customize in a significant way and you are likely to face performance problems.

Phew, my 5 cents :)

Very good gotchas, old but still relevant!

Awesome, thanks for the effort!
maybe you want to add these to your tip?

How do you do inheritance?
Also, do you use doc comments?

Introductory article? Links? Book recommendations?

Yeah, they've made a brilliant interactive ui! Worth paying with even if you've done your first steps!

I have seen Clouds and tried to use it and I especially like the way it highlights CSS but the light gray comments are practically undreadable, especially on a mediocre monitor. Coda still wins in contrast but perhaps has colors (sometimes I feel like there needs to be more, like in CSS syntax).
Thanks for getting back anyway!

You insipred me to attempt to repeat this in NodeJS without 3rd party modules. Turned out it's shorter in Python due to json.tool moduel existence :)

Pretty print JSON from command line with NodeJS

Here's a NodeJS version:

echo '{"foo":"bar"}' | json

You need to install the jsontool module (npm install -g jsontool)

Wow, cool! Didn't know ST2 plugins can do that. Can I manually invoke the diff view?

I never understood why isn't it the default behavior in jQuery! So frustrating!

Nice job!

Btw, the extend functionality for LESS is in the works... Just a side note. Add Sass like extend

@bobwilliams thanks for the links!

I'll try Fluidvision, altough it doesn't look very good with JavaScript code... Birds of Paradise is a dark theme, did you link it by mistake?

So far I'm using the coda theme.

This is awesome! Thanks for sharing!

I havent played with Stylus... Any personal thoughts to add to your post?

Solarized light looks too pale to me, I feel that I need more contrast. Seen any other good light themes?

Omg can't stop clicking through pages)))

Good tip.
Some time ago I kept thinking if I should become a "Full Stack" (backend+frontend) Web developer or just focus on front end. With technologies like NodeJS that's not a question anymore :)
EcmaScript everywhere! %)

Worth adding that Chrome and (supposedly Firefox 15+ and IE 10+) also support Hight Resolution Timer via performance.now() (or performance.webkitNow() in older versions). You should use it whenever possible.

More info on webplatform.org

I discovered that recently too, pretty neat!
What I think would be cool is another parameter that specifies the initial indent of pretty-printed json block. Would be useful if I want to output the result of JSON.stringify inside an already existing piece of code... Anybody knows of an easy way to do this?

Would be cool if you also gave some guidelines on choosing an alternative shell. Many people advocate for zsh but I just never thought about why would I want to change my default shell...

Ok after re-reading the title of your post for the n-th time, I figured what's your main point of frustration is.

Yes, that doesn't happen in JavaScript. You can create local variables via a closure but then you'd have problems with inheritance.

The bottom line is that you shouldn't enforce private variables like that in JavaScript, just make everything a property of your object and enjoy the benefits of inspecting/debugging the objects. This may be a concern in environments like NodeJS but I don't see how it can be critical in a browser webapp.

Here's a modified version that hides the cache variable inside a closure:

var $$ = (function() {
    var cache = {};
    return (function (selector) {
        return cache[selector] || ( cache[selector] = jQuery (selector) );
    });
})();

Worth adding "the working version" of your javascript example:

var counter = function () {
  this.count = 0;
  this.increment = function () { count++; }
  this.get = function() { return count; }
}
//now 
counter.prototype.decrement = function () {
   this.count--; // yes, you have to use `this` in javascript a lot!
}

// using the "class"
c = new counter();
c.decrement();
console.log(c.count);    // -1

Your examples are not equivalent.

In the JavaScript code sample you define a local variable inside the constructor function. Although you omitted the constructor definition in your C++/Java example, it's still there implicitly and if you did define it and had some local variables inside, their scope would be limited to the constructor.

Instead you define a member variable for the class in your second example. Now to start with, there is no such thing as class in JavaScript and hence no such thing as class methods and class properties. However the prototype system (which, I stress again, is not the same as class system in OOP languages) and the ability to dynamically alter function execution context in JavaScript provide you with a powerful mechanism to write your program, you should just turn your way of thinking a little bit and perhaps learn more about how functions and prototypes work in js.

Note that the above said doesn't mean that you can't use the principles of OOP with JavaScript. It is possible, just keep in mind that certain aspects won't be enforced by the language itself and instead provided as a syntactic sugar. The ExtJS framework has a pretty decent class system, just take a look at this source code example:
http://docs.sencha.com/ext-js/4-0/source/Basic.html#Ext-form-Basic

That's interesting, thanks for sharing!

Also worth mentioning linda.com
Their website doesn't look 'hip' but they have a pretty rich background....

Another great point for SASS: named arguments for functions/mixins

Nice roundup of approaches, thanks for sharing!

I totally agree about the model for commit messages (e.g. first line with brief summary , language style, bullet lists, etc.) but it feels completely wrong to me to manually wrap text. It should be wrapped when displaying the message depending on viewing environment and viewer's preferences. You don't manually wrap lines when you write a Word document or HTML or posts right here.

Even if I'm using CLI, I may want to stretch the terminal window beyond 80 characters wide and I naturally expect the text to fit the window, not stay at 72 chars! Come on, we're not in the 90s. Although we still use command line we now have smarter devices, and I believe that adaptive/responsive design principles can be applied to CLI as well.

Sorry if my first comment sounded like trolling, I should've been more specific, I was only talking about enforcing line length. Commit messages aren't code, they're human-readable text. And text can always be wrapped automatically or even rendered to a slightly nicer presentation (e.g. markdown). Btw, I love using markdown/textile in commit messages and see them displayed nicely in team collaboration tools.

I guess no, unless you're re-distributing it.
You may want to check this thread http://stackoverflow.com/questions/94346/can-i-legally-incorporate-gpl-lgpl-open-sourced-software-in-a-proprietary-cl

This problem does not exist in GUI tools.

Awesome, thanks!

I'd also add this material:
JavaScript for cats (rationale)

Free resources on patterns:
Essential JavaScript And jQuery Design Patterns
JavaScript patterns collection

Much better, thanks :)
Would be nice to have a brief introduction on what it is and why people should use it :)

result example? browser support? side effects?

Nice list.
Did you mean Codecademy?

@alexanderbrevig you also tagged your tip with javascript tag...

Overall I agree, only I should probably clarify that when I speak about documentation I mean documentation embedded in the source code, not as a separate thing you need to maintain (besides guides/howtos maybe).

@alexanderbrevig yeah I get what you're saying. And thanks for following up, too!

First off, I code in JavaScript so the distinction between public/private/protected members is only done through doc comments (I use jsduck). But I guess that's not too important although it infers some more freedom/flexibility than in C#/Java where member visibility is enforced by the language and you have to be more strict about it.

Some time ago I tried to enforce PUBLIC/PROTECTED/PRIVATE sections in my source files and place members inside them accordingly but soon I figured it's too cumbersome and found myself not following this discipline. It takes time to scroll between different parts of the file and you might lose your thought while performing such jumps. Not to mention the extra burden if you decide to change member visibility.

Instead I learned how important documenting your code is and eventually found a good documentation generator that puts different types of class members into different sections (config parameters / runtime properties / methods / events... btw what is your approach to defining & documenting events?) and allows the reader to easily filter out private or inherited members if he wants to.

The only convention I follow is putting config variables/properties first in class definition, then the constructor, then all other methods, like they do in ExtJS. I find it more comfortable to logically group methods (this is context-aware), not by visibility. That way it's easier to follow the chain when learning how things work.

As I pointed out above, and I'll make it clearer, I don't feel there need to be different "levels of verbosity" inside the source code, the source code is already the maximum level of detail once you get there (if source code is available at all), it's all in front of you. All the "reasons" for visiting the code you listed in your original post actually look like perfect cases for visiting documentation instead. Again, if documentation doesn't give that to you (public api? preconditions? default values & constants? cmon, that all must be in the docs!), then you should really just improve the documentation, not shuffle stuff inside your source files.

Great webapp if you forgot to add license to an existing repo :)

As a side note, grunt's init tasks or yeoman's generators are great time-savers and they generate lots of things beyond the license file.

The idea with this is to NOT force me having to looking at the code 'in all its entirety'.

That's the most confusing part to me. Why do you look at the code if you don't want to look at the code? To me, you either look at the code or look at something else...

Also, do you include protected members into your statement about privates? On one hand, they're private to the outside world, on the other hand, they are used in subclasses.

Don't force developers to manually reorder their methods/properties, it's a stupid work nobody likes to do! Besides, there will also be arguments about logical grouping of certain items. E.g. it often makes sense to place private helper methods right before public methods that use them.

//This also reminds me of enforcing CSS property order...

Just use preprocessors and documentation generators and everyone will be happy.

Bottom line: for a not-too-detailed view of your codebase there is documentation (that, btw, should be generated from code), but if you end up looking at the code, well, you're looking at the code in all its entirety. I think it's unreasonable to make assumptions about what people may or may not want to see in code.

If you feel that documentation doesn't tell you enough, improve it, make it more verbose. Or get a better doc generator tool.

P.S. Also, let's not forget that most editors/IDEs provide nice outline views & goto-anything functionality which is also helpful if you know what you want to look at.

@wyuenho, in case you're interested, I created a grunt task that runs jsduck, for convenience.
https://github.com/dpashkevich/grunt-jsduck

Nice progressive example series!

@kevincennis yeah that's how jQuery does it!

@peterssonjesper, yes, I know that for...in loop can iterate over any kind of enumerable object but there are several reasons why it's discouraged to use it for an array.

Array.map() isn't supported by IE8 either so it's no better than Array.forEach for simple iteration.

1. You shouldn't be using the for...in loop to iterate over arrays, it's made for iterating objects.
2. ES5 defines Array.forEach() function specifically to iterate over an array if you don't want to use the regular for loop.

Not sure about your last point but have you tried jsduck?

It's a pretty good tool and has an awesome webapp for viewing the docs (imho the golden standard for all docs). Just take a look and get an idea of what things it supports.

Descriptions are written in Markdown (and there is even a special syntax for embedding images and videos), to embed code example just indent it with whitespace (syntax will be highlighted). There are tons of different tags including tags to describe events. You can add your own custom tags.

It's optimized for ExtJS/SenchaTouch but can be used as a standalone tool, you'll just need to put some more @tags in your doc comments. However the tool tries to infer as many information from the code as possible (it uses esprima parser under the hood). For example, it would mark your methods as "chainable" if they return this.

I haven't tried to use it outside of ExtJS but I like the conventions that jsduck sets, perhaps it will gain wider adoption in the future. Good luck!

Sounds dangerous...

Neat!

Awesome indeed!

• To avoid leaky closures
• In some cases this also helps you re-use an existing handler function instead of creating a new anonymous function every time

You forgot these styles for .myElement:

position: relative;  /* to position pseudo relative to its parent */
overflow: hidden; /* prevent pseudo from sticking out*/

Also, I suggest changing 10px to something like 0.8em so it scales appropriately regardless of the actual font-size on element.
jsFiddle

Not all of them work in modern browsers... but thanks for the link!

Chrome, Safari and Opera don't require a prefix for box-sizing anymore...
http://caniuse.com/#search=box-siz