A Brief Overview of Angular JS 1

Angular JS is a front-end framework for web applications. It allows you to extend HTML’s syntax to present dynamic content through two-way data-binding.

  • Angular directives are special commands used within the framework
  • All directives start with ‘ng-‘ then the name of the directive
  • Expressions are written in the HTML and are wrapped with {{ }} which is used to add JavaScript within the HTML
  • Two-way data binding ties the view and model together
  • Angular is used for the view in MVC architecture
    • M is for model (or data)
    • V is for view
    • C is for controller (JavaScript that links your data to your template, creates the interaction between your model and your views)
  • Modules are specific JavaScript files used to take care of different tasks
  • Service is a small piece of code that takes care of common tasks
  • $http is a service that handles communications between an http server and your application
  • Deep linking looks at the location URL and manages how it maps to the current state of the page
  • $scope service allows you to pass variables between the JS and the HTML

Directives for form validations:

  • ng-required
  • ng-minlength
  • ng-maxlength
  • ng-pattern

Properties for the models:

  • $pristine (class ng-pristine)
  • $dirty (class ng-dirty)
  • $touched (class ng-touched)
  • $valid (class ng-valid)
  • $invalid (class ng-invalid)

A Brief Overview of JSON

JSON stands for JavaScript Object Notation. It’s the text format used for sharing data, and is the most popular data transmission format. JSON is used for local data while JSONP is used for remote data.

Here are a few other things to keep in mind about this data format:

  • JSON is language independent (it’s available in php, Python, etc)
  • JSON keys are wrapped in quotes
  • JSON keys can be any valid string
  • Special characters can make it difficult to access data, and you should use underscores instead of hyphens
  • JSON has to be parsed into JavaScript (which can be done with eval or JSON.parse – JSON.stringify does the opposite of parse)
  • A great alternative to XML

A Brief Overview of PHP

PHP is an open-source, server-side scripting language that was designed to be used with HTML. It can be object-oriented, and here is an overview of some of its features:

Data Types

Arrays

  • To create a variable and assign it to an empty array, use the following format $newarr = array();
  • To create a variable and assign it to an array, use: $newarr = array(1,2,3,4,5,6);

Associative Arrays

  • Associative arrays are an object-indexed collection of objects, used when you need a key to retrieve data.

Constants

  • The value of constants doesn’t change.
  • Use quotes when defining the constant, define("CONST_VALUE", 10), once it’s been defined, don’t use the quotes when referencing it.
  • You can’t redefine constants.

Booleans

  • When PHP outputs ‘true’ into a string, it outputs 1. For ‘false,’ it outputs nothing.
  • To check if a variable is a boolean, use is_bool();
  • True and False can be written in uppercase or lowercase

Floats

  • round(number1, number2) takes a number and how many significant digits you want there to be
  • ceil(number) ceiling always rounds up
  • floor(number) floor always rounds down
  • is_float(number) to determine whether something is a float

Functions

  • strtolower() changes a string to lower-case
  • strtoupper() changes a string to upper-case
  • ucfirst() changes first letter in string to upper-case
  • ucwords() changes first letter of every word in the string to upper-case
  • strleng() finds length of the string
  • trim() eliminates white spaces
  • strstr() find a string within a string (pass two parameters). Find a string within a string
  • str_replace() takes three parameters – the string you’re looking for, what you want to replace it with, and the item we’re searching in

Integers

  • abs(0 - 100) absolute value
  • pow(3, 6) exponential (first number to the power of the second number)
  • sqrt(25) square root
  • fmod(17, 3) modulo
  • rand() random
  • rand(1,20) random (min, max)
  • is_int(number) to determine whether something is an integer

Null and Empty

  • Case insensitive
  • is_null(); will test if an item is null
  • An empty string, null, 0, 0.0, “0”, false, and an empty array, are all considered items that are empty

Strings

  • Strings can include letters, text, html.
  • Use double quotes or single quotes to denote strings
  • Can do variable replacement inside of a string (but only when you use double quotes):
  <?php
  $phrase = "Hello World";
  ?>

  <?php
    echo "$phrase printed here<br>";
  ?>
  • For in place substitution, use echo "{$phrase} Here<br>";

Debugging

  • Use <?php phpinfo(); ?> to access more information about the configurations
  • Missing semicolons are a common problem
  • To turn on error reporting, in the php.ini file, display_errors = On and error_reporting = E_ALL, in PHP code, ini_set('display_errors', 'On'); and error_reporting(E_ALL);
  • Turn off error reporting on live websites
  • Use echo to make sure you’re getting the right values for variables
  • print_r($array); to print readable array
  • gettype($variable); to get variable type
  • var_dump($variable); to get type and value
  • get_defined_vars(); array of defined variables
  • debug_backtrace(); show backtrace

Encoding

  • For GET requests to pass a reserved character, you must encode them with urlencode($string) – letters, numbers, underscores, and dashes will be unchanged, but reserved characters become % + 2-digit hexidecimal, and spaces become +
  • For rawurlencode, letters, numbers, and dashes are unchanged, reserved characters become % + 2-digit hexidecimal, and spaces become %20
  • Use rawurlencode for the path, before the “?” section, and uses urlencode on the query string
  • <, >, &, and ” are reserved characters in HTML
  • HTML can be encoded with htmlspecialchars() and htmlentities()

Printing

To print items to the screen, use echo

Variables

  • Start with a $ followed by a letter or underscore
  • Can contain letters, numbers, underscores, or dashes and can’t contain spaces
  • Case-sensitive

A Brief Overview of ES6

ECMAScript 6, or ES6, is a newer version of JavaScript. It has several unique capabilities that weren’t possible in previous versions of JavaScript, for example:

  • Variables can be set with the terms let and const
  • The let keyword is used for block scoping so it doesn’t affect global values
  • The const keyword is used to protect the value of certain variables – you use this keyword for values that shouldn’t be reassigned
  • It allows you to use template strings to tap into the functionality of template languages to format your JavaScript code with variables like so: `${yourVariableHere}`
  • The spread operator can turn elements of an array into arguments of a function call or into elements of an array literal
  • Allows us to make classes in JavaScript (can create one super class that other classes inherit)
  • Can pass default values in functions for when you don’t explicitly pass anything for them

In order for browsers to understand ES6, you need to transpile the code. Babel, Traceur, and Closure are used for transpiling code, although Babel is known for supporting the most ES6 features.

For larger scale projects, you can use build tools like Webpack with ES6 – this allows us to load our dependencies. Npm creates a package.json file that runs dependencies.

 

Yarn: the JavaScript Package Manager

If you already use npm, you’re probably wondering what’s the point of Yarn?

Yarn is a somewhat new JavaScript package manager created by the engineers at Facebook.

  • It’s a faster and more secure dependency manager
  • It uses an offline cache – so after you’ve installed a package using Yarn, it will be available on your machine for offline access.

Quite honestly, what really reeled me in with Yarn was the speed at which it can install packages. It’s amazing how shaving off a few seconds from installing packages can really speed up your overall workflow.

Get Yarn

npm install –g yarn

Or use brew to add it. Once installed, you use the following format to add any dependency:

yarn add <name of package>

A Brief Overview of React.js

React is a user interface library that was developed at Facebook. React is written in different components and follows the principles of immutable data. It’s often used in enterprise applications, and it makes creating single page applications easier since they have a higher speed thanks to the virtual DOM. This means it writes to the browser DOM only when it is needed, instead of re-rendering an entire view when a change is made.

Virtual DOM

React creates an in-memory DOM where it only renders different parts of the DOM when a change occurs.

JSX

React utilizes JSX, which is a JavaScript extension syntax that allows you to quote HTML.

Babel

Babel is a transpiler that transpiles JavaScript code. It works for JSX as well as ES6 and beyond. Babel converts React’s JSX and ES6 to something the browser can use.

Components

React applications consist of a collection of components. Components are small user interface elements that display data as it changes over time. Used together, these components create entire user interfaces.

Component Lifecycle

Component lifecycles allow you to add libraries and load data at specific times. They also help improve the speed of an application, with lifecycle methods that you can override to run code a specific times in the process.

Mounting methods are called when an instance of a component is being created:

  • getInitialState()
  • componentWillMount()
  • componentDidMount()

Updating methods occur when a change happens to props or state:

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

Unmounting methods are called when a component is being removed:

  • componentWillUnmount()

 

A Brief Overview of Node.js and Express.js

If you’ve worked with JavaScript frameworks and libraries, chances are that you’ve heard of Node.js and Express.js. So for those who are unfamiliar to these terms – what exactly are they?

Node.js

Node.js is an open-source JavaScript runtime environment, that uses Google’s V8 JavaScript engine, where you can build server applications. Node.js is not a framework, although it has many modules that are written in JavaScript. It has event-driven architecture that is capable of asynchronous I/O, otherwise none as a form of input/output processing that allows other processing to continue before the transfer of data has finished.

Express.js

Express.js is a web application framework for Node.js, that’s used for building APIs. It is also known for being a backend component of the MEAN stack.

I’ve worked with Node.js and Express.js to create APIs, so I feel like I can never think about one of them without having the other one come to mind.

Overview of Design Patterns

Design patterns are guidelines for solving common problems in software development. By learning design patterns, you can quickly and easily communicate designs to other software developers.

A few common design patterns include the following:

Strategy Pattern

The Strategy Pattern defines a family of algorithms, encapsulates each one, and makes them interchangeable. Instead of inheriting behavior, it is created.

Observer Pattern

The Observer Pattern is the most commonly used design pattern in the real world. It defines a one-to-many dependency between objects so that when one object changes its state, all of its dependents are notified and updated automatically.

Decorator Pattern

The Decorator Pattern attaches additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality.

Singleton Pattern

The Singleton Pattern ensures that a class has only one instance, and provides a global access point to it.

State Pattern

The State Pattern uses a set of state constants, and uses a variable to hold the current state. The pattern encapsulates state into separate classes.

Collection Pattern

The Collection Pattern provides a way to access the elements of an aggregate object without exposing its underlying representation.