Compile CoffeeScript in the browser with extras/coffee-script.js - coffeescript

I would like to create a simple demo page that compiles CoffeeScript in the browser with the extras/coffee-script.js. However, when I add this source and write my CoffeeScript within my text/coffeescript tags it is compiled in a closure so I don't have access to the CoffeeScript functions in the browser console.
In order to do so, I would need to do
<script type="text/coffeescript">
window.learning = ->
"I am learning coffeescript"
</script>
<script type="text/javascript" src="js/vendors/coffee-script.js"></script>
This is not ideal for my presentation. I would like to add the bare = true option so that I have access to the functions in browser console. Where in the extras/coffee-script.js do I add this option?
Here is the compiled js:
(function() {
window.learning = function() {
return "I am learning coffeescript";
};
})
I have this example.coffee:
learning = ->
"I am learning coffeescript"
Running the compiler from the command line with the following:
coffee -c --bare example.coffee
It is compiled to this example.js:
// Generated by CoffeeScript 1.6.2
var learning;
learning = function() {
return "I am learning coffeescript";
};
This will be globally available from the console.


The below code prints out to the console: I am learning coffeescript
Note: window.learning is available in the console on the global scope.
<html>
<body>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.1.2/coffee-script.min.js"></script>
<script type="text/coffeescript">
window.learning = ->
"I am learning coffeescript"
</script>
<script type="text/javascript">
setTimeout(function(){ console.log(window.learning()); }, 1000);
</script>
</body>
</html>


Where ever you call the CoffeeScript.compile function, you can pass in the --bare option, much like the command line:
CoffeeScript.compile(source, { bare: true });
If you look in the minified source, at the end you will see this:
CoffeeScript.run(a.innerHTML,s)
Where a is the <script> element, (so a.innerHTML is the source) and s is the options, which is then passed through run into compile:
CoffeeScript.run = function (e,t){return null==t&&(t={}),t.bare=!0,Function(compile(e,t))()}
As you can see, t.bare is set to !0 (aka true), so bare is already set!

Related

How do i properly install flask-socketIO?

I have installed multiple times Flask-socketio on my mac, closely reading the instructions and installing the requirements (eventlet/gevent). Athough when i run my simple code to test, it either says that i have not imported the modules or show nothing until i open index.html in my browser where it then displays :
The client is using an unsupported version of the Socket.IO or Engine.IO protocols (further occurrences of this error will be logged with level INFO)
Here is my app.py code:
from flask import Flask
from flask_socketio import SocketIO, send
app = Flask(__name__)
app.config['SECRET_KEY'] = 'hello'
socketio = SocketIO(app, cors_allowed_origins='*')
#socketio.on('message')
def handle(msg):
print("message: "+msg)
send(msg, bradcast=True)
if __name__ == '__main__':
socketio.run(app)
And here is my terminal window:
Here is my index.html code (if needed):
<html>
<head>
<title>Chat Room</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var socket = io.connect('http://127.0.0.1:5000');
socket.on('connect', function() {
socket.send('User has connected!');
});
socket.on('message', function(msg) {
$("#messages").append('<li>'+msg+'</li>');
console.log('Received message');
});
$('#sendbutton').on('click', function() {
socket.send($('#myMessage').val());
$('#myMessage').val('');
});
});
</script>
<ul id="messages"></ul>
<input type="text" id="myMessage">
<button id="sendbutton">Send</button>
</body>
</html>
Thank you for your help

Check the Flask-SocketIO docs for information about version compatibility.
You have installed Flask-SocketIO version 5, so you need version 3 of the JavaScript client, but you have 1.4.8.
Use this CDN URL instead for version 3.0.5: https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.5/socket.io.min.js

ad block script for adsense ads is not working

i use this script
<script type="text/javascript">
if(typeof(window.google_render_ad)=="undefined")
{
//document.getElementById('player-embed').innerHTML = '<center>text lablbabal)<br><img src=\"https://i.imgur.com/p7vHVHA.jpg\" /></center>';
}
</script>
but now is not working is blocking with or without adblock why??
and another script again is not working
<script type="text/javascript" src="http://domain/advert.js"></script>
<script type="text/javascript">
if (document.getElementById("tester") == undefined)
{
//document.getElementById('#disqus_thread').style.display = 'none';
document.getElementById('player-embed').innerHTML = '<center>text lalala<br><img src=\"https://i.imgur.com/p7vHVHA.jpg\" /></center>';
}
</script>
why is not working?? is the script wrong or what??

Sometimes adblock can inject false show_ads.js which could trigger a defined variable
window.google_render_ad == defined
so this is not a code issue but try BlockAdBlock they have good detection technology

instafeedjs doesn't work on my site

I'm trying to set up instafeedjs but it doesn't work.
script type="text/javascript" src="/instafeed.min.js"></script>
<script>
var feed = new Instafeed({
clientId: '377e47596dcf4fc284d36fe0098700ba',
useHttp: true
});
feed.run();
</script>

Please make sue the, you have done the following steps in your code.
Added a div tag with id "instafeed"
Mapped the instafeed.js library correctly.
Refer the code blog below for more info.
var feed = new Instafeed({
clientId: '377e47596dcf4fc284d36fe0098700ba',
useHttp: true
});
feed.run();
<script src="http://sriajith.info/wp-content/uploads/2015/05/instafeed.min_.js"></script>
<div id="instafeed"/>

Unable to Execute Jquery from sidebar in Addon Firefox SDK

I am new to this Firefox SDK , but what i have understood you can execute content Scripts on Pages.
Here is the Code
MAIN.JS
var tabs = require("sdk/tabs");
var data = require("sdk/self").data;
var sidebar = require("sdk/ui/sidebar").Sidebar({
id: 'my-sidebar',
title: 'My sidebar',
url: data.url("index.html"),
onReady: function (worker) {
worker.port.emit('turl',tabs.activeTab.url);
}
});
SIDEBAR.JS
$('#bt1').on('click',function(){
$('title').textContent;
});
INDEX.HTML
<!DOCTYPE HTML>
<html>
<body>
<input type="button" id="bt1" value="Click Me"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="sidebar.js"></script>
</body>
</html>
But this code tries to find out title of the Sidebar html.
I have also tried using contentScriptFile in Main.js but same thing happened
var tabs = require("sdk/tabs");
var data = require("sdk/self").data;
var sidebar = require("sdk/ui/sidebar").Sidebar({
id: 'my-sidebar',
title: 'My sidebar',
url: data.url("index.html"),
contentScriptFile: [data.url("jquery.min.js"),data.url("sidebar.js")],
onReady: function (worker) {
worker.port.emit('turl',tabs.activeTab.url);
}
});
The Jquery code is in the sidebar.js
Still no Results.Please help

There is no contentScriptFile for the Sidebar class.
Try this: copy the jquery library to a local file in the data folder, then refer to it using a relative path. Sidebars can only use 'local' JS, they cannot load scripts from the internet.

Use a "Coffee Script Class" instead of a Method as Angular JS ng-controller

I want to do something that I think will be a good way to use "Coffee Script Class" and Angular JS structures.
<!doctype html>
<html ng-app>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Main Test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/coffee.js"></script>
</head>
<body>
<div ng-controller="MainClass" style="margin-left:10px">
<h2>All todos: {{test()}}</h2>
</div>
</body>
</html>
Notice than I setup the DIV ng-controller as MainClass and binding test() method inside a H2 HTML tag.
class AngularJSController
constructor: ($scope, $main) ->
$scope.test = MainClass.prototype.test
MainClass.test = MainClass.prototype.test
$main.test = MainClass.prototype.test
test = MainClass.prototype.test
#test = MainClass.prototype.test
console.log #test
class MainClass extends AngularJSController
constructor: ($scope) ->
super $scope, this
setTimeout (->
console.log test()
), 1000
test();
test: -> 'aloha!'
In AngularJSController constructor I've tried all forms I imagined to setup my super class method TEST on MainClass scope without success.
I'm trying to do it because I want to work with classes just on my Angular JS controllers and components.
Problems I already fell:
If I try to use #test() instead of test() inside setTimeout, jQuery already replaced the this property with a kind of JQuery Window Object.
setTimeout (-> console.log #test()), 1000
I don't know what really the scope of test() calls, if a place this (or # cause Coffee), isn't the same of place anything.
test() != this.test() != #.test() # the first scope isn't the same scope of last two calls

I have used the following syntax:
app = angular.module 'myapp', []
class MySimpleCtrl
#$inject: ['$scope']
constructor: (#scope) ->
#scope.demo = 'demo value'
#scope.clearText = #clearText
clearText: =>
#scope.demo = ""
app.controller 'MySimpleCtrl', MySimpleCtrl
angular.bootstrap document, ['myapp']
Take a look at this jsFiddle:
http://jsfiddle.net/jwcMA/

Here's a generic approach with a base class:
http://www.devign.me/angular-dot-js-coffeescript-controller-base-class/
BaseCtrl.coffee
# dependency - Function.prototype.bind or underscore/lodash
app = angular.module 'someApp'
class #BaseCtrl
#register: (app, name) ->
name ?= #name || #toString().match(/function\s*(.*?)\(/)?[1]
app.controller name, #
#inject: (args...) ->
#$inject = args
constructor: (args...) ->
for key, index in #constructor.$inject
#[key] = args[index]
for key, fn of #constructor.prototype
continue unless typeof fn is 'function'
continue if key in ['constructor', 'initialize'] or key[0] is '_'
#$scope[key] = fn.bind?(#) || _.bind(fn, #)
#initialize?()
BookFormCtrl.coffee
app = angular.module 'someApp'
class BookFormCtrl extends BaseCtrl
#register app
# list of dependencies to be injected
# each will be glued to the instance of the controller as a property
# e.g. #$scope, #Book
#inject '$scope', 'Book'
# initialize the controller
initialize: ->
#$scope.book =
title: "Hello"
# automatically glued to the scope, with the controller instance as the context/this
# so usable as <form ng-submit="submit()">
# methods that start with an underscore are considered as private and won't be glued
submit: ->
#Book.post(#$scope.book).then =>
#$scope.book.title = ""

setTimeout isn't related in any way to jQuery, but function passed to setTimeout is indeed executed in the global(window) context. Use fat arrow to explicitly bind it to the current scope.
http://coffeescript.org/#fat_arrow
setTimeout (=>
console.log #test()
), 1000
Sorry, I'm not sure what are you asking about.

Angular does supports Coffescript classes!, for the most part.
I've found issues with using RequireJs, expecting a function instead of an object.
take a look here :
http://softwareninjaneer.com/blog/writing-angularjs-controllers-coffeescript-classes/

I didn't have luck with #malix's answer although it did lead me to a solution that works. Here's how I'm doing mine:
'use strict'
class ImportsCtrl
constructor: ($scope, Import) ->
Import.query().then (imports) -> $scope.imports = imports
angular.module("greatDealsApp").controller "ImportsCtrl", ImportsCtrl
And here's a contrived example of turning $scope into a property of ImportsCtrl:
'use strict'
class ImportsCtrl
constructor: ($scope, Import) ->
#scope = $scope
#Import = Import
#loadImports()
loadImports: =>
#Import.query().then (imports) => #scope.imports = imports
angular.module("greatDealsApp").controller "ImportsCtrl", ImportsCtrl
And I don't know for sure if this matters, but I'm using ng-annotate.

It's impossible. You can't set a controller as an object (MainClass), because AngularJS ensures that the controller is a function.
You need to customize AngularJS to do it. I think it's not a good idea.
References
https://github.com/angular/angular.js/blob/master/src/ng/controller.js
https://github.com/angular/angular.js/blob/master/src/Angular.js