Articles Tagged 'webdev'
An Introduction to Object Oriented CSS
Ranjith KumarWith richer interactions and media heavy pages mushrooming on the web, creating web pages, which load faster and respond well has become a challenge. Separating the content, presentation and behavior of a page using HTML, CSS and JS, is not the only thing that front-end engineers have to concentrate on nowadays. The limelight is now on the performance of the pages, cleanliness and leanness of the code within, scalability and reusability of CSS, and the semantic correctness of the markup. There are a handful of frameworks, techniques and approaches that are built towards this goal of maintainability, scalability and reusability of CSS. Each of them is having its own pros and cons. But, this is not a stage to elaborate on all of them. This article is an introduction to implementing the concept of ‘Object Oriented Programming’ in building CSS for high scale websites and applications, with an eye on maintainability and reusability.
Bridging the Designer-Developer Gap
How are ‘Right brainers’ different from ‘Left Brainers’? Well, this is not a zoology question being thrown at you. If you are working on a team dealing with websites / apps, and if there is a design team working with a team of developers, you probably would be witnessing the answer to this question every single day you work! This is an inevitable fact, and it is this difference that makes the two communities thrive, and the best team is the one which finds a way to converge the collective wisdom of both these ‘species’ into the final stage of their deliverable – An ideal human-machine interaction experience, filled with life and satisfaction. But in reality, most of the teams stumble at this moment, when the ideologies of both of them should be given weight and injected into the final product, and this shortcoming, is the whole essence of this article.
Presenting the Great New Features of WordPress 3.1
Saad Bassi
jQuery for Complete Beginners: Part 4
Jack FranklinWelcome back to jQuery for Beginners. Just a quick recap first - in the first two weeks we covered the very basics of jQuery and interacting with elements. Last time round we made an accordion - something which taught us a few of the jQuery special animation functions that are built in to jQuery. Today we will be using those functions and a bit more as we look at creating a nice looking Gallery page, built with HTML and CSS, and then adding some nice interactive effects with jQuery.
HTML and Semantics – Conjoined twins of the Future Web !
Around 4-5 years ago, my daily knowledge building and socializing activities went like – read books, attend some sessions/training, visit a friend's place, engage in a constructive debate, take a walk @ the nearby park … and so on . But years later … the scenario is slowly changing and I hardly find any time doing at least a few of the items listed above, and a lot more additional items have creeped in to the list! The technology has taken over, and the collective wisdom of humanity, is slowly getting harnessed onto the most powerful medium today – the WEB ! Kids are more concerned about making more friends on their favorite social-networking site than friends at school / college, we talk through comments and write on walls (I would’ve been happier, if we burn that much calorie to write on an actual wall … but this is something else J). The internet is slowly becoming a part of daily life now.
Building Real-Time Form Validation Using jQuery
Michal KozakClient-side validation is something every web form should have, no doubts about that. While server-side validation does its job, it certainly lacks good user experience. What is so great about client-side validation then? Not only is it useful to the user because it makes the process of filling out the form a lot quicker and a lot less painful, but it also shows that you actually care about them. For the user there's nothing better than knowing right away if they're doing it correctly. In this tutorial we're going to learn how to build real-time form validation using jQuery. If you'd like to see what you'll be building, you can watch the short video intro or hit the "Live Demo" button and check it out.
jQuery for Complete Beginners: Part 3
Welcome to the third post in this series, taking you from jQuery novice to jQuery expert. The past two weeks have essentially just listed functions that you will need to know. Today we are going to put the skills we've learned into practice (as well as meeting new things) and create a basic accordion. An accordion is a very good way of showing lots of content in a small area. You might have five headers, each with a paragraph below it. Showing all that at once is going to go down for a long way.
jQuery for Complete Beginners: Part 2
Welcome to part 2 of jQuery for beginners. In the first part we looked at how to add jQuery to our pages and also looked at how jQuery selects elements on the page before finally animating a div. In this lesson we are going to look purely at how to select elements through their relationship with the element we are already interacting with. This may seem complicated, but it's in fact very straightforward.
Presenting the Great New Features of jQuery UI 1.8
Daniel KurdoghlianThe final version of jQuery UI 1.8 just got released a few days ago. I will go through all new features and also show you some examples with the new widgets. Along with the hundreds of bug fixes and improvements, 5 new plugins and 1 new effect found the way into the bundle.
How to Create a Flash-like Color and Pattern Morphing effect with jQuery
Today you will learn, how you can create a Flash-like effect with only using a few lines of jQuery and a transparent PNG as mask. Not only will you be able to dynamically change the color of the logo, but also add patterns as you wish and even animate them later with a few lines of code. With this technique you will also be able to add transition effects and control any single part of the colors, patterns and animations.
