Altabel Group's Blog

Archive for the ‘jQuery’ Category

Responsive web design isn’t the future, it’s the present

In our humble opinion it’s late to debate whether responsive web design is the future because it’s already the present of everybody’s business represented online. Consumer/client behavior has been changing. According to statistics and analysts’ predictions, for instance, for the first time since 2001, PC sales are projected to be lower than they were in 2012; smartphone sales will double PC sales in 2014; tablet sales are expected to exceed 100 million this year and may top notebooks next year. So the shift to mobile is happening at an extraordinary speed, and tablets and smartphones are becoming extremely popular for business and pleasure matters. This means people view your content on thousands of oddly shaped and different sized screens. What’s more, according to Google research, mobile users “expect their mobile experience to be as good as their desktop experience” – this expectation poses a thorny challenge for both, business stakeholders and web designers and developers.

So this is no longer about “How do I make my website available to a smartphone or tablet?” – it’s “How do I make my business available in smartphone and tablet context?”. For some business it’s not important – it’s literally critical, for example: according to the Pew Research Center, 60% of tablet users prefer reading news on the mobile web than via an app; the same percentage is quite common for e-commerce sites according to Google Analytics and that’s why RWD has been listed in E-commerce marketing checklist for 2013. If you wish to identify the percentage of your audience that use mobile devices use the Google Analytics Mobile Overview report feature: if mobile users are more than 5% of your total audience you should consider catering for them too.

In general, there are three main approaches to providing information and interaction to mobile/tablet device users : responsive (and adaptive) web design, mobilized websites, and mobile apps. It’s important to understand that these are different marketing channels and their value proposition is very different. A mobile web site may do something very different from a mobile app – simply said, “if your goal is just to display and show content beautifully create a responsive or mobilized website; if your goal is to show productivity tools, build an app”. Which option is the best for your business will depend on your use case, your users’ habits and your budget.

Responsive web design vs mobile web development: advantages and challenges

To talk about advantages of responsive web design, let’s start from its definition. RWD is a front-end development approach aimed at crafting device agnostic sites. It uses “media queries” to figure out what resolution of device it’s being served on. Flexible images and fluid grids then size correctly to fit the screen. So responsive design provides easy reading and navigation with a minimum of resizing, panning, and scrolling, and eliminates the need for separate sites for different devices. Adaptive web design is either a subset of responsive design, or a related approach. “Responsive design will show more stuff or less, optimized for a mobile layout, but is likely to still provide access to the full desktop-view’s content. Adaptive design, by contrast, might show very different content, and also present a different UI, reflecting touchscreen’s tap/swipe/scroll versus desktop’s keyboard/mouse interaction.” In either case, responsive (and adaptive) web design will be based on the same code as a desktop site, and will locate on the same URL.

– In the definition above a couple of advantages of RWD are pointed out. Indeed, it improves user web browsing experience since a website adapts to the browser or device compatibility automatically and makes the content look good. For customers it shows that your business is receptive to changing technology and understanding of consumers’ needs.

– From business perspective, “one website – multiple devices” concept means that it’s easy to manage and focus on developing good content for your website. The same applies to analytics and strategy development and deployment since there is only one set of analytics to examine and a single strategy to develop and deploy. From maintenance standpoint, the technique is great too as one update affects all of your platforms.

– Additionally, responsive websites are easier for consumers to find than traditional or mobile web sites because they come up higher in search engines’ rankings. “In fact, Google recommends responsive web design because having a single URL for desktop and mobile sites makes it easier for Google to discover content and for Google’s algorithms to assign indexing properties to content.”

– One more advantage from the future perspective, as Resnick predicts, is: “As the internet transforms further into a platform of services and user interfaces that tie those services together, leveraging RWD technology in the future will allow companies to integrate a plethora of back-end services, such as Facebook, Twitter, Salesforce.com, and Amazon Web Services, and then present the integrated data back out the front-end iad layer on a responsive design so the application looks great on all devices without custom coding needed for each device or screen size. No longer are expensive back-end solutions needed to integrate legacy systems with business partners.”

Actually responsive web design is quite immature so it faces many challenges too.

– Even though we might view a responsive website on a smaller screen and it displays less visible content or smaller-sized images, this does not mean that the site will load faster. The thing is that from one side responsive websites are not much smaller in download size when viewed on smaller devices or screen resolutions compared to when being viewed on a desktop browser jacked into a broadband internet service provider, on the other hand mobile internet speeds still lag much behind broadband internet ones. Thus responsive web sites need advanced optimization, such as serving smaller images and conditionally loading scripts, and much more. An alternative may be found in dedicated mobile web development solutions since they specifically address mobile devices.

– The related issue concerns complexity. Responsive web designs are inherently complex because they are trying to support many viewing experiences without necessarily optimizing the experience for one particular device (or genre of devices). Mobile browsers will have to deal with a big HTML file, and the site would need to carefully avoid running specific scripts, loading certain CSS and download large images. Perfect implementation is possible, still avoiding over-resourcing requires scripts or code and therefore additional complexity. Typical “m dot” site wins in this case and is simple. It usually has a small amount of HTML, limited scripts, CSS, and images (if at all) as it is built specifically for its intended small-screen, touchscreen mobile devices viewing experience.

– As for UI and UX, responsive websites have limitations here. Not only in screen size, they are also limited for utilizing or recognizing key mobile features such as user location, connectivity, device limitations, software potential, and user needs. Mobilized sites and mobile apps will provide broader opportunities and advantages here.

Information architecture can be an issue. It needs to be carefully considered and should be hierarchically structured before the design implementation.

Advertising is an issue. Ads will have to shift with the sites, something that will wreak havoc with advertisers who want guaranteed placements on sites.

So, which approach will or do you use to present your business online?

HTML5’s momentum and Best tools for responsive web design

Responsive web design is not a specific technology but a whole design approach. However, responsive design is enabled primarily by CSS3 and JavaScript, which fall under the banner of HTML5. HTML5 is really maturing in terms of its functionality and, more importantly, its speed. So now HTML5 is the backbone of the new and interactive features of responsive web design.

To achieve a smooth flow from a large screen to a small one it takes a lot of patience and perseverance. To reach a seamless result there are a number of tools that help you with it. Below you will find a list of best responsive design tools broadly recommended in the web as well as by Altabel’s dev team:

1. Gridset
A tool that helps you design, prototype and build any type of grid layout required – columnar grids, asymmetrical, fixed, fluid or responsive grids. It even lets you create a library of your own grids, with a variety of presets available. It will allow you to build responsive prototypes (without all the calculations) very quickly and easily, providing all the measurements and tools to integrate with your existing markup.
Alternatives: Frameless, Tiny Fluid Grid, Gridpak, SimpleGrid, Responsify, Responsive.gs, Golden Grid System and Photoshop Grid for Responsive Design.

2. Bootstrap
An intuitive and powerful front-end framework from Twitter to start a responsive website fast and easy. It addresses the most popular user interface components and interactions, uses a 12-column responsive grid system with simple and flexible HTML, CSS, and Javascript and features dozens of components, styles and JavaScript plug-ins, with basic global display, typography and link styles all set. It also gives the option of customizing components of your website for instance by using the Customizer .
Alternatives: Skeleton, Foundation, Base, InuitCSS, LESS Framework, Gridless, 320 and Upand Gumby.

3. Wirefy
Clients wish to see how wireframes will adapt to different device sizes. Static wireframes aren’t particularly useful to show a client how responsive your design is, or what functionality is being suggested. But rapid prototyping by building flexible wireframes may. Wirefy is a collection of functional responsive HTML snippets and templates that scale as the browser is resized (working across multiple devices). It builds on tools such as the Frameless grid system and Bootstrap, and uses CSS media queries that adapt to different device resolutions. Wirefy focuses on key elements such as typography, tables, images, slideshow, forms, tab panel, paginator, menu, etc., focusing on the users.
Alternatives: Froont, Interactive Style Tiles, Responsive Sketch Sheets, Responsive Wireframe Template, Interface Sketch Templates, Responsive Device Diagrams, Wirify.

4. FlevNav
Navigation strategy is a really critical component of any responsive website design. FlexNav is a jQuery plugin that takes a device-agnostic approach to complex site navigation. It is a mobile-first concept using media queries and JavaScript to create a menu with drop downs. It features multiple nested sub-menus, with support for em units and tap targets to reveal sub-menus for touchscreens.
Alternatives: TinyNav.js, Navigation Patterns for Responsive Design, MeanMenu, Responsive Solutions for Menu Navigation, jPanelMenu.

5. Adaptive Images
Previously, making your website images responsive was tricky and usually meant using a “hack-around”. Now several tools may simplify this task. Using a one htaccess file, one php file and a single line of JavaScript, Adaptive Images detects screen size of browsing devices, cashes and delivers device appropriate re-scaled versions of your web page’s embedded HTML images without any mark-up changes. Also it is entirely non-destructive, and works on existing websites and markups — without the need to edit anything. Adaptive Images works on the premise that you are already using the highest-resolution images on your site, and also offers a ton of customization options.
Alternatives: ReSRC.it, jQuery Picture, ResponsiveImg, Retina.js and Retina Images.

6. FitText
As content scales according to a user’s viewport, the text will naturally wrap as the container is narrowed; and this often causes widows, orphans or your headlines to look rather ugly, and can even break the entire layout. FitText is a jQuery plugin specifically for headlines and big text. It auto-updates the font size according to the width of the element wrapping it, so you can achieve scalable headlines and a non-broken layout that can be caused by font-sizing issues. FitText works perfectly with Lettering.js or any CSS3 property thrown at it. There are options to fine-tune the text, including the ability to set min-max sizes and the level of scaling. Still FitText is only for headlines, and shouldn’t be used with paragraph text.
Alternatives: BigText, Lettering.js, Kerning.js, Kern.js, Type Butter and Slabtext.

7. Responsive Slides
This lightweight plugin allows you to create a responsive slider using elements inside a container. The images have to be the same size and jQuery 1.6 and up should be used. You can keep captions and other non-HTML elements inside the slides, while also using CSS3 transitions with JavaScript fallback. It works in all major desktop and mobile browsers, can support multiple slide shows, have settings for transition and timeout durations, automatic and manual fade, and have options for customization.
Alternatives: Flex Slider, Slides.js, PhotoSwipe, Supersized, Camera, RefineSlide, BlueberrySequence.js and Galleria.

8. Responsive Tables
Data tables in responsive design can be troublesome: you want it to not break responsive layouts, not hide content, let you see entire rows and columns, not be too small to read easily or zoomed in too far requiring scrolling. Here ZURB comes out – a simple JavaScript/CSS combination containing two key files: responsive-tables.js and responsive-tables.css. It works by taking the first column, which is often the unique key for a table, and “pinning” it to the left of the table, allowing you to scroll the other columns under it.
Alternatives: Responsive Data Tables, Stackable.js, Footable, Responsive Tables, Responsive Tables, Responsive SEO Friendly Data Tables.

9. Responsive Design Testing
Building a responsive website means constantly testing how it displays across mobile and tablet devices. You could resize the browser yourself, or use a browser extension or tools within your IDE; but there is an extremely simple tool that allows you to see how a page displays on different screen sizes, in a single view. With Matt Kersley’s RWD testing tool you just have to enter your website’s URL into the address bar to test a specific page in different widths and device sizes. Also you can share the results of the test with others by adding any URL to the end of the testing page address. One major benefit of this tool is that it can be self-hosted (available on GitHub) by downloading and installing it on your own site. You can then navigate through the frames that your website appears in, testing the entire site effortlessly.
Alternatives: Screen Queries, Screenfly, Responsivepx, Responsinator, Responsive ViewportResponsive.is, and Resize My Browser.

10. Respond.js
The problem with media queries in responsive web design is that they are a part of CSS3 specifications so they do not work with older browser versions such as IE8 and lower. Respond.js comes to the rescue for browsers that don’t support media queries directly, translating any media queries it finds into equivalent JavaScript.The script itself is incredibly small and lightweight. It works unobtrusively, and doesn’t rely on any other scripts or frameworks to run.
Alternatives: Modernizer, Adapt, Categorizr, CSS3 Media Queries and Enquire.js.

The tools above are ultra useful for any RWD project from the planning and designing phase right through to testing, and what’re your favorites?

Welcome to share your view points.

Helen Boyarchuk

Helen Boyarchuk
Helen.Boyarchuk@altabel.com
Skype ID: helen_boyarchuk
Business Development Manager (LI page)
Altabel Group – Professional Software Development

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Not so long ago you could only develop on Objective-C (for iOS) or Java (for Android). Still recently a lot of new mobile app development frameworks have appeared and found their own niche on the market. I think, you have heard about such frameworks as PhoneGap, Sencha, jQTouch, jQuery Mobile, Kendo UI, Corona, Titanium Appcelerator, RubyMotion and many others that allow to create apps using Javascript, Java, Lua and Ruby.

So how do you define what framework to use? Below you could find a few tips that could help you to make a choice.

1) If you know programming
Of course most of the frameworks expect you to know programming. Still even if you don’t know programming there are a number of app builders that allow you to create complex apps in the “drag and drop” environment. In case you are dreaming about developing a game, so GameSalad will help you: it has an intuitive Drag and Drop UI which gives you the possibility to build apps without coding. If your intention is to develop a business app, so BiznessApps will let you build the app for many scenarios.

2) Create apps in a language you know
I suppose you all know that the “native” languages for iOS and Android are Objective-C and Java respectively. Even if you don’t know these languages, please don’t give up as you can create apps in a language that you know. In case you know Javascript, you can use Sencha Touch to build a HTML5 app and then compile it for iOS or Android native app using Phonegap J In case you know Lua, you can easily build a cross platform native game using Corona. In case you know Ruby, RubyMotion will help you to build an iOS app. In case you are master of Java but would like to make smth for iPhone, you can use trick with GWT-touch to create HTML5 app and then compile it using PhoneGap J.

3) How native or cross-platform do you want it?
Do you know that there is a kind of tradeoff that some of the frameworks make? For example, a HTML5 app build with the help of Sencha, jQtouch and GWT-touch could have almost native look and feel, but not 100% native of course. But if you use Titanium and Corona with native UI components, the apps will have 100% native look. The advantage of HTML5 apps is that they could be further compiled for more platforms. Plus they can also be deployed on the web without making any code changes.

4) If you are a web developer and want to continue using your old tools
Firstly, hello to web developers who are reading this article 🙂
Another advantage of these HTML5 apps is that a web developer already knows most of the technologies and has most of the tools available. For instance, if a web developer has to create an app using jQuery Mobile or Phonegap, he can use IDE which he has always been using, for debugging you are welcome to use Chrome Inspector or Firebug. If you still insist on using your trusty tools, go on with Sencha or jQuery Mobile.

5) If you select a frame by taking into consideration their “pros” or “cons”
In case you choose a framework based on “+” and “–“, so hope the following short list will be of use to you.

· jQuery Mobile

+ Great tools like Theme Roller and Codiqa UI builder;
+ View only framework (you can use whatever to handle the MC parts)
+ Based on jQuery;
+ Lots of plugins;
+ Most popular.

– Could be too heavy for some smartphones;
– No official paid support.

· Sencha Touch

+ Based on ExtJS;
+ Complete MVC framework;
+ Official paid support;
+ Sencha Architect is great.

– Some controls look off;
– No native controls;
– Performance;
– Few customization options;
– Client side DOM generation.

· Titanium

+ Rapid prototyping;
+ Web-oriented;
+ Well-known JavaScript for many developers;
+ It’s sross-platforming;
+ Native UI.

– Increasing complexity (and costs);
– No freemium;
– Flexibility limitations;
– Native UI*.
*The native UI is both an advantage and disadvantage. If your UI is simple enough, you may be able to use a single code base. But more than likely, you will need to tweak the UI for each platform to take full advantage of each platform.

· PhoneGap

+ Single code base for all platforms;
+ Rapid testing and deployment;
+ Multiply Platforms;
+ Access basic native functionality;
+ Offline usage.

– Poor performance;
– Lack pre-built UI widgets, transitions, standard controls;
– Access advanced native functionality;
– Complex Business Logic etc.

Make your right choice my dear readers 🙂

Hope this article was interesting and helpful to you. Should any questions or comments arise, you are welcome with them.

Elvira Golyak

Elvira Golyak
Elvira.Golyak@altabel.com
Skype ID: elviragolyak
Business Development Manager (LI page)
Altabel Group – Professional Software Development

About five years ago, no one had heard about jQuery. Today, we can say for sure, it is the most popular Javascript library in the world. The statistics clearly says for that fact: in the year 2012 jQuery was used by more than 50% of the top 10,000 websites in the world. That’s a massive endorsement by the world’s web developers 🙂 This kind of widespread adoption is rare for JavaScript libraries, even unprecedented. And the question is: what makes jQuery better than using one of the other (also excellent) JavaScript libraries? There certainly should be reasons for this. Let`s take a look at several of them:

– jQuery has vibrant and helpful community and it is easy to learn. jQuery has very good documentation, in addition there is a great number of tutorials on the web demonstrating jQuery usage. If you encounter a problem, you can ask a question on any web development forum and there will be a large development community waiting to help you :). Lots of people not only use it but also write tutorials, share their code, make plugins. Also jQuery has a very low learning curve.

– Widespread adoption. Countless big players on the Web are using jQuery: IBM, Netflix, Google (which both uses and hosts the jQuery library), and Microsoft, which now includes jQuery with its MVC framework and works with the open-source jQuery project to contribute new features to the jQuery library. Also there are thousands of big sites that use jQuery: among them are WordPress.com, Pinterest, Reddit, MSN.com, Amazon, Yandex, Microsoft.com, Instagram, Slideshare, the list can go further and further

– Cross-browser Compatibility. Cross-browser compatibility of jQuery is very successful. Most of the code you write will run exactly the same on all the major browsers. In fact, one of the biggest challenges in Ajax/JavaScript programming is cross-browser inconsistencies – it may drive the developer mad. For example, a design that renders perfectly on Internet Explorer , may not run that well on Mozilla Firefox,. So JQuery “fixed” this issue

– JQuery is simple. jQuery objects are chainable. JQuery objects return other jQuery objects and it is possible to perform additional operations in a chain. There is no need to iterate every object one by one.

– Small and clever core library. The jQuery core library is only about 24KB in size (Minified and Gzipped) so it can be easily included into your application and it`s very fast as well. That is due to the fact that a lot of fairly common functionality has been omitted from the jQuery core library, and relegated to the realm of the plugin. Also developers have even a smaller alternative: Sizzle. Sizzle library is 4 KB and it’s simplified just to be used for css selection.

– Great number of plug-ins. The reason of why there are so much jQuery plugins is that jQuery is designed to be pluggable. By including only a core set of features while providing a framework for extending the library, jQuery team made it easy to create plugins that can be reused in all jQuery projects as well as can be shared with other developers.

– CSS3 Selectors Compliant: jQuery fully supports the CSS3 selector specification.

– jQuery UI. jQuery User Interface separates out higher-level constructs and is packaged into a neat library that sits on top of jQuery. UI capabilities might not be stronger than some other libraries such as ExtJs but it’s getting better.

Hope these facts will be of use to you. Of course, the things I listed here might not include all the good points about jQuery and you may add your own points to the list 🙂
Thanks in advance!

Anna Kozik

Anna Kozik
Anna.Kozik@altabel.com
Skype ID: kozik_anna
Business Development Manager (LI page)
Altabel Group – Professional Software Development

JavaScript has been popular with the developers for a number of years and has been more discussed than jQuery. However it seems to me that we should also pay attention to jQuery as, I bet, we could find a number of interesting facts about it.

Let`s start from the brief history of the two.

Initially JavaScript was called LiveScript and was invented by Netscape. In 1996 Netscape decided to change its name to raise the popularity of the language by combining it with Java. At that moment Java was used to prepare individual plug-ins. Despite the fact that JavaScript developers have tried to recreate the same syntax and functionality, as in Java, between the two languages, there are many differences. The most important difference is that the Javascript – client is an interpreted scripting language. It runs in the browser without first compilation, which is a mandatory action for programs written in Java…but it is another story.

So JavaScript is a scripting language that is mainly used for website development and client side validation.

The most common use of JavaScript is to write functions that are included in the HTML to interact with HTML elements. For example:
– Sending HTML page data to server using AJAX;
– Animating HTML element;
– Validating the HTML form;
– Storing user information that may help for Web Analytic, Ad tracking etc.

As for jQuery, when it came out in January 2006, from first sight, it looked like a cute hack and in general jQuery was seen as a passing fad. Because the chaining stuff looked like a bit gimmick and the library didn’t look like it would cover all of the bases. Still over the past months we could see that the first impression was wrong, because jQuery encapsulates an extraordinary range of common functionality, and provides a clever plugin API for any functionality not included by default. And the most important thing is that the using of the library obeys best practices and plays well with other JavaScript code.

Mostly jQuery focuses on designers and inexperienced developers, still it could be of interest to experienced programmers as well. Here I will try to enumerate the reasons why:

1) Element’s selecting. Every jQuery operation starts from selecting one or more nodes from the DOM. jQuery’s selection syntax is an interesting hybrid of CSS 1, 2, bits of CSS 3, some XPath and a few custom extensions as well.

2) Namespace. The main point in creating a good JavaScript-code for further using is carefully managed namespace. There is a single global namespace in JavaScript and many programmers clog it without any needs. More sensible developers minimize their intervention to the space using different methods. jQuery introduces the only object in the global namespace: function or object jQuery. Everything else is either direct property jQuery or a method of the object returned by a call to jQuery.

3) The $ function. You could say it is not true that that jQuery introduces only one object in the global namespace as there is also a $: the $ symbol is also set up as a shortcut for jQuery. This makes enough gently: if you want to back your former function $ (for example, if you have a piece of code based on Prototype), you can call jQuery.noConflict (), to return to his old the $. At the beginning you could considere the widespread using $ in jQuery is no more than a clever trick. But for some reason thinking of it in terms of the jQuery symbol makes everything seem a lot more sensible

4) Chaining. jQuery development team often boast about supporting this library call chains, reaching statements like «jQuery created in order to change your style of programming in JavaScript». Frankly speaking, this technique is a big turn-off than the road to the future but you can make good use of jQuery while avoiding lengthy chains of methods entirely. Briefly speaking, the chain can be used for some interesting tricks. In addition to using a set of DOM-samples you can use jQuery-end () method to move the object on the stack and exit the current context. It’s a bit hard to explain, but when you use a method that changes the current (object) context (for example, children () or filter ()), you can use the end () later to return to the previous sample.

5) Manipulating with DOM. jQuery offers a few smart ways of making large scale manipulations to the DOM. The first is quite surprising: the jQuery function can take a snippet of HTML which it will turn in to a DOM element.

6) The returned beast. Object, which is returned by the selectors jQuery, could be quite interesting. It represents a set of DOM-elements and behaves a bit like an array—it has a length property, items can be accessed by index and (most importantly) Firebug treats it as an array when displaying it in the interactive console. This is a clever illusion; the collection is actually a jQuery object, incorporating a large number of methods which can be used to query, modify and extend the collection of selected elements.

There are three principle categories of jQuery methods: those that manipulate all of the matched elements, those that return a value from the first matched object, and those that modify the selection itself. If you have Firebug you can try these out interactively: use this Insert jQuery bookmarklet first to load the jQuery library in to any page, then paste the code examples in to the Firebug console. I would like to note a convenient symmetry of these methods: they are used for display attributes (taking 2 arguments passed to or from a number of properties of the object), and to read the values of these attributes (if only one argument). This symmetry is used throughout jQuery, which greatly facilitates the storage API.

7) Unostentatious programming. The best web applications are those that can still function in disconnected scenarios, and the best method to achieve this is using JavaScript, when the events are assigned to elements only after all the HTML-page are loaded by the user. In jQuery there is excellent support for this approach. First, the paradigm of the selectors to select a node is fundamental for jQuery, and for the non-intrusive programming in general. Second, jQuery provides solutions for window.onload problems

8) jQuery and Ajax. jQuery has the best API for working with Ajax. The most simple form of an Ajax call looks like jQuery(‘div#intro’).load(‘/some/fragment.html’). This performs a GET request against /some/fragment.html and populates div#intro with the returned HTML fragment. It’s a neat shortcut, but what if you want to do something more advanced like display an Ajax loading indicator? jQuery exposes custom events (ajaxStart, ajaxComplete, ajaxError and more) for you to hook in this kind of code.

9) Extensions. Considering the whole set of features as standard, it is worth noting that uzhaty jQuery version is only 20 KB, and even less if you use archive (. Gz). Additional functionality that extends beyond this delivery can be arranged with the help of extensions that can (and do) to add new methods to an existing jQuery. If you want, you can do something like this: jQuery (‘p’). bounceAroundTheScreenAndTurnGreen(); The extension mechanism in jQuery provides documented methods for adding them to the system. Simplicity and ease of use have attracted a large community of authors such extensions, the extensions directory has more than a hundred examples. Another nice feature is the ability to add your own selectors as well as their own methods. MoreSelectors expansion adds methods like div: color (red), which, for example, selects all div with red text.

10) Several words about leaky abstractions. When studying jQuery with more respect, you could struggle with one philosophical blocker. In certain cases, jQuery uses a truly unique methods to achieve a particular function: some parts (such as source code selectors) of this library look scary. If you do so , it requires an understanding of how the library works. To understand this, you need to know some basic concepts, the differences between browsers and a set of methods, which the library uses to get around them. No library can protect you 100% against weird browser behaviour, but as long as you have a grounding in the underlying theory you should be able to figure out if a problem stems from your own code, your library or the underlying implementation.

11) Conclusion. I hope enough evidence was brought to have a positive conclusion about jQuery: it is not a regular library. It contains a lot of interesting ideas that can surprise even the most experienced JavaScript programmers and teach them something new. Even if you will not use it in the work, it is necessary to devote some time and explore the “ecosystem” jQuery.

Elvira Golyak

Elvira Golyak
Elvira.Golyak@altabel.com
Skype ID: elviragolyak
Business Development Manager (LI page)
Altabel Group – Professional Software Development


%d bloggers like this: