cerebrl

Front-End Processes, Workflows and Standards

1. Definition: The front-end consists of any code that is run on the client (browser): HTML, CSS and JavaScript.
2. Agnostic and independent front-end code is priority. Front-end code should not represent server/back-end architecture.
3. Modularity and encapsulation is vital to increase reusability and following the DRY philosophy.
4. The MVC philosophy (when developing web-applications) should be closely followed, but exact replication may be unnecessary. The structure goes as follows:
   • Model: Models do not technically exist in the client (unless using client-sided storage (localStorage, et cetera), but act more as temporary data stores between getting and setting data with the server. So, this temporary data store will be considered and called a Service. Data should always exist as native JSON either as objects or arrays.
   • View: Views should be pure HTML containing virtually no logic. Element attributes (data-, classes, ids, ng-model,

cerebrl

AngularJS localStorage

This was nabbed from DailyJS

There are examples of apps that use localStorage on the AngularJS blog. One that I downloaded and picked apart was FoodMe by Igor Minar. In FoodMe, Igor creates a localStorage service which basically just wraps window.localStorage so it can be loaded with dependency injection. The $scope is then watched, and a string version of a given record is dumped into localStorage using JSON.stringify:

foodMeApp.factory('customer', function($rootScope, localStorage) {
	var LOCAL_STORAGE_ID = 'fmCustomer';
	var customerString = localStorage[LOCAL_STORAGE_ID];

cerebrl

alias gitA="git add -A && git status "
alias gitS="git status "
alias gitPl="git pull "
alias gitCm="git commit -m "
alias gitACm="gitA && gitCm "
alias gitPPM="git pull && git push origin master "
alias gitPB="git push origin "
alias gitPg="git checkout gh-pages && git push origin gh-pages && git checkout master && git branch -d gh-pages"
alias gitCkM="git checkout master "
alias gitStPlPhi="git subtree pull --prefix=phi git@github.com:cerebralideas/phi.git "

cerebrl

{
    // --------------------------------------------------------------------
    // JSHint Configuration, Strict Edition
    // --------------------------------------------------------------------
    //
    // This is a options template for [JSHint][1], using [JSHint example][2]
    // and [Ory Band's example][3] as basis and setting config values to
    // be most strict:
    //
    // * set all enforcing options to true

cerebrl

RewriteEngine On

RewriteCond %{SERVER_PORT} !^443$

RewriteRule ^(.*)$ https://YOUR_DOMAIN.com/$1 [R=permanent]
# BEGIN WordPress

# END WordPress

cerebrl

<?php 

  query_posts('posts_per_page=6');

  if (have_posts()) {

    // do first post
    the_post(); ?>

    <!-- HTML for first post -->

cerebrl

<?php

  /* Pull in the custom post type */
  					
  $NEW_query = new WP_Query('post_type=POST-TYPE-NAME'); 
  					
  while ($NEW_query->have_posts()) : $NEW_query->the_post(); ?>
  					
  	<?php get_template_part( 'your/template/part/dir', get_post_format() ); ?>
							

cerebrl

What do the little symbols for scope linking mean?

Well, say you have controller.js and view.html with the following code:

Your controller.js

$scope.name = 'world';

Your view.html

cerebrl

/**************************
CSS 2.1 Attribute Selectors
**************************/

E[foo] /* Matches any E element with the "foo" attribute set (whatever the value).	*/
E[foo="warning"] /* Matches elements whose "foo" attribute value is exactly equal to "warning".*/
E[foo~="warning"] /* Matches elements whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". */

/**************************
CSS 3 Attribute Selectors

cerebrl

function getAge(dateString) {
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    return age;
}