198 Matching Annotations
  1. Last 7 days
    1. Neutrino only babel-compiles first party source (the JSX -> JS transformation is handled by a babel plugin). It does this because even when using the module entry in package.json, it's expected that the provided file (and it's imports) still be JS and not in some other format - ie: the only difference from the content in main should be that it can use modules syntax (that is import and export rather than require etc).

      module version compared to main version:

      only difference from the content in main should be that it can use modules syntax (that is import and export rather than require etc).

      You can see the difference in this example: https://unpkg.com/browse/reactstrap@8.0.1/es/Alert.js ("module": "es/index.js": import) vs. https://unpkg.com/browse/reactstrap@8.0.1/lib/Alert.js ("main": "lib/index.js": require)

    1. esnext: source code using stage 4 features (or older), not transpiled, in ES modules. main continues to be used the same way. Its code can be generated from the untranspiled code. Most module use cases should be handleable via esnext. browser can be handled via an extended version of esnext (see next section).
    2. Input: JavaScript with stage 4 features or older, in ES modules. Output: whatever JavaScript runs best on the target platforms.
    1. This is a browser execution environment. It may provide additional built in objects exposed in the global namespace. It is a specialized execution environment which provides builtin capabilities beyond the base javascript language spec.
    2. This is a non-dom based javascript execution environment. It usually only contains the base javascript language spec libraries and objects along with modules to communicate with OS features (available through commonjs require).
    3. The use of a bundler to create a file(s) suitable for running on a client.
    4. It allows the module code (and subsequently dependants on the module) to not use preprocessor hacks, source code changes, or runtime detection hacks to identify which code is appropriate when creating a client bound package.
    5. The browser field is where the module author can hint to the bundler which elements (other modules or source files) need to be replaced when packaging.
    6. When a javascript module is prepared for use on a client there are two major concerns: certain features are already provided by the client, and certain features are not available. Features provided by a client can include http requests, websockets, dom manipulation. Features not available would include tcp sockets, system disk IO.
    7. You can simply prevent a module or file from being loaded into a bundle by specifying a value of false for any of the keys. This is useful if you know certain codepaths will not be executed client side but find it awkward to split up or change the code structure.
  2. Dec 2019
    1. The combination of WordPress, React, Gatsby and GraphQL is just that - fun

      Intriguing combination of technologies.

      Keep an eye on the post author, who is going to discuss the technologies in the next writings

    1. Various test runners support using compiled webpack code to drive tests, but may be difficult to integrate with webpack, and Neutrino helps alleviate this
  3. Nov 2019
    1. const setRefs = useRef(new Map()).current; const { children } = props; return ( <div> {React.Children.map(children, child => { return React.cloneElement(child, { // v not innerRef ref: node => { console.log('imHere'); return !node ? setRefs.delete(child.key) : setRefs.set(child.key, node)

      Illustrates the importance of having unique keys when iterating over children, since that allows them to be used as unique keys in a Map.

    1. Reason compiles to JavaScript thanks to our partner project, BuckleScript, which compiles OCaml/Reason into readable JavaScript with smooth interop. Reason also compiles to fast, barebone assembly, thanks to OCaml itself.
    1. return class extends React.Component {

      Cool! anonymous/unnamed classes used here

    1. React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.
    1. Since the checkbox is rendering an input I would work with it rather than focusing on the image. You could do something like this: const checkbox = getByTestId('checkbox-1234').querySelector('input[type="checkbox"]') expect(checkbox).toHaveProperty('checked', true)
    2. the way Material UI works is it renders a different SVG when the checkbox is clicked, and not changing the attributes or anything on the actual input element. So how do I actually test that the element is checked in line with the react-testing-library philosophy?

      These tags belong to entire page. This quote is just supporting evidence for the tags.

    1. Tests implementation details a bit (child component props received), but pretty good other than that.

      https://www.robinwieruch.de/react-testing-tutorial, for example, says that is reasonable to do:

      an integration test could verify that all necessary props are passed through from the tested component to a specific child component.

  4. developer.mozilla.org developer.mozilla.org
    1. Using with is not recommended, and is forbidden in ECMAScript 5 strict mode. The recommended alternative is to assign the object whose properties you want to access to a temporary variable.
    1. I don't recommend unit testing stateful components, or components with side-effects. Write functional tests for those, instead, because you'll need tests which describe the complete end-to-end flow, from user input, to back-end-services, and back to the UI. Those tests frequently duplicate any testing effort you would spend unit-testing stateful UI behaviors. You'd need to do a lot of mocking to properly unit test those kinds of components anyway, and that mocking may cover up problems with too much coupling in your component.
  5. Oct 2019
    1. "Element" SelectorsEach component has a data-reach-* attribute on the underlying DOM element that you can think of as the "element" for the component.
    1. There are many strings which I need to convert if not undefined. I could do as follows: { date1: date1 ? formatISODate(date1) : undefined, date2: date2 ? formatISODate(date2) : undefined ...
    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.
  6. 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
  7. 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.
  8. 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... 😜

  9. 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.

  10. 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.

  11. 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

  12. 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.

  13. 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.

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

  14. Jul 2018
  15. Jun 2018
  16. 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...

  17. 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

  18. Jan 2018
  19. Dec 2017
  20. 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.

  21. 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

  22. 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.

  23. snyk.io snyk.io