Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codenameyau/web-journal
:octocat: My web component journal
https://github.com/codenameyau/web-journal
animations canvas components css html react storybook styled-components
Last synced: about 1 month ago
JSON representation
:octocat: My web component journal
- Host: GitHub
- URL: https://github.com/codenameyau/web-journal
- Owner: codenameyau
- License: mit
- Created: 2017-11-19T13:07:05.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:39:32.000Z (almost 2 years ago)
- Last Synced: 2024-04-15T00:03:14.658Z (7 months ago)
- Topics: animations, canvas, components, css, html, react, storybook, styled-components
- Language: JavaScript
- Homepage: https://codenameyau.github.io/web-journal
- Size: 8 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 45
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# web-journal
Hello this is my collection of web development knowledge that I have
accumulated. It contains console tips and tricks, reusable styled components,
documentation, and much more.
- Website: https://codenameyau.github.io/web-journal
- Web Resources: https://github.com/codenameyau/web-journal/blob/master/docs/web-resources.md
- Styled Components: https://github.com/codenameyau/web-journal/blob/master/docs/styled-components.md
- Webpack: https://github.com/codenameyau/web-journal/blob/master/docs/webpack.md
## Table of Contents
- [web-journal](#web-journal)
- [Table of Contents](#table-of-contents)
- [Commands](#commands)
- [Console Tricks](#console-tricks)
- [Copy variables to clipboard](#copy-variables-to-clipboard)
- [See all event listeners](#see-all-event-listeners)
- [Grab all images from a page](#grab-all-images-from-a-page)
- [Access third-party variables](#access-third-party-variables)
## Commands
```bash
# Install dependencies.
yarn install
# Starts the storybook app.
yarn storybook
# Deploys updates on master to gh-pages.
yarn deploy
```
## Console Tricks
### Copy variables to clipboard
```js
// Copy variable.
copy(temp1)
// Copy JSON object.
copy(JSON.stringify(temp1))
```
### See all event listeners
```js
getEventListeners(document)
// JSON format.
copy(getEventListeners(document))
```
### Grab all images from a page
```js
Array.from(document.images).map(img => img.src)
// JSON format.
copy(Array.from(document.images).map(img => img.getAttribute('src')).filter(img => !!img))
// List format.
copy(Array.from(document.images).reduce((acc, img) => acc + img.src + '\n', ''))
```
### Access third-party variables
```
window.frames
```
### Jest
Mock a library implementation.
```js
jest.mock("@auth0/auth0-spa-js", () => {
return {
Auth0Client: jest.fn().mockImplementation(() => ({
logout: jest.fn(),
loginWithRedirect: jest.fn(),
getTokenSilently: jest.fn(),
getUser: jest.fn(),
getIdTokenClaims: jest.fn(),
checkSession: jest.fn(),
handleRedirectCallback: jest.fn(),
})),
};
});
```