Today we presents Collection of best Photoshop tutorials for July 2010.
Jul 28
Javascript author extraordinaire David Flanagan released Canto.js recently, a lightweight wrapper API for canvas, introduced here and documented at the top of the source code. Example:
JAVASCRIPT:
canto(“canvas_id”).moveTo(100,100).lineTo(200,200,100,200).closePath().stroke();
Notice three things:
- canto() returns an abstraction of the canvas – a “Canto” object.
- As with jQuery and similar libraries, there’s method chaining; each method called on a Canto also returns the Canto.
- lineTo() has been extended to support multiple lines being drawn in a single call.
Instead of setting the ink properties and then painting it, you can do it all in one step:
JAVASCRIPT:
canto(“canvas_id”).moveTo(100,100).lineTo(200,200,100,200).closePath().stroke({lineWidth: 15, strokeStyle: “red”});
And plenty more syntactic sugar – check out the API in the source code comments. Sweet!
Thanks @pkeane.
Jul 27
Over at the the YUI blog the team just announced the preview release of YUI 3.2.0. YUI3 now has some interesting new features that the team wants you to try and tell them if they work out for you. The changes to the already very powerful library are quite ambitious:
- Touch event support for mobile interfaces including flick and move gestures
- Browser capability loading – which means that every browser gets the least amount of code necessary to make it work
- Transition support for the animation module – meaning only browsers that don’t support CSS3 transitions get the JavaScript animation fallback
- An update to the CSS grids to allow for more flexible layouts
- A ScrollView widget similar to the one in Apple iOS
- The uploader has been transitioned over from YUI2 to YUI3
So check out what is on offer and give the YUI team feedback on what would be nice to have and what is broken. In their own words:
The goal of a preview release is to make it as easy as possible for all of us in the community to evaluate progress of the upcoming release and provide feedback. Please take some time to test 3.2.0pr1 and let us know what you find by filing tickets in the YUI 3 bug database marked as “Observed in version” 3.2.0pr1. We’ll do our best to address preview-release questions on the YUI 3 Forums, too.
There are three ways to get started with the preview release: YUI 3.2.0pr1 is available on the CDN via the 3.2.0pr1 version tag — so you can reference preview-release files like http://yui.yahooapis.com/combo?3.2.0pr1/build/yui/yui-min.js. If you switch to this seed file for the preview release, all subsequent use() statements will continue to load YUI 3.2.0pr1. Or You can download the full YUI 3.2.0pr1 from YUILibrary.com, including source code and examples for all components. Or you can simply explore the functioning examples roster.
Jul 27
Today we presents collection of best CSS3 and HTML5 tutorials and articles.
Jul 26
Interest in Canvas, as well as mobile apps, has led to a renaissance of old-school 8-bit graphics. Joe Huckaby of Effect Games has been playing around with color cycling, leading to some stunning effects.
Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to match. It was fast, and took virtually no memory.
There’s a neat optimization going on here too: instead of clearing and redrawing the entire scene with each frame, he only updates the pixels that change:
In order to achieve fast frame rates in the browser, I had to get a little crazy in the engine implementation. Rendering a 640×480 indexed image on a 32-bit RGB canvas means walking through and drawing 307,200 pixels per frame, in JavaScript. That’s a very big array to traverse, and some browsers just couldn’t keep up. To overcome this, I pre-process the images when they are first loaded, and grab the pixels that reference colors which are animated (i.e. are part of cycling sets in the palette). Those pixel X/Y offsets are stored in a separate, smaller array, and thus only the pixels that change are refreshed onscreen. This optimization trick works so well, that the thing actually runs at a pretty decent speed on my iPhone 3GS and iPad!
Jul 24
JavaScript as a general-purpose “Turing-complete language” is illustrated – the example discussed in the first part of a series: How a CPU can be emulated through JS, and how one might start building an emulation core for the GameBoy console. Looking forward: How a game image can be loaded into the emulator over the Web. For now: Hello, Z80! Check out Ice Station ImRannazar!
Jul 22
The Dojo project continues to pump out goodness announcing version 1.5 of the Dojo Toolkit with a number of new and exciting features.
Dylan Schiemann
The JavaScript world is evolving at an intense pace. We’re very pleased with this release of Dojo, which offers the stability needed for existing apps and browsers, while introducing some of the capabilities of building great apps of the future.
Some of the biggest updates came to the Dijit UI library with the addition of the new Claro theme which helps provide a nice desktop look-and-feel to web applications as well as improvements to the charting and drawing components of the library.
Pete Higgins:
If you haven’t seen the new theme Claro, you should. Julie Santilli and her awesome design team at IBM put some incredible design and style on top of an already stable and accessible UI library
The theme is incredibly clean. Check out some of the controls styled using Claro:
Other important updates include:
- Strong support for HTML5 & CSS3 features such as local storage, transforms and Canvas with fallback
- Implementation of dojo.Stateful
- Update to dojo.Deferred to leverage a new underlying Promises-based API
In addition, new initiatives are underway to provide solutions for the ever-growing and important mobile space:
- dojox.mobile: lightweight mobile web widgets
- dojox.mobile.app: mobile application development framework
- embedjs: Dojo API, optimized for mobile
- TouchScroll: scrolling layer for WebKit Mobile
- wink: mobile web app toolkit
This is release continues the project’s philosophy of modularity allowing developers to leverage the library for anything from simple DOM manipulation to full-blown RIA development. Dojo 1.5 is immediately available for download and sports impressive, updated documentation to get you started quickly.
Jul 22
Jul 21
In this article we presents a collection of most useful jQuery plugins for July 2010.
Jul 20
Today we present roundup of interesting tutorials, articles and examples for iPhone developers.
Jul 19
Everyone’s chomping at the bit to leverage new HTML5 and CSS3 features but with some older browsers not supporting them, hacks are still needed to make things work in a cross-browser fashion. We’ve seen libs that make things easier such as Remy Sharp’s html5shiv and Modernizr and now we can add another one.
Jason Johnston’s new PIE library makes it easy to rendering several of the most useful CSS3 decoration features within Internet Explorer versions 6 through 8. He took an interesting approach by using IE DHTML Behaviors to style the elements and provide the necessary functionality to emulate the CSS3 functionality. So to add rounded corners to an element, your CSS code might look like this in plain ‘ole CSS:
CSS:
#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
To add support in IE 6-8 using PIE, you’d add this:
CSS:
#myElement {
…
behavior: url(PIE.htc);
}
…
behavior: url(PIE.htc);
}
PIE currently has full or partial support for:
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient background images
Unfortunately, there seems to only be one demo at the moment, which is border-radius rendering via the home page, but it’s still seems like a good start with a lot of future potential.
I’ve never personally used IE DHTML Behaviors or HTML Components so I looked them up and found these intro links for those who might be interested in better understanding them:
Using HTML Components to Implement DHTML Behaviors in Script
Introduction to DHTML Behaviors
Jul 16
The week has been long. Much code has been written. There is much more to do, but Friday is for relaxing a little. Take some time, sit back and watch, as three fantastic videos are available for you:
French: Paul Rouget of Mozilla, shows you the future
Paul builds the best demos. ever. At the Mozilla Summit in Whistler, he shows off what you can do when you remix HTML5, CSS3, SVG, WebGL, and WebSockets. A must see.
German: Building an awesome social HTML5 engine
Paul Bakaus of Dextrose (and jQuery UI fame) recently launched the Aves Engine, a social gaming engine in pure HTML! Dextrose also joined forces with Effect Games to bolster its Web gaming might. Paul gave a talk at Google explaining the technology, and it just went live:
“Irish”: Paul shows you jQuery c0de
Ok, Irish by name, and maybe a touch by nature…. but not by nationality. Paul Irish has been doing an amazing talk at conferences where he walks through the jQuery source code to teach you fun and frolics of JavaScript. He picked up ScreenFlow and did it again to reach you all. Paul is a gem in our community, and at 52 minutes…. you will still want more:
Have a great weekend!
