git, npm, bower and corporate proxies

Sometimes, when you work behind evil corporate proxy (that is, evil proxy, not evil corporation), you can run into some connection problems using git or npm or bower or similar open-source instruments. For example, Download of https://github.com/some/package/archive/v0.1.9.tar.gz failed with ECONNRESET, retrying in 1.2s, or fatal: unable to access 'https://github.com/mikeric/rivets.git/': Failed connect to github.com:443; No error. This is all caused by corporate proxies, especially with AD authentication ones.

You need up to 4 pieces of information to set up proxies in mentioned software:

• Proxy domain
• Proxy port
• If your proxy needs AD authentication, you need your domain login
• and domain password

In latter case you may need also AD domain name.

All following configs are storing your passwords in non-encrypted plain text files. So it'll be good idea (well, it always is) to use latest AV/firewall software and/or use some kind of disk encryption.

< and > are not the part of config, they're just markers.

.gitconfig

My .gitconfig looked like this:

[http]
 proxy = http://<AD>\\<AD username>:<AD password>@<proxy domain>:<proxy port>
[https]
 proxy = http://<AD>\\<AD username>:<AD password>@<proxy domain>:<proxy port>

Note \\ separating AD domain and AD username. This config allowed me to git clone over https protocol.

.npmrc

registry = http://registry.npmjs.org/
proxy = http://<AD>%5C<AD username>:<AD password>@<proxy domain>:<proxy port>

Note that \ is URL-encoded here and that you need to change default repository address to http version (instead of https).

.bowerrc

My .bowerrc was tricky:

{
 "proxy": "http://<AD>%5C<AD username>:<AD password>@<proxy domain>:<proxy port>/",
 "https-proxy": "http://<AD>%5C<AD username>:<AD password>@<proxy domain>:<proxy port>/",
 "registry": "http://bower.herokuapp.com",
 "strict-ssl": false
}

Note "strict-ssl": false option, http:// in https-proxy value, registry change to non-https (like in .npmrc) and trailing slash after proxy port number.

Easing in javascript animation

Although we now have great CSS animation API in modern browsers, we still should support older browser. This means we'll continue to implement animations in JS.
Great interactive tool for choosing easing function for your animation: www.gizma.com/easing/. Please note that c argument is not destination value, it's difference between starting value and end value. See this thorough explanation for more details and collection of links on easing.

FiddleSalad

fiddlesalad.com is another one fiddler with rather wide range of supported technologies: HTML, HAML, Zen Coding, Markdown, CoffeeCup, Jade, CSS, SCSS, SASS, LESS, Stylus, JavaScript, CoffeeScript, Python, Roy.

jsbin.com

JsFiddle seems a nice tool, but it always annoys me some way or another.
Anyway, I found another sandbox: jsbin.com. Has it's own pros and cons. For example, it have linter built-in. But you can't adjust it. Give it a try.

How to pass data from markup to JS

Imagine we have some component system, similar to Dojo. Kernel find nodes, detects which components (let's call them widgets) they going to be coming from className or anything else. After that kernel must instantiate widgets and pass respective nodes and parameters.

So, we became all declarative and such, and it's just reasonable to store parameters near our node.

In my practice I saw three ways of doing that.

Usage of expando attributes (like Dojo does) or data- attributes (Bootstrap components).

May stretch yor node to several LOC. You can make it shorter using JSON instead of several attributes, to make it faster and less verbose, but JSON requires keys in double quotes, and it conflicts with markup if you used to double quotes around attributes values

Putting data in input[type=hidden] that resides inside your widget.

Name attribute became key and value of input became, er, value. Seems reasonable and may be useful, if your server-side puts extra data for itself in hidden inputs when rendering forms. But you should specify names inside your widget's code. Performance also suffer due to numerous DOM queries.

Just write your params in like Javascript's hash, prepend it with return keyword, and put it into onclick attribute.

Not very semantic and all, but this way has several advantages, which I describe next.

Pros of putting params through onclick:

1. It's not JSON, so it wont conflict with markup.
2. You don't need neither JSON.parse nor eval (which is evil). You just call it as function — as easy as var params = node.onclick().
3. Some code editors can highlight JavaScript code inside onclick. So less typos, no missed parens and quotes, less bugs.
4. Though it is not semantic usage of attributes, it can't break anything. Validator wont complain either.

Cons:

1. Not semantic. Purists gonna pure.
2. It fires every time you click widget. Though it doesn't do much of job, performance can suffer slightly, I suppose. But you can use some other attribute — e.g. ondblclick. Double clicks rarely appears and rarely occurs in modern interfaces. Anyway, it's minor impact and minor flaw of method.
3. It can be hard to exlain this to people. Use this article as reference:)

Pros wins!

I'm not inventor of this method parameters passing. I first met this approach while working at Yandex. JS in most their services use it; developer and browsers both seems happy with it.

Coder 80 lvl

Some guys wrote achievements add-in for Visual Studio. Too pity I'm not using VS; hope it will be ported to IntelliJ WebStorm or Vim or whatever editor which is crossplatform. And other languages; currently it supports only C# seemingly.

JS and semicolons

Great article on automatic semicolon insertion. In short, author states that before arguing for mandatory using of semicolons, one must firstly learn what expressions in JS are.
Article confirmed my thoughts that writing:

return
    7

you should blame yourself, not AIS.

I personally go slight further: semicolons was design error in C back in 70th. There are no real need in writing several statements in one line, and never was. There are plenty of languages which never has semicolons as statement separators, and they prosper.

I definitely must translate that article to Russian.

staticloud.com

I used to use Dropbox for instant static hosting (experiments and such), but now they serve xhtml files only; any .html causes 404.
Today I found a staticloud.com, which provides static hosting at almost the same level of simplicity as DropBox. You just dragdrop your zipped files and choose subdomain, and after couple of seconds (watching upload bar) yoursite.staticloud.com is up and running. No ads and 1GB bandwidth per month should be enough for just about any static site.
They use Amazon's cloud. Great job!

P.S. There is similar tool: coralrift.com

GNU (and others) make in web-development

make can be very useful both in combining static files together and squeezing them. I've found detailed and complete manual on this: Website builds using Make. While Makefile syntax may seems confusing and arcane at first glance, basically it is just shell script with some addition to manage dependencies.

Since Makefile basically is shell script, you can use watever commandline-fu you learned. There is one thing to consider though: for loops.

for i in $(my-src-files) do; echo $$i >> $(my-dest-file); done

It takes me couple of hours to realize that one must use $$i when referencing loop variable instead of just $i like in plain shell scripts.

Google Chrome's requestFileSystem API

I've needed to dump database from Chrome extension and walked to requestFileSystem API. This API described quite detailed on HTML5 Rocks, but it gave no idea where my files are located on my hard drive. Process Monitor gaved me directions, and there it is. For each application, would it be site or extension, Google Chrome creates subdir in your %LOCALAPPDATA%\Google\Chrome\User Data\Default\FileSystem (on Windows (I'll give path for Linux later)). This subdir is named after application's URL, including protocol with slashes and colons replaced with underscores. For html5test.com it looks this way: http_www.html5rocks.com_0 Inside URL-named folder one can find one or two folders: Persistent or Temporary or both, which depends on type of access given application used. Inside each of them there is a directory with some kind of hash in name. And that hashed-name directory is root directory for your application's filesystem.