283 Matching Annotations
  1. Last 7 days
    1. the umbrella term "JavaScript" as understood in a web browser context contains several very different elements. One of them is the core language (ECMAScript), another is the collection of the Web APIs, including the DOM (Document Object Model)
    1. name provided to a function expression as above is only available to the function's own scope
    2. supports functional programming — because they are objects, functions may be stored in variables and passed around like any other object
    3. most common host environment is the browser, but JavaScript interpreters can also be found in a huge list of other places
  2. Jun 2020
    1. What would be nice is if JavaScript had a built-in way to do what I can do in Ruby with:

      > I18n.interpolate('Hi, %{name}', name: 'Fred')
      => "Hi, Fred"
      

      But to be fair, I18n comes from i18n library, so JS could just as easily (and I'm sure does) have a library that does the same thing.

      Update: Actually, you can do this in plain Ruby (so why do we even need I18n.interpolate?):

      main > "Hi, %{name}" % {name: 'Fred'}
      => "Hi, Fred"
      
      main > ? String#%
      
      From: string.c (C Method):
      Owner: String
      Visibility: public
      Signature: %(arg1)
      Number of lines: 9
      
      Format---Uses str as a format specification, and returns the result
      of applying it to arg. If the format specification contains more than
      one substitution, then arg must be an Array or Hash
      containing the values to be substituted. See Kernel::sprintf for
      details of the format string.
      
         "%05d" % 123                              #=> "00123"
         "%-5s: %016x" % [ "ID", self.object_id ]  #=> "ID   : 00002b054ec93168"
         "foo = %{foo}" % { :foo => 'bar' }        #=> "foo = bar"
      

      I guess that built-in version is fine for simple cases. You only need to use I18n.translate if you need its more advanced features like I18n.config.missing_interpolation_argument_handler.

    2. When you hear there's something called "template strings" coming to JavaScript, it's natural to assume it's a built-in template library, like Mustache. It isn't. It's mainly just string interpolation and multiline strings for JS. I think this is going to be a common misconception for a while, though.
  3. May 2020
    1. localForage is a JavaScript library that improves the offline experience of your web app by using an asynchronous data store with a simple, localStorage-like API. It allows developers to store many types of data instead of just strings.
    1. This starter takes advantage of Typescript and Emotion. This is a personal choice, and I'd encourage you to give it a shot. If you're interested in using plain ES6 and regular scss styling, see release v1 of this library.
    1. There’s no need for nasty repetition in ES6!… // ES6 code const a = 1, b = 2, c = 3; obj = { a b c }; // obj.a = 1, obj.b = 2, obj.c = 3

      ES6 way of creating an object from variables .

    2. // ES5-compatible code var myObject = { prop1: 'hello', prop2: 'world', output: function() { console.log(this.prop1 + ' ' + this.prop2); } }; myObject.output(); // hello world

      Creating an object.

  4. developer.mozilla.org developer.mozilla.org
    1. The promises of a chain are nested like Russian dolls, but get popped like the top of a stack.
    2. Similarly, .catch() is really just a .then() without a slot for handleFulfilled.
    3. in the absence of an immediate need, it is simpler to leave out error handling until a final .catch() statement.
    4. Handling a rejected promise too early has consequences further down the promise chain.   Sometimes there is no choice, because an error must be handled immediately.
    1. Mozilla does not permit extensions distributed through https://addons.mozilla.org/ to load external scripts. Mozilla does allow extensions to be externally distributed, but https://addons.mozilla.org/ is how most people discover extensions. The are still concerns: Google and Microsoft do not grant permission for others to distribute their "widget" scripts. Google's and Microsoft's "widget" scripts are minified. This prevents Mozilla's reviewers from being able to easily evaluate the code that is being distributed. Mozilla can reject an extension for this. Even if an extension author self-distributes, Mozilla can request the source code for the extension and halt its distribution for the same reason.

      Maybe not technically a catch-22/chicken-and-egg problem, but what is a better name for this logical/dependency problem?

    1. Now, a couple of years later, my guidelines for JS are:

      Advices on using JavaScript from a long time programmer:

      1. Use TypeScript instead.
      2. Push as much logic to the server as possible
      3. Use a framework like Vue or React if you need front interactivity
      4. Don't skip unit tests
  5. Apr 2020
    1. In Python, when trying to do a dubious operation, you get an error pretty soon. In JavaScript… an undefined can fly through a few layers of abstraction, causing an error in a seemingly unrelated piece of code.

      Undefined nature of JavaScript can hide an error for a long time. For example,

      function add(a,b) { return + (a + b) }
      add(2,2)
      add('2', 2)
      

      will result in a number, but is it the same one?

    2. I found that the overhead to use types in TypeScript is minimal (if any).

      In TypeScript, unlike in JS we need to specify the types:

    3. ESLint does automatic code linting

      ESLint <--- pluggable JS linter:

      • mark things that are incorrect,
      • mark things that are unnecessary or risky (e.g. if (x = 5) { ... })
      • set a standard way of writing code
    4. Write a new test and the result. If you want to make it REPL-like, instead of writing console.log(x.toString()) use expect(x.toString()).toBe('') and you will directly get the result.

      jest <--- interactive JavaScript (TypeScript and others too) testing framework. You can use it as a VS Code extension.

      Basically, instead of console.log(x.toString()), you can use except(x.toString()).toBe(''). Check this gif to understand it further

    5. I recommend Airbnb style JavaScript style guide and Airbnb TypeScript)

      Recommended style guides from Airbnb for:

    1. The “universal” label that has been slapped on to it is superfluous, but it does have its merits. Now that we have a commonly known term to refer to environment agnostic JavaScript code, it allows library authors to list it as a feature and be fashionable doing it. I’m happy with the term “universal” being fashionable because it makes developers think about their dependencies on the runtime environment. In the end this will help the JavaScript ecosystem mature and allow libraries to be used everywhere.
    2. The “universal” label that has been slapped on to it is superfluous
    3. Running the same code in the browser and on the server in order to avoid code duplication is a very different problem. It is simply a matter of good development practices to avoid code duplication. This however is not limited to isomorphic applications. A utility library such as Lodash is “universal”, but has nothing to do with isomorphism. Sharing code between environments does not give you an isomorphic application. What we’re referring to with Universal JavaScript is simply the fact that it is JavaScript code which is environment agnostic. It can run anywhere. In fact most JavaScript code will run fine on any JavaScript platform.
    4. Isomorphism itself is not purely a JavaScript thing. You can also build an isomorphic application in Dart or even use two different languages/stacks to render the same result. In fact there are many “isomorphic” applications which render a full HTML document on the server using PHP, Java or Ruby and use JavaScript and AJAX to create a rich user experience in the browser. This was the way things were done before the rise of Single Page Applications. The only real reason isomorphism is tied to JavaScript is because it’s the only language widely supported in the browser, and so at least part of the whole thing will use JavaScript. There’s no such thing as Isomorphic JavaScript, only isomorphic applications.
    1. Maybe we should distinguish between: The technique of asssembling pages on either client or server. Here, “isomorphic” and “full stack” (as proposed by Rodrigo Medeiros) seem good choices. JavaScript that runs in all (or most) JavaScript environments, especially browsers and Node.js. Here, “universal” seems a good choice.
    1. Let's reason through our memoizer before we write any code.

      Operations performed by a memoizer:

      • Takes a reference to a function as an input
      • Returns a function (so it can be used as it normally would be)
      • Creates a cache of some sort to hold the results of previous function calls
      • Any future time calling the function, returns a cached result if it exists
      • If the cached value doesn't exist, calls the function and store that result in the cache

      Which is written as:

      // Takes a reference to a function
      const memoize = func => {
        // Creates a cache of results
        const results = {};
        // Returns a function
        return (...args) => {
          // Create a key for results cache
          const argsKey = JSON.stringify(args);
          // Only execute func if no cached value
          if (!results[argsKey]) {
            // Store function call result in cache
            results[argsKey] = func(...args);
          }
          // Return cached value
          return results[argsKey];
        };
      };
      
    2. Let's replicate our inefficientSquare example, but this time we'll use our memoizer to cache results.

      Replication of a function with the use of memoizer (check the code below this annotation)

    3. The biggest problem with JSON.stringify is that it doesn't serialize certain inputs, like functions and Symbols (and anything you wouldn't find in JSON).

      Problem with JSON.stringify.

      This is why the previous code shouldn't be used in production

    1. Use camelCase when naming objects, functions, and instances.

      camelCase for objects, functions and instances

      const thisIsMyFuction() {}
      
    2. Use PascalCase only when naming constructors or classes.

      PascalCase for constructors and classes

      // good
      class User {
        constructor(options) {
          this.name = options.name;
        }
      }
      
      const good = new User({
        name: 'yup',
      });
      
    3. Use uppercase only in constants.

      Uppercase for constants

      export const API_KEY = 'SOMEKEY';
      
    1. What is a Function Expression?A JavaScript function can also be defined using an expression.A function expression can be stored in a variable:var x = function (a, b) {return a * b};After a function expression has been stored in a variable, the variable can be used as a function. Functions stored in variables do not need function names. They are always invoked (called) using the variable name.

      Test question: What is function expression?

    1. Writing an async function is quite simple. You just need to add the async keyword prior to function:

      Test question: What is the syntax of async function?

    1. Using objects as keys is one of most notable and important Map features.

      Test question: What is one of the most notable and important Map features?

    2. Map is a collection of keyed data items, just like an Object. But the main difference is that Map allows keys of any type.

      Test question: What is the difference between Map and Object in JavaScript?

  6. javascript.info javascript.info
    1. he basic syntax is: let promise = fetch(url, [options])

      Test question: What s the basic syntax of fetch(); ?

    1. document.addEventListener("click", myFunction);function myFunction() {  document.getElementById("demo").innerHTML = "Hello World"; }

      document.addEventListener() - Reference to the external function.

    2. document.addEventListener(event, function, useCapture)

      Test question: What is the syntax of element.addEventListener() ?

    1. JSON syntax is basically considered as a subset of JavaScript syntax;

      Test question: What is JSON syntax part of?

  7. developer.mozilla.org developer.mozilla.org
    1. Never use eval()! eval() is a dangerous function, which executes the code it's passed with the privileges of the caller.

      Testing question: Should you ever use eval()?

    1. 对象属性的命名规则 通过[]操作符为对象添加属性时,属性名称可以是任何字符串(包括只包含空格的字符串和空字符串); 通过.操作符为对象添加属性时,属性名称必须是合法的标识符名称; 如果属性名包含非法的标识符字符,则只能采用obj[“propertyName”]的形式; 如果属性名是合法的标识符,读取时即可以采用obj.propertyName,也可以采用obj[“propertyName”]的形式;

      除此之外,根据下面的介绍,也可以用数字和布尔值作为属性名,但会自动转换为字符串。

    1. We really only need to test that the button gets rendered at all (we don’t care about what the label says — it may say different things in different languages, depending on user locale settings). We do want to make sure that the correct number of clicks gets displayed

      An example of how to think about tests. Also asserting against text that's variable isn't very useful.

    2. It’s still a good idea to keep your code in three different buckets, and keep these buckets isolated from each other:Display/UI ComponentsProgram logic/business rules — the stuff that deals with the problem you’re solving for the user.Side effects (I/O, network, disk, etc.)

      How do I organize my code like this? What's the directory structure look like.

    1. Any JavaScript style guide that is up-to-date for ES6 is going to cover nearly all TypeScript constructs except for type annotations, so I would start with your favorite JS style and decide on what you want the rules for type annotations to be

      可惜这个问题被关了。因此显得有点老。不过他的建议也不错。使用用JS的风格。

  8. Mar 2020
    1. How do you leverage browser cache when Google’s very own Analytics.js has it’s expiry time set to 2 hours? How do you minimize DNS requests when Google advices you to copy their tracking code, linking to an externally hosted Javascript file?If that isn’t bad enough already, Google’s advice is to avoid hosting the JavaScript file locally. And why? To ensure you get access to new features and product updates.
    2. Why should I host analytics.js locally?The Complete Analytics Optimization Suite for WordPress gives you the best of both worlds. After activation it automagically downloads the latest version of analytics.js from Google’s servers, places the necessary tracking code in your WordPress theme’s header and keeps the local Javascript file up-to-date using an adjusted version of Matthew Horne’s update analytics script and wp_cron(). This way you can minimize DNS requests, leverage browser cache, track your visitors and still follow Google’s recommendation to use the latest features and product updates.
    1. Javascript, APIs and Markup — this stack is all about finding middleground from the chaos of SSR+SPA. It is about stepping back and asking yourself, what parts of my page change and what parts don’t change?

      JavaScript, APIs and Markup (JAM Stack) - middleground between SSR + SPA.

      Advantages:

      • The parts that don’t change often are pre-rendered on the server and saved to static HTML files. Anything else is implemented in JS and run on the client using API calls.
      • Avoids too much data transfer (like the hydration data for SSR), therefore finds a good tradeoff to ship web content
      • Allows to leverage the power and cost of Content delivery networks (CDNs) to effectively serve your content
      • With serverless apps your APIs will never need a server to SSH into and manage
    1. TL;DR;

      Don't use:

      • No global vars.
      • Declare variables using "var".
      • Declare functions using "function" keyword.
      • Avoid use "for" in loops.
      • Array push, inmutability.
      • Class.
      • Use delete to remove a object atribute.
      • Avoid nested if.
      • else if.
      • Heavy nesting.
      • Avoid to add prototype to functions that could be used in a module.

      Use:

      • Common code in functions, follow D.R.Y principle.
      • Shorcut notation.
      • Spread operator over Object.assign (airbnb 3.8).
      • Pascal case naming.
      • Modularize your code in modules.
      • const and let!.
      • Literal syntax for object creation (airbnb 3.1).
      • Computed property names when creating objects (airbnb 3.2).
      • Property value shorthand (airbnb 3.4).
      • Group your shorthand properties at the beginning of your objec (airbnb 3.5).
      • use the literal syntax for array creation (airnbnb 4.1).
      • Use array spreads ... to copy arrays. (airbnb 4.3).
      • use spreads ... instead of, Array.from. (airbnb 4.4).
      • Use return statements in array method callbacks (airbnb 4.7).
    2. Don’t use iterators, prefer js higher-order functions instead of for / for..in
      // bad
      const increasedByOne = [];
      for (let i = 0; i < numbers.length; i++) {
        increasedByOne.push(numbers[i] + 1);
      }
      
      // good
      const increasedByOne = [];
      numbers.forEach((num) => {
        increasedByOne.push(num + 1);
      });
      
    3. Ternaries should not be nested and generally be single line expressions.

      e.g.

      const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
      

      Also:

      // bad
      const foo = a ? a : b;
      const bar = c ? true : false;
      const baz = c ? false : true;
      
      // good
      const foo = a || b;
      const bar = !!c;
      const baz = !c;
      
    4. Use === and !== over == and !=.

      Bases on the Airbnb guide

    5. Use JSDOC https://jsdoc.app/about-getting-started.html format.

      Standardise your JavaScript comments:

      1. Use block comment
        /** This is a description of the foo function. */
        function foo() {
        }
        
      2. Use JSDOC tag to describe a function: ```javascript /**
      • Represents a book.
      • @constructor
      • @param {string} title - The title of the book.
      • @param {string} author - The author of the book. */ function Book(title, author) { } ```
    6. When JavaScript encounters a line break without a semicolon, it uses a set of rules called Automatic Semicolon Insertion to determine whether or not it should regard that line break as the end of a statement, and (as the name implies) place a semicolon into your code before the line break if it thinks so. ASI contains a few eccentric behaviors, though, and your code will break if JavaScript misinterprets your line break.

      Better place a semicolon (;) in the right place and do not rely on the Automatic Semicolon Insertion

      e.g.

      const luke = {};
      const leia = {};
      [luke, leia].forEach((jedi) => {
        jedi.father = 'vader';
      });
      

      ```

    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. map, filter and reduce can all operate independently, or be chained together

      map, filter, reduce

    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. 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
  9. Feb 2020
    1. k6 does not run in Node.js because it would perform poorly while running larger tests.Javascript is not generally well suited for high performance. It's a Go program - to achieve maximum performance - embedding a JavaScript runtime for running tests written in JavaScript.
  10. Jan 2020
    1. [...nodelist] will make an array of out of an object if the object is iterable. Array.from(nodelist) will make an array out of an object if the object is iterable or if the object is array-like (has .length and numeric props)
  11. Dec 2019
    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.
    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
  12. 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.

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