``` element in the DOM
22 |
23 | Renderings live in, **Contexts**, which themselves are not displayed. They are isolated rendering environments that tell the Engine where renderables live.
24 |
25 | Call dependecies for **surfaces** and **Contects**
26 | ```javascript
27 | var Engine = require('famous/core/Engine');
28 | var Surface = require('famous/core/Surface');
29 |
30 | var mainContext = Engine.createContext();
31 | ```
32 |
33 | Content that exist in the **surface**, rendered by **Contexts** can be a string, HTML, or a DOM element. The content can be set when you initialize your surface or by the ```.setContent()``` method.
34 |
35 | Push your **surface** to the DOM via
36 | ```javascript
37 | mainContext.add(firstSurface);
38 | ```
39 | The **Hello, World!** example below is a basic **surface**.
40 | ```javascript
41 | var Engine = require('famous/core/Engine');
42 | var Surface = require('famous/core/Surface');
43 |
44 | var mainContext = Engine.createContext();
45 | var firstSurface = new Surface({
46 | content: 'hello world',
47 | });
48 |
49 | mainContext.add(firstSurface);
50 | ```
51 |
52 |
53 | #### Styling
54 |
55 | You begin styling a surface with adding a **properties** section in your instantiation. Styling a **surface** is pretty much the same as CSS, but you replace your dashes with camelCase. So instead of ``` text-align``` its now ```textAlign``` For example:
56 |
57 | ```javascript
58 | var firstSurface = new Surface({
59 | content: 'hello world',
60 | properties: {
61 | color: 'white',
62 | textAlign: 'center',
63 | backgroundColor: '#FA5C4F'
64 | }
65 | });
66 |
67 | mainContext.add(firstSurface);
68 | ```
69 |
70 | To make your surface a particular **size** you must add it to your surface object. If you do not specify, the surface inherits the size of its parent--the context.
71 | ```javascript
72 | var firstSurface = new Surface({
73 | size: [200, 400],
74 | content: 'hello world',
75 | properties: {
76 | color: 'white',
77 | textAlign: 'center',
78 | backgroundColor: '#FA5C4F'
79 | }
80 | });
81 |
82 | mainContext.add(firstSurface);
83 | ```
84 | ##### Surface Size:
85 | - In pixels with [x, y]
86 | - In only one dimension with [undefined, y] or [x, undefined]. For example, [undefined, 200] will span the entire length of the x-direction, while only 200 pixles in the y direction. [, ] also works.
87 | - Have the surface auto-size according to the content with [true, true]. You can put in any statement that evaluates to [true, true]. For example, [1>3, 1>3], [false, false], and [null, null] all work.
88 |
89 | ##### Positioning
90 | With positioning we add two more requirements; **Transform** and **State Modifier**. The **State Modifier** is an object that is used to translate or move a surface. **Transform** on the other hand is a little more implicit. Instead of traditional positioning surfaces are styled with position:absolute and their positions are defined by matrix3d webkit transforms. More on [Transforms Expanded](https://famo.us/guides/layout).
91 |
92 | This means we now have to add more to our method call. Which now looks like this ```mainContext.add(stateModifier).add(surface);```, to push our newly positioned surface to the DOM.
93 |
94 | Example of a positioned **surface** using **Transform** and **State Modifier**
95 | ```javascript
96 | var Engine = require('famous/core/Engine');
97 | var Surface = require('famous/core/Surface');
98 | var Transform = require('famous/core/Transform');
99 | var StateModifier = require('famous/modifiers/StateModifier');
100 |
101 | var mainContext = Engine.createContext();
102 |
103 | createModifiedSurface();
104 |
105 | function createModifiedSurface() {
106 | var modifiedSurface = new Surface({
107 | size: [100, 100],
108 | content: 'modified surface',
109 | properties: {
110 | color: 'white',
111 | textAlign: 'center',
112 | backgroundColor: '#FA5C4F'
113 | }
114 | });
115 |
116 | var stateModifier = new StateModifier({
117 | transform: Transform.translate(150, 100, 0)
118 | });
119 |
120 | mainContext.add(stateModifier).add(modifiedSurface);
121 | }
122 | ```
123 | Now on to rotation! This part is pretty dense, so I'll separate it into sections.
124 | ```javascript
125 | var Engine = require('famous/core/Engine');
126 | var Surface = require('famous/core/Surface');
127 | var StateModifier = require('famous/modifiers/StateModifier');
128 | var Transform = require('famous/core/Transform');
129 |
130 | var mainContext = Engine.createContext();
131 | ```
132 | Here we're making sure we have the correct dependencies, and everything we need to create **surfaces**, **Context** s, **Transform** s, and **State Modifiers**. This example involves 2 **Context** s and 2 **surfaces**.
133 |
134 | ---
135 |
136 | ```javascript
137 | var translateModifierOne = new StateModifier({
138 | transform: Transform.translate(200, 0, 0)
139 | });
140 |
141 | var translateModifierTwo = new StateModifier({
142 | transform: Transform.translate(200, 0, 0)
143 | });
144 |
145 | var rotateModifierOne = new StateModifier({
146 | transform: Transform.rotateZ(Math.PI/4)
147 | });
148 |
149 | var rotateModifierTwo = new StateModifier({
150 | transform: Transform.rotateZ(Math.PI/4)
151 | });
152 | ```
153 | Here we are doing four things.
154 | 1. Making a **State Modifier** that will use **Transform** to *TRANSLATE* our surface by 200 pixles in the x direction. This will be applied our first **Context**
155 | 2. Making a **State Modifier** that will use **Transform** to *TRANSLATE* our surface by 200 pixles in the x direction. This will be applied our second **Context**
156 | 3. Making a **State Modifier** that will use **Transform** to *ROTATE* our surface by PI/4 degrees over the z-axis. This will be applied our first **Context**
157 | 4. Making a **State Modifier** that will use **Transform** to *ROTATE* our surface by PI/4 degrees over the z-axis. This will be applied our second **Context**
158 |
159 | ---
160 |
161 |
162 | ```javascript
163 | var redSurface = new Surface({
164 | size: [100, 100],
165 | classes: ['red-bg']
166 | });
167 |
168 | var greySurface = new Surface({
169 | size: [100, 100],
170 | classes: ['grey-bg']
171 | });
172 | ```
173 | Now we are creating our **surfaces**, in this case we are making one for each **Context**
174 |
175 | ---
176 |
177 | ```javascript
178 | mainContext
179 | .add(translateModifierOne)
180 | .add(rotateModifierOne)
181 | .add(redSurface);
182 |
183 | mainContext
184 | .add(rotateModifierTwo)
185 | .add(translateModifierTwo)
186 | .add(greySurface);
187 | ```
188 |
189 | Finally we are assigning the **surfaces**, **State Modifiers**, and **Transforms** to the **Context** s we made earlier.
190 |
191 | ---
192 |
193 | **Note**: Order that you chain modifiers matters! The red surface has its translation applied before the rotation which causes it to be moved and THEN rotated about its origin. However the grey surface is rotated and THEN translated, which because it is rotated PI/4 translated. Because it was rotated first, it is now translated along that angle, instead of linearly like the red square. Causing it to be both below, and further to the left than the red square.
194 |
195 | More positioning!
196 |
197 | ```javascript
198 | var downMod = new StateModifier({
199 | transform: Transform.translate(0, 100, 0)
200 | });
201 |
202 | var rightMod = new StateModifier({
203 | transform: Transform.translate(150, 0, 0)
204 | });
205 |
206 | var node = mainContext.add(downMod);
207 | node.add(leftSurface);
208 | node.add(rightMod).add(rightSurface);
209 | ```
210 | The important component is that you can add ```.add(downMod);``` to all the surfaces simultaneously. By setting our **Context** as a a variable, and then method chaining it with our surfaces and our **State Modifier** s
211 |
212 | ```javascript
213 | var alignOriginModifier = new StateModifier({
214 | align: [0.5, 0.5],
215 | origin: [1, 1]
216 | });
217 | ```
218 | **Align** sets the anchor point on the parent element, while **Origin** sets the anchor point on the child element. **Origin** is also the point about which transforms get applied. By default, **origin** is set to [0, 0], a rotation **transform** defaults to rotating about the top left corner.
219 |
220 | ##### Opacity
221 | Opacity is added to a **State Modifier** just like everything else, ```opacity: 0.5 ```. Everything that gets added to the render tree after that modifier gets that opacity value multiplied to its current opacity.
222 |
223 | ```javascript
224 | var modifier = new StateModifier({
225 | opacity: 0.5,
226 | transform: Transform.scale(1, 3, 1),
227 | align: [0.5, 0.5],
228 | origin: [0.5, 0.5]
229 | });
230 | ```
231 | #### Creating Animations
232 | Now we introduce the ```.setTransform()``` method. ```.setTransform()``` takes in a **transform** argument and can also be passed two additional arguments: a **transition object** which defines the animation. This the transition from **transform**'s current value to its new value. The second argument is the **callback function**.
233 |
234 | In addition, we also need to add another dependency ```var Easing = require('famous/transitions/Easing');```
235 |
236 | ```javascript
237 | stateModifier.setTransform(
238 | Transform.translate(100, 300, 0),
239 | { duration : 1000, curve: 'easeInOut' }
240 | );
241 | ```
242 | To chain animations, simply call your wanted stateModifier.setTransform's back to back.
243 | **Note**: that this method only works for chaining .setTransform() on the same state modifier. If you want to chain animations between modifiers, use a completion callback.
244 |
245 | You can interrupt an animation before it's over by calling .halt() on the state modifier.
246 |
247 | ```javascript
248 | surface.on('click', function() {
249 | stateModifier.halt();
250 | surface.setContent('halted');
251 | });
252 | ```
253 |
254 | Physics transitions can give animations a more realistic feel and can be tuned more precisely. (I like these better). For this, we need to add a few more dependecies, but we can take out the easing one.
255 |
256 | ```javascript
257 | var Transitionable = require('famous/transitions/Transitionable');
258 | var SpringTransition = require('famous/transitions/SpringTransition');
259 | Transitionable.registerMethod('spring', SpringTransition);
260 | ```
261 | There difference is the last part, where instead of bringing in a dependency, we register the spring transition to the transition object with method 'spring'.
262 |
263 | Our last steps are to specify the parameters and apply the transition. Which looks like:
264 |
265 | ```javascript
266 | var spring = {
267 | method: 'spring',
268 | period: 1000,
269 | dampingRatio: 0.3
270 | };
271 |
272 | stateModifier.setTransform(
273 | Transform.translate(0, 300, 0), spring
274 | );
275 | ```
276 |
277 | #### Handling Events
278 | 1. Surface events
279 | 2. Engine events
280 | 3. Program events
281 |
282 | For the use of events we must include the dependency ```var EventHandler = require('famous/core/EventHandler');```
283 |
284 | **surfaces**capture all the falling DOM events listed, and can be registered with a callback function using the .on() method; click, mousedown, mousemove, mouseup, mouseover, mouseout, touchstart, touchmove, touchend, touchcancel, keydown, keyup, keypress.
285 |
286 | Example of a **surface** event, that when click changes the text 'click me' to 'Gennevi is sexy!' :
287 |
288 | ```javscript
289 | var surface = new Surface({
290 | size: [undefined, 100],
291 | content: 'click me',
292 | properties: {
293 | color: 'white',
294 | textAlign: 'center',
295 | backgroundColor: '#FA5C4F'
296 | }
297 | });
298 |
299 | mainContext.add(surface);
300 |
301 | surface.on('click', function() {
302 | surface.setContent('Gennevi, is Sexy!');
303 | });
304 | ```
305 | Document events interact first with the surface that involved, then using the ```.on()``` method they can interact the **Context** containing the **surface**, and then as a default the engine itself.
306 |
307 | We can emit, transmit, and listen to program events using Event Handler objects. This is our second case, the Engine handlers.
308 | ```javascript
309 | var eventHandler = new EventHandler();
310 |
311 | surface.on('click', function() {
312 | eventHandler.emit('hello');
313 | });
314 |
315 | eventHandler.on('hello', function() {
316 | surface.setContent('heard hello');
317 | });
318 | ```
319 |
320 | We have a surface that one clicked emits an event as a string ```'hello'```, and once that string is emitted it is captured with our eventHandler which then switches whatever initial content to 'heard hello'.
321 |
322 | We also have Program Events.
323 | Example: Program Event - Event Handler
324 | ```javascript
325 | var eventHandlerA = new EventHandler();
326 | var eventHandlerB = new EventHandler();
327 |
328 | surfaceA.on('click', function() {
329 | eventHandlerA.emit('hello');
330 | surfaceA.setContent('said hello');
331 | });
332 |
333 | eventHandlerB.subscribe(eventHandlerA);
334 |
335 | eventHandlerB.on('hello', function() {
336 | surfaceB.setContent('heard hello');
337 | });
338 | ```
339 |
340 | Event handler A emits 'hello' when surface A is clicked. Event handler B listens for the 'hello' event and calls surface B to set its content when the event is triggered.
341 |
342 | This logic alone does not produce any results when surface A is clicked because the two event handlers are not transmitting to each other. To do so, event handler B has to subscribe to event handler A using ```.subscribe()``` When event handler B subscribes to event handler A, all events emitted from event handler A will be heard by event handler B.
343 |
344 | Now we have Program Events - Pipe & Subscribe
345 |
346 | An alternative to ```.subscribe()``` is ```.pipe()```, which directly sends the emmited events from one handler to another.
347 |
348 | ```javascript
349 | surfaceA.on('click', function() {
350 | eventHandlerA.emit('hello');
351 | surfaceA.setContent('said hello');
352 | });
353 |
354 | eventHandlerA.pipe(eventHandlerB);
355 |
356 | eventHandlerB.on('hello', function() {
357 | surfaceB.setContent('heard hello');
358 | });
359 | ```
360 | Pipe VS. Subscribe, from your friendly stackoverflow.
361 |
362 | >If you do widgetA.pipe(widgetB) then all events from widgetA are sent to widgetB regardless whether widgetB is listening to them. Pipe is like a firehose.
363 |
364 | >Subscribe on the other hand, is more performant. WidgetB.subscribe(widgetA) says "of the things you emit, I want to subscribe to a particular subset." Other events are then completely ignored.
365 |
366 | >This is especially important when interacting with the DOM, which outputs a lot of events (mousedown, mouseup, touchmove, resize, etc...), and it's preferred to use Subscribe when listening to a DOM element.
367 |
368 | Program Events - Views
369 |
370 | When you pipe into a view or subscribe from a view, you're actually piping into or subscribing from the input event handler of a view, called ```view._eventInput```.
371 |
372 | a view's input handler is the aggregation point of all the events coming into that view. The view can then decide what to do with those events by listening on it's ```_eventInput ```. For views you also need to include the view dependency, ```var View = require('famous/core/View');```.
373 |
374 | View Example:
375 | ```javascript
376 | var myView = new View();
377 | mainContext.add(myView);
378 |
379 | var surface = new Surface({
380 | size: [100, 100],
381 | content: 'click me',
382 | properties: {
383 | color: 'white',
384 | textAlign: 'center',
385 | backgroundColor: '#FA5C4F'
386 | }
387 | });
388 |
389 | myView.add(surface);
390 |
391 | surface.pipe(myView);
392 | // alternatively, myView.subscribe(surface);
393 | // normally inside view module's code
394 | myView._eventInput.on('click', function() {
395 | surface.setContent('hello');
396 | });
397 | ```
398 |
399 | Views can broadcasts an event to the outside world from its output handler. Outside of the view, we use ```.on()``` to listen for those events.
400 | ```javascript
401 | myView._eventInput.on('click', function() {
402 | myView._eventOutput.emit('hello');
403 | });
404 | ```
405 |
406 | ###### Best Practices
407 | - A Famo.us app can have more than one context, but a mobile app or full-page web app usually just uses one.
408 | - The order that you chain modifiers matters!
409 | - Listening on Engine events is a catch-all but in most applications, you'll want to capture the events at a lower level.
410 |
411 | # [FamoUs University 102](http://famo.us/university/lessons/#/famous-102/)
412 |
413 | #Layouts
414 |
415 | ## Header & Footer
416 |
417 | ```javascript
418 | var Engine = require('famous/core/Engine');
419 | var Surface = require('famous/core/Surface');
420 | var HeaderFooterLayout = require("famous/views/HeaderFooterLayout");
421 |
422 | var mainContext = Engine.createContext();
423 | ```
424 | As always, make sure that you include your propper dependencies so that you can use all the features you want. The only new one in this case is the **Header** and **Footer** which van both be found in the views folder.
425 |
426 | ```javascript
427 | var layout = new HeaderFooterLayout({
428 | headerSize: 100,
429 | footerSize: 50
430 | });
431 | ```
432 |
433 | ```javascript
434 | layout.header.add(new Surface({
435 | content: "Header",
436 | properties: {
437 | backgroundColor: 'gray',
438 | lineHeight: "100px",
439 | textAlign: "center"
440 | }
441 | }));
442 | ```
443 |
444 | ```javascript
445 | layout.content.add(new Surface({
446 | content: "Content",
447 | properties: {
448 | backgroundColor: '#fa5c4f',
449 | lineHeight: '400px',
450 | textAlign: "center"
451 | }
452 | }));
453 | ```
454 |
455 | ```javascript
456 | layout.footer.add(new Surface({
457 | content: "Footer",
458 | properties: {
459 | backgroundColor: 'gray',
460 | lineHeight: "50px",
461 | textAlign: "center"
462 | }
463 | }));
464 | ```
465 |
466 | Layouts will fill the size of its parent modifier or context. In our example it fills the size of our main context.
467 |
468 |
469 | #### [Demos](http://famous.org/)
470 | #### [Guides](https://github.com/Famous/famous/tree/master/guides)
471 | * animations
472 | * events
473 | * layout
474 | * migrating-0.2-to-0.3
475 | * pitfalls
476 | * render-tree
477 |
478 | #### [Projects]()
479 |
--------------------------------------------------------------------------------
/Programming/Web Development/Frontend/frontend-frameworks.md:
--------------------------------------------------------------------------------
1 | Front-end Frameworks
2 | ====================
3 |
4 | A collection of best front-end frameworks for faster and easier web development.
5 |
6 | You can **Compare** all front-end frameworks here: http://usablica.github.com/front-end-frameworks/compare.html
7 |
8 | ## IceCream
9 |
10 | > Simple and light responsive grid system
11 |
12 | **Responsive:** Yes
13 |
14 | **Website:** http://html5-ninja.com/icecream
15 |
16 | ## Formee Framework for forms
17 | > Formee is nothing but a framework to help you develop and customize web based forms.
18 | > Crossbrowser: Don't worry about having your form being rendered differently in the major browsers.
19 | > Flexible:It fits into your project, it's flexible enough to adapt to the width you have available for the form.
20 | > Customizable:You can easily change between a stylish form or a minimalist one. It comes with the basic needed for you to put your touch in it.
21 |
22 | **Responsive:** No
23 |
24 | **Website:** http://www.formee.org/
25 |
26 |
27 | ## 1kb grid
28 |
29 | Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn't require a PhD? Meet The 1KB CSS Grid.
30 |
31 | **Responsive:** No
32 |
33 | **Website:** http://www.1kbgrid.com/
34 |
35 | ## 52framework
36 |
37 | With HTML5 support coming so fast, with the tiniest of hacks we are able to use it today in virtually al browsers. Using HTML5 makes for much cleaner mark up. This framework fully uses all the great advantages of HTML5.
38 |
39 | **Responsive:** No
40 |
41 | **Website:** http://52framework.com/
42 |
43 | ## Concise
44 |
45 | > Lightweight, highly customizable, scalable, Sass-based, OOCSS framework. LESS and Stylus ports also available.
46 |
47 | **Responsive:** Yes
48 |
49 | **Website:** http://concisecss.com/
50 |
51 | ## Bootstrap
52 |
53 | > Sleek, intuitive, and powerful front-end framework for faster and easier web development.
54 |
55 | **Responsive:** Yes
56 |
57 | **Website:** http://getbootstrap.com/
58 |
59 | ## 960 Grid System
60 |
61 | > Simple grid system
62 |
63 | The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
64 |
65 | **Responsive:** Yes
66 |
67 | **Website:** http://960.gs/
68 |
69 | ## 99lime HTML KickStart
70 |
71 | > Ultra–Lean HTML Building Blocks for Rapid Website Production.
72 |
73 | HTML KickStart is an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10's of hours on your next web project.
74 |
75 | **Responsive:** Yes
76 |
77 | **Website:** http://www.99lime.com/
78 |
79 | ## Baseline
80 |
81 | > Baseline is a framework built around the idea of a “real” baseline grid.
82 |
83 | Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system.
84 |
85 | **Responsive:** No
86 |
87 | **Website:** http://www.baselinecss.com/
88 |
89 | ## Blueprint
90 |
91 | Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
92 |
93 | **Responsive:** No
94 |
95 | **Website:** http://www.blueprintcss.org/
96 |
97 | ## BlueTrip
98 |
99 | A full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own.
100 |
101 | **Responsive:** No
102 |
103 | **Website:** http://bluetrip.org/
104 |
105 | ## Boilerplate
106 |
107 | > noun standardized pieces of text for use as clauses in contracts or as part of a computer program.
108 |
109 | As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.
110 |
111 | **Responsive:** No
112 |
113 | **Website:** http://code.google.com/p/css-boilerplate/
114 |
115 | ## Cascade Framework
116 |
117 | > Powerful OOCSS front-end framework optimised for performance and flexibility.
118 |
119 | **Responsive:** Yes
120 |
121 | **Website:** http://cascade-framework.com/
122 |
123 | ## Cascade Framework Light
124 |
125 | > An even more lightweight version of Cascade Framework, containing just the bare essentials.
126 |
127 | **Responsive:** Yes
128 |
129 | **Website:** https://github.com/jslegers/cascadeframeworklight/
130 |
131 | ## Easy Framework
132 |
133 | > Your new starting point for every front-end projects!
134 |
135 | Easy is a CSS/HTML/JavaScript framework started as a personal project and then grew into something more. The idea behind it is to reduce the amount of time spent on setting up the basic master HTML template by reusing the same coding techniques.
136 |
137 | **Responsive:** No
138 |
139 | **Website:** http://easyframework.com/
140 |
141 | ## elastiCSS
142 |
143 | A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily
144 |
145 | **Responsive:** No
146 |
147 | **Website:** http://elasticss.com/
148 |
149 | ## Elements
150 |
151 | > Elements is a down to earth CSS framework.
152 |
153 | It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy.
154 |
155 | **Responsive:** No
156 |
157 | **Website:** http://elements.projectdesigns.org/
158 |
159 | ## Emastic
160 |
161 | Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.
162 |
163 | **Responsive:** No
164 |
165 | **Website:** http://code.google.com/p/emastic/
166 |
167 | ## FEM CSS Framework
168 |
169 | FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts. It is based in the 960 Grid System, but with a twist in the philosophy to make it more flexible and faster to play with boxes.
170 |
171 | **Responsive:** No
172 |
173 | **Website:** http://www.frontendmatters.com/projects/fem-css-framework/
174 |
175 | ## Flaminwork
176 |
177 | > The tiny front-end framework for lazy developers.
178 |
179 | **Responsive:** No
180 |
181 | **Website:** http://flaminwork.com/
182 |
183 | ## Fluid
184 |
185 | The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries.
186 |
187 | **Responsive:** No
188 |
189 | **Website:** http://www.designinfluences.com/fluid960gs/
190 |
191 | ## Foundation
192 |
193 | > The most advanced responsive front-end framework in the world.
194 |
195 | Foundation is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself and gives you new tools to quickly customize and build on top of Foundation.
196 |
197 | **Responsive:** Yes
198 |
199 | **Website:** http://foundation.zurb.com/
200 |
201 | ## G5 Framework
202 |
203 | > (X)HTML5, CSS3, PHP & jQuery Front End Framework.
204 |
205 | G5 Framework started as a personal project. In an attempt to speed up workflow, reuse the best coding practices & similar coding techniques, the framework serves as a starter file for new websites.
206 |
207 | **Responsive:** No
208 |
209 | **Website:** http://framework.gregbabula.info/
210 |
211 | ## GroundworkCSS
212 |
213 | A responsive framework with a fractional, semantic grid system built with Sass & Compass.
214 |
215 | **Responsive:** Yes
216 |
217 | **Website:** http://groundwork.sidereel.com/
218 |
219 | ## Gumby
220 |
221 | Gumby is a responsive 960 grid CSS framework. The grid lets you lay out pages quickly and easily in a natural, logical way. The framework is packaged with tons of styles and common interface elements to help you quickly put together functional prototypes.
222 |
223 | **Responsive:** Yes
224 |
225 | **Website:** http://gumbyframework.com
226 |
227 | ## Helium
228 |
229 | Helium is a framework for rapid prototyping and production-ready development. In many ways it's similar to both Twitter Bootstrap and ZURB Foundation - in fact, it uses bits of their code. Unlike either of these two frameworks, however, Helium is designed to be much more lightweight and easier to tinker with.
230 |
231 | **Responsive:** Yes
232 |
233 | **Website:** https://github.com/cbrauckmuller/helium
234 |
235 | ## Ink
236 |
237 | > Ink is a set of tools for quick development of web interfaces.
238 |
239 | It offers a fluid and responsive grid, common interface elements, interactive components, a design-first approach with ease of use and simplicity at its core. Start integrating Ink in your projects and remove the hassle of building the basics, staying free to focus on what's important.
240 |
241 | **Responsive:** Yes
242 |
243 | **Website:** http://ink.sapo.pt/
244 |
245 | **Github:** http://github.com/sapo/ink/
246 |
247 | ## Kickoff
248 |
249 | > A lightweight front-end framework for creating scalable, responsive sites
250 |
251 | Kickoff is an actively maintained front-end framework, created by Zander Martineau and Ashley Nolan.
252 |
253 | The framework is not meant to be too prescriptive - we don't want to force developers into a certain coding style - and so can be used as a starting point for any type of project.
254 |
255 | **Responsive:** Yes
256 |
257 | **Website:** http://tmwagency.github.io/kickoff/
258 |
259 | **Github:** https://github.com/tmwagency/kickoff
260 |
261 | ## Kube
262 |
263 | > CSS-framework for professional developers.
264 |
265 | Minimal and enough. Adaptive and responsive. Revolution grid and beautiful typography. No imposed styles and freedom.
266 |
267 | **Responsive:** Yes
268 |
269 | **Website:** http://imperavi.com/kube/
270 |
271 | ## Layers
272 |
273 | > Lightweight. Unobtrusive. Style-agnostic. Build your look on the web, not Twitter's – and build it fluid.
274 |
275 | Layers CSS is aimed for practical use and comes with zero bullshit.
276 |
277 | **Responsive:** Yes
278 |
279 | **Website:** http://eiskis.net/layers/
280 |
281 | **Bitbucket:** https://bitbucket.org/Eiskis/layers-css/src/tip/source/layers/
282 |
283 | ## Less Framework
284 |
285 | > An adaptive CSS grid system.
286 |
287 | Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
288 |
289 | **Responsive:** Yes
290 |
291 | **Website:** http://lessframework.com/
292 |
293 | ## Lovely CSS Framework
294 |
295 | > The Lovely CSS Framework is a simple and straight forward way to easily deploy an XHTML/CSS site.
296 |
297 | Based on a simple 960px wide grid system, featuring multiple column layouts, and various pluggable add-ons.
298 |
299 | **Responsive:** No
300 |
301 | **Website:** http://code.google.com/p/lovely-css/
302 |
303 | ## Malo
304 |
305 | > Malo is ultra small css library for building web sites.
306 |
307 | Malo is ultra small css library for building web sites. It is meant to be structural base for small or medium web sites. Malo derives from it’s bigger brother Emastic CSS Framework.
308 |
309 | **Responsive:** No
310 |
311 | **Website:** http://code.google.com/p/malo/
312 |
313 | ## PureCSS
314 |
315 | > A set of small, responsive CSS modules that you can use in every web project, built by the YUI team at Yahoo!.
316 |
317 | PureCSS is a collection of responsive 'drop-ins' built with - you guessed it! - pure CSS! The PureCSS website also has a skin builder on their website, so you're restricted by default colors no more.
318 |
319 | **Responsive:** Yes
320 |
321 | **Website:** http://purecss.io/
322 |
323 | ## Ribs
324 |
325 | > The evolution of Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.
326 |
327 | Ribs is a modernised, maintained and feature rich fork of the original Skeleton framework.
328 |
329 | **Responsive:** Yes
330 |
331 | **Website:** https://github.com/nickpack/Ribs
332 |
333 | ## RÖCSSTI
334 |
335 | RÖCSSTI is a CSS micro-framework which includes accessibility notions, typo settings, IE fixes, reusable classes, ect. It is the little brother of [KNACSS](http://www.knacss.com/). It also has LESS and Sass versions.
336 |
337 | **Responsive:** Yes
338 |
339 | **Website:** http://rocssti.nicolas-hoffmann.net/ & https://github.com/nico3333fr/ROCSSTI
340 |
341 | ## Semantic UI
342 |
343 | > UI is the vocabulary of the web.
344 |
345 | Semantic empowers designers and developers by creating a language for sharing UI.
346 |
347 | Pure is ridiculously tiny. The entire set of modules clocks in at 4.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.
348 |
349 | **Responsive:** Yes
350 |
351 | **Website:** http://semantic-ui.com/
352 |
353 | **Github:** https://github.com/jlukic/Semantic-UI
354 |
355 | ## Crumpet
356 |
357 | > A Deliciously Simple SASS/SCSS Responsive Framework
358 |
359 | Everything is straight forward, all of the code is commented and gives you instructions on how to use Crumpet, so you can spend all your time in the code editor.
360 |
361 | **Responsive:** Yes
362 |
363 | **Website:** https://github.com/AdamMarsBar/Crumpet
364 |
365 |
366 | ## Jeet
367 |
368 | > A CSS Grid System for Humans
369 |
370 | Jeet allows you to express your page grid the same way a human would describe it. No more needlessly nesting elements. No more rigid twelve column rules. Enjoy building faster with less code, and more flexibility with Jeet.
371 |
372 | **Responsive:** Yes
373 |
374 | **Website:** http://jeet.gs/
375 |
376 | ## Skeleton
377 |
378 | > A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.
379 |
380 | Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
381 |
382 | **Responsive:** Yes
383 |
384 | **Website:** http://www.getskeleton.com/
385 |
386 | ## The Golden Grid
387 |
388 | The Golden Grid is a web grid system. It 's a product of the search for the perfect modern grid system. It 's meant to be a CSS tool for grid based web sites.
389 |
390 | **Responsive:** No
391 |
392 | **Website:** http://code.google.com/p/the-golden-grid/
393 |
394 | ## Unsemantic
395 |
396 | Unsemantic is a fluid grid system that is the successor to the [960 Grid System](http://960.gs/). It works in a similar way, but instead of being a set number of columns, it's entirely based on percentages.
397 |
398 | **Responsive:** Yes
399 |
400 | **Website:** http://unsemantic.com/
401 |
402 | ## xCSS
403 |
404 | > Object-Oriented CSS Framework
405 |
406 | xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features.
407 |
408 | **Responsive:** No
409 |
410 | **Website:** http://xcss.antpaw.org/
411 |
412 | ## YAML
413 |
414 | > “Yet Another Multicolumn Layout” (YAML)
415 |
416 | YAML is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
417 |
418 | **Responsive:** Yes
419 |
420 | **Website:** http://www.yaml.de/
421 |
422 | ## YUI CSS
423 |
424 | > Simple CSS for the web
425 |
426 | The foundational YUI CSS is an extremely lightweight layer of responsive CSS for your projects. It offers a customizable responsive grid , along with styling for forms, tables, menus, popovers, notifications, images and more. Plays nice with YUI's JavaScript Framework.
427 |
428 | **Responsive:** Yes
429 |
430 | **Website:** http://yuilibrary.com/
431 |
432 | ## Susy
433 |
434 | > Your markup. Your design. Our math.
435 |
436 | The web is a responsive place, from your lithe & lively development process to your end-user's super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.
437 |
438 | **Responsive:** Yes
439 |
440 | **Website:** http://susy.oddbird.net/
441 |
442 | **Github:** https://github.com/ericam/susy/
443 |
444 | ## inuit.css
445 |
446 | > A powerful, scalable, Sass-based, [BEM](http://bem.info/), OOCSS framework.
447 |
448 | inuit.css is a Sass based, Object Oriented framework that is full of objects and abstractions. inuit.css provides little-to-no design which means no undoing things, no deleting CSS and no adhering to other peoples’ design decisions.
449 |
450 | **Responsive:** Yes
451 |
452 | **Website:** http://inuitcss.com/
453 |
454 | **Github:** https://github.com/csswizardry/inuit.css/
455 |
456 | ## Bijou
457 |
458 | > A beautiful CSS framework under 2kb
459 |
460 | A small, yet beautiful CSS framework that weighs in under 2kb.
461 |
462 | **Responsive:** Yes
463 |
464 | **Website:** http://andhart.github.io/bijou
465 |
466 | **Github:** https://github.com/andhart/bijou
467 |
468 | ## bootmetro
469 |
470 | > metro style web framework
471 |
472 | simple and flexible web framework to create elegant and modern web applications with the same look & feel of Windows 8.
473 |
474 | **Responsive:** Yes
475 |
476 | **Website:** http://aozora.github.io/bootmetro/
477 |
478 | **Github:** https://github.com/aozora/bootmetro
479 |
480 | ## StackLayout
481 |
482 | > A flexible width, component based CSS layout system
483 |
484 | StackLayout makes it incredibly easy to use semantic class names for particular areas of your site, such as the main navigation or a thumbnail gallery, or for the entire site as part of your deployment process.
485 |
486 | **Responsive:** Yes
487 |
488 | **Website:** http://www.stacklayout.com/
489 |
490 | **Github:** https://github.com/camslice/StackLayout
491 |
492 | ## IVORY Framework
493 |
494 | > imple, Flexible, Powerful
495 |
496 | Responsive front-end web framework. Makes your front-end development faster and easier. Takes you all theway from 1200PX on down to 320PX.
497 |
498 | **Responsive:** Yes
499 |
500 | **Website:** http://weice.in/ivory/
501 |
502 | **Github:** https://github.com/kanthvallampati/IVORY
503 |
--------------------------------------------------------------------------------
/Programming/Web Development/Frontend/javascript-frameworks.md:
--------------------------------------------------------------------------------
1 | Javascript Frameworks
2 | ====================
3 |
4 | A collection of best front-end frameworks for faster and easier web development.
5 |
6 | You can **Compare** all front-end frameworks here: http://usablica.github.com/front-end-frameworks/compare.html
7 |
8 | ## IceCream
9 |
10 | > Simple and light responsive grid system
11 |
12 | **Responsive:** Yes
13 |
14 | **Website:** http://html5-ninja.com/icecream
15 |
16 | ## Formee Framework for forms
17 | > Formee is nothing but a framework to help you develop and customize web based forms.
18 | > Crossbrowser: Don't worry about having your form being rendered differently in the major browsers.
19 | > Flexible:It fits into your project, it's flexible enough to adapt to the width you have available for the form.
20 | > Customizable:You can easily change between a stylish form or a minimalist one. It comes with the basic needed for you to put your touch in it.
21 |
22 | **Responsive:** No
23 |
24 | **Website:** http://www.formee.org/
25 |
26 |
27 | ## 1kb grid
28 |
29 | Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn't require a PhD? Meet The 1KB CSS Grid.
30 |
31 | **Responsive:** No
32 |
33 | **Website:** http://www.1kbgrid.com/
34 |
35 | ## 52framework
36 |
37 | With HTML5 support coming so fast, with the tiniest of hacks we are able to use it today in virtually al browsers. Using HTML5 makes for much cleaner mark up. This framework fully uses all the great advantages of HTML5.
38 |
39 | **Responsive:** No
40 |
41 | **Website:** http://52framework.com/
42 |
43 | ## Concise
44 |
45 | > Lightweight, highly customizable, scalable, Sass-based, OOCSS framework. LESS and Stylus ports also available.
46 |
47 | **Responsive:** Yes
48 |
49 | **Website:** http://concisecss.com/
50 |
51 | ## Bootstrap
52 |
53 | > Sleek, intuitive, and powerful front-end framework for faster and easier web development.
54 |
55 | **Responsive:** Yes
56 |
57 | **Website:** http://getbootstrap.com/
58 |
59 | ## 960 Grid System
60 |
61 | > Simple grid system
62 |
63 | The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
64 |
65 | **Responsive:** Yes
66 |
67 | **Website:** http://960.gs/
68 |
69 | ## 99lime HTML KickStart
70 |
71 | > Ultra–Lean HTML Building Blocks for Rapid Website Production.
72 |
73 | HTML KickStart is an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10's of hours on your next web project.
74 |
75 | **Responsive:** Yes
76 |
77 | **Website:** http://www.99lime.com/
78 |
79 | ## Baseline
80 |
81 | > Baseline is a framework built around the idea of a “real” baseline grid.
82 |
83 | Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system.
84 |
85 | **Responsive:** No
86 |
87 | **Website:** http://www.baselinecss.com/
88 |
89 | ## Blueprint
90 |
91 | Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
92 |
93 | **Responsive:** No
94 |
95 | **Website:** http://www.blueprintcss.org/
96 |
97 | ## BlueTrip
98 |
99 | A full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own.
100 |
101 | **Responsive:** No
102 |
103 | **Website:** http://bluetrip.org/
104 |
105 | ## Boilerplate
106 |
107 | > noun standardized pieces of text for use as clauses in contracts or as part of a computer program.
108 |
109 | As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.
110 |
111 | **Responsive:** No
112 |
113 | **Website:** http://code.google.com/p/css-boilerplate/
114 |
115 | ## Cascade Framework
116 |
117 | > Powerful OOCSS front-end framework optimised for performance and flexibility.
118 |
119 | **Responsive:** Yes
120 |
121 | **Website:** http://cascade-framework.com/
122 |
123 | ## Cascade Framework Light
124 |
125 | > An even more lightweight version of Cascade Framework, containing just the bare essentials.
126 |
127 | **Responsive:** Yes
128 |
129 | **Website:** https://github.com/jslegers/cascadeframeworklight/
130 |
131 | ## Easy Framework
132 |
133 | > Your new starting point for every front-end projects!
134 |
135 | Easy is a CSS/HTML/JavaScript framework started as a personal project and then grew into something more. The idea behind it is to reduce the amount of time spent on setting up the basic master HTML template by reusing the same coding techniques.
136 |
137 | **Responsive:** No
138 |
139 | **Website:** http://easyframework.com/
140 |
141 | ## elastiCSS
142 |
143 | A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily
144 |
145 | **Responsive:** No
146 |
147 | **Website:** http://elasticss.com/
148 |
149 | ## Elements
150 |
151 | > Elements is a down to earth CSS framework.
152 |
153 | It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy.
154 |
155 | **Responsive:** No
156 |
157 | **Website:** http://elements.projectdesigns.org/
158 |
159 | ## Emastic
160 |
161 | Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.
162 |
163 | **Responsive:** No
164 |
165 | **Website:** http://code.google.com/p/emastic/
166 |
167 | ## FEM CSS Framework
168 |
169 | FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts. It is based in the 960 Grid System, but with a twist in the philosophy to make it more flexible and faster to play with boxes.
170 |
171 | **Responsive:** No
172 |
173 | **Website:** http://www.frontendmatters.com/projects/fem-css-framework/
174 |
175 | ## Flaminwork
176 |
177 | > The tiny front-end framework for lazy developers.
178 |
179 | **Responsive:** No
180 |
181 | **Website:** http://flaminwork.com/
182 |
183 | ## Fluid
184 |
185 | The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries.
186 |
187 | **Responsive:** No
188 |
189 | **Website:** http://www.designinfluences.com/fluid960gs/
190 |
191 | ## Foundation
192 |
193 | > The most advanced responsive front-end framework in the world.
194 |
195 | Foundation is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself and gives you new tools to quickly customize and build on top of Foundation.
196 |
197 | **Responsive:** Yes
198 |
199 | **Website:** http://foundation.zurb.com/
200 |
201 | ## G5 Framework
202 |
203 | > (X)HTML5, CSS3, PHP & jQuery Front End Framework.
204 |
205 | G5 Framework started as a personal project. In an attempt to speed up workflow, reuse the best coding practices & similar coding techniques, the framework serves as a starter file for new websites.
206 |
207 | **Responsive:** No
208 |
209 | **Website:** http://framework.gregbabula.info/
210 |
211 | ## GroundworkCSS
212 |
213 | A responsive framework with a fractional, semantic grid system built with Sass & Compass.
214 |
215 | **Responsive:** Yes
216 |
217 | **Website:** http://groundwork.sidereel.com/
218 |
219 | ## Gumby
220 |
221 | Gumby is a responsive 960 grid CSS framework. The grid lets you lay out pages quickly and easily in a natural, logical way. The framework is packaged with tons of styles and common interface elements to help you quickly put together functional prototypes.
222 |
223 | **Responsive:** Yes
224 |
225 | **Website:** http://gumbyframework.com
226 |
227 | ## Helium
228 |
229 | Helium is a framework for rapid prototyping and production-ready development. In many ways it's similar to both Twitter Bootstrap and ZURB Foundation - in fact, it uses bits of their code. Unlike either of these two frameworks, however, Helium is designed to be much more lightweight and easier to tinker with.
230 |
231 | **Responsive:** Yes
232 |
233 | **Website:** https://github.com/cbrauckmuller/helium
234 |
235 | ## Ink
236 |
237 | > Ink is a set of tools for quick development of web interfaces.
238 |
239 | It offers a fluid and responsive grid, common interface elements, interactive components, a design-first approach with ease of use and simplicity at its core. Start integrating Ink in your projects and remove the hassle of building the basics, staying free to focus on what's important.
240 |
241 | **Responsive:** Yes
242 |
243 | **Website:** http://ink.sapo.pt/
244 |
245 | **Github:** http://github.com/sapo/ink/
246 |
247 | ## Kickoff
248 |
249 | > A lightweight front-end framework for creating scalable, responsive sites
250 |
251 | Kickoff is an actively maintained front-end framework, created by Zander Martineau and Ashley Nolan.
252 |
253 | The framework is not meant to be too prescriptive - we don't want to force developers into a certain coding style - and so can be used as a starting point for any type of project.
254 |
255 | **Responsive:** Yes
256 |
257 | **Website:** http://tmwagency.github.io/kickoff/
258 |
259 | **Github:** https://github.com/tmwagency/kickoff
260 |
261 | ## Kube
262 |
263 | > CSS-framework for professional developers.
264 |
265 | Minimal and enough. Adaptive and responsive. Revolution grid and beautiful typography. No imposed styles and freedom.
266 |
267 | **Responsive:** Yes
268 |
269 | **Website:** http://imperavi.com/kube/
270 |
271 | ## Layers
272 |
273 | > Lightweight. Unobtrusive. Style-agnostic. Build your look on the web, not Twitter's – and build it fluid.
274 |
275 | Layers CSS is aimed for practical use and comes with zero bullshit.
276 |
277 | **Responsive:** Yes
278 |
279 | **Website:** http://eiskis.net/layers/
280 |
281 | **Bitbucket:** https://bitbucket.org/Eiskis/layers-css/src/tip/source/layers/
282 |
283 | ## Less Framework
284 |
285 | > An adaptive CSS grid system.
286 |
287 | Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
288 |
289 | **Responsive:** Yes
290 |
291 | **Website:** http://lessframework.com/
292 |
293 | ## Lovely CSS Framework
294 |
295 | > The Lovely CSS Framework is a simple and straight forward way to easily deploy an XHTML/CSS site.
296 |
297 | Based on a simple 960px wide grid system, featuring multiple column layouts, and various pluggable add-ons.
298 |
299 | **Responsive:** No
300 |
301 | **Website:** http://code.google.com/p/lovely-css/
302 |
303 | ## Malo
304 |
305 | > Malo is ultra small css library for building web sites.
306 |
307 | Malo is ultra small css library for building web sites. It is meant to be structural base for small or medium web sites. Malo derives from it’s bigger brother Emastic CSS Framework.
308 |
309 | **Responsive:** No
310 |
311 | **Website:** http://code.google.com/p/malo/
312 |
313 | ## PureCSS
314 |
315 | > A set of small, responsive CSS modules that you can use in every web project, built by the YUI team at Yahoo!.
316 |
317 | PureCSS is a collection of responsive 'drop-ins' built with - you guessed it! - pure CSS! The PureCSS website also has a skin builder on their website, so you're restricted by default colors no more.
318 |
319 | **Responsive:** Yes
320 |
321 | **Website:** http://purecss.io/
322 |
323 | ## Ribs
324 |
325 | > The evolution of Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.
326 |
327 | Ribs is a modernised, maintained and feature rich fork of the original Skeleton framework.
328 |
329 | **Responsive:** Yes
330 |
331 | **Website:** https://github.com/nickpack/Ribs
332 |
333 | ## RÖCSSTI
334 |
335 | RÖCSSTI is a CSS micro-framework which includes accessibility notions, typo settings, IE fixes, reusable classes, ect. It is the little brother of [KNACSS](http://www.knacss.com/). It also has LESS and Sass versions.
336 |
337 | **Responsive:** Yes
338 |
339 | **Website:** http://rocssti.nicolas-hoffmann.net/ & https://github.com/nico3333fr/ROCSSTI
340 |
341 | ## Semantic UI
342 |
343 | > UI is the vocabulary of the web.
344 |
345 | Semantic empowers designers and developers by creating a language for sharing UI.
346 |
347 | Pure is ridiculously tiny. The entire set of modules clocks in at 4.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.
348 |
349 | **Responsive:** Yes
350 |
351 | **Website:** http://semantic-ui.com/
352 |
353 | **Github:** https://github.com/jlukic/Semantic-UI
354 |
355 | ## Crumpet
356 |
357 | > A Deliciously Simple SASS/SCSS Responsive Framework
358 |
359 | Everything is straight forward, all of the code is commented and gives you instructions on how to use Crumpet, so you can spend all your time in the code editor.
360 |
361 | **Responsive:** Yes
362 |
363 | **Website:** https://github.com/AdamMarsBar/Crumpet
364 |
365 |
366 | ## Jeet
367 |
368 | > A CSS Grid System for Humans
369 |
370 | Jeet allows you to express your page grid the same way a human would describe it. No more needlessly nesting elements. No more rigid twelve column rules. Enjoy building faster with less code, and more flexibility with Jeet.
371 |
372 | **Responsive:** Yes
373 |
374 | **Website:** http://jeet.gs/
375 |
376 | ## Skeleton
377 |
378 | > A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.
379 |
380 | Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
381 |
382 | **Responsive:** Yes
383 |
384 | **Website:** http://www.getskeleton.com/
385 |
386 | ## The Golden Grid
387 |
388 | The Golden Grid is a web grid system. It 's a product of the search for the perfect modern grid system. It 's meant to be a CSS tool for grid based web sites.
389 |
390 | **Responsive:** No
391 |
392 | **Website:** http://code.google.com/p/the-golden-grid/
393 |
394 | ## Unsemantic
395 |
396 | Unsemantic is a fluid grid system that is the successor to the [960 Grid System](http://960.gs/). It works in a similar way, but instead of being a set number of columns, it's entirely based on percentages.
397 |
398 | **Responsive:** Yes
399 |
400 | **Website:** http://unsemantic.com/
401 |
402 | ## xCSS
403 |
404 | > Object-Oriented CSS Framework
405 |
406 | xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features.
407 |
408 | **Responsive:** No
409 |
410 | **Website:** http://xcss.antpaw.org/
411 |
412 | ## YAML
413 |
414 | > “Yet Another Multicolumn Layout” (YAML)
415 |
416 | YAML is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
417 |
418 | **Responsive:** Yes
419 |
420 | **Website:** http://www.yaml.de/
421 |
422 | ## YUI CSS
423 |
424 | > Simple CSS for the web
425 |
426 | The foundational YUI CSS is an extremely lightweight layer of responsive CSS for your projects. It offers a customizable responsive grid , along with styling for forms, tables, menus, popovers, notifications, images and more. Plays nice with YUI's JavaScript Framework.
427 |
428 | **Responsive:** Yes
429 |
430 | **Website:** http://yuilibrary.com/
431 |
432 | ## Susy
433 |
434 | > Your markup. Your design. Our math.
435 |
436 | The web is a responsive place, from your lithe & lively development process to your end-user's super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.
437 |
438 | **Responsive:** Yes
439 |
440 | **Website:** http://susy.oddbird.net/
441 |
442 | **Github:** https://github.com/ericam/susy/
443 |
444 | ## inuit.css
445 |
446 | > A powerful, scalable, Sass-based, [BEM](http://bem.info/), OOCSS framework.
447 |
448 | inuit.css is a Sass based, Object Oriented framework that is full of objects and abstractions. inuit.css provides little-to-no design which means no undoing things, no deleting CSS and no adhering to other peoples’ design decisions.
449 |
450 | **Responsive:** Yes
451 |
452 | **Website:** http://inuitcss.com/
453 |
454 | **Github:** https://github.com/csswizardry/inuit.css/
455 |
456 | ## Bijou
457 |
458 | > A beautiful CSS framework under 2kb
459 |
460 | A small, yet beautiful CSS framework that weighs in under 2kb.
461 |
462 | **Responsive:** Yes
463 |
464 | **Website:** http://andhart.github.io/bijou
465 |
466 | **Github:** https://github.com/andhart/bijou
467 |
468 | ## bootmetro
469 |
470 | > metro style web framework
471 |
472 | simple and flexible web framework to create elegant and modern web applications with the same look & feel of Windows 8.
473 |
474 | **Responsive:** Yes
475 |
476 | **Website:** http://aozora.github.io/bootmetro/
477 |
478 | **Github:** https://github.com/aozora/bootmetro
479 |
480 | ## StackLayout
481 |
482 | > A flexible width, component based CSS layout system
483 |
484 | StackLayout makes it incredibly easy to use semantic class names for particular areas of your site, such as the main navigation or a thumbnail gallery, or for the entire site as part of your deployment process.
485 |
486 | **Responsive:** Yes
487 |
488 | **Website:** http://www.stacklayout.com/
489 |
490 | **Github:** https://github.com/camslice/StackLayout
491 |
492 | ## IVORY Framework
493 |
494 | > imple, Flexible, Powerful
495 |
496 | Responsive front-end web framework. Makes your front-end development faster and easier. Takes you all theway from 1200PX on down to 320PX.
497 |
498 | **Responsive:** Yes
499 |
500 | **Website:** http://weice.in/ivory/
501 |
502 | **Github:** https://github.com/kanthvallampati/IVORY
503 |
--------------------------------------------------------------------------------
/Programming/Web Development/README.md:
--------------------------------------------------------------------------------
1 | Learning Web Development
2 | ============================
3 |
--------------------------------------------------------------------------------
/Programming/courses.md:
--------------------------------------------------------------------------------
1 | CS-Courses
2 | ==========
3 |
4 | Template for learning CS online which would approximately equal to a Bachelors in CS. Forked from http://blog.agupieware.com/2014/06/online-learning-intensive-bachelors.html
5 |
6 | This template consists of intro courses, core courses and advanced courses, all freely available from some of the world's best universities.
7 |
8 | Template for learning CS online which would approximately equal to a Bachelors in CS. Forked from http://blog.agupieware.com/2014/06/online-learning-intensive-bachelors.html
9 |
10 |
11 | There are essentially four major parts to any bachelor’s level course of study, in any given field: pre-requisites, core requirements, concentration requirements and electives.
12 |
13 | Pre-requisites are what you need to know before you even begin. For many courses of study, there are no pre-requisites, and no specialized prior knowledge is required or presumed on the part of the student, since the introductory core requirements themselves provide students with the requisite knowledge and skills.
14 |
15 | Core requirements are courses that anyone in a given field is required to take, no matter what their specialization or specific areas of interest within the field may be. These sorts of classes provide a general base-level knowledge of the field that can then be built upon in the study of more advanced and specialized topics.
16 |
17 | Concentration requirements are classes that are required as part of a given concentration, focus or specialization within an overall curriculum. For example, all students who major in computer science at a given university may be required to take two general introductory courses in the field, but students who decide to concentrate on cryptography may be required to take more math classes, while students interested in electrical engineering may take required courses on robotics, while others interested in software development may be required to study programming methodologies and so on.
18 |
19 | Finally, electives are courses within the overall curriculum that individuals may decide to take at will, in accordance with their own particular interests. Some people may prefer to take electives which reenforce sub-fields related to their concentration, while others may elect to sign on for courses that may only be tangentially related to their concentration.
20 |
21 | Our hypothetical curriculum will simplify this model. We will assume no prerequisites are necessary other than an interest in learning the material and a basic high school education. Our curriculum will also not offer any concentration tracks in the traditional sense, as that would require specialized resources that are not within the scope of our current domain. Instead, our planned curriculum shall provide for introductory courses, general core requirements, and a choice of electives that may also serve as a basis for further concentration studies.
22 |
23 | For Coursera courses, you don't have to sign up to view the lectures.
24 |
25 |
26 | ###Intro Courses
27 |
28 |
29 | * Intro to CS
30 | * [Introduction to Computer Science and Programming](http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-00sc-introduction-to-computer-science-and-programming-spring-2011/): MIT OCW
31 | * [Intensive Introduction to Computer Science](http://www.extension.harvard.edu/open-learning-initiative/intensive-introduction-computer-science): Harvard
32 | * [Introduction to Computer Science and Programming Methodology](http://see.stanford.edu/see/courseInfo.aspx?coll=824a47e1-135f-4508-a5aa-866adcae1111): Stanford
33 | * [Programming Abstractions (Second Course in Unit)](http://www.youtube.com/view_play_list?p=FE6E58F856038C69): Stanford
34 |
35 | * Mathematics for CS
36 | * Mathematics for Computer Science: MIT
37 | * Discrete Mathematics: ArsDigita
38 |
39 | * Programming:
40 | * Programming 1: University of Toronto
41 | * Programming 2: University of Toronto
42 |
43 | * Theory of Computation (Intro):
44 | * Introduction to the Theory of Computation: Stonehill
45 | * Principles of Computing: Rice
46 |
47 | * Data Structures and Algorithms:
48 | * Introduction to Data Structures and Algorithms: UNSW
49 | * Introduction to Algorithms: MIT OCW
50 |
51 | ###Core Courses
52 |
53 |
54 | * Theory of Computation (Core):
55 | * Theory of Computation: UC Davis
56 | * Theory of Computation: IIT Kanpur
57 | * Algorithms and Data Structures:
58 | * Efficient Algorithms and Intractable Problems: Berkeley
59 | * Data Structures: Berkeley
60 | * Mathematics:
61 | * Linear Algebra through Computer Science Applications: Brown
62 | * Discrete Math and Probability Theory: Berkeley
63 | * Operating Systems:
64 | * Operating Systems and Systems Programming: Berkeley
65 | * Introduction to Linux: edX
66 | * Computer Programming:
67 | * Programming Paradigms: Stanford
68 | * Object Oriented Programming: MIT
69 | * Object Oriented Programming in C++: ITU
70 | * Software Engineering:
71 | * Software Engineering: Berkeley
72 | * Elements of Software Construction: MIT
73 | * Computer Architecture:
74 | * Computer Architecture: Carnegie Mellon
75 | * Computer Architecture: Princeton
76 | * Data Management:
77 | * Introduction to Databases: Stanford
78 | * Introduction to Modern Database Systems: Saylor
79 | * Networking and Data Communications:
80 | * Fundamentals of Computer Networking: Manhattan College
81 | * Introduction to Data Communications: Thammasat University
82 | * Cryptography and Security:
83 | * Introduction to Cryptography: Ruhr University
84 | * Introduction to IT Security: Thammasat University
85 | * Artificial Intelligence:
86 | * Introduction to Artificial Intelligence: Berkeley
87 |
88 | ###Intermediate and Advanced Courses
89 |
90 |
91 | * Algorithms and Data Structures:
92 | * Advanced Data Structures: MIT
93 | * Analytic Combinatorics: Princeton
94 | * Systems:
95 | * Computer System Engineering: MIT
96 | * The Hardware/Software Interface: University of Washington
97 | * Programming:
98 | * Design in Computing: UNSW
99 | * Principles of Programming Languages: IIT
100 | * C++ for C Programmers: UC Santa Cruz
101 | * Heterogeneous Parallel Programming: University of Illinois
102 | * Compilers: Stanford
103 | * Software Engineering:
104 | * Mobile Software Engineering: Harvard
105 | * Software Engineering for Scientific Computing: Berkeley
106 | * [Engineering Software as a Service Part 1](https://www.edx.org/course/uc-berkeleyx/uc-berkeleyx-cs169-1x-engineering-1377#.VBcVCcERbdk): UC Berkeley
107 | * [Engineering Software as a Service Part 2](https://www.edx.org/course/uc-berkeleyx/uc-berkeleyx-cs169-2x-engineering-1379#.VBcU5MERbdk): UC Berkeley
108 | * Mobile App Development:
109 | * Building Mobile Applications: Harvard
110 | * iPhone Application Development: ITU
111 | * Android Application Development: ITU
112 | * Web Development:
113 | * Building Dynamic Websites: Harvard
114 | * Databases and Data Management:
115 | * Introduction to Database Management Systems: KU Leuven University
116 | * Database Management Systems: Ars Digita
117 | * Advanced Databases: Saylor
118 | * Security:
119 | * Security and Cryptography: Thammasat University
120 | * Designing and Executing Information Security Strategies: University of Washington
121 | * Information Security and Risk Management in Context: University of Washington
122 | * Cryptography:
123 | * Cryptography 1: Stanford
124 | * Cryptography 2: Stanford
125 | * Bilinear Pairings in Cryptography: BIU
126 | * Artificial Intelligence and Machine Learning:
127 | * [Learning From Data](https://www.edx.org/course/caltechx/caltechx-cs1156x-learning-data-2516#.VBcWDcERbdk): Caltech
128 | * Artificial Intelligence: HRW
129 | * Artificial Intelligence: Berkeley
130 | * Machine Learning: Stanford
131 | * [Social Network Analysis](https://www.coursera.org/course/sna): University of Michigan
132 | * Natural Language Processing:
133 | * Natural Language Processing: Columbia
134 | * Natural Language Processing: Stanford
135 | * Digital Media:
136 | * Digital Image Processing: Purdue
137 | * Computer Graphics: Berkeley
138 | * Computer Graphics: ITU
139 | * Networking and Communications:
140 | * Computer Networks: University of Washington
141 | * Internet Technologies and Applications: Thammasat University
142 | * Statistics and Probability:
143 | * Statistics and Probability: Harvard
144 | * Probabilistic Systems Analysis and Applied Probability: MIT
145 | * Statistical Inference: Johns Hopkins
146 | * Data Analysis and Statistical Inference: Duke
147 | * Data Sciences:
148 | * [Introduction to Data Sciences](https://www.coursera.org/course/datasci): University of Washington
149 | * [Web Intelligence and Big Data](https://www.coursera.org/course/bigdata): IIT Delhi
150 |
151 |
--------------------------------------------------------------------------------
/Programming/elixir.md:
--------------------------------------------------------------------------------
1 | #Elixir
2 | wont run out of stack levels unless you run out of memory
3 |
4 | works with OTP
5 | ##Elixir
6 | elixir built on erlang vm
7 | compiles to BEAM bytecode
8 | Erlang has fault-tolerant ("let it crash" error)
9 | Pattern matching
10 | Recursion
11 | Immutable Data Structures
12 | Adds more data types to erlang
13 | All data is immutable
14 |
15 | ##Atoms
16 | atms are just Sybmols in Ruby
17 | `:hello_world`
18 | `:a`
19 | `true #booleans are also atoms`
20 |
21 | ##Tuples
22 | Ordered collection of elements
23 |
24 | ```
25 | #tuple
26 | {:one, :two, :three}
27 |
28 |
29 | elem({1, 2, 3}, 0) # => 1
30 |
31 | ```
32 |
33 | ##Lists
34 | No array type, only linked lists
35 | Each item in the list contains value, along with pointer
36 |
37 | ```
38 | letters = [:a, :b, :c]
39 |
40 | [:d | letters] #=> [:d, :a, :b, c:]
41 | ```
42 | ##String(ish) Types
43 | No true string type
44 | represents strings as binaries
45 | Lists can be used to represent string data
46 | ```
47 | "" # = utf-8 binary
48 | '' # = char list
49 | ?a # = character code
50 | ```
51 |
52 | ##Modules
53 | everything is stored in modules
54 |
55 | ```
56 | def moduleping do
57 | #todo
58 | end
59 | ```
60 |
61 | ##Functions
62 | In elixir function are identified by name and arity
63 |
64 | ```
65 | #add/2 has two clauses
66 | def add(0, 0) do: 0
67 | def add(x, y) do: x + y
68 |
69 | #add/3 has one clause
70 | def add(x, y, z) do
71 | x +y +z
72 | end
73 | ```
74 |
75 | ##Pattern Matching
76 | The equal sign isn't assignment, it's a challenge to make both sides equal
77 |
78 | ```
79 | :a = :a #=> a
80 | :a = :b #=> ** (MethError) match of right hand side value: :b
81 |
82 | letter = :a #=> :a
83 | letter #=> :a
84 | ```
85 |
86 | matching tuples
87 |
88 | ```
89 | {:ok, foo} = {:ok, "foo bar baz"}
90 | foo #=> "foo bar baz"
91 |
92 | {:ok, foo} = {:error, :crashed} #=> ** (MatchError) no match of right hand side value: {:error, crashed}
93 | ```
94 |
95 | matching lists
96 | ```
97 | [head|tail] = [1,2,3]
98 | head #=> 1
99 | tail #=>[2,3]
100 |
101 | [first, second, third] = [1,2,3]
102 | second #=> 2
103 |
104 | [one, two] = [1,2,3] #=> ** (MatchError) no match of right hand side value: [1,2,3]
105 |
106 | [first, second |rest] = [1, 2, 3]
107 | second #=> 2
108 | ```
109 |
110 | ###functions
111 | ```
112 | def fib(0) do 0 end
113 | def fib(1) do 1 end
114 | def fib(n) do fib(n-1) + fib(n-2) end
115 | ```
116 |
117 | ##Variables
118 | variables cannot be re-bound to new values during a match
119 |
120 | ```
121 | {num, num} = {1, 1}
122 | {num, num} = {1, 2} #=> ** No match of right hand value
123 | ```
124 |
125 | ###underscore variable can be used in place of a normal variable in a pattern
126 |
127 | ```
128 | {_, _} = {1, 1}
129 | {_, _} = {1, 2}
130 | {num, num} = {1, 2}
131 | ```
132 |
133 | ###the ^ Variable prefix
134 | ```
135 | username = "Jose"
136 |
137 | {:name, ^username} = {:name, "Joe"} #forces it to retain Jose and not be re-assigned, throws error
138 | {:name, ^username} {:name, "Jose"}
139 | ```
140 |
141 | ##First Class Functions
142 | Two Types
143 | - Names -- does not inherit scope
144 | - Anonymous -- inherits the scope of wherever it was defined functions
145 | Both can be referenced and passed around
146 |
147 | ####Named
148 | ```
149 | defmodule Hello
150 | def greet("SunJug") do "hello everyone!" end
151 | def greet(name) do "hello " <> name end
152 | end
153 |
154 | #references the function
155 | hello = &hello.greet/1 #=> #function<6.90072147/1 in :erl_eval.expr/5>
156 |
157 | hello.("SunJUG") #=> hello everyone!
158 | Hello.greet("Jose") #=> hello Jose
159 | ```
160 |
161 | ####Anonymous
162 | ```
163 | special_greetings = "Hello everyone!"
164 |
165 | #inherits scope creating closure
166 |
167 | greet = fn
168 | "SunJug" -> special_greeting
169 | name -> "hello " <> name
170 | end
171 |
172 | greet #=> #Function...
173 |
174 | greet.("SunJug")
175 | ```
176 |
177 | ##Recursion
178 | No iteration so use recursion
179 |
180 | ####Recursion Step by Step in Elixir
181 |
182 | ```
183 | def sum_list([head | tai;], acc) do
184 | sum_list( tail, acc+head)
185 | end
186 |
187 | def sum_list([], acc) do
188 | acc
189 | end
190 | ```
191 |
192 | ##Concurrency
193 | Each instance of the Erlang VM is called a node
194 | You can have one or more nodes on a physical machine
195 | Can spread nodes through a network
196 | Can rate limit the VM on amount of threads
197 | Erlang processes are not OS processes
198 | Within the VM you can have multiple Erlang processes
199 | There is no "main" process, everything is a process and there are not special types of processes
200 | No shared data amongst processes - Make a copy and work on their own
201 | Processing done via message passing
202 | Can pass a message to another VM
203 | Lazy copying
204 | Processes can be linked together, processes can also be monitored by other processes
205 | #####Processes are Actors
206 | Implements the actor model
207 | Processes encapsulate state
208 | Elixir's processes are more object-oriented than objects in object-oriented languages
209 |
210 | ######Processes Example
211 | Messages are stored in the mailbox
212 | All messages are async, if it receives messages during work it gets next message
213 | Can put limitations on the mailbox
214 | ```
215 | #Message being sent to a process
216 | #pid is a process
217 | message = {:add, 1, 2}
218 | send pid, message
219 |
220 | #process receiving
221 | #listens for message
222 | receive do
223 | {:add, x, y} ->
224 | x +y
225 | {:subtract, x, y} ->
226 | x -y
227 | _->
228 | :error
229 | end # would call this again to implement a server
230 | ```
231 |
--------------------------------------------------------------------------------
/Programming/r.md:
--------------------------------------------------------------------------------
1 |
2 | Getting Started with R for Statistical Programming
3 | ============================
4 | [](http://forthebadge.com)
5 | [](http://forthebadge.com)
6 |
7 | So you wanna learn R eh? Well, what is R?
8 |
9 | "R is a tool for statistics and data modeling. The R programming language is elegant, versatile, and has a highly expressive syntax designed around working with data. R is more than that, though — it also includes extremely powerful graphics capabilities. If you want to easily manipulate your data and present it in compelling ways, R is the tool for you." -- Code School
10 |
11 | Feel free to share this guide! [http://bit.ly/learn-r](http://bit.ly/learn-r)
12 | Get my notes that go in depth on ways to do things here: [Da Notes](https://github.com/HackerCollective/resources/edit/gh-pages/Programming/r-notes.md)
13 |
14 |
15 | ##
Table of Contents
16 | 1. [An Introduction to R](#intro)
17 | 2. [Notes](#notes)
18 |
19 |
20 |
21 | ## [[⬆]](#toc)
An Introduction to R
22 | 1. [Try R -- Code School](http://tryr.codeschool.com/) | If you're new to R, this is the place to start. In this course, you'll take a look at some of the most common and important bits of the language, how to use them, and then put them together into several different handy functions, and analysis patterns.
23 |
24 | ## [[⬆]](#toc)
Notes
25 | ###
Notes TOC
26 | 1. [R Syntax: A gentle introduction to R expressions, variables, and functions](#syntax)
27 | 2. [Vectors: Grouping values into vectors, then doing arithmetic and graphs with them](#vectors)
28 | 3. [Matrices: Creating and graphing two-dimensional data sets](#matrices)
29 | 4. [Summary Statistics: Calculating and plotting some basic statistics: mean, median, and standard deviation](#summaryStat)
30 | 5. [Factors: Creating and plotting categorized data](#factors)
31 | 6. [Data Frames: Organizing values into data frames, loading frames from files and merging them](#dataFrames)
32 |
33 | ### [[⬆]](#toc)
R Syntax
34 | A gentle introduction to R expressions, variables, and functions
35 |
36 |
37 | ### [[⬆]](#toc) Vectors
38 | Grouping values into vectors, then doing arithmetic and graphs with them
39 |
40 |
41 | ### [[⬆]](#toc)
Matricies
42 | Matrices: Creating and graphing two-dimensional data sets
43 |
44 | #### Matrix Plotting
45 |
46 | Generate a 10 by 10 matrix named elevation with all its values initialized to 1:
47 |
48 | ```R
49 | > elevation <- matrix(1, 10, 10)
50 | ```
51 |
52 | You can now do a contour map of the values simply by passing the matrix to the contour function:
53 | ```R
54 | > contour(elevation)
55 | ```
56 | Or you can create a 3D perspective plot with the persp function:
57 |
58 | ```R
59 | persp(elevation)
60 | ```
61 | The perspective plot will look a little odd, though. This is because persp automatically expands the view so that your highest value (the beach surface) is at the very top.
62 | ```R
63 | persp(elevation, expand=.2)
64 | ```
65 |
66 |
67 | To make your surface a particular **size** you must add it to your surface object. If you do not specify, the surface inherits the size of its parent--the context.
68 | ```javascript
69 | var firstSurface = new Surface({
70 | size: [200, 400],
71 | content: 'hello world',
72 | properties: {
73 | color: 'white',
74 | textAlign: 'center',
75 | backgroundColor: '#FA5C4F'
76 | }
77 | });
78 |
79 | mainContext.add(firstSurface);
80 | ```
81 | ##### Surface Size:
82 | - In pixels with [x, y]
83 | - In only one dimension with [undefined, y] or [x, undefined]. For example, [undefined, 200] will span the entire length of the x-direction, while only 200 pixles in the y direction. [, ] also works.
84 | - Have the surface auto-size according to the content with [true, true]. You can put in any statement that evaluates to [true, true]. For example, [1>3, 1>3], [false, false], and [null, null] all work.
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | ### [[⬆]](#toc)
Summary Statistics
98 | Calculating and plotting some basic statistics: mean, median, and standard deviation
99 |
100 | Simply throwing a bunch of numbers at your audience will only confuse them. Part of a statistician's job is to explain their data. In this chapter, we'll show you some of the tools R offers to let you do so, with minimum fuss.
101 |
102 | #### Mean
103 | ***
104 | Determining the health of the crew is an important part of any inventory of the ship. Here's a vector containing the number of limbs each member has left, along with their names.
105 | ```R
106 | limbs <- c(4, 3, 4, 3, 2, 4, 4, 4)
107 | names(limbs) <- c('One-Eye', 'Peg-Leg', 'Smitty', 'Hook', 'Scooter', 'Dan', 'Mikey', 'Blackbeard')
108 | ```
109 |
110 | A quick way to assess our battle-readiness would be to get the average of the crew's appendage counts. Statisticians call this the "mean". Call the mean function with the ```limbs``` vector. To do this we employ our call function ```mean(limbs)```. The mean of the aformentioned data would be **3.5**
111 |
112 | Now, to visually represent this data we can pull it into a bar chart via ```barplot(limbs)```.
113 |
114 | To make our data set clearer we can we draw a line on the plot representing the mean. The **abline** function can take an *h* parameter with a value at which to draw a horizontal line, or a v parameter for a vertical line. When it's called, it updates the previous plot.
115 |
116 | Draw a horizontal line
117 | ```R
118 | abline(h = mean(limbs))
119 | ```
120 |
121 | #### Median
122 | ***
123 | The median is calculated by sorting the values and choosing the middle one (for sets with an even number of values, the middle two values are averaged). This can help if we're intrepreting data that hold outliers that may skew our data set.
124 |
125 | For example, Let's say we gain a crew member that completely skews the mean.
126 | ```R
127 | > limbs <- c(4, 3, 4, 3, 2, 4, 4, 14)
128 | > names(limbs) <- c('One-Eye', 'Peg-Leg', 'Smitty', 'Hook',
129 | 'Scooter', 'Dan', 'Mikey', 'Davy Jones')
130 | > mean(limbs)
131 | [1] 4.75
132 | ```
133 | While we can say we have our crew has a mean of 4.75 limbs, it's not entirely accurate. For this, median to the rescue.
134 |
135 | Call the median function on the vector:
136 | ```R
137 | median(limbs)
138 | ```
139 | This gives us a median of 4, which is a much more realistic view our our data set.
140 |
141 | #### Standard Deviation
142 | ***
143 | Statisticians use the concept of **"standard deviation"** from the mean to describe the range of typical values for a data set. For a group of numbers, it shows how much they typically vary from the average value. To calculate the standard deviation, you calculate the mean of the values, then subtract the mean from each number and square the result, then average those squares, and take the square root of that average.
144 |
145 | If that sounds like a lot of work, don't worry. You're using R, and all you have to do is pass a vector to the sd function. Try calling sd on the pounds vector now, and assign the result to the deviation variable:
146 |
147 | Now to the example!
148 | Some of the plunder from our recent raids has been worth less than what we're used to. Here's a vector with the values of our latest hauls:
149 |
150 | ```R
151 | > pounds <- c(45000, 50000, 35000, 40000, 35000, 45000, 10000, 15000)
152 | > barplot(pounds)
153 | > meanValue <- mean(pounds)
154 | ```
155 |
156 | Creating the deviation variable:
157 | ```R
158 | deviation <- sd(pounds)
159 | ```
160 | ### [[⬆]](#toc)
Factors
161 | #### Creating and plotting categorized data
162 |
163 | Often your data needs to be grouped by category: blood pressure by age range, accidents by auto manufacturer, and so forth. R has a special collection type called a factor to track these categorized values.
164 |
165 | #### Creating Factors
166 | ***
167 | It's time to take inventory of the ship's hold. We'll make a vector for you with the type of booty in each chest.
168 |
169 | To categorize the values, simply pass the vector to the factor function:
170 |
171 | RedoComplete
172 | ```R
173 | > chests <- c('gold', 'silver', 'gems', 'gold', 'gems')
174 | > types <- factor(chests)
175 | ```
176 | There are a couple differences between the original vector and the new factor that are worth noting. Print the chests vector:
177 |
178 | ```R
179 | > print(chests)
180 | [1] "gold" "silver" "gems" "gold" "gems"
181 | ```
182 | You see the raw list of strings, repeated values and all. Now print the types factor:
183 |
184 | ```R
185 | > print(types)
186 | [1] gold silver gems gold gems
187 | Levels: gems gold silver
188 | ```
189 | Printed at the bottom, you'll see the factor's "levels" - groups of unique values. Notice also that there are no quotes around the values. That's because they're not strings; they're actually integer references to one of the factor's levels.
190 |
191 | Let's take a look at the underlying integers. Pass the factor to the ```as.integer``` function:
192 | ```R
193 | > as.integer(types)
194 | [1] 2 3 1 2 1
195 | ```
196 | You can get only the factor levels with the **levels** function:
197 |
198 | #### Plots With Factors
199 | ***
200 | You can use a factor to separate plots into categories. Let's graph our five chests by weight and value, and show their type as well. We'll create two vectors for you; weights will contain the weight of each chest, and prices will track how much the chests are worth.
201 |
202 | Now, try calling plot to graph the chests by weight and value.
203 | ```R
204 | > weights <- c(300, 200, 100, 250, 150)
205 | > prices <- c(9000, 5000, 12000, 7500, 18000)
206 | > plot(weights, prices)
207 | ```
208 | We can't tell which chest is which, though. Fortunately, we can use different plot characters for each type by converting the factor to integers, and passing it to the **pch** argument of **plot**.
209 |
210 | ```R
211 | plot(weights, prices, pch=as.integer(types))
212 | ```
213 |
214 | "Circle", "Triangle", and "Plus Sign" still aren't great descriptions for treasure, though. Let's add a legend to show what the symbols mean.
215 |
216 |
217 |
218 |
219 |
220 | ### [[⬆]](#toc)
Data Frames
221 | Data Frames: Organizing values into data frames, loading frames from files and merging them
222 |
223 | The **weights**, **prices**, and **types** data structures are all deeply tied together, if you think about it. If you add a new weight sample, you need to remember to add a new price and type, or risk everything falling out of sync. To avoid trouble, it would be nice if we could tie all these variables together in a single data structure.
224 |
225 | Fortunately, R has a structure for just this purpose: the data frame. You can think of a data frame as something akin to a database table or an Excel spreadsheet. It has a specific number of columns, each of which is expected to contain values of a particular type. It also has an indeterminate number of rows - sets of related values for each column.
226 |
227 | #### Data Frame Access
228 |
229 | Just like matrices, it's easy to access individual portions of a data frame.
230 |
231 | You can get individual columns by providing their index number in double-brackets. Try getting the second column (prices) of treasure:
232 | ```R
233 | treasure[[2]]
234 | ```
235 | You could instead provide a column name as a string in double-brackets. (This is often more readable.) Retrieve the "weights" column:
236 |
237 | ```R
238 | > treasure[["weights"]]
239 | [1] 300 200 100 250 150
240 | ```
241 | **Shorthand for Dataframes**
242 | Typing all those brackets can get tedious, so there's also a shorthand notation: the data frame name, a dollar sign, and the column name (without quotes). Try using it to get the "prices" column:
243 |
244 | ```R
245 | treasure$prices
246 | ```
247 |
248 | #### Loading Data Frames
249 |
250 | Typing in all your data by hand only works up to a point, obviously, which is why R was given the capability to easily load data in from external files.
251 |
252 | You can load a CSV file's content into a data frame by passing the file name to the read.csv function. Try it with the "targets.csv" file:
253 | ```R
254 | read.csv("targets.csv")
255 | ```
256 |
257 | For files that use separator strings other than commas, you can use the ```read.table``` function. The **sep** argument defines the separator character, and you can specify a tab character with **"\t"**.
258 |
259 | Call ```read.table``` on "infantry.txt", using tab separators:
260 |
261 | ```R
262 | read.table("infantry.txt", sep="\t")
263 | ```
264 |
265 | In this case you'll get "V1" and "V2" column headers. The first line is not automatically treated as column headers with ```read.table```. This behavior is controlled by the header argument. To fix this, you can call ```read.table``` and set the header to TRUE:
266 | ```R
267 | read.table("infantry.txt", sep="\t", header=TRUE)
268 | ```
269 | #### Merging Data Frames
270 | We want to loot the city with the most treasure and the fewest guards. Right now, though, we have to look at both files and match up the rows. It would be nice if all the data for a port were in one place...
271 |
272 | R's merge function can accomplish precisely that. It joins two data frames together, using the contents of one or more columns. First, we're going to store those file contents in two data frames for you, **targets** and **infantry**.
273 |
274 | The merge function takes arguments with an **x** frame (**targets**) and a **y** frame (**infantry**). By default, it joins the frames on columns with the same name (the two Port columns). See if you can merge the two frames:
275 |
276 | ```R
277 | merge(x = targets, y = infantry)
278 | ```
279 |
280 | ### Notes
281 | R can test for correlation between two vectors with the ```cor.test``` function.
282 |
283 | ```R
284 | cor.test(countries$GDP, countries$Piracy)
285 | ```
286 | ```R
287 | > cor.test(countries$GDP, countries$Piracy)
288 |
289 | Pearson's product-moment correlation
290 |
291 | data: countries$GDP and countries$Piracy
292 | t = -14.8371, df = 107, p-value < 2.2e-16
293 | alternative hypothesis: true correlation is not equal to 0
294 | 95 percent confidence interval:
295 | -0.8736179 -0.7475690
296 | sample estimates:
297 | cor
298 | -0.8203183
299 | ```
300 | The key result we're interested in is the **"p-value"**. Conventionally, any correlation with a p-value less than **0.05** is considered statistically significant, and this sample data's p-value is definitely below that threshold. In other words, yes, these data do show a statistically significant negative correlation between GDP and software piracy.
301 |
302 | We have more countries represented in our GDP data than we do our piracy rate data. If we know a country's GDP, can we use that to estimate its piracy rate?
303 |
304 | We can, if we calculate the linear model that best represents all our data points (with a certain degree of error). The **lm** function takes a model formula, which is represented by a response variable (piracy rate), a tilde character (**~**), and a predictor variable (GDP). (Note that the response variable comes first.)
305 |
306 | Try calculating the linear model for piracy rate by GDP, and assign it to the line variable:
307 |
308 | ```R
309 | line <- lm(countries$Piracy ~ countries$GDP)
310 | ```
311 | Sort of like a trend line! We can now plot it by calling our handy dandy abline!
312 | ```R
313 | abline(line)
314 | ```
315 |
316 | ####
317 | The functionality we've shown you so far is all included with R by default. (And it's pretty powerful, isn't it?) But in case the default installation doesn't include that function you need, there are still more libraries available on the servers of the Comprehensive R Archive Network, or CRAN. They can add anything from new statistical functions to better graphics capabilities. Better yet, installing any of them is just a command away.
318 |
319 | Let's install the popular ggplot2 graphics package. Call the install.packages function with the package name in a string:
320 |
321 | ```R
322 | > install.packages("ggplot2")
323 | ```R
324 | You can get help for a package by calling the help function and passing the package name in the package argument. Try displaying help for the "ggplot2" package:
325 |
326 | ```R
327 | help(package = "ggplot2")
328 | ```
329 |
--------------------------------------------------------------------------------
/Programming/unix.md:
--------------------------------------------------------------------------------
1 | Getting Started with UNIX
2 | =========================
3 |
4 | ##
Table of Contents
5 |
6 | 1. [An Introduction to UNIX](#intro)
7 | 2. [Bash Tutorials](#tutorial)
8 | 3. [The UNIX Philosophy](#laws)
9 |
10 | ## (#toc)
So what is UNIX anyways?
11 |
12 | Originally, Unix was meant to be a programmer's workbench to be used for developing software to be run on multiple platforms more than to be used to run application software. The system grew larger as the operating system started spreading in the academic circle, as users added their own tools to the system and shared them with colleagues.
13 |
14 | Unix was designed to be portable, multi-tasking and multi-user in a time-sharing configuration. Unix systems are characterized by various concepts: the use of plain text for storing data; a hierarchical file system; treating devices and certain types of inter-process communication (IPC) as files; and the use of a large number of software tools, small programs that can be strung together through a command line interpreter using pipes, as opposed to using a single monolithic program that includes all of the same functionality. These concepts are collectively known as the "Unix philosophy." Brian Kernighan and Rob Pike summarize this in The Unix Programming Environment as "the idea that the power of a system comes more from the relationships among programs than from the programs themselves."
15 |
16 | ####TLDR:
17 | UNIX, unlike other systems, is meant to be modular, many small programs that do one thing well. All the config files are plaintext and there is no registry (thank god) which means easy editing and customizing.
18 |
19 | http://en.wikipedia.org/wiki/Unix_philosophy#Eric_Raymond.E2.80.99s_17_Unix_Rules
20 |
21 | There are many "brands" of UNIX including Linux, FreeBSD, OS X, etc... These are mostly separated by Kernels. The kernel is a computer "program" that manages input/output requests from software, and translates them into data processing instructions for the central processing unit and other electronic components of a computer. The kernel is a fundamental part of a modern computer's operating system. Linux is any UNIX system that uses the Linux kernel. Android using the Linux kernel is most of their deployments and OS X used the FreeBSD kernel named Darwin.
22 |
23 | ##When someone says "Do you know NIX?" what do they mean?
24 |
25 | NIX is what many people call the family of UNIX and UNIX-like systems. "Knowing" a system is more then just knowing the language of the system, it is also about knowing the software architecture of the system and why it works like it does. We learn all of this in the framework of BASH.
26 |
27 | ##Why do I use it?
28 | 1. It is free as in freedom. (In price as well)
29 |
30 | 2. I can put my faith behind millions of coders and hackers on the internet rather than one company in the united states who can be manipulated by the government.
31 |
32 | 3. UNIX package managers are badass.
33 |
34 | 4. Incredibly hackable (in a good way).
35 |
36 | 5. Window managers and desktop environments options.
37 |
38 | 6. To be part of a powerful, very knowledgable community.
39 |
40 | 7. Just by learning linux I am on the path to being a sysadmin and eventually makes lots of money to make sure servers don’t' crash. (Sounds like hell to some but sounds awesome to me)
41 |
42 | 8. I am addicted to distro hopping.
43 |
44 | 9. I hate windows, its registry, powershell, and its anti-UNIX philosophy.
45 |
46 | 10. Its Fun!
47 |
48 | ##Before we go any farther into NIX itself, lets get to know BASH.
49 |
50 | Bash is a Unix shell written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell (sh). Released in 1989, it has been distributed widely as the shell for the GNU operating system and as a default shell most NIX systems, including Linux and Mac OS X.
51 |
52 | The name itself is an acronym, a pun, and a description. As an acronym, it stands for Bourne-again shell, referring to its objective as a free replacement for the Bourne shell. As a pun, it expressed that objective in a phrase that sounds similar to born again, a term for spiritual rebirth. The name is also descriptive of what it did, bashing together the features of sh, csh, and ksh.
53 |
54 | Terminal Time!
55 | ==============
56 |
57 | You are encouraged to open up a terminal and follow along.
58 |
Learn though practice not memorization!
59 |
60 | ####Navigation
61 |
62 | Lets start with 3 basic but very important BASH commands: `ls`, `cd
`, and `pwd`.
63 |
64 | Both `cd` and `ls` are fundamental in navigating the file structure of your system.
65 |
66 | `ls` lists all things in your current directory and cd, followed by a path, will take you into that directory.
67 |
68 | If you need to know where you are just enter pwd to print your current working directory (The one you are in right now).
69 |
70 | To go up one level in the file tree just enter `cd ..` .
71 |
72 | The `~` character, called a tilde, is a default variable in most UNIX shells and it represents the users home directory.
73 | To go home from anywhere, enter `cd ~` . On many systems the `cd` command with no path after it defaults to `cd ~` so the tilde is not always needed. I would recommend always using it as a beginner so that you get use to it, you will be using it in scripts later. If you want to see what your home path is you can just `echo ~`.
74 |
75 | ####Flags
76 | In BASH there are also flags that ago along with commands. These flag go after commands to adjust what the commands does and often effects it in very robust ways. For example lets look at the command `ls` and then `ls -l`:
77 |
78 | 
79 |
80 | Above you can see I have executed two commands, both `ls`, but one with flag `l`. `-l` stands for 'long' and it lists much more information than the regular `ls` including (from left to right):
81 |
82 | * files permissions,
83 | * number of links
84 | * owner's name
85 | * owner's group
86 | * file size
87 | * time of last modification
88 | * items name
89 |
90 | ####MAN PAGES!
91 | RTFM is a common expression heard in this kind of field and it stands for READ THE F**KING MANUAL. People in this community hate people who don't help themselves, they learned the hard way, why shouldn't you? Its okay to ask questions but not stupid ones that could be easily googled. To read the man page on any command just enter `man ` and then tap 'q' to the man page that is now open.
92 |
93 | _____________________________________________________________________________
94 |
95 |
96 | Create an alias super easy, in this example we create an alias 'subl' for opening Sublime Text 2. This assumes that you have sublime text 2 in your applications folder. (OS X)
97 |
98 | ```
99 | $ echo "alias subl='/Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl'" >> ~/.profile
100 | source ~/.profile
101 | ```
102 |
--------------------------------------------------------------------------------
/Programming/web-scraping.md:
--------------------------------------------------------------------------------
1 | Web Scraping
2 | ===============================
3 |
4 | ## Intro
5 | Web Scraping is some crazy shit that allows you can use for many reasons. A good way to use it is to create your own version of an API, or if a site/serice doesn't supply a good enough API of their own.
6 |
7 | ## Table of Contents
8 |
9 | 1. [Resources](#resources)
10 | 2. [Parsers](#parsers)
11 | 3. [Robots.txt](#robots)
12 |
13 |
14 | ### [[⬆]](#toc) Scraping Libraries:
15 | 1. Python
16 | 1. [Urllib](https://docs.python.org/2/library/urllib.html) | This is a stdlib option and definitely not suggested!
17 | 2. [Requests](http://docs.python-requests.org/en/latest/) | By far the best option available.
18 | 3. [Scrapy](http://scrapy.org/)
19 | 2. Node.js (Javascript)
20 | 1. [Requestjs](https://github.com/mikeal/request)
21 | 3. Ruby
22 | 4. Java
23 |
24 |
25 |
26 | ### [[⬆]](#toc) Parsers:
27 | 1. Python
28 | 1. [BeautifulSoup](http://beautiful-soup-4.readthedocs.org/en/latest/) | Community accepted best Python tool for parsing HTML/XML
29 | 2. Node.js (JavaScript)
30 | 1. [Cheerio](https://github.com/cheeriojs/cheerio) | Server sided jQuery tool that allows you to manipulate scraped pages with jQuery like features (has other uses too!)
31 | 3. Ruby
32 | 4. Java
33 |
34 | ### [[⬆]](#toc) Robots.txt:
35 | The Robots.txt is a publically viewable file that most (any site worth it's weight) will have. It tells a viewer/robot which type of robots/crawlers are allowed and to which parts of the site. Example:
36 | ```
37 | User-Agent: *
38 | Disallow: /
39 | ```
40 | This script would tell all user's `*` that they cannot crawl any part of the site `/`. But if you were to check out GitHub's [Robot.txt](https://github.com/robots.txt) you would see that they allow specific bots, and disallow ones that they are not aware of. Many websites will be like this. But as a writer of a web crawler you have the ability to not follow these guidlines, just like it isn't necessary to color between the lines of a coloring book. The author will probably never know (unless your crawler is doing an extensive amount of traffic/ malicious things), but you will.
41 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Resources
2 | =========
3 |
4 | Personal dump of resources. I've had a lot of fun these past two years, and through that I've had a lot of time to learn and think. Here is my personal collection of resources, ranging from engineering, to programming, and scholarships.
5 |
6 | [](http://forthebadge.com) [](http://forthebadge.com)
7 |
8 | #### Topics So Far
9 |
10 | * **Business**: [Entrepreneurship](https://github.com/HackerCollective/resources/blob/gh-pages/Business/Entrepreneurship/README.md), [Startups](), [Investing](https://github.com/HackerCollective/resources/blob/gh-pages/Business/Investing/README.md)
11 |
12 | * **Design**: [Information Design](https://github.com/HackerCollective/resources/blob/gh-pages/Design/informationdesign.md),[Interaction Design](https://github.com/HackerCollective/resources/blob/gh-pages/Design/interactiondesign.md), [Mobile Design](https://github.com/HackerCollective/resources/blob/gh-pages/Design/mobiledesign.md), [Motion Design](https://github.com/HackerCollective/resources/blob/gh-pages/Design/motiondesign.md), [Prototyping](https://github.com/HackerCollective/resources/blob/gh-pages/Design/prototyping.md), [User Centered Design](https://github.com/HackerCollective/resources/blob/gh-pages/Design/usercentereddesign.md), [User Interface Design](https://github.com/HackerCollective/resources/blob/gh-pages/Design/userinterfacedesign.md), [User Research](https://github.com/HackerCollective/resources/blob/gh-pages/Design/userresearch.md), [UX Design](https://github.com/HackerCollective/resources/blob/gh-pages/Design/uxdesign.md), [Visual Design](https://github.com/HackerCollective/resources/blob/gh-pages/Design/visualdesign.md), [Web Design](https://github.com/HackerCollective/resources/blob/gh-pages/Design/webdesign.md)
13 |
14 | * **Hackathons**: [Event List](https://github.com/HackerCollective/resources/blob/gh-pages/Hackathons/EventList.md), [Wiki](), [Code of Conduct](https://github.com/HackerCollective/resources/blob/gh-pages/Hackathons/CodeofConduct.md)
15 |
16 | * **Programming**:
17 | - [Functional Programming](https://github.com/HackerCollective/resources/tree/gh-pages/Programming/Functional): []()
18 | - [Game Development](https://github.com/HackerCollective/resources/blob/gh-pages/Programming/Game%20Dev/GameDev.md):
19 | - [Mobile Development](https://github.com/HackerCollective/resources/tree/gh-pages/Programming/Mobile%20Dev):
20 | - [Object Oriented Programming](https://github.com/HackerCollective/resources/tree/gh-pages/Programming/Object%20Oriented):
21 | - [Web Development](https://github.com/HackerCollective/resources/tree/gh-pages/Programming/Web%20Development):
22 |
23 | * **Misc**: [Cool Chrome Extensions](https://github.com/HackerCollective/resources/blob/gh-pages/Programming/ChromeExt.md), [Mac Environment Setup](https://github.com/HackerCollective/resources/blob/gh-pages/Programming/mac-environment.md)
24 |
25 | * **Scholarships**: [ High School ](https://github.com/HackerCollective/resources/tree/gh-pages/School/Scholarships), [College ](https://github.com/HackerCollective/resources/tree/gh-pages/School/Scholarships), [Merit](https://github.com/HackerCollective/resources/tree/gh-pages/School/Scholarships), [Need Based](https://github.com/HackerCollective/resources/tree/gh-pages/School/Scholarships), [Loans](https://github.com/HackerCollective/resources/tree/gh-pages/School/Scholarships), [ FAFSA/WASFA](https://github.com/HackerCollective/resources/tree/gh-pages/School/Scholarships), [Dreamers](https://github.com/HackerCollective/resources/tree/gh-pages/School/Scholarships)
26 | ***
27 |
28 |
29 |
41 |
42 |
43 | ### Checking for Broken Links
44 |
45 | To check for invalid links, run `./checklinks.py`. This will then provide a list of files, and the URLs that *may* be invalid. Note that there may be false positives - please double check any reported URLs before removing them!
46 |
47 | Note: while testing, the script ran for ~100s, but depending on connection speed YMMV. Please bear with it.
48 |
49 | You will need `python2` and `git` to run this script, as well as the python packages `python2-termcolor`, `python2-regex` and `python2-pycurl`, which can be installed via `pip install termcolor regex pycurl`.
50 |
51 | ### Contributing
52 | Please refer to our [Contributing Doc](https://github.com/mrcoven94/resources/blob/gh-pages/CONTRIBUTING.md), before anything so that we can have consistency, and high quality content. Feel free to open up issues, send pull request, etc.
53 |
54 | License: [MIT License](https://github.com/mrcoven94/resources/blob/gh-pages/LICENSE.md)
55 |
56 | Inspired by [Jennifer Apacible - Res](https://github.com/japacible/res), the original gangsta, and [Alexander Bayandin's Awesome-Awesome](https://github.com/bayandin/awesome-awesomeness).
57 |
--------------------------------------------------------------------------------
/School/Scholarships/README.md:
--------------------------------------------------------------------------------
1 | Resources
2 | =========
3 |
4 | Personal dump of resources. I've had a lot of fun these past two years, and through that I've had a lot of time to learn and think. Here is my personal collection of resources, ranging from engineering, to programming, and scholarships.
5 |
6 | [](http://forthebadge.com) [](http://forthebadge.com)
7 |
8 | ##### Topics So Far
9 |
10 | | Hackathons | Scholarships | General | Business | Web Development | Mobile Development | Gen. Programming |
11 | | :-------------: | :-------------: | :-------------: | :-------------: | :-------------: | :-------------: | :-------------: |
12 | | Hackathons list | High School |Chrome Extensions| Entrepreneurship| Frontend | iOS | Haskell |
13 | | HH Wiki | College | | Startups | Backend | Android | Java |
14 | | Code of Conduct | Merit | | Investing | Ruby on Rails | Windows | Python |
15 | | | Need Based | | | Javascript | | Ruby |
16 | | | Loans | | | | | |
17 | | | FAFSA / WASFA | | | | | |
18 | | | Dreamers | | | | | |
19 | | | General Guide | | | | | |
20 |
21 |
22 |
23 |
24 | ### Contributing
25 | Please refer to our [Contributing Doc](https://github.com/mrcoven94/resources/blob/gh-pages/CONTRIBUTING.md), before anything so that we can have consistency, and high quality content. Feel free to open up issues, send pull request, etc.
26 |
27 | License: [MIT License](https://github.com/mrcoven94/resources/blob/gh-pages/LICENSE.md)
28 |
29 | Inspired by [Jennifer Apacible - Res](https://github.com/japacible/res), the original gangsta, and [Alexander Bayandin's Awesome-Awesome](https://github.com/bayandin/awesome-awesomeness).
30 |
--------------------------------------------------------------------------------
/School/Scholarships/scholarships.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackerCollective/resources/e1646d1fe4d26f472d2231afca6a9ff15960e8d7/School/Scholarships/scholarships.md
--------------------------------------------------------------------------------
/School/classhelp.md:
--------------------------------------------------------------------------------
1 | [Clutch Prep](https://www.clutchprep.com/) | Help on your College classes that follow your college book
2 |
--------------------------------------------------------------------------------
/School/edu.md:
--------------------------------------------------------------------------------
1 | Dat Email Doe
2 | ================
3 |
4 | A list of all the things you can get for free (or discounted) with a .edu email address
5 |
6 | ## Free Thangs
7 |
8 | - [Amazon Prime](http://www.amazon.com/gp/help/customer/display.html?nodeId=201133670)
9 | - [Autodesk](http://www.autodesk.com/education/free-software/all)
10 | - [BitBucket](https://www.atlassian.com/software/views/bitbucket-academic-license.jsp)
11 | - [GitHub](https://education.github.com/)
12 | - [Student Developer Pack](https://education.github.com/pack)
13 | - Bitnami (Business 3 plan for one year)
14 | - CrowdFlower (Access and $50 credit)
15 | - DigitalOcean ($100 credit)
16 | - dnsimple (Two year plan)
17 | - GitHub (Micro account plan)
18 | - HackHands ($25 credit)
19 | - Namecheap (One year SSL certificate)
20 | - Orchestrate (Developer account)
21 | - Screenhero (Individual account)
22 | - SendGrid (Student plan with 15k emails/month)
23 | - stripe (Waived transaction fees on first $1000)
24 | - Travis CI (Private builds)
25 | - Unreal Engine
26 | - [Jet Brains](http://www.jetbrains.com/student/)
27 | - ReSharper | Productivity tool for .NET devs
28 | - dotTrace | .NET Performance Profiler
29 | - dotCover | .NET Code Coverage Tool
30 | - dotMemory | .NET Memory Profiler
31 | - IntelliJ IDEA | The most intelligent IDE for Java
32 | - RubyMine | IDE for Ruby and Rails
33 | - PyCharm | Powerful Python & Django IDE
34 | - CLion | Cross-platform C/C++ IDE
35 | - PhpStorm | IDE for Web & PHP
36 | - WebStorm | Smart JavaScript IDE
37 | - AppCode | Objective-C IDE
38 | - [Lynda](http://www.lynda.com) (Press 'Log In' and type your .edu account into the appropriate areas)
39 | - Online training resource in software and business skills through video tutorials
40 | - [Microsoft DreamSpark](https://www.dreamspark.com/) (Free Microsoft software)
41 | - [Namecheap Education Program](https://www.nc.me/) (Free .me domain for a year)
42 | - [Prezi](http://prezi.com/pricing/edu/)
43 |
44 | ## Discounted Thangs
45 |
46 | - [Rdio](https://www.rdio.com/account/discount/)
47 | - [Spotify](https://www.spotify.com/us/student/)
48 | - [SurveyMonkey](http://help.surveymonkey.com/articles/en_US/kb/Discounts)
49 |
--------------------------------------------------------------------------------
/checklinks.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python2
2 | from __future__ import print_function
3 |
4 | import threading
5 | import Queue
6 |
7 | import StringIO
8 |
9 | # determine the best number of threads to run with
10 | import multiprocessing
11 |
12 | # needed to print to sys.stderr
13 | import sys
14 |
15 | # so we can get the output of `git grep ...`
16 | import subprocess
17 |
18 | # sanitise links so we don't get issues with checking URLs with spaces in them
19 | import urllib
20 |
21 | # NOTE: will require the `pycurl` package: `pip install pycurl`
22 | import pycurl
23 |
24 | # so we don't have to pipe to `sed`. used over `re` so we have slightly more
25 | # powerful regexes, as per http://stackoverflow.com/a/25109573
26 | # NOTE: will require the `regex` package: `pip install regex`
27 | import regex
28 |
29 | # may as well have nicely formatted output
30 | # NOTE: will require the `termcolor` package: `pip install termcolor`
31 | from termcolor import colored
32 |
33 |
34 | # Adapted from http://stackoverflow.com/a/25109573; why hand write our own,
35 | # less efficient regex?
36 | # replace the `\S` with `[^\r\n\t\f )]` so we don't match the badge URLs
37 | URL_REGEX = '(?|(?(?(?:ht|f)tps?://[^\r\n\t\f )]+(?<=\P{P})))' + \
38 | '|\(([^)]+)\)\[(\g)\])'
39 |
40 | NUM_WORKER_THREADS = multiprocessing.cpu_count() * 2
41 | # do we want to follow redirects from websites?
42 | FOLLOW_REDIRECTS = 1
43 | # spoof our UA to be Chrome so we don't get false positives from sites who
44 | # don't like webscraping. UA taken from
45 | # http://www.useragentstring.com/Chrome41.0.2228.0_id_19841.php
46 | USERAGENT = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like " + \
47 | "Gecko) Chrome/41.0.2228.0 Safari/537.36"
48 | # limit the time we're just sitting around waiting for the script to run by
49 | # default, it's running at 300 seconds, which is a bit painful to wait for
50 | TIMEOUT = 30
51 |
52 | # global Queue object to manage our URLs to crawl
53 | gQueue = Queue.Queue()
54 | # global dict to hold [file]->[[URLs to be changed]]
55 | gProcessed = dict()
56 | # use a lock to ensure that we can't overwrite our dict, or global error flag,
57 | # by multiple threads accessing it at once
58 | gProcessedLock = threading.Lock()
59 |
60 | # a flag we can use to determine whether we've found any errors, be they an
61 | # exception, or just a normal site error
62 | gEncounteredErrors = False
63 |
64 |
65 | # Nicely formatted error messages are always better than ones that merge in
66 | # with the rest of them, and that we can't distinguish. We also get them to
67 | # stderr, which is way better.
68 | def error(errorMessage):
69 | """
70 | Produce a red-coloured error message to stderr.
71 |
72 | Format our messages so they're much more readily distinguishable from
73 | normal output. Also write them to stderr so if we're piping output we
74 | get them on the right stream.
75 | """
76 | print(colored(errorMessage, 'red'), file=sys.stderr)
77 |
78 |
79 | def getStatusCode(url):
80 | """Given a URL, get the status code when trying to access it"""
81 |
82 | # escape the URL so we don't get 404s on URLs with spaces in them
83 | url = urllib.quote(url, safe=':&?/=#-+')
84 |
85 | curl = pycurl.Curl()
86 | buff = StringIO.StringIO()
87 |
88 | curl.setopt(pycurl.URL, url)
89 | # make sure we don't dump the page content to stdout
90 | curl.setopt(pycurl.WRITEFUNCTION, buff.write)
91 | curl.setopt(pycurl.FOLLOWLOCATION, FOLLOW_REDIRECTS)
92 | curl.setopt(pycurl.USERAGENT, USERAGENT)
93 | curl.setopt(pycurl.CONNECTTIMEOUT, TIMEOUT)
94 |
95 | try:
96 | curl.perform()
97 | except pycurl.error as pycurl_error:
98 | error("Received pycurl error %s while processing %s" % (
99 | pycurl_error,
100 | url)
101 | )
102 |
103 | # not being able to access the host is basically a 404
104 | if pycurl_error.args[0] == pycurl.E_COULDNT_RESOLVE_HOST:
105 | return 404
106 | else:
107 | # if we haven't got a default case, still throw our error
108 | raise pycurl_error
109 |
110 | return int(curl.getinfo(pycurl.HTTP_CODE))
111 |
112 |
113 | # a central way to update our dict of files with the broken URLs
114 | def addToDict(url, matchedFiles):
115 | """
116 | Retain a URL and any files it appears in.
117 |
118 | Store inside our global dictionary files and URLs that appear in them that
119 | need to be fixed. Thread-safe.
120 | """
121 |
122 | with gProcessedLock:
123 | global gEncounteredErrors
124 | gEncounteredErrors = True
125 | for matchedFile in matchedFiles:
126 | if matchedFile not in gProcessed:
127 | gProcessed[matchedFile] = []
128 |
129 | # stop us getting duplicates
130 | if url not in gProcessed[matchedFile]:
131 | gProcessed[matchedFile].append(url)
132 |
133 |
134 | def worker():
135 | """Worker for Threads to process URLs"""
136 |
137 | # always be ready to take a new job
138 | while True:
139 | # default an empty string, so if we hit the generic catch, we don't
140 | # have an unset variable
141 | url = ""
142 | try:
143 | url = gQueue.get()
144 | statusCode = getStatusCode(url)
145 | didValidate = (statusCode < 400 or statusCode >= 500)
146 | if not didValidate:
147 | # work out what files are affected by the broken URL
148 | filesWithUrl = subprocess.check_output(["git", "grep", "-l",
149 | url])
150 | addToDict(url, filesWithUrl.splitlines())
151 | gQueue.task_done()
152 | except:
153 | with gProcessedLock:
154 | global gEncounteredErrors
155 | gEncounteredErrors = True
156 |
157 | error("An exception occured while processing %s" % url)
158 | # make sure we mark our task as done, otherwise our threads
159 | # will just hang
160 | gQueue.task_done()
161 | gQueue.task_done()
162 |
163 |
164 | def main():
165 | gitGrep = subprocess.Popen(["git", "grep", "(\s*http.*)"],
166 | stdout=subprocess.PIPE)
167 | for line in gitGrep.stdout:
168 | urls = regex.findall(URL_REGEX, line)
169 | for url in urls:
170 | gQueue.put(url[1])
171 |
172 | for i in range(NUM_WORKER_THREADS):
173 | t = threading.Thread(target=worker)
174 | t.daemon = True
175 | t.start()
176 |
177 | # block until we've finished all our jobs
178 | gQueue.join()
179 |
180 | # finally output each file and the corresponding URLs to fix/remove
181 | for key in gProcessed:
182 | print("%s has the following changes needed:" % (
183 | colored(key, 'yellow')))
184 |
185 | for url in gProcessed[key]:
186 | print("- %s" % url)
187 |
188 | # an empty dict evaluates as False, so we can take advantage of that to
189 | # return 0 when we have no matches, and 1 when there are matches
190 | sys.exit(gEncounteredErrors)
191 |
192 |
193 | if __name__ == "__main__":
194 | main()
195 |
--------------------------------------------------------------------------------