ynotdraw

Follow instructions at the link provided to get to the user snippet creation file: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets

Paste in the contents of vscode-react-snippets.json and you should be good to go :). Make edits as you like to fit your preferences.

ynotdraw

Video: https://www.youtube.com/watch?v=7Z9rrryIOC4&feature=youtu.be&app=desktop Slides: https://speakerdeck.com/steveschoger/practical-solutions-to-common-ui-design-problems

Notes

Tip #1: Give text consistent contrast

• Image hero's need contrast
• App bars don't have to be in a bar. App bar changed from a colored bar to transparent so that the image hero blends up into the navbar.
• More contrast between headline and subtitle. Can use softer color - white text softer on dark background, darken text by decreasing lightness - that's OK.. but always looks a bit off

Tip #2: Don't use grey text on colored backgrounds

ynotdraw

import React, { useState, useContext, useEffect } from "react";
import { getCoffeeData } from "../api/getData";

import Layout from "../components/Layout";
import Loading from "../components/Loading";
import ItemGroup from "../components/ItemGroup";
import Cart from "../components/Cart";

import { GlobalContext } from "../components/GlobalStateProvider";

ynotdraw

• https://stackoverflow.com/questions/36677733/why-shouldnt-jsx-props-use-arrow-functions-or-bind

CSS Grid: • https://css-irl.info/controlling-leftover-grid-items/

ynotdraw

In package.json:

"@types/ember": "^2.8.32",
"@types/ember__test-helpers": "^0.7.0",

In jsconfig.json:

ynotdraw

Started in September, but...

Contents:

• Ember
• Sass
• Linting

Ember

-p 0

ember s -p 0

ynotdraw

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",

ynotdraw

{
    "window.zoomLevel": 2,
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/node_modules": true,
        "dist": true,

ynotdraw

// Copy and paste this as a JavaScript snippet.  Follow the directionshere to access them:
// https://code.visualstudio.com/docs/editor/userdefinedsnippets
{
	// ------------------------------
	// Imports: getters/setters
	// ------------------------------
	"Import Getters/Setters": {
		"prefix": "imp e get",
		"body": [
			"import { ${1:get}, ${2:getProperties}, ${3:set}, ${4:setProperties} } from '@ember/object';"

ynotdraw

using System;
using System.Collections.Generic;
using System.IO;
using System.IO.IsolatedStorage;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Live;

// https://stackoverflow.com/questions/23715282/onedrive-upload-download-to-specified-directory