pixelPSHR

A Front End Developers guide to building highly efficient user experiences and user interfaces.

[pixelpshr-blog]

Hands On Review of Google’s flagship Nexus 5x Smart Phone

The budget conscious model of the Nexus line is back as the Nexus 5x and this time it means business, comparable to its higher end model the Nexus 6p but about $150 less.

This is my 3rd phone in the nexus line started with the 5 moved to the 6 and now back with the 5x. I have been using the phone a little more than a week with the Project Fi service google offers. The phone is fantastic it is the lightest phone i have ever owned and just as fast as my nexus 6 was if not faster. The phone is primarily plastic but still feels sturdy and looks clean. Usb type-c charging is one of the best new features in the nexus line i get a full charge in about 40 minutes and 10 minutes of charge get about 18% charge. 

Specs

Dimensions

147.0 x 72.6 x 7.9 mm

136 grams

Display

5.2"

Corning® Gorilla® Glass 3

Battery

2700 mAh Battery

USB Type-C for fast charging

Camera

Rear: 12.3 MP2; 1.55 μm; f/2.0

Front: 5 MP

Processor

Qualcomm® Snapdragon™ 808 processor, 1.8 GHz hexa-core 64-bit

Adreno 418 GPU

You can purchase a Nexus 5x here - https://www.google.com/nexus/5x/

[pixelpshr-blog]

What is a Front End Framework?

Front end frameworks were created to simplify and unify the design process. A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.

Essentially, a front­ end framework contains components written in Html, Css, and Javascript that make designing a user interface much simpler. Keeping to the Dry mentality (Don’t Repeat Yourself) by creating reusable components like inputs and buttons as well as grid systems for page structure building.

Top 3 Front End Frameworks :

- Twitter Bootstrap - http://getbootstrap.com/

- MDL(Material Design Lite) - http://www.getmdl.io/

- Zurb Foundation - http://foundation.zurb.com/

What is my preference and why?

When not designing my own lightweight frameworks I am a heavy Twitter Bootstrap 3 user.  I prefer bootstrap over the others for its heavily tested and supported grid system which i have come to master and there pre compiled less versions variables.less file that can change the entire look and feel of bootstrap to fit the needs of the project.

[pixelpshr-blog]

Using Angular.js with JQuery

Out of the box, AngularJS comes stock jqLite, which is a jQuery-esq library that provides a subset of jQuery functionality. If you include jQuery in your page, however, AngularJS will use jQuery instead of jqLite when wrapping elements within your directives. 

Simply add the jquery library script right before angular.js script and it will replace jQlite with full blown jQuery!

[pixelpshr-blog]

Adding and Using Google Fonts on your webpage or app

This tutorial will show you had to add google fonts to add and use google fonts on your website or application

1. Head over to google fronts site https://www.google.com/fonts

2. Select a font by clicking blue add to selection button on right side of panel then select use button at bottom right corner 

3. copy URL at bottom of page and add to the head of your HTML

4. Add to body of css for sitewide or specific class 

font-family: 'Roboto', sans-serif; <-- whatever font you chose

5. See codepen below for example

See the Pen adding google font to website by hailjake (@hailjake) on CodePen.

[pixelpshr-blog]

How To: Two-Way Data Binding with Angular.js

A Lesson on how to build simple two-way data binding with angular.js and twitter bootstrap written on codepen.io

What is two-way data binding?

When properties in the model get updated, so does the UI.

When UI elements get updated, the changes get propagated back to the model.

See the Pen Angular.js two way data binding by hailjake (@hailjake) on CodePen.

[pixelpshr-blog]

Google’s Material Design Lite Aka MDL

Google has introduced a new free front end framework and it incorporates android’s material design for the web below i will highlight some of my favorite components of the framework.

MDL makes it easy to add a material design look and feel to your websites. The “Lite” part of MDL comes from several key design goals: MDL has few dependencies, making it easy to install and use. It is framework-agnostic, meaning MDL can be used with any of the rapidly changing landscape of front-end tool chains. MDL has a low overhead in terms of code size (~27KB gzipped), and a narrow focus — enabling material design styling for websites.

MDL is built on the core technologies of the web you already know and use every day — CSS, HTML and JS. By adopting MDL into your projects, you gain access to an authoritative and highly curated implementation of material design for the web.

Highlights:

1.) Responsive Design with MDL’s Grid system - http://www.getmdl.io/components/index.html#layout-section/grid

2.) Tons of reusable components - http://www.getmdl.io/components/index.html

3.) Clear Standards to adhere to when using MDL.

4.) Can matchup web application with same experience you get on Andriod native apps.

Get Material Design Lite here - http://www.getmdl.io/

[pixelpshr-blog]

Awesome resources when working with Angular.js

I have listed a few awesome resources I like use in my everyday workflow while developing front-end applications with Angular.js. 

1.) Ng-Inspector (Chrome Extension) - http://ng-inspector.org/

ng-inspector is a browser extension that displays an inspector panel showing the AngularJS scope hierarchy in the current page in real time, as well as which controllers or directives are associated with which scope.

2.) Angular.js Batarang - https://github.com/spalger/angularjs-batarang

Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.

3.) Angular.js Developers Guide - https://docs.angularjs.org/guide

Official Extensive Angular Developers Guide

4.) Team Treehouse - http://www.teamtreehouse.com

If you are a beginner with angular or javascript in general I suggest taking a look at the team treehouse angular courses they have tons of javascript courses