Editing strings by index maybe something that we don’t do all the time. But it’s one of these things that, coming from languages like C, one would assume is as trivial as assigning the value of an indexed position. Something like this:
-
var a = "hello world"
-
a[0] = "H"
-
console.log(a) // outputs "hello world"
Go ahead and paste that code in your favorite javascript console. You would expect the output to be “Hello there”, but it is not.
Same goes with Python, check this code:
-
>>> a = "hello world"
-
>>> a[0] = "H"
-
Traceback (most recent call last):
-
File "<stdin>", line 1, in <module>
-
TypeError: 'str' object does not support item assignment
-
>>> a[0] = 'H'
-
Traceback (most recent call last):
-
File "<stdin>", line 1, in <module>
-
TypeError: 'str' object does not support item assignment
This is because strings are read only and cannot be modified at all. Only replaced with new strings.
The solution: convert to array and back to string
There may be other solutions out there, I’m sure, but this is the solution I use: Both in Python and Javascript, a string can be converted into an array or list of characters (actually, list of strings). Then we can modify values by index and finally join the output into a new string.
Javascript:
-
var a = "hello world"
-
a = a.split("")
-
a[0] = "H"
-
a = a.join("")
-
console.log(a) // outputs "Hello world"
Python:
-
>>> a = "hello world"
-
>>> a = list(a)
-
>>> a[0] = "H"
-
>>> a = "".join(a)
-
>>> a
-
'Hello world'
It’s interesting to see how the syntax for joining arrays into strings is totally the opposite in Javascript and Python. In Javascript, join() is a function of the Array object while in Python join() is a function of the string class.
In the other hand, split() is a method of the String object in Javascript. There is a split() function on the string class in Python, but it cannot be used to split strings without a specific separator. The list() function/constructor does the trick.
If you are working with the latest version of Google Chrome (6.0.442.0) and you have been doing some testing or projects with WebSockets you may have already noticed there has been a change in the WebSockets specification for the client/server handshake protocol.
More info about the change:
http://webreflection.blogspot.com/2010/06/websocket-handshake-76-simplified.html
http://blog.chromium.org/2010/06/websocket-protocol-updated.html
A couple of weeks ago, Tim and I worked on a little game/demo using WebSockets and C# (I haven’t been able to put it online since I do not have a Windows server). It was a lot of fun and we were able to see the potential of WebSockets and how much internet can will change in the next few years because of them.
Today I spent a couple of hours researching and implementing a WebSocket solution that I could run in my linux servers, and I found this very nice tutorial for creating a Python WebSockets server: http://yz.mit.edu/wp/web-sockets-tutorial-with-simple-python-server/
So I took that code and modified to create a very, very basic chat, that broadcasts received messages to all connected clients. You can try it here (as long as the python server is still up): http://enekoalonso.com/research/html5/websockets/python/
Here is the client code:
-
var form = document.getElementById('form');
-
var msg = document.getElementById('msg');
-
var output = document.getElementById('serveroutput');
-
-
var s = new WebSocket("ws://"+window.location.hostname+":9876/");
-
s.onopen = function(e) {
-
console.log("opened");
-
out('Connected.');
-
}
-
s.onclose = function(e) {
-
console.log("closed");
-
out('Connection closed.');
-
}
-
s.onmessage = function(e) {
-
console.log("got: " + e.data);
-
out(e.data);
-
}
-
-
form.onsubmit = function(e) {
-
e.preventDefault();
-
msg.value = '';
-
window.scrollTop = window.scrollHeight;
-
}
-
-
function sendMsg() {
-
s.send(msg.value);
-
}
-
-
function out(text) {
-
var el = document.createElement('p');
-
el.innerHTML = text;
-
output.appendChild(el);
-
}
-
-
msg.focus();
And the server code:
-
#!/usr/bin/env python
-
-
import socket, threading
-
-
# httphost = "localhost:8888"
-
# sockethost = "localhost:9876"
-
httphost = "enekoalonso.com"
-
sockethost = "enekoalonso.com:9876"
-
-
def handle(s, addr):
-
handsake = "HTTP/1.1 101 Web Socket Protocol Handshake\r\nUpgrade: WebSocket\r\nConnection: Upgrade\r\nWebSocket-Origin: http://%s\r\nWebSocket-Location: ws://%s/\r\nWebSocket-Protocol: sample\r\n\r\n" % (httphost, sockethost)
-
s.send(handsake)
-
data = s.recv(1024)
-
lock = threading.Lock()
-
-
while 1:
-
data = s.recv(1024)
-
if not data: break
-
print 'Data from', addr, ':', data
-
lock.acquire()
-
[conn.send(data) for conn in clients]
-
lock.release()
-
-
print 'Client closed:', addr
-
lock.acquire()
-
clients.remove(s)
-
lock.release()
-
s.close()
-
-
def start_server():
-
s = socket.socket()
-
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
-
s.bind(('', 9876))
-
s.listen(1)
-
while 1:
-
conn, addr = s.accept()
-
print 'Connected by', addr
-
clients.append(conn)
-
threading.Thread(target = handle, args = (conn,addr)).start()
-
-
clients = []
-
start_server()
Check the live demo (be aware WebSockets are only supported by Google Chrome right now): http://enekoalonso.com/research/html5/websockets/python/
Open a few tabs and send some text. You should see it appearing in all of them. It will also work if you open the page in multiple browser windows or even if you open the page in different computers.
I just read this on an email from a Google’s Closure developer:
Adding runtime checks for invalid usage is something we have policy against. It adds to the code size as well as to the runtime cost.
I totally agree. Developers should be responsible for their usage of APIs or third party libraries, while these should focus on working as efficient as possible given the correct parameters. Being Javascript a non-strongly-typed language, checking the parameters passed to every function are right at runtime would be a huge overkill.
Great news. Google will be sponsoring a dinner for all Spanish developers at Google IO 2010:
http://programa-con-google.blogspot.com/2010/05/vienes-al-google-i0.html
We will be driving from SLO on Tuesday afternoon, but I’m not sure we would get there by 8pm. I really hope I can make it!
Somebody at work passed this article about an interesting vulnerability in web APIs that use JSON.
The exploit combines Cross Site Request Forgery (CSRF) with a JSON Array hack allowing an evil site to grab sensitive user data from an unsuspecting user. The hack involves redefining the Array constructor, which is totally legal in Javascript.
http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx
I’ve found a while ago that you can put pretty much any URL on a script tag and the browser will download the content right away, whether it’s javascript or not, as long as the type attribute in the tag is set to ‘text/javascript’. But although browsers download the URL content and place it inside the script tag, you can’t get to the content from Javascript (using innerHTML, for instance). Or can you? Apparently, Firebug can, at least on the HTML tab. I’m not sure if Firebug has direct access to the DOM, other than through Javascript, but I hope that is the case.
Today we have a Tech Meeting at LEVEL Studios and I’ll be doing a quick demo of some tools we have been using in our current project, to help during our development:
- Using Closure Compiler to detect Javascript syntax errors and remove warnings.
- Using QUnit to test a REST api
- The power of WebSockets and how the way browsers and servers interact with each other will change in the future.
Today I spent some time with Tim at work, playing with WebSockets, a new HTML5 feature that only Google Chrome supports so far. WebSockets allow browsers to create and maintain open direct TCP connections to the server, allowing instant communication in both directions. This means that ajax polling is no longer needed to get updates from the server. Instead, the server can send a message directly to the browser at any point in time while the connection is open. Awesome!
Since we are currently working on a C# .Net project, we searched Internet and found this very cool example that we took as a base for a little multiuser game we were working on today: WebSocket Chat
The potential of WebSockets is incredible, specially for online games and multiuser applications.
Mooml 1.1 was the first version of Mooml that didn’t rely on eval(), a javascript function that causes lot’s of problems when not used properly, but that also prevent minimizers and compilers like Closure to generate valid code.
The new Mooml 1.2.3 release also gets rid of with(), which will no longer be used to render Mooml templates. Instead, templates are prepared when they get registered, so all template tag functions (div(), span(), p()) get replaced by calls to the Mooml engine. Although this means there will be a performance hit when registering templates, it also means templates will render faster. As a plus, template parameter names will no longer conflict with template tag function names. Thus, you can now have a template with a parameter named ‘div’ and the template wont fail rendering.
Download: http://mootools.net/forge/p/mooml
Source: http://github.com/eneko/mooml