WARNING
This gist is outdated! For the most up-to-date information, please see http://emberjs.com/guides/routing/!
An Ember application starts with its main template. Put your header, footer, and any other decorative content in application.handlebars.
<header>
| /* Pretend app setup stuff is here */ | |
| /* Kick off app */ | |
| jQuery(function($) { | |
| var Gallery = app.module("gallery"); | |
| app.Router = Backbone.Router.extend({ | |
| initialize: function() { | |
| this.gallery = new Gallery.Router("gallery/"); |
| /* Gmail style scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 12px | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| border-width: 1px 1px 1px 2px | |
| } | |
| ::-webkit-scrollbar-track { | |
| border-width: 0 | |
| } |
| // This is an advanced example! It is not typically required for application code. | |
| // If you are using a library like Redux or MobX, use the container component provided by that library. | |
| // If you are authoring such a library, use the technique shown below. | |
| // This example shows how to safely update subscriptions in response to props changes. | |
| // In this case, it is important to wait until `componentDidUpdate` before removing a subscription. | |
| // In the event that a render is cancelled before being committed, this will prevent us from unsubscribing prematurely. | |
| // We also need to be careful about how we handle events that are dispatched in between | |
| // `getDerivedStateFromProps` and `componentDidUpdate` so that we don't put stale values into the `state`. |
| // swap the keybindings for paste and paste_and_indent | |
| { "keys": ["super+v"], "command": "paste_and_indent" }, | |
| { "keys": ["super+shift+v"], "command": "paste" } |
| html, | |
| body { | |
| cursor: default; | |
| } | |
| code { | |
| cursor: text; | |
| } | |
| /* |
The proposal you’re about to read is not just a proposal. We have a working implementation of almost everything we discussed here. We encourage you to checkout and build our branch: our fork, with the relevant branch selected. Building and using the implementation will give you a better understanding of what using it as a developer is like.
Our implementation ended up differing from the proposal on some minor points. As our last action item before making a PR, we’re writing documentation on what we did. While I loathe pointing to tests in lieu of documentation, they will be helpful until we complete writing docs: the unit tests.
This repo also contains a bundled version of npm that has a new command, asset. You can read the documentation for and goals of that comma
| // Media Queries in Sass 3.2 | |
| // | |
| // These mixins make media queries a breeze with Sass. | |
| // The media queries from mobile up until desktop all | |
| // trigger at different points along the way | |
| // | |
| // And important point to remember is that and width | |
| // over the portrait width is considered to be part of the | |
| // landscape width. This allows us to capture widths of devices | |
| // that might not fit the dimensions exactly. This means the break |
| import PropTypes from 'prop-types'; | |
| type Omit<T, K> = Pick<T, Exclude<keyof T, K>>; | |
| type Defined<T> = T extends undefined ? never : T; | |
| /** | |
| * Get the type that represents the props with the defaultProps included. | |
| * | |
| * Alternatively, we could have done something like this: |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| body{ | |
| font-family: sans; | |
| padding: 10px; | |
| } | |
| svg path{ |
