Using Yeoman to Create a Web Application ← Big Data Roundup | Meteor Web Application Creation → A guest post by Jonnie Spratley, who currently works for GE as a UI Developer on the Industrial Internet Team building user interfaces for next generation products, and teaches a variety of programming courses at AcademyX. In this post we will discuss using Yeoman, which is a client-side stack that contains three tools and frameworks to help developers quickly build beautiful and scalable web applications. These tools include support for linting, testing, minification and more. Read Yeoman: Optimizing Your Workflow in AngularJS for more about Yeoman. Yo is used to generate things, from other generators to files and more.Bower is used for dependency management, downloading and installing .js components.Grunt is used for task management such as building, previewing and testing. How To We are going to use all of these tools described above to create an AngularJS application. 1. $ npm install -g yo grunt-cli bower 2. 3. a. b. c. d. e. f. g.
www.egghead.io Web Platform Blog | News on the Open Web Platform $watch how the $apply runs a $digest UPDATE: This post is meant for beginners, for those that just started to learn Angular and want to know how data-binding works. If you already know how to use Angular properly, I highly suggest you go to the source code instead. Angular users want to know how data-binding works. There is a lot of vocabulary around this: $watch, $apply, $digest, dirty-checking… What are they and how do they work? Let’s start from the beginning. The browser events-loop and the Angular.js extension Our browser is waiting for events, for example the user interactions. Angular extends this events-loop creating something called angular context (remember this, it is an important concept). The $watch list Every time you bind something in the UI you insert a $watch in a $watch list. File: index.html User: <input type="text" ng-model="user" /> Password: <input type="password" ng-model="pass" /> Here we have $scope.user, which is bound to the first input, and we have $scope.pass, which is bound to the second one. Uhm?
Payne Digital Ltd - Bootbox.js - alert, confirm and flexible dialogs for twitter's bootstrap framework UPDATE 01/02/2012: Version 2.0.0 of the Bootbox library is out. Whilst this tutorial is still largely accurate and version 1.1.2 will work with the 1.x series of Twitter's Bootstrap framework, you should check out the updated version here. This article discusses a GitHub repository – feel free to browse the code or follow the project. I’ve been using twitter's bootstrap framework for a number of site builds recently, mainly because it gets me from black-and-white markup to vaguely-presentable websites in a very small amount of time. Dialogs using Twitter Bootstrap You may be wondering why a few wrapper methods around bootstrap's built-in dialog capabilities are either necessary or desirable. Note that this example is purely for demonstration purposes - you probably don't want to show an obtrusive dialog as soon as the page loads! It's important to stress that none of these points are negative, nor are they particularly arduous. Bootbox.js Alerts Which results in the following dialog:
Echo JS - JavaScript News AngularJS SEO with Prerender.io AngularJS is an excellent framework for building websites and apps. Built in routing, data-binding and directives among other features enable AngularJS to completely handle the front-end of any type of application. The one pitfall to using AngularJS (for now) is Search Engine Optimization (SEO). In this tutorial, we will go over how to make your AngularJS website or application crawlable by Google. The Problem Search engines crawlers (or bots) were originally designed to crawl HTML content of web pages. If you are fully utilizing AngularJS, there is a strong possibility that you will only have one real HTML page that will be fed HTML partial views asynchronously. The Solution Rest assured, Google does have a way of indexing AJAX applications and your AngularJS app can be crawled, indexed and will appear in search results just like any other website. What We’ll Be Building Our application will be able to be rendered by Google bot and all his friends (Bing bot). How It Works About Prerender.io
Integrating Devise with Backbone.js | Josh Huckabee For the impatient: view the code, or see the demo. Update 30 May 2012: The original version of the application and this article referenced the backbone.modelbinding project by Derick Bailey. Per the readme, that project has been abandoned and I have replaced backbone.modelbinding with the preferred backbone.modelbinder project. All code and referenced samples below have been updated accordingly. Several weeks ago I set out to create a single page web app leveraging Backbone.js on the front end with Ruby on Rails powering the back end. One of the first things I need on almost all new projects is a way to handle user registration, authentication, and authorization. Arguably, doing this is unnecessary as Devise ships with its own UI implementation. To implement the Devise UI in Backbone.js I started by creating 3 Backbone models, one each for authentication, registration, and password retrieval. UserRegistration: UserSession: UserPasswordRecovery: Here is the login view: