Our very own Christian Heilmann has posted a tutorial on creating a fancy sticky note effect using CSS3 and HTML5:
He breaks it down in five easy steps to produce the final following demo:
Sep 07
If you’re working with mobile browsers tinySrc will dynamically scale your images down to the right size on the server side:
HTML:
http://i.tinysrc.mobi/http://mysite.com/myimage.png
To use, you simply prefix the URL to your image with a pointer to tinysrc:
HTML:
<img src=‘http://i.tinysrc.mobi/http://mysite.com/myimage.png’
alt=‘My image’
/>
alt=‘My image’
/>
tinySrc will then do the magic for you:
Unless you tell it otherwise, tinySrc will resize the image to fit the screen of the mobile handset visiting your site. For example, if an iPhone visits the site, the image will be constrained to its screen size of 320px x 480px.
In this particular case, the image is of landscape orientation, and width is the constraining dimension. Aspect ratios are always preserved by tinySrc, so our 640px by 400px image will emerge resized for an iPhone as 320px by 200px.
Sep 03
The Yahoo! YUI is an incredibly feature-rich JavaScript library with a LOT of functionality but getting your head around all of those features can be tough. The YUI team wants to help developers get up and running more quickly and announced yesterday the release of SimpleYUI; a basic and more streamlined version of the YUI library.
SimpleYUI will contain basic DOM access and manipulation including support for CSS 3 selectors in the selector engine, animations via the new transition module, the event system, Ajax and JSON support.
The great thing is that when you’re ready to leverage more advanced features like managed attributes and custom events, you still have the ability to do on-demand loading just like you’d expect from the full-featured version of YUI. This includes any YUI 2 or 3 component or YUI 3 Gallery module.
JAVASCRIPT:
<script type=“text/javascript” src=“http://yui.yahooapis.com/3.2.0pr2/build/quickyui/quickyui-min.js”></script>
<script>
Y.use(‘dd-drag’,‘yui2-datatable’, ‘gallery-accordion’, function(Y) {
// here you can use YUI 3 Drag and drop, YUI 2 DataTable, Accordian or any other control contributed to the gallery by the community
});
</script>
YUI team member Eric Miraglia put up a nice post about SimpleYUI which shows you some of the goodness include.
Apr 20
A few months back we announced an early build of Ares the full mobile development environment from Palm that runs entirely in the browser.
I was really excited to be at JSConf at the weekend where Matt McNulty announced Ares going 1.0 in our session. He promptly went on to do demos that show how easy it is to create mobile Web applications in the tool. You can follow one of these tutorials and Matt kindly put together a walkthrough of how easy it is to build a GPS enabled app in a few lines of code:
(Click here to see it larger).
If you tried Ares first time around, take another look. There are a lot of new features, and you can catch up all of what’s new. Really glad to see the flushing out of components and sensors, and after enjoying CSS layout for many years, I love what the Ares crew have done with layout.
Components:
- Ares now has Components, which are widgets that provide functionality, but without any user interface. The palette now contains the service calls, sensors, etc that are in the webOS SDK.
- Components can be drag-and-dropped onto the canvas, where they will show up as icons across the bottom of the screen. They can be selected and configured in the property inspector, and then called in a single line of code.
- Inline help – When a component is selected on the canvas or view tree, the last tab of the property inspector will show jsdoc-style inline help for that component, so you can see what you can call on each component.
- For example, you can drag out a camera component, and in the ontap handler of a button, type this.$.camera1.execute(); to launch the camera in your app!
- See the 1.0 tutorial to see how easy it is to create an app that connects to phone services using components.
Designer Ergonomics
- Undo and Redo in the interface builder!
- Cut, Copy, Paste in the interface builder!
- New shortcut buttons to swap between the designer and code assistant for a given scene
- Improved support for drag and drop between panels and at the top and bottom of the canvas
Find and Replace
- Find and replace within a file
- Find and replace within multiple projects, complete with filters for which projects
JSLint Integration
- JSLint feedback is now integrated into the code editor
- New JSLint "Monitor" feature will provide feedback on your code as you type continuously
And lots more…
- New FeedList widget for RSS feeds
- Google Maps v3 wrapper widget for including multi-touch enabled maps in your applications
- Left and right panels can be hidden/shown with a single click on their arrows
- Unified spot in the UI for Find and Replace, JSLint, Debugger, and Log Viewer
- Improved Debugger functionality, including viewing all variables in scope in a tree control, updated as you step through your code
- Code beautification in the code editor
- Lots of bug fixes
My favourite Tweet about Ares showed up yesterday:
What would you like to see in a tool that helps you build great mobile Web applications?
