Because Foundation for Apps was only released at the end of 2014, it hasn’t yet seen widespread usage, so there are few good sources of information on using the framework. In this article, Stephen Saucier brings you a comprehensive guide to build a functional web app with Foundation for Apps from start to finish. The techniques detailed here are fundamental to building practically any kind of app for any client, and this tutorial also serves as a strong introduction to the wider world of AngularJS and single-page apps.
Read more…
Perhaps the only thing worse than a fire that could happen to the office of a web development company would be losing connectivity to the web. This is why Google Mail inserts a warning whenever you go offline. As noted in Marco Zehe’s 2008 blog post, Google was an early adopter of ARIA live regions. In this article, Heydon Pickering is going to create a script which tests whether the user is online or off and uses ARIA to warn screen reader users of the change in this status so they know whether it’s worth staying at their desk or giving up and going for a beer.
Read more…
Recently, with the creation of modern web frameworks such as AngularJS and Ember, we’ve seen a push to render on the client and only use a server for an API. We’re now seeing a possible return or, rather, more of a combination of both architectures happening. Web architecture definitely goes through cycles. We started out rendering everything on the server and shipping it down to the client. Then, JavaScript came along, and we started using it for simple page interactions. At some point, JavaScript grew up and we realized it could be used to build large applications that render all on the client and that use the server to retrieve data through an API.
Read more…
Living style guides help front-end developers transform front-end codebases into well-described pattern libraries with the minimum of effort. But to make them really efficient, we need to choose the proper tools — so let’s have a closer look at what our community has to offer. In this article, Robert Haritonov has arranged the tools by function, highlighting only the most powerful ones worth knowing about. You can find more tools, plus videos, articles and other material about style guides at styleguide.io.
Read more…
As the volume of data on the web has increased, web scraping has become increasingly widespread, and a number of powerful services have emerged to simplify it. You can use Node.js to create a powerful web scraper that is both extremely versatile and completely free. A basic understanding of Node.js is recommended for this article; so, if you haven’t already, check it out before continuing. Also, web scraping may violate the terms of service for some websites, so just make sure you’re in the clear there before doing any heavy scraping.
Read more…
Bugs erode trust, which in turn loses customers. So when Ben Gremillion began updating Foundation, a responsive CSS framework, he wanted to ensure everything worked. In this article Ben will teach you his methodology for testing responsively, not just on a case by case, page-from-PSD comp. He developed a certain system to make sure that nothing’s broken at launch on different devices. It’s not enough to look for blatant bugs. You have to be thorough: in execution, in accountability, and in direction.
Read more…
You have likely experienced the 300-millisecond delay in mobile browsers or wrestled with touchmove versus scrolling. Certain events that used to be very clear are now filled with ambiguity. The click event used to mean one thing and one thing only, but touchscreens have complicated it by needing to discern whether the action is a double-click, scroll, event or some other OS-level gesture. In this article Dustan Kasten will introduce the event cascade and use this knowledge to implement a demo of a tap event that supports the many input methods while not breaking in proxy browsers such as Opera Mini.
Read more…
Using SVGs can reduce the number of HTTP requests for image replacement. it’s also easy to make an SVG scalable to its container for responsive development. In this article Sarah Drasner will cover a few ways of using SVG sprites to describe motion on the web. She’ll show some techniques for using SVG sprites in complex animation that takes advantage of these factors. All examples shown will assume the use of an auto-prefixer and some basic knowledge of CSS animations.
Read more…
Successful web accessibility is about anticipating the different needs of all sorts of people, understanding your fellow web users and the different ways they consume information. Armed with this understanding, accessibility becomes a cold, hard technical challenge. How do assistive technologies present a web application to make it accessible for their users? Where do they get the information they need? One of the keys is a technology known as the accessibility API.
Read more…
From simple charts to fancy infographics to complex timeline animations, data visualizations are popping up all over the Internet. However, as in any other area, once everyone gets on the train, distinguishing yourself from the pack becomes hard. There is virtually no limit to what you can do with the physics of data visualizations. Create column charts and make them fall like dominos, or make pie charts roll, bounce and more. You can make objects in charts and maps roll, spin, bounce, change shape and morph in ways that will capture the viewer’s attention much more quickly than regular static or even interactive versions!
Read more…
