background preloader


Facebook Twitter

Learnable Programming. Here's a trick question: How do we get people to understand programming?

Learnable Programming

Khan Academy recently launched an online environment for learning to program. It offers a set of tutorials based on the JavaScript and Processing languages, and features a "live coding" environment, where the program's output updates as the programmer types. Because my work was cited as an inspiration for the Khan system, I felt I should respond with two thoughts about learning: Programming is a way of thinking, not a rote skill.

Learning about "for" loops is not learning to program, any more than learning about pencils is learning to draw.People understand what they can see. Thus, the goals of a programming system should be: to support and encourage powerful ways of thinkingto enable programmers to see and understand the execution of their programs A live-coding Processing environment addresses neither of these goals. Alan Perlis wrote, "To understand a program, you must become both the machine and the program. " 128b. Web Toolkit Overview - Google Web Toolkit. GWT is a development toolkit for building and optimizing complex browser-based applications.

Web Toolkit Overview - Google Web Toolkit

Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. GWT is used by many products at Google, including AdWords, AdSense, Flights, Hotel Finder, Offers, Wallet, Blogger. It's open source, completely free, and used by thousands of developers around the world. What's inside the toolbox? Developing with GWT Write The GWT SDK provides a set of core Java APIs and Widgets. Constructing AJAX applications in this manner is more productive thanks to a higher level of abstraction on top of common concepts like DOM manipulation and XHR communication.

You aren't limited to pre-canned widgets either. Debug You can debug AJAX applications in your favorite IDE just like you would a desktop application, and in your favorite browser just like you would if you were coding JavaScript. Optimize Run. Smart GWT Showcase. Jumpstart Your jQuery Plugin Development. Front End Development Guidelines. Accessibility What's Up, DOCTYPE?

Front End Development Guidelines

The absence of a DOCTYPE is a crime punishable by death. You may have relied on the following DOCTYPE in the past, but it's important to know that this is now being superseded by a leaner and meaner snippet. Ideally, the HTML5 DOCTYPE should be used. It's supported in all modern browsers, and throws IE6 and IE7 into standards mode. Write Valid Semantic Markup Writing websites with clean, semantic HTML is something we wish we could always do. Headings should be heirarchically created from <h2>onwards, paragraphs should always be in <p> tags and so on and so forth. Which do you think looks cleaner, this? <span class="sectionHeading">A Heading</span><br /><br /> Lorem ipsum dolor sit amet. ...

Or this? <h2>A Heading</h2><p> Lorem ipsum dolor sit amet. ... Fallbacks for Middle Mouse Clicks One of the most frustrating accessibility and usability flaws of the modern web stems from the remapping of hyperlink click functions. Edit this Fiddle. Google Powered Site Search with jQuery. Martin Angelov By far one of the most requested features by Tutorialzine’s readers, is building a site-wide search.

Google Powered Site Search with jQuery

One way to do it, is to build it yourself from the ground up. That is, to use a server-side language like PHP and run search queries on your database, displaying the results to the user. Another way is to use the services of the one search engine that already knows everything about everyone. Yep, you guessed it. The HTML Lets start with the HTML markup. Search.html <! In the body section, we have the main container element – the #page div. Inside the form is the text input box, after which comes the radio group for searching on the current site / the web, and the four search type icons, organized as an unordered list. Google Powered Site Search The CSS The CSS styles reside in styles.css. Styles.css – Part 1 As mentioned above, the form’s functions are not limited to only submitting data, but also to act as a regular container element. Styles.css – Part 2 styles.css – Part 3.

How to create Calendar using jQuery and CSS3 [Tutorial] Topic: jQuery & CSS3Difficulty: IntermediateEstimated Completion Time: 30 mins In this tutorial we will code the jQuery and CSS3 Calendar that you can find in Futurico UI Pro made by Vladimir Kudinov.

How to create Calendar using jQuery and CSS3 [Tutorial]

To do it we will use CSS for all the styling and for “functionality” we will use jQuery and jQuery UI. From jQuery UI we will only use the “Datepicker” script. So you don’t have to download all the components available in jQuery UI and the file size will be lower. Step 1 – HTML Markup To create the calendar we only need to add a div tag with an id.

Then before the body closing tag we need to add the jQuery and the jQuery UI script. We also need to call the “datepicker”, so you need to use the same id that you’ve used on the div. Step 2 – Container.