tag:blogger.com,1999:blog-14423216221747211012015-09-19T18:02:49.671-07:00Coding Rocks!TypeScript, C#, .NET, ASP MVC, MonoTouch, WPF, Silverlight, Python (Google App Engine), Guitars and other shiny toysBasarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.comBlogger385125tag:blogger.com,1999:blog-1442321622174721101.post-24560232117824038962015-09-19T18:02:00.001-07:002015-09-19T18:02:49.706-07:00Changing Itunes backup location on windows <div dir="ltr" style="text-align: left;" trbidi="on">Assuming the username you are logged into is `bas`:<br /><br /><i>mklink /j "C:\\Users\\bas\\AppData\\Roaming\\Apple Computer\\MobileSync" "D:\\ITUNES"</i><br /><i><br /></i>And there you have it. Backup will now be in D:\ITUNES.</div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-11380034827873598212015-03-04T15:38:00.000-08:002015-03-04T15:38:00.649-08:00Create a .gitignore file on windows<div dir="ltr" style="text-align: left;" trbidi="on">As you know if you create a .gitignore file using windows explorer (or .htaccess or any other .something file) it will complain loudly.<br /><br />The trick is to create a new file and call it :<br /><i>.gitignore.</i><br /><br />Notice the "." at the end. It is significant. Once you do that windows explorer will silently remove the trailing "." and you get exactly what you wanted ".gitignore"</div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-66628603251380364132014-12-13T18:31:00.002-08:002014-12-13T18:31:52.466-08:00Github tip: Subscribe for updates to a single Issue / Pull request<div dir="ltr" style="text-align: left;" trbidi="on">When you are active in the open source world working on a bunch of <b><i>active </i></b>projects notifications quickly become too large to manage. Here is an example:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://i.imgur.com/7MLVHLH.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/7MLVHLH.png" height="252" width="400" /></a></div>Fortunately a way to mange this is to only look at the notifications for issues / pull requests you are participating in.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://i.imgur.com/KsCdauE.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/KsCdauE.png" height="158" width="400" /></a></div>However many times you don't have a meaningful way to participate and you end up doing this:<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://i.imgur.com/QZQObpb.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://i.imgur.com/QZQObpb.png" height="51" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Comment just to participate</td></tr></tbody></table>Fortunately you don't need to do this. If you are watching a repository (because you are active in it) you will see the message "because you're subscribed to this repository" as shown:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://i.imgur.com/wmNYJWJ.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/wmNYJWJ.png" height="259" width="320" /></a></div><br />You can upgrade a particular issue / pull request to "participating" by clicking <b>unsubscribe</b> then <b>subscribe</b> again. Now you will see the message "because you're subscribed to this thread" as shown:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://i.imgur.com/67yHBmZ.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/67yHBmZ.png" height="266" width="320" /></a></div>That's it. Now it will show up in "participating" for your notifications and no one needs to know (or get notified about you subscribing).<br /><br />Admittedly its intuitive and I only learnt it from experience. I haven't searched for this so perhaps it is a documented way.</div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-51393884852058729132014-06-20T22:11:00.003-07:002014-06-20T22:16:02.810-07:00Getting Atom / apm to work on windows<div dir="ltr" style="text-align: left;" trbidi="on">This might be a short lived post, once Windows is officially supported you won't need this. For now, I got the built Atom from windows from here <a href="http://atom.someguy123.com/">http://atom.someguy123.com</a><br /><br />After extracting added (prepend with your extraction path) "Atom\resources\app\apm\node_modules\atom-package-manager\bin" to the windows system PATH, and then its all good<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://i.imgur.com/bzjGyTf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/bzjGyTf.png" height="127" width="400" /></a></div>publish away : <a href="https://atom.io/docs/latest/publishing-a-package">https://atom.io/docs/latest/publishing-a-package</a> `apm publish minor`</div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-53286928103125975312014-04-04T19:28:00.000-07:002014-04-04T19:28:13.404-07:00Microsoft Sculpt Ergonomic Desktop Review<div dir="ltr" style="text-align: left;" trbidi="on">Here's what I just got:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-ZTpNbt7J2fQ/Uz9oN2uYpCI/AAAAAAAABjg/WCrhuD7tUuM/s1600/photo+1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-ZTpNbt7J2fQ/Uz9oN2uYpCI/AAAAAAAABjg/WCrhuD7tUuM/s1600/photo+1.JPG" height="240" width="320" /></a></div>Reason was that I've been doing a "lot" of writing and coding when at home and my old clunky keyboard / standard MS mouse was starting to give me wrist pain. I already have a MS 4000 Keyboard + Logitech Trackball in the office (which I took from home) and I can write code comfortably all day long. So clearly there was something that needed to be done for my home rig. I thought I'd give something new a shot. Out of the box:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-B0z1bj_CgMI/Uz9oS9Mz9OI/AAAAAAAABjw/1BFm-C9V2Bw/s1600/photo+2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-B0z1bj_CgMI/Uz9oS9Mz9OI/AAAAAAAABjw/1BFm-C9V2Bw/s1600/photo+2.JPG" height="240" width="320" /></a></div><br /> Has a raise bar for the keyboard as well (which I very much like):<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-Q2iiZidldoE/Uz9oSMknwJI/AAAAAAAABjo/peyk96YgqTw/s1600/photo+3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-Q2iiZidldoE/Uz9oSMknwJI/AAAAAAAABjo/peyk96YgqTw/s1600/photo+3.JPG" height="240" width="320" /></a></div>I don't care for the numeric keyboard, so I like that it was separated. I left it in the box. My desk looks pretty clean: <br /><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-Xp66HVR5vRY/Uz9oU7zMg2I/AAAAAAAABj4/Tsju-qh1HdQ/s1600/photo.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-Xp66HVR5vRY/Uz9oU7zMg2I/AAAAAAAABj4/Tsju-qh1HdQ/s1600/photo.JPG" height="240" width="320" /></a></div><span id="goog_1638126501"></span><span id="goog_1638126502"></span><br />I have to admit : the best thing about this setup : the mouse. Its heavy, tall and nearly vertical. It feels like I am resting my hand on a ball. Very nicely done Microsoft!</div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-81374615159928486692014-03-29T22:12:00.002-07:002014-03-29T22:18:53.981-07:00Setting up command prompt for screenshots<div dir="ltr" style="text-align: left;" trbidi="on">Here's my workflow. Create a new batch file <i>foo.bat</i> with the following contents:<br /><br /><span style="font-family: Courier New, Courier, monospace;">title Node.js</span><br /><span style="font-family: Courier New, Courier, monospace;">prompt C:$G</span><br /><span style="font-family: Courier New, Courier, monospace;">cls</span><br /><br />And put this in your windows path. Start it any folder using `foo.bat`. You get a nice clean looking prompt great for screenshots:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-rqcJ0-OiwLk/Uzenm_MOgxI/AAAAAAAABi0/aTD_Gbs7A5I/s1600/tmp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-rqcJ0-OiwLk/Uzenm_MOgxI/AAAAAAAABi0/aTD_Gbs7A5I/s1600/tmp.png" height="162" width="320" /></a></div><br />That answers "how do I hide the path on the command prompt". </div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-59163773193852407082013-07-06T22:44:00.001-07:002013-07-06T22:44:54.145-07:00Debugging AngularJS Source with WebStorm<div dir="ltr" style="text-align: left;" trbidi="on">The great thing about AngularJS is that it comes with a very full featured test suite. This means that you can use tests if you:<br /><br /><ul style="text-align: left;"><li>want to play around and try to add new features in AngularJS </li><li>or try to understand AngularJS internals</li></ul>This is my quick guide on the steps I had to carry out to debug the code I downloaded. I'll be using windows and webstorm. Some of these are pretty standard steps if you know nodejs + karma but should be helpful nonetheless. All commands should be run the from main AngularJS folder. The git root<i style="font-weight: bold;"> </i>folder (whatever you want to call it). Not the src folder. In particular the folder where you have package.json , Gruntfile.js, karma-config-* files.<br /><br /><h2 style="text-align: left;">Get AngularJS source</h2>Download (git clone) from <a href="https://github.com/angular/angular.js">https://github.com/angular/angular.js</a><div><br /><h2 style="text-align: left;">Make sure you have NodeJS installed </h2><div>A pretty painless task: <a href="http://www.youtube.com/watch?v=VLncCs8bdI0">http://www.youtube.com/watch?v=VLncCs8bdI0</a></div><div><br /></div><h2 style="text-align: left;">Install the pre requisite global NodeJS packages</h2><div>You need grunt and karma. Pretty painless after you have node: </div><div style="text-align: left;"><span style="font-family: 'Courier New', Courier, monospace;">npm install -g grunt</span></div><div style="text-align: left;"><span style="font-family: Courier New, Courier, monospace;">npm install -g karma </span></div><div style="text-align: left;"><span style="font-family: Courier New, Courier, monospace;"><br /></span></div><h2 style="text-align: left;">Download AngularJS prerequisite NodeJS packages</h2><div>Run:</div><div><span style="font-family: Courier New, Courier, monospace;">npm install</span></div><div><span style="font-family: Courier New, Courier, monospace;"><br /></span></div><div>from the main AngularJS folder. This will basically read package.json and download any prerequisites. </div><div><br /></div><h2 style="text-align: left;">Setup your CHROME_BIN</h2></div><div>I have this environment variable pointing to my chrome.exe (not chrome canary).</div><div><br /></div><h2 style="text-align: left;">Build Angular</h2><div>Build AngularJS (required if you want to run the tests):</div><div style="text-align: left;"><span style="font-family: Courier New, Courier, monospace;">grunt build</span></div><div style="text-align: left;"><span style="font-family: Courier New, Courier, monospace;"><br /></span></div><h2 style="text-align: left;">Run the karma server</h2><div>Simple command: </div><div><span style="font-family: Courier New, Courier, monospace;">karma start karma-modules.conf.js --no-single-run --auto-watch --reporters dots</span></div><div>This should start chrome + run the tests (module tests in this case as I ran karma-modules.conf.js) </div><div><br /></div><div>Leave this command (i.e. karma) running in the background.</div><div><br /></div><h2 style="text-align: left;">Now setup debug environment in WebStorm</h2><div>Create a new WebStorm project from your AngularJS folder. Edit your run configurations: </div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-YzKxJUvNPR8/Udj78S5sI5I/AAAAAAAABQU/-_if1tPoM1w/s1600/0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="98" src="http://3.bp.blogspot.com/-YzKxJUvNPR8/Udj78S5sI5I/AAAAAAAABQU/-_if1tPoM1w/s400/0.png" width="400" /></a></div><div>(Don't mind that I <b><i>already </i></b>have debug karma setup, you will not). </div><div><br /></div><div>Add a remote debug config: </div><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-OhJKrzlBQzM/Udj8Zgg8YlI/AAAAAAAABQc/H6eSgWy50aA/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://1.bp.blogspot.com/-OhJKrzlBQzM/Udj8Zgg8YlI/AAAAAAAABQc/H6eSgWy50aA/s400/1.png" width="400" /></a></div><div><br /></div><div>Add set it up as follows. Call it whatever you want but url to open and remote url are important: </div><div><span style="font-family: Courier New, Courier, monospace;">http://localhost:9876/debug.html</span></div><div><span style="font-family: Courier New, Courier, monospace;">http://localhost:9876/base</span></div><div><span style="font-family: Courier New, Courier, monospace;"><br /></span></div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-WLZvZ9646Kw/Udj8viRE4FI/AAAAAAAABQk/4OYyZI4SzQg/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="http://2.bp.blogspot.com/-WLZvZ9646Kw/Udj8viRE4FI/AAAAAAAABQk/4OYyZI4SzQg/s640/2.png" width="640" /></a></div><div><br /></div><div>Great. Now set a breakpoint, Start debugging and watch the magic happen. </div><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-Sd07OwN154I/Udj90Ts_VPI/AAAAAAAABQ0/VxIDcwRbAgk/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="576" src="http://4.bp.blogspot.com/-Sd07OwN154I/Udj90Ts_VPI/AAAAAAAABQ0/VxIDcwRbAgk/s640/4.png" width="640" /></a></div><div><br /></div></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-37954915570106981962013-07-05T17:45:00.000-07:002013-07-05T17:45:28.522-07:00Origin null is not allowed by Access-Control-Allow-Origin Chrome fix<div dir="ltr" style="text-align: left;" trbidi="on">When working on simple html prototypes that don't really need a backend server (Single page app prototypes). You often need to load html / js files from disk. This is disallowed for your protection by default and you will get errors like:<br /><br /><span style="font-family: Courier New, Courier, monospace;">Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. file:///D:/asdf.html</span><br /><span style="font-family: Courier New, Courier, monospace;">XMLHttpRequest cannot load file:///D:/asdf.html. Origin null is not allowed by Access-Control-Allow-Origin. </span><br /><br />Simple solution for chrome: Start with --allow-file-access-from-files option :<br /><br /><span style="font-family: Courier New, Courier, monospace;">chrome --allow-file-access-from-files</span></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-6684361008695631262013-06-29T16:58:00.001-07:002013-06-29T16:58:44.244-07:00ASP.NET MVC Single checkbox generates two values<div dir="ltr" style="text-align: left;" trbidi="on"><div class="WordSection1"><div class="MsoNormal">So a single checkbox: <o:p></o:p></div><div class="MsoNormal"><span style="mso-fareast-language: EN-AU;"><a href="http://4.bp.blogspot.com/-AmrNE9GjriU/UbpZI6ZsCvI/AAAAAAAABMU/cOrpDpi2hEg/s1600/image001-710724.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5889117472391170802" src="http://4.bp.blogspot.com/-AmrNE9GjriU/UbpZI6ZsCvI/AAAAAAAABMU/cOrpDpi2hEg/s320/image001-710724.png" /></a></span><o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">Will generate two input fields in MVC <span style="font-family: "Lucida Console";"> CheckboxFor</span>: <o:p></o:p></div><div class="MsoNormal"><span style="mso-fareast-language: EN-AU;"><a href="http://4.bp.blogspot.com/-g2NfBZ-cFEY/UbpZJFXv8EI/AAAAAAAABMg/BsjATGeHxSM/s1600/image002-712557.png"><img alt="" border="0" height="49" id="BLOGGER_PHOTO_ID_5889117475335827522" src="http://4.bp.blogspot.com/-g2NfBZ-cFEY/UbpZJFXv8EI/AAAAAAAABMg/BsjATGeHxSM/s640/image002-712557.png" width="640" /></a></span><o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">It is because the browser does not post a checkbox when the value is false. MVC takes this into account and creates a dummy field for the case when the checkbox is unchecked. So when the checkbox is checked you get ‘true,false’ instead of ‘true’ <o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal"><span style="font-family: "Lucida Console";">TryUpdateModel</span> will take this all into account and work out the correct value for you. <o:p></o:p></div></div></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-64750573013782967022013-06-29T16:57:00.002-07:002013-06-29T16:57:42.202-07:00The most awesome option in SourceTree<div dir="ltr" style="text-align: left;" trbidi="on">Rebase by default:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-MWNGaqgQGA4/Uc90QzaX3eI/AAAAAAAABP0/5IUohI7IyCI/s500/asdf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-MWNGaqgQGA4/Uc90QzaX3eI/AAAAAAAABP0/5IUohI7IyCI/s1600/asdf.png" /></a></div><br /></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-64772105341140586602013-06-27T05:56:00.000-07:002013-06-27T05:56:53.882-07:00AngularJS minification<div dir="ltr" style="text-align: left;" trbidi="on">Just downloaded angular source. Its no secret that AngularJS uses google closure tools. In case you are wondering how here is the grunt config:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-HMZKT9-JHt0/Ucw1pngnioI/AAAAAAAABPA/_kFdUImalRw/s494/0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-HMZKT9-JHt0/Ucw1pngnioI/AAAAAAAABPA/_kFdUImalRw/s1600/0.png" /></a></div><br />This uses the custom grunt task as follows:<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-AauRSTcNJIw/Ucw1vpuuVeI/AAAAAAAABPI/AwR2A2_VQOE/s579/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-AauRSTcNJIw/Ucw1vpuuVeI/AAAAAAAABPI/AwR2A2_VQOE/s1600/1.png" /></a></div><br />And the contents of the grunt task are just calling google closure compiler with proper arguments: <br /><br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-eLfy1yjnXi8/Ucw2U44BBTI/AAAAAAAABPY/tQUzFJWeH_c/s597/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-eLfy1yjnXi8/Ucw2U44BBTI/AAAAAAAABPY/tQUzFJWeH_c/s1600/2.png" /></a></div><br /></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-92117134450228094942013-06-09T18:43:00.001-07:002013-06-09T18:44:34.354-07:00Typescript: Indexer enforces property compliance<div dir="ltr" style="text-align: left;" trbidi="on">Here is a new thing I found about typescript 0.9Alpha. Once you specify a string indexer all other properties must be of the same type (which makes sense):<br /><br /><div style="border: #000080 1px solid; color: black; font-family: 'Courier New', Courier, Monospace; font-size: 10pt;"><div style="background-color: white; overflow: auto; padding: 2px 5px;"><span style="background: #ffffff; color: blue;">interface</span><span style="background: #ffffff; color: black;"> IBar{</span><br /> <span style="background: #ffffff; color: black;">bar: </span><span style="background: #ffffff; color: blue;">string</span><span style="background: #ffffff; color: black;">;</span><br /><span style="background: #ffffff; color: black;">}</span><br /><br /><span style="background: #ffffff; color: blue;">interface</span><span style="background: #ffffff; color: black;"> IFoo{</span><br /> <span style="background: #ffffff; color: black;">a?: {</span><br /> <span style="background: #ffffff; color: black;">[key: </span><span style="background: #ffffff; color: blue;">string</span><span style="background: #ffffff; color: black;">]: IBar; </span><span style="background: #ffffff; color: green;">// Once you have a string indexer all other properties </span><br /> <span style="background: #ffffff; color: black;">options?: IBar; </span><span style="background: #ffffff; color: green;">// e.g Options, must have the same type </span><br /> <span style="background: #ffffff; color: black;">}</span><br /><span style="background: #ffffff; color: black;">}</span><br /><br /><span style="background: #ffffff; color: blue;">var</span><span style="background: #ffffff; color: black;"> x: IFoo = {</span><br /> <span style="background: #ffffff; color: black;">a: { </span><br /> <span style="background: #ffffff; color: black;"></span><span style="background: #ffffff; color: #a31515;">'someKey'</span><span style="background: #ffffff; color: black;">: {</span><br /> <span style="background: #ffffff; color: black;">bar:</span><span style="background: #ffffff; color: #a31515;">'asdf'</span><span style="background: #ffffff; color: black;"> </span><span style="background: #ffffff; color: green;">// put any thing other than a string here and you get an error</span><br /> <span style="background: #ffffff; color: black;">} </span><br /> <span style="background: #ffffff; color: black;">}</span><br /><span style="background: #ffffff; color: black;">}</span></div></div></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-16825609646490863382013-06-09T00:10:00.000-07:002013-06-10T00:44:23.329-07:00Trying the Latest Version of TypeScript for Visual Studio<div dir="ltr" style="text-align: left;" trbidi="on">There is a blog post on the topic by the TypeScript team over at : <a href="http://blogs.msdn.com/b/typescript/archive/2013/01/29/trying-the-latest-typescript-build.aspx">http://blogs.msdn.com/b/typescript/archive/2013/01/29/trying-the-latest-typescript-build.aspx</a><br /><br />However that was for TypeScript 0.8 and the path is different for TypeScript 0.9.<br /><br /><h2 style="text-align: left;">For Visual Studio Extension</h2>To try out the latest built version of TypeScript, just copy the <span style="font-family: Courier New, Courier, monospace;">typescriptServices.js</span> file from the bin folder of the file you checkout from <span style="font-family: Courier New, Courier, monospace;">release-0.9.0</span> branch at <span style="font-family: Courier New, Courier, monospace;">https://git01.codeplex.com/typescript</span> over to:<br /><br /><span style="font-family: Courier New, Courier, monospace;">C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript</span><br /><br />Overwriting what was already there.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-3KURpFHHtBY/UbWDsqxJaKI/AAAAAAAABMA/dadv79kp6oU/s1600/0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="352" src="http://4.bp.blogspot.com/-3KURpFHHtBY/UbWDsqxJaKI/AAAAAAAABMA/dadv79kp6oU/s640/0.png" width="640" /></a></div><br /><h2 style="text-align: left;">For the Compiler</h2>Additionally you might want to replace the <span style="font-family: Courier New, Courier, monospace;">tsc.js </span>and <span style="font-family: Courier New, Courier, monospace;">typescript.js</span> files in the following location:<br /><br /><span style="font-family: Courier New, Courier, monospace;">C:\Program Files (x86)\Microsoft SDKs\TypeScript</span><br /><br />Again using the files in the bin folder of the repository. </div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-36847337707638676002013-06-07T01:20:00.000-07:002013-06-07T01:20:11.409-07:00Why use semicolons in JavaScript<div dir="ltr" style="text-align: left;" trbidi="on"><div class="WordSection1"><div class="MsoNormal">I always use semicolons even though they are optional in JavaScript. A key reason for me is convention and javascript minification (although closure compiler will rewrite your js with semicolons inserted). But if you want to know what else could go wrong even if you do not do minification there is actually <b><i>only one case</i></b>. When a line starts with `(` it should have a semicolon before it.<o:p></o:p></div><div class="MsoNormal"><br /></div><h2 style="text-align: left;">An Example</h2><div class="MsoNormal"><o:p></o:p></div><div class="MsoNormal">When you have an immediately executed function to create a new scope: <o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// define a function with assignment</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> fn = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> () {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//...</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">} </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// semicolon missing at this line</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><br /></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// then execute some code inside a new scope</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> () {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//...</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">})();<o:p></o:p></span></div><div class="MsoNormal"><br /></div><div class="MsoNormal">Will get interpreted as : <o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> fn = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> () {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//...</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">}(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> () {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//...</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">})();</span><o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">The second function will fail with a "... is not a function" error at runtime.<o:p></o:p></div><div class="MsoNormal"><br /></div><h2 style="text-align: left;">Another example </h2><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// careful: will break</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">a = b + c<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">(d + e).print()<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Will get interpreted as: </span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">a = b + c(d + e).print();</span><o:p></o:p></div><div class="MsoNormal"><br /></div><h2 style="text-align: left;">Alternate Solution</h2><div class="MsoNormal"><o:p></o:p></div><div class="MsoNormal"><o:p> </o:p>A potential solution if you want to be a cowboy and not use semicolons everywhere is to use a semicolon before ‘(‘:</div><div class="MsoNormal"><o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">; (d + e).print()</span><o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">Its also potentially a good idea when your file starts with '(' since if someone (who does not use semicolons) does concatenation of your file it might become a problem. </div><div class="MsoNormal"><br /></div><div class="MsoNormal">Complete overview: <a href="http://mislav.uniqpath.com/2010/05/semicolons/"> http://mislav.uniqpath.com/2010/05/semicolons/</a><o:p></o:p></div><div class="MsoNormal">An example was from this answer: <a href="http://stackoverflow.com/a/1169596/390330"> http://stackoverflow.com/a/1169596/390330</a> <o:p></o:p></div></div></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-72765364935973966592013-06-06T21:43:00.000-07:002013-06-06T21:43:00.025-07:00Inspect all the event handlers on a DOM Element<div dir="ltr" style="text-align: left;" trbidi="on"><div class="WordSection1"><div class="MsoNormal"><br /></div><div class="MsoNormal">Here’s how chrome Developer Tools make it super simple. Just inspect an element and look inside the Event Listeners section as shown: <o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal"><span style="mso-fareast-language: EN-AU;"><a href="http://3.bp.blogspot.com/-H3U_AvsVGOo/UbFj52qE3SI/AAAAAAAABLA/j5WFS-Dk3to/s1600/image001-742906.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5886596033525636386" src="http://3.bp.blogspot.com/-H3U_AvsVGOo/UbFj52qE3SI/AAAAAAAABLA/j5WFS-Dk3to/s320/image001-742906.png" /></a></span><o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">Expand any event and you can see what element level the event is handled on e.g. here blur is handled on document as well as the div: <o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal"><span style="mso-fareast-language: EN-AU;"><a href="http://2.bp.blogspot.com/-upJBXSx4748/UbFj6Bz612I/AAAAAAAABLI/ZSoBnU5URBE/s1600/image003-744836.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5886596036519712610" src="http://2.bp.blogspot.com/-upJBXSx4748/UbFj6Bz612I/AAAAAAAABLI/ZSoBnU5URBE/s320/image003-744836.png" /></a></span><o:p></o:p></div><div class="MsoNormal">You can even jump to the function body (this is a minified file so it’s all on line 1) by clicking on the filename<o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">As an aside: there is no way to do this in your own code <a href="http://stackoverflow.com/a/2623352/390330"> http://stackoverflow.com/a/2623352/390330</a> <o:p></o:p></div><div class="MsoNormal"><br /></div></div></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-6291356235610119252013-06-01T18:05:00.000-07:002013-06-01T18:05:01.615-07:00YouTube video url transformations<div dir="ltr" style="text-align: left;" trbidi="on">There are some really innovative ways that you can transform the youtube url quite easily. Here are a few<div><br /></div><h2 style="text-align: left;">Just the video frame</h2><div>Use /v/ </div><div>e.g. <a href="http://www.youtube.com/watch?v=hU4cbxpe49Y">http://www.youtube.com/watch?v=hU4cbxpe49Y</a> to <a href="http://www.youtube.com/v/hU4cbxpe49Y">http://www.youtube.com/v/hU4cbxpe49Y</a></div><div><br /></div><h2 style="text-align: left;">Download YouTube Video</h2><div>Provided by a third party (save from). Add ss after www.</div><div>e.g. <a href="http://www.youtube.com/watch?v=hU4cbxpe49Y">http://www.youtube.com/watch?v=hU4cbxpe49Y</a> to <a href="http://www.ssyoutube.com/watch?v=hU4cbxpe49Y">http://www.ssyoutube.com/watch?v=hU4cbxpe49Y</a></div><div><br /></div></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-40080732950593769872013-05-28T17:12:00.000-07:002013-05-28T17:14:46.689-07:00Trick question : Closures in Javascript<div dir="ltr" style="text-align: left;" trbidi="on"><div class="WordSection1"><div class="MsoNormal">Closures are one of the most powerful features of the Javascript language. If there is one thing that makes JS so versatile, it has to be closures. But they can be tricky if you do not understand:</div><div class="MsoNormal"></div><ol style="text-align: left;"><li>Closures capture the <b><i>variable</i></b> not just its <b> <i>value.</i></b></li><li>Scope only changes using functions in Javascript.</li></ol>So the question, What does the following code print:<br /><div class="MsoNormal"><o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> funcs = [];</span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Setup </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">for</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> (</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> i = 0 ; i < 10 ; i++) {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> funcs.push(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> () { console.log(i) });<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">}</span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Call</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">for</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> (</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> j = 0 ; j < funcs.length ; j++) {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> funcs[j]();<o:p></o:p></span></div><div class="MsoNormal"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">}</span><span style="color: black; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal"><br /></div><div class="MsoNormal">The intuitive answer is 0,1,2,3…9 . However that is not the case. This is because each function in setup captured the variable <b><i>i</i></b> and not its value. When the for loop finished the variable <b><i>i</i></b> has a value 10 and therefore all functions print out 10. You now understand what (1) means. <o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">Now let’s make these functions print 0,1,2,3…9. The solution would be to create a new variable within the scope of the for loop so that each function gets a new variable. Now the only way to create a new scope is using a function (2). Lets say you don't know this and try the following which will <b><i>not work. </i></b>It will print 9 instead of 10 however since that is the last value that gets assigned to foo: <o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Clear</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">funcs = [];</span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Setup </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">for</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> (</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> i = 0 ; i < 10 ; i++) {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> foo = i;<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> funcs.push(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> () {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> console.log(foo)<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> });<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">}</span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Call</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">for</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> (</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> j = 0 ; j < funcs.length ; j++) {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> funcs[j]();<o:p></o:p></span></div><div class="MsoNormal"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">}</span><o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">To fix this we use the concept of <b><i>immediately executing functions</i></b> i.e. we declare a function (to create a new scope) and immediately execute it (to fall into that scope). The following <b><i>will </i></b>work. :<br /><o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Clear</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">funcs = [];</span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Setup </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">for</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> (</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> i = 0 ; i < 10 ; i++) {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> (</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> () {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> foo = i;<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> funcs.push(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> () {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> console.log(foo)<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> });<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> })();<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">}</span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Call</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">for</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> (</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> j = 0 ; j < funcs.length ; j++) {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> funcs[j]();<o:p></o:p></span></div><div class="MsoNormal"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">}</span><o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">You now understand (2). You can find the code here : <a href="http://jsfiddle.net/basarat/U9brW/"> http://jsfiddle.net/basarat/U9brW/</a><o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">As a aside you might think the following is a good idea (<i>will<b> not work </b>as expected</i>): <o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Setup </span><o:p></o:p></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">for</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> (</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> i = 0 ; i < 10 ; i++) { <o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> funcs.push(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> () {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> foo = i;<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> console.log(foo)<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> }); <o:p></o:p></span></div><div class="MsoNormal"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">}</span><o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">But it’s actually no different than (<i>will<b> not work </b> as expected</i>): <o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Setup </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">for</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> (</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> i = 0 ; i < 10 ; i++) {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> funcs.push(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> () { console.log(i) });<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">}</span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal"><br /></div><div class="MsoNormal">Because the only variable that is captured by the function is still <b><i>i</i></b> from the outer scope. <o:p></o:p></div></div></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-70412777164611112152013-05-27T21:57:00.001-07:002013-05-27T22:05:56.037-07:00Using Actions to clean up your code<div dir="ltr" style="text-align: left;" trbidi="on"><div class="WordSection1"><div class="MsoNormal">I am a firm believer of DRY “If you are doing the same thing thrice, you are doing it wrong” . Within reasonable effort ofcourse. <o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">So when I see code like this: <o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">List</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">string</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">> permissions = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">new</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">List</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">string</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">>();<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// The ones we care about: </span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> (Session.HasPermissions(</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Permission</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">.AdministrationSetPoints))<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">{<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> permissions.Add(</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Permission</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">.AdministrationSetPoints.ToString());<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">}<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> (Session.HasPermissions(</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Permission</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">.Administration))<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">{<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> permissions.Add(</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Permission</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">.Administration.ToString());<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">}</span><span style="color: black; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><br /></div><div class="MsoNormal" style="text-autospace: none;">There is no wonder that I want there to be a function to abstract out the if conditions. But creating a new function at class level looks a bit dirty. Not only do you have a new function that is only called from one place but you need to pass in a ref argument (permissions list). Later on its unclear at first sight (without reading xml comments perhaps) why this new function was created. Additional constraints like making sure your private functions are at the end may increase the distance between your original function and this new function. <o:p></o:p></div><div class="MsoNormal" style="text-autospace: none;"><br /></div><div class="MsoNormal" style="text-autospace: none;">Lucky for us C# 3.0 gave us an excellent solution with inline lambdas: <o:p></o:p></div><div class="MsoNormal" style="text-autospace: none;"><br /></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">List</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">string</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">> permissions = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">new</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">List</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">string</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">>();<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><br /></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Action</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Permission</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">> addPermission = (</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Permission</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> p) =><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> {<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">(Session.HasPermissions(p))<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> permissions.Add(p.ToString()); <o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> };<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> <o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// The ones we care about: </span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">addPermission(</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Permission</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">.AdministrationSetPoints);<o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">addPermission(</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Permission</span><span style="background: white; color: black; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">.Administration);</span><span style="color: black; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="text-autospace: none;"><br /></div><div class="MsoNormal" style="text-autospace: none;">Notice that:<o:p></o:p></div><div class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-autospace: none; text-indent: -18.0pt;"></div><ul style="text-align: left;"><li>the action (<b><i>addPermission</i></b>) does not need to be passed in the <b><i>permissions</i></b> object since the outer scope variable is available.</li><li>The function is declared closer to where it is used and you can tell at first look why it was created.</li></ul><o:p></o:p><br /><div class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-autospace: none; text-indent: -18.0pt;"><o:p></o:p></div><div class="MsoNormal" style="text-autospace: none;"><br /></div><div class="MsoNormal" style="text-autospace: none;">To be honest. For this I was inspired by JavaScript closures.<o:p></o:p></div></div></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-69033620186440055782013-05-23T20:50:00.000-07:002013-05-23T20:50:36.732-07:00Add Existing Item as Link in Visual Studio <div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="WordSection1"><div class="MsoNormal">It is a feature that is used very commonly for code sharing between project. But I could not find good screenshots to show someone so here they are. <o:p></o:p></div><div class="MsoNormal"><br /></div><div class="MsoNormal">Right lick project folder and select Add - Existing Item: <o:p> </o:p></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-u9INcyYiNuQ/UZ7i-_EAPpI/AAAAAAAABKQ/wZfc_UCsqtk/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="220" src="http://4.bp.blogspot.com/-u9INcyYiNuQ/UZ7i-_EAPpI/AAAAAAAABKQ/wZfc_UCsqtk/s640/1.png" width="640" /></a></div><div class="MsoNormal"><br /></div><div class="MsoNormal">Now select your file and choose “Add As Link” <o:p></o:p></div><a href="http://4.bp.blogspot.com/-9YNYLLK6g2s/UZ7i_CChBeI/AAAAAAAABKY/HipvGjlhUlo/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="421" src="http://4.bp.blogspot.com/-9YNYLLK6g2s/UZ7i_CChBeI/AAAAAAAABKY/HipvGjlhUlo/s640/2.png" width="640" /></a><br /><div class="MsoNormal"><br /></div><div class="MsoNormal">An additional useful option is Copy if newer:</div></div><div class="WordSection1"><img border="0" src="http://2.bp.blogspot.com/-pl4ihdnby5U/UZ7i-4ZEibI/AAAAAAAABKU/cJyBZLZEEcQ/s1600/3.png" style="color: #0000ee; text-align: center;" /></div></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-64764453033269601042013-05-22T17:22:00.001-07:002013-05-22T17:24:41.130-07:00Setup maxlength for strings in ASP.NET MVC <div dir="ltr" style="text-align: left;" trbidi="on">String length is an attribute available in the <b><i>System.ComponentModel.DataAnnotations;</i></b> namespace for your viewmodels. It sets up validation for max length e.g:<br /><br /><span style="font-family: Courier New, Courier, monospace;">[StringLength(100, ErrorMessage = "Length must be less than or equal to 100")]</span><br /><br /><div>In html this will warn the user if the length exceeds 100. But if you want the html input to disallow the user to even <b><i>type</i></b> more than 100 characters then that functionality is not provided out of the box. You can use the attribute added to the html tag because of <b style="font-style: italic;">StringLength </b>ie. <b><i>data-val-length-max</i></b> to add the <i style="font-weight: bold;">maxlength</i> attribute using one line of jquery:<br /><br /><span style="font-family: Courier New, Courier, monospace;">$('[data-val-length-max]').each(function () { $(this).attr("maxlength", $(this).attr('data-val-length-max')); });</span><br /><br />The maxlength attribute prevents the user from entering more characters than are allowed. This one line does it for all inputs that have this attribute setup in a view. </div></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-64074256140519617252013-05-19T01:58:00.001-07:002013-05-19T03:38:26.681-07:00AngularJS + RequireJS<div dir="ltr" style="text-align: left;" trbidi="on">TypeScript has excellent support for AMD / RequireJS and you can see that over here<br /><br /><a href="http://www.youtube.com/watch?v=4AGQpv0MKsA">http://www.youtube.com/watch?v=4AGQpv0MKsA</a><br /><br />Now that I am working on throwing AngularJS into the mix it feels a bit awkward to integrate AngularJS / RequireJS / TypeScript.<br /><br />I've done it before and infact this presentation uses all three:<br /><a href="http://basarat.github.io/TypeScriptDeepDive/">http://basarat.github.io/TypeScriptDeepDive/</a><br />It provides a great sample for you to experiment with if you need to (based on RequireJS + AngularJS seed project <a href="https://github.com/tnajdek/angular-requirejs-seed">https://github.com/tnajdek/angular-requirejs-seed</a>)<br /><br />It becomes a lot less relevant when you do your bundling and minification on the server e.g. <a href="http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification">http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification</a> . Let me explain.<br /><br />There are two reasons behind organization of your script files.<br /><br /><h2 style="text-align: left;">First: </h2>Items that are declared in the global namespace are available before they are used. <br /><div>e.g. $ should be available before your code runs e.g. even the init: <script src="https://gist.github.com/basarat/5607113.js"></script></div><div>Or for that matter <i style="font-weight: bold;">angular</i> should be available before you go on creating your modules. This is the area where RequireJS is still relevant when you use AngularJS. This is the area that can <b><i>also</i></b> be solved by ordering in your JS bundles.<br /><br /><h2 style="text-align: left;">Second:</h2><div style="text-align: left;">Functions declared are called in order. AngularJS does this inherantly. Any module declaration / service declaration / scope declarations are just declarations. These are executed depending upon the order they are defined as a dependency. e.g</div><script src="https://gist.github.com/basarat/5607130.js"></script> <br /><div style="text-align: left;">Directives controllers and services all get instantiated (using function calls) <b><i>before</i></b> the module gets instantiated. This is a region of overlap between RequireJS and AngularJS and if you are using Angular then RequireJS loses a bit of its charm.<br /><br /><h2 style="text-align: left;">Finally:</h2>The final decision is of course up to you and you will have to make it for your project based on your requirements. If you are using a lot of script tags and don't have a server side alternative then yes, <i style="font-weight: bold;">I feel requireJS is a must for you. </i>Otherwise, not so much.<br /><br /><h2 style="text-align: left;">Additionally: </h2>The angular team itself depends on closure compiler to do its minification (confirmed fact) along with sourcemaps (my assumption) to do its debugging. So they can effectively use a single script tag since the ordering logic is maintained by the closure compiler. </div><div style="text-align: left;"><br /></div><div style="text-align: left;"><br /></div><div style="text-align: left;"><br /></div><br /><br /></div></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-87293205209164267022013-05-11T18:41:00.000-07:002013-05-11T18:41:05.304-07:00NodeJS Debugging with WebStorm<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">WebStorm makes getting started with NodeJS a breeze. I made a short video tutorial to show this that you can check out on youtube <a href="http://www.youtube.com/watch?v=6bKsDoFj83o">http://www.youtube.com/watch?v=6bKsDoFj83o</a> also embedded below:<br /><br /><br /></div><iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/6bKsDoFj83o" width="560"></iframe></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-65242753832578483752013-05-10T21:04:00.001-07:002013-05-10T21:04:33.521-07:00Getting Started with NodeJS on Windows<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">NodeJS on windows has come a long way since the early days. Now windows is pretty much a first class citizen in node world. I did a quick video to show how to get started with NodeJS on windows:<br /><br /><br /></div><iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/VLncCs8bdI0" width="560"></iframe></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-6017018357908274682013-05-08T01:41:00.001-07:002013-05-08T01:41:47.949-07:00TypeScript AMD with RequireJS <div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">Using TypeScript files with RequireJS is incredibly simple. However using JS files that are not aware of RequireJS can be a bit tricky. Also mixing Typescript with JavaScript all along using RequireJS can use a bit more documentation. So ... I made a video. Check it out here: <a href="http://www.youtube.com/watch?v=4AGQpv0MKsA">http://www.youtube.com/watch?v=4AGQpv0MKsA</a><br /><br />Covers Using TypeScript with RequireJS, using a non RequireJS file with TypeScript when in the RequireJS mode and a RequireJS Module with TypeScript.<br /><br /></div><iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/4AGQpv0MKsA" width="560"></iframe></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0tag:blogger.com,1999:blog-1442321622174721101.post-82581303776808221662013-05-05T21:45:00.003-07:002013-05-22T23:55:27.548-07:00Getting Started with GIT on Windows : SourceTree<div dir="ltr" style="text-align: left;" trbidi="on">Getting started with GIT on windows has never been easier thanks to the great folk at Atlassian that made SourceTree. That is the "ONLY" software you need to install. It is extremely straightforward but I thought I would take you through a screenshot tour anyways.<br /><b><br /></b><b><i>Note: I found no need to make any change in the program defaults. </i></b><br /><b><i>That is rare and shows the great work the developers have done. </i></b><br /><b><br /></b>Start <a href="http://sourcetreeapp.com/">http://sourcetreeapp.com/</a><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-g1A5dGaes2s/UYcw36ltWZI/AAAAAAAABFU/Istqbh6udBY/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="198" src="http://3.bp.blogspot.com/-g1A5dGaes2s/UYcw36ltWZI/AAAAAAAABFU/Istqbh6udBY/s400/1.png" width="400" /></a></div>Launch:<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-jgRUuOXq_Pg/UYcxSkd3p6I/AAAAAAAABGI/dY9vqKHRKeg/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="181" src="http://2.bp.blogspot.com/-jgRUuOXq_Pg/UYcxSkd3p6I/AAAAAAAABGI/dY9vqKHRKeg/s400/2.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: left;">Install:</div><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-83bbWOwxdR4/UYcxYn0624I/AAAAAAAABGQ/mrEFNiKjzRY/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="191" src="http://1.bp.blogspot.com/-83bbWOwxdR4/UYcxYn0624I/AAAAAAAABGQ/mrEFNiKjzRY/s320/3.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;">Watch the installer be awesome and download all you need:</div><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-UdYydyMTkE0/UYcxleiMhFI/AAAAAAAABGY/WeSNUaoamWk/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="181" src="http://1.bp.blogspot.com/-UdYydyMTkE0/UYcxleiMhFI/AAAAAAAABGY/WeSNUaoamWk/s320/4.png" width="320" /></a></div><br />Enter your details. Configuring automatic line ending handling is really great for open source work since people can use Unix and Windows without hassling about line endings:<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-OERZvDVoeiM/UYcxzfbcXSI/AAAAAAAABGg/9QQQUWWdOHE/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-OERZvDVoeiM/UYcxzfbcXSI/AAAAAAAABGg/9QQQUWWdOHE/s320/5.png" width="300" /></a></div>Leave Putty selected:<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-rYX43pcys0E/UYcyaTq54uI/AAAAAAAABGo/eqr0t_A1gHk/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-rYX43pcys0E/UYcyaTq54uI/AAAAAAAABGo/eqr0t_A1gHk/s320/6.png" width="300" /></a></div><br />It will ask you for your putty files. Just click cancel if you don't have putty installed (I don't):<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-iRwO0DkQuA0/UYczFxadTYI/AAAAAAAABG4/peW-eAexG58/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-iRwO0DkQuA0/UYczFxadTYI/AAAAAAAABG4/peW-eAexG58/s1600/7.png" /></a></div>Click Finish:<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-dZzDMKcZqtM/UYczNU4yq6I/AAAAAAAABHA/ACPilGBqUBo/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-dZzDMKcZqtM/UYczNU4yq6I/AAAAAAAABHA/ACPilGBqUBo/s320/8.png" width="300" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">When sourcetree starts it will ask you for a license. Don't worry, its free: </div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-Pu5zEiVcDN4/UYczXoAbntI/AAAAAAAABHI/0XdURbP9eDM/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="425" src="http://2.bp.blogspot.com/-Pu5zEiVcDN4/UYczXoAbntI/AAAAAAAABHI/0XdURbP9eDM/s640/9.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-XUf14BLNbag/UYczrQEiFHI/AAAAAAAABHQ/TBjBt13y2Qo/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="96" src="http://3.bp.blogspot.com/-XUf14BLNbag/UYczrQEiFHI/AAAAAAAABHQ/TBjBt13y2Qo/s320/10.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">Use Register Now and you will be all set: </div><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-tVbw5gqjnLU/UYcz3b-ccTI/AAAAAAAABHY/0O5QpVaG-9k/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="516" src="http://1.bp.blogspot.com/-tVbw5gqjnLU/UYcz3b-ccTI/AAAAAAAABHY/0O5QpVaG-9k/s640/11.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">Now you are all setup to get cracking with git. Painless wasn't it? </div><div class="separator" style="clear: both; text-align: left;"><br /></div><h2 style="text-align: left;">Load a repository from GitHub</h2><div class="separator" style="clear: both; text-align: left;">Just copy the git https url of the repository: </div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-FT3NyEqhSF8/UYc0Xgj4DyI/AAAAAAAABHg/_yWiwmxZWTM/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="27" src="http://3.bp.blogspot.com/-FT3NyEqhSF8/UYc0Xgj4DyI/AAAAAAAABHg/_yWiwmxZWTM/s400/12.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: left;">Click Clone in SourceTree: </div><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-UGk1Ih5ePCc/UYc0gbQJFEI/AAAAAAAABHo/7JmwxefHQ3o/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-UGk1Ih5ePCc/UYc0gbQJFEI/AAAAAAAABHo/7JmwxefHQ3o/s1600/13.png" /></a></div><div class="separator" style="clear: both; text-align: left;">Paste in the URL, put in the destination and click clone: </div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/--T0uCOUwsLw/UYc0mW8KG_I/AAAAAAAABHw/QEws6oQ4q-4/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="286" src="http://2.bp.blogspot.com/--T0uCOUwsLw/UYc0mW8KG_I/AAAAAAAABHw/QEws6oQ4q-4/s400/14.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">Watch the magic happen: </div><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-FswrC1xmJRU/UYc03FTRgwI/AAAAAAAABH4/kusqAjlzvzQ/s1600/15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="323" src="http://4.bp.blogspot.com/-FswrC1xmJRU/UYc03FTRgwI/AAAAAAAABH4/kusqAjlzvzQ/s400/15.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: left;">And you are all set: </div><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-a-UZ7Wrf_08/UYc0_T7H7qI/AAAAAAAABIA/hc3ik6RDSHw/s1600/16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="323" src="http://1.bp.blogspot.com/-a-UZ7Wrf_08/UYc0_T7H7qI/AAAAAAAABIA/hc3ik6RDSHw/s400/16.png" width="400" /></a></div><h2 style="text-align: left;">Using git terminal</h2><div>Source tree comes with git terminal integrated. I did not have to install any separate software to get this git awesomeness. Just click the terminal button and get cracking with bash awesomeness on windows: </div><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-sDFIqklltM4/UYc1R_nPXYI/AAAAAAAABII/OtaFx-Ydnjg/s1600/17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="328" src="http://1.bp.blogspot.com/-sDFIqklltM4/UYc1R_nPXYI/AAAAAAAABII/OtaFx-Ydnjg/s400/17.png" width="400" /></a></div><div><h2 style="text-align: left;">Further Reading: </h2></div><div>A git branching model: <a href="http://nvie.com/posts/a-successful-git-branching-model/">http://nvie.com/posts/a-successful-git-branching-model/</a></div></div>Basarat Alihttps://plus.google.com/115247796464737372944noreply@blogger.com0