View-source fronteers.nl
mercredi 1 avril 2015 à 09:39les liens du Colibri 01/04/2015
<title>Fronteers — vakvereniging voor front-end developers</title>
<!-- We've discussed this internally, to use or not to use jQuery, but we've settled for yes for now. -->
<!-- TODO: investigate if we can make our app more snappy if we don't use jQuery, but something like Zetpo instead -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Paul Souders says this is the most performant way of including stylesheets -->
<!-- Yeah, and I've read some of Math Jazz Bynens' first comments on several blog posts. He agrees. Seems legit -->
<!-- NOTE: I thought his name was Steve Irish? -->
<script>var ref = document.getElementsByTagName('script')[0],el;</script>
<!-- Already 48.6% of our visitors are on mobile nowadays. We need to optimize for them, so let's include jQuery Mobile -->
<script>el=document.createElement('link');el.setAttribute('rel','stylesheet');el.setAttribute('href','//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css');ref.parentNode.insertBefore(el,ref);</script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<!-- We might implement overlays, let's drop in jQuery UI just in case -->
<!-- TODO: remove the autocomplete widget, because it's unusable in most cases (replace with the one Vera Leou just built) -->
<script>el=document.createElement('link');el.setAttribute('rel','stylesheet');el.setAttribute('href','//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css');ref.parentNode.insertBefore(el,ref);</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<!-- We have some legacy scripts hanging around, so we need MooTools, unfortunately -->
<!-- Oh man, those guys extended primitives! Remember that? Whahahaa, BooTools! -->
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>
<!-- We're going fancy with overruling browser navigation (super slick!), so we probably need to manage history -->
<!-- TODO: check out the API and if we're using it correctly. I've read something about a third parameter (title?) being ignored.. -->
<script src="//cdnjs.cloudflare.com/ajax/libs/history.js/1.8/bundled-uncompressed/html4+html5/jquery.history.js"></script>
<!-- Some of our pages have lots of images, so to improve the performance, we should lazyload those -->
<!-- TODO: Guys, I've found this great plugin that does just that! Added it for now, but we might need to do some changes in our markup. Something with data-attrs -->
<!-- WONTFIX: we can't change the markup, because this comes from the CMS. -->
<!-- TODO: Remove this script again -->
<!-- NOTE: Not sure, I believe we're using some of it on a custom landing page -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<!-- We have some more legacy scripts hanging around -->
<!-- TODO: Really, we need to update those $$ calls, jQuery is much better, and this would be one HTTP request less! -->
<!-- Todo: No, really, I've investigated our code, and this looks like a really simple change! -->
<!-- NOTE: Also inspected our codebase, but we're not using $$ anywhere. Sure you've been looking in our master branch? -->
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<!-- I believe someone is using the Yellow Fade Technique somewhere in our app, which requires Scriptaculous -->
<!-- Credits to 37signals for coming up with this gem! -->
<!-- NOTE: do we need these credits HERE? -->
<script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
<!-- Since our content managers can put in Flash movies. Oh ffs, how we hate Flash! -->
<!-- NOTE: Yeah, can't we just do like Apple did and give them the finger? -->
<!-- WONTFIX: Nope, every single one of our users is important. We're including it! -->
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<!-- Because loading fonts with @font-face is a pain in CSS and we don't want the FOUT -->
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<!-- Modernizr might be useful so our CSS department can hook into what different browsers support -->
<!-- LOL @ CSS department! You mean those designer hippies from the top floor? -->
<!-- LOL yeah, and stop using our repository for chatting :D -->
<!-- But this is all stripped during our build step, right? -->
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<!-- We're going to write our app with modules. Loading them with RequireJS is awesome. -->
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.16/require.min.js"></script>
<!-- We're going to use Bootstrap for our building blocks. Well, only for the parts we haven't designed yet, because it's so good -->
<script>el=document.createElement('link');el.setAttribute('rel','stylesheet');el.setAttribute('href','//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');ref.parentNode.insertBefore(el,ref);</script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Anyway, almost there. We're going to build our app using Angular, because it's so easy to build an MVC app with! -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!-- And React for our View layer. React is awesome! -->
<!-- NOTE: we might need something different for our Model Layer and our Controller Layer as well -->
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.min.js"></script>
<!-- Hold your horses! We've just had a meeting and we might be using Ember for this one -->
<!-- One of our devs just played with it this weekend and he really likes it. Besides, we don't want to depend on Google or Facebook, do we now? -->
<!-- Okay, already going to prime the caches, so our app loads quicker IF we decide to convert it to Ember -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<!-- Show a loader while our app kicks in -->
<!-- NOTE: So happy we decided to drop in jQuery UI, this is _exactly_ the UI element we need, and look at the amount of code required! -->
<!-- LOL you called CSS 'code'! TODO: turn this pice of CSShit into JS, where this belongs! -->
<style>/*.ui-loader { display: block; }*/</style>
<!-- NOTE: Am I doing this right? -->
<!-- NOTE: reviewed your patch. Much easier to maintain our modules this way! You see, it isn't that hard to write maintainable code -->
<script>window.onload = function() { jQuery('.ui-loader').css('display', 'block'); }</script>
<!-- TODO: reference our app (preferably using async loading, because we ❤ performance!) -->
<script src="/_js/appic.js"></script>
<!-- TODO: wrap everything in one single JS file, like Meteor does -->
<!-- NOTE: but then we'll lose our caching benefits! By the way, why aren't we using Meteor? -->
<!-- TODO: add “accessibility” when we're done. We're going to get angry Tweets otherwise! -->
<!-- NOTE: About that: I've heard someone is working on a11y.js or something, which automagically adds WHY-ARIA to everything! -->
<!-- Right, enough April fooling around :) Turn off JavaScript in your browser to turn on “Server-Side Rendering” for our website! -->
<!-- By the way, try browsing the Web _without JavaScript_ for a day, it's frightening how much we developers are breaking (yes, breaking!) nowadays! -->
<!-- Next time you're coming up with smart JS solutions, take a step back. The beauty of the Web lies in the combination of _all_ layers -->
Le fichier de l'app
// TODO: write our app (preferably before a new MVC framework pops up)
// I've copied the boilerplate from the docs so far.
// TODO: Already confused. What does Bootstrap have to do with this? That's only for widgets, no?
// TODO: Commented out for now, needs more investigation, next sprint!
// angular.element(document).ready(function() {
// angular.bootstrap(document, ['fronteersApp']);
// });
C'est génial comme truc. Petite leçon de webperf pour le 1er Avril.
Comme le dit @htmlvv La blague c'est le reste de l'année.
via https://twitter.com/htmlvv/status/583170405759729664
(Permalink)
<title>Fronteers — vakvereniging voor front-end developers</title>
<!-- We've discussed this internally, to use or not to use jQuery, but we've settled for yes for now. -->
<!-- TODO: investigate if we can make our app more snappy if we don't use jQuery, but something like Zetpo instead -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Paul Souders says this is the most performant way of including stylesheets -->
<!-- Yeah, and I've read some of Math Jazz Bynens' first comments on several blog posts. He agrees. Seems legit -->
<!-- NOTE: I thought his name was Steve Irish? -->
<script>var ref = document.getElementsByTagName('script')[0],el;</script>
<!-- Already 48.6% of our visitors are on mobile nowadays. We need to optimize for them, so let's include jQuery Mobile -->
<script>el=document.createElement('link');el.setAttribute('rel','stylesheet');el.setAttribute('href','//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css');ref.parentNode.insertBefore(el,ref);</script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<!-- We might implement overlays, let's drop in jQuery UI just in case -->
<!-- TODO: remove the autocomplete widget, because it's unusable in most cases (replace with the one Vera Leou just built) -->
<script>el=document.createElement('link');el.setAttribute('rel','stylesheet');el.setAttribute('href','//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css');ref.parentNode.insertBefore(el,ref);</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<!-- We have some legacy scripts hanging around, so we need MooTools, unfortunately -->
<!-- Oh man, those guys extended primitives! Remember that? Whahahaa, BooTools! -->
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>
<!-- We're going fancy with overruling browser navigation (super slick!), so we probably need to manage history -->
<!-- TODO: check out the API and if we're using it correctly. I've read something about a third parameter (title?) being ignored.. -->
<script src="//cdnjs.cloudflare.com/ajax/libs/history.js/1.8/bundled-uncompressed/html4+html5/jquery.history.js"></script>
<!-- Some of our pages have lots of images, so to improve the performance, we should lazyload those -->
<!-- TODO: Guys, I've found this great plugin that does just that! Added it for now, but we might need to do some changes in our markup. Something with data-attrs -->
<!-- WONTFIX: we can't change the markup, because this comes from the CMS. -->
<!-- TODO: Remove this script again -->
<!-- NOTE: Not sure, I believe we're using some of it on a custom landing page -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<!-- We have some more legacy scripts hanging around -->
<!-- TODO: Really, we need to update those $$ calls, jQuery is much better, and this would be one HTTP request less! -->
<!-- Todo: No, really, I've investigated our code, and this looks like a really simple change! -->
<!-- NOTE: Also inspected our codebase, but we're not using $$ anywhere. Sure you've been looking in our master branch? -->
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<!-- I believe someone is using the Yellow Fade Technique somewhere in our app, which requires Scriptaculous -->
<!-- Credits to 37signals for coming up with this gem! -->
<!-- NOTE: do we need these credits HERE? -->
<script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
<!-- Since our content managers can put in Flash movies. Oh ffs, how we hate Flash! -->
<!-- NOTE: Yeah, can't we just do like Apple did and give them the finger? -->
<!-- WONTFIX: Nope, every single one of our users is important. We're including it! -->
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<!-- Because loading fonts with @font-face is a pain in CSS and we don't want the FOUT -->
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<!-- Modernizr might be useful so our CSS department can hook into what different browsers support -->
<!-- LOL @ CSS department! You mean those designer hippies from the top floor? -->
<!-- LOL yeah, and stop using our repository for chatting :D -->
<!-- But this is all stripped during our build step, right? -->
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<!-- We're going to write our app with modules. Loading them with RequireJS is awesome. -->
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.16/require.min.js"></script>
<!-- We're going to use Bootstrap for our building blocks. Well, only for the parts we haven't designed yet, because it's so good -->
<script>el=document.createElement('link');el.setAttribute('rel','stylesheet');el.setAttribute('href','//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');ref.parentNode.insertBefore(el,ref);</script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Anyway, almost there. We're going to build our app using Angular, because it's so easy to build an MVC app with! -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!-- And React for our View layer. React is awesome! -->
<!-- NOTE: we might need something different for our Model Layer and our Controller Layer as well -->
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.min.js"></script>
<!-- Hold your horses! We've just had a meeting and we might be using Ember for this one -->
<!-- One of our devs just played with it this weekend and he really likes it. Besides, we don't want to depend on Google or Facebook, do we now? -->
<!-- Okay, already going to prime the caches, so our app loads quicker IF we decide to convert it to Ember -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<!-- Show a loader while our app kicks in -->
<!-- NOTE: So happy we decided to drop in jQuery UI, this is _exactly_ the UI element we need, and look at the amount of code required! -->
<!-- LOL you called CSS 'code'! TODO: turn this pice of CSShit into JS, where this belongs! -->
<style>/*.ui-loader { display: block; }*/</style>
<!-- NOTE: Am I doing this right? -->
<!-- NOTE: reviewed your patch. Much easier to maintain our modules this way! You see, it isn't that hard to write maintainable code -->
<script>window.onload = function() { jQuery('.ui-loader').css('display', 'block'); }</script>
<!-- TODO: reference our app (preferably using async loading, because we ❤ performance!) -->
<script src="/_js/appic.js"></script>
<!-- TODO: wrap everything in one single JS file, like Meteor does -->
<!-- NOTE: but then we'll lose our caching benefits! By the way, why aren't we using Meteor? -->
<!-- TODO: add “accessibility” when we're done. We're going to get angry Tweets otherwise! -->
<!-- NOTE: About that: I've heard someone is working on a11y.js or something, which automagically adds WHY-ARIA to everything! -->
<!-- Right, enough April fooling around :) Turn off JavaScript in your browser to turn on “Server-Side Rendering” for our website! -->
<!-- By the way, try browsing the Web _without JavaScript_ for a day, it's frightening how much we developers are breaking (yes, breaking!) nowadays! -->
<!-- Next time you're coming up with smart JS solutions, take a step back. The beauty of the Web lies in the combination of _all_ layers -->
Le fichier de l'app
// TODO: write our app (preferably before a new MVC framework pops up)
// I've copied the boilerplate from the docs so far.
// TODO: Already confused. What does Bootstrap have to do with this? That's only for widgets, no?
// TODO: Commented out for now, needs more investigation, next sprint!
// angular.element(document).ready(function() {
// angular.bootstrap(document, ['fronteersApp']);
// });
C'est génial comme truc. Petite leçon de webperf pour le 1er Avril.
Comme le dit @htmlvv La blague c'est le reste de l'année.
via https://twitter.com/htmlvv/status/583170405759729664
(Permalink)