Styling Social Media Icons

Styling social media icons provides you with in-depth training on Web. Taught by Justin Seeley as part of the Building a Responsive Portfolio Site.

A great portfolio can make the difference between landing the job and getting passed over. This quick and fun project-based course will show you how to build a responsive portfolio site from start to finish. Staff author Justin Seeley shows how to plan the website in Photoshop and convert the plan into a single-page site. The backbone driving the portfolio will be Skeleton, an intuitive CSS framework that you’ll learn how to use for your own projects. Along the way, you’ll find out how to work with web fonts like Google fonts and icon fonts, how to start inserting content into containers, and how to style the look of headers, images, typography, and even social media buttons with some simple custom CSS. Add on a responsive lightbox effect and some media queries to make sure your site is ready for mobile, and you’ll have a complete, high-quality platform for showcasing your work.

Topics include:

  • Planning and setting up an HTML layout
  • Creating responsive CSS grids
  • Incorporating web and icon fonts
  • Building a layout with the Skeleton grid
  • Styling the website
  • Using jQuery for simple lightbox effects
  • Testing a website’s responsiveness
  • Adjusting media queries

CSS Frameworks

CSS frameworks are pre-prepared software frameworks that are meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and unobtrusive. This differentiates these from functional and full JavaScript frameworks.

social
Website development

CSS frameworks offer different modules and tools:

  • reset style sheet
  • grid especially for responsive web design
  • web typography
  • set of icons in sprites or icon fonts
  • styling for tooltips, buttons, elements of forms
  • parts of graphical user interfaces like accordion, tabs, slideshow or modal windows (Lightbox)
  • equalizer to create equal height content
  • often used css helper classes (left, hide)

Skeleton is: Responsive Grid Down To Mobile, Fast to Start, Style Agnostic. Base grid is a variation of the 960 grid system.

Google Fonts

Google Fonts (previously called Google Web Fonts) is an interactive directory of free hosted application programming interfaces for web fonts. It was launched in 2010, and revamped in 2011. Many of the fonts are released under the SIL Open Font License 1.1, while some are released under the Apache License; both are free software licenses. The fonts are also served by Monotype’s SkyFonts, and Adobe’s Edge Web Fonts and Typekit services.

social

Google Fonts is designed to provide a platform for users to discover fonts and is used extensively, and example font faces include Lato, Raleway, and Lobster.

Font Awesome

Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with the Twitter Bootstrap, and later was incorporated into the BootstrapCDN.

social

Font Awesome has a 20% market share among those websites which use third-party Font Scripts on their platform, ranking it on a second place after Google Fonts.

See more resources:

Grid Based Web Design Resources
28 Powerful Open Source CSS Frameworks & Libraries

Website:
Build My Site

If you like this post, please share it!

Restyling the Mobile Menu

Restyling the mobile menu provides you with in-depth training on Web. Taught by Chris Converse as part of the Creating a Responsive Web Design: Advanced Techniques.

Looking to take your responsive web design skills to the next level? Learn how to create collapsible menus and add scalable vector graphics (SVGs) to your layouts. Chris Converse shares advanced techniques to style mobile menus and graphics with HTML, CSS, JavaScript, and jQuery. These videos offer practical, start-to-finish tutorials to build more efficient and flexible webpages that can adapt to different screen sizes and orientations.

mobile
Content is like water, a saying that illustrates the principles of RWD.

“Holy Grail” – Responsive

The Holy Grail refers to a web page layout which has multiple, equal height columns that are defined with style sheets. It is commonly desired and implemented, although the ways in which it can be implemented with current technologies all have drawbacks. Because of this, finding an optimal implementation has been likened to searching for the elusive Holy Grail.

The limitations of CSS and HTML, the desirability of semantically meaningful pages that rank well in search engines, and the deficiencies of various browsers combine to create a situation in which there is no way to create this type of layout that would be considered totally correct. As the underlying technologies do not provide a proper solution, web designers have found various ways to work around the limitations. Common workarounds include changes in page structure, the addition of graphics, scripting, and the creative use of CSS. These methods are imperfect, inconvenient, and may even be considered abuse of the web standards and their intent.

Upcoming web standards will deal with this and other layout issues in a much more elegant fashion. However, the problem will continue until these standards are finalized and widely implemented.

mobile

The World Wide Web Consortium (W3C) has approached the layout issue through various proposals. Three of these proposals are under current development: the Flexible Box Layout Module, the Grid Layout Module, and the Template Layout Module.

The most mature proposal is the Flexible Box Module, which reached Last Call Working Draft status as of May 2015, and has support in all current desktop and many mobile browsers (Webkit-based browsers and some other mobile browsers require prefix filters). Setting an element’s display property to “flex” or “flex-inline” causes the element to become a new type of container (similar to a block or inline block, respectively), with new methods of positioning child objects. Content can flow in any direction, and be displayed in any order. The W3C proposal contains an example which achieves the Holy Grail column layout using four simple CSS rules, and makes the layout responsive with a simple media query rule. The module can also be used to address many other layout issues.

The Grid Layout Module similarly allows a designer to create a container for layout, which contains rows and columns of fixed or variable size into which elements can be placed. It is in Working Draft status (September 2015), and has very limited browser support. This module is a continuation of work done as the Grid Positioning Module.

There is a new draft of the Template Layout Module as of March 2015, which was inactive since 2011. This module allows designers to create grid slots in a container semi-graphically, in a manner that has been described as “ASCII art”. This module does not have browser support, but Web designers who wish to use the Template Layout syntax may add support to their pages through jQuery/javascript. This module is a continuation of work previously done as the Advanced Layout Module, and the authors state that it “combines ideas from earlier drafts on Template Layout, Grid Positioning and Grid Layout”. The W3C does not expect that this module will become a recommendation; rather it serves as a repository for ideas which may migrate to other modules of CSS.

When these standards become mature, and nonconforming browsers are no longer in common use, the Holy Grail problem will have become a non-issue.

See more resources:

Holy Grail Layout — Solved By Flexbox — Cleaner, hack-free CSS
Responsive Web Design
The Role of Table Layouts in Responsive Web Design

Website:
Build My Site

If you like this post, please share it!

Integrating Firebase Into Our Application

Integrating Firebase into our application from the Course AngularJS: Adding Registration to Your Application.

Firebase

Authentication is a fundamental part of any web application, but it can be notoriously difficult to implement. In this short course, you’ll create a simple registration system that allows users to log in and out of your applications. By taking advantage of Google’s Firebase authentication service, you can manage registrations easily and securely. In the process, you’ll explore working with the AngularJS application structure (including routes and controllers), storing user information into the Firebase NoSQL database, and creating services to manage registration information throughout different controllers. This will help you create a great registration template that you can use as a starting point in a variety of web applications.

Topics include:

  • Adding a basic MVC structure
  • Using routes
  • Processing form input
  • Integrating Firebase
  • Storing registration information in the database
  • Logging users in and out of an app

Realtime Database

Firebase provides a realtime database and backend as a service. The service provides application developers an API that allows application data to be synchronized across clients and stored on Firebase’s cloud. The company provides client libraries that enable integration with Android, iOS, JavaScript, Java, Objective-C and Node.js applications. The database is also accessible through a REST API and bindings for several JavaScript frameworks such as AngularJS, React, Ember.js and Backbone.js. The REST API uses the Server-Sent Events protocol, which is an API for creating HTTP connections for receiving push notifications from a server. Developers using the realtime database can secure their data by using the company’s server-side-enforced security rules.

Web API

A web API is a subset of an application programming interface (API). It is used for exchanging information with a website, either by receiving or by sending data. A web API typically consists of multiple publicly exposed endpoints that accept HTTP requests and respond with the requested data, typically in the form of JavaScript Object Notation (JSON) or Extensible Markup Language (XML).

Firebase

Server-side

A server-side web API is a programmatic interface to a defined request-response message system, typically expressed in JSON or XML, which is exposed via the web—most commonly by means of an HTTP-based web server. Mashups are web applications which combine the use of multiple such web APIs. Webhooks are server-side web APIs that take as input a URI that is designed to be used like a remote named pipe or a type of callback such that the server acts as a client to deference the provided URI and trigger an event on another server which handles this event thus providing a type of peer-to-peer IPC.

Client-side

A client-side web API is a programmatic interface to extend functionality within a web browser or other HTTP client. Originally these were most commonly in the form of native plug-in architectures however most newer ones target standardized JavaScript bindings.

The Mozilla Foundation created their WebAPI specification which is designed to help replace native mobile applications with HTML5 applications.

Google created their Native Client architecture which is designed to help replace insecure native plug-ins with secure native sandboxed extensions and applications. They have also made this portable by employing a modified LLVM AOT compiler.

See More Resources:

Free eBook: AngularJS Programming Cookbook
Responsive Web Design with AngularJS
Firechat – Open-source real-time chat, built on Firebase
Firepad – Open source collaborative code and text editing

Website:
Build My Site

If you like this post, please share it!

Creating and Compiling a Hello World Application with Go

Creating and compiling a hello world application provides you with in-depth training on Developer. Taught by David Gassner as part of the Up and Running with Go developer series.

What is Go? Go is a next-generation, open-source programming language created by Google for building systems, web, and other applications. This course is designed to help developers get started with Go, covering its core language elements and syntax. David Gassner introduces tools and skills used in a Go workflow—including Go Playground, an online tool that takes Go development off the desktop. He also covers basic programming tasks: managing values, using math operators, storing values as complex types, and managing program flow. Plus, learn how to structure Go code for maximum readability and performance, read and write files, and make simple web requests.

Topics include:

  • Installing Go tools
  • Creating and compiling a Go workspace
  • Exploring variables, constants, and types
  • Storing ordered and unordered values
  • Grouping related values in structs
  • Programming conditional logic and loops
  • Defining and calling functions
  • Handling errors
  • Working with files
  • Creating a simple HTTP server

Language Tools in Go

Go includes the same sort of debugging, testing, and code-vetting tools as many language distributions. The Go distribution includes, among other tools,

Go

  • go build, which builds Go binaries using only information in the source files themselves, no separate makefiles
  • go test, for unit testing and microbenchmarks
  • go fmt, for formatting code
  • go get, for retrieving and installing remote packages
  • go vet, a static analyzer looking for potential errors in code
  • go run, a shortcut for building and executing code
  • godoc, for displaying documentation or serving it via HTTP
  • gorename, for renaming variables, functions, and so on in a type-safe way
  • go generate, a standard way to invoke code generators

Here is a Hello world program in Go:

package main

import "fmt"

func main() {
fmt.Println("Hello, World")
}

Run or edit this example online.

It also includes profiling and debugging support, runtime instrumentation (to, for example, track garbage collection pauses), and a race condition tester.

Conventions and Code Style

The Go authors and community put substantial effort into molding the style and design of Go programs:

  • Indentation, spacing, and other surface-level details of code are automatically standardized by the go fmt tool. golint does additional style checks automatically.
  • Tools and libraries distributed with Go suggest standard approaches to things like API documentation (godoc), testing (go test), building (go build), package management (go get), and so on.
  • Syntax rules require things that are optional in other languages, for example by banning cyclic dependencies, unused variables or imports, and implicit type conversions.
  • The omission of certain features (for example, functional-programming shortcuts like map and C++-style try/finally blocks) tends to encourage a particular explicit, concrete, and imperative programming style.
  • Core developers write extensively about Go idioms, style, and philosophy, in the Effective Go document and code review comments reference, presentations, blog posts, and public mailing list messages.

Website:
Build My Site

If you like this post, please share it!

Building a Note-Taking App for Android | Customizing the appearance of list items

Android, Windows, and iOS support are all required for a successful product. This course, revised for 2015, is one in a series that will demonstrate the platforms’ similarities and differences via the development of a complete note-taking app. This installment uses Android Studio to get the job done. Author David Gassner shows you how to create a new project in Android Studio, customize its material design themes, and create a data management layer that allows users to create, read, update, and delete notes. He also demonstrates how to build a rich user interface, create activities (aka screens), and enable action icons to control navigation.

Building a Note-Taking App for iOS 8 and Building a Note-Taking App for Windows Phone 8 and Windows Store use the same assets to develop a similar app. Compare and contrast the steps and discover the similarities and differences between the three platforms. See more about this course: Building a Note-Taking App for Android.

Topics include:

  • Understanding Android UI and data management patterns
  • Creating an Android Studio project
  • Customizing material design theme colors
  • Defining an SQLite database structure
  • Managing data with ContentProvider and Loader classes
  • Retrieving and displaying data
  • Customizing data display with a CursorAdapter
  • Creating, updating, and deleting notes
  • Preparing the app for deployment

Material Design

Material Design (codenamed Quantum Paper) is a design language developed by Google. Expanding upon the “card” motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Designer Matías Duarte explained that, “unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.” Google states that their new design language is based on paper and ink.

Android
Some typical Material Design UI components

Material Design can be used in Android version 2.1 and up via the v7 appcompat library, which is used on virtually all Android devices that were made after 2009. Material Design will gradually be extended throughout Google’s array of web and mobile products, providing a consistent experience across all platforms and applications. Google has also released application programming interfaces (APIs) for third-party developers to incorporate the design language into their applications.

Google announced Material Design on June 25, 2014, at the 2014 Google I/O conference. As of 2015, most of Google’s mobile applications for Android have applied the new design language, including Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox, all of the Google Play-branded applications, and to a smaller extent the Chrome browser and Google Keep. The desktop web interfaces of Google Drive, Docs, Sheets, Slides and Inbox have incorporated it as well.

Android

The canonical implementation of Material Design for web application user interfaces is called polymer paper elements. It consists of the Polymer library, a shim that provides a Web Components API for browsers that do not implement the standard natively, and the so-called “paper elements collection”.

See more resources:

Material Design Resources and Inspiration
Material Design Lite – A Giant Library of Web Components
Lessons Learned From Analyzing Material Design Components

Website:
Build My Site

If you like this post, please share it!

Building the Node.js Server App

Socket technology is a natural fit for presentation and chat applications. This course helps you use Socket IO in combination with powerful JavaScript libraries to develop an interactive polling application that processes data in real time, allowing presenters to interact with audience members and graph their responses. Alex Banks shows each step in the process, starting with setting up the node environment and express app for development. You’ll then create and connect sockets for real-time data sharing and set up routing and interface elements with React.js, refactoring those components for ES6 integration. This setup will allow you to program functionality for running presentations, joining presentations, asking and answering questions, and graphing the results of the poll. See more: Building a Polling App with Socket IO and React.js.

Topics include:

  • Setting up the environment
  • Connecting sockets
  • Handling disconnects
  • Setting up the React.js router
  • Passing state to child components as properties
  • Joining the presentation
  • Starting and running the presentation
  • Asking and answering questions
  • Graphing results
  • Upgrading to ES6

Node.js

Node.js allows the creation of web servers and networking tools using JavaScript and a collection of “modules” that handle various core functionality. Modules handle file system I/O, networking (HTTP, TCP, UDP, DNS, or TLS/SSL), binary data (buffers), cryptography functions, data streams, and other core functions. Node’s modules use an API designed to reduce the complexity of writing server applications.

Frameworks can be used to accelerate the development of applications, and common frameworks are Express.js, Socket.IO and Connect. Node.js applications can run on Microsoft Windows, Unix, NonStop and Mac OS X servers. Node.js applications can alternatively be written with CoffeeScript (an alternative form of JavaScript), Dart or Microsoft TypeScript (strongly typed forms of JavaScript), or any language that can compile to JavaScript.

Smashing Node.js: JavaScript Everywhere–Free Sample Chapters

node.js

Node.js is primarily used to build network programs such as web servers, making it similar to PHP and Python. The biggest difference between PHP and Node.js is that PHP is a blocking language, where commands execute only after the previous command has completed, while Node.js is a non-blocking language where commands execute in parallel, and use callbacks to signal completion.

Node.js implements event-driven programming for web applications in JavaScript. Developers can create highly scalable servers without using threading, by using a simplified model of event-driven programming that uses callbacks to signal the completion of a task. Concurrency is difficult in many server-side programming languages, and often leads to poor performance. Node.js is designed to use the scripting language JavaScript for Unix network programming.

Thousands of open-source libraries have been built for Node.js, most of which are hosted on the npm website. Its developer community has two main mailing lists and the IRC channel #node.js on freenode.

See more resources:

Real Time with React.js and Socket.io
private npm is here
Node.js – A Simple Tutorial With Example
node.js domains make my app predictably fixable

Website:
Build My Site

If you like this post, please share it!

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

If you like this post, please share it!

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

If you like this post, please share it!

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

If you like this post, please share it!

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

If you like this post, please share it!