Joni Weiss JoniWeiss

SubKitchen Dev Setup

Pre-requisites

Git

git version

GitHub Account
Assumes Mac with macOS 10.12+

Some practical tips on using Git and Github

(from a relative noobe)

Open in Atom

Open Automator
Create a new Service
Set “Service receives selected” to files or folders in any application
Add a Run Shell Script action
Set the script action to /usr/local/bin/atom -n $@
Set “Pass input” to as arguments
Save as Open in Atom

Moment JS

Accessibility

ARIA (Accessible Rich Internet Applications)

Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.

ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML. The role attribute defines what the general type of object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progress bar.

ARIA is implemented in most popular browsers and screen readers. However, implementations vary and older technologies don't support it well (if at all). Use either "safe" ARIA that degrades gracefully, or ask users to upgrade to newer technology.

[MDN Article on

D3.JS Assignment - Convert example from version 3 to 4.

Version 3 example is from here: http://curran.github.io/screencasts/introToD3/examples/viewer/#/107

Some bookmarks for Web Dev resources

React Resource Sets

older, but slightly more thorough React video tutorial - https://www.youtube.com/playlist?list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS
more recent and shorter video tutorial - https://www.youtube.com/playlist?list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b
the official React Documentation - https://facebook.github.io/react/ and Tutorial - https://facebook.github.io/react/tutorial/tutorial.html
the StackOverflow React documentation - http://stackoverflow.com/documentation/reactjs/topics (edited

JSON Help

Using JSON with React
There are a number of ways to connect JSON to your REACT app. Here are just a couple of woefully imcomplete methods

Using a callback with fetch:

    fetch('./app/test.json')
// make the request for the json file
.then(function(response) {

// Convert to JSON

	@mixin for-phone-only {
	@media (max-width: 599px) { @content; }
	}
	@mixin for-tablet-portrait-up {
	@media (min-width: 600px) { @content; }
	}
	@mixin for-tablet-portait-only {
	@media (min-width: 600px) and (max-width: 899px) { @content; }
	}
	@mixin for-tablet-landscape-up {

	# UNIX Command-line Stuff for developers
	I've spent a few years at the UNIX command line professionally and as a student of web development. While I am often surprised at how little most noob developers (and some seasoned ones as well) know about the power of UNIX, I understand completely. We live in a world of the desktop with it's Finders and Explorers. We forget that the command-line .. a.k.a. "Terminal" (or iTerm for people like me) packs a lot of power into it's not-so-pretty interface.

	I assume you know a fair amount about getting around in UNIX with cd, ls, mkdir, rm, etc. If you don't, please don't try to understand this, but get yourself some training on basic UNIX (bash, zsh, etc).

	## Find
	* List directories under the current directory:
	```
	find . -type d
	```