Here’s a great HTML5 essentials web slideshow written by Marc Grabanski depicting the key elements to HTML5 development on the web.
Archive for the ‘Front-end’ Category
Modernizr browser feature detection
None
Jul
04
I’ve recently invested a great deal of time investigating the full immediate potential of HTML5, CSS3, among other technologies for web sites and mobile sites/apps a like.
One thing that became abundantly clear was the need to fully detect browsers feature capabilities to provide a rich user experience for users without neglecting half the market, I.e. progressive enhancement.
On looking around for a solution I came across Modernizr, a JavaScript library that “adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any JavaScript to use it.”
For example:
“Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too:”
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don’t */
}
This library could open the door to greater level of adoption of the HTML5 and CSS 3 standards allowing developers more creative freedom and confidence with the work they produce knowing that they can ensure a wide coverage of their sites functionality.
Modernizr currently detects support for the following:
- @font-face
- Canvas
- Canvas Text
- HTML5 Audio
- HTML5 Video
- rgba()
- hsla()
- border-image:
- border-radius:
- box-shadow:
- opacity:
- Multiple backgrounds
- CSS Animations
- CSS Columns
- CSS Gradients
- CSS Reflections
- CSS 2D Transforms
- CSS 3D Transforms
- CSS Transitions
- Geolocation API
- localStorage
- sessionStorage
- SVG
- SMIL
- SVG Clipping
- Drag and Drop
- hashchange
- X-window Messaging
- History Management
- applicationCache
- Web Sockets
- Web Workers
- Web SQL Database
- IndexedDB
- Input Types
- Input Attributes
This library should definitely be high on your list of libraries to consider whilst undertaking a project, definitely worth a play at the very least.
Have a look at Modernizr browser feature detection (Progressive Enhancement)
Why not also check out this Modrenizr tutorial
HTML Character Reference
None
Jun
07
This is more for personal reference, but I thought I would share this site with the world.
Flash on the iPhone?! No, but it’s a step in the right direction…
None
Jun
07
It’s obviously been big news for a while now, how can you get Flash onto the iPhone, iPad, iPod? Well technically you still can’t, however, Smokescreen certainly seems like a step in the right direction, or maybe a good alternative anyway.
In simple terms Smokescreen is; “a new open-source project aimed at converting Flash to JavaScript/HTML5 to run where it previously couldn’t and better interoperate with webpages where it previously could.”
Provisionally it is being promoted as a Flash ad replacement technology for devices that do not support the Flash plugin.
On first impressions it does indeed appear to be a good option for opening the web to platforms and devices that restrict Flash, although work is still required on the JavaScript size, currently standing at 175kB
At present it is, seemingly, limited to Flash Ad replacement due to the complexity of rendering anything larger or more detailed with JavaScript, but it’s a fantastic first attempt and it will be very interesting to see how this technology takes off and how developers implement it.
Keep your eye on: http://smokescreen.us/
JavaScript made easy with Pines Notify and jQuery
None
May
27
Whether you’re developing an admin system and want a simple yet stylish way to display system messages to your users or you just want to display latest news notifications on your website, Pines Notify is the script for you.
Simple to use and stylish out of the box, Pines Notify could certain save you a great deal of time and money.
Features include:
- Timed hiding with visual effects.
- Sticky (no automatic hiding) notices.
- Optional hide button.
- Supports dynamically updating text, title, icon, type…
- Stacks allow notice sets to stack independently.
- Control stack direction and push to top or bottom.
- Supports HTML (including forms) in title and text.
- Variable opacity.
- Supports Pines icons/jQuery UI icons/any CSS based icons.
- Supports custom classes for individual notice styling.
- Standard and custom effects.
- Optional drop shadows.
You can find the code and examples on Sourceforge.