background preloader

Tutorial & Guides

Facebook Twitter

Simple Long Polling Example with JavaScript and jQuery. There are many reasons you might need to poll a web server. Recently, one of our Dashboard Gauge Suite customers needed to poll sales data from his company's data warehouse and update his executive dashboard with the fresh data. But you could be doing something different too. Maybe you're pulling your company's QC data so you can give your leadership team a visual of how each group is managing defect counts. These two scenarios each have three things in common. First, a passion to display data in a beautiful and familiar way. Second, a desire to update each gauge without refreshing the page. Finally, each needs a smart and efficient way to poll their respective servers. Here, we're going to accomplish each commonality with an emphasis on polling options and techniques: A History of Polling Realtime web applications have been with us for quite some time now. Have you ever been in the middle of replying to an email, when (suddenly) you're notified the person has sent you another followup?

Using Yeoman to scaffold out new websites— Recently I've been playing around with Yeoman, a web scaffolding tool. If you've never heard of it before, or are unfamiliar with it, stop right now & go check it out! From first impressions Yeoman seemed geared towards scaffolding JavaScript based single page applications, however the basic functionality of a generator is to copy files, make directories etc., so I decided to make one I could use when starting a new project. I followed the documentation to generate my generator, giving it the name parkji-vanilla (the generator- is automatically added by generator-generator). One of the great things about yeoman generators is that they can run bower install & npm install after they've finished scaffolding, thereby saving you the effort (granted, this is minimal effort). Prompts I wanted my generator to ask for two things when it ran: The name of the websiteThe type of website (static, Perch etc.)

Asking for the name was really easy, I just added the following object to the prompts array: Tests. Improving Your Development Workflow with Yeoman. With so many great tools available to front-end web developers these days it can sometimes be difficult to understand how they all fit together. Deciding on a workflow that you’re happy with is often a very personal endeavour, but getting started isn’t always easy. Yeoman aims to solve this problem by defining a workflow for creating modern web applications, while at the same time mixing in many of the best practices that have evolved within the industry. In this blog post you’re going to learn how to harness the power Yeoman to create fantastic web applications. The Components of Yeoman Yeoman itself is a collection of three tools: Yo, Grunt, and Bower. Combined together these tools provide everything a developer needs to get started on a project.

Yo is a tool that’s used to scaffold a new application. Each of these tools are developed independently but all have great communities pushing their continued advancement. Installing Yeoman npm install -g yo Installing Generators Using a Generator. The Beginner's Guide to Ratchet: A Mobile Web App FrameworkTreehouse Blog. Ratchet is a front-end framework for building mobile web apps in HTML, CSS, and JavaScript. Ratchet 2.0 was recently released, so it’s a good time to start learning how to build Ratchet apps. If you just want to see Ratchet in action, click this demo button on your mobile device (or enable touch events in your browser) to see what it looks like: See Demo (Mobile Only) Download Example Code About Ratchet Often it’s best to use responsive design for building websites that work across mobile, tablets, and desktop devices. However, in some instances, you may want to provide users with an experience that’s custom-tailored to their current device context. Ratchet aims to provide designers and developers with a framework for building mobile web apps that feel native.

Free trial on Treehouse: Do you want to learn more about front-end design, mobile apps, and frameworks? Getting Started Step 1: Download Ratchet Step 2: Start a Server Step 3: Enable Touch Events Step 4: Download Examples <body><! <! Tips for Writing Better Code. What is good code? We know when we spot bad code. But because good programming is harder to define, it’s difficult to know you’ve actually created quality.

In my experience, there are two great questions that can indicate code quality: When you’re working on a team, do others easily understand your code’s logic? When changes are required, is it a quick and straightforward process? If it’s difficult to explain code to others or if lots of things break when making changes, then chances are the code is bad. Fixing these problems often involves finding sensitive solutions in the context of a particular environment. Free trial on Treehouse: Do you want to write better code? While it’s important to fix code directly, it’s equally important to address the conditions that lead to bad code in the first place.

Don’t optimize code too soon When I first started programming, I remember marveling at my own “brilliance” when I was able to condense several lines of code into a single line. How to Use The HTML5 Sectioning Elements. HTML5 has seen the introduction of a number of sectioning elements that can be used to mark up your web pages. Using these elements gives more semantic meaning to your pages, allowing computer programs to better understand your content.

In this post you’ll learn how to use these sectioning elements in your own web sites. I’ll be explaining when you should use certain elements over others, as well as when it’s best to stick to a good old <div>. Check out all our HTML courses at Treehouse. Lets get started. The main Element The <main> element should contain the main content for your web page. The example below uses a <main> element to represent the main content for the page <body><header><div id="logo">Rocking Stone</div><nav>... Note: We’ve used the ARIA role=”main” attribute here is it indicates the significance of this element to programs that don’t yet support the <main> element (such as some screen readers). The article Element You can nest <article> elements within one another. Useful Links. Articles for developers.

Automating Your Front-end Workflow with Yeoman 1.0 (Addy Osmani) Composite JS Apps: Regions And Region Managers. In my previous post on Composite JavaScript Apps, I introduced a few of the high level design ideas and implementation details that I have been using in an application that I’m building. Since then, the requirements for that app have grown significantly and I’ve made more progress toward a better composite application design.

Content Swapping My simple item management application started out with nothing more than these three regions on the screen: Once this was in place, though, a new requirement came along… a complex search with search results. Microsoft Prism: Regions and Region Managers Several years ago, Microsoft released a framework for it’s WPF and Silverlight runtimes, called Prism. This pattern fits perfectly with the direction that my Backbone app is heading, so I decided to borrow the names and build my own version in JavaScript. A Simple Region Manager In Prism, a region is defined in the XAML markup. Does that look familiar? Using The Region Manager But Wait! About Derick Bailey. Improving Your Development Workflow with Yeoman. Client-Side vs. Server-Side Rendering.

Yesterday Twitter announced that it was moving away from client-side rendering back to server-side rendering in order to improve page load time. Today I found myself having to defend my position that server-side rendering will almost always be faster. I figured I'd blog about it. I want to point out a couple things. First, I'm talking specifically about render performance and page speed. There might be other compelling advantages to thick-clients; I'm talking about performance. Secondly, I'm going to get on a high horse here and say that it worries me that developers think client-side rendering is faster.

This is basic and fundamental knowledge about how the web and browsers work. How It Works With client-side rendering, your initial request loads the page layout, CSS and JavaScript. With server-side rendering, your initial request loads the page, layout, CSS, JavaScript and content. Updates using server-side rendering is where a lot of developers start going off the deep end. Control. Patterns For Large-Scale JavaScript Application Architecture. Today we're going to discuss an effective set of patterns for large-scale JavaScript application architecture. The material is based on my talk of the same name, last presented at LondonJS and inspired by previous work by Nicholas Zakas. Who am I and why am I writing about this topic? I'm currently a JavaScript and UI developer at AOL helping to plan and write the front-end architecture to our next generation of client-facing applications.

As these applications are both complex and often require an architecture that is scalable and highly-reusable, it's one of my responsibilities to ensure the patterns used to implement such applications are as sustainable as possible. I also consider myself something of a design pattern enthusiast (although there are far more knowledgeable experts on this topic than I). Can you summarize this article in 140 characters? In the event of you being short for time, here's the tweet-sized summary of this article: What exactly is a 'large' JavaScript application? Web Fundamentals.

Frontend Masters Expert Web Development Training. Html5sql.js Home Page. Local Storage. You are here: Home Dive Into HTML5 Diving In Persistent local storage is one of the areas where native client applications have held an advantage over web applications. For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data like preferences or runtime state.

These values may be stored in the registry, INI files, XML files, or some other place according to platform convention. If your native client application needs local storage beyond key/value pairs, you can embed your own database, invent your own file format, or any number of other solutions. Historically, web applications have had none of these luxuries. What we really want is a lot of storage space on the client that persists beyond a page refresh and isn’t transmitted to the server Before HTML5, all attempts to achieve this were ultimately unsatisfactory in different ways. A Brief History of Local Storage Hacks Before HTML5 Introducing HTML5 Storage.