feat(python_snippets#Get the attribute of an attribute): Get the attribute of an attribute when sorting

To sort the list in place:

```python
ut.sort(key=lambda x: x.count, reverse=True)
```

To return a new list, use the `sorted()` built-in function:

```python
newlist = sorted(ut, key=lambda x: x.body.id_, reverse=True)
```

feat(cypress): Add Cypress commands

For the functions you write a lot you can use commands in `/cypress/support/commands.ts`.

```javascript
Cypress.Commands.add('getById', (selector, ...args) => {
  return cy.get(`[data-cy=${selector}]`, ...args)
})

Cypress.Commands.add('getByIdLike', (selector, ...args) => {
  return cy.get(`[data-cy*=${selector}]`, ...args)
})

Cypress.Commands.add('findById', {prevSubject: true}, (subject, selector, ...args) => {
  return subject.find(`[data-cy=${selector}]`, ...args)
})
```

So you can now do
```javascript
cy.getById('submit')
```

feat(cypress#Select by position in list): Add more ways to select elements

* Select by position in list

  Inside our list, we can select elements based on their position in the list,
  using `.first()`, `.last()` or `.eq()` selector.

  ```javascript
  cy
    .get('li')
    .first(); // select "red"

  cy
    .get('li')
    .last(); // select "violet"

  cy
    .get('li')
    .eq(2); // select "yellow"
  ```

  You can also use `.next()` and `.prev()` to navigate through the elements.

*  Select elements by filtering

  Once you select multiple elements, you can filter within these based on another selector.

  ```javascript
  cy
    .get('li')
    .filter('.primary') // select all elements with the class .primary
  ```

  To do the exact opposite, you can use `.not()` command.

  ```javascript
  cy
    .get('li')
    .not('.primary') // select all elements without the class .primary
  ```

feat(cypress#Finding elements): Finding elements

You can specify your selector by first selecting an element you want to search
within, and then look down the DOM structure to find a specific element you are
looking for.

```javascript
cy
  .get('.list')
  .find('.violet') // finds an element with class .violet inside .list element
```

Instead of looking down the DOM structure and finding an element within another
element, we can look up. In this example, we first select our list item, and
then try to find an element with a `.list` class.

```javascript
cy
  .get('.violet')
  .parent('.list') // finds an element with class .list that is above our .violet element
```

feat(cypress#Asserting about elements): Assert on the content of an attribute

```javascript
cy
  .get('a')
  .invoke('attr', 'href')
  .should('eq', 'https://docs.cypress.io')
```

feat(cypress#Use the content of a fixture set in a hook in a test): Use the content of a fixture set in a hook in a test

If you store and access the fixture data using this test context object, make
sure to use `function () { ... }` callbacks both for the hook and the test.
Otherwise the test engine will NOT have this pointing at the test context.

```javascript
describe('User page', () => {
  beforeEach(function () {
    // "this" points at the test context object
    cy.fixture('user').then((user) => {
      // "this" is still the test context object
      this.user = user
    })
  })

  // the test callback is in "function () { ... }" form
 it('has user', function () {
    // this.user exists
    expect(this.user.firstName).to.equal('Jane')
  })
})
```

feat(cypress#issues): Run only failing tests

Cypress doesn't [Allow to rerun failed tests](cypress-io/cypress#4886) but you can use `it.only` on the test you want to run.

feat(vuejs#Make HTTP requests): Make HTTP requests with Vue

Compare [Fetch API](vuejs.md#fetch-api) and [Axios](vuejs.md#axios) when
doing http requests to external services.

Explain how to do them with both methods and arrive to the conclusion
that if you’re working on multiple requests, you’ll find that Fetch requires you to
write more code than Axios, even when taking into consideration the setup needed
for it. Therefore, for simple requests, Fetch API and Axios are quite the same.
However, for more complex requests, Axios is better as it allows you to
configure multiple requests in one place.

If you're making a simple request use the Fetch API, for the other cases use axios because:

* It allows you to configure multiple requests in one place
* Code is shorter.
* It allows you to [place all the API calls under services so that these can be
    reused across components wherever they are
    needed](https://medium.com/bb-tutorials-and-thoughts/how-to-make-api-calls-in-vue-js-applications-43e017d4dc86).
* It's easy to set a timeout of the request.
* It supports HTTP interceptors by befault
* It does automatic JSON data transformation.
* It's supported by old browsers, although you can bypass the problem with fetch
    too.
* It has a progress indicator for large files.
* Supports simultaneous requests by default.

Axios provides an easy-to-use API in a compact package for most of your HTTP
communication needs. However, if you prefer to stick with native APIs, nothing
stops you from implementing Axios features.

For more information read:

* [How To Make API calls in Vue.JS Applications by Bhargav Bachina](https://medium.com/bb-tutorials-and-thoughts/how-to-make-api-calls-in-vue-js-applications-43e017d4dc86)
* [Axios vs. fetch(): Which is best for making HTTP requests? by Faraz
    Kelhini](https://blog.logrocket.com/axios-vs-fetch-best-http-requests/)

Author: lyz-code

docs/coding/javascript/javascript.md

@@ -376,8 +376,8 @@ for (var i = 0; i < a.length; i++) {
 
 ### Append an item to an array
 
-Although `push()` could be used, is better to use `concat()` as it doesn't
-mutate the original array.
+If you want to alter the original array use `push()` although, it's better to
+use `concat()` as it doesn't mutate the original array.
 
 ```javascript
 a.concat(item);

docs/coding/python/python_snippets.md

@@ -703,6 +703,21 @@ tuples of field and order to sort them on multiple passes.
 [('dave', 'B', 10), ('jane', 'B', 12), ('john', 'A', 15)]
 ```
 
+## [Get the attribute of an attribute](https://stackoverflow.com/questions/403421/how-to-sort-a-list-of-objects-based-on-an-attribute-of-the-objects)
+
+To sort the list in place:
+
+```python
+ut.sort(key=lambda x: x.count, reverse=True)
+```
+
+To return a new list, use the `sorted()` built-in function:
+
+```python
+newlist = sorted(ut, key=lambda x: x.body.id_, reverse=True)
+```
+
+
 # [Iterate over an instance object's data attributes in Python](https://www.saltycrane.com/blog/2008/09/how-iterate-over-instance-objects-data-attributes-python/)
 
 ```python

docs/coding/python/type_hints.md

@@ -310,7 +310,7 @@ def new_user(user_class) -> User:
 
 Where:
 
-* `ProUser` doesn’t inherit from `BasicUser`.
+* `ProUser` doesn't inherit from `BasicUser`.
 * `new_user` creates an instance of one of these classes if you pass
     it the right class object.
 
@@ -343,7 +343,7 @@ beginner.upgrade()  # OK
 ```
 
 !!! note
-        "Using `UserT` is [not supported by
+        "Using `UserType` is [not supported by
         pylint](https://github.com/PyCQA/pylint/issues/6003), use `UserT`
         instead."
 

docs/cypress.md

@@ -197,6 +197,28 @@ the `data-cy` element.
 cy.get('[data-cy=submit]')
 ```
 
+You'll probably write that a lot, that's why it's useful to define the next
+commands in `/cypress/support/commands.ts`.
+
+```javascript
+Cypress.Commands.add('getById', (selector, ...args) => {
+  return cy.get(`[data-cy=${selector}]`, ...args)
+})
+
+Cypress.Commands.add('getByIdLike', (selector, ...args) => {
+  return cy.get(`[data-cy*=${selector}]`, ...args)
+})
+
+Cypress.Commands.add('findById', {prevSubject: true}, (subject, selector, ...args) => {
+  return subject.find(`[data-cy=${selector}]`, ...args)
+})
+```
+
+So you can now do
+```javascript
+cy.getById('submit')
+```
+
 ### Query by content
 
 Another way to locate things -- a more human way -- is to look them up by their
@@ -226,6 +248,65 @@ timeout.
 cy.get('.my-slow-selector', { timeout: 10000 })
 ```
 
+### Select by position in list
+
+Inside our list, we can select elements based on their position in the list,
+using `.first()`, `.last()` or `.eq()` selector.
+
+```javascript
+cy
+  .get('li')
+  .first(); // select "red"
+
+cy
+  .get('li')
+  .last(); // select "violet"
+
+cy
+  .get('li')
+  .eq(2); // select "yellow"
+```
+
+You can also use `.next()` and `.prev()` to navigate through the elements.
+
+### Select elements by filtering
+
+Once you select multiple elements, you can filter within these based on another selector.
+
+```javascript
+cy
+  .get('li')
+  .filter('.primary') // select all elements with the class .primary
+```
+
+To do the exact opposite, you can use `.not()` command.
+
+cy
+  .get('li')
+  .not('.primary') // select all elements without the class .primary
+
+### Finding elements
+
+You can specify your selector by first selecting an element you want to search
+within, and then look down the DOM structure to find a specific element you are
+looking for.
+
+```javascript
+cy
+  .get('.list')
+  .find('.violet') // finds an element with class .violet inside .list element
+```
+
+Instead of looking down the DOM structure and finding an element within another
+element, we can look up. In this example, we first select our list item, and
+then try to find an element with a `.list` class.
+
+```javascript
+cy
+  .get('.violet')
+  .parent('.list') // finds an element with class .list that is above our .violet element
+```
+
 ## Interacting with elements
 
 Cypress allows you to click on and type into elements on the page by using
@@ -333,8 +414,6 @@ it('utilize users in some way', function () {
 })
 ```
 
-
-
 ## [Asserting about elements](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress#Assertions)
 
 Assertions let you do things like ensuring an element is visible or has
@@ -440,6 +519,14 @@ expect(true).to.be.true
     cy.get('li.selected').should('have.length', 3)
     ```
 
+* *Attribute*:
+    ```javascript
+    // check the content of an attribute
+    cy
+      .get('a')
+      .invoke('attr', 'href')
+      .should('eq', 'https://docs.cypress.io')
+    ```
 * *Class*:
 
     ```javascript
@@ -725,7 +812,6 @@ The purpose of a test fixture is to ensure that there is a well known and fixed
 environment in which tests are run so that results are repeatable. Fixtures are
 accessed within tests by calling the `cy.fixture()` command.
 
-
 When stubbing a response, you typically need to manage potentially large and
 complex JSON objects. Cypress allows you to integrate fixture syntax directly
 into responses.
@@ -752,6 +838,32 @@ your `cy.fixture()` command.
 cy.fixture('images/dogs.png') // yields dogs.png as Base64
 ```
 
+#### [Use the content of a fixture set in a hook in a test](https://docs.cypress.io/api/commands/fixture#Encoding)
+
+
+If you store and access the fixture data using this test context object, make
+sure to use `function () { ... }` callbacks both for the hook and the test.
+Otherwise the test engine will NOT have this pointing at the test context.
+
+```javascript
+describe('User page', () => {
+  beforeEach(function () {
+    // "this" points at the test context object
+    cy.fixture('user').then((user) => {
+      // "this" is still the test context object
+      this.user = user
+    })
+  })
+
+  // the test callback is in "function () { ... }" form
+  it('has user', function () {
+    // this.user exists
+    expect(this.user.firstName).to.equal('Jane')
+  })
+})
+```
+
+
 ### Logging in
 
 One of the first (and arguably one of the hardest) hurdles you'll have to
@@ -1084,6 +1196,65 @@ describe('Logo', () => {
 })
 ```
 
+### Use functions
+
+Sometimes, the piece of code is redundant and we don't we don't require it in
+all the test cases. We can create utility functions and move such code there.
+
+We can create a separate folder as utils in support folder and store our
+functions in a file in that folder.
+
+Consider the following example of utility function for login.
+
+```javascript
+//cypress/support/utils/common.js
+
+export const loginViaUI = (username, password) => {
+  cy.get("[data-cy='login-email-field']").type(username);
+  cy.get("[data-cy='login-password-field']").type(password);
+  cy.get("[data-cy='submit-button']").submit()
+}
+```
+
+This is how we can use utility function in our test case:
+
+```javascript
+import {
+  loginViaUI
+} from '../support/utils/common.js';
+
+describe("Login", () => {
+  it('should allow user to log in', () => {
+    cy.visit('/login');
+    loginViaUI('username', 'password');
+  });
+});
+```
+
+Utility functions are similar to Cypress commands. If the code being used in
+almost every test suite, we can create a custom command for it. The benefit of
+this is that we don't have to import the js file to use the command, it is
+available directly on cy object i.e. `cy.loginViaUI()`.
+
+But, this doesn't mean that we should use commands for everything. If the code
+is used in only some of the test suite, we can create a utility function and
+import it whenever needed.
+
+## [Setting up time of the tests](https://docs.cypress.io/api/commands/clock#No-Args)
+
+Specify a `now` timestamp
+
+```javascript
+// your app code
+$('#date').text(new Date().toJSON())
+
+const now = new Date(2017, 3, 14).getTime() // April 14, 2017 timestamp
+
+cy.clock(now)
+cy.visit('/index.html')
+cy.get('#date').contains('2017-04-14')
+```
+
 ## [Component testing](https://docs.cypress.io/guides/component-testing/introduction)
 
 Component testing in Cypress is similar to end-to-end testing. The notable differences are:
@@ -1420,6 +1591,12 @@ it('adds items', () => {
 This allows you to inspect the web application, the DOM, the network, and any
 storage after each command to make sure everything happens as expected.
 
+# Issues
+
+* [Allow rerun only failed
+    tests](https://github.com/cypress-io/cypress/issues/4886): Until it's ready
+    use `it.only` on the test you want to run.
+
 # References
 
 * [Home](https://www.cypress.io/)

docs/javascript_snippets.md

@@ -4,6 +4,12 @@ date: 20220419
 author: Lyz
 ---
 
+# [Select a substring](https://medium.com/coding-at-dawn/how-to-select-a-range-from-a-string-a-substring-in-javascript-1ba611e7fc1)
+
+```javascript
+'long string'.substring(startIndex, endIndex)
+```
+
 # [Round a number](https://www.w3schools.com/jsref/jsref_round.asp)
 
 ```javascript