Joni Weiss JoniWeiss

Useful tools for web development

Chrome Extensions

Mac Command Line for Web Devs

Handy Tools

mdn-search.
- Quick tool for search in Mozilla Developer Network from command line, built with nodejs by Nicolás Arias (ezakto):
- Usage:

    mdn   [options]   [command]   <query>

Dash for macOS.

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

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

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

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

Moment JS

	var areWeOpen = function() {
	var bizHours = [
	["0900", "1800"],
	["0630", "2000"],
	["0630", "2000"],
	["0630", "2000"],
	["0630", "2000"],
	["0630", "2000"],
	["0800", "2000"]
	];

	<html>
	<head>
	<meta charset="utf-8">
	<meta name="author" content="Joni Weiss -- dba HandMade Pixels">
	<style>
	.open-close {
	background-color: #2aabd2;
	font-weight: bold;
	border-radius: 12px;
	}

	# 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
	```