Posts in Category "HTML5"

Keep up with Web Standards Content on the ADC

Recently I posted a look back at all the HTML, CSS, JavaScript and mobile content on the ADC in 2012. I received a lot of great feedback but a number of people noted that they were surprised by how many of these articles they missed. In response to this feedback, I have decided to personally create a monthly newsletter that will share any articles and tutorials that we published on the topics of HTML, CSS, JavaScript and PhoneGap on the ADC. You can sign up for the newsletter here. In addition, you can always follow the article releases as they are published via our RSS feed for these topics.

Sign up for the newsletter today.

Best of 2012 article & tutorial list

While there are still a couple months left in 2012, I wanted to post some of our highest rated/trafficked content pieces that the Adobe Developer Connection has published in 2012.  There is some top notch content in the list below thanks to our terrific community authors who continue to donate their time to write tutorials for the larger development community.

Which piece is your favorite??

PhoneGap content:

JavaScript fundamentals & frameworks:

Web standards:

Flash Professional CS6:

Designing for multiple screens:


Happy reading & happy coding!

Creating Native-like PhoneGap Apps

A few months ago I was lucky enough to attend PhoneGap Day in Portland. I saw a lot of great presentations, but a presentation by Greg Avola, creator of Untappd, really stood out. He was discussing some difficult lessons he learned while creating his popular app for a variety of platforms using PhoneGap. While he praised PhoneGap for making it easy to develop for multiple platforms using HTML, CSS and JavaScript, he also encountered a number of places where gaining the user experience and performance he wanted required some tweaks. These were hard-won lessons and Greg’s goal was to help other developers avoid some of the difficulties he faced.

While Greg’s presentation was great, I really felt that it was important enough to deserve a wider audience than just those able to attend PhoneGap Day. Thankfully, Greg agreed to turn his presentation into an article for the Adobe Developer Connection. Yesterday, we published Greg’s article “Creating apps with PhoneGap: Lessons learned” and if you are already doing PhoneGap development or are interested in it, I’d call it a “must read.” As always, feel free to share your feedback.

An in-depth look at CSS3 Transitions

If you are a web designer or front-end developer using HTML and CSS, it’s likely you have heard of Louis Lazaris. Even if you don’t recognize the name, you have probably at some point referenced one of the many posts on his blog, Impressive Webs, or other well-known publications. So, I am very happy that the ADC has published a contribution by Louis covering the topic of CSS3 transitions titled “Using CSS3 transitions: A comprehensive guide.” As the title indicates, this is a great tutorial and reference for creating and triggering animations using various CSS transitions. Louis covers the syntax for building transitions via your stylesheets, then discusses various ways for triggering transitions, offers some useful tips and techniques and discusses the current state of browser support. If you are new to using transitions, this is a great “how to” and if you have already used transitions, I think it still makes a perfect reference.

So, please, check out Louis’ article and, as always, feel free to share your feedback.

JavaScript Design Pattern Reference

On Monday the ADC published the third and final part if Joe Zimmerman‘s JavaScript design pattern series. Design patterns are one of those topics that is, in my mind, incredibly important and useful but can be also incredibly dry and boring. However, Joe, as usual, does a great job of breaking down the concept of specific design patterns into easy-to-understand snippets with sample JavaScript implementation code. The series has covered the singleton, composite, and façade patterns in part 1, the  adapter, decorator, and factory patterns in part 2 and finally the proxy, observer and command patterns in part 3. Taken as a whole, the three articles represent a great reference for nine different JavaScript design patterns and should be a nice addition to your developer toolbox.

Why Should I Care About Semantic HTML?

Semantic HTML is one of those things that, despite it’s value, doesn’t demo well. There’s no flashy animated effects or interaction. For example, I could demo how I replaced a <div> with a <nav> but the resulting page would look and behave exactly the same. The same if I replace something like <div id=”rt4894_sm”> with <div id=”rightpanel”>. In addition, the full value of semantic HTML is often hard to explain. Because of this, you may even still be unfamiliar with what semantic markup is and how to use it. The truth is though, there are a wide variety of ways your web site/application can benefit from semantic markup – this is why a number of new semantic tags were added to HTML5.

Terry Ryan has been an advocate of semantic HTML, even creating a site, along with Raymond Camden, called WhichElement that tries to help you decide when and where to use certain semantic tags. In his latest ADC article, Terry lays out a strong case for why you should care about semantic HTML and the variety of potential benefits of caring about semantics when developing. Terry gives an honest look at the topic, even acknowledging some skepticism about semantic markup. However, to me, that is what makes his argument most compelling – it takes a realistic and pragmatic look at the topic. So, give Terry’s article, “Using Semantic HTML” a read and please feel free to share your thoughts on the topic.

Making PhoneGap Apps Behave More Like Native

PhoneGap offers a load of benefits to developers, allowing them to leverage their HTML/CSS/JavaScript development skills to develop cross-platform mobile applications that take advantage of native hardware and OS features. It also allows you to reuse assets and code from existing mobile web applications. However, when creating a PhoneGap application, you don’t want it to look like simply your web page in a native app wrapper but rather to look and behave like an app.

This can be difficult to achieve, but thankfully there are some tools available to help. One of the most recent tools is the App-UI component library created by Adobe developer  evangelist Andrew Trice. This HTML/JS library creates an application container that follow common mobile application UI patterns including ViewNavigator, SplitViewNavigator and SlidingView and include methods for pushing and popping views.

If you are interested in learning more about the App-UI library, Andrew has written a great tutorial that shows you how to build a movie listing app using the Rotten Tomatoes API and working with the PhoneGap Build service for generating the native files. I was impressed at how easy Andrew has made it to develop native-like apps using this framework. Check out Andrew’s article, “Creating native-like user experiences in PhoneGap with App-UI,” on the ADC.

Mobile Development with jQuery Mobile and Rails

Both jQuery Mobile and Ruby on Rails are widely popular frameworks. In part because of the ubiquity of its namesake parent framework, jQuery Mobile has become arguably the most popular framework for building mobile web applications or, in many cases, PhoneGap applications using web standards. Nonetheless, the two frameworks have some rough edges when working together. Thankfully, John Bender shows how all of these rough edges can be smoothed out in his recent article for the ADC.

John is a member of the team here at Adobe that contributes to the development of  jQuery Mobile as well as a well-known speaker and OSS contributor. His article shows how to get your JQM/Rails project set up, manage layout, handle form validation, fix potential data attributes conflicts and work with debugging. He has identified these areas specifically as potential pain points in integration but, hopefully, using this article you will not feel the pain. So, if you are using Rails and jQuery Mobile, be sure to give  John’s article, “Integrating Rails and jQuery Mobile,” a read.

Common Design Patterns in JavaScript

Anyone who has been programming for some time has come to realize the value of understanding design patterns, regardless of whether or not your background includes a CS degree. In my experience though, I have found that deciphering the definition of a particular design pattern or understanding its use cases can be more difficult than actually coding it. Still, when it gets to implementing the pattern, sometimes translating a pattern from the textbook definition (oftentimes in Java) to whatever language you are working in can be difficult as well.

This is why I am excited about the series of articles Joe Zimmerman is doing for the ADC on implementing common design patterns in JavaScript. Not only does he manage to explain each pattern in easy to understand terms and describes common use cases, but he shows simple examples of how you would implement this pattern using JavaScript. In his most recent article, he covers the adapter, decorator and factory patterns, while his first article covered the singleton, composite and facade patterns. He also has many of these and more posted to his blog.

While you may not require each particular pattern immediately, they are always useful tools to have in your toolbox to use as needed. You also may rely on a framework which uses some of these patterns and understanding the underlying principles can be helpful in your proper use of the framework. Either way, I believe this series of articles (part 3 is coming soon) is well worth reading.

Get Started with the Ember JavaScript Framework

One thing I think everyone can agree on is that there is no shortage of frameworks for JavaScript. Nevertheless, there still seem to be another new framework announced each week. I’ve even tried to track and categorize hundreds of JavaScript frameworks. In my opinion, when choosing a framework one of the key items to consider is the level of community support. This is especially true if you or your development team are not the type of developers who like to delve into the framework source. In this case, having a strong community of users you can turn to for answers and possibly consulting to resolve any issues you encounter can be invaluable.

While a relatively new framework, being released late 2011, Ember.js has garnered a strong following. This could be, in part, because Ember grew out of the popular SproutCore library and was originally SproutCore 2.0 until Ember creators Yehuda Katz and Tom Dale decided to separate the project. As opposed to the widget focus of SproutCore 1.0, Ember is designed to offer a standard architecture for JavaScript applications and easy view templating.

One person who has become a well-known voice in the Ember community is Andy Matthews. That is why I am very excited that he has written a beginner’s guide to Ember for the ADC. If you are interested in learning about Ember or evaluating architectural frameworks for you and your team, you definitely should check it out.