rependa

Notes from @wesbos's talk:

Our frontend workflow is changing quickly and for good reasons. Tooling for tooling sake is a waste, but don't overlook the utility of modern dev tooling workflows - these are great, useful tools that are letting us improve our workflows in standards-based, forward-looking ways.

Trend: Frontend developers are moving to using package managers (npm) for client-side code (CSS and JS), much like we have been for managing our build tooling itself. I can attest to this being hugely helpful at Filament Group on client-side code, especially now that so many of our projects are on npm (https://www.npmjs.com/~filamentgroup ).

Yay, another talk that recommends loadCSS for performance. Nice to hear :)

Gulp tasks to use:

AngularJS Directives

The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.

The ng-model Directive

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

The ng-model directive can also:

AngularJS Expressions

AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.

A Pen by Matt Rependa on CodePen.

License.

AngularJS Numbers

AngularJS numbers are like JavaScript numbers

A Pen by Matt Rependa on CodePen.

License.

AngularJS Strings

AngularJS strings are like JavaScript strings

A Pen by Matt Rependa on CodePen.

License.

	<!doctype html>
	<html>
	<head>
	<title></title>
	<link rel="stylesheet" href="style.css"/>
	</head>
	<body>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	</body>

	/*
	* Clearfix: contain floats
	*
	* For modern browsers
	* 1. The space content is one way to avoid an Opera bug when the
	* `contenteditable` attribute is included anywhere else in the document.
	* Otherwise it causes space to appear at the top and bottom of elements
	* that receive the `clearfix` class.
	* 2. The use of `table` rather than `block` is only necessary if using
	* `:before` to contain the top-margins of child elements.

	/*
	http://stackoverflow.com/questions/15837808/fancy-media-queries-with-some-less-magic

	setup

	*/

	@xs-min: 480px;
	@sm-min: 768px;
	@md-min: 992px;

	<div ng-app="myApp" ng-controller="myCtrl">

	First Name: <input type="text" ng-model="firstName"><br>
	Last Name: <input type="text" ng-model="lastName"><br>
	<br>
	Full Name: {{firstName + " " + lastName}}

	</div>

	function isEnFr(){
	var lang = (top.location.href.toLowerCase().indexOf("/fr/")>-1)? "fr":"en";
	return lang;
	}