Javascript/AJAX

Archived Posts from this Category

Sun 6 Jun 2010

Texas Javascript Conference

Posted by nola under Javascript/AJAX, open source
1 Comment

Yesterday I went to the Texas Javascript conference! Its was held in Austin, TX. I had bought the ticket probably about 3 months ago. In part, I wanted to learn more javascript and I wanted to check out Austin. Now, through a series of events, I have moved to Austin from Chicago recently. I really like the smaller local conferences, I’ve really liked attending Windy City Rails in Chicago and the YAPC (Perl) when we had it in Chicago.

There were 2 tracks of speakers and one track of impromptu talks/discussions in a third room. It was sometimes hard to choose, but here’s what I attended:

Douglas Crockford: Really, JavaScript?
I really liked this talk, he spoke very frank about the language and highlighted the good parts and bad parts. ECMAScript5 was passed and he said most people working on the language have never used it. He went over parts of the language explaining what is new. He said “Mashups are the most interesting thing in decades, taking components and wiring them together for the benefit of the user” ..which he followed with “A Mashup is a self inflicting XSS attack.” XSS attacks were first invented in 1995 and we have made no progress in 14 yrs to solve it. He talked about HTML5, stating that its a big step in the wrong direction. Its not correcting the problem. He recommends scrapping it and starting over, its terrible for security. It increased the attack surface and gives attackers new modes of attack, such as access to local database and inter-process communication. His final slide was “IE6 MUST DIE” in huge letters. Several people including myself snapped a photo. He said IE6 won’t die because we keep supporting it and coding around its flaws. He doesn’t think its unreasonable to ask people to update their software once a decade! So this talk was very informative and had some funny parts.

John Resig: JavaScript on the Mobile Web
I expected this to be more of how to make your javascript run on mobile phones, but it was an overview of all the platforms that are used and which ones have what browsers. He graded all the phones and their browsers with A, B or C scale. Some have very good emulators but some things are hard to test in an emulator, like interactions with the touch screen. That was pretty interesting…and now I know I need to spend about 5k to have all the phones I need to test on :)

Joe McCann: Rapid Prototyping with JavaScript
I watched this for about 25 mins, wasn’t sure its usefulness to me. So I went to Dan Webs talk.

Dan Webb: Building @anywhere: A Client-side Interface to Twitter
I walked in as he was talking about how twitter does communication when you give a site access to your login. It was pretty interesting. I wish I had seen all of this talk.

Paul Irish: 10 Things I Learned from the jQuery Source
I debated between going to “Eugene Lazutkin: Dojo for Programmers” because I think I know more about jQuery than Dojo, but since I don’t plan on doing Dojo at work, I decided to check out Paul Irish. I really like him on the yayQuery Podcast and his blogs. He gave a great presentation and it was my favorite of the day! He basically talked about javascript and looked up things in the jQuery source and explained what the javascript was doing. He was pretty funny and I really enjoyed it. I tried taking notes, but it was pretty fascinating to watch him code.

Alex Sexton: Breaking The Cross Domain Barrier
Another person from the yayQuery Podcast. He talked about different ways to get around the cross domain barrier. It was interesting, many things are new since I last did alot of javascript where I needed to load from another domain. He was pretty funny too.

Tom Hughes-Croucher: JavaScript Everywhere! Creating a 100% JavaScript web stack
I meant to go to this talk, but was in the hall talking to a guy from Facebook, swapping stories of working for Facebook vs Google and how I use facebook. I also talked to Jason Huggins a bit, creator of Selenium. I knew him from Chicago and we chatted about what was going on in Chicago and caught up a bit… and talked about testing. We share some of the same opinions and it was great to catch up.

Jason Huggins: JavaScript Frameworks & Functional Testing
This Jason leading a discussion with the creators of jQuery, Dojo and extJS talking about how we can standardize a way to test. It was pretty interesting, but they ran out of time.

JavaScript Tim Caswell: Writing a real-time game with NodeJS
I have looked at nodejs few times but never tried it. Now, I am going to have to try it. The speaker was very good and it was interesting.

Kyle Simpson: Web Performance & UI Architecture
I didn’t find this too interesting nor the other talk, so I basically talked to a few people in the lobby and headed home. Long day but I learned some cool stuff. :)

So, a great conference and made some new friends and saw some old ones! :)

 

Sat 31 Oct 2009

GWT 2.0: UiBinder, first look at simple example

Posted by nola under Javascript/AJAX, gwt, java, open source
[6] Comments

Note: as of right now, you can only get this feature in Trunk. see here for how to download the source and use it More Info on release

One of the great new features coming out of GWT 2.0 is UiBinder, a way to make a declarative UI without making tons of objects. Reminding you of swing? Yeah, I didn't sign up to be a Swing developer. I was sort of disturbed when I started doing gwt and was writing tons of java to just do simple HTML things.

Full Source

PLAIN TEXT
JAVA:
  1. CheckBox rubyCheck = new CheckBox("Ruby");
  2. rubyCheck.setFormValue("ruby");
  3. boxes.add(rubyCheck);
  4.  
  5. CheckBox pythonCheck = new CheckBox("Python");
  6. pythonCheck.setFormValue("python");
  7. boxes.add(pythonCheck);
  8.  
  9. CheckBox javaCheck = new CheckBox("Java");
  10. javaCheck.setFormValue("java");
  11. boxes.add(javaCheck);
  12.  
  13. CheckBox phpCheck = new CheckBox("PHP");
  14. phpCheck.setFormValue("php");
  15. boxes.add(phpCheck);
  16.  
  17. // set up panel
  18. Panel panel = new VerticalPanel();
  19. panel.add(new Label("Choose a language:"));

Compare to the UiBinder code:

PLAIN TEXT
XML:
  1. <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
  2.     xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  3.     <g:VerticalPanel>
  4.       <g:Label>Choose a language:</g:Label>
  5.       <g:CheckBox ui:field="rubyCheck" formValue="ruby">Ruby</g:CheckBox>
  6.       <g:CheckBox ui:field="pythonCheck" formValue="python">Python</g:CheckBox>
  7.       <g:CheckBox ui:field="javaCheck" formValue="java">Java</g:CheckBox>
  8.       <g:CheckBox ui:field="phpCheck" formValue="php">PHP</g:CheckBox>
  9.       <g:Button ui:field="button">Submit</g:Button>
  10.     </g:VerticalPanel>
  11. </ui:UiBinder>

It is somewhat like HTML, each item with attribute "ui:field=" is the reference to the object that gets created in Java. Here's the Java code that uses this:

Full Source

PLAIN TEXT
JAVA:
  1. public class LanguageList extends Composite {
  2.  
  3.   interface MyUiBinder extends UiBinder<Widget, LanguageList> {}
  4.   private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
  5.  
  6.   @UiField CheckBox rubyCheck;
  7.   @UiField CheckBox pythonCheck;
  8.   @UiField CheckBox javaCheck;
  9.   @UiField CheckBox phpCheck;
  10.   @UiField Button button;
  11.  
  12.   public LanguageList() {
  13.       // bind XML file of same name of this class to this class
  14.       initWidget(uiBinder.createAndBindUi(this));
  15.       
  16.       final ArrayList<CheckBox> boxes = new ArrayList<CheckBox>();
  17.       boxes.add(rubyCheck);
  18.       boxes.add(pythonCheck);
  19.       boxes.add(javaCheck);
  20.       boxes.add(phpCheck);
  21.   }

We still have to add them to the Array (which is use to display checked results) but doesn't that look so much better? And you are able to add the values of the checkboxes to the xml too.

When using UiBinder, make sure you add it as inherits to the xml for the module (i forgot at first and had errors with gwt trying to find UiBinder!)

I didn't do exactly one-to-one comparison between UiBinder and not, but i do have two complete gwt apps you can look at. I find it really helpful when learning something to look at complete apps rather than just snippits of code.

There is some documentation on Ui:Binder on Google Code, but at first I found it hard to follow since it doesn't say what files each piece goes in, it took me awhile to figure it out. Maybe its just me though. :)

Before UiBinder
After Ui Binder

Anyways, just a quick example that might help some people out there. I want to explore more about patterns in GWT and I'll write them up here.

 

Fri 15 Sep 2006

Dynamic Select Boxes

Posted by nola under Javascript/AJAX
[2] Comments

I need to have two select boxes. One with a major category, and once selected another one appears with sub categories.

For sake of example, say I have 8 major categories.

At first, I thought I'd just make 8 selects with the sub categories, and just hide/show the ones I didn't need or need. Fine .. but the form still sees them when you submit! so my subcategory name was getting overwritten by the hidden selects. No good.

I load my data into a javascript array, so I do the dyamic thing where I loop through the array and add options to the DOM. Fine .. works.

something like:

for (s in data) {
label = "       "+data[s][1];
$('sub_cat_select').options[i] = new Option(label, data[s][0]);
i++;
}

But -- my subcategoris are actually "tree like" and there are sub categories. With my hidden selects, in php I added & nbsp ; to create an "indent" which showed up fine. However, usin the dom, my & nbsp didn't work.. and neither did putting a real space.

I just find it weird that if I used php to print my option lists with the & nbsp ... it worked.. but then putting the & nbsp when doing the dom way it didn't work. Any suggestions on how to indent? next I am trying style sheets, but I think that will be a bit of a pain.

 

Fri 3 Mar 2006

View Rendered Source — for IE

Posted by nola under Javascript/AJAX
No Comments

IE was being a bad boy and I wasn't sure it was rendering my ajax correctly. I was wishing for a View Rendered Source like I have for FF. I searched, found but it didn't install right..and found 2 commercial ones. Ugh. I don't know if work would go for that.

The I thought.. hmm I could make a link "view source" (for when I need to debug) and have it grab the text of html, format... and make it display? hmm.. I was working on that then left for lunch.

Then I get to Panera bread for lunch and realize.. hmm wonder if I can make this a bookmarklet so I don't need to put tag in my page... then I thought.. hmm maybe there already exists one... so I search.. and found one! and it works... its not color coded like FF but it works:

http://javascript.about.com/library/blsource.htm

Yeah.

 

Thu 2 Mar 2006

Javascript Debugger extension out.. for FF 1.5

Posted by nola under Javascript/AJAX
No Comments

Found out last night from the DotProject IRC room that the newest Venkman, the Javascript debugger is out. I had to uninstall the old version manually then install this new one. Sweet. I was missing this...

In case you don't haven't used it, its an excellent tool for stepping through your Javascript and watching variables. Even tests ajax type things too! Another of my favorite extentions is FireBug which I use when I just want to see what XML requests are being called (ie. is this DERNED THING WORKING?!?!).

If you are really hard up for entertainment ... check out this person who installed 100 firefox extentions..

Am I missing out on any cool FF developer extentions??