While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.
Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
| document.getElementsByTagName('button')[0].onclick = function () { | |
| scrollTo(document.body, 0, 1250); | |
| } | |
| function scrollTo(element, to, duration) { | |
| var start = element.scrollTop, | |
| change = to - start, | |
| currentTime = 0, | |
| increment = 20; | |
| open -a Google\ Chrome\ Canary --args --disable-web-security |
| // Support routines for automatically reporting user timing for common analytics platforms | |
| // Currently supports Google Analytics, Boomerang and SOASTA mPulse | |
| // In the case of boomerang, you will need to map the event names you want reported | |
| // to timer names (for mPulse these need to be custom0, custom1, etc) using a global variable: | |
| // rumMapping = {'aft': 'custom0'}; | |
| (function() { | |
| var wtt = function(n, t, b) { | |
| t = Math.round(t); | |
| if (t >= 0 && t < 3600000) { | |
| // Google Analytics |
| <!-- | |
| In an HTTP2 world, delivering multiple small individually cachable | |
| and executable scripts can be more efficient than one big | |
| concatenated script. Can we better prepare for this? Can it be | |
| done in a way that works with existing JS files? | |
| Imagine a page that had 4 interactive modules, all of which | |
| depended on a couple of utility scripts. We could progressively | |
| add behaviour to the page by executing the 'action' scripts | |
| as soon as they download & the utilities have executed. |
Everyone who's reading this, please leave your opinion/ideas/proposals as a comment for a better world!
Most of you guys read Josh' proposals to make components more reusable, I think. Now, reading through this proposals definitely gives a feeling that this is the right way. Anyways, If you haven't read it yet, you should.
So Josh shows us, how angular apps can be structured in a better and more reusable way. Reusability is a very important thing when it comes to software development. Actually the whole angularjs library follows a philosophy of reusability. Which is why you able to make things like:
| gifify() { | |
| if [[ -n "$1" ]]; then | |
| if [[ $2 == '--good' ]]; then | |
| ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png | |
| time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif | |
| rm out-static*.png | |
| else | |
| ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > $1.gif | |
| fi | |
| else |
| /** | |
| * Polyfill for Object.keys | |
| * | |
| * @see: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys | |
| */ | |
| if (!Object.keys) { | |
| Object.keys = (function () { | |
| var hasOwnProperty = Object.prototype.hasOwnProperty, | |
| hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'), | |
| dontEnums = [ |
| function exceptionalException(message) { | |
| 'use strict'; | |
| if (exceptionalException.emailErrors !== false) { | |
| exceptionalException.emailErrors = confirm('We had an error reporting an error! Please email us so we can fix it?'); | |
| } | |
| } | |
| //test | |
| //exceptionalException('try 1!'); | |
| //exceptionalException('try 2!'); |
