├── fonts └── ostrich-sans-fontfacekit │ ├── ostrich-bold-webfont.eot │ ├── ostrich-bold-webfont.ttf │ ├── ostrich-black-webfont.eot │ ├── ostrich-black-webfont.ttf │ ├── ostrich-black-webfont.woff │ ├── ostrich-bold-webfont.woff │ ├── ostrich-dashed-webfont.eot │ ├── ostrich-dashed-webfont.ttf │ ├── ostrich-dashed-webfont.woff │ ├── ostrich-light-webfont.eot │ ├── ostrich-light-webfont.ttf │ ├── ostrich-light-webfont.woff │ ├── ostrich-regular-webfont.eot │ ├── ostrich-regular-webfont.ttf │ ├── ostrich-rounded-webfont.eot │ ├── ostrich-rounded-webfont.ttf │ ├── ostrich-regular-webfont.woff │ ├── ostrich-rounded-webfont.woff │ ├── stylesheet.css │ ├── demo.html │ ├── SIL Open Font License 1.1.txt │ ├── ostrich-light-webfont.svg │ ├── ostrich-regular-webfont.svg │ └── ostrich-black-webfont.svg ├── mocks ├── mocks.js └── johnneiner.js ├── index.html ├── css ├── style.css └── base.css ├── readme.md └── js ├── script.js └── libs ├── modernizr-1.7.min.js ├── jquery.ba-dotimeout.js ├── jquery.mockjax.js └── jquery.tmpl.js /fonts/ostrich-sans-fontfacekit/ostrich-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-bold-webfont.eot -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-bold-webfont.ttf -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-black-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-black-webfont.eot -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-black-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-black-webfont.ttf -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-black-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-black-webfont.woff -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-bold-webfont.woff -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-dashed-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-dashed-webfont.eot -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-dashed-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-dashed-webfont.ttf -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-dashed-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-dashed-webfont.woff -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-light-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-light-webfont.eot -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-light-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-light-webfont.ttf -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-light-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-light-webfont.woff -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-regular-webfont.eot -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-regular-webfont.ttf -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-rounded-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-rounded-webfont.eot -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-rounded-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-rounded-webfont.ttf -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-regular-webfont.woff -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/ostrich-rounded-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcneiner/jQuery-Bling/HEAD/fonts/ostrich-sans-fontfacekit/ostrich-rounded-webfont.woff -------------------------------------------------------------------------------- /mocks/mocks.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | // This call intercepts all calls to a URL with /players/ in it 3 | // and returns what we put in the "johnneiner" variable instead 4 | 5 | // See http://code.appendto.com for more information on MockJax 6 | $.mockjax({ 7 | url: "*/players/*", 8 | contentType: 'text/json', 9 | responseText: johnneiner 10 | }); 11 | } (jQuery)); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | My Portfolio | John Neiner 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |

John Neiner

25 |

Check out some of my Dribbble shots:

26 |
27 | 29 | 32 |
33 | 34 | 35 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/stylesheet.css: -------------------------------------------------------------------------------- 1 | /* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 22, 2011 07:15:32 AM America/New_York */ 2 | 3 | 4 | 5 | @font-face { 6 | font-family: 'OstrichSansCondensedLight'; 7 | src: url('ostrich-light-webfont.eot'); 8 | src: url('ostrich-light-webfont.eot?#iefix') format('embedded-opentype'), 9 | url('ostrich-light-webfont.woff') format('woff'), 10 | url('ostrich-light-webfont.ttf') format('truetype'), 11 | url('ostrich-light-webfont.svg#OstrichSansCondensedLight') format('svg'); 12 | font-weight: normal; 13 | font-style: normal; 14 | 15 | } 16 | 17 | @font-face { 18 | font-family: 'OstrichSansMedium'; 19 | src: url('ostrich-regular-webfont.eot'); 20 | src: url('ostrich-regular-webfont.eot?#iefix') format('embedded-opentype'), 21 | url('ostrich-regular-webfont.woff') format('woff'), 22 | url('ostrich-regular-webfont.ttf') format('truetype'), 23 | url('ostrich-regular-webfont.svg#OstrichSansMedium') format('svg'); 24 | font-weight: normal; 25 | font-style: normal; 26 | 27 | } 28 | 29 | @font-face { 30 | font-family: 'OstrichSansBold'; 31 | src: url('ostrich-bold-webfont.eot'); 32 | src: url('ostrich-bold-webfont.eot?#iefix') format('embedded-opentype'), 33 | url('ostrich-bold-webfont.woff') format('woff'), 34 | url('ostrich-bold-webfont.ttf') format('truetype'), 35 | url('ostrich-bold-webfont.svg#OstrichSansBold') format('svg'); 36 | font-weight: normal; 37 | font-style: normal; 38 | 39 | } 40 | 41 | @font-face { 42 | font-family: 'OstrichSansBlack'; 43 | src: url('ostrich-black-webfont.eot'); 44 | src: url('ostrich-black-webfont.eot?#iefix') format('embedded-opentype'), 45 | url('ostrich-black-webfont.woff') format('woff'), 46 | url('ostrich-black-webfont.ttf') format('truetype'), 47 | url('ostrich-black-webfont.svg#OstrichSansBlack') format('svg'); 48 | font-weight: normal; 49 | font-style: normal; 50 | 51 | } 52 | 53 | @font-face { 54 | font-family: 'OstrichSansRoundedMedium'; 55 | src: url('ostrich-rounded-webfont.eot'); 56 | src: url('ostrich-rounded-webfont.eot?#iefix') format('embedded-opentype'), 57 | url('ostrich-rounded-webfont.woff') format('woff'), 58 | url('ostrich-rounded-webfont.ttf') format('truetype'), 59 | url('ostrich-rounded-webfont.svg#OstrichSansRoundedMedium') format('svg'); 60 | font-weight: normal; 61 | font-style: normal; 62 | 63 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url( "base.css" ); 2 | @import url( "../fonts/ostrich-sans-fontfacekit/stylesheet.css" ); 3 | 4 | html, body { width: 100%; min-height: 100%; } 5 | 6 | html { 7 | height: 100%; 8 | background-color: #70300a; 9 | background: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 700, from(#CB7317), color-stop(0.5, #984D10), to(#70300A)); 10 | background: -moz-radial-gradient(50% 0%, farthest-side, #CB7317, #984D10, #70300A); 11 | background-attachment: fixed; 12 | } 13 | 14 | body { 15 | background: transparent; 16 | padding: 1px 0; 17 | } 18 | 19 | header { 20 | text-align: center; 21 | margin: 30px 0 20px 0; 22 | text-shadow: 2px 2px 4px rgba(0,0,0,0.2); 23 | } 24 | 25 | header h1 { 26 | font-size: 80px; 27 | font-family: "OstrichSansBlack", sans-serif; 28 | color: rgb(255,191,59); 29 | } 30 | 31 | header p { 32 | font-family: "Gill Sans", serif; 33 | text-transform: uppercase; 34 | font-size: 24px; 35 | color: #fff; 36 | } 37 | 38 | .portfolio { 39 | width: 690px; 40 | margin: 40px auto; 41 | list-style: none; 42 | padding: 0; 43 | position: relative; 44 | left: 10px; 45 | } 46 | 47 | .portfolio li { 48 | float: left; 49 | margin-right: 20px; 50 | margin-bottom: 20px; 51 | padding: 5px; 52 | background: #fff; 53 | -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.2); /* Saf3.0+, Chrome */ 54 | -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.2); /* FF3.5+ */ 55 | box-shadow: 2px 2px 3px rgba(0,0,0,0.2); /* Opera 10.5, IE 9.0 */ 56 | position: relative; 57 | } 58 | 59 | .portfolio li img, 60 | .portfolio li span.placeholder-image { 61 | width: 200px; 62 | height: 150px; 63 | background: #3b1702; 64 | margin: 0; 65 | padding: 0; 66 | display: block; 67 | } 68 | 69 | .portfolio-info-panel { 70 | background: rgba(0,0,0,0.9); 71 | position: absolute; 72 | color: #fff; 73 | padding: 10px; 74 | width: 160px; 75 | -webkit-border-radius: 5px; /* Saf3+, Chrome */ 76 | -moz-border-radius: 5px; /* FF1+ */ 77 | border-radius: 5px; /* Opera 10.5, IE 9 */ 78 | text-align: center; 79 | left: 15px; 80 | bottom: 140px; 81 | display: none; 82 | } 83 | 84 | .no-js li:hover .portfolio-info-panel { 85 | display: block; 86 | } 87 | 88 | .portfolio li:nth-child(1n+4) .portfolio-info-panel { 89 | bottom: auto; 90 | top: 140px; 91 | } 92 | 93 | .portfolio-info-panel h2 { 94 | font-weight: normal; 95 | font-family: "OstrichSansBlack", serif; 96 | text-rendering: optimizeLegibility; 97 | font-size: 24px; 98 | color: rgb(255,191,59); 99 | } 100 | 101 | .portfolio-info-panel a { 102 | color: #ccc; 103 | text-decoration: none; 104 | } 105 | 106 | .portfolio-info-panel a:hover { 107 | text-decoration: underline; 108 | } 109 | 110 | 111 | footer { 112 | clear: left; 113 | width: 700px; 114 | border-top: solid 1px rgba(0,0,0,0.4); 115 | padding-top: 30px; 116 | position: relative; 117 | margin: 0 auto; 118 | top: 20px; 119 | text-align: center; 120 | color: rgba(255,255,255,0.4); 121 | } 122 | 123 | footer a { 124 | color: #fff; 125 | } -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/demo.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | Font Face Demo 9 | 10 | 26 | 27 | 28 | 29 |
30 |

FONT-FACE DEMO FOR THE OSTRICH SANS FONT

31 | 32 | 33 | 34 |

Ostrich Sans Light - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

35 | 36 | 37 | 38 |

Ostrich Sans Regular - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

39 | 40 | 41 | 42 |

Ostrich Sans Bold - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

43 | 44 | 45 | 46 |

Ostrich Sans Black - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

47 | 48 | 49 | 50 |

Ostrich Sans Rounded - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

51 | 52 | 53 | 54 |

Ostrich Sans Dashed - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

55 | 56 |
57 | 58 | 59 | -------------------------------------------------------------------------------- /fonts/ostrich-sans-fontfacekit/SIL Open Font License 1.1.txt: -------------------------------------------------------------------------------- 1 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 2 | This license is copied below, and is also available with a FAQ at: 3 | http://scripts.sil.org/OFL 4 | 5 | 6 | ----------------------------------------------------------- 7 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 8 | ----------------------------------------------------------- 9 | 10 | PREAMBLE 11 | The goals of the Open Font License (OFL) are to stimulate worldwide 12 | development of collaborative font projects, to support the font creation 13 | efforts of academic and linguistic communities, and to provide a free and 14 | open framework in which fonts may be shared and improved in partnership 15 | with others. 16 | 17 | The OFL allows the licensed fonts to be used, studied, modified and 18 | redistributed freely as long as they are not sold by themselves. The 19 | fonts, including any derivative works, can be bundled, embedded, 20 | redistributed and/or sold with any software provided that any reserved 21 | names are not used by derivative works. The fonts and derivatives, 22 | however, cannot be released under any other type of license. The 23 | requirement for fonts to remain under this license does not apply 24 | to any document created using the fonts or their derivatives. 25 | 26 | DEFINITIONS 27 | "Font Software" refers to the set of files released by the Copyright 28 | Holder(s) under this license and clearly marked as such. This may 29 | include source files, build scripts and documentation. 30 | 31 | "Reserved Font Name" refers to any names specified as such after the 32 | copyright statement(s). 33 | 34 | "Original Version" refers to the collection of Font Software components as 35 | distributed by the Copyright Holder(s). 36 | 37 | "Modified Version" refers to any derivative made by adding to, deleting, 38 | or substituting -- in part or in whole -- any of the components of the 39 | Original Version, by changing formats or by porting the Font Software to a 40 | new environment. 41 | 42 | "Author" refers to any designer, engineer, programmer, technical 43 | writer or other person who contributed to the Font Software. 44 | 45 | PERMISSION & CONDITIONS 46 | Permission is hereby granted, free of charge, to any person obtaining 47 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 48 | redistribute, and sell modified and unmodified copies of the Font 49 | Software, subject to the following conditions: 50 | 51 | 1) Neither the Font Software nor any of its individual components, 52 | in Original or Modified Versions, may be sold by itself. 53 | 54 | 2) Original or Modified Versions of the Font Software may be bundled, 55 | redistributed and/or sold with any software, provided that each copy 56 | contains the above copyright notice and this license. These can be 57 | included either as stand-alone text files, human-readable headers or 58 | in the appropriate machine-readable metadata fields within text or 59 | binary files as long as those fields can be easily viewed by the user. 60 | 61 | 3) No Modified Version of the Font Software may use the Reserved Font 62 | Name(s) unless explicit written permission is granted by the corresponding 63 | Copyright Holder. This restriction only applies to the primary font name as 64 | presented to the users. 65 | 66 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 67 | Software shall not be used to promote, endorse or advertise any 68 | Modified Version, except to acknowledge the contribution(s) of the 69 | Copyright Holder(s) and the Author(s) or with their explicit written 70 | permission. 71 | 72 | 5) The Font Software, modified or unmodified, in part or in whole, 73 | must be distributed entirely under this license, and must not be 74 | distributed under any other license. The requirement for fonts to 75 | remain under this license does not apply to any document created 76 | using the Font Software. 77 | 78 | TERMINATION 79 | This license becomes null and void if any of the above conditions are 80 | not met. 81 | 82 | DISCLAIMER 83 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 84 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 85 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 86 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 87 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 88 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 89 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 90 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 91 | OTHER DEALINGS IN THE FONT SOFTWARE. -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # jQuery: Nuts, Bolts and Bling – Live Coding Source Code 2 | 3 | This code was used in the jQuery: Nuts, Bolts and Bling presentation delivered at 4 | [Front End Design Conference](http://frontenddesignconference.com) in St. Petersburg, FL. 5 | 6 | **Important!** Because we are using AJAX, you cannot run this at the `file://` protocol in some browsers. To run this code you need to run it at `http://`. The easiest way to do this is to upload it to a personal website and play with it there. The next easiest (If you are on a Mac), is to open Terminal and navigate to the directory where this file lives. Then run: 7 | 8 | python -m SimpleHTTPServer 9 | 10 | Then point your browser to [http://0.0.0.0:8000](http://0.0.0.0:8000) and try out the files. 11 | 12 | Most of this code was revealed during the live coding session. Only the result remains in this 13 | source code format (With the exception of some of the steps used in the `doTimeout` section). Here are a few notes about the concepts presented: 14 | 15 | ## jQuery Mockjax 16 | 17 | We use the [Mockjax](http://code.appendto.com/plugins/jquery-mockjax) plugin to fake a request 18 | to the [Dribbble API](http://dribbble.com/api) and return test data. 19 | 20 | The process for generating our test data file (`mocks/johnneiner.js`) was: 21 | 22 | 1. Visit the API endpoint on the Dribbble api, in this case: `http://api.dribbble.com/players/johnneiner/shots` 23 | 2. Save this file as `mocks/johnneiner.js` 24 | 3. Open the file and add `var johnneiner = ` to the beginning, and `;` at the end. 25 | 4. Include this new js file on our page with our mocks 26 | 27 | *We are simulating a cross domain request and I ran into some issues using the normal mockjax `proxy` method, so I took this approach instead. If I find a better workaround, or mockjax is updated to make this easier, I will try to update this repository to reflect that.* 28 | 29 | Then, you add the code found in `mocks/mocks.js` 30 | 31 | To test that our fake data works like the real data, simply remove the three mock `