Skip to content

Instantly share code, notes, and snippets.

Ben Frain benfrain

Block or report user

Report or block benfrain

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View everything-i-know-about-routing.md

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
danmikita / init.vim
Created Nov 16, 2018
File preview with FZF, RG, Bat, and Devicons
View init.vim
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
@subhaze
subhaze / JavaScript NG.sublime-syntax
Last active Feb 11, 2020
very start of Angular 2 sublime syntax file
View JavaScript NG.sublime-syntax
%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
paulirish / what-forces-layout.md
Last active Apr 7, 2020
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
@p3t3r67x0
p3t3r67x0 / pseudo_elements.md
Last active Nov 5, 2019
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.
View pseudo_elements.md

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
austinhyde / js-observables-binding.md
Last active Mar 18, 2020
Vanilla JavaScript Data Binding
View js-observables-binding.md

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
tommillard / SimpleHTTPServer
Last active Nov 13, 2018
Serve a local folder as a server at http://localhost:8000/
View SimpleHTTPServer
browse to folder in terminal and run:
python -m SimpleHTTPServer
View 0_namespacing.scss
mymodule {
@at-root {
.#{&}-header { ... }
.#{&}-footer { ... }
.#{&}-body {
a { ... }
span { ... }
p { ... }
}
}
@sergiolopes
sergiolopes / README.md
Last active Jul 11, 2019
A script to generate SVG sprites, including CSS and PNG fallbacks.
View README.md
You can’t perform that action at this time.