| entry |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
This one is a short one, just to confirm that finally <code>Object.setPrototypeOf(obj, proto)</code> <a href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts#current_working_draft">made it into ES6</a>.<br/>The section <strong>15.2.3.2</strong> speaks clearly: <blockquote><strong>15.2.3.2 Object.setPrototypeOf ( O, proto )</strong><br/>When the <code>setPrototypeOf</code> function is called with arguments O and proto, the following steps are taken: <ol><li>If Type(O) is not Object, then throw a <strong>TypeError</strong> exception.</li><li>If Type(proto) is neither Object or Null, then throw a <strong>TypeError</strong> exception.</li><li>Let status be the result of calling the [[SetInheritance]] internal method of O with argument proto.</li><li>ReturnIfAbrupt(status).</li><li>If status is false, then throw a <strong>TypeError</strong> exception.</li><li>Return O.</li></ol></blockquote>Without going into details, the most basic polyfill woud be like this: <pre class="code"><br />(function(O,s){<br />O[s]||(O[s]=function(o,p){o.__proto__=p;return o})<br />}(Object,'setPrototypeOf'));<br /></pre>If you want to go into details, the full reliable polyfill is hard to write down due all inconsistencies across JS engines out there where the __proto__ setter cannot be reused which means it's not possible to trust this magic over objects created from null.<br/>All you need to do is forget __proto__ and use the suggested polyfill until the day __proto__ can simply disappear from those specs pages.<br/>Enjoy! <hr/>This is a full polyfill with some extra info you might want to analyze, whenever ployfill is strictly true or false.<br/><script src="https://gist.github.com/WebReflection/5593554.js"></script>
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-2346263200788268260
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/05/objectsetprototypeofo-proto-is-in-es6.html
|
| rel |
alternate
|
| title |
Object.setPrototypeOf(O, proto) IS in ES6
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/2346263200788268260/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=2346263200788268260
|
| rel |
replies
|
| title |
3 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/2346263200788268260
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/2346263200788268260
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-05-16T04:29:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Object.setPrototypeOf(O, proto) IS in ES6
|
|
| updated |
2013-05-17T22:58:20Z
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<p>While the JavaScript weekly mailing list still <a href="https://twitter.com/WebReflection/status/327833810580434944">points to 90s style articles about the old JavaScript Internet Explorer 5 was supporting too</a>, the current world has different real problems to consider.<br/> Here a quick list of things you might not know about the current status of JavaScript possibilities. </p> <h3>Reserved Words As Properties</h3><p>Number one of the list is the myth that reserved words cannot be used as properties. Here platforms that cannot: </p><ol><li>iOS 4</li><li>IE less than 9</li><li>Android less than 2.1</li></ol><p>So, basically, 99% of mobile browsers support properties such <code>obj.delete()</code>, used in most recent JavaScript specifications, while those jurassic browsers need the <code>obj['delete']()</code> convention. </p> <pre class="code"><br />// exactly same good old ES3 behavior<br />// using ES5 capabilities<br />Function.prototype.new = function () {<br /> var<br /> // grab the prototype<br /> p = this.prototype,<br /> // create from it<br /> o = Object.create(p),<br /> // invoke the real constructor<br /> r = this.apply(o, arguments);<br /> // if the result is not undefined or null<br /> // and the returned value is an object/function<br /> // overwrite the result<br /> return r != null && (<br /> typeof r === 'object' ||<br /> typeof r === 'function'<br /> ) ? r : o;<br />};<br /><br />// you can be Rubyish now ^_^<br />var instance = MyClass.new(1, 2, 3);<br /><br />// P.S. if you have problems with JSLint<br />// and the r != null part in above snippet<br />// it's just time for you to upgrade to JSHint<br /></pre> <h4>Please Do Not Support Too Old Browsers</h4><p>As easy as that. As a developer, company, software provider, whatever, you are trapping yourself behind problems that will never be fixed in those browsers and you are limiting your customer too, embracing development for such old environment, instead of promoting an update that will benefit them in terms of both potentials, expenses, and security.<br/>Any company that will say no to that should be kindly be abandoned, IMHO, they're already out of web/JS business and they don't realize yet.<br/>I understand some graceful measurement should be taken in order to migrate old users, but as long as they feel confortable, they won't migrate sooner for sure.<br/>Customers or people we'd like to let them access our service, should be informed somehow of new possibilities too. </p> <h4>Apple Drops 3 Years Old Software Too</h4><p>If <a href="https://developer.apple.com/news/index.php?id=3212013b">Apple not accepting non retina software anymore</a> is not enough as an argument, think how many possibilities you are dropping to your software in order to work the same in those old browsers.<br/>You chose Web technologies, you should catch up with these, end of the story. </p> <h3>Object.defineProperty() *Is* Available</h3><p>Even my Palm Pre 2 webOS supports <code>Object.defineProperty()</code>, together with <code>Object.defineProperties()</code>, <code>Object.getPrototypeOf()</code> and <code>Object.getOwnPropertyDescriptor()</code>!<br/>If you don't want to deal with all this verbosity but you like the power behind, <a href="https://github.com/WebReflection/redefine#redefinejs">redefine</a> is really your best friend then! </p><p>The most widely adopted list of ES5 features down to Android 2.1 phones and webOS are: </p><ol> <li><code>Object.create()</code></li> <li><code>Object.defineProperty()</code></li> <li><code>Object.defineProperties()</code></li> <li><code>Object.getOwnPropertyNames()</code></li> <li><code>Object.getOwnPropertyDescriptor()</code></li> <li><code>Object.getPrototypeOf()</code></li></ol><p>Things like <code>Object.freeze()</code> might have been introduced later on so don't trust them ... but, whenever you wanna try that: </p><pre class="code"><br />var freeze = Object.freeze || Object;<br />freeze({}); // frozen where possible<br /><br />function returnFrozen(object) {<br /> return (Object.freeze || Object)(object);<br />}<br /></pre><p>As it is for <code>"use strict";</code> and all other things that works best natively, above technique will work with <code>Object.seal()</code>, <code>Object.preventExtensions()</code>, and why not, a shimmable <code>Object.isExtensible()</code></p><pre class="code"><br />'isExtensible' in Object || (function(){<br /> // no way ES3 can prevent extension so ...<br /> Object.isExtensible = function (object) {<br /> // ... if an object, it's extensible<br /> return object != null && (<br /> typeof object === 'object' ||<br /> typeof object === 'function'<br /> )<br /> };<br />}());<br /></pre> <h3>Function.prototype get caller() {return WTF}</h3><p>Generally speaking the <code>caller</code> property works since ever but there are cases where it does not and this is <strong>iOS5</strong> and lower fault.<br/>What am I talking about? About <a href="https://bugs.webkit.org/show_bug.cgi?id=45480">caller over getters</a>, with or without <code>__defineGetter__</code> old style approach, the new one fails too ^_^<br/>Bear in mind iOS 5.1 and 6.0+ are just fine so you can still use that magic, if needed.<br/>Note a part, <a href="http://www.mail-archive.com/es-discuss@mozilla.org/msg19359.html">that magic ain't disappearing any time soon</a> so ... go on, use <code>caller</code> until there is an alternative: so far, not a single one ^_^ </p> <h3>Function.prototype.bind()</h3><p>It took literarily ages for WebKit to adopt this method so this is something available in all modern browsers but most likely not available with not so old mobile one: easy shim from <a href="https://github.com/WebReflection/caller-of">callerOf</a>! </p><pre class="code"><br />(function (P, l) {<br /> 'use strict';<br /> if (!P.bind) {<br /> P.bind = function (s) {<br /> var<br /> c = this,<br /> a = l.call(arguments, 1);<br /> return function bind() {<br /> return c.apply(s, a.concat(l.call(arguments)));<br /> };<br /> };<br /> }<br />}(Function.prototype, [].slice));<br /></pre><p>This is the kind of code that I would like to see in CDN, not just 50K libraries for client sake! </p> <h3>Avoid __proto__</h3><p>Not only conceptually an error and used only to gain some arguable performance boost, <code>__proto__</code> is absolutely something that IE 10 and 9 will never have in a consistent way. </p><p>If you want to transform a list into an array, just <code>var slice = Function.call.bind([].slice);</code> so that you can <code>slice(whatever, optionalIndex)</code> ALL the things, right? The <code>bind()</code> is there and costs nothing ... just use it! </p> <h3>Better Than Zepto</h3><p>What <a href="https://github.com/madrobby/zepto/commit/66d84a05f8460f00dcf62cb610c0f12f606eff03#L0R138">this library is doing</a>, except from <a href="http://ie.microsoft.com/testdrive/mobile/">ignoring IE as a Mobile browser</a>, is a poor/quick&dirty design/convention to obtain a prototype swap instead of initializing things in the right way.<br/>The previously linked code could be represented by exactly the same syntax: </p><pre class="code"><br />// an IE9 and 10 compatible zero bullshit Zepto core<br />var emptyArray = [];<br />zepto.Z = function(dom, selector) {<br /> var result = Object.create($.fn);<br /> emptyArray.push.apply(<br /> result, dom || emptyArray<br /> );<br /> result.selector = selector || '';<br /> return result;<br />}<br /></pre><p>While <a href="http://jsperf.com/proto-vs-noproto">performance might not be that good in some engine</a>, and everybody knows that you should never <code>$('select')</code> twice per collection so actually, considering above snippet goes 400.000 objects per seconds, that's not a big/real deal at all!<br/>If that is, I tell you something else is wrong in the app logic!<br/>In any case, <strong>actually</strong>, there's some mobile platform there, those Zepto thinks is supporting, that scores more with lower results than with a prototype swap, which is the most common selector case, BlackBerry 10 is 8 thousands operations per seconds there compared with <code>__proto__</code><br/>Thomas Fuchs has been so nice in his repository I cannot even push/contributes these improvements ... surely <a href="https://github.com/madrobby/zepto/pull/736#issuecomment-16857282">he would get this one as an insult too</a>, isn't it? </p> <h3>A Swap Oriented __proto__ Attempt</h3><p>Assuming you still want to swap runtime classes because you cannot define a proper inheritance upfront, here a broken attempt to do that in IE8 and lower: </p><pre class="code"><br />object = dunder(object, proto);<br /></pre> <h4>what's dunder()</h4><p><a href="https://github.com/WebReflection/dunder">dunder()</a> is my attempt to bring a friendly cross platform way, included older IE, to swap proto at runtime.<br/>It requires an assignment so, back to Zepto example, <code>return dunder(dom || [], $.fn)</code> would be all you need to make it work everywhere. </p> <h3>JSON.stringify(object, *replacer*)</h3><p>This is Safari specific gotcha, and it's about the replacer.<br/>While <a href="http://es5.github.io/#Walk">specs say</a> that <code>Let newElement be the result of calling the abstract operation Walk, passing val and **ToString**(I)</code>, Safari will send to the receiver the number <code>0</code> instead of the string <code>'0'</code>.<br/>What's the big deal here? That in JavaScript, <code>0 == false</code> while <code>'0' == true</code> so ... if you have this kind of check in your receiver thinking that if empty, nothing should be done: </p><pre class="code"><br />if (key) {<br /> // parse your value<br />}<br /></pre><p>Improve that check with <code>if (key === '')</code>, probably the only place on earth where JSLint would have helped you for real instead of messing up your own code. </p><p>And for today, that's all folks! </p>
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-5220325424155488363
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/04/few-modern-javascript-inconsistencies.html
|
| rel |
alternate
|
| title |
Few Modern JavaScript Inconsistencies
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/5220325424155488363/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=5220325424155488363
|
| rel |
replies
|
| title |
7 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/5220325424155488363
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/5220325424155488363
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-04-27T08:56:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Few Modern JavaScript Inconsistencies
|
|
| updated |
2013-04-29T18:55:00Z
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<p>This is a long story that started with me buying a <a href="http://www.raspberrypi.org/">Raspberry Pi</a> with the goal of discovering how good performance could have been in such device used as dedicated server.<br/>The story goes on with pcDuino too, and tricks you might want to know about booting up and building node on them. </p> <h3>Why A Pi As A Server</h3><p>The story of computers is not actually that fair for same computers, as not fair is the <a href="http://en.wikipedia.org/wiki/Moore's_law">Moore's law</a> itself.<br/>Bear in mind, I am not saying that's not working, all I am saying is that if in 6 months we've got double amount of transistors in some CPU, this does not mean we've been used the previous CPU at its best for last 6 months! </p><p>Gaming, immortal, consoles such <a href="http://us.playstation.com/ps2/">PS2</a> can describe better than my words what I am talking about: hardware is good until what you need does not fit under that 100% of potentials! </p> <h3>ARM Is Powerful</h3><p>Not only is becoming one of the most ambitious target for any Operating System, probably including Microsoft, ARM is also both powerful and power consumption aware, something we've never rarely thought about before .. I mean, a server that does not need much electricity so that if some blackout happens it does not dry whatever counter blackout part is playing in the building? And what about a web farm? </p> <h3>A Raspberry Pi Web Hosting Colocation</h3><p>Yes, it's not just me, and actually ... WTF!<br/>When I've invested a bit of extra time trying to have up and running my own idea of a co-location, <a href="http://raspberrycolocation.com/">raspberrycolocation.com</a> was born instead and sold out ... gosh I'm always late at the party!<br/>What this smart guys did, is to offer a full server for about $50, being absolutely the most competitive dedicated server company in the world right now ... that's as easy as that .... <strong>but</strong> ... </p> <h3>Arch linux</h3><p>What those guys offer is a colocation for your own Pi, a device I honestly would never put into anybody else hands (and that's the feeling you have when that little thing works as hell with awesome performance under your own software) over the Raspbian distro, surely a stable, well tested, etc, etc linux based OS, unfortunately kinda/"slightlier" heavy :(<br/>R-Pi aim is to be a cheap replacement for a PC and in this case Raspbian is the most suitable distro you have there.<br/>However, if you are planning to do something different that does not requires a GUI, and RAM is only 512 there, or any other extra thing on top, Arch Linux becomes the best alternative for this device. </p><p>The part I love the most about <a href="https://www.archlinux.org/">Arch Linux</a>, is that it basically embraces my same philosophy when it comes to JavaScript or, generally speaking, programming with dependencies .... the less I have and the more I know about the app, the faster I move when it comes to add something, fix something, or experiment! (you should try this approach instead of putting, as example, jQuery or Zepto by default in your web page, it works, trust me!) </p> <h4>Living On The Edge</h4><p>This Aerosmith song is probably looping inside any Arch Linux contributor, as this distribution is nothing about having frozen modules that pass some test and until tested everywhere else will never work, this distro is about having always the latest available software in your system, which will result in a freaking cool, always updated one, as ready for production as much as your node.js project or website is ... I mean, isn't modern JavaScript culture about serving what's the best thing available today? I love that too! </p> <h4>410+ MB of RAM</h4><p>You don't need me to try the Raspbian distro and check how much <code>require('os').freemem();</code> command will return in node pre 0.11.2, you can install the package instead of compiling it on the hardware as I am doing, and do the math.<br/>If the device has 512MB of RAM, 410+ after OS booted in about 8 seconds ain't that bad, right? And I am sure the distro coul dbe even more minimalistic ... as it is, as example in the following platform: </p> <h3>The Allwinner 10</h3><p>If I have to be honest with you, <a href="http://www.allwinner.com/product/A10.php">I would rather consider this platform</a>, or any of its new derived, more than a Pi.<br/>I know, kids price not so friendly, but here you have an ARMv7 with most likely at least 1Ghz of clock speed and 1GB of RAM over some NAND which is alwas faster than inboard SD controller (I'll come back on this part too) </p> <h4>The <a href="http://www.pcduino.com/">pcDuino</a> Case</h4><p>As example, you can have an Arch Linux distro able to boot up in 6 seconds into node.js, with an average of <code>0.3%</code> of <strong>CPU</strong> usage via <em>SSH</em> to monitor what's going on behind the <code>top</code> scene! </p><p>If you try to do the same with the minimalistic full Desktop version of Ubuntu for this device, you'll notice at least <em>6 to 9% of default CPU usage</em> because of the graphic OS, plus <em>691511296</em> of available RAM after boot against a <code>require('os').freemem()</code> resut of <em>797020160</em> for the Arch Linux headless distro .. yeah, you heard that right! </p> <h4>Slow Down, You Punk!</h4><p>While Raspberry Pi has a pretty decent and complete image of Arch Linux that includes all hardware activation at boot time, no led excluded, pcDuino is kinda "problematic" as any Allwinner platform is because of the not so stable graphic videos ... who cares indeed! </p><p>If your goal is to have a dedicated server on the palm of your hand, the graphic whatever is something you won't care at all. I agree this might sound confusing at the beginning, if you are not familiar with linux bootable distros, but hey ... the video is such a pain in your spine I am not sure you really want to know how to fix that, do you? </p> <h3>Install Arch Linux In Allwinner A10 ARM Devices</h3><p><a href="http://archlinuxarm.org/forum/viewtopic.php?f=9&t=5334&start=10">This post</a> and its <i>welcomeness</i> are kinda the beginning of the story about Arch Linux.<br/>What you think makes sense for an OS ... well, you are already out of sync: Arch is kinda the skeleton of that OS, anything else is your choice/matter/problem/duty, if you want to support that platform. </p> <h4>Even More Annoying</h4><p>Is not just the fact if you are noob in *nix world you should drop this distro by default since nobody wants to deal with you, <a href="http://archlinuxarm.org/platforms/armv7/pcduino">the instructions</a>, even if you are part of that world, are kinda crap too. </p> <h4>Thank You <a href="http://andre.blaatschaap.be/">André</a></h4><p>Despite André post talks about a different A10 board, the used code is clearly something you might find handy, once re-elaborated as such: </p><script src="https://gist.github.com/WebReflection/5450375.js"></script><p>In my case I had to: </p><pre><br />sh a10.sh /dev/sdb pcduino-bootloader.tar.gz pcduino<br /></pre><p>after changing things might be different for other A10 boards. </p> <h3>As Result</h3><p>I've been impressed by <a href="https://github.com/WebReflection/polpetta#-polpetta">polpetta</a> performance, as generic hard drive surfer/common intra-cloud, on a network of 15+ devices: not a glitch over these platforms under hand compiled node.js 11.2 versions.<br/>The average ping for this device in the network is 1.3 milli seconds, which is nothing!<br/>Are you sure your initial web business demands much more as dedicated server?<br/>What if a $40 dollars board plus SD card is all you need, to measure your startup success? </p> <h3>What's With SD Cards</h3><p>The situation around SD Cards is awkward at least. So here the thing, I haven't spot any difference between an <a href="http://www.sandisk.com/products/memory-cards/microsd/extremepro-uhs-i/?capacity=8GB">8GB Extreme Pro</a> SanDisk micro SD Card, and an <a href="http://www.sandisk.com/products/memory-cards/microsd/ultra-class10-for-android/?capacity=32GB">Ultra 32GB</a> version of the micro usb card ... but more over, I don't think you need such amount of space for any of these devices since even looping through FileSystem tables has a cost I believe your cheap ARM dedicated web server should not take into consideration ;) </p><p>Have fun with hints on the web about how to build your first dedicated web host in no more than $100 for years, network a part! </p>
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-9044586168337570393
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/04/boot-to-nodejs-in-7-seconds-on-arch.html
|
| rel |
alternate
|
| title |
Boot To Node.js In 7 Seconds On Arch Linux
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/9044586168337570393/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=9044586168337570393
|
| rel |
replies
|
| title |
1 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/9044586168337570393
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/9044586168337570393
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-04-24T08:07:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Boot To Node.js In 7 Seconds On Arch Linux
|
|
| updated |
2013-04-24T08:07:22Z
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<p>© all images from <a href="http://ragefac.es/">ragefac.es</a> and some from <a href="http://knowyourmeme.com/">knowyourmeme</a><br/>Being a comic, sentences are not all real, mostly made up for this post. </p> <h4>TC39</h4><p>WTF is this shit?! </p><img width="200" src="http://ragefaces.s3.amazonaws.com/503cff15ae7c707d56000007/966412cc1838c13ee0349b4a05a17802.png"/> <h4>es-discuss</h4><p>The community needs it and the de-facto library with stars on github uses that instead of <code>[].push.call(new SimplifiedDOMShit, NodeListResult)</code></p><img width="200" src="http://ragefaces.s3.amazonaws.com/504083e1ae7c70058a000007/1f599c7cc95c3e4ff801a024cba54af4.png"/> <h4>TC39</h4><p>OK, here what we can spec ... making it configurable, so that shit can be dropped at any time in any module </p><img width="200" src="http://ragefaces.s3.amazonaws.com/50420161ae7c705103000001/facepalm-startrek.png"/> <h4>es-discuss</h4><p>Community, we are going to spec <codo>__proto__</code> shenanigans all over so that any environment will have a special property able to cause more disasters than what <code>eval</code> did before: you should appreciate! </p><img width="200" src="http://ragefaces.s3.amazonaws.com/504083e1ae7c70058a000007/1f599c7cc95c3e4ff801a024cba54af4.png"/> <h4>community</h4><p>so, proto gonna be standard we don't have to change those 2 lines of code?! </p><img width="200" src="http://ragefaces.s3.amazonaws.com/503e51d3ae7c700dcb0000c3/418640e644cacf9b47a464cc758f2019.png"/> <h4>me plus some other</h4><p>what kind of horrible decision is this? </p><img width="200" src="http://ragefaces.s3.amazonaws.com/5041e193ae7c704e28000009/terrified.png"/> <h4>es-discuss</h4><p><cite>de-facto is de-facto</cite>, people use this, people want this! IE ... who cares ! </p><img width="200" src="http://ragefaces.s3.amazonaws.com/504083e1ae7c70058a000007/1f599c7cc95c3e4ff801a024cba54af4.png"/> <h4>just me</h4><p>OK, probably this is just a massive misunderstanding between what's truly needed, and what should be proposed ... let's try to fight back in es-discuss ... </p><img width="200" src="http://ragefaces.s3.amazonaws.com/503e40b2ae7c700dcb00009e/65d8b4ec625b745f30bd222de938f6e1.png"/> <h4>es-discuss</h4><p>You don't understand, you are late, even if not spec'd yet, you are really late </p><img width="200" src="http://ragefaces.s3.amazonaws.com/504083e1ae7c70058a000007/1f599c7cc95c3e4ff801a024cba54af4.png"/> <h4>just me</h4><p>I gonna show you that JavaScript developers understand this is a no-go and it's bad for the language they use on daily basis as bad, and even worse than boring <code>hasOwnProperty</code> check has been for all these years! </p><img width="200" src="http://ragefaces.s3.amazonaws.com/503e3c0dae7c700dcb000059/8258ec1e8eb8e366c4ce496df611bf80.png"/> <h4>still me</h4><p>Hello Zepto, somebody thinks we are all bigots unable to make simple changes ... here the patch for you repo, it's green, it works, it has no side effect, it demonstrates we are not bigots, what do you say? </p><img width="200" src="http://ragefaces.s3.amazonaws.com/50410019ae7c70217a000012/b8189952eafb6c21a94e7961bc1a4a14.png"/> <h4>Zepto.js</h4><p>You <cite>White Knight</cite> bla, bla, bla ... horse shit bla ... </p><img width="200" src="http://www.3site.eu/images/zepto.png"/> <h4>just me</h4><p>WTF? I can't even explain myself there, they blocked me ... what should I do? </p><img width="200" src="http://ragefaces.s3.amazonaws.com/503e3b03ae7c700dcb000057/1e6b90eb5b4fd404356004c534bfa613.png"/> <h4>still just me</h4><p>... well, I gonna see if at least node.js community, with much more unified environment, <a href="https://github.com/joyent/node/pull/5341#issuecomment-16698948">would accept a proposal</a>... </p><img width="200" src="http://ragefaces.s3.amazonaws.com/503e3c6eae7c700dcb000061/fbce935cecab355b9d5e8f300f1cb18b.png"/> <h4>still me</h4><p>Hello node, here a patch that is waiting for a patch in V8 so the patch gonna patch the patch, what do you say? </p><img width="200" src="http://ragefaces.s3.amazonaws.com/50410019ae7c70217a000012/b8189952eafb6c21a94e7961bc1a4a14.png"/> <h4>node.js</h4><p><cite>We don't extend the language and we don't impose coding standards on our users.</cite></p><img width="200" src="http://ragefaces.s3.amazonaws.com/50408475ae7c70058a00000d/b4a228d250fe2d155e6e9ff2fae3957a.png"/> <h4>again me</h4><p>Will you consider at least this .. or that ... ? </p><img width="200" src="http://ragefaces.s3.amazonaws.com/503e3715ae7c700dcb000032/8369578306dbfa070fc8c051311108bf.png"/> <h4>again node.js</h4><p><cite>But we're not going to float a patch that adds this feature to V8</cite></p><img width="200" src="http://i3.kym-cdn.com/photos/images/newsfeed/000/232/114/e39.png"/> <h4>still just me</h4><p>... well, I gonna see if at least V8 will accept my flag that gonna affect node at startup ... </p><img width="200" src="http://ragefaces.s3.amazonaws.com/506dfa12ae7c7001e4000002/okay.png"/> <h4>V8</h4><p>Well, I don't know if <a href="https://code.google.com/p/v8/issues/detail?id=2645">V8 will ever accept my patch</a> (pleas star that!) but actually there is no reason to not accept it, it does not change anything in core, it does not affect anythign around, is something that if explicitly set, enable something that might be specified like that in ES6 in any case so together with all harmony flags and stuff usable when you run <code>d8</code> or <code>node</code>, what could possibly go wrong?<br/>Let me hope, at least, this is not a conspiracy against my mental sanity ... and <a href="https://code.google.com/p/v8/issues/detail?id=2645">if you star it</a> it might go in before node 1 is released, thank you! </p><img width="200" src="http://ragefaces.s3.amazonaws.com/50420321ae7c705166000001/sooo-cute.png"/> <p>sad thing is, Zepto patch was not affecting Zepto performance or logic, neither was breaking things.<br/>Same thing was for node.js, so I started doubting JS community is able to be proactive when it comes to decisions made somewhere else and for the community.<br/>Developers are pragmatic, they use what's available at that time. If this means create a standard out of it, JavaScript will be anarchy and not a language anymore.<br/>And this, my friend, is unfortunately a specifications circle that is not bringing only good things to the JavaScript as your favorite programming language. </p>
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-138919135615567944
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/04/the-proto-comic.html
|
| rel |
alternate
|
| title |
The __proto__ Comic
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/138919135615567944/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=138919135615567944
|
| rel |
replies
|
| title |
0 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/138919135615567944
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/138919135615567944
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-04-21T05:34:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
The __proto__ Comic
|
|
| updated |
2013-04-21T06:53:54Z
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<p>What my <a href="http://en.wikipedia.org/wiki/Don_Quixote">Don Quixote</a> like <a href="http://webreflection.blogspot.com/2013/04/a-journey-to-v8-objectsetproto-native.html">adventure</a> against <code>__proto__</code> gave me, if nothing, is a better understanding about how <a href="https://code.google.com/p/v8/">V8 engine</a> internals work and how to bind JavaScript to native and vice-versa. </p> <h4>Please Note</h4><p>Nobody told me anything I've written in this article is true. These are all assumptions <a href="https://code.google.com/p/v8/issues/detail?id=2645">after pushing a patch to V8</a> and learning by mistakes, compilation errors, and "<em>code around reading</em>", done in a couple of hours so apologies in advance if some term or some concept is not perfectly and deeply explained.<br/>Let's start with this! </p> <h3>JavaScript In JavaScript</h3><p>This was kinda surprising to me, almost the whole ECMAScript is implemented in JavaScript itself.<br/>In few words, what <em>V8</em> does is not something like <a href="https://developer.mozilla.org/en-US/docs/Rhino">Rhino</a>, reimplementing the whole language via a statically compiled one as Java is in Rhino case, <em>V8</em> is rather <em>the compiler</em> for the specific ES syntax, following an example ... </p> <h3>JSON In JavaScript</h3><p>It's funny when we compare in jsperf <a href="http://jsperf.com/json-vs-jquery-json/2">json2 vs native vs jQuery.json vs json3</a> etc etc, knowing that <a href="https://code.google.com/p/v8/source/browse/trunk/src/json.js">V8 native JSON</a> is 90% JavaScript, isn't it? </p><pre class="code"><br />// just a chunk/example from V8 JSON<br />function JSONParse(text, reviver) {<br /> var unfiltered = %ParseJson(TO_STRING_INLINE(text));<br /> if (IS_SPEC_FUNCTION(reviver)) {<br /> return Revive({'': unfiltered}, '', reviver);<br /> } else {<br /> return unfiltered;<br /> }<br />}<br /></pre><p>Above snippet is simply a compact one with few things non common in Javascript: <code>%PrefixedFunctions()</code>, and <code>UPPERCASE_FUNCTIONS()</code>.<br/>These could or could not be bound in any V8 JavaScript files and we can see these JS files are those that will create the JS environment we are going to use but let's see how those special things work, OK? </p> <h3>Interoperation Between C++ And JavaScript</h3><p><a href="https://code.google.com/p/v8/source/browse/trunk/src/runtime.cc">runtime.cc</a> and <a href="https://code.google.com/p/v8/source/browse/trunk/src/runtime.h">runtime.h</a> files are dedicated to, as the name suggests, runtime JavaScript calls into C++ world.<br/>The <a href="https://code.google.com/p/v8/source/browse/trunk/src/runtime.js">runtime.js</a> files contains instead many JS functions used internally to satisfy ECMAScript specifications but not exposed to the outer world.<br/>Bear in mind latter is not the only file that has not exposed JavaScript, while everything that will go out is defined at bootstrap, as you would expect, per each global context (here why two sandboxes have different native constructors) and you can find it in the <a href="https://code.google.com/p/v8/source/browse/trunk/src/bootstrapper.cc#829">bootstrapper.cc</a> file.<br/>Scroll a bit, and you'll see how all known Array, String, Boolean, etc, are initialized, while in <a href="https://code.google.com/p/v8/source/browse/trunk/src/array.js#1483">array.js</a> you can see how the prototype is created: it's again a mix of native and JavaScript, passing though macros! </p> <h4 id="RUNTIME_FUNCTION">How To RUNTIME_FUNCTION</h4><pre class="code"><br />RUNTIME_FUNCTION(<br /> // return type, for JS interaction<br /> // will be a MaybeObject* one<br /> MaybeObject*,<br /><br /> // the exposed %DoNotExposeProtoSetter()<br /> // function in the hidden JS world<br /> // behind the user available scene<br /> Runtime_DoNotExposeProtoSetter<br />) {<br /> // isolate pointer is necessary to access<br /> // heap and all JS types in C++<br /> // even true or false are a specific type<br /> // we cannot return true directly, as example<br /> // or the type won't match<br /> NoHandleAllocation ha(isolate);<br /> // in this case, returning true or false<br /> // does not require allocation or new objects<br /> // we can simply use what's already in the heap<br /> return FLAG_expose_proto_setter ?<br /> // this is a flag defined at d8 launch,<br /> // I'll go there too<br /> isolate->heap()->false_value() :<br /> isolate->heap()->true_value();<br /> // returns a JS false or a JS true on<br /> // %DoNotExposeProtoSetter() invocation<br />}<br /></pre><p>Above function is the same I've used for the patch, it does not accept a thing, it checks a generic program flag and returns true or false accordingly.<br/>As every developer with a bit of C background knows, when a function is declared, it should be defined in the file header too, so here the runtime.h declaration: </p><pre class="code"><br /> /* __proto__ Setter */ \<br /> F(DoNotExposeProtoSetter, 0, 1) \<br /> \<br /></pre><p><code>F</code> is the common shortcut for <code>RUNTIME_FUNCTION_LIST_ALWAYS_N</code> while the first argument is the length of accepted arguments, <code>-1</code> if unknown or dynamic.<br/>The second argument seems to be a default for all functions, stick with <code>1</code> and things gonna be fine. </p> <h4>Dealing With JS Objects</h4><p>My patch has a quite simplified signature, if you are aiming to accept and/or return objects, you should do things in a slightly different way, here an example: </p><pre class="code"><br />// function call :-)<br />RUNTIME_FUNCTION(MaybeObject*, Runtime_Call) {<br /> // required to handle the current function scope<br /> HandleScope scope(isolate);<br /> // arguments are checked runtime, always<br /> ASSERT(args.length() >= 2);<br /> int argc = args.length() - 2;<br /> CONVERT_ARG_CHECKED(JSReceiver, fun, argc + 1);<br /> // the `this` context :-)<br /> Object* receiver = args[0];<br /><br /> // If there are too many arguments,<br /> // allocate argv via malloc.<br /> const int argv_small_size = 10;<br /> // now you know, functions with more than 10 args<br /> // are slower :-)<br /> Handle<Object> argv_small_buffer[argv_small_size];<br /> // ...<br /><br /> // in case it needs to throw an error ...<br /> bool threw;<br /> Handle<JSReceiver> hfun(fun);<br /> Handle<Object> hreceiver(receiver, isolate);<br /><br /> // the result, could be undefined too,<br /> // which is a type indeed<br /> Handle<Object> result =<br /> // note, threw passed by reference<br /> Execution::Call(hfun, hreceiver, argc, argv,<br /> &threw, true);<br /><br /> // do not return anything if there was an error<br /> if (threw) return Failure::Exception();<br /><br /> // eventually, we got a function.call()<br /> return *result;<br /> // don't you feel a bit like "f**k yeah" ?<br />}<br /></pre><p>I've removed some extra loop for <code>malloc</code> but basically that's the lifecycle of a JavaScript call invocation. </p> <h3>What About Macros</h3><p><a href="https://code.google.com/p/v8/source/browse/trunk/src/macros.py#90">macros.py</a> contains some (I believe) highly optimized and target specific (x86, x64, arm) function, able to use <code>%_CPlusPlus()</code> functions, and containing most common/used functions across all JavaScript APIs such <code>IS_UNDEFINED(obj)</code>.<br/>It also contains many constants used here and there such <a href="https://code.google.com/p/v8/source/browse/trunk/src/macros.py#57">common date numbers</a>: </p><pre class="code"><br />const HoursPerDay = 24;<br />const MinutesPerHour = 60;<br />const SecondsPerMinute = 60;<br />const msPerSecond = 1000;<br />const msPerMinute = 60000;<br />const msPerHour = 3600000;<br />const msPerDay = 86400000;<br />const msPerMonth = 2592000000;<br /></pre><p>Dunno you, but I find myself often writing similar variables so I wonder if we should simply have them as public static <code>Date</code> properties ... never mind ... </p> <h3>d8 Options And Flags</h3><p>To complete my journey into V8, I had to set a <code>--expose-proto-setter</code> flag into <code>d8</code>, which is the command line tool or the dll what you'll have after a successful build of the V8 project. </p><p><a href="https://code.google.com/p/v8/source/browse/trunk/src/flag-definitions.h#143">flag-definitions.h</a> is basically all you need to define a runtime flag providing a decent description that will show up if you <code>d8 --help</code>: </p><pre class="code"><br />DEFINE_bool(<br /> // the flag name<br /> // d8 --expose_proto_setter<br /> // OR<br /> // d8 --expose-proto-setter<br /> // is the same<br /> expose_proto_setter,<br /> // the default value<br /> false,<br /> // the flag description, better if meaningful ...<br /> "exposes ObjectSetProto though __proto__ descriptor.set")<br /></pre><p>In order to access that flag in runtime, do not forget to prefix it as <code>FLAG_expose_proto_setter</code>.<br/>Remember, even a simple value as boolean is cannot be handled like that in JS so check again <a href="#RUNTIME_FUNCTION">the RUNTIME_FUNCTION example</a>. </p> <h3>Building V8</h3><p>There is a V8 page specific for this task, all I can add here is that <code>make x64.release</code> is the fastest way to have a <code>./out/x64/release/d8</code> executable and start playing, at least in most common/modern PCs or Macs. </p> <h3>And That's All Folks!</h3><p>I know it does not seem much, but this article covers: <ol> <li>how to define a launch-time flag for d8</li> <li>how to interact with C++ bindings for JS code</li> <li>how to optimize some macro function</li> <li>how to understand magic V8 JS syntax</li> <li>how to manipulate, create, change, augment, natives and their prototypes</li></ol>In few words with these steps anyone could write her/his own version of JavaScript, relying in a robust, extremely fast, and cross platform engine, able to also <a href="http://php.net/manual/en/book.v8js.php">interact with PHP</a> or other languages.<br/>Bear in mind I am not suggesting anyone out there should start subfragmenting V8, I am sayng that if you need a very specific thing in the environment for a very specific project, you should not be scared by changing what you need and you can also help V8 to be better trying changes directly without just filing bugs: isn't this what Open Source is good for too? </p><p>I hope you enjoyed this post, have a nice day! </p>
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-20953429774341730
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/04/playing-with-v8-native-and-javascript.html
|
| rel |
alternate
|
| title |
Playing With V8 Native And JavaScript
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/20953429774341730/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=20953429774341730
|
| rel |
replies
|
| title |
0 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/20953429774341730
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/20953429774341730
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-04-20T22:26:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Playing With V8 Native And JavaScript
|
|
| updated |
2013-04-21T00:02:06Z
|
|
| 6 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<h3>Update ^_^</h3><p>whatever story you are interested about in this post, one is that <a href="https://code.google.com/p/v8/issues/detail?id=2645">I've proposed a patch to V8 engine</a> (please star it so it gets in faster) to accept a <code>--expose-proto-setter</code> flag at runtime able to expose the proper <code>__proto__</code> setter so that <a href="https://github.com/joyent/node/pull/5341">my node JS pull request</a> could start warning modules using <code>__proto__</code> instead of <code>Object.setPrototypeOf(target, proto)</code>.<br/>What can I say ... open source is beautiful, you can potentially patch everything you want for anything you need ... even behind stubborn, politics, or decisions nobody agreed on :P<br/>Now back to the original post ... </p><hr/> <p>first thing: I write HTML manually in the textarea instead of Markdown, yeah!!!<br/>Why? 'cause nobody on the internet moves fast ... really, no-bloody-body!<br/>so ... back to manual tags writing instead of broken meaningless layout created via magic html editor ... yeeeeeeah! </p> <h3>The Story ...</h3><p>I know this is getting boring and annoying, and I swear I wish I could say it's the last post but every day there's something more and this story is getting both entertaining and ridiculous!<br/>I gonna tell you <em>how I ended up blocked in Zepto.js repository</em>, and how the rest of reasonable developers are acting instead.<br/>This time, the experiment, is me reporting this story and nothing else. I give you links, I give you facts! </p><p>Quick note: <a href="https://twitter.com/benvie/status/324742083447517184">they keep telling me I should let it go</a>, but "<i>I cannot sleep anymore</i>" because of this so here my attempt to describe the whole story! Have a coffee, some new tab link to click and dig into, and please, <strong>please</strong>, keep reading ... also because you might realize ... </p><h3>It's Not Just Me !</h3><p><a href="http://blog.izs.me/">Isaac Z. Schlueter</a>, the man behind <strong>node.js</strong>, <a href="https://twitter.com/izs/status/322370738495582210">twitted this</a></p><blockquote><a href="https://twitter.com/littlecalculist">@littlecalculist</a> So, why hasn't that been removed in favor of Object.setPrototypeOf? Got a link to discussions, or a shorthand version? </blockquote><p>The conversation keeps going and <a href="https://twitter.com/littlecalculist/status/322385297885261825">has one conclusion</a></p><blockquote><a href="https://twitter.com/izs">@izs</a> one-line fix: delete Object.prototype.__proto__; // put this in a module called "raygun-neutralizer" :) </blockquote><p>Ha ha ha .. so funny the future of JavaScript comes with a <em>foot-raygun</em> included, don't you think? ^_^ </p> <h3>V8 *Is* Based On An Object.setPrototypeOf Equivalent</h3><p>Breaking news, uh? The <a href="https://code.google.com/p/v8/source/browse/trunk/src/v8natives.js#1330"> internal ObjectSetProto</a> function simply wraps exactly what I've proposed in <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a> as <code>Object.setPrototypeOf(target, proto)</code>.<br/>In V8 internals represented as <code>return %SetPrototype(this, obj);</code><br/>So here the first thing: the engine of miracles needs such power but <em>we, stupid JavaScripters</em>, how do we dare! </p> <h3>A Poisoned __proto__</h3><p>Not only this is <a href="https://gist.github.com/WebReflection/5370050">the less consistent</a> and the most ridiculous property ever introduced in Javascript, this is also <a href="https://code.google.com/p/v8/source/browse/trunk/src/v8natives.js#390">intentionally poisoned as broken</a> in Google engine.<br/>These are a couple of quotes in my last attempt to make people reasonable in es-discuss, the first one is from <a href="http://infrequently.org/">Alex Russell</a>, in <a href="https://mail.mozilla.org/pipermail/es-discuss/2013-April/029710.html">this reply</a>: </p><blockquote>Assuming "this property" is __proto__, that ship sailed in V8 a long ago and there's zero chance of it ever being removed. It they want to remove it, they can simply fork V8 or ask for a build flag for it. </blockquote><p>Not only this is alarming me, as V8 incapable of making changes if considered dangerous as security problems would be, but turned also out that Alex was wrong since today <code>__proto__</code> is configurable so you can delete it..<br/>.. and all you need to do, after forking, is to <a href="https://code.google.com/p/v8/source/browse/trunk/src/v8natives.js#390">build putting a comment here</a>. </p><pre class="code"><br />set: desc.getSet(),// === ObjectSetProto ? ObjectPoisonProto<br /> // : desc.getSet(),<br /></pre><p>That's it, after that <strong>you can have both <code>__proto__</code> and a usable descriptor of it</strong>.<br/>At this point, after a line change in V8 source code, all <em>node.js</em> could do to have a better environment is to do this during the sturtup: </p><pre class="code"><br />(function(setPrototypeOf){<br /> if (setPrototypeOf in Object) return;<br /> var set = Object.getOwnPropertyDescriptor(<br /> Object.prototype, '__proto__'<br /> ).set;<br /> Object.defineProperty(<br /> Object,<br /> setPrototypeOf,<br /> {<br /> enumerable: false,<br /> configurable: true,<br /> value: function setPrototypeOf(target, proto) {<br /> set.call(target, proto);<br /> return target;<br /> }<br /> }<br /> );<br /> // TA-DAAAAAAA!!!<br /> delete Object.prototype.__proto__;<br /> // problem solved<br />}('setPrototypeOf'));<br /><br />// example<br />var a = {},<br /> b = Object.setPrototypeOf({}, a);<br /><br />a.isPrototypeOf(b); // true!<br /></pre><p>Above scenario does not look like so hard to implement, isn't it Brendan?<br/>However, another concern was about <cite>all npm modules will be broken</cite> without considering node has versioning so that no, not a single npm will be broken and updated modules could easily swap to this new API maintaining the environment nice, still fast, and clean! </p><p><strong>Moreover</strong>, the <code>Object.setPrototypeOf</code> equivalent, called <code>ObjectSetProto</code> and wrapping <code>%SetPrototype(this, proto)</code> in V8, <em>is used to set all <code>__proto__</code> properties</em>, <a href="https://code.google.com/p/v8/source/browse/trunk/src/v8natives.js#1365">how cool is that?!</a></p><pre class="code"><br />InstallGetterSetter($Object.prototype, "__proto__",<br /> ObjectGetProto, /* ARE YOU READY???? */ ObjectSetProto);<br /></pre><p>In few words, my proposal is naturally part of the language ... uh wait, this specific features has been commented as: </p><blockquote>an added, _de novo_ API that no one wants, which is an ambient capability on Object, is bad and it won't happen </blockquote><p> ... <a href="https://mail.mozilla.org/pipermail/es-discuss/2013-April/029734.html">it was here</a>!<br/>How would any developer want more power under her/his hands ... don't you dare thinking about it! </p> <h4>A Bit More Background</h4><p><a href="https://brendaneich.com/">Brendan Eich</a> excellently summarized with all links <a href="https://mail.mozilla.org/pipermail/es-discuss/2013-April/029723.html">the story behind this property</a>.<br/>In few words, <strong>this property has been discussed and nobody wanted it</strong>.<br/>They better preferred to quickly, dirty, spec it as <em>configurable</em>, at least, and as non present in <code>Object.create(null)</code> objects, so that finally some project could directly get rid of it and drop it via<br/><code>delete Object.prototype.__proto__;</code><br/>as mentioned before.<br/>Moreover, this is another quote from Brendan the same es-discuss post: </p><blockquote>Because @izs tweeted something you think Node is going to fork V8? Get real! </blockquote> <h3>... So I Tried To Get Real ...</h3><p>The change required to make that possible in V8 is a 10 seconds task, network push a part ... anyway ... </p><p>In <a href="https://dl.dropboxusercontent.com/u/3685/presentations/node-patterns/node-patterns.pdf#page=26">Isaac</a> slides you can read at page 26 that: </p><blockquote>not developing a language removes a huge burden. Let TC-39 and V8 fight those battles for us! </blockquote><p>So I didn't even bother him with this discussion ... I mean, he's doing the right thing: let other specialists solve problems for you so you can focus on something else .. right ?<br/> The reality is that even if I send that patch to V8, they will not accept it, not even if Microsoft will agree as the right direction to promote a better standard!<br/> The parody about this <em>de-facto utopia</em> is that <strong>all current IE browsers do not support __proto__</strong>.<br/>IE is desperate to be part of the not finalized yet spec, and this is probably why the <em>leaked version 11</em> shows <code>__proto__</code> shenanigans in the wild .. and those specs are not final ...!<br/> <h3>The Very Sad Result Of Thomas Fuchs Reaction</h3><p>Since I've been fighting, blogging, and discussing this problem for months, and since many times <a href="https://mail.mozilla.org/pipermail/es-discuss/2012-December/027579.html">they came back to me or others</a> saying that: </p><blockquote>It wasn't Node.js that drove that -- it was the "mobile (iOS WebKit first) web" that wanted __proto__ due to libraries such as Zepto. </blockquote><p>So <a href="https://mail.mozilla.org/pipermail/es-discuss/2013-March/029326.html">I've tried to reply at some point</a> like: </p><blockquote>I think zepto is using that to modify runtime NodeList results after querySelectorAll but in any case it was not me saying that __proto__ isn't used already... </blockquote><p>The discussion goes on and on until I think <em>one action is better than many words</em>, right? </p> <h4>What Allen Wirfs-Brock Said</h4><p>The good <a href="https://twitter.com/awbjs">@awbjs</a>, who <em>writes ECMAScript Specifications</em>, took kindly some of his time to reply to my post entitled <a href="http://webreflection.blogspot.com/2013/03/yet-another-reason-to-drop-proto.html">Yet Another Reason To Drop __proto__</a>.<br/>This is his comment: </p><blockquote>__proto__ wasn't TC39's mistake and <strong>everybody who participates on TC39 is aware of how terrible it is</strong>.<br/>...<br/>If you want to eliminate __proto__ you will have to eliminate its usage. Write a shim for Object.setPrototypeOf: <br/>... <br/>Then evangelize web developers like crazy to update all their existing deployed code to use this shim instead of directly using __proto__.<br/>... <br/><strong>Good luck (seriously)</strong></blockquote><p>Challenge Accepted! ... so <em>here the big drama</em> ... that Allen "<cite>Good luck (seriously)</cite>" "benediction" transpiled in my mind as: </p><blockquote>What the hack ... what does he mean with "goog luck (seriusly)", that <a href="https://twitter.com/WebReflection/status/324747929992720384">JavaScript community is made by passive bigot developers that cannot change simple things</a>?<br/>Of course we are as good developers as those you can find in any other language ... let me demonstrate it describing the situation in a <code>pull request</code> commit with all tests greens and zero side effects! </blockquote> <h4>The Community Reaction</h4><p>Sure that once described the problem in <a href="https://github.com/madrobby/zepto">Zepto.js repository</a>, and I swear <em>never a Zepto.js developer I know ever showed up in es-discuss</em> or my blog, I've simply <a href="https://github.com/madrobby/zepto/pull/736">committed a patch</a> that was tests approved and changing two lines of code promoting <code>Object.setPrototypeOf</code> instead of <code>__proto__</code>.<br/>Long story short: </p><img src="http://www.3site.eu/images/zepto.png"/><p>Here the <a href="https://github.com/madrobby/zepto/pull/736#issuecomment-16586703">Thomas rant</a>, accusing me of trolling, after (kinda obviously) him not being aware of anything I've been written 'till now: </p><blockquote>It's not about not agreeing with you. It's the form of how you imply or directly state that we're, I quote, "passive bigots" and that somehow __proto__ is insecure and "may" be removed and other weasel words that imply that we don't know what we're doing and you're a white knight to rescue us from ourselves. No, thank you. Please troll someone else. </blockquote><p>Now, whatever Thomas thought was good to demonstrate with his reaction, which is simply, in my opinion, "<i>the ball here is mine, nobody plays if I'm pissed off</i>" ... since he decided to block me from the whole repository, all I could do is to write an answer in <a href="https://gist.github.com/WebReflection/5370050#comment-817849">the same gist that is describing the current madness behind that property</a>.<br/>Really Thomas ... what can I say, congrats! </p> <h4>Thomas, Not Flex Box Again, Please!</h4><p>So if IE will spec a document that's still a draft, and just to make for the broken web <code>__proto__</code> can create, don't blame anyone if IE will implement that as broken as it is now almost spec'd!<br/>Version 9 won't have it and neither 10, the current one in 2013!<br/>If Zepto.js decides IE is not a target browser, this does not mean every library should decide the same!<br/>Isn't one of our duty, as Web developers, to make the Web available to as many people as possible?<br/>jQuery released today version 2 and IE9 and IE10 are supported, as easy as that .. or maybe that was the reason you were so nervous?<br/>If Zepto wants to shoot in its foot saying <code>__proto__</code> or nothing .. deal with that, you have less targets there and of course, you know that!<br/> I mean, you better support IE9 and 10 in both Desktop and mobile for a while in any case, don't you?<br/>So since this is the best moment to drop that mistake and go for a better, less obtrusive, pattern, why wouldn't you? </p> <h3>Update On The Repository</h3><p>I am still blocked as if I've been trolling Zepto since ever but at least now Thomas rant is gone and <a href="https://github.com/madrobby/zepto/pull/736#issuecomment-16643307">there is a statement</a> from <a href="https://github.com/mislav">Mislav Marohnić</a> there I cannot comment but that makes sense for that library, except when it comes to talking about standards, since <strong>__proto__ is not even standard yet</strong>: </p><blockquote>We generally don't pull contributions that don't improve anything. If, for instance, IE implemented the standard API but doesn't support __proto__, we would pull this. But we don't gain anything tangible with this change. We only believe in standards if they actually result in some benefit. We don't know what the "future of JS" is going to be, so we're making this neat little library that works in the present. When the future of JS arrives, I'm sure we'll adapt accordingly. </blockquote> <h3>Revelation: Why Is Dropping Proto So Important To Me!!!</h3><p>First of all, as I've said, is not just me ...<br/>Secondly, <strong>__proto__ cannot be polyfilled</strong> while a modern <code>Object.setPrototypeOf</code> method could be much easier and consistently polyfilled across current browsers.<br/>ES6 specifications aren't going out anny time soon so it's not too late to put a simple method out there able to make the future a bit brighter .. for node.js, for quickly updated browsers, for JavaScript, your favorite programming language.<br/>You don't want too much power in a function? You shouldn't care since the language behind that function has it, so you are just thinking you should be limited, no matter how good or powerful or evil the function will be.<br/>Thanks for reading until here, really appreciated! </p>
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-3261577299378020654
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/04/a-journey-to-v8-objectsetproto-native.html
|
| rel |
alternate
|
| title |
A Journey To V8 ObjectSetProto Native Function
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/3261577299378020654/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=3261577299378020654
|
| rel |
replies
|
| title |
5 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/3261577299378020654
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/3261577299378020654
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-04-19T05:14:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
A Journey To V8 ObjectSetProto Native Function
|
|
| updated |
2013-04-20T19:09:02Z
|
|
| 7 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<pre><br />I know this might sound silly but I keep having fun writing stuff here<br />since I've switched to mark down text :P<br /><br /><br />### Is This A Natural Conflict ?<br />If you are wondering what I am talking about I have a very simple example:<br />the Linux world! <br /><br />In the specific case, file system operations!<br /><br />```<br /># copy a file<br />cp file1.txt fle2.txt<br /><br /># remove a file<br />rm file1.txt<br />```<br /><br /><br />### That's A Move File !<br />Yes, is really that simple! When you move a file you are sure that file has been copied,<br />it has the new name or the same, if in a different folder, and you can remove the first one. <br />OK, OK, if you are a Windows user you might have experienced some lost file in the past<br />due accidents during the copy such "_not enough space_" I got it, but what if that's because you've been too KISS and not YAGNI? <br /><br /><br />### The Software YAGNI Approach<br />If you can obtain that in a quite simple way, no need to complicate things around.<br /><br /><br />### The KISS Approach<br />If everything I need is more than an action, I am not going to like that. <br />KISS is also used as concept behind APIs and final, production ready, products.<br /><br /><br />### The Reality<br />KISS, however, is probably the most difficult thing ever in programming languages ... <br />guess why? There's no such thing as **simple** when it come to programming. <br /><br />Actually, the most user-friendly interfaces and interactions, are probably also<br />the most over engineered so ... you see?<br /><br /><br />### As Summary<br />I've no idea if these two approaches, both my favorites, could be confusing and in collision. <br />What I know, is that while I was writing this post I've been thinking all the time how to represent<br />bloody acronyms in Markdown. <br /> <br /><br />It came out that basing my experience with KISS and YAGNI, the best solution I had in mind<br />was under everybody nose as **JSON**:<br />`{"KISS":"Keep It Simple, Stupid"}` and `{"YAGNI":"You Ain't Gonna Need It"}` <br /><br />Both have never been mentioned in the [Markdown famous post](http://daringfireball.net/projects/markdown/syntax), something I'd love to contribute updating it!<br /></pre>
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-4540357782730014030
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/04/how-about-kiss-vs-yagni.html
|
| rel |
alternate
|
| title |
How About KISS vs YAGNI ?
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/4540357782730014030/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=4540357782730014030
|
| rel |
replies
|
| title |
5 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/4540357782730014030
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/4540357782730014030
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-04-17T05:36:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
How About KISS vs YAGNI ?
|
|
| updated |
2013-04-17T20:42:50Z
|
|
| 8 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<pre><br />I've spent some time trying to solve the<br />[tinydown](https://github.com/WebReflection/tinydown#tinydown)<br />runtime blogspot parsing and this is the current status:<br /><br /> 1. desktop browsers are fine<br /> 2. mobile browsers are now fine too<br /> 3. textual browsers lynx like are wonderful now!<br /> 4. browsers without CSS are just fine<br /> 5. browsers without JS are kinda fine too<br /> 6. browsers without CSS and JS are almost fine<br /><br /><br />### Your RSS Reader<br />Most likely, what you are experiencing is something similar to point 5 or,<br />in the worst case scenario, point 6 of above list.<br /><br />Being markdown easy to read as any plain text or book<br />you are familiar with, can you cope with that for RSS readers?<br /><br /><br />### As Experiment<br />Please give you some times to see if this work before answering.<br /><br />I realy don't want to piss off my followers so the last option would be<br />to revert all my changes done in blogger<br />(or eventually host my blog in my own space)<br /><br />One thing I am doing different now, is to preserve a decent amount<br />of columns before I go into a new line so readers unable<br />to adopt a `white-space: pre-wrap;` like rendering for feeds<br />should not be that disturbed anymore ...<br /><br />If this is going to work, I think everyone could be happy<br />about the fact not only you can blog on the cloud without a host,<br />but what you write can be compatible with emails and everything<br />that is not HTML enabled ... all plain text, as universal way to<br />write a human friendly formatted document.<br /><br />What do you think? Thanks for your patience!<br /></pre>
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-1218679999779580015
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/04/can-deal-with-markdown-in-rss-readers.html
|
| rel |
alternate
|
| title |
Can Deal With Markdown In RSS Readers ?
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/1218679999779580015/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=1218679999779580015
|
| rel |
replies
|
| title |
5 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/1218679999779580015
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/1218679999779580015
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-04-14T23:27:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Can Deal With Markdown In RSS Readers ?
|
|
| updated |
2013-04-15T00:38:26Z
|
|
| 9 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| category |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
performance
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
closures
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
flight
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
mixins
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<pre><br />OK, OK, probably is just that I cannot wait to start writing stuff with [tinydown](https://github.com/WebReflection/tinydown#tinydown) but I tweeted about this after last #FlightNight and @angustweets demo ... so here what is behind [Flight](http://twitter.github.io/flight/) mixins choice.<br /><br /><br />### The Basics<br /><br />JavaScript polymorphism is probably one of the best things you can find out there.<br /><br />Not kidding, the flexibility that this language offers when it comes to context injection and runtime class definition is simply amazing, as simple, and amazing, is this idea:<br /><br />```js<br />// most basic example<br />function enriched() {<br /> this.method = function () {<br /> // do stuff<br /> };<br />}<br />```<br /><br />Most common books and online documents usually describe above example as a _constructor with privileged methods_.<br /><br />Well, that's actually what you get if you `var obj = new enriched();` but that's just one story.<br />Flight uses a different story, offering alternative methods with better semantics but basically going down to:<br /><br />```js<br />enriched.call(object);<br />```<br /><br /><br />### Mixins Baby!<br /><br />Using above pattern we can enrich any sort of object with the extra benefit of having a private scope the moment we invoke once the function.<br />This gives us the opportunity to pass arguments or simply have some private, shared in case of a prototype, variable too.<br /><br />```js<br />// with arguments and private variables<br />var Mixin = function Mixin(arg0, argN) {<br /><br /> // private variables<br /> var scoped = {};<br /><br /> // privileged methods<br /> this.method = function method() {<br /> return scoped;<br /> };<br /><br /> // default properties or initialization<br /> this.prop = arg0 || 'default';<br /> this.other = argN;<br /><br />};<br /><br />// ========================================<br /><br />// as Singleton<br />var singleton = new Mixin;<br />singleton.method(); // object<br />singleton.prop; // default<br />singleton.other; // undefined<br /><br />// as prototype with defaults<br />function Class() {}<br />Mixin.call(Class.prototype, 'a', 'b');<br /><br />var instance1 = new Class,<br /> instance2 = new Class;<br /><br />instance1.method(); // object<br />instance2.method(); // same object<br /><br />// same methods<br />instance1.method === instance2.method; // true<br /><br />// and same object<br />instance1.method() === instance2.method(); // true<br /><br />instance1.prop; // a<br />instance1.other; // b<br />instance2.prop; // a<br />instance2.other; // b<br />```<br /><br />I have realized how powerful is this simply considering the same approach with prototypes rather than each objects, where methods are of course created per each invokation of the mixin, but that would be indeed absolutely meant and expected.<br /><br />What I am saying, is that if you are worried about too many closures and functions generated per each mixin, and you believe your mixin does not need any initialization and methods can be used anywhere without needing a private scope, here all you can do to follow same pattern and save a bit of memory:<br /><br />```js<br />var Mixin = function(){<br /> // created once and never again<br /> function method1(){}<br /> function method2(){}<br /> function methodN(){}<br /> return function () {<br /> this.method1 = method1;<br /> this.method2 = method2;<br /> this.methodN = methodN;<br /> };<br />}();<br />```<br /><br />I guess that's it, right? But what if we need some sort of initialization per each mixin?<br /><br /> <br />### Initializing A Mixing<br /><br />There could be things we need to do to ensure the mixin will work as expected per each instance but if we want to coexist out there in the wild, we cannot name methods like `.init()` because of the name clashing if more than a mixin needs to be initialized ... are you following?<br /><br />One possible solution that came into my mind is to prefix, with `init` the method, and use the mixin name as suffix.<br /><br />```js<br />// defaults plus init<br />var Mixin = function Mixin(dflt0, dfltN) {<br /><br /> // private variables<br /> var scoped = {};<br /><br /> // privileged methods<br /> this.method = function method() {<br /> return scoped;<br /> };<br /><br /> // avoid multiple mixins name clashing<br /> // prefix eventual initialization<br /> // with 'init' plus mixinname<br /> this.initMixin = function (arg0, argN) {<br /> this.prop = arg0 || dflt0 || 'default';<br /> this.other = argN || dfltN;<br /> };<br /><br />};<br />```<br /><br />If we follow this approach, we can initialize any mixin we want at any time, e.g.:<br /><br />```js<br />// explicit initialization<br />function Class(arg0, argN) {<br /> this.initMixin(arg0, argN);<br />}<br />Mixin.call(Class.prototype, 'a', 'b');<br /><br />var instance1 = new Class,<br /> instance2 = new Class('different');<br /><br />instance1.prop; // a<br />instance2.prop; // different<br />instance1.other; // b<br />instance2.other; // b<br />```<br /><br />Per each instance we can then enrich the constructor so that every mixin that needs to be initialized at that time can be simply call the non clashing method.<br /><br /><br />#### Some Bad Idea You might Have<br /><br />Well, it is common in JS to think about `for/in` loops and stuff so that if we know a prefix we can automate tasks ... but in this case I strongly discourage this approach unless you are not 100% sure all mixins initializations support same signature.<br /><br />```js<br />// *DONT* automatic mixin initialization<br />function Class() {<br /> for (var key in this) {<br /> if (key.slice(0, 4) === 'init') {<br /> this[key]();<br /> // or<br /> this[key].apply(this, arguments);<br /> }<br /> }<br />}<br />```<br /><br />In few words, using above technique means coupling mixins with a specific, probably unknown in advance, class signature so it is strongly discouraged.<br /><br />Sticking with an explicit mixin initialization is not only faster but able to create any sort of mixin signature.<br /><br /><br />### Events To The Rescue<br /><br />As @kpk reminds me, [Flight is event based](https://twitter.com/kpk/status/323272363053551616) so there's also an easy way to do more after all mixins initialization: `this.after('initialize', fn);`<br /><br /><br />### As Summary<br /><br />This is only one part of [Flight](http://twitter.github.io/flight/) where [**performance**](http://jsperf.com/mixin-fun/31) were strongly considered for all old and new browsers and this works.<br /><br />In an era were many developers are looking for better classes this framework came out with such simple and powerful solution I can't believe I would like to have anything more than this for real apps!<br /><br />Enjoy the Flight philosophy and embrace powerful simplicity any time you _A-HA_ it ;)<br /></pre>
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-2618002274157358661
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/04/flight-mixins-are-awesome.html
|
| rel |
alternate
|
| title |
Flight Mixins Are Awesome!
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/2618002274157358661/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=2618002274157358661
|
| rel |
replies
|
| title |
3 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/2618002274157358661
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/2618002274157358661
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-04-14T01:42:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Flight Mixins Are Awesome!
|
|
| updated |
2013-04-14T05:07:42Z
|
|
| 10 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<pre><br />OK ladies & gentlemen, time to test [tinydown](https://github.com/WebReflection/tinydown#tinydown) for real.<br /><br />### What's New<br />Well, first of all there are [35 tests](http://webreflection.github.io/tinydown/test/) with nice and/or screwed input and an expected output to complete the library so that any improvement or change will not compromise what's already working.<br /><br />The second thing is ... **I am using tinydown now**!<br /><br />You can check the source page of this post and see that all it contains is markdown.<br /><br />### What's Different<br />There at least two things different:<br /><br /> * it supports more inside the image markup, such youtube and gists<br /> * it supports twitter handlers, like @WebReflection<br /> * even if so damn small, like less _than 2Kb_ minzipped, it supports nested blockquotes and lists<br /><br />`inline code` is also available together with triple tick syntax and/or tab and spaces so that<br /><br /> var code = 'can be be written multiline';<br /> function alCodeIsPreserved() {<br /> with(out) {<br /> alert('problems');<br /> }<br /> }<br /><br />I also implemented only here the highlighter for js so<br /><br />```js<br />var code = this.should();<br /><br />code.look('gorgeous');<br />```<br /><br />### What's Missing<br />I don't know yet, I think almost everything I need for blogging should be there.<br /><br />The library is compatible with both _node.js_ and web browsers, of course, and if tests are green you should good to use it runtime in your blog too or any other place you think.<br /><br />Last but not least, you can **test everything** you want in [this page](http://webreflection.github.io/tinydown/test/test.html live test) and eventually file bugs copying the generated link with your content so it will be straight forward to see what's broken, the why and the how. <br /> <br />Have fun!<br /></pre>
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-5942392604959221230
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/04/tinydown-test.html
|
| rel |
alternate
|
| title |
tinydown test
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/5942392604959221230/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=5942392604959221230
|
| rel |
replies
|
| title |
7 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/5942392604959221230
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/5942392604959221230
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-04-13T20:24:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
tinydown test
|
|
| updated |
2013-04-14T05:07:57Z
|
|
| 11 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<h3>Update</h3>Added tests and support for nested blocks and lists plus youtube video and gists instead of just images.<br/>Here, <a href="http://webreflection.github.io/tinydown/">have a look at tinydown</a>, compatible with both node and web. <hr /> Something I've been thinking about since last year <a href="http://js1k.com/2012-love/">JS1K contest</a> ... what if I could just write mark down on internet and let crawlers and bots do the math while I just write all I need to? <h3>tinydown and CloudReflection</h3>This is basically all it took to create a markdown blogger enabled service as <a href="http://cloudreflection.blogspot.com/2013/04/test.html">CloudReflection</a> is.<br/>That's correct, if I edit that post the text I gonna deal with is this one: <pre><br />Isn't a tiny markdown parser lovely ?<br />=====================================<br /><br />A markdown is an _easy to read and quite easy to parse_ syntax, ideal for documents<br />that could be understood by human, and easily converted by machines.<br /><br />You are reading markdown now!<br />-----------------------------<br />This blogpost is generated on the fly via the proposed script. <br />Here the code **example** used for this page:<br /><br /> this.onload = function () {<br /> document.body.innerHTML = tinydown(<br /> document.body.textContent<br /> );<br /> };<br /><br />You can find a very nice guide about [how to markdown here](http://daringfireball.net/projects/markdown/syntax "markdown style guide").<br /><br />### What is supported ?<br /> * headers with = or - notation<br /> * headers with # notation<br /> * blockquotes and nested blockquotes<br /> * ordered and unordered lists<br /> * images with optional alt ant title<br /> * inline links with arbitrary title<br /> * <em> via single asterisks/underscore, or double for <strong> tag<br /> * inline `code` via `` ` `` backtick<br /><br />### What is not supported ? ###<br /> * paragraphs are missings<br /> * nested lists and nested markdown inside lists<br /> * links with references and/or id<br /> * raw html is not recognized, validated, parsed<br /><br />> and just to demonstrate it works<br />> > this is a nested blockquote example :-)<br />> have a lovely day<br /><br />- - -<br />© WebReflection<br /></pre>This is basically the same text I've used in the <a href="http://www.3site.eu/love/markdown.html">original demo page</a>, except links and images are now finalyl supported.<br/>That is going to look exactly the same way you look at it in the following iframe: <iframe width="560" height="480" src="http://cloudreflection.blogspot.com/2013/04/test.html"></iframe> <h3>What Else On Blogger Side</h3>So I had to include a couple of scripts: <ol><li><script src='http://webreflection.github.io/tinydown/test/build/tinydown.js'/></li><li><script src='http://webreflection.github.io/tinydown/test/build/onstuff.js'/></li></ol>While the first one is the actual <code>tinydown</code> parser, the second one is just some logic to parse the right content at the right time.<br/>If you want to play with <code>npm install tinydown</code> parser consider that's just a function and is not as complet eas any other fully compatible markdown parsers ... it just gives me basically everything I need to write my technical posts on blogger ... can I ask anything more? I don't think so!<br/><strong>Bear in mind</strong> you should not use same scripts with github external repository file in your production code/blog ... just follow these direction, and stay tuned with the <a href="https://github.com/WebReflection/tinydown#tinydown">tiny down repository</a>.
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-5502463749290296921
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/04/writing-markdown-in-blogger.html
|
| rel |
alternate
|
| title |
Writing Markdown In Blogger
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/5502463749290296921/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=5502463749290296921
|
| rel |
replies
|
| title |
6 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/5502463749290296921
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/5502463749290296921
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-04-11T07:37:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Writing Markdown In Blogger
|
|
| updated |
2013-04-13T18:56:54Z
|
|
| 12 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| category |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
performance
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
JavaScript
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
ES6
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
__proto__
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
mistake
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
I know it might sound boring but I really want to put everything down and laugh, or cry harder, the day TC39 will realize <code>__proto__</code> was one of the most terrible mistakes.<br /> <h3>A Simple Dictionary Attack</h3>ES6 says that <code>Object.create(null)</code> should not be affected anyhow from <code>Object.prototype</code>.<br />I've already mentioned this in the <a href="http://webreflection.blogspot.com/2013/03/5-reasons-you-should-avoid-proto.html">5 Reasons You Should Avoid __proto__</a> post but I forgot to include an example.<br />You can test all this code with Chrome Canary or Firefox/Nightly and the most basic thing you need to know is this: <pre class="code"><br />var n = Object.create(null);<br />n.__proto__ = {};<br /><br />for (var k in n) console.log(k); // __proto__ !!!<br />Object.keys(n); // ["__proto__"] !!!<br /></pre>Got it? So, <code>__proto__</code> is enumerable in some browser, is not in some other but it will be in all future browsers. Let's go on with examples ... <pre class="code"><br />// store values grouped by same key<br />function hanldeList(key, value) {<br /> if (!(key in n)) {<br /> n[key] = [];<br /> }<br /> n[key].push(value);<br />}<br />// the Dictionary as it is in ES6<br />var n = Object.create(null);<br /></pre>Above code simply does not need to be aware of any problems except in older environment that won't work as expected. If the key is <code>__proto__</code> instead of storing the value there will be most likely an error or the object will inherit from an empty array the moment <code>n[key] = []</code> will be executed.<br/>In few words, I believe you don't want to fear security and logic problems every single time you set a property to a generic object ... am I correct?<br />Now imagine some library such <a href="https://github.com/documentcloud/underscore/blob/master/underscore.js#L84">underscore.js</a>, has the most common and generic way to create an object from another one, copying properties ... <pre class="code"><br />function copy(obj) {<br /> var result = {}, key;<br /> for (key in obj) {<br /> if (obj.hasOwnProperty(key)) {<br /> result[key] = obj[key];<br /> }<br /> }<br /> return result;<br />}<br /><br />// or if you want ... <br />function extend(a, b) {<br /> for (var key in b) {<br /> if (b.hasOwnProperty(key)) {<br /> a[key] = b[key];<br /> }<br /> }<br /> return a;<br />}<br /></pre>Now guess what happens if you would like to copy or extend that list we had before, where <code>__proto__</code> will be own property for the <code>n</code> variable and the loop is not checking the key as it should ... the object <code>a</code>, or the new one, will automatically extend an Array and break completely its own expected behaviors ^_^<br />This is <strong>nothing an explicit <code>Object.setPrototypeOf()</code> could cause</strong> ... moreover...<br /> <h3>Real World Performance Impact</h3>Every utility such lo-dash or underscore should now do this kind of check per each loop if these would like to be considered safe: <pre class="code"><br />function copy(obj) {<br /> var result = {}, key;<br /> for (key in obj) {<br /> if (<br /> obj.hasOwnProperty(key) &&<br /> key !== '__proto__'<br /> ) {<br /> result[key] = obj[key];<br /> }<br /> }<br /> return result;<br />}<br /></pre>Now try to investigate in your real-world daily code how many times you change <code>__proto__</code> compared with how many times you loop over properties ... I <a href="http://jsperf.com/loop-vs-hop-vs-proto">give you a test case to compare performance</a> and remember: mobile matters!<br /> <h3>Really Hard To Debug</h3>Being a special property in the <code>Object.prototype</code> and not just a function you could wrap and keep under control, in a new scenario where any object could be <code>instanceof</code> anything at any time, the inability to intercept <code>__proto__</code> calls and changes before it happens will be a painful experience in terms of debugging ... what was that instance before? Most likely, you'll never know ^_^<br />It must be said some engine makes that <code>descriptor.set</code>ter reusable but this is not the case of current V8, as example, neither the case for all mobile browsers out there today.<br /> <h3>A Stubborn Decision</h3>What's driving me crazy about this property and all problems it brings, is that regardless there is a possible "speccable" <code>Object.setPrototypeOf()</code> alternative that would not suffer from anything I've described in all these posts, and just as reminder there is already a spec'd and widely available <code>Object.getPrototypeOf()</code> in ES5, TC39 will go on and make the problem a standardized one ^_^<br />I haven't been able to reason against them regardless examples and reasons ... but you could have fun trying too before it's too late!
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-1479372886464667495
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/03/yet-another-reason-to-drop-proto.html
|
| rel |
alternate
|
| title |
Yet Another Reason To Drop __proto__
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/1479372886464667495/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=1479372886464667495
|
| rel |
replies
|
| title |
8 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/1479372886464667495
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/1479372886464667495
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-03-30T06:07:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Yet Another Reason To Drop __proto__
|
|
| updated |
2013-03-30T06:07:07Z
|
|
| 13 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| category |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
performance
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
JavaScript
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
WeakMap
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
Symbol
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
polyfill
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<a href="https://github.com/dherman/tc39-codex-wiki/blob/master/data/es6/symbols/index.md#symbols">Symbols</a>, previously known as <a href="http://wiki.ecmascript.org/doku.php?id=harmony:private_name_objects">Names</a>, are a new way to add real private properties to a generic object. <pre class="code"><br />// basic Symbol example<br />var BehindTheScene = (function(){<br /> var symbol = new Symbol;<br /><br /> function BehindTheScene(){<br /> this[symbol] = {};<br /> }<br /><br /> BehindTheScene.prototype.get = function(k) {<br /> return this[symbol][k];<br /> };<br /><br /> BehindTheScene.prototype.set = function(k, v) {<br /> return this[symbol][k] = v;<br /> };<br /><br /> return BehindTheScene;<br /><br />}());<br /><br />var obj = new BehindTheScene;<br /><br />obj.set('key', 123);<br /><br />obj.key; // undefined<br />obj.get('key'); // 123<br /></pre>In few words symbol makes possible to attach properties directly without passing through a WeakMap. A similar behavior could be obtained indeed via WeakMaps: <pre class="code"><br />// similar WeakMap example<br />var BehindTheScene = (function(){<br /> var wm = new WeakMap;<br /><br /> function BehindTheScene(){<br /> wm.set(this, {});<br /> }<br /><br /> BehindTheScene.prototype.get = function(k) {<br /> return wm.get(this)[k];<br /> };<br /><br /> BehindTheScene.prototype.set = function(k, v) {<br /> return wm.get(this)[k] = v;<br /> };<br /><br /> return BehindTheScene;<br /><br />}());<br /><br />var obj = new BehindTheScene;<br /><br />obj.set('key', 123);<br /><br />obj.key; // undefined<br />obj.get('key'); // 123<br /></pre> <h3>Why Symbols</h3>To be honest I am not sure but these somehow bring some magic to the object rather than wrapping magic around it, as it is for the WeakMap example, so at least performance should be better ... right? Well, the current <em>shim VS shim</em> says that <code>indexOf()</code> is faster than an implicit <code>toString()</code>: <a href="http://jsperf.com/symbol-vs-weakmap">check this <strong>test</strong> out by yourself</a> ;)<br />In any case it looks like private symbols will be a better way to go than WeakMap when all we would like to have is a private property. Symbols can be used as Enums too, being unique as any other object is.<br /> <h3>Simulating Symbols In Current ES5 JavaScript</h3>As easy as this: <pre class="code"><br />var Symbol;<br />if (!Symbol) {<br /> Symbol = (function(Object){<br /><br /> // (C) WebReflection Mit Style License<br /><br /> var ObjectPrototype = Object.prototype,<br /> defineProperty = Object.defineProperty,<br /> prefix = '__simbol' + Math.random() + '__',<br /> id = 0;<br /><br /> function get(){/*avoid set w/out get prob*/}<br /><br /> function Symbol() {<br /> var __symbol__ = prefix + id++;<br /> defineProperty(<br /> ObjectPrototype,<br /> this._ = __symbol__,<br /> {<br /> enumerable: false,<br /> configurable: false,<br /> get: get, // undefined<br /> set: function (value) {<br /> defineProperty(this, __symbol__, {<br /> enumerable: false,<br /> configurable: true,<br /> writable: true,<br /> value: value<br /> });<br /> }<br /> }<br /> );<br /> }<br /><br /> defineProperty(Symbol.prototype, 'toString', {<br /> enumerable: false,<br /> configurable: false,<br /> writable: false,<br /> value: function toString() {<br /> return this._;<br /> }<br /> });<br /><br /> return Symbol;<br /><br /> }(Object));<br />}<br /></pre>A very basic example here: <pre class="code"><br />var sym = new Symbol;<br />var o = {};<br />o[sym]; // undefined<br /><br />o[sym] = 123;<br />console.log(o[sym]); // 123<br />for (var k in o) {<br /> console.log(k); // nothing at all<br /> // there is nothing to for/in<br />}<br />delete o[sym]; // true<br /></pre>Of course, you can try also the very first example, the one with a shared, private, symbol variable, that will simply work as expected :)<br />Bear in mind, regardless being a hack, this script does not actually cause any problem to any other script or library you are using today but it needs ES5 compatible browsers such all mobiles plus all desktops and IE9 or greater.
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-7021213354946356019
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/03/simulating-es6-symbols-in-es5.html
|
| rel |
alternate
|
| title |
Simulating ES6 Symbols In ES5
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/7021213354946356019/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=7021213354946356019
|
| rel |
replies
|
| title |
9 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/7021213354946356019
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/7021213354946356019
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-03-29T03:07:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Simulating ES6 Symbols In ES5
|
|
| updated |
2013-03-29T03:15:01Z
|
|
| 14 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| category |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
performance
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
JavaScript
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
Object
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| scheme |
http://www.blogger.com/atom/ns#
|
| term |
__proto__
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<strong>Update</strong>: when you've done with this post, there's even more in comments and the newer one: <a href="http://webreflection.blogspot.com/2013/03/yet-another-reason-to-drop-proto.html">Yet Another Reason To Drop __proto__</a><hr/> Too many discussions without real outcome about <code>__proto__</code> magic evilness or feature. It's time to understand why using it is, <em>today</em>, a bad idea.<br /> <h3>__proto__ Is NOT Standard (yet)</h3><strike>TC39 refused to standardize this property because of the amount of problems it brings</strike>. Apparently will be part of ES6 but is not there yet.<br/><code>__proto__</code> is a silent, non spec'd, agreement. What's the problem? Keep reading ;)<br /> <h3>__proto__ Could NOT Be There</h3>The silent non standard agreement sees <code>__proto__</code> as <strong>configurable</strong> property of the <code>Object.prototype</code>.<br />As example, try this in some environment: <pre class="code"><br />(this.alert || console.warn)(<br /> delete Object.prototype.__proto__<br />); // false or true ?<br /></pre>The outcome is migrating from <code>false</code> to <code>true</code>. As example, current Chrome has a non configurable descriptor, while Canary has a configurable one. Same is for latest node.js, Firefox, and who know who else.<br />Having a property configurable means <em>you cannot trust it's going to work</em> because anyone could have decided to remove it ... why ...<br /> <h3>__proto__ Makes null Objects Unpredictables</h3>Theoretically, this is all you need to create one or more objects that inherits from <code>null</code><pre class="code"><br />var Dict = Object.create.bind(Object, null);<br /><br />var dictionary = Dict();<br />dictionary[property] = 1;<br />if (otherProperty in dictionary) {<br /> // do stuff<br />}<br />// or<br />if (dictionary[someOtherThing]) {<br /> // do stuff<br />}<br /></pre>We cannot trust, as example in Chrome, that any property can be set there because if for some reason the property name is <code>__proto__</code>, that object inheriting null will completely be <em>unusable/screwed</em>.<br/>Using <code>hasOwnPropertyDescriptor()</code> is not even an option since objects that inherit from null do not inherit these methods from <code>Object.prototype</code>.<br />The extra silent agreement here is that <code>Object.create(null)</code> should return objects that are not affected anyhow by any property from <code>Object.prototype</code> and <code>__proto__</code> ain't any exception!<br /> <h3>__proto__ Is NOT Secure</h3>Since any bloody object could be modified directly or deeply anywhere in the middle of its prototypal chain, you can consider all your instances somehow exposed to any sort of attack.<br/>Bad news is: <em>you cannot redefine <code>__proto__</code> to prevent this</em>, at least you cannot in current version of Chrome and mobile browsers: <pre class="code"><br />function ProtoSafe() {}<br />Object.defineProperty(<br /> ProtoSafe.prototype,<br /> '__proto__',<br /> {<br /> get: function () {<br /> return ProtoSafe.prototype;<br /> },<br /> set: function () {<br /> throw 'immutable';<br /> }<br /> }<br />);<br /></pre><strong>Error: cannot redefine property __proto__</strong><br /> <h3>__proto__ Influences Your Logic</h3>This is last point but actually still important. In <em>ES3</em> it has never been possible to redefine inheritance over an already created instance and this has never been a real problem.<br />Polymorphism has always been possible through <em>mixins</em> and borrowed methods but again, no way an object could suddenly be any sort of instance with such lightweight casting unable to ensure any desired behavior.<br />What I mean, is that using <code>[].slice.call(arguments)</code> has a meaning: if there is a <code>length</code> in the used object, create an array with indexes filled from 0 to that length - 1.<br/>This is different from <code>generic.__proto__ = Array.prototype;</code> because the <code>length</code> could be missing and the resulted object behavior be unexpected, broken, or again unpredictable.<br /> <h4>Still A Cheap Way To Cast</h4>This is the only advantage and the reason some library adopted <code>__proto__</code> without even thinking about it: performance boost, compared to a whole slice, are a win, and specially in mobile and DOM libraries where results are always threat as ArrayLike objects.<br /> <h3>Object.setPrototypeOf(object, proto) To The Rescue!</h3>In ES5 all <code>Object</code> things are managed through the <code>Object</code> constructor so why not having a method in charge of the <code>__proto__</code> behavior, since <code>Object.getPrototypeOf(object)</code> is already available?<br />Here some advantage:<ol><li>no way a property can destroy an object, the <code>obj[propName]</code> check against <code>propName !== '__proto__'</code> won't be needed anymore: performance!</li><li>cheap casting still available so <a href="http://jsperf.com/proto-or-slice">not a performance issue</a></li><li>standardizing <code>Object.setPrototypeOf(object, proto)</code> can bring <strong>new possibilities</strong> such <code>Object.freezePrototype(object)</code> in order to <strong>ensure immutable inheritance</strong> when and if needed</li></ol><script src="https://gist.github.com/WebReflection/5247136.js"></script> <br /> <h3 id="cheaper">A Cheaper Example</h3>If you want to ensure TC39 will ever consider to drop this property in favor of better methods in the <code>Object</code>, here what you should stick in your library that is using proto: <pre class="code"><br />var setPrototypeOf = Object.setPrototypeOf || function(o, p){<br /> o.__proto__ = p;<br /> return o;<br />};<br /></pre>It's cheap and <em>performance</em>, again, are <a href="http://jsperf.com/proto-or-slice">as good as before</a>!
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-6294123193993688185
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/03/5-reasons-you-should-avoid-proto.html
|
| rel |
alternate
|
| title |
5 Reasons You Should Avoid __proto__
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/6294123193993688185/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=6294123193993688185
|
| rel |
replies
|
| title |
9 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/6294123193993688185
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/6294123193993688185
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-03-26T22:57:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
5 Reasons You Should Avoid __proto__
|
|
| updated |
2013-03-30T06:11:35Z
|
|
| 15 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
Well, I don't always post about updates, changes, or new repos here, so here a quick and dirty post on things I've been tweaking, creating, or fixing, recently. <h3><a href="https://github.com/WebReflection/dom4#dom4">DOM4</a></h3>This 100% test covered polyfill is awesome! Combined with some basic utility makes DOM manipulation life really easy. As example, this is how you can shuffle last to first one a list of li: <pre class="code"><br />var li = document.querySelectorAll('ul.shuffle li');<br />li[0].before(li[li.length - 1]);<br /><br />// or even better!<br />var ul = li[0].parentNode;<br />ul.prepend(ul.lastChild);<br /></pre>Pretty cool stuff from W3C! <h3><a href="https://github.com/WebReflection/experimental">experimental.js</a></h3>The most compact and easy way to retrieve experimental features, or standardized, now supports CSS prefixes too. <pre class="code"><br />var JSkey = experimental(<br /> window,<br /> 'requestAnimationFrame'<br /> // optionally explicit, 'js'<br />);<br />// JSkey is the string<br />// webkitRequestAnimationFrame<br />// mozRequestAnimationFrame<br />// others too or<br />// requestAnimationFrame<br /><br />// forcing JS assignment<br />if (!experimental(<br /> window,<br /> 'requestAnimationFrame',<br /> true // force assignment<br />)) {<br /> window.requestAnimationFrame = function(cb){<br /> return setTimeout(cb);<br /> };<br />}<br /><br />// now available in all browsers<br />requestAnimationFrame(daFunction);<br /><br /><br />var CSSkey = experimental(<br /> document.documentElement.style,<br /> 'transform',<br /> 'css'<br />);<br />// -webkit-transform<br />// -moz-transform<br />// or<br />// transform<br /></pre> <h3><a href="https://github.com/WebReflection/require-updated#require-updated">require-updated</a> module</h3>Have you ever needed a module that updates automatically as soon as it's edited in <em>node.js</em> world? This module is meant to provide the most recent version of a module, of course if this is required in the wild rather than once at the top of the JS program. <h3><a href="https://github.com/WebReflection/polpetta#-polpetta">polpetta</a></h3>Some minor clean up and some big plan ahead, makes it the very first <em>fully node.js web server</em> with simplified configurations, as it is now, but extended to stream, gzip, and caching with ETags and all other common techniques to avoid the usage of a web server on top of it at all.<br/>No idea how much this will take but I am willing to provide some good shit by the time node v1 is out, after next, 0.12, release.<br/>If you don't know what is polpetta yet, considered it's the easiest way to have CGI like behavior in node.js in any folder and that it has been tested in all possible environments with excellent performance, even Raspberry PI, pcDuino, RK3066 modules, as well as Amazon server (not in production, I need those adds-on first).<br/>This update is more about telling you that things are being improved and the project is everything but dead and the <em>require-updated</em> module has been created for polpetta indeed ;-) <h3><a href="https://github.com/WebReflection/gitstrap#gitstrap">gitstrap</a> environment</h3>While many keep struggling with node updates and the inability to run grunt, this or that dependency, <em>gitstrap</em> keeps being slightly improved making my git flow every day easier. Travis, wru tests, a proper Makefile, easy customization, I know I should probably spend a bit more time documenting or describing various "how-to" but I believe if you know very basics about bash and make, you don't need much from me there ;) <h3><a href="https://github.com/WebReflection/redefine#redefinejs">redefine.js</a></h3>Not only a simplified, more secure, and battle-tested utility for ES5 engines (node.js, Rhino, others) and browsers (all mobile plus all desktops but IE8), now a simplified way to create <em>Classes</em> too.<br/>Bringing the most useful part from the <a href="https://github.com/WebReflection/poo#poojs">poo.js</a> experiment, <strong>redefine.js</strong> now supports <strong>extend</strong>, to simplify inheritance in a semantic way, <strong>mixin</strong> as it will be in ES6, <strong>statics</strong> for constructors properties and public methods, and all other redefine powerful features like lazy property assignment, defaults for descriptors, and all other things needed for a Class based env, when and if needed! <h3><a href="https://github.com/WebReflection/circular-json#circularjson">CircularJSON</a> Update</h3>With support for <em>non resolved paths</em> when the extra flag is passed through <code>.stringify(data[, receiver[, space[, DO_NOT_RESOLVE]]])</code>.<br/>The result will be similar to other parsers where the circular reference will have simply the word <em>[Circular]</em> in it.<br/><br/> You are welcome :) and see you soon!
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-1590216775702240369
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/03/some-repo-news.html
|
| rel |
alternate
|
| title |
Some Repo News
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/1590216775702240369/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=1590216775702240369
|
| rel |
replies
|
| title |
0 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/1590216775702240369
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/1590216775702240369
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-03-17T01:42:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Some Repo News
|
|
| updated |
2013-03-17T01:45:40Z
|
|
| 16 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<strong><a href="https://github.com/WebReflection/circular-json#circularjson">CircularJSON</a></strong> is my next level take on <a href="https://twitter.com/getify/status/235391046224326656">@getify thoughts</a> about <em>recursive-safe</em> <code>JSON.stringify()</code> operation, going further than what <a href="https://twitter.com/izs">@izs</a> proposed with his <a href="https://github.com/isaacs/json-stringify-safe#json-stringify-safe">json-stringify-safe</a> module which aim, and purpose, can be summarized in his reply: <blockquote>This module is useful for the use case I'm using it for. If it's not your cup of tea, well, GOOD NEWS! There are a lot of cups with a lot of different flavors of tea in them.</blockquote>Thanks man, what you probably don't know is that actually, there are no concrete, safe, performant, solutions to that problem ... oh well, now there is one! <h3>CircularJSON</h3>My fully tested, 650 bytes, portable and cross platform solution, is based on same isaacz logic: the usage of <code>JSON.stringify(data, receiver)</code><br/>In few words, if you consider safe the native <code>JSON</code>, you can consider <strong>safe</strong> <code>CircularJSON</code> too in <strong>both serialization and deserialization</strong>.<br/>Despite what you might think about recursive serialization, <strong>there's no magic behind</strong> and <a href="http://webreflection.github.com/circular-json/test/">all tests</a> can prove that <code>CircularJSON</code> is simply safe and working as you expect. <h3>How Can Be That Safe</h3>THe logic behind is based on native JSON behavior where the receiver and the reviver functions are all CircularJSON uses in order to work.<br/>For the end user, <strong>same JSON API</strong> is preserved and it works as expected so nothing is different, except circular references are recreated during parse operation.<br/>Once again, <strong>not a rewritten parser, neither a RegExp based solution</strong>, CircularJSON is the simplest solution to the most common circular, recursion, repeated object, problem. <h3>How About Performance</h3>This is tricky, and you can test performance via <code>node test/benchmark.js</code> and compare results in your machines and with your node version.<br/>Generally speaking, performance is about <em>twice as slow</em> as regular JSON but <em>only with never repeated data</em>.<br/>That's correct, as soon as there are repeated objects in the serialization and deserialization process, <em>CircularJSON goes faster</em> until <em>being faster than JSON</em> when there are more repeated objects in the stream.<br/>I am obviously excluding cycles and circular references from the game since we all know JSON will simply fail, don't we? <h3>Why Solving Circular References</h3>First of all, because we are developers. If there are circular references it probably means we needed them, right? As summary, in my opinion, <em>any attempt to get rid of circular references because of serialization is a failure</em> for the simple fact that once deserialized, we canot have that reference back anymore.<br/><strong>THere could be cases we need circular references</strong> and as PHP, as example, solved them since ever through <code>serialize()</code> and <code>unserialize()</code> function, we might want to do the same via JavaScript: why not?! <h3>Do Not Mix Shit!</h3>While <a href="https://twitter.com/izs/status/311875255272607745">@izs thinks I am a moron noob</a>, <a href="https://twitter.com/getify/status/311876630148681729">Kyle insinuated something could go wrong</a> ... well, GOOD NEWS IS, <em>they are both wrong as long as you don't use <code>CircularJSON.parse()</code> with data that has been encoded with <code>JSON.stringify()</code></em> and of course, the same is valid the other way round: do not <code>.parse()</code> via <code>JSON</code> what has been encoded via <code>CircularJSON</code> ... <strong>it's like using JSON to decode PHP serialized strings</strong> or vice-versa ... you know what I mean? <h3>Welcome To Other Languages</h3>As the fact it has been implemented in multiple programming languages helped <a href="https://github.com/WebReflection/JSONH">JSONH</a> to be that successful, and before, of course, JSON protocol itself, once many other programming languages in both client and server will be able to be compatible with circular references this project could be more widely adopted, specially to those that do not use <code>node.js</code> as server side solution.<br/>Long story short, you are welcome, and thank you in advance, for any <i>other language</i> implementation you might want to push in <a href="https://github.com/WebReflection/circular-json">this repository</a>. Enjoy!
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-5611093164375757065
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/03/solving-cycles-recursions-and-circulars.html
|
| rel |
alternate
|
| title |
Solving Cycles, Recursions, And Circulars References In JSON
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/5611093164375757065/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=5611093164375757065
|
| rel |
replies
|
| title |
0 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/5611093164375757065
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/5611093164375757065
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-03-14T03:11:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Solving Cycles, Recursions, And Circulars References In JSON
|
|
| updated |
2013-03-14T03:14:30Z
|
|
| 17 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
Every now and then somebody comes out with this problem: <blockquote>How do I stop an iteration such <code>forEach()</code> ? </blockquote>Well, there are at least a couple of ways to do that ... <h3>Dropping The Length</h3>The first tacky way to stop executing a function is to drop the length of the array. Every extra receives the initial ArrayLike object as third parameter so a function like this should be safe enough: <pre class="code"><br />function forEachAndBreak(value, i, arr) {<br /> if (someCondition(value)) {<br /> arr.length = 0;<br /> }<br />}<br /><br />someArray.forEach(forEachAndBreak);<br /></pre>Bear in mind, this will affect the initial array too so if this is not desired, a copy is needed: <pre class="code"><br />someArray.slice().forEach(forEachAndBreak);<br /></pre><h4>Cons: Still Looping</h4>Even if this trick works as expected, there is something we don't see behind the scene: the loop is still going on. If you ever wrote some array polyfill, you might have heard that the <code>for</code> loop should verify that <code>i in arr</code> is true, before invoking the function or handling the value at that index since the Array might be a sparse one, where some index might be missing. The same happens with native arrays, you might try this and be stuck for a while: <code>Array(0xFFFFFF).forEach(alert)</code>. It does not matter if that alert will never be called, the engine is looping through the whole length and verifying each index. <h3>Using Some</h3>This is the most common way to prevent the problem. <pre class="code"><br />[1,2,3].some(function (value, i, arr) {<br /> alert(i);<br /> if (value === 2) {<br /> return true;<br /> }<br />});<br /></pre>Above will alert only 0 and 1 and the loop will be terminated as soon as <code>true</code> is returned. To quickly test this, let's use again that horrible, gigantic, Array ... <pre class="code"><br />var a = Array(0xFFFFFF);<br />a[1] = 2;<br />a.some(function(v){if(v === 2) return true});<br /></pre>You'll notice that this time the return is immediate, there's no reason to wait after the first result.<br/>In few words, <code>Array#some()</code> is way better than <code>forEach()</code> in all those situations where we would like to break the loop at any time: we just return <code>true</code> when we want to, no need to return anything in all other cases. <h4>Array#every() Is NOT The Opposite Same</h4>THe thing you might confuse about <code>every</code> is that <em>you always need to return something</em> while this is not the <code>some()</code> case. As we have seen, we return only when/if we want to break. <h3>Finding The Index Or The Value: The Outer Scope Way</h3>Another common pattern is to use this approach to actually <em>find the index</em>, something <code>Array#indexOf()</code> cannot achieve when the condition is more complicated than just a simple <code>===</code> comparison. Using an external variable can help here: <pre class="code"><br />var index;<br />if (array.some(function (value, i) {<br /> if (complicatedCheckAgainst(value)) {<br /> index = i;<br /> return true;<br /> }<br />})) {<br /> doComplicatedStuffWith(array[index]);<br />}<br /></pre>Analogue situation with the value, so that we can directly retrieve what we are looking for if needed. However, this is kinda less common/used pattern since with the index we might <code>splice</code> or do more operations than just getting the value; <h3>Finding The Index: The RegExp Way</h3>This is quite tacky but fast enough and suitable when the extra argument is not used: I am talking about the context. <pre class="code"><br />var index = array.some(function (value, i) {<br /> if (complicatedCheckAgainst(value)) {<br /> return this.test(i);<br /> }<br />}, /\d+/) && +RegExp['$&'];<br />if (index !== false) {<br /> doComplicatedStuffWith(array[index]);<br />}<br /></pre>Above pattern can be handy for inline operations: <pre class="code"><br />[].some.call(body.childNodes,flagIt,reNum) !== false &&<br />(body.childNodes[RegExp['$&']].flagged = true);<br /></pre>Whenever it makes sense or not, we can reuse that function and that <code>reNum</code> in different situations and inline, without needing to create an outer variable. Latter point is indeed the main advantage, reusability without knowing the outer scope. This could be achieved creating something similar via a closure, but that would be probably boring... <h3>Array#findIndex</h3>It looks like TC39 will talk about a method ilke this too, so here what I believe would be a draft candidate: <pre class="code"><br />(function(AP){<br />AP.findIndex || (<br /> AP.findIndex = function(fn, self) {<br /> var $i = -1;<br /> AP.some.call(this, function(v, i, a) {<br /> if (fn.call(this, v, i, a)) {<br /> $i = i;<br /> return true;<br /> }<br /> }, self);<br /> return $i;<br /> };<br />);<br />}(Array.prototype));<br /></pre>Enjoy!
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-3630492577482806815
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/03/breaking-array-extras.html
|
| rel |
alternate
|
| title |
Breaking Array Extras
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/3630492577482806815/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=3630492577482806815
|
| rel |
replies
|
| title |
3 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/3630492577482806815
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/3630492577482806815
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-03-04T00:14:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Breaking Array Extras
|
|
| updated |
2013-03-04T00:16:13Z
|
|
| 18 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
Two days ago I've submitted <a href="https://gist.github.com/WebReflection/4993437#file-annotated-js">a JavaScript loader</a> to <a href="http://www.140byt.es/users/WebReflection">140byt.es</a> since this loader, once minified, <strong>fits into 136 bytes</strong>. The reason the entry is 140 in the site is that I've left on purpose <code>/**/</code> to easily spot where you should put JS files to load. <h3>And That's Not It</h3>Once we have an Array, we have also <code>.concat()</code>, and once we have concat, we have the ability to decide, inline, what should be in the menu: <pre class="code"><br />var<br /> menu = [].concat(<br /> // starter<br /> 'onrefusedbeef' in window ?<br /> 'caprese' : 'salami',<br /> // main course<br /> (function(window){<br /> return !!window.bigAppetite;<br /> }(this)) ?<br /> [<br /> 'pasta',<br /> 'salad',<br /> 'bred'<br /> ] :<br /> 'salad',<br /> // dessert<br /> ['coockies'].concat(<br /> this.extraCalories ?<br /> ['chocolate', 'sour cream'] :<br /> [] // nothing to add<br /> )<br /> )<br />;<br /><br />// check the menu, chef<br />alert(menu.join("\n"));<br /></pre>You can play with different kind of menus, simply polluting the case with whatever i needed. <pre class="code"><br />this.bigAppetite = true;<br />this. onrefusedbeef = null;<br />this.extraCalories = true;<br /></pre>The cute part about <code>.concat()</code> is the ability to pass empty arrays, when no extra value should be added to the list, just one element at the time, as example strings, or a list of elements, with the ability to create nested list thanks to nested <code>[].concat()</code>.<br />In few words, <em>Array#concat() suites perfectly with a list of files to include</em> <h3>Real JS Use Cases</h3>Assuming we don't have partial shims in every single file, assuming we want to bootstrap whatever intakes to have a normalized environment, <em>and do nothing otherwise</em>, here an example: <pre class="code"><br />// to loadvar<br /> OK = [],<br /> toLoad = OK.concat(<br /> Object.create ? OK : 'es5-sham.js',<br /> OK.forEach ? OK : 'es5-shim.js',<br /> Function.bind ? OK : 'bindOnlyShim.js',<br /> window.JSON ? OK : 'json2.js',<br /> [ // library list<br /> 'lib.js',<br /> 'main.js'<br /> ]<br /> );<br /><br />// check this out<br />alert(toLoad.join("\n"));<br /></pre>In most modern browsers above snippet will alert only main files while in many Android browsers, the list will have <code>Function#bind()</code> only shim included, since everything else is there so Array extras are not needed. In older browsers we'll have Array extras, only after Object extras so that Array extras could use ES5 way to define extras ... in few words, the key here is to have scripts aware of their own dependencies instead of include partial shims all over and over ... this is because this little loader loads one script per time and this is ideal when scripts are ordered by dependencies. <h3>All Together</h3>Here how the script will look like, <em>as last tag in your document body</em>, in order to have exactly what you need, in exactly the order you need it. <pre class="code"><br /><!DOCTYPE html><br /><html><br /><body><br /><!-- everything you need --><br /><script><br />!function(b){<br /><br />// extra functions, test, variables here<br />// it's a closure !<br /><br />function c(){if(d=e.shift())a=b.body.appendChild(b.createElement("SCRIPT")),a.onload=c,a.src=d}var K=[],e=K.concat(<br /><br /> Object.create ? K : 'es5-sham.js',<br /> K.forEach ? K : 'es5-shim.js',<br /> Function.bind ? K : 'bindOnlyShim.js',<br /> window.JSON ? K : 'json2.js',<br /> [ // library list<br /> 'lib.js',<br /> 'main.js'<br /> ]<br /><br />),a,d;c()}(document);<br /></script><br /></body><br /></html><br /></pre><h4>Best Practices For Best Performance</h4><ul><li>do not repeat mini/partial/shims/polyfills per each file, do not try to make every file stand alone. In this way you serve, and load, only what's needed</li><li>decide statically, if necessary, dependencies in a logical order. If a file is shimming everything, and you want to trust that file, put that before any other that might try to put a shim if the library is not under your control so that file will use the already shimmed function you trust. As example, if any library contains a tiny JSON parser, put the official JSON polyfill before that file if needed. Same is for any library that tries to shim Array extras, put es5-shims before, and of course, only if needed</li><li>aggregate everything that cannot be left out, unless your library is 2 Mb gzipped, or unless you have lazy loaded stuff ... but for everything else, really, there's no need to serve 100 tiny files, put them together as part of your library</li><li>put main app logic a part and forget <code>DOMContentLoaded</code> or <code>$(window).ready()</code>, since this tiny loader works when the body and everything else is on the DOM ... did I tell you to put the loader at the very end of the page? :-)</li></ul>Enjoy!
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-44587960017855454
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/02/an-in-house-yep-nope-like-js-loader.html
|
| rel |
alternate
|
| title |
An In House, Yep Nope Like, JS Loader
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/44587960017855454/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=44587960017855454
|
| rel |
replies
|
| title |
1 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/44587960017855454
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/44587960017855454
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-02-23T18:47:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
An In House, Yep Nope Like, JS Loader
|
|
| updated |
2013-02-23T23:02:21Z
|
|
| 19 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
I've created many repositories in my programming history, starting from the good old <a href="http://code.google.com">Google Code</a>, passing through Mercurial HG and svn, ending up using on daily basis the awesome <a href="https://github.com/WebReflection">Github</a>.<br />There is something I've spotted every time I've created a new repo, I needed a way to do <em>always the same thing ... but better each time</em>!<br />The very latest case is the <a href="https://github.com/WebReflection/caller-of#caller-of">callerOf utility</a>, something that small and already demanding usual/common stuff such:<ul><li>a meaningful and organized structure, instead of files in the wild</li><li>an easy way to test for browsers and often <a href="http://nodejs.org">nodejs</a> too</li><li>a simple build process per each target, able to combine them all at speed light</li><li>a linter for those projects that could be widely adopted and linters are so annoying ... where was I ... right ... </li><li>thanks to the same folder structure, an already prepared <code>.gitignore</code>, together with the <code>.npmignore</code></li><li>a <code>LICENSE.txt</code> file, in my personal experiments and libraries always <em>Mit Style</em></li><li>a <code>Makefile</code> able to help me combining all these tasks</li><li>last, but not least, an almost fully prepared, and basic, <code>package.json</code> file with main info to publish</li><li>optionally, the usage of <code>.travis.yaml</code> for the awesome <a href="https://travis-ci.org">Travis CI</a> service</li></ul> <h3>About Travis</h3>Today <em>I've maden a donation</em> to <a href="https://love.travis-ci.org">help those guys maintaining the project</a>. The email as soon as something goes wrong is a great way to be notified about problems. I've worked in many enterprise environment where this is the default, most basic configuration, to be instantly notified and be able to fix ASAP or revert instantly and a free service working all the time doing this for all those Open Source projects cannot be ignored, and applauded from Developers indeed.<br/>All major programming languages are supported plus it's not that difficult to configure and it's based, if node.js is supported, to the simple <code>npm test</code> command: <strong>awesome</strong>!<br/>I won't tell you how much I've donated 'cause it does not matter as long as you donate something to these good fellas, right?<br/> <h3>I Might Not Need Travis, But ...</h3>The basic way I've configured my <code>gitstrap</code>, this is the silly name I've chosen for the repo with most basic structure, <em>forces me to build and run tests before being able to push</em>. OK, OK ... is not that if I don't build and run tests I cannot push, I mean, it could simply be the <code>README.md</code> edited and not necessarily code, but to know if my code/library is working, I necessarily need to <code>make</code> and, in that case, be sure that everything is green.<br/>In few words, <em>the moment I push some code I am pretty sure Travis CI will be still green</em> <strong>but</strong> if something goes wrong with one of the node.js versions, the test, the server, whatever, really, <em>I'll be still notified and able to react</em>.<br/>The classic scenario is a <em>pull request</em> proposed without testing, mybe looks good, only Travis will tell you if it really does, right? ... oh well, feel free to enforce whoever sble to edit even online to run tests ... if you manage :) <h3>What I Think Is Essential</h3>In my cases these are the most basic dependencies, able to make my workflow <em>freaking fast</em> and robust enough too.<ul><li><a href="https://github.com/WebReflection/wru#wru--javascript-tests-have-never-been-that-easy">wru testing framework</a> for node.js and web via <code>make test</code>, already configured in latter case inside a handy <code>index.html</code> eventually published via <code>gh-pages</code> through <code>make pages</code></li><li><a href="https://github.com/WebReflection/polpetta#-polpetta">polpetta</a>, in order to be able to automate the inclusion of <em>the same test for both web and node.js</em> in a <code>ctrl+click</code> and <code>make web</code> shortcut</li><li><a href="https://github.com/jshint/jshint/#jshint-a-static-code-analysis-tool-for-javascript">JSHint</a> to eventually enforce the usage of a linter, through <code>make hint</code> shortcut</li><li><a href="https://github.com/mishoo/UglifyJS#new-uglifyjs2">UglifyJS</a></li></ul>All above projects can be simply included in the current folder via <code>make dependencies</code>, not distributed via <code>npm</code> since these are not really part of the project, except the test, where in this case a tiny overhead of <em>130Kb for <strong>wru</strong> testing library</em> isn't really a problem for anyone, right? :) <h3>This Is <a href="https://github.com/WebReflection/gitstrap#gitstrap">gitstrap</a></h3>Really a sort of <em>github boilerplate for JS related projects</em>, something <a href="https://github.com/WebReflection/gitstrap">already organized and ready to go</a>, something you can simply: <pre><br />curl -s https://raw.github.com/WebReflection/gitstrap/master/new >~/gitstrap && bash ~/gitstrap && rm ~/gitstrap<br /></pre>Following <a href="https://github.com/WebReflection/gitstrap#automatic-setup">instructions here</a>, or if you prefer a manual installation: <pre><br />git clone git://github.com/WebReflection/gitstrap.git project-name<br />cd project-name<br />rm -rf .git<br />make dependencies<br />git init<br />git add .<br />git commit -m "gitstrap in"<br />git remote add origin git@github.com:yourname/project-name.git<br />git push -u origin master<br /></pre>After this, don't forget to update <code>Makefile</code> and <code>package.json</code> with the right name, specially if you are planning to push to npm, as well as the <code>README.md</code>.<br/>I might decide to automate this procedure too pretty soon and any extra task or contribution will be more than welcome. Right now I think this is enough. <h3>About Files And Folders</h3>Right, this is where I explain what the hack is that structure ... let's start from the top: <h4>build/</h4>This folder will contain all versions of the same projects, if the project would like to be compatible with <em>nodejs</em>, <em>web or generic JS engine</em>, <em>AMD loader</em> based on define logic and stuff. <h4>Yes, A Different Automated File!</h4>After all discussion on "<em>how should a file be to be compatible with all the mess out there</em>" I've realized that <em>exporting JS is really a matter of env</em>, so if everything else is more or less the same, why on earth pollute all possible projects with that exporting nonsense? You need AMD? <a href="https://github.com/WebReflection/gitstrap/blob/master/build/main.max.amd.js">You get AMD</a> ... You need node.js? <a href="https://github.com/WebReflection/gitstrap/blob/master/build/main.node.js">You get node.js</a> ... and same is for <a href="https://github.com/WebReflection/gitstrap/blob/master/build/main.max.js">generic env</a>, is really that easy!<br/>Please note that all builds generate a <strong>.max</strong> version of the file, those I've just linked, and <a href="https://github.com/WebReflection/gitstrap/blob/master/build/main.js">a minified version too</a>, with the exception of node.js, since I don't believe in packed server side code that much :-) <h4>index.html</h4>This is used to generate the test page in <code>gh-pages</code>, so that once the <a href="http://webreflection.github.com/gitstrap/">pages have been generated</a>, the <a href="http://webreflection.github.com/gitstrap/test/">test folder</a> will contain those tests and launched through the <code>index.html</code> file. <h4>Makefile</h4>The most important thing to edit here is the name of the project and the main file, or the list of files to use. These can be different per build, if needed, or just the same for all of them. You decide! <h4>LICENSE.txt and other files</h4>Have been explained already :-) Modify the name in the license, modify the license too, if necessary, and that's pretty much it. You need to edit where necessary to go with your own project. <h4>src/</h4>Here is where your source files should go. If the build shoul dhave different targets, as example for node or amd, I think is good to prefix or suffix them with these names. The <code>main</code> used as example is what the project will export, just an empty object. <h4>template/</h4>This might look weird but it's actually what will be used, as file, before and after each build. These files could be empty too, it does not really matter, but it's handy to have them to easily generate AMD, node.js exports, or generic closures to use before and after the generic code reused across targets. <h4>test/</h4>Here the big deal, where the <code>.test.js</code> file will be in charge of running <strong>wru</strong> against whatever test is present in the folder, as long as there is a counter part in the src too. This should make the possibility to test in isolation easier. Bear in mind <em>node.js needs to <code>require()</code></em> but the browser can load things in pieces so both built version and other files will be included and tested, if tests are in place. <h3>As Summary</h3>The aim of this repo is to make at least my life easier, and you can see already in all my github repos that the structure is already like this, and every project is a partial clone of the other with tiny improvements over the <code>Makefile</code> and some automation maybe not necessary anymore, as it was this good old builder <a href="https://github.com/WebReflection/wru/blob/master/builder/JSBuilder.py_deprecated">once in python</a>, then <a href="https://github.com/WebReflection/wru/blob/master/builder/JSBuilder.js">in nodejs</a>, and finally obsolete in latter repos :)<br/>Have fun with you extra ultra cool best library ever!
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-2118493030956690517
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/02/my-personal-github-flow.html
|
| rel |
alternate
|
| title |
My Personal Github Flow
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/2118493030956690517/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=2118493030956690517
|
| rel |
replies
|
| title |
0 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/2118493030956690517
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/2118493030956690517
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-02-20T06:07:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
My Personal Github Flow
|
|
| updated |
2013-02-21T06:38:30Z
|
|
| 20 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
... is really that easy to start from the scratch or abandon everything, but that's not, by any meaning, an evolution, is rather a reboot.<br/>Unfortunately, written software cannot reboot that easily, and we all know that, except few exceptions where is really needed and we call that refactoring!<br/>Refactoring is needed when everything is not under reasonable control or performance anymore, refactoring puts everything on hold until it's completed ... you know that ;) <h3>Focus On Reality</h3>We really should never loose focus on what we are really trying to do, really trying to improve, and for who, if needed, and beside our own self thoughts.<br/>If the rest of the world is doing something in a way, we have really few chances to change that way quickly and easily because we decide that way is wrong, right?<br/>We need to be able to <em>propose the best change able to improve that <strong>de-facto reality</strong></em> rather than thinking that we are able to improve everything simply imposing <i>our own superior</i> reality ... right ? The moment we'll impose blindly our own meaning of "<i>best way ever</i>", without even analyzing what's good out there, we are doing everything wrong, IMHO! <h3>Graceful Enhance ... Everything!</h3>Really, I think this is generally speaking the best way to go on and, probably, <strong>the only way to go</strong> too, since everything else has historically failed already so ... why try again?<br/>Understand developers needs inside their libraries too, and not only patterns they used, is, as example, a good starting point.<br/>I am expecting this to be a sort of <em>JS improvements constitution</em> for the most used programming language in the world, accordingly with the biggest open source community, at least in github ... <h4 id="js-constitution">For A Better JS Future</h4><ol> <li>do not break what has been widely adopted already, unless that's really bad in terms of security</li> <li>try to stick with the already available and standardized syntax, allowing partial or full polyfills because of graceful <i>OS, Environment, Browsers, Engines, whatever!</i> migration</li> <li>involve as many developers as possible (public survey over internal survey) <strike>rather than provide already decided internal decisions based in already decided internal pools nobody ever heard about out there</strike></li></ol>Three points, since everything else is reasonable already and done in a good way ... still! <h4>Why Is This Important</h4>I think these points are more or less everything I wished following es-discuss mailing list, really ... from time to time, I have experienced these situations, absolutely unexpected: <ol> <li>ES4 failed because it was braking the web, we have transpilers now, so everyone should use them instead of JS because of new unsupported syntax (transpilers break the web!)</li> <li>if that library does that, and everyone likes that, and that library is not the old Prototype.js or another one nobody here heard about, that library is wrong and that behavior should be different</li> <li>we don't want internals/private pools saying that what the rest of the world thinks is needed is wrong, we can have a much bigger audience through public surveys.</li></ol><strike>Latter one was the most frustrating experience, personally speaking, trying to follow and contribute in that mailing list with parallels, private, things behind the scene, I could not stand by since either you are public, being the ML public and telling the world you are, or you are not, and you can have, in that case, all pointless, useless, irrelevant, pools you can think about, without bothering the rest of the world with your results!</strike><br/><br/> <strong>About That, I Apology</strong> because I know that specific case had, again, best intentions, but my point is that surveys should be public too because if 3 developers cannot represent the entire community, neither can 300 behind the same company, or just a couple. There are many more of us out there, <strong>I'd love to see the possibility to participate every time a decision about an API should be made</strong>!<br/><br/> Thank you for listening!
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-4187845885450868879
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/02/jokes-part.html
|
| rel |
alternate
|
| title |
Jokes A Part ...
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/4187845885450868879/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=4187845885450868879
|
| rel |
replies
|
| title |
0 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/4187845885450868879
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/4187845885450868879
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-02-10T08:34:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Jokes A Part ...
|
|
| updated |
2013-02-11T18:25:49Z
|
|
| 21 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
So, you might know already, but ES guys are talking these days about modules and things, as usual, went out of control since everyone wants its own best module version, ever! <h3>Current Status</h3>Synchronous, asynchronous, AMD, <code>require()</code> ... apparently <a href="https://twitter.com/indexzero/status/300431421300957184">these are all right</a> for some use case, but <a href="https://twitter.com/BrendanEich/status/300433014490546176">wrong for some other</a>.<br/>It looks like JS cannot do synchronous modules ... wait what? <blockquote>why browsers can't since browser have synchronous require since the very beginning? <script> tag anybody? </blockquote><a href="https://twitter.com/WebReflection/status/300431478888751104">This was me</a> after reading few times JS cannot do sync. Turned out, <a href="https://twitter.com/BrendanEich/status/300433739597631488">sync script is in HTML specs, not JS one</a>, but wasn't this about JS indeed, where JS on browser never had this real problem and is simply envious of <node>node.js</code> module loader simplicity? <h3>How About Facing Reality</h3>... where in every language, requiring dependencies has always been synchronous because nobody ever cared about that latency, right? And did anyone even bothered using asynchronous file reading to include modules?<br/>Not even <code>node.js</code> does that, the most async-centric env I personally know!<br/>As summary, since this is a browser only problem, what I would expect is <em>the ability from browsers engine to pause in a non blocking way the client until the file has been loaded</em>. You know what I mean? F# does that so that's not an impossible reality ...<br/>How cool would that be and how "<em>free from browsers limits</em>" the specification of the next module loader in a programming language would be?<br/>The answer seems to be that JavaScript is not an HTML/W3C matter but is limited because of HTML/W3C implementors, those browsers ... <br/><img src="http://i0.kym-cdn.com/photos/images/original/000/131/399/fry.PNG?1307468855" width="380"/><br /> <h3>It Doesn't Matter, Had Module!</h3>Developers are concerned that <a href="http://twatlr.com/thread/299628842610458626">TC39 might not have real use cases</a> and the funny part is that an evangelist of everything you know about the web as <a href="https://twitter.com/paul_irish">@paul_irish</a> is had his self <a href="https://twitter.com/paul_irish/status/300080151927062528">some concern about TC39 choices</a> in term of <em>real-world</em> cases.<br /><strong>Meanwhile</strong>, <a href="http://webreflection.blogspot.de/2012/09/a-meaningful-client-side-alternative-to.html">AMD does not seem to be an answer</a>, neither <a href="https://twitter.com/BrendanEich/status/300438654835380224">the preferred choice</a>, but regardless we have these scenarios: <ul><li>those who write for the web and go AMD</li><li>those who write for node.js and go require</li><li>those who will probably add all <a href="https://github.com/umdjs/umd/blob/master/returnExports.js#L39">this crap</a> regardless, and with all due respect for the dev who wrote that with best intentions, even if testing only on web or only node.js (and again, the point is not about the snippet but the fact it should be everywhere in the JS world, you got what I mean, I am sure!)</li></ul>In few words, <a href="https://twitter.com/domenic/status/300373615604543488">Domenic's suspects</a> are already a reality: <a href="https://github.com/rwldrn/tc39-notes/blob/master/es6/2013-01/jan-31.md#414-module-update">nobody is even caring/following about what's going on in this discussion</a>!<br/>Lazy developers will simply realize at some point nothing works anymore and will go strike blaming the corrupted system, the conspiracy agains the World Wide Web, the fact nobody told them it was going to disappear or change even after 5 years of warnings about deprecations in console, etc etc ... right?<br/>Wrong, they'll just use what worked for them 'till that day without problems and they will still think that <em>you should not break what's in already</em>, which is one of my favorite parts about ES5, the best update ever, if only every browser was there already, it would be a better JS world for everyone, isn't it? <h3>Decoupling Import From Loading</h3>How insane would that be? A semantic syntax that works in any platform, no matter how the platform loads stuff, the build process behind, or the fact you might wrap this way and do what you think is best, even improving upfront your static analysis ... right?<br/>So here <a href="https://github.com/WebReflection/remodule/">a beta repository called remodel</a>, something you might want to <code>git clone git://github.com/WebReflection/remodule.git</code> to run eventually <code>node node_modules/wru/node/program.js test/remodule.js</code> and see that all tests are passing already.<br/> <h4>Wait, What</h4>So that project is about having <code>import</code> like syntax available even in ES3 <pre class="code"><br />// ES.next modules syntax<br />import {a} from "something"<br /><br />// remodule<br />imports("a").from("something");<br /></pre>You are following, right? <pre class="code"><br />// ES.next modules export<br />module.exports.a = "whatever";<br /><br />// remodule<br />modules("something", {<br /> a: "whatever"<br />});<br /></pre>So, kinda yes, the missing part of all this mess is that a module should be able to register itself if we would like to static analyze it and make the logic work everywhere in both sync and async environments, right? <pre class="code"><br />// ES.next modules export<br />module.exports = {<br /> what: "ever"<br />};<br /><br />// remodule<br />modules("exports", {<br /> what: "ever"<br />});<br /><br />// remodule backward compatible<br />modules("exports", module.exports = {<br /> what: "ever"<br />});<br /></pre>Latter example is about loading that file with current require or without it ... unfortunately modules function should be there but that's easy to fix, right? <h4>What Else</h4><pre class="code"><br />modules("test", {<br /> a: "this is a",<br /> b: "this is b",<br /> c: "this is c"<br />});<br /></pre>With above code, we might be able to export the test module, regardless the position in the filesystem or the package manager, and do funny things such: <pre class="code"><br />var test = imports('*').from('test');<br />JSON.stringify(test);<br />// {"a":"this is a","b":"this is b","c":"this is c"}<br /></pre>Cool? we just imported whatever the module exported itself ... there's really nothing to worry about, as <a href="https://twitter.com/benvie/status/300373256429527040">@benvie</a> might spot out, the <code>this</code> is safe too, is the exported object. <pre class="code"><br />var a = imports('a').from('test');<br />a; // "this is a"<br /></pre>Well, it's straight forward to get that we can import just one thing from a module, right? Behind the scene, the module must be imported once, and never again, but we can grab a property as needed instead of the whole thing, right? ... and more! <pre class="code"><br />var arr = imports('a', 'c').from('test');<br />// same as<br />var arr = imports(['a', 'c']).from('test');<br /><br />// same as, once Array comprehension is in ...<br />var [a, b] = imports('a', 'c').from('test');<br /></pre>We can specify multiple properties out of a single module ... cool, uh? And more! <pre class="code"><br />var aliased = imports({<br /> a: 'A',<br /> c: 'b'<br />}).from('test');<br /><br />// in a real world scenario ...<br />var $ = imports({<br /> jQuery: '$'<br />}).from('jquery').$;<br /></pre>Yep, aliases are there too, so that <a href="https://github.com/WebReflection/remodule/blob/master/test/remodule.js">you can actually test everything for real in this file</a>. <h3>So ...</h3>what I've done there, is not even in charge of loading synchronously or asynchronously anything ... I mean, that should be your build process in charge of making things work and instantly available once needed, right? I mean, the Web/DOM part, I get it, modal spinners all over instead of a frozen tab so annoying for the user, but why nobody simply came out with a library in charge of this? Why ES6 modules will break browsers, using all those reserved words unusable in older browsers, will break node.js logic, being incompatible with the exported module, and will probably be never adopted in fact by anybody?<br/>I am still dreaming about web improvements where stuff that gets out is what's really needed and most likely already used out there. Improved? Better? Sure! Pointless? No, thank you!
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-4602845436138501681
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/02/javascript-modules-maybe.html
|
| rel |
alternate
|
| title |
JavaScript Modules, Maybe
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/4602845436138501681/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=4602845436138501681
|
| rel |
replies
|
| title |
1 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/4602845436138501681
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/4602845436138501681
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-02-10T05:40:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
JavaScript Modules, Maybe
|
|
| updated |
2013-02-10T05:57:54Z
|
|
| 22 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
This is about the <a href="http://www.w3.org/wiki/DOM/domcore/EventTarget">W3C EventTarget</a> interface, something standard in the DOM side, but still confusing in the JavaScript one where <em>EventEmitter</em> in node.js, or many other kind of constructors, are simply simulating what has been there for years, and standardized across all browser engines. <h3>Now In JavaScript Too</h3>Correct, I have implemented, written, and re-writtem this shit so many times that I have decided to "<i>un</i>officialize" the already, well described, interface.<br/><br/> So, <strong><a href="https://github.com/WebReflection/event-target#event-target">here the repository</a></strong>, something you can install in node via <code>npm install event-target</code> and checking examples on how to use it. Cool? I hope so :-)<br/><br/> Only thing that does not make much sense in a non DOM environment is the capture extra argument, something ignored from 90% of the web, something that can be really useful with the DOM but I could not think about any concrete utility in a pure JS world way. Cool thing is: anyone can extend, wrap, or improve, this <code>EventTarget</code> library: enjoy!
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-5061905278735559509
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/02/javascript-eventtarget.html
|
| rel |
alternate
|
| title |
JavaScript EventTarget
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/5061905278735559509/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=5061905278735559509
|
| rel |
replies
|
| title |
0 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/5061905278735559509
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/5061905278735559509
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-02-07T05:53:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
JavaScript EventTarget
|
|
| updated |
2013-02-07T05:53:22Z
|
|
| 23 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
I really do not understand why the Web keeps ignoring this browser which is able to provide <strong>the best browsing experience out of old hardware too</strong>!<br /> It's not me saying that, there are all test you might want to double check or try by yourself. <ul> <li>Opera Mobile VS Chrome mobile, a browser available only in latest hardware, and Safari Mobile for iOS 6, and we all know how good is the hardware here. <a href="http://html5test.com/compare/browser/ios60/chromemobile/operamobile1210.html">Here the result</a>, with Opera Mobile scoring more than anything else</li> <li>Hardware Acceleration, something possible on canvas you might want to test in <a href="http://www.3site.eu/map/">this old prototype of a map</a>, the same I have presented at <a href="http://webreflection.blogspot.com/2010/10/front-trends-2010-my-talk.html">Front Trends in 2010</a></li> <li>multi touches, so that an interaction with more modern UI based on gestures could work without problems. Here the <a href="http://www.3site.eu/jstests/tesla/">tesla experiment</a></li></ul> <h3>In Android 2.X Too</h3>This is the part I love the most about this browser ... I mean, <em>if you assume you have best hardware ever under the hood it's easy to be cool</em>, right?<br />I am looking at you <em>Chrome and Safari Mobile</em>, and I am leaving <em>Firefox Mobile</em> outside this challenge since, unfortunately, it never competed against stock browsers, in terms of performance. They are getting better, and have to, with Firefox OS, but in an Android 2.3 ... not sure where they are :(<br/>I have a Galaxy Ace, an <strong>Android 2.3 phone, that scores with Opera Mobile 406 plus 12 bonus points</strong>.<br />Basically, if all web apps out there would support Opera Mobile, <strong>people should not spend more to update their hardware</strong> because there is a browser that is kicking every other browser asses in term of performance! <h3>Symbian Too</h3>Correct, good old NOKIA phones could be up to date without problems simply using Opera Mobile, no need to spend that much to get a Windows Phone there, if the problem is the browser you can have touches and multi touches plus extreme performance boost simply downloading and using by default Opera Mobile: as easy as that! <h3>Definition Of Best Browser</h3>A browser that is able to bring to the user every possible modern feature, without requiring HardWare or Operating Systems updates. This would be, in my opinion, the best browser in the world, the missing piece we all have and somehow keep ignoring, in this web scenario. <h3>Why Is That</h3>I start thinking Opera Mobile team has a really bad marketing support. I cannot believe <strong>my stock browser scores 200 against 406 in Opera Mobile</strong> and there's no usage percentage in global stats about this browser if not about the Opera Mini version, a completely different beast?<br/>Wha the hell is going on? Why aren't we all developing for this browser too? It's also the easiest to test since available in many platforms ... so, as summary, when I think about <strong>any HTML5 product that does not support Opera Mobile</strong> is kinda lame, while if it does not support Opera Mobile at its best, using all features that are available, usually twice as those available by default stock browser and in a really performant way, we should rethink our priorities, also because once again, <strong>this browsers is available in multiple platform so it should be the preferred target, rather than the least considered one</strong>. This usually means profit too so ... I am just saying, and thank you for listening!
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-340011960695920788
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/02/opera-mobile-is-best-browser.html
|
| rel |
alternate
|
| title |
Opera Mobile Is The Best Browser!
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/340011960695920788/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=340011960695920788
|
| rel |
replies
|
| title |
13 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/340011960695920788
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/340011960695920788
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-02-03T21:56:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Opera Mobile Is The Best Browser!
|
|
| updated |
2013-02-03T22:08:41Z
|
|
| 24 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
<a href="http://vine.co">One of the coolest and most rumored app of these days</a> looked so fun, and conceptually simple, that I could not resist to challenge myself trying to reproduce it via HTML5 and all possible experimental things I know that are working these days for both desktop and mobile. <h3>Wine</h3>This is the name I have chosen for this experiment, and this is the very first warning: <em>it does not work as it should, is not the equivalent, it cannot substitute the native App</em>: too bad, but probably the reason vine team didn't even try to propose such broken experience. <h3>Well, Something Is Working!</h3>Guess who's this idiot with a Koala hat in a leaving room:<br /><br /><img src="https://raw.github.com/WebReflection/wine/master/wine.png" /><br /><br />That's correct, "<i>it's a me</i>" through the <a href="https://github.com/WebReflection/wine">wine</a> experimental project and a Chrome browser. But let's talk a little bit about technologies I have used, OK? <ul> <li><strong>Client</strong> (in order of dependencies)<ul> <li><a href="https://github.com/WebReflection/experimental#experimental">experimental.js</a> and <a href="http://webreflection.blogspot.de/2012/03/tweet-sized-queue-system.html">Queue</a></li> <li>HTML5 <a href="https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia({video:true, audio:maybe})</a></li> <li><a href="https://github.com/mattdiamond/Recorderjs">Recorderjs</a> for the <em>maybe</em> and <em>Canary only</em> audio stream.</li> <li>something else such XMLHttpRequest and FormData, but these aren't important</li> </ul></li> <li><strong>Server</strong> (in order of importance)<ul> <li><a href="http://nodejs.org">node.js</a></li> <li><a href="http://webreflection.github.com/polpetta/">polpetta</a></li> <li><a href="http://ffmpeg.org">ffmpeg</a></li> <li><a href="http://www.lcdf.org/gifsicle/">gifsicle</a></li> </ul></li></ul>If you want to know how to install the environment and play with the project, once again, <a href="https://github.com/WebReflection/wine">the repository</a> explaining how to :-) <h3>How Does It Work</h3>Well, you launch the server, you connect to that page, you press the video up to 6 seconds. If you release your finger or your pointer, it stops recording. when the top bar is filled up, each frame will be rendered as image and sent to the server, together with the audio, where some magic happens and the result is a video in mp4, ogv, and webm formats, plus a nice fallback as animated gif so that every single body can see again those 6 seconds, nice? Now, time to talk about all possible problems I had during its development ... <h3>Everything You Know About getUserMedia() Is A Lie</h3>This has been the biggest headache during the creation of this prototype.<br />All articles I have read, included <a href="http://www.html5rocks.com/en/tutorials/getusermedia/intro/">this excellent one in HTML5 Rocks</a>, which is marking the article valid for Opera and Firefox too, do not work ... really, as simple as that: that stuff does not work!<br /> <h4>The Right Way To Attach A Stream</h4>In my proudly created spaghetti code I ended up with a Frankenstein monster such: <pre class="code"><br />function attachStream(media, stream) {<br /> try {<br /> // Canary likes like this<br /> media.src = window.URL.createObjectURL(stream);<br /> } catch(_) {<br /> // FF and Opera prefer this<br /> // I actually prefer this too<br /> media.src = stream;<br /> }<br /> try {<br /> // FF prefers this<br /> // I think it should not be needed if the video is autoplay<br /> // ... never mind<br /> media.play();<br /> } catch(_) {}<br />}<br /></pre>So, the most advanced browser is apparently behind the schedule because <a href="http://nightly.mozilla.org">Firefox Nightly</a> and <a href="http://www.opera.com/browser/next/">Opera Next</a> just refuse to work through the <code>URL.createObject()</code> approach.<br />However, I found Firefox behavior a non-sense because of the required <code>play()</code>, completely against the logic behind the <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/video#Attributes">autoplay video attribute</a>. <h4>Bad News Is ...</h4> my code ain't gonna work for long time neither, things are changing, so keep reading and smile ^_^ <h4>AudioContext and AudioStream Is Nowhere!</h4>Correct, another myth of these HTML5 days is the audio stream. Nightly is able to expose it inside the stream but I could not manage to retrieve it and handle buffers in and out. Nightly has also another really annoying problem, the redundancy of the microphone recording the audio itself ... <strong>a noise you'll spot</strong> if you don't mute manually your computer speakers.<br />I had to <code>video.muted = true</code> in order to avoid such disturbing noise, something present in Canary too but if the volume is not 100% is much less easy to reach that point. Canary seems to be more clever here! Opera does not seem to work neither with this audio stuff.<br />The best one seems to be Apple Safari browser: <a href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html">nothing works but they have the best documentation</a>! <h4>Surely It's Me</h4>I might have done something wrong, but if browser vendors keep implementing and changing standards behind the scene how can this be developers fault?<br/>Here an example, I ask <cite>how come <a href="http://caniuse.com/stream">getUserMedia() is so much NOT available</a>?</cite><br/><a href="https://twitter.com/mtrimpe/status/295997672035328000">The answer was this one</a>! <blockquote>Because Microsoft recently scuttled ongoing standardization efforts with a surprisingly valid counterproposal I'm afraid.</blockquote> <h4>DAFUQ?!</h4>I love all efforts from Microsoft, Firefox OS, Chrome OS, if any, and all others trying to propose standards ... but I don't understand any vendor that is trying to kill a reasonable one until the best proposed one ever will be rolled out ... I mean, <i>can I haz that meow?</i> <h3>Until Things Are Usable</h3>I feel like somebody is having fun screwing standards from time to time and every abandoned proposal that looks good to developers has the same destiny:<ul> <li>stick forever in some library because in those days, that was the behavior</li> <li>make the new proposal not powerful regardless, since it came out of a hybrid, not perfect one, that everyone probably already adopted, as it is for <code>localStorage</code> and <code>WebSQL</code>, things that just work as developers need to do more, things still there, just randomly there</li> <li>fragmented on the Desktop, fragmented on the mobile more than ever and where <strong>on mobile, updates do not basically exist. On mobile, we keep changing Hardware generations, and not software!</strong><br/>iOS here is a partially lovely exception, able to update longer, but my iPad 1 is stuck behind iOS 5.X, you know what I mean ... right ?</li></ul>I really feel <a href="https://twitter.com/codepo8">Christian Heilmann</a> when he says that what <a href="http://christianheilmann.com/2013/01/31/flash-is-not-the-enemy-our-lack-of-focus-on-what-is-important-is/">matters is <em>reachability</em> and everything else is a futile discussion</a>.<br />I probably have same feelings, better summarized, as web developer, in this personal thoughts: <blockquote>It does not matter if it's <code>touchstart</code> or <code>pointerEventDown</code> event guys, what's important is that it f*#$!(in works when a person put a finger in his device screen and this person bought that device thinking is touch-able ... YES, THE BROWSER TOO! </blockquote>Also, because people don't, and should, ever care about software, that's our problem, and should never be people limitation with the hardware and the software they like, they use, they need, they want ... but we keep smiling, right? ^_^ <h3>The Web Has Never Been This Broken</h3>And this is the beautiful lie behind HTML5: it's utopia that never worked in reality!<br/>Articles and examples that <em>work only for this browser</em>, the thing we have complained about for years about IE thinking "<cite>dude, if you don't know how to create a site don't write it works only for IE you lamer</cite>"!<br />Problem is, we are not going anywhere even on mobile, where guess what, platform fragmentation is growing much more than desktop one. On Desktop we have 3 OS Families, Windows, OSX, and Linux generic distro (I feel you Gentoo, Fedora, Redhat, Ubuntu, Debian, Kubuntu guys ... sorry to group you there).<br/>On mobile, we have newcomers all over so iOS, Android 2.2/1.3/3.0/3.1/4.0/4.0.1/4.1/4.2 and here you have the coolest device ever, and Firefox OS plus that sneaky <strong><a href="http://www.opera.com/mobile/">Opera Mobile</a>, I mean <em>mobile</em>, not mini, the best, fastest, most updated, browser ever for both Symbian and Android 2.X</strong>! <h3>Wasn't This About Wine?</h3>Right ... you are right, I stop here wining about the fact that indeed, Opera Mobile is the only mobile browser able to work, even in Android 2.3, regardless low performance it just look and feel OK there, so if you want to try this you can try with Opera Mobile and enjoy the project.<br/><strong>Chrome Mobile doesn't getUserMedia()</strong>, so doesn't FirefoxOS, neither anything else I could try (come on, you are not trying with a windows phone, right? They killed the current standard proposing something else ... cooler, but more to wait for!).<br /> So, the end of this story is that I have created a project which aim is to simulate a native App, and I miserably failed. <strong>Not because performance were not good</strong>, since once again <strong>it works via Opera Mobile in my <a href="http://www.gsmarena.com/samsung_galaxy_ace_s5830-3724.php">Galaxy Ace</a></strong>, an Android 2.3 smartphone really simple, really functional, really usable thanks to a decent battery life due to low hardware specs, so ... again, <strong>it's not a performance issue</strong>, and you can test it, it's more about mistakes, rush, and wrongly accepted proposal from those that are deciding standards ... for good, sure, but if WebSQL was universally available, cross browser/platform speaking, how much more we, web developers, could have we done?<br/>Think about it, that could have been the best thing ever to build No-SQL concept on top, but never <a href="https://developer.mozilla.org/en-US/docs/IndexedDB">something like this about IndexedDB</a>: <blockquote>Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes. </blockquote> And this after at least 2 years ... now ask yourself honestly if current <code>getUserMedia()</code> was already available cross browser, how many creative things could have been created already?<br/> <h3>At Least These!</h3><ul> <li>web based alarm systems, video can be captured into canvas, canvas can scan images, canvas can detect suspicious movements comparing diffs between previous image and current one in a place that supposes to be quite</li> <li>no need to call the specialist that will install the expensive hardware, the cable, the camera, and everything else, if <a href="https://github.com/felixge/node-ar-drone">we can program quadcopters via node.js</a>, JavaScript is good and fast enough to monitor the house, the garage, the entrance, and tell you everywhere you are in the world, what's going on plus, if you need to, it can send you pictures while <i>quadcopting</i> around :D</li> <li>create a Skype like application without needing Skype at all ... OK, Skype offers an amazing service and we cannot even think to compete on web, but still ... </li></ul> <h3>End Of The Rant</h3>I am pretty sure <a href="https://twitter.com/jeresig">John Resig</a>, who's <a href="http://vine.co/v/bJuBQha1e5X">already using Vine</a> since the very beginning, would actually agree with this Web situation .. or maybe not, since his <em>story-rock API</em> main goal was to uniform all this mess ... but should we keep relying third parts API rather than awesome, ultra skilled, exceptional people, in charge of the future of the Web?<br/><br/> <h3>Anyway, Wine Works With...</h3>So once you have installed everything, all you have to do is to start <code>polpetta</code> in that folder and connect through these browser to that address: Chrome Canary, Firefox Nightly, Opera Next, Opera Mobile, or any other browser you think should support this app, and it will not ... keep smiling!!!! ^_^<br /><br /> Thanks for your understanding, I am developing web mobile since 2009, since Android 1.5, and the thing is: it never got truly better, it just kept changing and fragmenting!<br/>Probably the reason I love my job, and the constant challenge it offers on daily basis but I'd like to do more there ...
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-4762658216081818691
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/02/the-difficult-road-to-vine-via-web.html
|
| rel |
alternate
|
| title |
The Difficult Road To Vine Via Web
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/4762658216081818691/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=4762658216081818691
|
| rel |
replies
|
| title |
2 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/4762658216081818691
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/4762658216081818691
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-02-01T17:50:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
The Difficult Road To Vine Via Web
|
|
| updated |
2013-02-01T17:58:25Z
|
|
| 25 |
| Stomach Contents: Structure - struct |
|---|
| author |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| email |
noreply@blogger.com
|
| name |
Andrea Giammarchi
|
| uri |
http://www.blogger.com/profile/16277820774810688474
|
|
|
| content |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| type |
html
|
| value |
You might think this must be a joke, well <strong>no</strong>, <em>this is a partial lie behind the <code>"use strict";</code> directive.</em><br /> <h3>Roots Of The Hack</h3><pre class="code"><br />// global<br />"use strict";<br /><br />function strict() {<br /> "use strict"; // top of the function<br /><br /> return {<br /> // invoked inline<br /> withStrict: function(){<br /> return this; // undefined<br /> }(),<br /><br /> // invoked inline too<br /> withoutStrict: Function("return this")()<br /> };<br /><br />}<br /><br />// the test<br />var really = strict();<br /><br />really.withStrict; // undefined<br />really.withoutStrict; // global, BOOOOM!<br /></pre> <h3>The Good News</h3>I have been blaming since ever the fact that use strict makes impossible to retrieve the real global object ensuring nobody in the closure redefined <code>window</code> or <code>global</code> by accident so that code is more reliable.<br />Well, now we have the possibility to return it again when it's needed for security reasons or to be sure is the right one. <pre class="code"><br />// a classic code for Rhino, node, and Web<br />var G = typeof window !== "undefined" ? window : global;<br />// then we need to use G<br /><br />// with this hack<br />var global = Function("return this")();<br />// that's it, is the window or the global object<br /></pre> <h3>The Funny News: With Statement Is Back</h3>So, we are able to deactivate the <code>"use strict"</code> directive in the global scope, right?<br/>How about bringing back something that would throw an error otherwise in a strict context as <code>with(){}</code> is? <pre class="code"><br />"use strict";<br />Function("with({test:123}){ alert(test) }")();<br />// 123<br /></pre><strong>It Works!!!</strong> Awesome, we can use a <code>with</code> statement always be executed through <code>Function</code> which, differently from <code>eval</code>, evaluates in the global scope. <h3>With Great Power Come Great Shenanigans</h3>The reason number one for abandoning the <code>with(){}</code> statement is its ambiguity, together with the ability to pollute by mistake the global scope.<br/>However, there were few things impossible to represent without that statement, and few of them have been proposed as <a href="http://blog.mozilla.org/dherman/2011/12/01/now-thats-a-nice-stache/">the monocle mustache</a> behavior. <pre class="code"><br />array.{<br /> pop()<br /> pop()<br /> pop()<br />};<br /><br />path.{<br /> moveTo(10, 10)<br /> stroke("red")<br /> fill("blue")<br /> ellipse(50, 50)<br />};<br /><br />this.{<br /> foo = 17<br /> bar = "hello"<br /> baz = true<br />};<br /></pre> <h3>A Mustache Like With statement</h3>Latter snippet is not able to pollute the global context, neither it changes context, plus it can interact with the outer scope. OK, it is not possible to implement automagically the latter one, but we can still avoid context and global context pollution ensuring a proper <code>this</code> value, and throwing errors if some variable does not belong to <i>the mustached object</i>.<br/>How? Reactivating the <code>"use strict";</code> directive again inside the non strict code: how crazy is that? <pre class="code"><br />function With(o) {<br /> // needs a block, a function<br /> // can simulate that properly<br /> return function (f) {<br /> // deactivate during evaluation the strict directive<br /> return Function(<br /> // it is possible to use the with statement now<br /> "with(this){return(" + ("" + f).replace(<br /> // but we want to reactivate strict env inside<br /> "{", "{'use strict';"<br /> // avoid global context pollution<br /> // forcing a different this<br /> ) + ").call(this)}"<br /> ).call(o);<br /> };<br />}<br /></pre>So, let's see compared with previous examples, right ? <pre class="code"><br />With(array)(function(){<br /> pop()<br /> pop()<br /> pop()<br />});<br /><br />With(path)(function(){<br /> moveTo(10, 10)<br /> stroke("red")<br /> fill("blue")<br /> ellipse(50, 50)<br />});<br /><br />With(this)(function(){<br /> foo = 17<br /> bar = "hello"<br /> baz = true<br />});<br /></pre>Does it work nested too ? Yes! <pre class="code"><br />With({test:{key:"value"}})(function(){<br /> alert(test); // [object Object]<br /> With(test)(function(){<br /> alert(key); // "value"<br /> });<br /><br /> // change the property<br /> test = 456;<br /><br /> // by accident pollute the global scope<br /> not_defined = "oops?"; // throws an error ^_^<br /><br />});<br /></pre>After that, removing the error at the end, the original object would shave the number <code>456</code> as <code>test</code> property.<br />In few words, we can have a <em>secured <code>with(){}</code> statement behavior</em> without the possibility to hurt the generic surrounding scope anyhow, except for those death browser without the strict directive, of course :D <h3>Performance, Use Cases, etc</h3>Yes, I believe the performance problem we know about that statement is still there, but with less problems to take care due strict behavior and a global environment. I would actually say that performance could be optimized with this technique, because no scope and context are implicit or modifiable anyhow, but I am not the right person to tell you what the hell happens in that case inside a JS engine :D<br />Use cases might be tests related, DOM related, since there things are slow in any case, or quick API prototyping due implicit <code>return this</code> nature of the hack: you decide :-) <h3>Last Improvement</h3>If you would like to adopt the technique but you want to be able to bring other local variables in that mustached block, you can use this version of the same function: <pre class="code"><br />// The Strictly Monocle With Statement<br />function With(o,a) {<br /> return function(f) {<br /> return Function(<br /> "with(this){return(" + ("" + f).replace(<br /> "{", "{'use strict';"<br /> ) + ").apply(this,arguments)}"<br /> ).apply(o,a);<br /> };<br />}<br /></pre>With latest piece of code we can bring in that function whatever we need in this way: <pre class="code"><br />With(<br /> document.body, // the implicit context<br /> [ // arguments to pass<br /> jQuery, // jQuery<br /> window._ // lo-dash<br /> ]<br />)(function($, _){<br /> // le the magic happens<br />});<br /><br />// or simply<br />With({},[1, 2])(function(a, b){<br /> alert([a, b]); // 1,2<br />});<br /></pre>:) Thanks for reading!
|
|
|
| id |
tag:blogger.com,1999:blog-34454975.post-891461924419918743
|
| link |
| Stomach Contents: Structure - array
|
|---|
| 1 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/2013/01/resurrecting-with-statement.html
|
| rel |
alternate
|
| title |
Resurrecting The With Statement
|
| type |
text/html
|
|
| 2 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://webreflection.blogspot.com/feeds/891461924419918743/comments/default
|
| rel |
replies
|
| title |
Post Comments
|
| type |
application/atom+xml
|
|
| 3 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/comment.g?blogID=34454975&postID=891461924419918743
|
| rel |
replies
|
| title |
1 Comments
|
| type |
text/html
|
|
| 4 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/891461924419918743
|
| rel |
edit
|
| type |
application/atom+xml
|
|
| 5 |
| Stomach Contents: Structure - struct |
|---|
| href |
http://www.blogger.com/feeds/34454975/posts/default/891461924419918743
|
| rel |
self
|
| type |
application/atom+xml
|
|
|
| published |
2013-01-30T04:44:00Z
|
| title |
| Stomach Contents: Structure - struct |
|---|
| type |
text
|
| value |
Resurrecting The With Statement
|
|
| updated |
2013-01-31T05:01:46Z
|
|
|
