A Brief Overview of Ruby

Iterators

  • Iterators make it easier to write code

5.times do
puts “hello”
end

  • Integers/floats: times, unto, down to, step
  • Range: each, step
  • String: each, each_line, each_byte
  • Array: each, each_index, each_with_index
  • Hash: each, each_key, each_value, each_pair

Methods

  • Values are passed in when they are called, and they are sometimes abbreviated as args
  • Operators are also methods in ruby
  • Syntactic sugar refers to simplifying the code
  • Syntactic vinegar – not so tasty code
  • Methods are all lowercase with underscores

Classes

  • Classes use camel case (they always start with a capital letter): SomeName
  • Classes group the code into discreet, well-categorized areas
  • Can define methods inside a class

class Animal
def make_noise
“Moo!”
end
end

animal.make_noise
returns “Moo!”

  • make_noise object is created from the class and then we can tell it to do things
  • Objects let us organize code into well-categorized areas
  • Allow complex behaviors using simple statements
  • Instance: an object created from a class

animal = Animal.new
puts animal.make_noice

  • Animal.new is an instance which is an object
  • .new is a class method

Instance Variables

  • Instance variables start with an @ symbol – @variable
  • Instance variables are used within the instance of a class
  • Allow us to keep track of attributes
  • Never have access to instance variables from outside the instant
  • We can access methods within instance, so need to use methods to get instance variable
  • Setter methods – sets a variable equal to value
  • Getter methods – getting that value back

Attribute Methods

  • Methods that we put into classes – takes symbols and turns them into methods
    • attr_reader
    • attr_writer
    • attr_accessor (creates a reader and a writer method)

Additional Terms

  • Instantiated = creating a new instance
  • Class Method – a method that can be called on a class even without an instance of the class
  • Class attributes – store values that apply to the class generally stored in a class variable @@variable
  • Instance variables are only inside the instance
  • Inheritance – inherits the methods and attributes of another class
  • Can only inherit from one super class
  • Modules are wrappers around classes

DevOps Fundamentals

DevOps is the practice of operations development engineers participating together in the entire service lifecycle, from design through the development process to production support

CAMS model

  • Culture – having dev and ops teams communicate more with each other
  • Automation – people over process over tools
  • Measurement – ability to measure – what’s happening, and if your changes are making any improvements (Mean time to recover MTTR appears, cycle time, costs, revenue, employee satisfaction)
  • Sharing

Concept to Cash

  • Amplifying feedback loops to help you with multi processes
  • Work culture that’s open to learning new things and experimentation (instead of falling into analysis paralysis)

DevOps Methodologies

  • People over process over tools
  • Continuous delivery (practice of coding, testing, and releasing features in small batches)
  • Lean Management (work in small batches, work in progress limits, feedback loops, visualization)
  • Change control (eliminate fragile artifacts, create a repeatable build process, manage dependencies, create an environment of continuous improvement)
  • Infrastructure as Code (systems treated like code, checked into source control, reviewed, built, and tested, and managed programmatically)

Practices for Success in DevOps

 

  • Kaizen is a popular dev ops cultural practice – means change for the better and we might roughly translate it to continuous improvement
  • Going to the actual place where the value’s created or where the problem is
  • Management by walking around
  • Define what you intend to do and what you expect the results to be, then you execute on that. Then you analyze the result and make any alterations needed
  • If newest plan is better than previous base line, it’s now the new base line
  • Plan, do, check, act gives people critical thinking skills
  • Five Whys, when there’s a problem, you ask the question why did it happen? And when you get an answer you ask why did that happen? Yu can repeat this as much as necessary, but five times is generally enough to exhaust the chain down to the root cause
  • Focus on underlying causes not symptoms (don’t accept answers like not enough time, do not accept human error as a root cause)

Agile Software Development

  • Process is iterative
  • Stresses collaboration
  • Promotes sustainable development
  • Waterfall goes through stage by stage

Seven Principles of Lean Software

  • Eliminate waste
  • Amplify learning
  • Decide as late as possible
  • Decide as fast as possible
  • Empower the team
  • Build in integrity
  • See the whole

Muda: work that absorbs resources but adds no value

Muri: unreasonable work imposed on workers and machines

Mura: work coming in unevenly instead of a constant or regular flow

Seven Wastes of Software

  • Partially done work
  • Extra feature
  • Relearning
  • Handoffs
  • Delays
  • Task switching
  • Defects

Build – Measure – Learn

  • Build the minimum viable product
  • Measure the outcome and internal metrics
  • Learn about your problem and your solution
  • Repeat. Go deep where it’s needed

Continuous Delivery

  • Code is always in a working state
  • Continuous Integration is the practice of building and unit testing the entire application frequently
  • Continuous Delivery is the additional practice of deploying every change to a production like environment and performing automated integration and acceptance testing
  • Continuous Deployment extends this to where every change goes through full enough automated testing. It’s deployed automatically to production.
  • Time to market goes down with continuous delivery
  • Quality increase, not decreases – gives room for experimentation
  • Limits your work in progress
  • Shortens lead times for changes
  • Improves mean time to recover
  • Builds should take less than five minutes
  • Make smaller commits
  • Don’t leave the build broken
  • Use a trunk-based development flow
  • Don’t allow flaky tests
  • Build should return a status, a log, and an artifact

Continuous Delivery Pipeline

  • Only build artifacts once
  • Artifacts should be immutable – doesn’t change during different stages
  • Deployment should go to a copy of production
  • Stop deploys if a previous step fails
  • Deployments should idempotent

Continuous Delivery: need to focus more on testing

  • Unit testing
  • Code hygiene (linting, formatting)
  • Integration testing
  • Security testing
  • TDD/BDD/ATDD (test-driven development – state desired outcome as a test, write code to pass the test, repeat; behavior-driven development – work with stakeholders, describe business functionality, tests are based on natural language descriptions; acceptance-test-driven development – end user perspective, use case automated testing, testing is continuous during development)
  • Infrastructure testing (starting up hosts)
  • Performance testing (load tests, etc good for nightly runs)

Container

  • Bundle app and dependencies in container and use that as the deployable artifact

Serverless

  • Functions as a service
  • Firebase
  • AWS lambda

RESTful Web API Design

An API is a set of routines or functions. It’s an interface used for performing tasks, retrieving data, and manipulating data. APIs use HTTP methods, which are used on a resource to GET, POST (submit form data), PUT (for updating files), PATCH (a partial update), and DELETE.

Adding an API

  • Bolt-on strategy – when you already have an application and are adding an API to it
  • Greenfield strategy – no underlining application. There’s complete freedom and flexibility to do what you want. Generally the “API first” or “mobile first” mentality.
  • Facade strategy – wraps existing logic with replace as you go. This is ideal for legacy systems so the application is always functional.

Designing the Relationship

  • Independent – the resources may exist regardless of the other existing but they may reference each other
  • Dependent – one resource cannot exist without the parent
  • Associative – they are independent of each other but the relationship contains additional properties to describe it

Planning the Relationships

  • Ask yourself the following questions:
    • Can both resources exist without the other?
    • Does one resource only exist when the other exists?
    • Does the relationship between resources require more information than just the links between them?
  • It should be relatively easy to map out the flow, action, etc for each resource. If not, you need to revise your design.
  • Consider using notecards to write down each resource action

REST

  • REST stands for Representational State Transfer
  • It’s an architecture for designing network-based applications
  • It is not a protocol, framework, or standard

Benefits of Stateless Servers

  • Visibility – monitoring systems and developers do not need to look beyond the request to trace a bug
  • Reliability – easy to recover from system failures

Drawbacks of Stateless Servers

  • Network Bandwidth – client sends state for every request
  • Complexity – all clients must handle their states

Benefits of Caching

  • Performance – for stateless and caching, many requests do not need to go all the way to the server
  • Scalability – server gets fewer requests so it can handle more clients

Drawbacks of Caching

  • Data reliability – clients might use stale data

Facets of a Uniform Interface

  • Self descriptive messages
  • Server includes metadata, such as Content-Type, to help clients process the responses
  • Hypermedia as the engine of application state (HATEOAS)
  • Client only assumes a fixed entry-point to the API, the server tells clients all other available actions through hyperlinksBenefits of a Layered System
  • Encapsulation (simplify an interface to a legacy server)
  • Scalability (layers enable load balancing)
  • Security (add access control rules to data crossing a boundary, just like a firewall)

Drawbacks of a Layered System

  • Latency – adding layers increases latency

A Brief Overview of GraphQL

GraphQL is a query language designed to make data fetching easier. It allows you to get data from the server to the client. It is language agnostic and became open source in 2015.

Overview

  • Input types include: integer, float, string, boolean, null, enum, list, object
  • It has a built-in documentation for the schema
  • Can create operation names to help identify different queries
  • Creates changes through mutations
  • API determines what mutations are allowed

Benefits

  • Avoids multiple REST calls
  • Is backward compatible and version-free
  • Can wrap around existing APIs
  • Queries can have comments

 

A Brief Overview of AWS

Amazon Web Services provides on-demand cloud computing platforms for individuals and companies. Here is a basic overview of some of the possible services and terms involved with AWS:

Elastic IPs

  • Work well for emergencies
  • Instead of a different IP for each different server, there’s an IP for the account that can be rerouted for servers

Elastic Load Balancing

  • Component for balancing network traffic
  • Scales request handling to meet traffic demands
  • Supports HTTP, HTTPS, and TCP traffic
  • Supports health checks
  • Automatically scales based on demands placed on it
  • Single CNAME for DNS configuration

CloudWatch

  • Allows to monitor resources automatically
  • Watches resources, SPU, Disk i/o
  • Network traffic, alarms, custom metrics

Optional Detailed Monitoring

  • Higher frequency intervals of data capturing
  • More pre-defined metrics
  • Monitor aggregate metrics across similar resources

Elastic Block Storage

  • Volumes up to 1TB
  • Attach multiple volumes to a single instance
  • Specify I/O performance
  • Format with a file system, use like any other block device
  • EBS snapshots
  • Lazy loading of data to new volumes

Relational Database Service

  • Specify performance size
  • Can monitor the health with CloudWatch
  • Updates applied for you
  • Automatic backups
  • High availability/scalability/fault tolerance

Bootstrapping

  • The process to get an application up and running on an EC2 instance, or other AWS services
  • Bootstrapping tools – running custom scripts to configure settings, start services, apply updates
  • AWS give access to the instance metadata
  • Bootstrapping tools: Cloud-Init (Linux), EC2Config (Windows)

PHP CMS

The other day I worked on putting together a custom PHP CMS, where admin users are able to create, delete, and edit other admin users. Admin users are also able to create content and rearrange the way the content appears in the main nav.

One challenge of this project was to work on creating a secondary menu that presented additional information to the admin user. If you’re curious about the code, you can find the GitHub repo here.

Here’s a screenshot of the homepage for the CMS:

PHP CMS

And here’s what the interface looks like for managing admin users:

PHP CMS

This project was a bit of practice for me to get more familiar with PHP, since it’s important to know PHP when working with WordPress or Drupal websites.

Getting Started with PHP

The other day I worked on putting together a PHP CMS from scratch, and I learned a little bit about how to set up my environment for running the application locally. So for anyone who is looking for a bit of a reference, below is more information outlining the steps for setting up the environment.

Mac Installation

  • The web server (Apache) involved with PHP applications is built-in with a Mac
  • httpd -v (on command line to see what version of apache is installed on machine)
  • ps aux | grep httpd (to find out if apache is running on machine)
  • Apache commands:
    • sudo apachectl start
    • sudo apachectl stop
    • sudo apachectl restart
  • Create Sites folder within same area as Desktop folder
  • navigate cd /etc/apache2/users
  • sudo atom username.conf
  • sudo chmod 644 username.conf
  • sudo apachectl restart

Enable PHP

  • php -v (returns version of php)
  • cd /etc/apache2
  • sudo atom httpd.conf (opens config file, search for php, remove # before LoadModule for php to enable php5)
  • phpinfo() helpful method that tells you all the configurations for the version of php you’re using
  • Database (MySQL 5.x)
  • download from https://dev.mysql.com/downloads/
  • which mysql (command to find location of mysql)

Additional Info

  • echo is used to print text
  • For comments, // and # are used for single line

How PHP Communicates with the Browser

The browser sends a request to server (Apache). Apache finds the file, processes it if it requires processing (sometimes it might need to go back and forth between the database), then it assembles the html and ships it back to the browser.

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

JSONP

  • Stands for JSON with padding
  • Used for cross domain requests
  • Request URL incorporates the name of a callback function according to syntax defined by the service you’re using

Response Formats

  • JSON object
  • JSON array
  • JSONP (function)
  • Browsers enforce same-origin policy

Cross-Site Script Injection (XSSI)

  • Protecting against XSSI – can strip out malformed code
  • If downloaded directly, it isn’t parsed and creates an error

Alternatives to JSON

XML

  • Extensible Markup Language
  • Was widely used before JSON became popular
  • We can convert JSON to XML with different services

YAML

  • Was created to be human readable
  • Another language used to interchange data on the web
  • Uses white space, including indents and blank lines, which increases the size of YAML but makes it easier for humans to read
  • Uses key value pairs
  • Strings don’t need to be quoted
  • Supports explicit data typing
  • Supports single-line comments that are denoted by # (JSON doesn’t allow commenting)
  • JSON is good for basic use cases and has parsing built into JavaScript, while YAML is not directly usable in JavaScript

New Design for Green Apple Website

Today we relaunched the greenapple.org website. The site was in dire need of a facelift – it wasn’t responsive, it had an odd user experience, and the CMS made it difficult for editors to make updates.

Here is what the homepage previously looked like:

Green Apple old screenshot

And here’s what it looked like after I overhauled the design:

Green Apple

Our content specialists simplified the website’s content, and I worked on giving the overall look and feel a more modern look. I selected images for the new site, created icons, and coded it so that editors can easily swap out banner images. The website also uses SASS to make it easier for me to make global changes to colors, padding, and so on and so forth.

It’s always fun getting to rework a website, and compare and contrast the changes made in any given update.