Where has all the browser javascripting gone?

I guess it's time to admit I'm behind the times. I have little experience with many of the things I'm hearing the web-community talk about like it's something everyone is already using. Webpack, AMD, UMD, Flow, JsDoc, EsLint, Typings. I have some experience with node, but 99% of the code I write/have written is for the browser and blissfully ignorant of server-side JavaScript.

Individual parts of this I imagine I'd have no problem learning. It seems each one of them takes for granted that you already know or are willing to go learn the other system, and then not discuss how you would (as a beginner or intermediate to both systems) integrate them. Also, forget how you would use them on a path that doesn't perfectly match whatever path they choose for you to learn on, especially for any advanced usage.

Motivation

VsCode has a combination platter of lovely features/extensions to enable things like intellisense, auto-completion, and design-time error detection. However, what it seems I'm running into is they rely on using (non-AMD) module systems. I'm having code types/method thrashing in a live personal project (also a similar issue in a non-live non-personal project).

Solutions (from my Understanding/Attempts)

• JsDoc
• where it seems I have to redefine the same @typedef MyClass in each and every file rather than somehow referencing the source of an object's shape.
• There doesn't appear to be anyway to get the annotations out of every file to centralize (which is of dubious benefit in many cases, unless it causes you to have to copy-paste your shape comments around to multiple files.
• Some of it (no idea how much) isn't supported by VsCode
• This is the documentation for a callback 
• notice there is no example that doesn't involve using prototypes or resorting to classes?
• I can find nothing that talks about a way to reference code in other files
• Flow
• all the documentation appears to say it always needs to be babel-ized to be in browser
• running it, it complains like crazy about react 
• I added it as a package, most likely to try to get flow or one of these other systems working
• should the node react module be in the libs section of .flowconfig ?
• when not in the libs section, and .*/node_modules/.* is in the ignore, it doesn't seem to care, still reports errors in node_modules/React/lib/ReactChildren.js
• Whereas, I can use my jsx directly in browser via babel, I don't think I can do this with adding in flow-typing.
• which means I don't have to figure out or take on learning Watcherify or something else to auto-magically detect changes and recompile on the fly.
• aims at being an amazingly safe type system (vs TypeScript looking to strike a balance between safety and productivity) - see here
• TypeScript 
• I have no idea where to even start into this thing. It seems like a beast of changes to tackle to migrate anything into try it.
• The examples demonstrate how to use either node or Visual Studio. I'm using (and loving) VsCode for all my JavaScript and some of my F#.
• I suspect, were I to download the typings for react, my project (no TypeScript in it) would suddenly be able to design-time detect all kinds of problems.
• I have no idea if I could write my own typings files for my non-JavaScript somewhere that would help anything. Furthermore, when I go look at something called DefinitelyTyped it looks like you have to do a lot of installations, and then elsewhere on the web, it's semi-deprecated since there is (or will be?) auto-discovery
• React PropTypes
• Everywhere it says move to an NPM package. no indications what to do if you don't develop your JavaScript in node. 
• No sign, upon searching, of a CDN or other browser-capable file to help find method/object shape/type errors (which wouldn't happen until run time anyhow)
• Fable - oh my beloved F# - produces so-so JavaScript, always bundled up in webpack that also doesn't seem to appreciate not having everything bundled into their own module system.
• VsCode - oh so lovingly lightweight
• doesn't support an unknown percentage of the JsDoc syntax
• allows you to add ///<reference path="./x.extension"> but apparently only supports typescript files

This is at least partially a rant and venting

I have very little idea of what I'm talking about, having been stuck in a Wpf project for almost 2 years now. This is my way of categorizing and venting while trying to pick the flag back up. Also, a recounting of my experiences having been a cutting edge resource on near every coding-topic on every team I've ever been to now, feeling entirely lost trying to get a few features that seem almost entirely built-in to my IDE of choice for JavaScript. These are features I never even had a taste of before, and now it seems like I'm in instant withdrawals as soon as what I consider to be a near-critical feature is missing. (the features don't work if you aren't developing in node, aren't using webpack, are using AMD, etc..)

The topic

Very little of what I find that people recommend for usage explicitly appears to support JavaScript in browser. Node seems to have come up and choked out search results or the community or both from talking about in-browser or code that doesn't take a dependency in the entire codebase on a module system.

Run Chai based tests with PhantomJs

PhantomJs is installed at C:\Program Files (x86)\phantomjs-1.8.1-windows
then add it to the path
i had to put chai.js in the target directory of the phantom script which makes me sad, but perhaps I'll figure that out next.

at the command prompt:

C:\Projects\mine\phantomjs>phantomjs payerportal.js>phantomjs hellophantom.js

phantom.injectJs("chai.js");

var assert = chai.assert;
var pageToTest= 'http://localhost/helloworld/';
var url = pageToTest;
page.open(url, function(status) {
 try{
       assert.typeOf('test','string','test is a string');
       
      } catch(err) {console.log('Test failed:'+err);}
        
});

What did you do this weekend?

• Started some online classes
• Programming Languages
• Html5 Game Programming
• Microsoft's - Developing in HTML5 with JavaScript and CSS3 Jump Start
• Read about tons of javascript libraries/frameworks
• Game development stuffs
• MelonJs
• ImpactJs
• LimeJs
• Read about and applied some javascript unit testing
• In JasmineJs
• Did just a little Node.js in Cloud9 while saving to Github
• Did some JsonP against the World of Warcraft API
• Used Knockoutjs to consume that JsonP data
• made that knockout shape a table complete with filter columns that are dynamic based on the schema (shape) of the jsonp data coming in
• Wrote code that allows a text area on a web page to submit T4 and have it compile and transform into output using Asp.net Mvc, with some Mono
• Bought a domain to host this from
• Deployed to said domain
• Invited some developers over on friday to practice jQuery and then teach them KnockoutJs
• Pushed up an OrchardCms site for a local developer user group
• added OAuth logins for
• Windows Live
• Google
• Created a few Mvc Projects some of them using
• T4Mvc
• Ninject
• Web-based IDEs
• Used
• IDEOne
• JsFiddle.net
• Explored
• Cloud 9
• Drawter
• Started helping a friend explore the possibility of moving his business sites from using perl for everything towards letting perl just fetch and secure the data while html and knockoutjs serve/prettify it.

Well it's been quite a full weekend!

During the work week:

• Learned about WebAPI's IQueryable possibilities
• Found out they changed the ruling on Entity Framework
• We can now select straight into POCOs instead of only anonymous types or EF types
• Still can't find any articles, blog posts, or announcements about this change.
• Forced EF to allow me to do queries that span linked databases.
• Used Knockout to consume the OData (or WebApi IQueryable)
• complete with a user friendly search form
• Explored PhantomJs for headless browser automation and testing
• Updated my win forms tool for scraping data from our Stash and Crucible
• Explored some SpecFlow

What did you do?

CORS without preflight

I had some trouble getting a CORS request to fire without preflight I finally got it and here it is In raw javascript:

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "http://jira/rest/api/latest/issue/DEV-793", false);
  xmlhttp.send();
  //exception (as expected) for 401 response from that site
  document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

since the server is not responding with the proper response header the browser won't let me read the response for security reasons, but at least the send side is working currently. This also works for send (still has the issue with the browser blocking the response from the javascript:

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "http://jira/rest/api/latest/issue/DEV-793", false);
  xmlhttp.setRequestHeader("accept", "application/json");
  xmlhttp.send();
  document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

I can't get jQuery to do it in Chrome whatsoever. Posted a SO question. Perhaps this is the problem, a bug in chrome Also I've found that I don't need to muck with the server if I set the command line option for chrome `http://stackoverflow.com/a/13154327/57883`

Experimental Technologies

Before I lose track of all the things I've been touching in the last 6 months, I wanted to say something on the matter of each and keep track of where I've been and where I might want to go.

Mef - twice (both plug-in UI projects)

Vs2010 Add-ins -

1.  checks all project reference to ensure none are absolute paths, one that d
2.  ExtensionsProject for my team
1. parses all project files 
2. locates .config files
3. checks for config values to be in compliance with team standards
4. checks your projects' FileCodeModel to confirm the code meets other team standards
5. will remove some project file customizations temporarily, confirm it builds in release mode, then brings up the svn commit dialog
6. allows you to store compliance information on your modules/projects on the team for easy access.
3. used a pluggable UI by importing an Action or using the default built-in messagebox if no extension is found.

FxCop/Code-check-in-policies

1. Team policy reminder/enforcers
1. warn on calls to forbidden methods
1.  GC.Collect
2. GC.AddMemoryPressure
3. Messagebox.Show
2. warn if inheriting directly from Windows.Forms or Windows.Control
3. warn if a control or form subclass constructor does not call InitializeComponent()
4. warn if a control property is not set per team standards
1. DialogBorderStyle must be fixed
5. error if you do not override certain virtual properties (legacy need from vs2005 designer bug)
6. error if you have code that raises a NotImplementedException
7. warn if you don't have hungarian notation to name controls
8. warn if fields are not private
2. Policy to ensure a project does not call a Config value or index that does not exist.

Wpf

• Mef extension  UI
• Web data scraper/exporter
• datagrid context menu

Mvc

• Mvc 2
• Lots of projects 2 at work, many more at home
• Mvc 3
• Got 2/3 through a project and had to go back to MVC2 due to changing requirements, transfer went very well.

Dependency Injection

• Unity - Nice DI framework from Microsoft.
• Ninject - Very nice lightweight DI framework
• Poor Man's - Did manual DI for the longest time, so happy to have finally switched to learning Ninject and Unity

MSBuild Custom tasks

• Wrote a task that walks all found project files under a path and determines safe build DirectedAcylicGraphs
• Detects Circular dependencies/references
• walks project files in parallel
• Wrote a task on the ordering task that will generate a properly parallelizing and multi-threading MsBuild project file.

Parallelization/threading/async

• Rx - wrote a producer consumer where a consumer can produce additional items to be consumed
• PLinq - used in Rx producer consumer to parallelize the Rx search
• Async CTP - have not used it quite yet, but did attend the 2010 PDC broadcast

ORMs -

• Linq-2-Sql - lots of personal projects
• EF4 - now that I've used it, I actually like it much better than linq to sql

Javascript cross site script without Preflight / Cross Origin Resource Sharing - also Http Access Control

• Wrote javascript that uses jQuery in a bookmarklet to allow users to save data from a page on one site cross-domain into a private secured store in a db, with group sharing options, aka Cross Origin Sharing requests

Unit Testing - 

• TypeMock - excellent for brownfield applications and no design for testability compromises

I'm sure I've forgotten some and did not get to looking at the future of where I want to go, but it's quite a nice start.

Bookmarklet: Change the page title

So on some sites, when you get a new ajax message (think facebook, gmail, or maybe meebo) the new message indicator never goes away in the page title on your tabs. Also some titles aren't nearly as clear on your tabs as to what they are, so you can use this to set the title on your tabs to the domain of the page.


So this is what I've come up with as a nice bookmarklet to clear the title without having to reload the page.

javascript:void(function(){document.title=document.domain;}())

or if you like you can set it to document.location

Javascript tooling

So I've been working with Javascript for a week or two now. I still loathe it. However I would not probably touch it at all were it not for

• JQuery - Feels like a .net framework for javascript
• JQueryUi - Ah a (ightweight custom control library
• JQuerify - Inject jQuery onto pages that don't have it for making bookmarklets.

I've used Visual Studio 2010 Ultimate primarily for the script writing because of the code/syntax coloring and  built in (poor but still built in) {} () [] matching capabilities. Those aren't specific to Ultimate, or 2010 for all I know. 

For debugging scripts I've used

• FireBug
• Google Chrome's built-in developer tool bar (alot)
• JsBin - online javascript collaborative debugger (seemed slightly buggy, but still worth it)
• Javascript Lint - nice online static analyzer for syntax and other problems.

On top of those as base scripts to help with life

• qTip - Nice jQuery plugin  tool tip script for web pages
• Google's lovely api hosting content delivery network for jQuery, and jQueryUi.
• Sidenote: apparently resizable, and who knows what else required I also reference "http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"

ClickOnce Bookmarklets...maybe click twice

I have a set of bookmarklets that go to my website, and actually use the current version of the bookmarklet. So the bookmarklet on the bar is just a pointer to a script out on my site. So I can update the bookmarklets to my heart's content without the end user having to do anything at all. Unless I move where the bookmarklets live on my site. So if your bookmarklet living space can be more permanent here's the cross domain bookmarklet injection code:

var e=document.createElement('script');

e.setAttribute('language', 'javascript');

e.setAttribute('token', '@testToken');

e.setAttribute('src', 'http://imaginarydevelopment.com/Sfc/Scripts/ClientScripts/AjaxXmlHttp.js');

document.body.appendChild(e);void(0);

Notice the token code. That makes it so that in the child script I can pull in which user it is, and make posts to that user's account directly.

Collapsible javascript

I believe this should work with all browsers when added to the onClick handler of what you want to trigger it. Set the div, span, etc. to have an initial display of one of the two for a fresh page load. Also I selected inline, your application may prefer block for some parts.

<script type="text/javascript">

    function ShowHide(id) {

    var elementStyle=document.getElementById(id).style

    elementStyle.display = elementStyle.display == "inline" ? "none" : "inline";

}

Example:

<h2>

<span onclick="ShowHide('SessionVarHider');">Session</span><span style="display:none" id="SessionVarHider"> -

</h2>


  <ul id="sessionVars">

      <!--<li><a href="#">Aliquam libero</a></li>-->

      <%= SessionVariableList() %>

  </ul>

  </span>