Notepad

Notes

CMS Road Map

  • Finish CMS site set up with github sync
    • Continue testing Student UX (starting with enrollment)
    • Test non-NMA/non-student enrollment
  • Finish converting old divi lessons + pages to simple markdown and/or gutenberg
  • Add More Courses
  • Add More Lessons
  • Add More Assignments and Exercises
  • Convert Initial Lesson Pages to Posts
  • Add More Non-Course Source Material
    • Create more Short, Targeted Guided Lessons (Mini-Courses)
  • Organize notes
    • Add feature that enables users to post/save/edit their own notes
  • Add a Dev Blog (for sharing of work-in-progress, daily discoveries)

Potential Lesson Content and Ideas

Intro to Typography on the Web

  • Setting body copy type (font family, size, & leading)
  • Setting headers (typographic scale)
  • Using web fonts (google fonts, @fontface, avoiding pseudo bold & italic)
  • Responsive typography
  • Type Specimens
  • How to deal with widows/orphans (non-breaking spaces)
  • Do’s & Do not’s (no line breaks, justified paragraphs)

Random Web/Client-Server/Backend Notes for A Future Lesson:

HTTP – Hypertext Transfer Protocol is an application protocol for distributed, collaborative, and hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.

HTTP methods: GET, POST, PUT, DELETE

GET – The GET method requests a representation of the specified resource. Requests using GET should only retrieve data and should have no other effect. (This is also true of some other HTTP methods.)[1] The W3C has published guidance principles on this distinction, saying, “Web application design should be informed by the above principles, but also by the relevant limitations.”[15] See safe methods below.
POST – The POST method requests that the server accept the entity enclosed in the request as a new subordinate of the web resource identified by the URI. The data POSTed might be, for example, an annotation for existing resources; a message for a bulletin board, newsgroup, mailing list, or comment thread; a block of data that is the result of submitting a web form to a data-handling process; or an item to add to a database.
PUT – The PUT method requests that the enclosed entity be stored under the supplied URI. If the URI refers to an already existing resource, it is modified; if the URI does not point to an existing resource, then the server can create the resource with that URI.[17]
DELETE – The DELETE method deletes the specified resource.

CRUD: create, read, update, and delete – four basic data storage functions

REST
Representational state transfer web services are a way of providing interoperability between computer systems on the Internet. REST-compliant Web services allow requesting systems to access and manipulate textual representations of Web resources using a uniform and predefined set of stateless operations.

“Web resources” were first defined on the World Wide Web as documents or files identified by their URLs, but today they have a much more generic and abstract definition encompassing every thing or entity that can be identified, named, addressed or handled, in any way whatsoever, on the Web. In a RESTful Web service, requests made to a resource’s URI will elicit a response that may be in XML, HTML, JSON or some other defined format. The response may confirm that some alteration has been made to the stored resource, and it may provide hypertext links to other related resources or collections of resources. Using HTTP, as is most common, the kind of operations available include those predefined by the HTTP methods GET, POST, PUT, DELETE and so on.

RESTful (representational state transfer) API
Web service APIs that adhere to the REST architectural constraints are called RESTful APIs

An application layer is an abstraction layer that specifies the shared protocols and interface methods used by hosts in a communications network. The application layer abstraction is used in both of the standard models of computer networking: the Internet Protocol Suite (TCP/IP) and the Open Systems Interconnection model (OSI model).

API (application programming interface) – application programming interface (API) is a set of subroutine definitions, protocols, and tools for building application software. In general terms, it is a set of clearly defined methods of communication between various software components. A good API makes it easier to develop a computer program by providing all the building blocks, which are then put together by the programmer. An API may be for a web-based system, operating system, database system, computer hardware or software library. An API specification can take many forms, but often includes specifications for routines, data structures, object classes, variables or remote calls. POSIX, Microsoft Windows API, the C++ Standard Template Library and Java APIs are examples of different forms of APIs. Documentation for the API is usually provided to facilitate usage.

WEB API – A web API is an application programming interface (API) for either a web server or a web browser. It is a web development concept, usually limited to a web application’s client-side (including any web frameworks being used), and thus usually does not include web server or browser implementation details

RESTful API DLs (description languages) are formal languages designed to provide a structured description of a RESTful web API that is useful both to a human and for automated machine processing.

MVC: Model–view–controller is a software architectural pattern for implementing user interfaces. It divides an application into three interconnected parts to separate internal representations of information from the ways information is presented to, and accepted from, the user. The MVC design pattern “decouples” these major components allowing for efficient code reuse and parallel development.

MVP: Model–view–presenter (MVP)

MVVM: Model–view–viewmodel (MVVM) is a software architectural pattern. MVVM facilitates a separation of development of the graphical user interface – be it via a markup language or GUI code – from development of the business logic or back-end logic (the data model). The view model of MVVM is a value converter,[1] meaning the view model is responsible for exposing (converting) the data objects from the model in such a way that objects are easily managed and presented. In this respect, the view model is more model than view, and handles most if not all of the view’s display logic.[1]

Web Application Frameworks
– designed to support the development of web applications “web apps” including web services, web resources, and web APIs.

web app – web application is a client–server computer program in which the client (including the user interface and client-side logic) runs in a web browser.

Web Service – a service offered by an electronic device to another electronic device, communicating with each other via the World Wide Web. In a web service, the Web technology such as HTTP—originally designed for human-to-machine communication—is utilized for machine-to-machine communication, more specifically for transferring machine-readable file formats such as XML and JSON.

SPA: A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application. In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load,[1] or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does control transfer to another page, although the location hash or the HTML5 History API can be used to provide the perception and navigability of separate logical pages in the application.[2] Interaction with the single page application often involves dynamic communication with the web server behind the scenes.

Server-side vs. Client-side (Backend vs. Front-end)

Server-side scripting is a technique used in web development which involves employing scripts on a web server which produce a response customized for each user’s (client’s) request to the website. The alternative is for the web server itself to deliver a static web page. Scripts can be written in any of a number of server-side scripting languages, such as PHP, Python, Ruby, Perl, ASP, Java, Javascript, ASP.NET

Server-side scripting languages: PHP, Python, Ruby, Perl, ASP, Java, Javascript, ASP.NET

Client-side scripting is where embedded scripts, such as JavaScript, are run client-side in a web browser.

Client-side JS Frameworks – a “framework” differs from a “library” – it defines the entire application design. Some examples are: Backbone.js, AngularJS, EmberJS, ReactJS and Vue.js.

A server-side dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts. In server-side scripting, parameters determine how the assembly of every new web page proceeds, including the setting up of more client-side processing.

A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript (as a scripting language) can help to determine the way the HTML is received by the browser and parsed into the Document Object Model, or DOM, that represents the loaded web page. This kind of client-side technique can then dynamically update or change the DOM in the same way.

A dynamic web page is then reloaded by the user or by a computer program to change some variable content. The updating information could come from the server, or from changes made to that page’s DOM. This may or may not truncate the browsing history or create a saved version to go back to, but a dynamic web page update using Ajax technologies will neither create a page to go back to, nor truncate the web browsing history forward of the displayed page. Using Ajax technologies the end user gets one dynamic page managed as a single page in the web browser while the actual web content rendered on that page can vary. The Ajax engine sits only on the browser requesting parts of its DOM, the DOM, for its client, from an application server.

DOM – Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document. The objects can be manipulated programmatically and any visible changes occurring as a result may then be reflected in the display of the document.[

Ajax “Asynchronous JavaScript and XML”, is a web development technique for creating web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase a web page’s interactivity, speed, and usability.

JSON – JavaScript Object Notation is an open-standard file format that uses human-readable text to transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value). It is a very common data format used for asynchronous browser–server communication, including as a replacement for XML in some AJAX-style systems. JSON is a language-independent data format derived from JavaScript.

Server-side/Backend Web Technologies

PHP is a server-side scripting language designed primarily for web development

Ruby is a dynamic, reflective, object-oriented, general-purpose programming language.

Ruby on Rails, or Rails, is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates the use of web standards such as JSON or XML for data transfer, and HTML, CSS and JavaScript for display and user interfacing.

Ruby on Rails is one of the most famous and reliable open source MVC framework. Ruby on Rails was designed to make the development of web applications simple and faster. Moreover, it allows developers write less significantly codes than any other frameworks.

JS Frameworks

React (sometimes styled React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook, Instagram and a community of individual developers and corporations. React allows developers to create large web-applications that use data and can change over time without reloading the page. It aims primarily to provide speed, simplicity, and scalability. React processes only user interfaces in applications. This corresponds to View in the Model-View-Controller (MVC) pattern, and can be used in combination with other JavaScript libraries or frameworks in MVC, such as AngularJS. Facebook developed React.js – an open source Single Page Application (SPA) framework for web apps, and React Native for mobile apps. React.js allows web developers the ability to build large scale JavaScript applications for the browser. It composes common application requirements (such as rendering views) into a single framework that can be leveraged for productivity.

  • Create React App (https://github.com/facebook/create-react-app)
  • React Native
  • Preact

AngularJS (commonly referred to as “Angular.js” or “AngularJS 1.X”) is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Angular – Google developed Angular, an open-source front-end web application, as an evolution/extension of Angular.JS which was specifically for web apps.

Meteor, or MeteorJS, is a free and open-source isomorphic JavaScript web framework[3] written using Node.js. Meteor is a full-stack framework that uses javascript both for frontend (as others) and for backend designed for developing realtime applications for web and mobile. You just have to build a normal web application with Meteor and it is automatically real time. Works on Node.

Backbone.js is a JavaScript library with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm. Backbone is known for being lightweight, as its only hard dependency is on one JavaScript library,[2] Underscore.js, plus jQuery for use of the full library.[3] It is designed for developing single-page web applications,[4] and for keeping various parts of web applications (e.g. multiple clients and the server) synchronized.[5] Backbone was created by Jeremy Ashkenas,[6] who is also known for CoffeeScript and Underscore.js.When handling the DOM Backbone.js adopts an imperative programming style, in contrast with a declarative programming style (common in AngularJS using data-attributes).[8]

EmberJS

Node.JS

Polymer

Laravel – Laravel is a free open-source PHP web development framework. Laravel is regarded as one of the most popular PHP frameworks.

Django – Django is an open source full stacked Python development framework and has support for Python version 3.4. Moreover, it generates the admin panel for configuring the websites made with Python.

Express.JS – xpress.js is an open-source framework for Node.js to build classical web applications with server side and API. Roughly speaking it’s a standard server framework for projects that use javascript on the backend. If you are new in web development and only know some javascript (and basic tools like HTML, CSS) Express could be the easiest framework to start with.

Mojolicious (Perl) Mojolicious is a next generation web framework for the Perl programming language.

CakePHP is an open-source web development framework written in PHP and has been immensely popular in the market since its inception. It is built on the concept of model-controller-view and association data mapping. By using CakePHP, professionals can easily develop web applications in a structured and rapid manner.

Mobile Technologies

HTML-based Mobile App Frameworks

An HTML-based “hybrid” mobile application is a combination of HTML, CSS, & JS designed to work with a native application wrapper (e.g. Cordova PhoneGap). A native application wrapper framework, PhoneGap, offers native code to use native mobile features via a JavaScript API. For example, JS can be used to perform native functions, like taking a photo with the device’s camera, using the device’s GPS/geolocation, accelerometer, etc.

Apache Cordova
Simply put, Apache Cordova is a development framework that is command line driven, it includes build tools that will take an input of (HTML, CSS and Javascript) and will produce something that runs on a mobile device. For example; a developer will write a command in Windows or OSX which tells a build tool to package our app:

Phonegap (Built on Cordova)
PhoneGap is a web platform that exposes native mobile device apis and data to JavaScript. PhoneGap is a distribution of Apache Cordova. PhoneGap allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms’ native development language. Phonegap is a development framework created by Adobe that is built on top of Apache Cordova. A good analogy here is that it’s like an operating system that is running on a host machine (Cordova). The reason it exists is because Adobe originally made it (although they handed over the licencing to Apache). The main benefit is it’s integration with the Adobe universe. For example Adobe offers build tools which run in the cloud.

Ionic (Built on Cordova)
Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps. Built with Sass and optimized for AngularJS Ionic is another framework which is built directly on top of Apache Cordova. Ionics forte is that it integrates with the well known Single Page Application framework called Angular. Ionic is open source. This means that the focus is on the product itself (as opposed to the services offered around it like with Phonegap). Recently Ionic have upgraded their offering to include a native version too!

Framework7
Free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS native look and feel. All you need to make it work is a simple HTML layout and attached framework’s CSS and JS files! Framework7 doesn’t force you to write some custom tags that will be converted by JavaScript to something else.

Others and related technologies:

  • React Native – A framework for building native apps with React
  • Apache Cordova – Platform for building native mobile applications using HTML, CSS and JavaScript
  • NativeScript – Build truly native apps with JavaScript
  • JQueryMobile
Web technology stacks
  • MEAN (MongoDB, Express.JS, Angular, and Node.JS)
  • LAMP (Linux, Apache, MySQL, and PHP).

Free In-Browser Creative Design/Dev Tools:

  • Pixlr (raster image editor, similar to Photoshop)
  • Figma (UI design tool, similar to Sketch and Adobe XD)
  • ______ (video editor, similar to Adobe Premiere)
  • ______ (motion/compositing tool, similar to Adobe After Effects)
  • ______ (vector editing tool, similar to Adobe Illustrator) – Gravit Designer?
  • CodeSandbox.io (code editor, similar to VS Code)

More Random Resources to add:

Bezier Curve Tool web site/app: https://cubic-bezier.com/

Placeholder Content Related

Image Placeholders:

placeholder.com
http://via.placeholder.com/350×150

Image Formats
http://via.placeholder.com/300.png/09f/fff
http://via.placeholder.com/300/09f.png/fff
http://via.placeholder.com/300/09f/fff.png

text (use + for soaces)
http://via.placeholder.com/300?text=Placeholder.com+rocks!

Colors always follow the dimensions
http://via.placeholder.com/250/ffffff/000000
The first color is always the background color and the second color is the text color.

Examples:

2×1
http://via.placeholder.com/1500×750/dddddd/bbbbbb?text=PLACEHOLDER+IMAGE
http://via.placeholder.com/1500×750/dddddd/bbbbbb?text=2+1

fpoimg.com
http://fpoimg.com/1500×750?text=Placeholder Image&bg_color=dddddd&text_color=bbbbbb

Generator Tool:
http://fpoimg.com/generator?

Lorem Picsum
Photography Placeholder Images:
https://picsum.photos/ (uses free images from unsplash)

Example:
4×1
https://picsum.photos/g/1500/375/?random

Mockup Generators:

http://techsini.com/multi-mockup/index.php

Example: http://techsini.com/multi-mockup/?url=http://thesillyme.com/bricked/index.html

Grid Placeholder Images:

Griddle.it

http://griddle.it/[total width]-[number of columns]-[gutter size]

As a CSS bg:

body {
 background: url(http://griddle.it/960-12-30) repeat-y center top;
}

Examples:

1200 12 column
http://griddle.it/1200-12-36
http://griddle.it/1200-12-36?color=fcf&num=true&text=fff&horizontal=999

Site Base Custom 1200px (Desktop) Grid w/ 8% (96px) Gutters

1 Columns:
http://griddle.it/1200-1?color=fcf&num=true&text=fff&horizontal=999

2 Columns:
http://griddle.it/1200-2-96?color=fcf&num=true&text=fff&horizontal=999

3 Columns:
http://griddle.it/1200-3-96?color=fcf&num=true&text=fff&horizontal=999

4 Columns:
http://griddle.it/1200-4-96?color=fcf&num=true&text=fff&horizontal=999

5 Columns:
http://griddle.it/1200-5-96?color=fcf&num=true&text=fff&horizontal=999

Icons

Material Icons from Google (available as webfont via google fonts)
https://material.io/icons/
http://google.github.io/material-design-icons/

Free Illustrations

Attribution free illustrations: https://undraw.co/illustrations

SVG

CG SVG Test: http://nma.kcc.hawaii.edu/gargiulo/tests/svg/svg-tests.html
*Note: server not rendering svg: MIMI-type problem?

Design Patterns

WordPress REST JSON API

ACF to REST API
https://github.com/airesvsg/acf-to-rest-api

To do list live demo: http://airesgoncalves.com.br/to-do-list/

Even More Random Resources to add to CMS:

Educational Resources:

UX/UI Pattern Resources:

http://patterntap.com/patterntap

UI Inspiration Sites:

Landing pg inspiration:

People:

  • Graphic Deisgn
    • Jan Tschichold
    • Armin Hofman
    • Josef Muller-Brockmann
    • Max Bill
    • Emil Ruder
    • Karl Gerstner
    • Chip Kidd
    • John Maeda
    • El Lissitzky
    • Neville Brody
    • Paul Rand
    • Saul Bass
    • David Carson
    • Milton Glaser
    • Massimo Vignelli
    • Paula Scher
    • Ellen Lupton

Layout Visuals:

Image source: from the Neue Grafik design journal, via Lars Muller Publishers

Random Student Examples to add:

  • Mitcho Valenzuela
    • Makkuro Makkuro Website (see local files)
    • Louis Latour Rebrand (see local files)
  • Reina Robles
    • Island Triathlon (see local files)
  • Hirona Ogawa
    • Cafe Maharani Website
  • Mai Oseto
    • http://maioseto.com
  • Tiffany Higa
    • 86 Germicides (see local files)

Random CLI/Terminal Notes:

  • mkdir (make directory)cd (change directory)rm -R yourdirectoryname (deletes entire folder)
  • From a codeanywhere youtube lesson:
    • ls
    • git status (see what has changed)
    • git add (either indiv. file or all -A)
  • Random Git Notes:
  • List of common commands
  • git -v
    • if not installed, try installing github desktop client first
    • mac users might need to install xcode to get the terminal working
  • git config –global user.name “John Doe”
    • To test: git config –global user.name
  • git config –global user.email johndoe@example.com
    • To test: git config –global user.email
  • git init
  • git add
    • git add -A // To track all files
  • git commit
    • git commit -m “message” // To commit changes
  • git push
    • git push origin master // Push your local changes to github
  • git status (see what has changed)
  • branching:
    • git branch [yourbranchname] (creates a new brach)
    • git checkout [yourbranchname] (checks out the new branch so you can edit it)
    • git merge [yourbranchname] (merges the new branch with the master)
    • git rebase?
  • working remotely:
    • git clone [yourrepositoryname] (makes a “local” copy of the entire repository)
    • git fetch (updates your local repo to match the remote repo)
    • git pull (same as git fetch + git merge) – essentially gets the latest from the remote master and merges it with the local master. This is mainly for code collaboration when working in teams.
    • git push (similar to a “publish” to move your local work to the remote repo
  • Git Tips:
  • To create a new branch and check it out:
    • git checkout -b [yourbranchname]
  • Random Git Stuff:
  • “Origin” or “o/master” – refers to the remote master (compared to the local cloned version).
  • To pull with a rebase:
    • git pull —rebase
  • New Repo From Local git init?: git remote add origin https://github.com/kccnma/sitebase.git
  • Musescore Git Workflow
  • from: https://musescore.org/en/developers-handbook/git-workflow
  • Fork on GitHub.com in Browser (click Fork button)
  • Clone to computer, use SSH URL
    • $ git clone git@github.com:you/MuseScore.git)
    • Don’t forget to cd into your repo: ($ cd MuseScore/)
    • Set up remote upstream ($ git remote add upstream git://github.com/musescore/MuseScore.git)
    • Create a branch for new issue ($ git checkout -b 404-new-feature)
    • Develop on issue branch. [Time passes, the main MuseScore repository accumulates new commits]
    • Commit changes to your local issue branch. ($ git add . ; git commit -m ‘commit message’)
    • Fetch upstream ($ git fetch upstream)
    • Update local master ($ git checkout master; git merge upstream/master)
    • Rebase issue branch ($ git checkout 404-new-feature; git rebase master)
    • Repeat steps 6-11 until dev is completePush branch to GitHub ($ git push origin 404-new-feature)
    • Start your browser, go to your Github repo, switch to “404-new-feature” branch and press the [Pull Request] button
  • Decent in-browser learning guides/challenges: https://try.github.io/levels/1/challenges/1
  • My Initial Daily Git Workflow
  1. Open Terminal and cd to working folder
    • cd <directory> (to traverse downwards) or cd .. (to go up levels)
    • ls -l
  2. Initial/first-time setup or returning to last place worked?
    • A. If first time doing this (new folder on new computer), you must
    • 2A-1. Clone “Origin” to your local dev environment
      • – git clone <repo>
      • – git clone https://github.com/kccnma/sitebase.git
    • 2A-2. Setup local dev environment and run gulp
      • – npm install
      • – gulp
    • B. If returning, you should:
    • 2B-1. Get the latest from Github
      • – git status
      • – git pull (if changes were made, confirm you have the latest.
  7. Work locally
    • – gulp
  8. When done for the day, save and update the main github repository
    • – git status
    • – git add -A //adds all new files
    • – git commit -m ‘message”
    • – git push origin master
  • Other Random/Unsure Notes:
  1. Install node – curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash – – sudo apt-get install -y nodejs
  2. Install Node/NPM Build Tools – sudo apt-get install -y build-essential
  3. If gulp fails with permission error, set your npm prefix in root directory – git status

Hand-written Sketchy Found Links & Resources