138 Matching Annotations
  1. Last 7 days
    1. Try to avoid mucking with native prototypes, including Array.prototype, if you don't know who will be consuming your code (3rd parties, coworkers, yourself at a later date, etc.). There are ways to safely extend prototypes (but not in all browsers) and there are ways to safely consume objects created from extended prototypes, but a better rule of thumb is to follow the Principle of Least Surprise and avoid these practices altogether.
    2. He's not messing with them he's extending them for Arrays.
  2. Sep 2019
    1. So why are map, filter and reduce useful?

      Advantages of map, filter, reduce:

      • don't have to manually loop over array
      • chain together for short, straightforward array transformations
      • can reuse callback functions and compose them together
    2. During each loop of reduce, you can get result of the last loop, and the next element in the array Change the result, then return it for the next loop iteration When you're done, you have the completed collection

      reduce reduce

    3. This lets you transform each element into something new (or keep it the same) Types don't have to be the same: can return objects, string, numbers - anything!

      map map

    4. It loops over the elements, passing each one to a callback function You can return true to include that element in the new array, or false to exclude it

      filter filter

    5. map, filter and reduce can all operate independently, or be chained together

      map, filter, reduce

    1. forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool. Early termination may be accomplished with:
    1. Object.fromEntries = arr => Object.assign({}, ...arr.map( ([k, v]) => ({[k]: v}) ));
    2. Using reduce and Object.keys As (1), in combination with Object.assign Using map and spread syntax instead of reduce Using Object.entries and Object.fromEntries
  3. Aug 2019
    1. The parentheses ( ... ) around the assignment statement are required when using object literal destructuring assignment without a declaration. {a, b} = {a: 1, b: 2} is not valid stand-alone syntax, as the {a, b} on the left-hand side is considered a block and not an object literal.
    2. Your ( ... ) expression needs to be preceded by a semicolon or it may be used to execute a function on the previous line.
  4. Jul 2019
    1. However using the proposed syntax it's easy to see how big components could have logic broken up into smaller reusable pieces, moved into separate files if necessary, leaving you with small, easy-to-understand functions and components.

      Benefits are evident and good, imho. A big improvement in code organization and separation of concerns.

      Just, I think the new syntax suffers from the loss of, as you said, that easy-to-understand-separation-by-type, that is appealing and clearer to newcomers and people that deal with pretty simple components. The component code is divided in three different sections (State, Computed, Methods) that are easy to scroll and to keep conceptually segregated.

      That's one appealing aspect for beginners, helping them to grab the main concepts and organization of Vue. Also helps giving some simpler view to who not too confident with JS and its patterns. With this "separation by function" the beginner is more disoriented since has to import state & computed as functions to place in specific points. Places that they need to know/remember, rather than just filling up the three object provided in module.exports (and I suppose there are packages that build a basic .vue template for you; maybe vue-cli itself too, that people get used to blindly use).

      So in the end the new syntax gives in my opinion a lot more power in modelling, but requires to accept some compromises with the somehow more verbose syntax (const everywhere; return & export providing private/public but necessarily longer to write) and with the slightly higher shadiness of its main concepts.

      Still, a good & efficient & clear documentation, as it was on Vuejs.org until today, will for sure easily compensate to these drawbacks and bring the most out of this new -more OOP- approach. For me also class could be use here, but I like trying to stay compatible using the prototypical approach (maybe also less overhead? Dunno, I'm not so deeply in the JS world).

      I am actually pretty curious to see how it is gonna evolve. And I am glad I didn't engage with Vue too much yet... 😜

  5. May 2019
    1. The document object gives access to the page content

      note: page content, not other functional areas of the browser. Read on to see other parts of the browser.

  6. Apr 2019
    1. So, if you are thinking of hiring JavaScript developers for your upcoming project, then there is no other time than now.

      So, if you are thinking of hiring JavaScript developers for your upcoming project, then there is no other time than now.

  7. Jan 2019
    1. “I see. You’ve been starting at AAAAAAA... and working up to ZZZZZZZZ....” “Exactly — though we use a special alphabet of our own. Modifying the electromatic typewriters to deal with this is, of course, trivial. A rather more interesting problem is that of devising suitable circuits to eliminate ridiculous combinations. For example, no letter must occur more than three times in succession.” “Three? Surely you mean two.” “Three is correct: I am afraid it would take too long to explain why, even if you understood our language.”

      Andrew Oakley actually wrote a Javascript program to do exactly what the monk was asking Dr. Wagner on the day that Arthur C. Clarke died (March 19, 2008). The site of course has a disclaimer if you decide to run the program to completion: "USE OF THIS PROGRAM IS AT YOUR OWN RISK. I WILL NOT ACCEPT ANY LIABILITY FOR THE CONSEQUENCES SHOULD YOU ALLOW THIS PROGRAM TO RUN TO COMPLETION." See: http://www.aoakley.com/articles/2008-03-19.php

  8. Sep 2018
    1. It's important to understand that in the Event Loop there are Tasks & Microtasks. The Microtask queue is exhausted before returning to the Task queue - and Microtasks can queue other Microtasks, hance why the for loop in this example will block any other execution.

  9. Aug 2018
    1. Such behavior means that errors might be visible somewhere in the user interface, or maybe, when some operation is performed on the wrong value, but not at the moment when the real typo occurred.

      错误会等到它发作的时候才会显现, 而不是在它被定义或编译的时候。 这为错误的排查提供了障碍。

  10. Jul 2018
    1. Strings, like all primitives, are immutable. For example concat() doesn’t modify the existing string but creates a new one.


  11. Jun 2018
  12. May 2018
    1. (the extra + before the first "2" is treated as a unary operator). Thus, JavaScript converts the type of "2" to numeric and then applies the unary + sign to it (i.e., treats it as a positive number).
    2. function sum(x) { if (arguments.length == 2) { return arguments[0] + arguments[1]; } else { return function(y) { return x + y; }; } }

      this combines 'regular' access of function arguments (shown in usage of argument 'x') and using 'arguments' array, in parallel. nice

    3. order of operations
    4. Then, "12" + "2" yields "122"

      probably, since operator precedence is the same across all statement, its performed from left to right with no 'jumps' to preform some operations earlier than others

    5. Since one of the operands ("2") is a string, JavaScript assumes it needs to perform string concatenation and therefore converts the type of 1 to "1"

      this is a basic rule when it needs to decide if coercing of an operand is needed

    6. This behavior also argues for following the convention of placing an opening curly brace at the end of a line in JavaScript, rather than on the beginning of a new line. As shown here, this becomes more than just a stylistic preference in JavaScript.

      I was on the righteous side all those years! Yey!

    1. The reversed array.

      Important - it returns a reference to the original array, which is reversed too (as noted in the example above). Its crucial to understand to prevent bugs...

  13. Mar 2018
    1. This selection tool has nothing intrinsically to do with annotation. It’s job is to make your job easier when you are constructing a link to an audio or video segment.

      I'm reminded of a JavaScript tool written by Aaron Parecki that automatically adds a start fragment to the URL of his page when the audio on the page is paused. He's documented it here: https://indieweb.org/media_fragment

  14. Jan 2018
  15. Dec 2017
  16. Nov 2017
    1. JavaScript widgets create simple graphs to quickly and concisely display activity by exhibit and by student

      Wonder if these were custom-made or if they relate to other initiatives.

  17. Sep 2017
    1. An object is an iterator when it knows how to access items from a collection one at a time, while keeping track of its current position within that sequence. In JavaScript an iterator is an object that provides a next() method which returns the next item in the sequence. This method returns an object with two properties: done and value.

      description of iterator in ES2015

  18. Jul 2017
    1. For notifying the user of events (e.g. calendaring sites), the Notifications API should be used.

      That is a heck of a large privilege to grant a site just so it can avoid showing you a popup on the page itself.

    1. And again, this is just checking client-side, third-party JavaScript libraries for known vulnerabilities.

      Which is why this needs to be taken with a grain of salt. These numbers are frightening until you realize how little impact the actual vulnerable parts of code are going to have on most websites.

      Of the jQuery vulnerabilities linked, 4 are XSS attacks and 1 is a denial of server attack against sites that use jQuery to compile templates on the server.

      In all cases, the site is only vulnerable to the extent that it accepts user input and uses it either serverside or clientside across multiple users.

      Do you really think that all of these libraries are doing that? Absolutely, some of them are. But most sites are using jQuery because they don't know how document.querySelectorAll works, not because they're loading user-submitted comments from a server.

  19. Jun 2017
    1. Examples of other similar JavaScript DI frameworks:

      A useful list of dependency injection frameworks for JS. From what I've seen of the packages listed here:

      BottleJS looks like the simplest and least demanding in terms of JS engine features.

      InversifyJS is heavily orientated towards TypeScript and assumes use of decorators, reflect-metadata etc.

      Inverted is unmaintained and the link 404s.

      I haven't yet looked at WireJS or Mocktail.

    1. "Lazy", "stale", "reactive". Lots of buzzwords.

      Here's a simple explanation for the fullName/nickName magic (fullName stops being watched if nickName exists):

      On every component render, Mobx registers all the attributes they've accessed on state, so it will trigger a forceUpdate on them whenever one of these attributes change.

      If at one render (when there's a nickname) some attribute is not accessed (fullName), the MobX will not register an access on that attribute, so subseqüent changes of that attribute will not trigger forceUpdates anymore.

      If for some reason that attribute (fullName) is accessed ever again (either due to nickName ceasing to exist or due to some other internal component logic) that value is simply given to the component and it starts to be observed again and to trigger forceUpdates again on that component.

  20. May 2017
    1. "who's the target of the assignment (LHS)" and "who's the source of the assignment (RHS)".

      LHS is looking for the target of that assignment whiel RHS is looking for the source!

  21. Apr 2017
  22. Mar 2017
    1. All views use standards-based HTML templates

      Aurelia's standards focus means our code stays relevant down the road.

    2. One of the strengths of Aurelia is that you can write so much of your application in vanilla JS.

      By sticking close to standards, such as upcoming EcmaScript features, Aurelia code prepares for us for the future. It encourages writing code that will be relevant 2-5 years from now, or perhaps beyond.

    3. Separation of Concerns is great for developer/designer collaboration, maintainability, architectural flexibility, and even source control.

      This is a good reason why templates and logic files can be kept separate.

  23. Feb 2017
  24. Jan 2017
    1. Anyone using that older browser should have access to the same content as someone using the latest and greatest web browser. But that doesn’t mean they should get the same experience. As Brad Frost puts it: There is a difference between support and optimization. Support every browser ...but optimise for none.

      This is why HTML (content) must be separated from CSS (layout) and javascript (interactivity). Content is the core functionality. CSS are displayed through progessive enhancement.

  25. Dec 2016
    1. SX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML.


  26. Nov 2016
    1. Interesting dive into how string slicing with String#substring is implemented in the Dart and V8 VMs and the performance consequences of that. This investigation was prompted by poor performance of a port of less.js lexer to Dart vs. the original JS implementation.

      The article ends with benchmarks showing the cost of trying to match sequences of characters in a lexer using a regex vs. manually.

    2. A person with a bit more insight into RegExp features might come up with the following optimization:

      Neat trick for matching regular expressions within a string starting at a fixed position using pre-ES6 features:

      1. Create a regex with the global flag set which matches pattern|() where () is an irrefutable pattern which is guaranteed to match
      2. Set regex.lastIndex to the position you want to match at
      3. Use regex.exec(str)
    3. match can be easily implemented in any modern JavaScript interpreter that supports sticky RegExp flag introduced in ES6:

      Notes on how to match a regex starting at a given position in a string, making use of the sticky flag introduced in ES6.

    1. Vorlon.JS is a tool for remotely debugging JavaScript on any device. Use involves running a Vorlon debugging server on the machine hosting the web service and adding a script tag containing the client runtime to the page that you want to debug.

  27. Sep 2016
    1. Reusing an object with a reset function is much faster than declaring a new object with new

      Better insert a reset function than declare a new object!

  28. Aug 2016
    1. Libraries like jQuery are useful because they hide the ugly details of dealing with cross-browser differences in JS engines. But these OO-helper libraries are different: they're going to great lengths to hide the true nature of JavaScript's OO mechanisms, instead masking them in a set of patterns that are more familiar to other languages.
    1. How it’s implemented doesn’t matter at all unless it’s implemented poorly.The only thing that matters in software development is that your users love the software.
  29. Jul 2016
    1. break case catch class const continue debugger default delete do else enum export extends false finally for function if implements import in instanceof interface let new null package private protected public return static super switch this throw true try typeof var void while with yield

      Reserved JavaScript keywords.

    2. You should imagine variables as tentacles, rather than boxes. They do not contain values; they grasp them

      Nice metaphor!

    1. There is only one value in JavaScript that is not equal to itself, and that is NaN
    2. The string has to stay on a single line.

      Use escape characters for new lines, not <enter> key.

  30. May 2016
    1. JavaScript has brought the web to the brink of ruin

      Though it makes sense in context, the anti-JS sentiment can create new divides.

  31. Apr 2016
    1. Brief but useful contrast of Jest vs. Angular approaches to dependency injection.

      The argument is that most code uses one implementation in production and one mock in testing and that using require() as the seam for inserting test doubles makes code easier to write than Angular's approach of implementing its own module system and DI container.

  32. Mar 2016
    1. Very interesting thread with a discussion on how to improve handling of effects in Redux and make Redux applications composable ala. the Elm Architecture.

      Redux Loop looks like a very interesting take on supporting the Elm arch with the current version of Redux

  33. Feb 2016
    1. Useful deep-dive into ES2015 arrow functions, with actual references to the specs.

    1. A useful (2015) recent comparison of different JavaScript linting tools.

      The TL;DR is that the recommendation is to use ESLint as it is widely used, supports ES6 well and provides a decent combination of configurability and presets.

    1. ES6 performance sucks! Strong mode is a mode for ES6, you cannot use it without using various ES6 features. However, idiomatic ES6 code currently is substantially slower than ES5, across all browsers -- easily by 2x, often by 10x or more. Due to the sheer size of ES6, plus a number of unfortunate design choices, it will likely take years until implementations catch up with ES5 optimisations, and the hundreds of man years that went into those. Until then, strong mode is not going to be an attractive target

      Oh dear, "unfortunate design choices" sound ominous.

    1. I'm not sure I like the requirement to use classes but some interesting notes on dependency injection for JS

    1. window.fetch('/api/v1/users')

      Just fetch() also seems to work.

    2. Testing API requests from window.fetch

      Sinon.js's fakeServer works for XMLHttpRequest but not for window.fetch(). Instead, window.fetch() is really easy to stub with sinon.stub().

  34. Jan 2016
  35. Dec 2015
    1. This is an interesting opinion piece on the difficulties that newcomers have with the React ecosystem and the problems with the lack of a central guidelines about which pieces to use and how to tie them altogether.

      I don't think it applies to just React though - choices around testing frameworks, build tools, languages etc. apply regardless of which framework you are using.

  36. Nov 2015
    1. “Many random number generators in use today are not very good. There is a tendency for people to avoid learning anything about such subroutines; quite often we find that some old method that is comparatively unsatisfactory has blindly been passed down from one programmer to another, and today’s users have no understanding of its limitations.”— Donald Knuth; The Art of Computer Programming, Volume 2.

      Mike Malone examines JavaScript's Math.random() in v8, argues that the algorithm used should be replaced, and suggests alternatives.

  37. Oct 2015
  38. Sep 2015
    1. @private global variables and functions are only accessible to code in the same file.

      This is largely obsolete with CommonJS modules. TypeScript goes further and adds class-private variables.

  39. Aug 2015
    1. One way to be sure that you are using state of the art techniques is to use a scaffolding tool when building new apps/packages. With a scaffolding tool you can also get help when upgrading an existing project that has already been generated with the tool. The most popular scaffolding tool today is Yeoman and it has a huge amount of project generators. To save time when setting up new projects I decided to create a Yeoman generator of my own – generator-klei which is a MEAN stack (MongoDB, ExpressJS, AngularJS and NodeJS) app generator. At first it was a great experience and I was really satisfied with the generator, that was until it had to be maintained.
    2. In the world of web development today it’s hard to stay updated with the ever increasing amount of new modules, libraries and packages that are released each day. What’s hot today can be forgotten tomorrow.

      Slush – A Better Web App Scaffolding Tool

  40. Jul 2015
  41. Mar 2015
    1. Angular Style Guide: A starting point for Angular development teams to provide consistency through good practices.

      This is a fantastic and very detailed AngularJS style/best practices guide. Used by hypothesis/h.

  42. Feb 2015
  43. Jan 2015
    1. variables and functions declared inside of an eval() statement are not created in the containing scope

      this is one point. basically eval will create it's own scope, it may still have access to containing scope, but it won't overwrite conaining loop?

    2. so what's the guidance to use float number in Javascript.

    3. function foo2() { return { bar: "hello" }; }

      this is really hard to detect.

    4. Throws error on invalid usage of delete. The delete operator (used to remove properties from objects) cannot be used on non-configurable properties of the object. Non-strict code will fail silently when an attempt is made to delete a non-configurable property, whereas strict mode will throw an error in such a case.

      in which case, it's useful?

    5. Disallows duplicate property names or parameter values.
    6. Prevents accidental globals. Without strict mode, assigning a value to an undeclared variable automatically creates a global variable with that name. This is one of the most common errors in JavaScript. In strict mode, attempting to do so throws an error.

      this is most important one.

    1. A client-side Javascript SDK for authenticating with OAuth2 (and OAuth1 with a oauth proxy) web services and querying their REST API's. HelloJS standardizes paths and responses to common API's like Google Data Services, Facebook Graph and Windows Live Connect. It's modular, so that list is growing. No more spaghetti code!

      javascript facebook client

  44. Jan 2014