CSS

Introduction to HTTP/2

May 23, 2015 .NET, Communication, CSS, HTML, HTTP, HTTP2, IIS, KnowledgeBase, Microsoft, Protocols, Visual Studio 2015, VisualStudio, VS2015, Web, Windows, Windows 10 No comments

The reason I got started with topic is that, there were some buzz around Visual Studio 2015 RC support for HTTP/2 and Windows 8 – IIS support for HTTP/2. I was curious to learn further about the HTTP/2 and sharing my findings in this article.

About HTTP/2.

HTTP/2 is the first new version of HTTP since HTTP 1.1, which was standardized in RFC 2068 in 1997.

HTTP/2 enables a more efficient use of network resources and a reduced perception of latency by introducing header field compression and allowing multiple concurrent exchanges on the same connection.
It also introduces unsolicited push of representations from servers to clients.
This specification is an alternative to, but does not obsolete, the HTTP/1.1 message syntax.
HTTP’s existing semantics remain unchanged.

“ HTTP/2 allows the server to “push” content, that is, to respond with data for more queries than the client requested. This allows the server to supply data it knows a web browser will need to render a web page, without waiting for the browser to examine the first response, and without the overhead of an additional request cycle. “

Quoting from MSDN:

HTTP/2 is a new version of the HTTP protocol that provides much better connection utilization (fewer round-trips between client and server), resulting in lower latency web page loading for users. Web pages (as opposed to services) benefit the most from HTTP/2, since the protocol optimizes for multiple artifacts being requested as part of a single experience.

The browser and the web server (IIS on Windows) do all the work. You don’t have to do any heavy-lifting for your users.

[Source: MSDN]

HTTP v1.1 vs HTTPv2

HTTP/2 leaves most of HTTP 1.1’s high level syntax, such as methods, status codes, header fields, and URIs, the same. The element that is modified is how the data is framed and transported between the client and the server.

At a high level, HTTP/2:

is binary, instead of textual ( the reason being is – “Binary protocols are more efficient to parse, more compact “on the wire”, and most importantly, they are much less error-prone, compared to textual protocols like HTTP/1.x, because they often have a number of affordances to “help” with things like whitespace handling, capitalization, line endings, blank links and so on. “)

is fully multiplexed, instead of ordered and blocking

can therefore use one connection for parallelism

uses header compression to reduce overhead

allows servers to “push” responses proactively into client caches

Taking help of an image visualization

Major Milestones:

December 2014: The HTTP Working Group presented HTTP/2 to IESG for consideration as a Proposed Standard.
Feb 17, 2015: IESG approved it to publish as Proposed Standard
May 2015: The HTTP/2 specification was published as RFC 7540

Browser Support:

Chrome supports HTTP/2 by default. (from version 41)
Google Chrome Canary supports HTTP/2 by default. (from version 43)
Chrome for iOS supports HTTP/2 by default. (from version 41)
Firefox supports HTTP/2 which has been enabled by default since version 34.
Internet Explorer supports HTTP/2 in version 11, but only for Windows 10 beta, and is enabled by default. Currently only HTTP/2 over TLS is implemented.
Opera supports HTTP/2 by default (from v 28 onwards)

Reference Links:

Visual Studio Tools for Apache Cordova in Visual Studio 2015 RC

May 3, 2015 ANDROID, Cordova, CSS, CSS 3, HTML, HTML5, iOS, JavaScript, jQuery, Mobile, Mobile Frameworks, Mobile SDK, Mobile Services, Mobile-Development, PhoneGap, Visual Studio 2013, Visual Studio 2015, Visual Studio Tools for Apache Cordova, VisualStudio, VS2013, VS2015, Windows, Windows 10, Windows 7, Windows 8, Windows 8 apps development, Windows 8.1, Windows Phone, Windows Phone Development, Windows Phone Store, Windows Store, Windows Store Development No comments

Microsoft has announced that with Visual Studio 2015 – Apache Cordova tools will be integrated within the main install bundle. Using Apache Cordova Tools for Visual Studio you will be able to develop cross-platform mobile applications using single codebase for iOS, Android and Windows Phone.

With support for native device capabilities (e.g. camera, accelerometer, contact), offline scenarios and popular JavaScript frameworks (e.g. Angular, React and Backbone), the Tools for Apache Cordova contain everything web developers need for building cross-platform mobile apps using Visual Studio.

What’s new in Apache Cordova Tools for VS2015-RC

Grunt, Gulp, Bower and Node-based Workflows – Starting with the RC release, it’s also much easier for you to build Cordova apps using tools familiar to many web developers.
New Templates from Ionic and Onsen UI – Ionic and Onsen UI templates are provided as optional to enable developers to try out the new frameworks. Each framework provides a variety of starting points to suit the most common project types.
Fresh Samples, Tutorials and Documentation

If you are using Visual Studio 2013, then you will have to rely on Visual Studio Tools for Apache Cordova CTP3.1 (Add On) to enable cross platform mobile development using Visual Studio 2013 Update 4.

This preview release for Visual Studio 2013 Update 4 and Visual Studio 2015 RC supports building apps for the following device targets:

Android 4+

iOS 6, iOS 7, iOS 8

Windows 8.0 and Windows 8.1 Store

Windows Phone 8.0 and Windows Phone 8.1

Benefits of using Visual Studio Tools for Apache Cordova:

When you develop apps using Visual Studio Tools for Apache Cordova, Visual Studio provides these benefits:

Easy installation. Manual installation of Cordova involves a lot of work to find, install, and maintain the correct version of all the third-party software required to support native platforms. Visual Studio handles all that for you by including a third-party dependency installer that gets you up and running in the first hour.

Plugin management. Cordova plugins provide access to native APIs using a JavaScript interface. Support for custom plugins like those that turn a mobile phone into a barcode scanner are critical to an app’s success. Visual Studio makes it easy to add plugins of all kinds, including core Cordova and custom plugins. You also benefit from IntelliSense for plugins in Visual Studio.

Unified debugging experience. Cross-platform development often requires a different tool for debugging each device, emulator, or simulator. Different tools mean different workflows and lost productivity every time you switch devices. With Visual Studio, you can use the same world-class debugging tools for all deployment targets, including iOS devices and emulators, Android devices and emulators, Windows, and the Apache Ripple emulator.

Write once, deploy everywhere. The common JavaScript and plugin APIs in Cordova make it easy to write an app using a single code base that deploys to all target platforms—iOS, Android, and Windows. Of course, you can always write platform-specific code if and when you need it.

Command line interoperability. The Visual Studio solution directly reflects the file system and is updated in real time. This means that it is easier than ever to use your favorite command line tool with Visual Studio.

Multi-Version Cordova support. The Visual Studio solution allows you to select different versions of Cordova at the project level.

Quoting from MSDN Article – Getting Started with Visual Studio Tools for Apache Cordova

TO Learn more USE THE FOLLOWING RESOURCES

Introducing Visual Studio Code

May 1, 2015 .NET, .NET Framework 4.6, ASP.NET, CSS, HTML, JavaScript, Linux, Linux.World, Mac OSX, Open.Source, Operating Systems, Visual Studio Code, VisualStudio, Windows, Windows No comments

As part of Microsoft’s focused approach to bring in more value to Cross platform & Open Source based initiatives Microsoft has released Visual Studio Code IDE along with .NET Core runtime for Mac, Linux and Windows.

Visual Studio Code, a new, free, cross-platform code editor for building modern web and cloud applications on Mac OS X, Linux and Windows. Visual Studio Code is built primarily with standard web technology (HTML, CSS, JavaScript). Visual Studio Code offers developers built-in support for multiple languages (such as CoffeeScript, Python, Ruby, Jade, Clojure, Java, Javascript, JSON, C++, R, Go, makefiles, shell scripts, PowerShell, bat, xml), the editor will feature rich code assistance and navigation for all of these languages. JavaScript, TypeScript, Node.js and ASP.NET 5 developers will also get a set of additional tools.

Quoting from Visual Studio code site:

Visual Studio Code provides developers with a new choice of developer tool that combines the simplicity and streamlined experience of a code editor with the best of what developers need for their core code-edit-debug cycle. Visual Studio Code is the first code editor, and first cross-platform development tool – supporting OSX, Linux, and Windows – in the Visual Studio family.

Download:

Read more about it from below references:

Visual Studio Code Team blog – http://blogs.msdn.com/b/vscode/

HTML5 – Introduction to HTML5Shiv for Internet Explorer 6/7/8

January 3, 2013 All, Back-2-Bascis, Codes, CodeSnippets, Community, CSS, CSS 3, HTML, HTML5, JavaScript, KnowledgeBase, MSDN, StyleSheets, Web 2 comments

HTML5Shiv is a JavaScript workaround, discovered by Sjoerd Visscher, to enable support styling of HTML5 elements in versions of Internet Explorer prior to version 9.0, which do not allow unknown elements to be styled without JavaScript. Means your CSS classes and attributes will not be applied to the particular HTML5 specific display element, until and unless the object is available in the DOM tree.

What HTML5Shiv does is that it creates the objects for all known HTML5 elements(of the Page) in the DOM tree?. This gives the browser an implication that the particular element is supported and available in the DOM tree and it applies the specific CSS classes to the element.

Follow these simple steps to integrate HTML5Shiv to your existing page:

Step 1: Get HTML5Shiv binary – You can get HTML5Shiv binary(html5shiv.js) from http://code.google.com/p/html5shiv/

Step 2: Insert the necessary code block in the <head> element of your html page (after or before your CSS)

code block:

<blockquote><p>&lt;!--[if lt IE 9]&gt;<br />&lt;script src=&quot;scripts/html5shiv.js&quot;&gt;&lt;/script&gt;<br />&lt;![endif]—&gt;</p></blockquote>

NB: Assuming that html5shiv.js is kept under the scripts folder under the root folder of your web application.

Lets look for a simple example:

Look at the below html sample, with an article element:

Copy the below code block in to notepad and save as ‘test.html’ – to a location wherever you like 🙂

<!DOCTYPE HTML>
<html>
<head>
     <style>
          article {
               font-size: 22px;
               color: orange;
          }
     </style>
</head>
<body>
     <article>Hello!</article>
</body>
</html>

Try to Browse the sample in Internet Explorer 7.0(by double clicking on ‘test.html’ file) and you can see that font color and font size are not applied and as a default fallback – it is displaying text in a normal font and color. It is because browser will not apply the CSS to an unknown element, HTML5 elements are aliens 🙂 for IE 8.0 and below.

[Before – HTML5 Shiv is applied]

Now try to apply the HTML5Shiv code block on to the above sample and see the magic. Modified code block will look like below:

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;!--[if lt IE 9]&gt;<br />&lt;script src=&quot;scripts/html5shiv.js&quot;&gt;&lt;/script&gt;<br />&lt;![endif]--&gt;
     &lt;style&gt;
          article {
               font-size: 22px;
               color: orange;
          }
     &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
     &lt;article&gt;Hello!&lt;/article&gt;
&lt;/body&gt;
&lt;/html&gt;

[After – HTML5 Shiv is applied]

Very nice! right?. Yes, it is indeed helpful for enabling backward support of your HTML5 elements styling on IE 6,7,8 versions.

DOWNLOAD and USE

You can get HTML5Shiv binary from here: http://code.google.com/p/html5shiv/

and Full original, uncompressed source available here: https://github.com/aFarkas/html5shiv

Hope you enjoy this nice tip.

Courtesy: Wikipedia and Google Code

HTML5 Definition Complete, W3C Moves to Interoperability Testing and Performance

December 19, 2012 All, ANDROID, Community, CSS, CSS 3, HTML, HTML5, IE, IE10, Internet Explorer 10, iOS, iPhone, JavaScript, JQuery Mobile, KnowledgeBase, Mobile Frameworks, mobile web, Mobile-Development, MSDN, StyleSheets, Web No comments

The World Wide Web Consortium (W3C) has published — the complete definition of the HTML5 and Canvas 2D specifications on 17 December 2012.

Quoting from the announcement here

Though not yet W3C standards, these specifications are now feature complete, meaning businesses and developers have a stable target for implementation and planning.

HTML5 is the cornerstone of the Open Web Platform, a full programming environment for cross-platform applications with access to device capabilities; video and animations; graphics; style, typography, and other tools for digital publishing; extensive network capabilities; and more.

W3C also announced today the first draft of HTML 5.1 and Canvas 2D, Level 2, an early view of the next round of standardization.

To reduce browser fragmentation and extend implementations to the full range of tools that consume and produce HTML, W3C now embarks on the stage of W3C standardization devoted to interoperability and testing (called "Candidate Recommendation"). Expecting the broad HTML5 Interoperability in 2014.

During this stage, the W3C HTML Working Group will conduct a variety of activities to ensure that the specifications may be implemented compatibly across browsers, authoring tools, email clients, servers, content management systems, and other Web tools.

The group will analyze current HTML5 implementations, establish priorities for test development, and work with the community to develop those tests.

The HTML Working Group has planned for this implementation phase to last into mid-2014, after which W3C expects to publish the final HTML5 Recommendation, available Royalty-Free to implementers under the W3C Patent Policy.

Sencha(Leading cross platform mobile framework product developer) – has published a blog on HTML5 readiness here

Quoting from Sencha’s report

Feature Standardization Status:

A long list of major HTML5 technologies has now reached advanced stages of standardization.

Here is a list of just some of the big technologies in advanced standardization status with the date of the most recent standard:

Candidate Recommendation:

CSS Multi-column (2011)

CSS Flexbox (2012)

CSS Values & Units 3 (2012)

CSS Backgrounds and Borders 3 (2012)

CSS Images & Replaced Content 3 (2012)

CSS Style Attributes (2010)

Web Storage (2011)

Web Sockets (2012)

Web Workers (2012)

Web Messaging (2012)

Touch Events

Proposed Recommendation

Geolocation (2012)

Full Recommendation

CSS Media Queries (2012)

CSS Selectors 3 (2011)

CSS Namespaces (2011)

CSS Color 3 (2011)

Media Fragments (2012)

SVG 1.1 (2nd Ed) (2011)

HTML5 Feature Implementation Progress in Browsers

The very good news is that HTML5 and CSS3 implementations across all major browsers on desktop and mobile have become increasingly convergent. The chart below shows the progress of HTML5 feature implementation across major desktop and mobile browsers in the last three years using the HTML5test.com scoring methodology.

Adoption on Desktop Browsers

Adoption on Mobile Browsers

HTML5 features have been rapidly adopted by all major browsers – with Internet Explorer’s progress on both mobile and desktop being particularly impressive. The feature implementation ramp from IE8 in 2010 to IE9 in 2011 to IE10 this year has been very steep.

Information Sources:

http://www.sencha.com/blog/html5-progress-report

http://www.html5test.com

http://www.w3.org/2012/12/html5-cr

Great News! for all Mobile and Web Developers

HTML5 – Bye Bye ‘WebSQL’/’SQLite’ – Welcome ‘IndexedDB’

December 18, 2012 All, ANDROID, Community, CSS, CSS 3, HTML, HTML5, IE, IE10, Internet Explorer 10, Internet Explorer 9, iOS, iPhone, JavaScript, JQuery Mobile, KnowledgeBase, Mobile-Development, MSDN, Web, Windows Phone, Windows Phone 8 No comments

Since November 18, 2010, the W3C announced that Web SQL database(Sqlite) is a deprecated specification. This is a recommendation for web developers to no longer use the technology as effectively, the spec will receive no new updates and browser vendors aren’t encouraged to support this technology. The new alternative is IndexedDB which is already available on Chrome 12+ and Firefox 5+, and, soon, in IE 10 as well.

The new web database standards adoption progress report as per Html5Test.com – how standards setting can work well.

WebKit browsers originally shipped a copy of the SQLite — an embedded relational database — and then proposed “WebSQL” as a specification to standardize it.
Mozilla objected to its standardization on the grounds that the SQL 92 standard was a poor basis for a web standards technology, and that an implementation (SQLite) shouldn’t be the basis for standard.
As a result, WebSQL standardization was abandoned in favor of a new database standard, IndexedDB which is now the standard database of record for all major browsers.
Firefox, IE and Chrome now support IndexedDB on the desktop.
Chrome for Android is the first browser to support it on mobile devices.

Category	WebSQL	IndexedDB
Advantages	A real, relational database implementation on the client (SQLite).	* Allows fast indexing and searching of objects, so in a web application scenario, you can manage your data and read/write it fast. * A NoSQL database that let you work with your JavaScript objects and indexing them based on your application needs. * Works in asynchronous mode with moderately granular locking per transaction. This allows you to work inside the event-driven module of JavaScript.
Disadvantages	* The spec is deprecated. * Overhead of SQL language you need to master and transform your JavaScript objects into relational schema * Not object driven	Harder to understand if you are coming from the world of relational databases.
Location	Tables contain columns and rows	objectStore contains Javascript objects and keys
Query Mechanism	SQL	Cursor APIs, Key Range APIs, and Application Code
Transaction	Lock can happen on databases, tables, or rows on ‘readwrite’ transactions	Lock can happen on database ‘versionchange’ transaction, on an objectStore ‘readonly’ and ‘readwrite’ transactions.
Transaction Commits	Transaction creation is explicit. Default is to rollback unless we call commit.	Transaction creation is explicit. Default is to commit unless we call abort or there is an error that is not caught.