Debugging the Web: JavaScript

Using a debugger provides deeper insights into your code, telling you not just when things don’t work but also why. Best of all, the tools are easy to learn and often built right into your web browser. In this course, Joe Chellman looks at how to find and fix issues in JavaScript projects using a debugger, the tool of the trade. He reviews the different software available and introduces core debugging techniques, such as inspecting variables and stepping through functions. In the last half of the course, Joe debugs four types of real-world JavaScript scenarios (a jQuery plugin, WordPress theme, mobile site, and AngularJS project) and touches on how incorporating test-driven development practices into your debugging process can increase your productivity and the strength of your code. See more: Debugging the Web: JavaScript.

Topics include:

  • Getting the browsers and plugins
  • Leveraging the Console API
  • Using breakpoints
  • Using step functions
  • Watching variables
  • Debugging jQuery, WordPress, mobile sites, and more

Debugging Tools

A debugger or debugging tool is a computer program that is used to test and debug other programs (the “target” program). Within JavaScript, access to a debugger becomes invaluable when developing large, non-trivial programs. Because there can be implementation differences between the various browsers (particularly within the Document Object Model), it is useful to have access to a debugger for each of the browsers that a Web application targets.

Script debuggers are integrated within Internet Explorer, Firefox, Safari, Google Chrome, Opera and Node.js.

Debugging

In addition to the native Internet Explorer Developer Tools, three debuggers are available for Internet Explorer: Microsoft Visual Studio is the richest of the three, closely followed by Microsoft Script Editor (a component of Microsoft Office), and finally the free Microsoft Script Debugger that is far more basic than the other two. The free Microsoft Visual Web Developer Express provides a limited version of the JavaScript debugging functionality in Microsoft Visual Studio. Internet Explorer has included developer tools since version 8 (reached by pressing the F12 key).

In comparison to Internet Explorer, Firefox has a more comprehensive set of developer tools, which include a debugger as well. Old versions of Firefox without these tools used a Firefox addon called Firebug, or the older Venkman debugger. Also, WebKit’s Web Inspector includes a JavaScript debugger, which is used in Safari. A modified version called Blink DevTools is used in Google Chrome. Node.js has node-inspector, an interactive debugger that integrates with the Blink DevTools, available in Google Chrome. Last but not least, Opera includes a set of tools called Dragonfly.

In addition to the native computer software, there are online JavaScript IDEs, debugging aids are themselves written in JavaScript and built to run on the Web. An example is the program JSLint, developed by Douglas Crockford who has written extensively on the language. JSLint scans JavaScript code for conformance to a set of standards and guidelines. Many libraries for JavaScript, such as three.js, provide links to demonstration code that can be edited by users. They are also used as a pedagogical tool by institutions such as Khan Academy to allow students to experience writing code in an environment where they can see the output of their programs, without needing any setup beyond a web browser.

See more resources:

Eloquent JavaScript by Marijn Haverbeke — a free, Creative Commons–licensed eBook
Douglas Crockford Lectures on JavaScript
Codeacademy’s JavaScript Track

Website:
Build My Site

Building a Data-Driven App with AngularJS | Creating Your First Controller

Want to create web applications that can handle multiple users, registration, and real-time data? With these AngularJS tutorials, you’ll be quickly building apps with advanced features like these. Ray Villalobos starts the course with a Git, Node.js, and GitHub setup that will get you off on the right foot. Next, learn how to create your first controller, connect a Firebase database, and read, push, and delete data from that database. Ray then shows you how to set up user registration with Firebase’s simpleLogin service, so you can log users in and out and pass registration data back and forth from the app. With a few finishing touches, like custom directives, your Angular app will be ready to publish. Watch more: Building a Data-Driven App with AngularJS.

Note: This course was revised in March 2015 to reflect changes to Firebase’s database and simpleLogin services.

Topics include:

  • Installing Git and Node.js on Mac or Windows
  • Installing AngularJS and its models
  • Creating modules and routes
  • Working with controllers
  • Connecting to Firebase data
  • Adding user registration
  • Searching, filtering, and deleting records
  • Creating custom directives

Controllers

This is an excerpt from: LEARN ANGULAR BY BUILDING A GMAIL CLONE

Controllers are the middleman between the Model and the View, they drive the Model and View changes. Imagine that the controller is given some html from the route and a Javascript object from the dependency injection; with these two things, the controller will tell the view (the html) what it can do by giving it scope variables and maybe a few functions.

controllers

Let’s take a peek at what a Controller looks like.

A good Controller will have as little logic in it as possible, and should only be used for two things: Binding the Model to the View (initializing the View) and adding helper functions to the View.

app.controller('InboxCtrl', function () {
	
              // Model and View bindings
	     // Small helper function not needed anywhere else
});

If you go through the Angular documentation examples (available at AngularJS.org) you’ll notice Model data being declared in the Controller. While this is okay for examples, the Controller easily becomes the Model as well – which is very bad for many reasons:

  • All the pieces start to get more coupled together
  • More difficult to share business logic
  • Makes things difficult to test

Remember: A good Controller will have as little logic in it as possible.

Each controller has access to a $scope and some html. $scope is the most documented way of adding properties and methods to our view. Remember how we said each ‘ng-controller’ attribute specifies a scope of HTML to manage? Well, that scope has access to the same $scope as the Controller function.

Note: $scope isn’t the only way to pass data to the front end. Many developers use a combination of the “Controller As” configuration options along with the this keyword. For the purpose of this tutorial, we will stick with $scope as it’s been around for much longer than ‘Controller As’.

app.controller('InboxCtrl', function ($scope) {
	// initialize the title property to an array for the view to use
	$scope.title = "This is a title";
});

Note: Notice we’re injecting $scope inside the function.

We can then use this like so:

<div ng-controller="InboxCtrl">
	{{ title }}
</div>

Note: Here we’re accessing the title directly, however it is encouraged to always have at least one dot (.) in our view expression properties. Using the “controller as” with this syntax would solve this giving us the . like so . More info here.

In order to keep our controllers more reusable, we would hook up data in our controller via a Factory or Service.

See more resources:

Understanding Backbone and other Model-View-Controller (MVC) Libraries
Installing AngularJS, plus modules
Realtime AngularJS Pub/Sub Messaging using PubNub

Website:
Build My Site

Developing for the MEAN Stack and MongoDB – Using the Cloud9 Platform

The MEAN stack is a collection of tools for building robust web applications with JavaScript. It includes four main ingredients: MongoDB, ExpressJS, AngularJS, and Node.js. In this course, Michael Sullivan shows you what it “means” to develop on the MEAN stack, walking through setup, user authentication and security, routing, controller and view creation, data storage, and more—all the way up to app deployment. By the end of the course, you’ll have a clear picture of the MEAN stack workflow and its many advantages, including enhanced performance and the convenience of using a single programming language across every layer of your application. See more: Developing for the MEAN Stack and MongoDB

Topics include:

  • Getting your Node.js development environment set up
  • Creating an Express application
  • Configuring user authentication and strong password hashing
  • Accessing MongoDB collections in the shell and with Mongoose
  • Building a mini SPA (single-page application) with AngularJS
  • Adding custom form validation with AngularJS
  • Deploying an app to Heroku

MEAN

Cloud9 IDE

Cloud9 IDE is a freeware online integrated development environment. It supports more than 40 programming languages, including PHP, Ruby, Python, JavaScript with Node.js, and Go. It enables developers to get started with coding immediately with pre-setup workspaces, collaborate with their peers with collaborative coding features, and web development features like live preview and browser compatibility testing.

It is written almost entirely in JavaScript, and uses Node.js on the back-end. The editor component uses Ace. As of July 2014, it uses Docker containers for its workspaces, and is hosted on Google Compute Engine.

MEAN

The MEAN Stack:

MongoDB is a cross-platform document-oriented database. Classified as a NoSQL database, MongoDB eschews the traditional table-based relational database structure in favor of JSON-like documents with dynamic schemas (MongoDB calls the format BSON), making the integration of data in certain types of applications easier and faster. Released under a combination of the GNU Affero General Public License and the Apache License, MongoDB is free and open-source software.

Express.js is a Node.js web application framework, designed for building single-page, multi-page, and hybrid web applications.

AngularJS, commonly referred to as Angular, is an open-source web application framework maintained by Google and a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. Its goal is to simplify both development and testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich internet applications.

Node.js is an open source, cross-platform runtime environment for server-side and networking applications. Node.js applications are written in JavaScript, and can be run within the Node.js runtime on OS X, Microsoft Windows, Linux, FreeBSD, and IBM i. Node.js provides an event-driven architecture and a non-blocking I/O API that optimizes an application’s throughput and scalability. These technologies are commonly used for real-time web applications.

See more resources:

Creating controllers and views in AngularJS
Single page Application with Angularjs, Minimalweb Node MVC and MongoDB
Delving into Node.js and Express web framework

Website:
Build My Site

Tracking our navigation with ScrollSpy and jQuery

Find out how Bootstrap can transform your standard HTML websites into inspired single-page designs. This course is a project-based approach to learning how to manipulate website layouts with the Bootstrap framework. Staff author Ray Villalobos tackles Bootstrap’s layout classes, like containers, rows, and columns, and shows what it takes to customize Bootstrap’s CSS and address layout challenges like multiple grids and columns. Plus, learn how to track navigation as users scroll, with the ScrollSpy plugin, and create a full-screen, responsive image carousel. See more at: Bootstrap Layouts: Responsive Single-Page Design.

Topics include:

  • Analyzing your markup
  • Creating simple column layouts
  • Creating basic navigation and a simple carousel
  • Modifying Bootstrap styles
  • Working with branding and toggle styles
  • Adding interactivity

Uses for Bootstrap

To use Bootstrap in an HTML page, the developer downloads the Bootstrap CSS stylesheet and includes a link in the HTML file.

(The developer can also compile the CSS file from the downloaded Less or Sass stylesheets, with a special compiler.)

If the developer wants to use the JavaScript components, they must be referenced along with the jQuery library in the HTML document.

The following example illustrates how this works. The HTML code defines a simple search form and a list of results in tabular form. The page consists of HTML 5 elements and CSS information according to the Bootstrap documentation.

ScrollSpy
A view of the example using Bootstrap, rendered in Google Chrome
<!DOCTYPE html>
<html>
  <head>
    <title>Example of Twitter Bootstrap</title>
    <!-- Include the bootstrap stylesheets -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
 
  <body>
    <div class="container">
      <h1>Search</h1>
      <label>Example for a simple search form.</label>
 
      <!-- Search form with input field and button -->
      <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Search</button>
      </form>
 
      <h2>Results</h2>
 
      <!-- Table with alternating cell background color and outer frame -->
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Lorem ipsum dolor ...</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Ut enim ad minim veniam, ...</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Duis aute irure dolor ...</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- JavaScript placed at the end of the document so the pages load faster -->
    <!-- Optional: Include the jQuery library -->
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 
    <!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>
ScrollSpy
Example of a webpage using Bootstrap framework rendered in Mozilla Firefox

Creating a simple fluid layout grid

    <div class="row">
       <div class="col-md-4">Text for column 1</div>
       <div class="col-md-4">Text for column 2</div>
       <div class="col-md-4">Text for column 3</div>
    </div>

This will create three columns of equal width. This is a fluid layout: If the columns are too wide to fit on the screen, they will be stacked automatically.

See more resources:

Creating a Responsive Menu in WordPress for Mobile Devices
Flat UI Pro – Bootstrap Design Framework
Bootstrap grid examples
ScrollSpy
jQuery ScrollSpy

Website:
Build My Site

Elements of an Android App

Creating an app for Android doesn’t require a full-blown integrated development environment. There are several simple, easy-to-learn and easy-to-use tools that make programming Android apps a breeze. Michael Lehman introduces MIT App Inventor 2, Basic4android, and a few other entry-level development environments to build your own app. He’ll show how to test apps on an Android emulator or directly on your phone or tablet, and demonstrate tools for building hybrid apps that run on Android, Windows Phone, and iOS devices, as well as straight on the web. Start building your first app with these simple tools today. See more at: Simple Android Development Tools.

Topics include:

  • Understanding the elements of an Android app, such as controls, sensors, effectors, and storage
  • Exploring MIT App Inventor 2
  • Getting started with Basic4android
  • Building simple apps
  • Testing apps on Android emulators and devices
  • Sharing apps
  • Creating hybrid apps with Appy Pie, Make Me Droid, and AppMakr

App Inventor for Android

Android
Google App Inventor
App Inventor for Android is an open-source web application originally provided by Google, and now maintained by the Massachusetts Institute of Technology (MIT).

It allows newcomers to computer programming to create software applications for the Android operating system (OS). It uses a graphical interface, very similar to Scratch and the StarLogo TNG user interface, which allows users to drag-and-drop visual objects to create an application that can run on Android devices. In creating App Inventor, Google drew upon significant prior research in educational computing, as well as work done within Google on online development environments.

App Inventor and the projects on which it is based are informed by constructionist learning theories, which emphasizes that programming can be a vehicle for engaging powerful ideas through active learning. As such, it is part of an ongoing movement in computers and education that began with the work of Seymour Papert and the MIT Logo Group in the 1960s and has also manifested itself with Mitchel Resnick’s work on Lego Mindstorms and StarLogo.

App Inventor includes:

  • A designer, in which a program’s components are specified. This includes visible components, such as buttons and images, which are placed on a simulated screen, and non-visible components, such as sensors and web connections.
  • A blocks editor, in which the program’s logic is created.
  • A compiler based on the Kawa language framework and Kawa’s dialect of the Scheme programming language, developed by Per Bothner and distributed as part of the GNU operating system by the Free Software Foundation.
  • An app for real-time debugging on a connected Android device.

On December 6, 2013 (the start of the Hour of Code), MIT released App Inventor 2, renaming the original version “App Inventor Classic” Major differences are:

  • The blocks editor in the original version ran in a separate Java process, using the Open Blocks Java library for creating visual blocks programming languages.
    Open Blocks is distributed by the Massachusetts Institute of Technology’s Scheller Teacher Education Program (STEP) and is derived from master’s thesis research by Ricarose Roque. Professor Eric Klopfer and Daniel Wendel of the Scheller Program supported the distribution of Open Blocks under an MIT License. Open Blocks visual programming is closely related to StarLogo TNG, a project of STEP, and Scratch, a project of MIT Media Laboratory’s Lifelong Kindergarten Group. App Inventor 2 replaced Open Blocks with Blockly, a blocks editor that runs within the browser.
  • The | MIT AI2 Companion app enables real-time debugging on connected devices via Wi-Fi, not just USB.

As of May 2014, there were 87 thousand weekly active users of the service and 1.9 million registered users in 195 countries for a total of 4.7 million apps built.

Website:
Build My Site

Packaging an Android app

In this course, lynda.com author David Gassner shows you how to prepare, package, and publish your Android app on Google Play, and provides a brief overview of the alternatives offered by Amazon and Barnes & Noble. Watch the online video course: Distributing Android Apps

Topics include:

  • Packaging an Android app
  • Distributing through Google vs. Amazon vs. Barnes & Noble
  • Exporting the APK file
  • Testing the app
  • Shrinking and protecting an app with ProGuard
  • Creating and uploading screenshots to Google Play
  • Adding in-app products
  • Tracking app usage and revenue

Android Apps

Android
Android 4.4.2 home screen
Android has a growing selection of third party applications, which can be acquired by users either through an app store such as Google Play or the Amazon Appstore, or by downloading and installing the application’s APK file from a third-party site. The Play Store application allows users to browse, download and update apps published by Google and third-party developers, and is pre-installed on devices that comply with Google’s compatibility requirements. The app filters the list of available applications to those that are compatible with the user’s device, and developers may restrict their applications to particular carriers or countries for business reasons. Purchases of unwanted applications can be refunded within 15 minutes of the time of download, and some carriers offer direct carrier billing for Google Play application purchases, where the cost of the application is added to the user’s monthly bill.

As of July 2013, there are more than one million applications available for Android in the Play Store. As of May 2013, 48 billion apps have been installed from the Google Play store.

Applications (“apps”), that extend the functionality of devices, are developed primarily in the Java programming language language using the Android software development kit (SDK). The SDK includes a comprehensive set of development tools, including a debugger, software libraries, a handset emulator based on QEMU, documentation, sample code, and tutorials. The officially supported integrated development environment (IDE) is Eclipse using the Android Development Tools (ADT) plugin. Other development tools are available, including a Native Development Kit for applications or extensions in C or C++, Google App Inventor, a visual environment for novice programmers, and various cross platform mobile web applications frameworks.

It was announced in January 2014 that Chrome HTML5 web applications should become available, using a compatibility layer from the open source Apache Cordova framework to allow such applications to be wrapped in a native application shell, enabling their distribution over Google Play.

In order to work around limitations on reaching Google services due to Internet censorship in the People’s Republic of China, Android devices sold in the PRC are generally customized to use state approved services instead.


Learn to Build a Simple Android App Interactive Video Learning Path

from: Treehouse

Website:
Build My Site

AngularJS Tutorial: Filtering Output

AngularJS provides filters for formatting raw data prior to output without changing variables. Find out how to set up and work with filtering in this tutorial. Watch more at: Up and Running with AngularJS.

This tutorial is a single movie from the Up and Running with AngularJS course presented by lynda.com author Joseph LeBlanc. The complete course is 1 hour and 9 minutes and it shows how to extend HTML through the rich JavaScript framework AngularJS.

Introduction
1. Configuring a New Angular Project
2. Templates
3. Application Structure
4. Server-Side Integration

Filtering (software)

In shells on Unix-like operating systems and in the modern Windows shell, such a filter usually gets most of its data from standard input (the main input stream) and writes its main results to standard output (the main output stream). The command syntax for getting data from a device or file other than standard input is the input operator (“<"). Similarly, to send data to a device or file other than standard output is the output operator (">“). To append data lines to an existing output file, one can use the append operator (“>>”). Filters may be strung together into a pipeline with the pipe operator (“|”). This operator signifies that the main output of the command to the left is passed as main input to the command on the right.

Pipelines in command line interfaces

All widely used Unix and Windows shells have a special syntax construct for the creation of pipelines. In all usage one writes the filter commands in sequence, separated by the ASCII vertical bar character “|” (which, for this reason, is often called “pipe character”). The shell starts the processes and arranges for the necessary connections between their standard streams (including some amount of buffer storage).

AngularJS filtering
Filter code lives in the app/js/filters.js file

Notable Angular directives

AngularJS directives allow the developer to specify custom and reusable HTML tags that moderate the behavior of certain elements.
ng-app
Declares an element as a root element of the application allowing behavior to be modified through custom HTML tags.
ng-bind
Automatically changes the text of a HTML element to the value of a given expression.
ng-model
Similar to ng-bind, but allows two-way data binding between the view and the scope.
ng-class
Allows class attributes to be dynamically loaded.
ng-controller
Specifies a JavaScript controller class that evaluates HTML expressions.
ng-repeat
Instantiate an element once per item from a collection.
ng-show & ng-hide
Conditionally show or hide an element, depending on the value of a boolean expression.
ng-switch
Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.
ng-view
The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.
ng-if
Basic if statement directive which allow to show the following element if the conditions are true.

See Some Related Resources:

Using AngularJS at Localytics
Introduction to Web Applications Development
AngularJS at Google+
Batarang Chrome plugin

Website:
Build My Site

CSS Position: fixed-sticky | Flexbox | Google Web Designer

You can find more learning videos similar to this one at: teamtreehouse.com – In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about CSS Position: fixed-sticky, Flexbox, Google Web Designer and more.

CSS 4

There is no single, integrated CSS4 specification, since it is split into separate modules. However, there are “level 4” modules.

Since CSS3 split the CSS language’s definition into modules, the modules have been allowed to level independently. Most modules are level 3 – they build on things from CSS 2.1. A few level 4 modules exist (such as Image Values, Backgrounds & Borders, or Selectors), which build on the functionality of a preceding level 3 module. Others define entirely new functionality, such as Flexbox.

So, while there is no monolithic “CSS4” that will be worked on after “CSS3” is finished completely, the level 4 modules can collectively be referred to as “CSS4”.

Polyfill

flexbox
Usage share of web browsers according to StatCounter.
In web development, a polyfill (or polyfiller) is downloadable code which provides facilities that are not built into a web browser. For example, many features of HTML5 are not supported by versions of Internet Explorer older than version 8 or 9, but can be used by web pages if those pages install a polyfill. Web shims like HTML5 Shiv are a related concept.

Polyfills can also be used to add entirely new functionality to browsers. For instance, BrowserID relies on a Javascript API which (as of mid-2012) is not supported in any browser and must be provided via a polyfill.

Google Web Designer

Google Web Designer is a program for Windows and Mac from Google for creating interactive HTML5 sites and ads for any device. It offers a GUI with common design tools, such as Text Tool, Shapes and Pen Tool, as well as integrating Google Web Fonts. The advertising feature set is more complete with components to add Google Maps, YouTube videos and more, as well as automatically including the tracking code events for DoubleClick and AdMob. Version 1 was released by Google on September 30, 2013.

Here are the links from the video:
filamentgroup/fixed-sticky · GitHub
filamentgroup/fixed-sticky

elclanrs/jq-idealforms · GitHub
elclanrs/jq-idealforms

Focus transition

wilsonpage/fastdom · GitHub
fastdom

Solved By Flexbox — Cleaner, hack-free CSS
Solved By Flexbox

Top Drawer – A smooth dropdown menu for responsive web design | Experiment #5
Top Drawer

Google Web Designer

Treehouse New Job Board Feature For Members Only! Unlock your full potential!

Website:
Build My Site

HTML5 Video Tutorial: Creating a WebM Video

WebM is a high-quality open-source video format. In this tutorial, learn how to create a WebM video and work with the free Miro video encoder. Watch more at: Up and Running with HTML5 Video.

This tutorial is a single movie from the Up and Running with HTML5 Video course presented by lynda.com author Tom Green. The complete course is 1 hour and 50 minutes and takes you through the history of video on the web, while showing you how to move forward with HTML5.

Introduction
1. How We Got into This Mess
2. HTML5 Video Primer
3. Showtime: Playing a Video Stream
4. There Are Alternatives

WebM

WebMWebM is an audio-video format designed to provide royalty-free, open video compression for use with HTML5 video. The project’s development is sponsored by Google Inc.

A WebM file consists of VP8 video and Vorbis audio streams, in a container based on a profile of Matroska. The project releases WebM-related software under a BSD license and all users are granted a worldwide, non-exclusive, no-charge, royalty-free patent license.

WebM will soon be updated to accommodate the VP9 video codec and the Opus audio codec, according to Google.

Services

YouTube offers WebM videos as part of its HTML5 player experiment. All uploaded files are encoded into WebM in 360p, 480p, 720p and 1080p resolutions. YouTube has committed to encode its entire portfolio of videos to WebM. The YouTube app for the Nintendo Wii uses WebM for streaming videos or H.263 as a fall-back option.
Wikimedia uses WebM for the HTML5 player.

Sorenson Media’s online encoding platform now supports VP8 and WebM.
Skype has implemented the VP8 codec into the Skype 5.0 software.
Logitech is planning to use WebM as part of a video calling service.
Nvidia announced 3D video support for WebM through HTML5 and their NVIDIA 3D Vision technology.

Miro (software)

Miro WebM
Miro 3.5 under Ubuntu, showing the Miro guide in the main window while playing a podcast.
Miro (formerly named Democracy Player or DTV) is an audio, video player and Internet television application developed by the Participatory Culture Foundation. It runs on Microsoft Windows, Mac OS X, FreeBSD and GNU/Linux and supports most known video file formats. It offers both audio and video, some in HD quality.

Miro is free software, released under the terms of the GNU General Public License.

Features

Miro can automatically download videos from RSS-based “channels”, manage them and play them. The application is designed to mesh with other Participatory Culture Foundation (PCF) products such as Video Bomb, a social tagging video website, and the Channel, a TV guide for Internet television.

Miro integrates an RSS news aggregator and podcatcher, a BitTorrent client (based on libtorrent), and a media player (VLC media player under Windows, QuickTime under Mac OS X, and xine media player or GStreamer under GNU/Linux and FreeBSD). Since 2.0, Miro supports the adding of website bookmarks under the “Sites” category; by default, ClearBits.net is preloaded in Miro as a bookmark.

Examples of supported video files are QuickTime, Windows Media Video (WMV), MPEG, Audio Video Interleave (AVI), XVID as a video player. It also supports RSS BitTorrent. When a new video is available, the program will notify and download if possible.

The Miro Video Converter converts video formats. It is based on FFmpeg with profiles for the Theora (.ogv), .mp4, and WebM video formats supported by various devices.

Reception

A link to download Miro and Mozilla Firefox appeared on the front page of The Pirate Bay in July 2009 underneath a notice “We love free software.”

Miro received a favorable review from Josh Quittner who wrote “I have seen the future of television and it’s an application called Miro.” In May 2011, Seth Rosenblatt of CNET wrote, “Providing one-stop shopping for all your video and audio management desires, open-source and cross-platform Miro deserves much of the praise that’s been heaped upon it.” The Softonic review gave the software a score of 9/10, and described the software as “a perfect example of how video content from different sources can be integrated into one single application and served directly to your PC in a fast, easy and elegant way.”

Here is a link from the video:
Firefog a Firefox plugin.

See Related Items:

Website:
Build My Site

App Store Screenshots, Regular Expressions, Programming Fonts

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about the latest in web design, web development, HTML5, front end development, and more. You can find more learning videos similar to this one at: Team Treehouse.

Graphics Interchange Format (GIF) Pronunciation

According to Steve Wilhite, the creator of the GIF format, the intended pronunciation deliberately echoes the American peanut butter brand, Jif, and CompuServe employees would often say “Choosy developers choose GIF”, spoofing this brand’s television commercials. As of 2013, Wilhite remains annoyed that there is debate over the pronunciation.

Usage

  • GIFs are suitable for sharp-edged line art (such as logos) with a limited number of colors. This takes advantage of the format’s lossless compression, which favors flat areas of uniform color with well defined edges.
  • GIFs can be used to store low-color sprite data for games.
  • GIFs can be used for small animations and low-resolution film clips.
  • Since a single GIF image palette is limited to 256 colors, it is not usually used as a format for digital photography. Digital photographers use image file formats capable of reproducing a greater range of colors, such as TIFF, RAW or JPEG.

AngularJS

AngularJS programmingAngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

The library reads in HTML that contains additional custom tag attributes; it then obeys the directives in those custom attributes, and binds input or output parts of the page to a model represented by standard JavaScript variables. The values of those JavaScript variables can be manually set, or retrieved from static or dynamic JSON resources.

Two-way data binding

AngularJS’ two-way data binding is its most notable feature and reduces the amount of code written by relieving the server backend from templating responsibilities. Instead, templates are rendered in plain HTML according to data contained in a scope defined in the model. The $scope service in Angular detects changes to the model section and modifies HTML expressions in the view via a controller. Likewise, any alterations to the view are reflected in the model. This circumvents the need to actively manipulate the DOM and encourages bootstrapping and rapid prototyping of web applications. Some commentators say the AngularJS approach to data binding is much more straightforward than using either Ember.js or Backbone.

Chrome plugin

In July 2012, the Angular team built a plugin for the Google Chrome browser called Batarang, that improves the debugging experience for web applications built with Angular. The extension allows for easy detection of performance bottlenecks and offers a GUI for debugging applications.

Comparisons to Backbone.js

Data-binding
The most prominent feature that separates the two libraries is in the way models and views are synchronized. Whereas AngularJS supports two way data-binding, Backbone.js relies heavily on boilerplate code to harmonize its models and views.

REST
Backbone.js communicates well with RESTful backend. A very simple use of REST APIs is also available with AngularJS using the $resource service. AngularJS also provide a $http service which is more flexible, connecting to remote servers either through a browser’s XMLHttpRequest object or via JSONP.

Templating
AngularJS templating uses a combination of customizable HTML tags and expressions. Backbone.js uses different templating engines such as Underscore.js.

Here are some resources from the video:

Designing App Store “screenshots” by Travis Jeffery of 37signals
Designing App Store “screenshots”

Debuggex: The online visual regex tester. Supports JavaScript and PCRE.
Debuggex

Forecast Font

JavascriptOO.com

Style Guide Boilerplate

AngularJS: an Overview – Glenn Stovall

CSS filters, GIFs, and performance – What I Learned Building

Slant – What are the best programming fonts?

Website:
Build My Site