Since jQuery’s initial release more than eight years ago, it has grown in popularity among web developers and clients alike – nowadays jQuery is considered to be the foundation of the modern Web. In these past eight years the cross platform library was bundled with countless developer tools, sites and of course, with JavaScript. Now it’s time for jQuery 3.0.
jQuery 3.0 is released
jQuery 3.0 was just released – this version of jQuery has been in planning since October 2014. jQuery 3.0 is a much faster, slimmer version of the old one with great attention given to compatibility. All the old IE workarounds have been removed and more powerful modern API’s were implemented.
Upgrading to jQuery 3.0 is easy
Upgrading to 3.0 is relatively easy and jQuery even released a neat little guide which you can follow. Not only that but with the use of jQuery’s Migrate 3.0 plugin you’ll be able to see any compatibility issues in your project or code.
The new jQuery 3.0 is slim
In the future you won’t really have to use AJAX, you’ll simply be able to use a standalone library that focuses on AJAX requests or a combination of class manipulation and CSS for web animations. The 3.0 version also features a slim version which removes all AJAX and effects modules – this version also excludes any deprecated code. Web developers are of course able to include or exclude any modules they want, thanks to the custom build API used by jQuery 3.0.
Since it’s a very fresh release, there are a few necessary tweaks which will be made in the following months – jQuery Mobile and UI currently have some issues.
Changes and features in 3.0
IE workarounds are removed
The old workarounds and hacks for IE9 got removed in order to make jQuery 3.0 sleeker and faster. If you still need support for IE 8 you’ll just have to use the 1.12 release because versions such as 2.0 don’t offer full support for older versions of Internet Explorer.
jQuery 3.0 runs in strict mode
Since most browsers supported by jQuery 3 also support strict mode the new release has been built with it in mind. Your personal code is not actually required to run in strict mode and you don’t need to rewrite your existing code if you want to migrate to version 3.0. Strict mode can work with non strict mode and vice-versa – the only exception is related to some versions of ASP.NET.
A new API for animations
The request AnimationFrame() API is now used for animations, thus making them much faster and smoother. jQuery 3.0’s new API is only used with browsers that fully support it – other browsers such as IE9 will use the older API in order to display animations.
Escaping strings with special meaning got easier
The jQuery.escapeSelector() method allows web developers to escape characters or string that have a different meaning in CSS in order to use them in a jQuery-selector. Example:
„If an element on that page has an id of „abc.def”, it cannot be selected with $(„#abc.def” ) because the selector is prased as „an element with id ‚abc’ that also has a class ‚def’. However, it can be selected with $(„#” + $.escapeSelector( „abc.def”) ).”
Class manipulation supports SVG
Although jQuery 3.0 doesn’t fully support SVG, the methods that manipulate CSS class names such as .hasClass() and .addClass() can be used for SVG documents. Web developers are now able to find and modify classes with jQuery in SVG then style these classes with CSS.
Deferred objects are also compatible with JS promises
JavaScript Promises are a special type of objects usually used for asynchronous computations – these have been standard in ECMAScript 6 and their features and behaviours are specified in the Promises/A+ standards.
In the new version of jQuery deferred objects are compatible with the Promises/A+ standards. Deferreds are also chainable objects, which means it’s possible to create callback queues.
With the new release of jQuery the asynchronous callback functions executions are changed – Promises allow web developers to write asynchronous code that is more similar in logic to synchronous code.
Adrian Ababei / Mar 11'2016
The World Wide Web Consortium (W3C) is putting cybersecurity on its radar. It has announced that it is launching a new working group designed to standardize Web authentication and provide a more secure and flexible solution to password-based logins.
“Every other week you see news of a password leak or data leak from another major site, and as a user of the Web, every place you go you are asked to log in with a username and password,” said Wendy Seltzer, technology and society domain lead for the W3C. “That is difficult to manage on the user side, and not the best we can do in security.”
The new Web Authentication Working Group will work on creating a Web-wide standard that provides strong authentication without relying on a password. According to the organization, even strong passwords are susceptible to phishing attacks, database breaches and other hack attacks.
“When strong authentication is easy to deploy, we make the Web safer for daily use, personal and commercial,” said Tim Berners-Lee, director of the W3C. “With the scope and frequency of attacks increasing, it is imperative for W3C to develop new standards and best practices for increased security on the Web.” The W3C’s work will be supplemented with the FIDO Alliance’s FIDO 2.0 Web APIs. According to Seltzer, FIDO has already had success developing its own multi-factor authentication, and its APIs will help the working group ensure standards-based strong authentication across all browsers and related infrastructure. “Our mission is to revolutionize authentication on the Web through the development and global adoption of technical specifications that supplants the world’s dependency on passwords with interoperable strong authentication,” said Brett McDowell, executive director of the FIDO Alliance.
“With W3C’s acceptance of the FIDO 2.0 submission, and the chartering of this new Web Authentication Working Group, we are well on our way to accomplishing that mission.” In addition, the working group will complement prior work on the Web Cryptography API and Web application security specifications. “We’ve seen much better authentication methods than passwords, yet too many websites still use password-based logins,” said Seltzer.
“Standard Web APIs will make consistent implementations work across the Web ecosystem. The new approach will replace passwords with more secure ways of logging into websites, such as using a USB key or activating a smartphone. Strong authentication is useful to any Web application that wants to maintain an ongoing relationship with users.” The Web Authentication Working Group’s first meeting will take place on March 4 in San Francisco.
Source: http://sdtimes.com
Adrian Ababei / Mar 09'2016
Website personalization takes into account that users have different motivations, devices, locations and time constraints. With current technology, marketers can now gather specific information about what a website visitor is searching for and translate their visit into a higher conversion.
Itai Sadan, co-founder and CEO of DudaMobile, a mobile website creation platform states: “Organizations spend tens or hundreds of thousands of dollars, and sometimes even millions of dollars, to create robust dynamic web experiences”
DudaMobile recently released inSite, a service that adds dynamic web content to pages based on the customer’s behaviour in a bid to create personalized viewing experiences.
Here is a list of five ways companies can start to increase their conversion rate through website personalization:
Visitor frequency can change your conversion rate
Visitor frequency often determines different user experiences. A first time visitor will most likely look for different information than someone who has visited the site repeatedly.
LegalAdvice’s marketing officer David Reischer suggests that tracking each user individually can offer visitors different user experiences: “We utilize a cookie to track a returning visitor so that we can direct them to the most appropriate and relevant page. This makes site navigation easier for repeat users.”
First time visitors should have access to a contact form to capture leads, a phone number or business address or a video tutorial that explains a service or product.
DudaMobile’s CEO explains the system for frequent visitors: “For frequent visitors, add a spot to sign up for a mailing list or add information about new products or services”
Geo-location is also important
Geo-location blends offline and online marketing. Knowing where your user is located when visiting your website is a game changer for marketers – “Online we can follow our customer’s individual buying journey, optimizing it every step of the way” explains Bart Heilbron from BlueConic. He continues: “However, we were never able to use these insights in our offline interaction. With geo-location, we are now able to.”
If a potential customer is visiting your website from a very close distance there’s a high chance they will become a customer if they see an address and a coupon that says “Come in today and get 20% off”. Restaurants can use an open table button to make reservations quickly or a Google Map that provides directions to the businesses location.
Always adjust your content
Adjusting your content to certain seasons, weeks or to your particular business hours can increase your conversion rate as well. You can replace your phone number with a contact form during the time your business is closed – this can help you avoid missing out on potential customers who want to reach you outside business hours.
“The ability to offer different products over the course of a day based on targeted trends, habits or culture will increase conversions,” said CEO WebiMax, Ken Wisnefski. “For example, a restaurant offers a different menu throughout the day as they switch from lunch to dinner.”
Recognize special events and holidays
Recognizing special events or holidays is a great way to connect with your customer and personalize your website. You can change your website’s theme during Valentine’s Day or during the 4th of July. “This could have a positive effect on customer engagement, and in turn conversion,” said Sadan from DudaMobile.
Adapt your content to your visitor source
Knowing your visitor source and adapting accordingly can have a great impact on your conversion rate simply because you can create dedicated landing pages for your potential customers. According to Sadan, “Visitors that come to your site from an email marketing campaign or as a referral from another site should receive dedicated messaging that is aligned with the messaging they saw in the email or the referring site. Offering a coupon at this point could also be a good idea.”
Adrian Ababei / Mar 07'2016
When it comes to mobile development, it’s much easier to create a brand new responsive website than to upgrade an existing website from unresponsive to responsive. That being said, the task is definitely doable if you follow these mobile development tips:
This is a list of different mobile development methods which you can use to roll out a responsive redesign.
Responsive retrofit
If retrofit works on your current project or website, it’s a great option for quick mobile development. It’s definitely not a magic wand but you can definitely retrofit an existing desktop website to a mobile one in a relatively short period of time – some projects can last under two months while some can last just a few weeks.
Parallel beta
You should definitely use a beta and have your users test it out in order to make sure you get the right results. Mobile development companies use this method to get a lot of user feedback and implement different solutions to fix potential problems.
Mobile-only responsive
Similar to the parallel beta method, using an existing m-dot site to experiment and gain user feedback is a great idea. The existing m-dot website can be used as a sandbox for rolling out responsive design in stages. This method was used by BBC and the Guardian to upgrade their websites, so you know you’re in good company.
Conclusions
With the number of mobile users surpassing desktop users, it’s essential for any organisation or company to have a fully functional responsive website to handle this new trend.
Adrian Ababei / Mar 05'2016
Web development experts tend to debate a lot when it comes to Javascript vs jQuery. There is really no correct answer in this situation simply because either of them can be used to create approximately the same effects or results - it’s contextual.
Generally speaking, jQuery should be enough for your average web development project but in certain cases JavaScript may be necessary to successfully complete it. As a rule of thumb, every web developer should learn both jQuery and JavaScript so let’s get down to the details:
Javascript
Javascript is a web programming language that’s oriented on objects. The programming language is usually used to introduce certain functionality into web pages. The Javascript code is automatically loaded by the browser. Javascript is very similar to C when it comes to syntax – it’s very popular among programmers because you can create scripts for multiple activities such as adding effects or creating menus on certain page elements.
Asynchronous Javascript and XML, also known as AJAX is becoming more and more popular in the programming world. With this technique, HTTP requests are made in the background, without needing to reload the page – changes to certain sections of the page are done in real time. When using AJAX, programmers can create interfaces with limited response time simply because the time for reloading a HTML page is removed.
jQuery
jQuery was released back in 2006 as a library build with Javascript – jQuery helps web developers load dynamic content onto pages, handle events, manipulate CSS and animate certain page elements. If you’re using jQuery you won’t have to worry about how browsers interpret the code. jQuery is a very useful Javascript library that reduces vague code and collects functions which in turn increases your programming workflow.
jQuery 1.x is supported by Internet Explorer 6 or higher and all browsers in general. With jQuery 2.x, the support for IE 6-8 was dropped but instead jQuery supports Internet Explorer 9 or higher.
The jQuery user interface is a collection of GUI Widgets, visual effects and themes created using jQuery, HTML and CSS.
jQuery UI effects include:
Add Class, Toggle Class, Remove Class, Switch Class
Color Animation
Effect
Hide, Show
Toggle
jQuery UI Widgets include:
Accordion
Autocomplete
Button
Datepicker
Dialog
Menu
Progressbar
Selectmenu
Slider
Spinner
Tabs
Tooltip
jQuery UI utilities include:
Position
Widget Factory
Javascript code:
function backgroundChange(color) {
document.body.style.background = color;
}
Onload=” backgroundChange(‘blue’);
Where as in jQuery the code is much simpler and clean:
$(‘body’).css(‘background’,’blue’);
Javascript vs jQuery – Which one to use?
For most web development projects jQuery will suit your needs just fine but as stated before, learning both Javascript and jQuery can be an asset. Keep in mind that one of the biggest differences between Javascript and jQuery is the fact that jQuery can work with many browsers automatically while JavaScript has cross browser compatibility issues due to poor implementation practices.
Adrian Ababei / Mar 03'2016
HTML 5 is currently the latest version of the Hypertext Markup Language. Unforunately, it’s not yet supported by all of the popular browsers, especially when we’re talking about older versions of popular browsers such as Firefox or Chrome. That being said, HTML4 is supported by every browser available, which gives it a bit of an edge.The doctype declaration is also much shorter in HTML5:< !DOCTYPE HTML >As compared to HTML4’s doctype declaration:< !DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""< html" >http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >< html lang="ar" dir="ltr" xmlns="" >http://www.w3.org/1999/xhtml" > HTML also boasts new tags such as:< audio >< video >< article >< nav >< header > What this means is that you won’t use the same tag for everything, as previously done in HTML4 – these tags offer a standardized structure and makes them easier to read.Footer and Header tags don’t only mark the end or the start of a page but can mark the end or start of a section as well. Basically, you can find multiple instances of these tags on the same page you’re working on.Some tags from HTML4 have been found redundant and thus have been removed from HTML5 – browsers don’t support these tags so it’s a good idea to have them removed:< acronym >< applet >< basefont >< big >< center >< dir >< font >< frame >< frameset >< noframes >< strike >< tt >HTML5 also offers error handling, a feature which was much desired by web developers for years – this basically means that each browser you test will give you the same error if something doesn’t work right. Meanwhile, HTML5 is constantly growing and developing, you won’t hear about the “finished” version of it anytime soon – it just gets better and better. With HTML5 you can use 3D or 2D effects and graphics, allowing you to create more interesting projects.HTML5 video is starting to replace Flash very quickly – YouTube started using it due to its better optimization and less resource use. Another advantage HTML5 has over Flash is that it doesn’t require any installation and devs don’t need certain tools to write code, as is the case with Flash. Some developers may prefer Adobe Dreamweaver but it’s not really needed. Edge is a HTML5 animation tool specifically designed to produce animations very similar to Flash.
Adrian Ababei / Feb 25'2016
The concept is simple: you can use more complex CSS files that could contain variables, functions, “mixins” and other things, too. These files would be compiled after development into normal CSS files supported by all the web browsers out there. First, you would ask yourself: “Why should I use a more complex CSS, if the old and simple CSS works just fine?”. The main answer for this question is quite simple: because it simplifies your work, you will write less. For a more detailed answer, I will write some reasons why a preprocessor is better: - regular CSS is a very simple language: you have selectors for targeting elements and you style these elements with different properties; yes, this would make the language more friendly for amateurs and designers (even if they don’t have experience with computer programming), but this forces you to do things the long way - with CSS preprocessing you can start using variables and functions, this will allow you to reuse parts of your code over and over again - you wouldn’t repeat yourself anymore CSS example: .simple { font-size: 20px; font-weight: 600; line-height: 1.3em; text-transform: capitalize; } .simple-red { font-size: 20px; font-weight: 600; line-height: 1.3em; text-transform: capitalize; color: red; } .simple-blue { font-size: 20px; font-weight: 600; line-height: 1.3em; text-transform: capitalize; color: blue; } The same code using Less: .simple { font-size: 20px; font-weight: 600; line-height: 1.3em; text-transform: capitalize; } .simple-red { .simple; color: red; } .simple-blue { .simple; color: blue; } - as you can see, nothing is repeated, that means you will save a lot of time and you can use this time for other things - you will update your code easier (besides the fact that you don’t need to remember some things) For example, you can define variables for colors like this: $red: #FF0000; $blue: #0000FF; After that, you can use them for different elements, for example: h1 { color: $red; } h2 { color: $blue; } If you decide that $blue is not ok and you want to change it, you only modify it once at the beginning and it will work for all your code. - your CSS code will be more organized, both LESS and SASS support nested definitions; for example: Normal CSS: p { color: red; font-size: 15px; font-weight: 600; } p span { color: blue; font-size: 16px; font-weight: 300; } p span:hover { color: #FFF; text-decoration: underline; } Using a preprocessor: p { color: red; font-size: 15px; font-weight: 600; span { color: blue; font-size: 16px; font-weight: 300; &:hover { color: #FFF; text-decoration: underline; } } } - it’s easy to use; for example, for SASS you would write a simple command line to watch for your SASS files and compile them automatically if you would modify anything - you will spend more time to make your website prettier (using the time you saved) - it’s easy to use, you will learn it faster than you think - you can use frameworks, the most popular one, Compass, automatically generates vendor-specific CSS properties and has lots of useful functions
Adrian Ababei / Feb 16'2016
Every web page on the internet can have proper HTML headings. These headings are identified by the following heading tags <h1> <h1> <h2> <h3> <h4> <h5> and <h6> where the „h” stands for heading.
HTML Headings – Why use them?
Heading tags are used for two important things:
Firstly, headings are a great way of making titles and subtitles visible for your visitors or users. It can also be used to summarize the next paragraphs and help your visitors understand what they will read under the heading.
Secondly, headings are used to indicate the most important pieces information on your page to search engines. Some SEO experts seem to think headings are not that important when it comes to optimization but every little bit helps.
Here are the rules
HTML headings on a page need to follow certain rules, as follows:
Each HTML page can contain one or more H1 to H6 tags
Each HTML tag needs an opening tag and a closing tag - <h>yourheading</h>
There are six possible levels of tags in total: h1, h2, h3, h4, h5 and of course h6, h1 being the first level heading and most important one and h2 being the second level heading, h3, the third level heading and so on.
HTML Headings – Best Practices
Here are two examples of properly used HTML headings for a test page:
<h1>Your-title<h1>
<h2>Your-subtitle<h2>
<h3>Your-sub-subtitle<h3>
<h4>Your-sub-sub-subtitle<h4>..etc.
This page example now has the main title in H1 and less important but still relevant titles or summaries in tags such as H2, H3, H4, etc. Keep in mind that this template can only be used on certain types of content. If your content doesn’t allow H1, H2, H3, H4 splitting, you can opt for a different approach and still use headings properly.
Another way you can properly use HTML headings is as follows:
<h1>Your-title<h1>
<h2>subtitle-1 <h2>
<h2>subtitle-2 <h2>
<h2>subtitle-3 <h2>
<h2>subtitle-4 <h2>
In the example above subtitle 4 is just as important as subtitle 2, but not as important as the title. With this template you are telling search engines that all sub titles on your page are equally important – this heading template maintains good readability and structure.
HTML Headings – The wrong way
Sometimes people make mistakes when it comes to their proper use of HTML headings. It can happen when you are trying to make a subtitle text bigger with a heading – don’t do it, just increase the font size. Here is an example of poorly used HTML headings:
<h1>Your-title<h1>
<h3>subtitle-1 <h3>
<h4>subtitle-2 <h4>
<h2>subtitle-3 <h2>
<h3>subtitle-4 <h3>
In this example, we start with H1 and then H3, H4, back to H2 and back to H3. Always keep in mind that HTML headings need to be logical – imagine it as a book where H1 is the title and H2 can either be a chapter or a sub-chapter.
Adrian Ababei / Feb 16'2016
Drupal development is becoming an increasingly popular choice for developers all around the world. This has sparked the interest for upgrades for this technology. Drupal used to work with the PHPTemplate engine which sought to separate the presentation layer from the logic layer. Recently Drupal development took one step further by replacing PHPTemplate with Twig, the latter being more secure and powerful.
Twig & Drupal Development
With Drupal 7, text previously submitted by the user needed the check_plain() function in order to prevent the ever-present vulnerability of cross site scripting or XSS.
If a theme’s output wasn’t sanitized, it was a huge security risk. Autoescaping was recently accepted into Drupal 8 as well, which made Drupal development much safer.
PHP functions are also removed from templates, in line with separation of concerns. Here is the new Drupal development mark-up:
Old: <?php print render($content); ?>
New: {{ content }}
The new syntax makes Drupal development faster and cleaner, a clear separation between presentation and logic with an added security boost. Twig offers many other benefits including that of inheritance – this has been called one of Twig’s biggest assets.
By integrating Drupal development with Twig, the need to copy and paste the parent theme template files into custom templates is eliminated. Twig limits the amount of template code and files you need to organize within your theme.
{% extends "themes/sub_bartik/templates/node.html.twig" %}
This is quite similar to PHP’s „include function” – it allows you to create hookable, dynamic templates. But there’s another feature which makes Twig great: Twig blocks
Parent file:
{# This empty block allows child templates to insert markup into this place in the header without re-writing the entire template. #} {% block header_fields %} {% endblock %}
New file:
{# Override the header_fields block to put field_image there because this site needs it there. #} {% block header_fields %} {{ content.field_image }} {% endblock %}
With the use of Twig and Twig blocks, Drupal development will become much easier – this also makes Drupal websites much safer and powerful.
Adrian Ababei / Oct 23'2015