ryanflorence

Everything I Know About UI Routing

Definitions

1. Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
   1. pathname - The "file/directory" portion of the URL, like invoices/123
   2. search - The stuff after ? in a URL like /assignments?showGrades=1.
   3. query - A parsed version of search, usually an object but not a standard browser feature.
   4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
   5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

danmikita

nnoremap <silent> <leader>e :call Fzf_dev()<CR>

" ripgrep
if executable('rg')
  let $FZF_DEFAULT_COMMAND = 'rg --files --hidden --follow --glob "!.git/*"'
  set grepprg=rg\ --vimgrep
  command! -bang -nargs=* Find call fzf#vim#grep('rg --column --line-number --no-heading --fixed-strings --ignore-case --hidden --follow --glob "!.git/*" --color "always" '.shellescape(<q-args>).'| tr -d "\017"', 1, <bang>0)
endif

" Files + devicons

swalkinshaw

Moved to Shopify/graphql-design-tutorial

subhaze

%YAML 1.2
---
# See http://www.sublimetext.com/docs/3/syntax.html
name: JavaScript NG
file_extensions:
  - js
  - ng.js
scope: source.js.ng
contexts:
  main:

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

p3t3r67x0

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

austinhyde

Observables

You don't really need a framework or fancy cutting-edge JavaScript features to do two-way data binding. Let's start basic - first and foremost, you need a way to tell when data changes. Traditionally, this is done via an Observer pattern, but a full-blown implementation of that is a little clunky for nice, lightweight JavaScript. So, if native getters/setters are out, the only mechanism we have are accessors:

var n = 5;
function getN() { return n; }
function setN(newN) { n = newN; }

console.log(getN()); // 5
setN(10);

tommillard

browse to folder in terminal and run:
 
python -m SimpleHTTPServer

chriseppstein

mymodule {
  @at-root {
    .#{&}-header { ... }
    .#{&}-footer { ... }
    .#{&}-body   {
      a          { ... } 
      span       { ... } 
      p          { ... } 
    }
  }

sergiolopes

SVG sprite generator, by Sérgio Lopes

• https://twitter.com/sergio_caelum
• http://sergiolopes.org

Requirements

• Python
• Inkscape (on command line path)
• ImageMagick