Performance Tuning: Enhancing System Efficiency and Speed

In today's fast-paced digital world, where user expectations are high and applications are complex, performance tuning is crucial to ensure systems run efficiently and deliver optimal experiences. Performance tuning involves improving the speed, responsiveness, and resource utilization of software systems, databases, networks, and hardware. This article explores the key concepts of performance tuning, why it's essential, and best practices to enhance system performance.

What is Performance Tuning?

Performance tuning is the process of adjusting and optimizing system parameters, configurations, and resources to improve overall system performance. It can be applied to various aspects of a system, including:

• Software: Optimizing application code, queries, or processes to run faster.

• Database: Tweaking database structures, indexing, and queries to handle data operations more efficiently.

• Hardware: Allocating CPU, memory, and storage resources to better support workloads.

• Network: Enhancing network configurations to reduce latency and improve data transfer speeds.

The goal of performance tuning is to maximize throughput, reduce response times, and minimize resource consumption while ensuring system stability and scalability.

Why Performance Tuning Matters

1. Improved User Experience: Slow applications lead to frustrated users, who might abandon the application altogether. Tuning ensures users experience faster load times and smoother interactions.

2. Cost Efficiency: Optimizing system performance reduces the need for additional hardware and server resources. This can lead to significant cost savings, especially in cloud environments where you're billed based on usage.

3. Scalability: As your user base grows, a poorly tuned system will struggle to handle increased traffic or data. Performance tuning helps ensure that your system can scale effectively without performance degradation.

4. System Stability: Inefficient use of system resources can lead to bottlenecks, crashes, and downtime. Tuning minimizes such risks, ensuring the system remains stable even under heavy workloads.

Key Areas for Performance Tuning

1. Application Code

• Refactoring Code: Writing clean, modular code helps improve performance. Avoiding unnecessary loops, reducing complex logic, and minimizing redundant operations all contribute to faster code execution.

• Caching: Implementing caching strategies (in-memory, page, or object caching) reduces redundant data retrievals or computations, speeding up response times.

• Concurrency and Parallelism: Leveraging multi-threading and parallelism can allow your application to perform multiple tasks concurrently, enhancing overall efficiency.

2. Database Performance

• Indexing: Proper indexing speeds up data retrieval by allowing the database engine to quickly locate the required records. However, over-indexing can slow down write operations, so it’s important to strike a balance.

• Query Optimization: Writing efficient SQL queries ensures faster execution. This includes avoiding unnecessary joins, using appropriate WHERE clauses, and limiting the data returned by queries.

• Partitioning: Partitioning large tables improves performance by dividing data into manageable chunks, enabling faster data access and processing.

3. Memory and CPU Optimization

• Memory Leaks: Regularly profiling the application can help detect memory leaks, which cause the system to use up more memory over time, leading to slower performance or crashes.

• Garbage Collection Tuning: In languages like Java and C#, tuning the garbage collector can optimize how memory is managed, reducing the frequency and impact of garbage collection on performance.

• Resource Allocation: Allocating the right amount of CPU, memory, and storage resources ensures that processes run efficiently without causing contention.

4. Network Performance

• Latency Reduction: Reducing the number of hops between nodes, using faster protocols, and optimizing the payload size can significantly reduce network latency.

• Load Balancing: Distributing workloads evenly across servers prevents any single server from becoming overwhelmed, which improves overall system responsiveness.

• Compression: Compressing data before transmission reduces the amount of data transferred over the network, speeding up data transfers.

5. Hardware Tuning

• Disk I/O Optimization: Using solid-state drives (SSDs) instead of traditional hard drives improves read/write speeds, especially for applications handling large amounts of data.

• CPU and Memory Utilization: Monitoring CPU and memory usage allows for more effective tuning of hardware configurations. Allocating additional cores or memory where needed helps prevent bottlenecks.

• Virtualization and Cloud Resources: In cloud environments, scaling up or down resources like virtual CPUs (vCPUs) or memory based on demand helps maintain optimal performance without over-provisioning.

Best Practices for Performance Tuning

1. Measure and Profile: Always begin with performance profiling to identify bottlenecks and inefficiencies. Tools like profilers, log analyzers, and monitoring dashboards help gather performance data before optimization.

2. Focus on High-Impact Areas: Don’t attempt to optimize everything. Prioritize the most critical areas that will provide the most significant performance gains (e.g., slow database queries, expensive loops in code).

3. Iterative Tuning: Performance tuning should be an ongoing process. Start with the biggest bottlenecks, apply changes, test the impact, and repeat. Continuous monitoring is essential to ensure performance remains optimal as workloads evolve.

4. Automated Testing: Use performance testing tools (e.g., JMeter, LoadRunner) to simulate real-world scenarios and test system performance under different conditions. Automated tests ensure consistency in performance tuning efforts.

5. Documentation: Keep records of tuning efforts, changes made, and their impacts. This helps the team understand what was done, avoid redundant efforts, and quickly troubleshoot future performance issues.

Conclusion

Performance tuning is not a one-time activity but an ongoing process that ensures systems remain efficient, cost-effective, and responsive. By focusing on key areas like code optimization, database performance, hardware utilization, and network efficiency, businesses can achieve significant improvements in both user satisfaction and system scalability. With the right approach, tools, and mindset, performance tuning can turn a sluggish system into a high-performing, resilient one.

Written By: Samir Dalvi

Designation: Software Developer

LinkedIn: https://www.linkedin.com/in/samir-dalvi-87106b2a5

Creating a user-friendly website is crucial for engaging visitors and turning them into loyal customers. A good user experience (UX) ensures that visitors can easily navigate your site, find what they need, and enjoy their interaction with your brand. Here are some essential UX guidelines for website development, inspired by insights from reputable UX resources.

1. Keep It Simple

Simplicity is the cornerstone of good UX. A clean, uncluttered design helps users focus on content without distractions. Avoid overloading pages with excessive information, ads, or complex layouts. Instead, use whitespace effectively to create a balanced, easy-to-navigate site.

Tips for Simplicity:

• Use a minimal color palette.

• Limit the number of fonts to two or three.

• Provide ample white space to reduce visual clutter.

• Prioritize essential information on each page.

2. Ensure Fast Loading Times

Nothing frustrates users more than a slow website. Ensure your site loads quickly by optimizing images, leveraging browser caching, and minimizing code. A fast website keeps visitors engaged and improves your search engine ranking.

Tips for Speed Optimization:

• Compress images and videos without compromising quality.

• Use a Content Delivery Network (CDN) to deliver content faster.

• Minify CSS, JavaScript, and HTML files.

• Enable browser caching to store static files locally on users' devices.

3. Make Navigation Intuitive

Your website's navigation should be straightforward and intuitive. Use clear labels for menus and categorize content logically. A well-designed navigation bar helps users find what they’re looking for without frustration.

Tips for Intuitive Navigation:

• Use descriptive labels for menu items.

• Organize content into categories and subcategories.

• Implement a search bar for easy access to specific content.

• Use breadcrumb trails to help users understand their location within the site.

4. Optimize for Mobile

With a significant number of users accessing websites on mobile devices, optimizing your site for mobile is essential. Use responsive design to ensure your site looks and functions well on all screen sizes. This approach not only enhances UX but also boosts your search engine performance.

Tips for Mobile Optimization:

• Use flexible grids and layouts that adjust to different screen sizes.

• Ensure buttons and links are large enough to be easily tapped.

• Optimize images for faster loading on mobile networks.

• Test your site on various devices to ensure consistent performance.

5. Focus on Readability

Content readability is key to keeping users engaged. Use easy-to-read fonts, appropriate font sizes, and sufficient contrast between text and background. Break up content into smaller paragraphs and use headings, bullet points, and images to make your content optimized.

Tips for Improving Readability:

• Choose a legible font and maintain a font size of at least 16px.

• Use high contrast between text and background colors.

• Structure content with headings, subheadings, and bullet points.

• Use images and infographics to break up text and illustrate points.

6. Prioritize Accessibility

An accessible website is usable by everyone, including people with disabilities. Follow accessibility standards like WCAG (Web Content Accessibility Guidelines) to ensure your site is inclusive. This includes providing alt text for images, ensuring keyboard navigability, and using ARIA (Accessible Rich Internet Applications) landmarks.

Tips for Enhancing Accessibility:

• Provide descriptive alt text for all images.

• Ensure all interactive elements are accessible via keyboard.

• Use ARIA landmarks to define regions of the page.

• Provide transcripts for audio and video content.

7. Provide Clear Call-to-Actions (CTAs)

CTAs guide users towards desired actions, such as signing up for a newsletter or making a purchase. Make your CTAs stand out with contrasting colors and clear, concise text. Place them strategically throughout your site to drive user engagement and conversions.

Tips for Effective CTAs:

• Use action-oriented language (e.g., "Sign Up Now," "Learn More").

• Make CTAs visually distinct with contrasting colors.

• Position CTAs prominently on the page.

• Limit the number of CTAs to avoid overwhelming users.

8. Gather and Implement Feedback

Regularly gather user feedback to understand pain points and areas for improvement. Use tools like surveys, user testing, and analytics to gather insights. Implementing this feedback helps you continually refine your UX and keep your users satisfied.

Tips for Gathering Feedback:

• Conduct usability testing with real users.

• Use surveys and feedback forms to collect user opinions.

• Analyze website analytics to identify user behavior patterns.

• Continuously iterate and improve based on user feedback.

Conclusion

By following these UX guidelines, you can create a website that not only attracts visitors but also keeps them engaged and satisfied.

Remember, a well-designed user experience is key to your website's success. Keep your users' needs at the forefront, and you’ll build a site that delights and converts.

References

For more detailed information and resources on UX, visit

Nielsen Norman Group: https://www.nngroup.com/search/?q=UX%20Guidelines%20for%20Website%20Development

Smashing Magazine: https://www.smashingmagazine.com/search/?q=website

Written By: Rajesh Madibone

Designation: Sr. UI-UX Designer

LinkedIn: https://www.linkedin.com/in/rajeshmadibone/

UI Testing

UI testing, or User Interface testing, is an important step in software development to make sure that an application looks good, works correctly, and is easy to use.

The main goal of UI testing is to simulate how a user would interact with the application. This includes actions like clicking buttons, filling out forms, navigating through different screens, and interacting with other visual elements. The aim is to find any defects, inconsistencies, or usability issues that might affect the application's performance or user satisfaction.

UI testing often uses automated tools and scripts to mimic user interactions. These tools interact with the GUI elements just like a human would, but they can do it with greater accuracy and repeatability. Test scripts can be created to cover a wide range of scenarios, from basic functionality checks to complex user journeys.

Types and Techniques of UI Testing

1. Exploratory UI Testing Exploratory UI testing is an unscripted testing method where testers interact with the application's user interface to identify defects and issues. The goal is to explore the application as a user would, using intuition and experience to find hidden bugs, usability problems, and potential improvements.

2. Functional UI Testing Functional UI testing ensures that the graphical user interface performs the required functions correctly. This type of testing checks the functionality of UI elements like buttons, menus, forms, and links to make sure they work as expected.

3. Regression UI Testing Regression UI testing involves re-running previous tests on the application's user interface to check that recent code changes haven't negatively impacted existing features. The goal is to catch any unintended side effects and ensure that the UI remains functional and consistent.

4. End-to-End (E2E) UI Testing End-to-end (E2E) UI testing tests the complete workflow of an application, simulating real user scenarios to make sure that all components and systems interact correctly. It covers everything from the user interface to back end services, databases, and third-party integrations.

5. Cross-Browser/Other devices UI Testing Cross-browser or other devices' UI testing ensures that a web application and other device works correctly and looks as intended across different web browsers and other devices. This type of testing makes sure that users have a consistent experience regardless of the browser or device they use.

6. Performance UI Testing Performance UI testing assesses the performance of a web application's user interface by measuring various metrics such as load time, responsiveness, rendering speed, and overall user experience under different conditions. This type of testing ensures that the application performs well even under heavy load or stress.

7. Localization UI Testing Localization UI testing verifies that the user interface is correctly translated and adapted for different locales. This includes checking the accuracy of translations, formatting dates, numbers, and currencies, and ensuring that the UI elements are displayed and aligned correctly for different languages and regions.

8. Security UI Testing Security UI testing evaluates the user interface to identify and mitigate potential security risks. This type of testing ensures that the UI does not accidentally expose sensitive information, provide opportunities for malicious activities, or fail to enforce proper security controls.

Conclusion UI testing is essential for delivering high-quality, user-friendly applications. By using a combination of manual, automated, exploratory, regression, cross-browser, other devices, performance, and localization testing approaches, you can ensure that your application's UI meets the highest standards of quality and user satisfaction. Follow these testing methods and best practices to create robust and reliable user interfaces that delight users and stand out in the competitive market. Happy testing!

Take Reference From

1) test sigma : https://testsigma.com/guides/ui-testing/

2) chat gpt

Written By: Vaibhav Bobade

Designation: Software Tester

LinkedIn: https://www.linkedin.com/in/vaibhav-bobade-789932231?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app

Agile Development in the world of IT is a process designed to make app development easy with predictable results.

Agile software development is a defining set of principles that gives software developers tips and ideas on how to respond to unpredictability, find solutions and requirements that usually evolve during individual and team interactions.

The entire development and testing activities are concurrent, unlike the Waterfall model. The term “Agile” has been around for several years now, with newer and better tools presenting itself every year. In this article, we will discuss some of the best tools for effective agile development.

1. Jira Agile Jira, an issue and project tracking software, is originally from Atlassian. Over the years, more features have been added since its launch. It is easy to assign work collaboratively, where tasks are prioritized, and ideas shared as documents or email.

Thanks to its workflows, it is easy to manage different projects at a single time. It has an intuitive screen with a number of features like customizable queues, real time reporting to customers and automated request management.

Apart from that, Jira Agile allows for great product integration with other Atlassian tools like Stash enterprise, Git repository management and Bitbucket for unlimited private code responses. Right from project conception to launch, everything can be handled here. Jira Agile comes in several versions and the latest one conforms to the requests made by customers.

Companies like Square, Adobe, BNP Paribas, NASA, eBay, Cisco, LindkedIn, Salesforce, BMW use Jira Agile.

2. Activ Collab If you are looking for agile project management, collaboration, customization, budgeting, tracking, notifications, resource managements, task management, learning and support, issue tracking apart from collaborating with clients for transparency, you are looking at the right solution here.

Each user in Activ Collab has his or her own unique dashboard where one can see their own work. Activ Collab helps you to track your working time so you can bill your clients accordingly. Harvard University, NASA, Ogilvy, Intel, Adobe and Apple are some of the companies using Activ Collab.

3. Pivotal Tracker Pivotal Tracker is a tool designed by Pivotal Labs, a software development consultancy. As the tool can easily handle multiple projects, you would find this tool highly popular among users. The tool can be used for messaging, preparing and monitoring projects and creating turndown charts. Pivotal Tracker is well known for its feedback tools, making QA possible for all project undertakings.

Groupon, Sharethrough, GoSpotCheck, Accuweather are just a few of the companies that use Pivotal Tracker.

4. CA Technologies CA Technologies (Previously known as Rally) is a cloud-based solution that helps software companies through the entire software development process. The aim is to shorten development cycles through dedicated agile techniques while enabling the teams spread across the globe to collaborate with each other seamlessly.

The tool helps you to reallocate development resources to help grow your portfolio. Various editions of the software are available for on-premise use. CA Technologies acquired Rally for $480 million in May 2015.

Intel, Cognizant, Capgemini, Sol, Choice Hotels,Getty Images, GE are just a few of the big names that use CA Technologies.

5. SprintGround If you are not quite happy with the way your agile development is shaping up, then consider SprintGround. It helps developers to parse out projects and versions and manage releases. There is a specific framework in SprintGround that allows you to look at feature requests, customer requests and suggestions.

Bug tracking functionality is another feature of SprintGround. It is the best option for customer-driven product development as it is integrated with several traditional Scrum functions. Stacker, Croz Desk, and iT Meester use SprintGround

6. Aha! Quite an interesting name for an agile development software! Aha! calls itself the world’s first product roadmap software that would help developers plan their business by shortening product cycles and improving user ranking. The best thing about Aha! is that you can integrate it with the applications that you already use.

Many of the big names are already users of Aha! like GitHub, Trello, Dropbox, Visual Studio, Google Apps and HipChat

7. Yodiz Yodiz is an agile management platform that is easy to use, customizable when you want to plan and track several teams at one time.

Some of the best features of Yodiz are:

Product Backlog, where you can plan your backlog management through an online repository Sprints to help visualize, schedule and plan your sprints Releases to help you assign and prioritize the various functionalities and their releases Epics to help you channel your business requirements to a particular goal Real time collaboration with all the members of the team and so on Companies using Yodiz include Associated Press or AP, Checkout.com, Team Elena, Nokia, Satmetrix

Wrapping Up The best bet of agile development would be for small projects, which can be implemented quickly, because errors can be fixed quickly. As the development process with agile method is iterative, a project can be executed in shorter time frames.

We hope this article has brought some of the important tools in Agile product development. Of course, there are plenty more out there, so you need to find your best option, choosing the one that suits your requirements.

In this article we will take a look at 15 jQuery techniques which will be useful for your effective use of the library. We will start with a few tips about performance and continue with short introductions to some of the library’s more obscure features.

1) Use the Latest Version of jQuery With all the innovation taking place in the jQuery project, one of the easiest ways to improve the performance of your web site is to simply use the latest version of jQuery. Every release of the library introduces optimizations and bug fixes, and most of the time upgrading involves only changing a script tag.

You can even include jQuery directly from Google’s servers, which provide free CDN hosting for a number of JavaScript libraries.

The latter example will include the latest 1.6.x version automatically as it becomes available, but as pointed out on css-tricks, it is cached only for an hour, so you better not use it in production environments.

2) Keep Selectors Simple Up until recently, retrieving DOM elements with jQuery was a finely choreographed combination of parsing selector strings, JavaScript loops and inbuilt APIs like getElementById(), getElementsByTagName() and getElementsByClassName(). But now, all major browsers support querySelectorAll(), which understands CSS query selectors and brings a significant performance gain.

However, you should still try to optimize the way you retrieve elements. Not to mention that a lot of users still use older browsers that force jQuery into traversing the DOM tree, which is slow. $(‘li[data-selected=”true”] a’) // Fancy, but slow $(‘li.selected a’) // Better $(‘#elem’) // Best Selecting by id is the fastest. If you need to select by class name, prefix it with a tag – $(‘li.selected’). These optimizations mainly affect older browsers and mobile devices. Accessing the DOM will always be the slowest part of every JavaScript application, so minimizing it is beneficial. One of the ways to do this, is to cache the results that jQuery gives you. The variable you choose will hold a jQuery object, which you can access later in your script. var buttons = $(‘#navigation a.button’); // Some prefer prefixing their jQuery variables with $: var $buttons = $(‘#navigation a.button’); Another thing worth noting, is that jQuery gives you a large number of additional selectors for convenience, such as :visible, :hidden, :animated and more, which are not valid CSS3 selectors. The result is that if you use them the library cannot utilize querySelectorAll(). To remedy the situation, you can first select the elements you want to work with, and later filter them, like this: $(‘a.button:animated’); // Does not use querySelectorAll() $(‘a.button’).filter(‘:animated’); // Uses it The results of the above are the same, with the exception that the second example is faster.

3) jQuery Objects as Arrays The result of running a selector is a jQuery object. However, the library makes it appear as if you are working with an array by defining index elements and a length. // Selecting all the navigation buttons: var buttons = $(‘#navigation a.button’); // We can loop though the collection: for(var i=0;i console.log(buttons[i]); // A DOM element, not a jQuery object } // We can even slice it: var firstFour = buttons.slice(0,4); If performance is what you are after, using a simple for (or a while) loop instead of $.each(), can make your code several times faster. Checking the length is also the only way to determine whether your collection contains any elements. if(buttons){ // This is always true // Do something } if(buttons.length){ // True only if buttons contains elements // Do something }

4) The Selector Property jQuery provides a property which contains the selector that was used to start the chain. $(‘#container li:first-child’).selector // #container li:first-child $(‘#container li’).filter(‘:first-child’).selector // #container li.filter(:first-child) Although the examples above target the same element, the selectors are quite different. The second one is actually invalid – you can’t use it as the basis of a new jQuery object. It only shows that the filter method was used to narrow down the collection.

5) Create an Empty jQuery Object Creating a new jQuery object can bring significant overhead. Sometimes, you might need to create an empty object, and fill it in with the add() method later. var container = $([]); container.add(another_element); This is also the basis for the quickEach() method that you can use as a faster alternative to the default each().

6) Select a Random Element As I mentioned above, jQuery adds its own selection filters. As with everything else in the library, you can also create your own. To do this simply add a new function to the $.expr[‘:’] object. One awesome use case was presented by Waldek Mastykarz on his blog: creating a selector for retrieving a random element. You can see a slightly modified version of his code below: (function($){ var random = 0; $.expr[‘:’].random = function(a, i, m, r) { if (i == 0) { random = Math.floor(Math.random() * r.length); } return i == random; }; })(jQuery); // This is how you use it: $(‘li:random’).addClass(‘glow’);

7) Use CSS Hooks The CSS hooks API was introduced to give developers the ability to get and set particular CSS values. Using it, you can hide browser specific implementations and expose a unified interface for accessing particular properties. $.cssHooks[‘borderRadius’] = { get: function(elem, computed, extra){ // Depending on the browser, read the value of // -moz-border-radius, -webkit-border-radius or border-radius }, set: function(elem, value){ // Set the appropriate CSS3 property } }; // Use it without worrying which property the browser actually understands: $(‘#rect’).css(‘borderRadius’,5); What is even better, is that people have already built a rich library of supported CSS hooks that you can use for free in your next project.

8) Use Custom Easing Functions You have probably heard of the jQuery easing plugin by now – it allows you to add effects to your animations. The only shortcoming is that this is another JavaScript file your visitors have to load. Luckily enough, you can simply copy the effect you need from the plugin file, and add it to the jQuery.easing object: $.easing.easeInOutQuad = function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2tt + b; return -c/2 * ((–t)*(t-2) – 1) + b; } // To use it: $(‘#elem’).animate({width:200},’slow’,’easeInOutQuad’);

9) The $.proxy() One of the drawbacks to using callback functions in jQuery has always been that when they are executed by a method of the library, the context is set to a different element. For example, if you have this markup: And you try to execute this code: $(‘#panel’).fadeIn(function(){ // this points to #panel $(‘#panel button’).click(function(){ // this points to the button $(this).fadeOut(); }); }); You will run into a problem – the button will disappear, not the panel. With $.proxy, you can write it like this: $(‘#panel’).fadeIn(function(){ // Using $.proxy to bind this: $(‘#panel button’).click($.proxy(function(){ // this points to #panel $(this).fadeOut(); },this)); }); Which will do what you expect. The $.proxy function takes two arguments – your original function, and a context. It returns a new function in which the value of this is always fixed to the context. You can read more about $.proxy in the docs.

10) Determine the Weight of Your Page A simple fact: the more content your page has, the more time it takes your browser to render it. You can get a quick count of the number of DOM elements on your page by running this in your console: console.log( $(‘*’).length ); The smaller the number, the faster the website is rendered. You can optimize it by removing redundant markup and unnecessary wrapping elements.

11) Turn your Code into a jQuery Plugin If you invest some time in writing a piece of jQuery code, consider turning it into a plugin. This promotes code reuse, limits dependencies and helps you organize your project’s code base. Most of the tutorials on Tutorialzine are organized as plugins, so that it is easy for people to simply drop them in their sites and use them. Creating a jQuery plugin couldn’t be easier: (function($){ $.fn.yourPluginName = function(){ // Your code goes here return this; }; })(jQuery); Read a detailed tutorial on turning jQuery code into a plugin.

12) Set Global AJAX Defaults When triggering AJAX requests in your application, you often need to display some kind of indication that a request is in progress. This can be done by displaying a loading animation, or using a dark overlay. Managing this indicator in every single $.get or $.post call can quickly become tedious. The best solution is to set global AJAX defaults using one of jQuery’s methods. // ajaxSetup is useful for setting general defaults: $.ajaxSetup({ url : ‘/ajax/’, dataType : ‘json’ }); $.ajaxStart(function(){ showIndicator(); disableButtons(); }); $.ajaxComplete(function(){ hideIndicator(); enableButtons(); }); /* // Additional methods you can use: $.ajaxStop(); $.ajaxError(); $.ajaxSuccess(); $.ajaxSend(); */ Read the docs about jQuery’s AJAX functionality.

13) Use delay() for Animations Chaining animation effects is a powerful tool in every jQuery developer’s toolbox. One of the more overlooked features is that you can introduce delays between animations. // This is wrong: $(‘#elem’).animate({width:200},function(){ setTimeout(function(){ $(‘#elem’).animate({marginTop:100}); },2000); }); // Do it like this: $(‘#elem’).animate({width:200}).delay(2000).animate({marginTop:100}); To appreciate how much time jQuery’s animation() save us, just imagine if you had to manage everything yourself: you would need to set timeouts, parse property values, keep track of the animation progress, cancel when appropriate and update numerous variables on every step. Read the docs about jQuery animations.

15) Local Storage and jQuery Local storage is a dead simple API for storing information on the client side. Simply add your data as a property of the global localStorage object: localStorage.someData = “This is going to be saved across page refreshes and browser restarts”; The bad news is that it is not supported in older browsers. This is where you can use one of the many jQuery plugins that provide different fallbacks if localStorage is not available, which makes client-side storage work almost everywhere. Here is an example using the $.jStorage jQuery plugin: // Check if “key” exists in the storage var value = $.jStorage.get(“key”); if(!value){ // if not – load the data from the server value = load_data_from_server(); // and save it $.jStorage.set(“key”,value); } // Use value To Wrap it Up The techniques presented here will give you a head start in effectively using the jQuery library