Author Archive: brinaldi

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.

Simplicity in Web Development

As HTML, CSS and JavaScript developers, we have a plethora of commercial and open source tools available to us today. Every week seems to feature another release of a major library or framework that tries to solve everyday development problems. All of these tools promise to simplify the otherwise complex job of being a web developer. Karolina Szczur, in her recent ADC article “The Pursuit of Simplicity“, explains how we often turn to these tools hoping that they both simplify the work of coding but also simplify our code. However, each has its benefits and drawbacks and we need to be aware of them before we choose to use them. Karolina’s article, based upon her popular presentation of the same name, discusses the good and bad parts of using tools like frameworks, libraries and CSS preprocessors. Read the article and, as always, I’d love to hear your feedback.

Learn to use Edge Code, Edge Inspect and PhoneGap Build

At yesterday’s Create the Web event, Adobe announced a number of new products that are already available for you to use. I have covered a full summary of the keynote on my personal blog if you’re interested. Of course, if you are excited about the announcements, you may want to know a little bit more about the products and how to use them. The good news is that we’ve posted a some new (and one updated) tutorials on the ADC covering several of the key products announced.

Edge Code
Edge Code is a new Brackets distribution that is geared towards integration with other Edge tools and services. Currently it integrates with Edge Web Fonts and PhoneGap Build and will integrate with more services over time.  A free preview release of Edge Code is available today. You can get the details on using Edge Code and the new features in my article for the Adobe Developer Connection, “HTML, CSS, and JavaScript Code Editing with Edge Code.”

Edge Inspect
Edge Inspect, formerly called Shadow, helps solve the difficulty of testing and debugging mobile web sites across the ever growing list of devices and screens. It has features like remote debugging using Weinre and collecting screenshots on all devices at once. Edge Inspect is now available via subscription, including a free version. You can learn more about how to use Edge Inspect in my article on the Adobe Developer Connection, “Browser testing across devices with Adobe Edge Inspect.”

PhoneGap Build
The official release of PhoneGap Build was announced yesterday. PhoneGap Build is a service that creates the multiple distributions for a wide array of device operating systems in the cloud. If you want to learn more about PhoneGap Build and the new features, including Hydration, which automatically updates you app when a new build is posted, check out Ray Camden’s article on the Adobe Developer Connection, “PhoneGap Build Levels Up.”

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.

Connecting to 3rd Party API’s with CORS

CORS stands for cross-origin resource sharing and it is an HTML5 feature that allows you to connect to 3rd party API’s without hitting browser security warnings. In the past, you’d usually have to write server-side API wrappers or use JSONP, which only works for reading and isn’t supported by many API’s. Now, with CORS, you can forgo the wrapper and even do things like post, put and delete. I have been walking through HTML5 features, going from left to right on HTML5 Readiness, on my blog and as part of this journey I investigated CORS. In my latest article for the ADC, I take a look at the feature in some detail and discuss browser support in current browser versions. I show some examples of how you can connect to the GitHub API, which is one of a growing number of API’s that support CORS. So please read “Understanding Cross-Origin Resource Sharing (CORS)” and please feel free to share your thoughts on the article.

Good Twitter Bootstrap tutorial with code samples

Twitter Bootstrap has become a hugely popular framework for building HTML, CSS and JavaScript front-ends, both for the desktop browser and for mobile. It is one of the most watched and forked repositories on GitHub. Bootstrap includes a number of components, plugins, controls, styles and more to make it easier to quickly build attractive looking and responsive web applications. In her latest article, Adobe evangelist Holly Schinsky runs through a ton of the enormous list of features in Bootstrap. She briefly discusses what each feature is designed to do and then offers a code sample you can easily copy/paste for each. She also discusses Bootstrap’s grid system and how to download and use plugins for the framework. In the end, I think it makes both a great tutorial and a useful quick reference for many of Bootstrap’s features. Be sure to check it out on the ADC.

Look Under the Hood of Adobe Brackets

For anyone who hasn’t yet heard of Adobe Brackets, it is an open-source code editor created by Adobe and hosted on GitHub. While you can download early experimental builds on Brackets, it is early and not everyone may find it yet has all the features they want for every day use. Nonetheless, the team, with the help of an array of contributors from the community, is progressing quickly with new builds and new features.

One of the most exciting things about Brackets is not just that it is open-source but that it is built entirely using web standards technologies such as HTML, CSS and JavaScript. This means that you can actually edit Brackets using Brackets (which I find very meta). More importantly, this also means that anyone with those skills can potentially contribute to the project, create their own extensions and help guide the future of the program. If you are interested in contributing or just curious about how Brackets is built, I highly recommend reading David Deraedt’s new article “An Overview of Brackets’ Code Architecture.” It walks you through how Brackets’ code is organized, some of the conventions used, how it leverages RequireJS for modules and much more. It is both instructional in the sense of seeing how a large scale open source project using web standards is architected but also invaluable if you are interested in digging into the code. So, please, take a moment to check out the article.

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.