We Keep Coding

Why don't web workers work?

So, I'm trying to use a web worker in my project to run a long-running process that is currently tying up the UI. I've been to I don't know how many sites trying to get a worker to work, but to no avail.
All of my javascript is kept in separate files and referenced in the HTML file. As a test to get my feet wet, I created a test.js file and put the following code in it:
self.addEventListener('message', function(e) {
self.postMessage('return');},false);
Then, in the UI page's javascript file I placed this code in a function triggered by a button click event:
var w = new Worker('test.js');
w.addEventListener('message',function(e){
alert(e.data);},false);
w.postMessage('hi');
The code is derived from:
html5rocks.com/en/tutorials/workers/basics
Other websites I visited provided similar instructions on how to set up a worker.
For the life of me, I cannot get this to work. When I execute it does absolutely nothing and I seemingly get no errors. Stepping through the code, it appears to create the worker, but I don't see any evidence of the event listener being created and the 'postMessage' event doesn't do anything. I've tried IE11 and Chrome with the same results.
In my research, I came across a part of Chrome's developer tools that revealed the test.js file couldn't be found. Yet, the file is in the same folder as the page's js file. So, I tried adding in the relative directory information as I do in the page's HTML section. That didn't work either.
I then found claims that for security reasons you couldn't have one js file reference another js in the code. It's unclear whether this is a Chrome-only feature or part of some spec.
So, now I'm in a quandary. The worker requires a reference to a separate js file for the code to be executed, yet, the browser isn't allowed to reference another file? How is the worker supposed to work if you aren't allowed to do what it requires to work?
To now, I've successfully pissed away two days trying to get this one seemingly simple function to work. To say I'm mildly frustrated would be an understatement. Being a fairly novice programmer and not understanding every last little nuance about web programming I'm clearly missing a key part of this whole thing.
How the heck is one supposed to make web workers work?

Turns out browsers won't allow local files to be fetched via javascript. Because that means a website can read your personal files! So you need to develop and test your project using a web server. The easiest way to do this for me was to install:
docker-compose
and make sure it works. Then create a file named:
docker-compose.yml
inside root folder of my project with index.html file. Then put this inside the docker-compose.yml file:
version: '3'
services:
nginx:
image: nginx:alpine
volumes:
- .:/usr/share/nginx/html
ports:
- "80:80"
Then inside the root folder of my project run:
docker-compose up
And then in the browser go to:
http://localhost/
And it worked!

I appear to have found a solution, though it escapes me why.
If I use:
var w = new Worker('js\test.js');
the worker doesn't work.
But, if I use:
var w = new Worker('js/test.js');
the worker does work.
I characteristically use the back slash throughout the project to delineate paths without issue. Why the forward slash must be used to set the worker's file location is a mystery. I have seen nothing in any documentation that even remotely addresses that tiny, yet seemingly critical detail.
Thank you, Mr. Starke, for your help!

TypeScript use typescript-require shared files

I use TypeScript to code my javascript file with Object Oriented Programing.
I want to use the node module https://npmjs.org/package/typescript-require to require my .ts files from other files.
I want to share my files in both server and client side. (Browser) And that's very important. Note that the folder /shared/ doesn't mean shared between client and server but between Game server and Web server. I use pomelo.js as framework, that's why.
For the moment I'm not using (successfully) the typescript-require library.
I do like that:
shared/lib/message.js
var Message = require('./../classes/Message');
module.exports = {
getNewInstance: function(message, data, status){
console.log(requireTs);// Global typescript-require instance
console.log(Message);
return new Message(message, data, status);
}
};
This file need the Message.js to create new instances.
shared/classes/Message.ts
class Message{
// Big stuff
}
try{
module.exports = Message;
}catch(e){}
At the end of the fil I add this try/catch to add the class to the module.exports if it exists. (It works, but it's not really a good way to do it, I would like to do better)
If I load the file from the browser, the module.export won't exists.
So, what I did above is working. Now if I try to use the typescript-require module, I'll change some things:
shared/lib/message.js
var Message = requireTs('./../classes/Message.ts');
I use requireTs instead of require, it's a global var. I precise I'm using .ts file.
shared/classes/Message.ts
export class Message{
// Big stuff
}
// remove the compatibility script at the end
Now, if I try like this and if I take a look to the console server, I get requireTs is object and Message is undefined in shared/lib/message.js.
I get the same if I don't use the export keyword in Message.ts. Even if I use my little script at the end I get always an error.
But there is more, I have another class name ValidatorMessage.ts which extends Message.ts, it's not working if I use the export keyword...
Did I did something wrong? I tried several other things but nothing is working, looks like the typescript-require is not able to require .ts files.
Thank you for your help.

Looking at the typescript-require library, I see it hasn't been updated for 9 months. As it includes the lib.d.ts typing central to TypeScript (and the node.d.ts typing), and as these have progressed greatly in the past 9 months (along with needed changes due to language updates), it's probably not compatible with the latest TypeScript releases (just my assumption, I may be wrong).
Sharing modules between Node and the browser is not easy with TypeScript, as they both use very different module systems (CommonJS in Node, and typically something like RequireJS in the browser). TypeScript emits code for one or the other, depending on the --module switch given. (Note: There is a Universal Module Definition (UMD) pattern some folks use, but TypeScript doesn't support this directly).
What goals exactly are you trying to achieve, and I may be able to offer some guidance.

I am doing the same and keep having issues whichever way I try to do things... The main problems for me are:
I write my typescript as namespaces and components, so there is no export module with multiple file compilation you have to do a hack to add some _exporter.ts at the end to add the export for your library-output.js to be importable as a module, this would require something like:
module.exports.MyRootNamespace = MyRootNamespace
If you do the above it works, however then you get the issue of when you need to reference classes from other modules (such as MyRootNamespace1.SomeClass being referenced by MyRootNamespace2.SomeOtherClass) you can reference it but then it will compile it into your library-output2.js file so you end up having duplicates of classes if you are trying to re-use typescript across multiple compiled targets (like how you would have 1 solution in VS and multiple projects which have their own dll outputs)
Assuming you are not happy with hacking the exports and/or duplicating your references then you can just import them into the global scope, which is a hack but works... however then when you decide you want to test your code (using whatever nodejs testing framework) you will need to mock out certain things, and as the dependencies for your components may not be included via a require() call (and your module may depend upon node_modules which are not really usable with global scope hacking) and this then makes it difficult to satisfy dependencies and mock certain ones, its like an all or nothing sort of approach.
Finally you can try to mitigate all these problems by using a typescript framework such as appex which allows you to run your typescript directly rather than the compile into js first, and while it seems very good up front it is VERY hard to debug compilation errors, this is currently my preferred way but I have an issue where my typescript compiles fine via tsc, but just blows up with a max stack size exception on appex, and I am at the mercy of the project maintainer to fix this (I was not able to find the underlying issue). There are also not many of these sort of projects out there however they make the issue of compiling at module level/file level etc a moot point.
Ultimately I have had nothing but problems trying to wrestle with Typescript to get it to work in a way which is maintainable and testable. I also am trying to re-use some of the typescript components on the clientside however if you go down the npm hack route to get your modules included you then have to make sure your client side uses a require compatible resource/package loader. As much as I would love to just use typescript on my client and my server projects, it just does not seem to want to work in a nice way.

Solution here:
Inheritance TypeScript with exported class and modules
Finally I don't use require-typescript but typescript.api instead, it works well. (You have to load lib.d.ts if you use it, else you'll get some errors on the console.
I don't have a solution to have the script on the browser yet. (Because of export keyword I have some errors client side) I think add a exports global var to avoid errors like this.
Thank you for your help Bill.

WebKit JS bindings: step by step how to

I have to admit I'm new to WebKit so asking the right question is not that easy.
What I have is the WebKit from WebKit.org. It updates, builds, I can debug - I got it working on Windows.
What I'm interested in is how to generate the stub files for some IDL files that I have. I understand the high level picture:
Write the interfaces using the IDL language
Generate stub files (.h & .cpp files).
Add your code in the previously generated stub files.
I've specified my IDL files in "WebCore.gypi". I've specified then the path to my IDL files in "WebCore.gyp". Apparently this is not enough as building the WebKit doesn't generate the stub files for my IDL files.
I've suspected at one point that maybe my IDL files contain undefined attributes but everything seems fine.
Any tips? Also, do you know of any explicit "How to"?
Thanks!
Edit 130206:
I dug some more and apparently WebKit interacts with several build systems; for example GYP is for Chromium. I honestly didn't expect that complication so I didn't mention I needed to generate binding for Safari which has a different build system and as such its own unique "how to".
So, the question would now be, how does the Safari build system work? Where do I need to place my IDL files? Thanks!

Well, I can tell you what helped me. Unfortunately I still couldn't find any documentation so a lot of trial and error was involved.
If you want to generate JS bindings for Safari you have to:
Modify 'DerivedSources.make'.
Make sure your IDL files are correct.
'DerivedSources.make' can be found in '\WebKit\Source\WebCore\'. Inside this make file you have to specify the following:
The path to your folder (containing the IDL files) in 'VPATH'.
Each and all of your IDL files in 'BINDINGS_IDLS'.
Again the path to your folder in 'IDL_INCLUDES'.
Build WebKit. If after this step you still can't see your JSXXX.h and JSXXX.cpp files (genererated for each XXX.IDL file) than you have to check your IDL files.
In my case nothing was generated after the build step and I got an error like this:
6>Next token should be implements, but MyModule at module MyModule {
6> IDLParser.pm:750 at /WebKit/Source/WebCore/bindings/scripts//IDLParser.pm line 129.
6> in /WebKit/Source/WebCore/MyFolder/XXX.idl at /WebKit/Source/WebCore/bindings/scripts//IDLParser.pm line 173.
6>/WebKit/Source/WebCore/DerivedSources.make:1024: recipe for target `XXX.h' failed
6>make: * [XXX.h] Error 255
The problem was that each of the IDL interfaces where enclosed in a module (namespace) called MyModule as you can see above. I've removed all this modules (keeping the interfaces of course) and at the next build everything was generated just fine. Using your own module name seems to not be as straight-forward as enclosing the IDL interfaces with it; most probably you'd be forced to write custom bindings to accomplish this (which is not recommended by the WebKit team).
So that was it for me, hope it's also helpful to you.

How do I include the CLDR.js library in my Ember application?

I'm building an Ember application which started using the ember-skeleton (which means I'm using Rake Pipeline as my build toolchain). I'm using ember-i18n, and that constantly throws warnings about not having the CLDR.pluralForm function.
I've added the CLDR plural functions which ember-i18n uses to the app/vendor/ directory and added that file to my Assetfile. I've verified that the code is included in my app.js before the ember-i18n code. I've also added the appropriate require lines in my main.js:
require('plurals');
require('ember-i18n');
Still, ember-i18n is giving warnings. This is the code where it's happening:
if (typeof CLDR !== "undefined" && CLDR !== null) {
pluralForm = CLDR.pluralForm;
}
if (pluralForm == null) {
Ember.Logger.warn("CLDR.pluralForm not found. Em.I18n will not support count-based inflection.");
}
How do I make sure CLDR is defined in my app?

Because no-one else has, I will suggest a few things I might look at if I were debugging the problem myself.
If the message you see in your site is the same as in the fiddler, it is due to the files just load out of order. Pretty much "plural" must load before the "i18n" plugin. If you flip the order of the linked files it will work (I forked the error-ing example).
I would try validating I am wrong by throwing some debugger; statements into each file to see which actually gets loaded first on the browser.
Because of your require('plurals') I am going to assume you are using requirejs (github is down for maintenance so I can't actually examine ember-skeleton at the moment... so this might get an edit in the future). If this assertion is true, you need to declare that 'plurals' is a dependency of 'i18n'.
"If you do not express the dependencies, you will likely get loading errors since RequireJS loads scripts asynchronously and out of order for speed." - RequireJS API
This means you probably will end up wrapping the two calls into one, adding a define or making a "shim"; these (and more) examples can be found on the RequireJS site.
Sorry if this does not help you but without seeing it actually broken; it is hard for me to debug the problem.
EDIT: Looking at the ember-skeleton, I don't see requireJS. I have never used rake (we ended up writing our pipeline in nodeJS) so I am not quite sure if you were actually trying to concat the files with require "blaw" in rake or if you actually trying to use both.... So now I assume this answer might not be super helpful.

Why does html5 boilerplate use Twipsy and Prototype when it builds jQuery code?

So I just finished writing a single page with html5 boilerplate and everything is find with the dev code (the original one I just finished writing). Google Chrome and Firefox love it and display it well.
So I use the ant script ( ant build or ant text to skip jpeg/png optimization ) and browse to /publish/ to view it. And I got a javascript error :
Uncaught TypeError: Cannot read property 'Twipsy' of undefined
But the fact is I never used Twipsy or prototype, just jQuery ... so I run a javascript debug console and see in the generated javascript file a reference to Twipsy and Prototype. But I never use any of those in my code. So what's wrong ? and what can I do ?

Html5Boilerplate use a kind of very strong cache which actually keep the files you already delete in your project and always inline / include it in future build. You must delete publish and intermediate forlder to kepp your builder up to date.