• Home
  • LinkedIn
  • Twitter
  • Google+
  • About Me
Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

Monday, January 28, 2013

Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources

A Beginner's Journey


I was recently approached by someone at a .NET User Group about how to get started in HTML5, JavaScript, jQuery, CSS3, etc... The developer's primary background was writing thick client Windows applications. I figured the best place to start is to focus on the bare essentials and then work up to more advanced concepts and resources. I started to respond to the developer in an e-mail, but then I remembered what Scott Hanselman said in a recent post and video ...

"Instead, consider writing a blog post or adding to a wiki with your keystrokes, then emailing the link to the original emailer." --Scott Hanselman

So, I decided to make this blog post for the developer and also for anyone else who may be interested in similar resources.

HTML5


So, it is pretty obvious that you are going to need to learn HTML5 if you are doing to do front-end web development. From my experience most developers regardless of their language of choice know the basics of HTML. What they may or may not know are all the newer semantic tags, cross-browser tricks, and native JavaScript APIs.

There is plenty to learn in HTML5 without getting into the JavaScript APIs just yet. Once you learn JavaScript and feel comfortable in it, that may be the best time to tackle topics such as Geolocation, Web Sockets, Canvas, IndexDB, Web Workers, etc...

Resources


JavaScript


Even if you think you know JavaScript it might behoove you to go back and learn it from the beginning. A common danger is that developers think it looks just like their back-end language of choice (C, C++, C#, or Java) that they don't invest time to learn how it is different.

JavaScript is a dynamic and functional language, which is considerably different than C# or Java for example. So, please take your time and pick up the language. If you don't learn it appropriately you will invariably run into barriers down the road due to lack of understanding.

Resources


jQuery


The jQuery library has been around for several years and has catapulted as one of the most used tools in the web developer's belt. The reason for its vast usage is that it solves many of the cross-browser issues that creep up during development. The library is popular for both web developers and web designers. The community around jQuery is amazing and there are tons of jQuery plugins to choose from.

Resources


Backbone.js


If you find yourself writing more and more JavaScript and jQuery then you may want to consider picking up Backbone.js to help you organize your web application. This library is also a great fit for Single Page Applications (SPA). Backbone.js uses the familiar MVC/MVP concepts of Models, Collections, Views, and Routers. In addition there is a nice Event model, History support, and a Sync mechanism. The community for Backbone.js is also very large and you can find many extensions and plugins to fit your needs.

Resources


CSS3


You may or may not have experience with CSS. Brushing up on CSS concepts would be a good thing. If you already feed proficient at CSS1-2, then you should pick up CSS3 as well. A lot of features have been added recently that is in most modern browsers. There are many things that you can do in CSS3 now where you used to use JavaScript or custom images.

Resources


Feature Detection


Inevitably you'll need to support browsers that don't support the native feature you are trying to use. Thankfully you can use Feature Detection to determine if the browser you are in implements that feature and if it doesn't then you can provide functionality to mimic that feature (a.k.a. a polyfill or shim).

Resources


Responsive Web Design


Instead of implementing a different UI for mobile devices, tablets, and desktop browsers you can use responsive web design techniques to provide one experience that restructures the UI according to its size.

Resources


Conclusion


Hopefully the above resources will get you started in your transition to front-end web development. There is a lot to learn, but it is an exciting space that changes frequently. Having a desire to learn is a good trait to have in this field.

If you have any resources that you think I missed please add them in the comments and I'll try to update the lists above if I think they are appropriate.



Posted by Test at 8:00 AM 0 comments Labels: , , ,

Monday, March 28, 2011

20 Mix11 HTML5 and JavaScript Sessions

This year I will be attending the Microsoft Mix Conference again in Las Vegas (April 12-14 2011). There were a lot of great sessions last year and there appear to be many more scheduled for this year.

I have listed 20 sessions (in alphabetical order) that I hope to attend if the schedule permits, otherwise I'll just catch the videos that will be posted shortly after they are presented.

In addition to these sessions I'm also looking forward to the Future of the Web keynotes by Scott Guthrie, Dean Hachamovitch, Joe Belfiore.

If you are already going or plan to attend after seeing these great sessions, then I hope to see you there! It should be another great conference! See http://live.visitmix.com/mix11 for more details...

  1. 5 Things You Need To Know To Start Using <video> and <audio> Today

    Nigel Parker

    Come along to this session to get an overview of the new video and audio tags from the HTML5 specification. Discover how to use them to play media in modern browsers and on mobile devices. Learn the most advanced techniques and best practices, including encoding optimizations, custom skinnable players, full screen workarounds, seeking settings and fallback scenarios for legacy browsers.

  2. 50 Performance Tricks to Make Your HTML5 Web Sites Faster

    Jason Weber

    Learn how you can make your sites faster directly from the Internet Explorer Performance Team. These are the same guys who brought you GPU accelerated graphics and compiled JavaScript with Internet Explorer 9, and they’re going to share their favorite 50 best practices for web developers. This session will provide an inside look into browser performance, discuss why common web best practices are important, and then go deep into how to get the most from new HTML5 capabilities including Canvas, Audio, Video, SVG, local storage, and more.

  3. Building Business Centric Application in JavaScript

    Deepesh Mohnani

    Building end-to-end data-intensive JavaScript applications has never been easier. In this session, we will talk about tools that let you focus on business logic, without having you worry about plumbing and infrastructure, making your development process more productive. Attendees will learn about the latest investments that are being made to simplify development of business-centric applications, bringing rich data and visualization to your jQuery client using WCF and WCF DomainServices.

  4. Data in an HTML5 World

    Asad Khan

    Come and learn about ‘datajs’. datajs is a new cross-browser JavaScript library that enables better data-centric web application by leveraging HTML5 browser features and modern protocols such as OData. It's designed to be small, fast, and provide functionality for structured queries, data modification, and interaction with various cloud services, including Windows Azure.

  5. Deep Dive Into HTML5 <canvas>

    Jatinder Mann

    If you’ve seen the demos for Internet Explorer 9’s hardware accelerated graphics, you are probably excited to learn the details of HTML5 Canvas. With all major browsers supporting HTML5 Canvas, a scriptable 2D drawing context, Canvas is quickly becoming the natural choice for graphics on the web. In this session, you will learn advanced Canvas concepts (including the origin-clean security and the Canvas Drawing Model), understand when to use Canvas versus SVG and get a deeper look at how the Internet Explorer team solved interoperability issues as we implemented the specification. You will learn to build HTML5 Canvas websites through best practices and lots of code samples.

  6. Designer and Developer: A Case for the Hybrid

    Jeff Croft

    Should designers code? Or is is okay for one to specialize in visual design and expect others to build their vision? As we get farther and farther away from the days of the "webmaster," and become an industry of specialists, are we losing some of the beauty, efficiency, and innovation that can be found at the point where design and development intersect? Jeff Croft, hybrid designer and developer, makes the case that the best web products will always be created by designers who understand the building blocks of the web: the code.

  7. Filling the HTML5 Gaps with Polyfills and Shims

    Rey Bango

    Everyone wants to jump into HTML5 but how do you use the cool features of this new specification while ensuring older browsers render your web pages as expected? This is where polyfills and shims come in. In the session, you’ll learn how to use specially crafted JavaScript and CSS code that emulate HTML5 features so that you can take advantage of HTML5 today without breaking your sites in older browsers.

  8. The Future of HTML5

    Giorgio Sardo

    We love HTML5 so much that we want it to actually work – in an interoperable, predictable manner across all browsers. In this session you will learn the current status of HTML5 and the Open Web Platform and what will take to bring it to a Recommendation. You will also preview the next emerging standards and understand Microsoft implementation approach through prototypes. Finally ride the DeLorean at 88mph and discover some of the work being done by Microsoft with the W3C on what will lead into HTML6.

  9. Going Mobile with Your Site on Internet Explorer 9 and Windows Phone 7

    Joe Marini

    The mobile Web is here, it’s huge, and your business can’t afford to ignore it. Mobile users have come to expect their favorite Web sites to give them a great mobile experience – otherwise, they find new favorite sites that do. In this session, Joe Marini, Principal Program Manager for Internet Explorer on Windows Phone will take you through the design and experience principles you need to consider when creating your mobile Web presence, teach you about the exciting new HTML5 capabilities that Internet Explorer 9 on Windows Phone 7 will support, and show you how to give your sites the next-generation features you need to engage your users on their smartphones.

  10. Good JavaScript Habits for C# Developers

    Elijah Manor

    It seems that far too many people come to jQuery thinking that their previous knowledge with object-oriented languages like C# or Java will help them be successful at client-side scripting. In many cases, you can be successful with this approach, however, the more JavaScript you write you will inevitably find yourself uncovering strange bugs because you didn't take time to learn JavaScript properly. This session is targeted for developers that use jQuery, but haven’t invested adequate time to learn some of the foundational JavaScript concepts that differ from C#. If you would like to avoid some of these common mistakes when bringing your existing expertise to JavaScript, then please join me as I try to explain some of the differences.

  11. HTML5 with ASP.NET

    Mads Kristensen

    This talk is all about code. Whether you are building a new website using ASP.NET or maintaining an existing one, you’ll leave the talk ready and able to utilize HTML5 on ASP.NET. We’ll look at what HTML5 offers modern application developers and how you can code HTML5 with ASP.NET WebForms or ASP.NET MVC today and tomorrow.

  12. JavaScript Panel

    Luke Hoban, Allen Wirfs-Brock, Tomasz Janczuk and Doug Crockford

    JavaScript is one of the most widely used general purpose functional, dynamic and prototype-based object-oriented programming languages on the web with considerable amounts of JS even running outside of the browser in other hosts. The language has matured and is currently in version 5 (officially, this is known as EcmaScript 5). Where did it come from? What problems was it initially designed to solve? How has it managed to scale to so many different usage scenarios? What are these scenarios, exactly? What does EC5 add to the language and what specific problems do these new additions solve? What's missing from the language? How will it evolve? How general purpose is JavaScript, really? The folks who will be on stage can answer all of these questions, but most importantly, YOU will drive the panel with your own questions. What do you want to know? What's the most burning question you have in your mind related to JavaScript? Answers await.

  13. Knockout JS: Helping you build dynamic JavaScript UIs with MVVM and ASP.NET

    Steve Sanderson

    Steve Sanderson delivers KnockoutJS in this lightening talk. Learn how the Knockout library builds on advanced jQuery and JavaScript techniques to make even the most complex data-filled HTML forms a breeze. We’ll see jQuery, jQuery templating, JSON and live data banding applied wto the MVVM pattern with Knockout, combined with ASP.NET to produce results that need to be seen to believed.

  14. Making Better Web Apps For Today's Browsers

    James Mickens

    Microsoft Research is working on several cool ways to make web applications faster and more robust. In this session, James Mickens will describe two projects that leverage JavaScript to improve web programs running on unmodified, commodity browsers. His talk will focus on Silo, a system that exploits DOM storage and AJAX to make web pages load more quickly. He’ll also describe Mugshot, a framework which allows developers to capture and replay JavaScript application bugs that users encounter in the wild. Neither project requires users to install a plugin or otherwise change their browser.

  15. Modernizing Your Website: SVG meets HTML5

    Jennifer Yu

    Scalable Vector Graphics (SVG) integrates with the HTML5 and CSS features to unleash some of the most beautiful experiences on the web. In this session we’ll explain what is SVG and when you should consider using it instead of other alternatives. We’ll show you how to create content that is interoperable across browsers and devices. We’ll cover common pitfalls to avoid, as well as look at the best SVG tools and libraries available to developers. We’ll walk through code samples to learn first-hand how you can bring a high quality, interactive SVG experience to your customers.

  16. Node.js, Ruby, and Python in Windows Azure: A Look at What’s Possible

    Steve Marx

    Most people using Windows Azure are using ASP.NET and PHP, but Windows Azure is much more general than that. Steve Marx will show how he built a few web apps (including his blog) that run on Windows Azure and don’t use .NET or PHP. Server-side JavaScript, Ruby, and Python will be the most prominent examples.

  17. An Overview of the MS Web Stack of Love

    Scott Hanselman

    Oh yes. Building web applications on the Microsoft stack continues to evolve. There’s lots of great tools to leverage, but it can be difficult to keep up with all the options. In this technical and fast-paced session, you’ll learn from Scott Hanselman how the pieces fit together. We’ll look at ASP.NET MVC 3, MvcScaffolding, Entity Framework Code First (Magic Unicorn Edition), SQL Compact 4, jQuery and more. We’ll also see how many times Scott can say “unobtrusive” in a single talk. You’ll leave this session with a clear understanding of the technology options available on the Microsoft Web Stack. What’s changed since PDC? What direction are we doing? Let’s see what we can build in a PowerPoint-free hour with the Microsoft Web Stack of Love.

  18. Pragmatic JavaScript, jQuery & AJAX with ASP.NET

    Damian Edwards

    jQuery turned the world on its ear. Do we still write JavaScript or do we just write jQuery? Damian will answer that question with new JavaScript techniques and AJAX as well as some jQuery plugin surprises up his sleeve. What are the best libraries and practices for using jQuery and JavaScript with ASP.NET? How should balanced applications be designed to make the best use of the power of the server and the power of the client?

  19. Reactive Extensions for JavaScript (RxJS)

    Bart De Smet

    Nobody likes sluggish web interfaces that get stuck when interacting with servers and services. Asynchrony has become the way of life to enhance user experiences. The A in AJAX pinpoints this observation precisely. Moreover, the sheer amount of asynchronous data sources is overwhelming: stock tickers, Twitter quotes, RSS feeds, you name it. Unfortunately, the programmability story for each of those sources differs significantly, with little to no unification or compositionality. Got tired of writing cumbersome code with plenty of callbacks, tedious logic and tricky error handling? Enter the Reactive Extensions, a library to seamlessly compose all kinds of asynchronous “reactive” data streams using LINQ-style query operators, available for both .NET and JavaScript (RxJS). Come and learn how Rx will make your life as a web developer easier when dealing with the asynchronous reality of modern web programming.

  20. The View of the World Depends on the Glasses I Wear

    Thomas Lewis

    There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? Sitting next to HTML5 is its friend CSS3 with its support for Media Queries. Media Queries let you customize your web experience based on parameters of display, device, properties and more. If you are a designer or front-end developer, come to this session to explore the sheer brutality of CSS3 Media Queries.

Posted by Test at 12:06 AM 0 comments Labels: , ,

Tuesday, March 15, 2011

{Dev:unplugged} HTML5 Contest


Contest


In addition to launching IE9 yesterday Microsoft has recently launched a new HTML5 competition called {Dev:unplugged}.

The goal is to encourage innovation and push the barrier as to what HTML5 and related technologies can create.

The contest is split between 3 main categories: Games, Music, and Innovation. To help get you started, Microsoft is even providing assets, recommending resources, and referring to various code samples.

Judges


As a side note, I am honored to be one of the judges for this contest alongside some extremely talented leaders in this field:


Prizes


To encourage participation there are over $40,000 worth in prizes that will be given away with the Grand Prize winner receiving $9,000 in cash and a trip to the Future of Web Apps Converence in Las Vegas.

Rules


The following are the rules of the competitions. You can find more details on their website.

  1. No Plugins: The submission must stick to HTML/CSS/JS on the client-side (no restrictions on the server-side)
  2. Same Markup: The submission has to work across IE9 RC, Chrome Beta and Firefox Beta.
  3. Making the Web Native: The submission must be amazing! We will be keeping an eye out for submissions that push the envelope and blur the line between a web app and a native app.

Get Coding


So, what are you waiting for? Shoot for the stars and start developing the next innovation on the web! You have until May 8, 2011 to submit your web application to be included in the content. Sign up today!
Posted by Test at 12:39 AM 0 comments Labels:

Wednesday, January 26, 2011

HTML5 Powered Google Chrome Extension

You may or may not have updated your HTML5 website with the official logo, but now there is an HTML5 Powered Google Chrome extension that will show the logo in your navigation bar if the site uses the HTML5 doctype.

The current version (v1.0) only detects the doctype, but I have started a new version that will detect which features of HTML5 are supported and will display those icons when the logo is clicked.

Note: I know there is some heated debate over the new HTML5 logo, but I thought it would be nice to easily identify sites that use HTML5 and with the next release see which of these newer features these sites utilize.
Posted by Test at 11:04 PM 0 comments Labels: ,

Tuesday, June 29, 2010

Filling Address Fields using HTML5 Geolocation and jQuery

I saw an interesting tweet by Remy Sharp (@rem) the other day that sparked my interest.

47b091843184dc342cdd0f26c4943ed0

So, I proceeded to research the Geolocation API and look up various web services that allowed me to utilize JSONP requests from jQuery.

Here is some pseudocode to describe what I came up with…

if (Your browser supports the GeoLocation API) { 
  if (Geolocation data contains address) { 
    Use address to populate form (Firefox) 
  } else { 
    Use Long/Lat to get address from web service & populate form (Chrome) 
  }
} else {
  Use IP address to get address from web service & populate form (IE)
}

 

cooltext439925164

Note: You may notice depending on the browser not all of the fields are being filled out. This is because of the web services that I am utilizing are lacking one or more fields or vary depending on your location. If I find a better web service then I’ll update the script.

Posted by Test at 8:19 AM 0 comments Labels: ,
Subscribe to: Comments (Atom)