kaola-fed / Awesome Skeleton
Licence: mit
skeleton generation tool
Stars: ✭ 212
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Awesome Skeleton
Polymer Skeleton
💀 Skeleton for Polymer 3 app with Webpack, PostCSS and Service Workers ready.
Stars: ✭ 185 (-12.74%)
Mutual labels: skeleton
Equa11y
A stream-lined command line tool for developers to easily run accessibility testing locally through axe-core and puppeteer.
Stars: ✭ 201 (-5.19%)
Mutual labels: puppeteer
Puppeteer Extra
💯 Teach puppeteer new tricks through plugins.
Stars: ✭ 3,397 (+1502.36%)
Mutual labels: puppeteer
Puppeteer Recaptcha Solver
Recaptcha solver for puppeteer
Stars: ✭ 195 (-8.02%)
Mutual labels: puppeteer
Root Cause
🔍 Root Cause is a tool for troubleshooting Puppeteer and Playwright tests. 🔎
Stars: ✭ 205 (-3.3%)
Mutual labels: puppeteer
Chrome Aws Lambda
Chromium Binary for AWS Lambda and Google Cloud Functions
Stars: ✭ 2,502 (+1080.19%)
Mutual labels: puppeteer
Penthouse
Penthouse is the original critical path css generator, helping you out to speed up page rendering for your websites. Supply your site's full CSS and the page you want to create the critical CSS for, and Penthouse will return the critical CSS needed to perfectly render the above the fold content of the page. Read more about critical path css here.
Stars: ✭ 2,479 (+1069.34%)
Mutual labels: puppeteer
Phantomas
Headless Chromium-based web performance metrics collector and monitoring tool
Stars: ✭ 2,191 (+933.49%)
Mutual labels: puppeteer
Venom
Venom is the most complete javascript library for Whatsapp, 100% Open Source.
Stars: ✭ 3,457 (+1530.66%)
Mutual labels: puppeteer
Headless Recorder
Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script.
Stars: ✭ 13,786 (+6402.83%)
Mutual labels: puppeteer
Softest
Recording Browser Interactions And Generating Test Scripts.
Stars: ✭ 208 (-1.89%)
Mutual labels: puppeteer
Ocskeleton
[OCSkeleton] - Make your loading view a little difference.
Stars: ✭ 184 (-13.21%)
Mutual labels: skeleton
Tiktok Signature
Generate tiktok signature token using node
Stars: ✭ 202 (-4.72%)
Mutual labels: puppeteer
Puppeteer Lottie
Renders Lottie animations via Puppeteer to image, GIF, or MP4.
Stars: ✭ 208 (-1.89%)
Mutual labels: puppeteer
Thal
Getting started with Puppeteer and Chrome Headless for Web Scraping
Stars: ✭ 2,345 (+1006.13%)
Mutual labels: puppeteer
awesome-skeleton
Skeleton generation tool
English | 简体中文
Contributors
 zivyangll |
|---|
Effect preview
View online effects: Kaola cart:
Description
- skeleton generation component, only for the node side. This component provides two capabilities for skeleton generation and skeleton template injection.
- Skeletal diagram generation logic: Open the page address by using the Puppeteer headless browser by passing in the page address, perform gray background processing on the first screen image and text of the page, and then take a screenshot of the first screen of the page to generate a compressed base64 png image.
Installation
Global installation
$ npm i awesome-skeleton -g
Installation in the project
$ npm i awesome-skeleton -D
Instructions
Adding a configuration file
skeleton.config.json:
{
"pageName": "baidu",
"pageUrl": "https://www.baidu.com",
"openRepeatList": false,
"device": "iPhone X",
"minGrayBlockWidth": 80,
"minGrayPseudoWidth": 10,
"debug": true,
"debugTime": 3000,
"cookies": [
{
"domain": ".baidu.com",
"expirationDate": 1568267131.555328,
"hostOnly": false,
"httpOnly": false,
"name": "BDORZ",
"path": "/",
"sameSite": "unspecified",
"secure": false,
"session": false,
"storeId": "0",
"value": "yyyyyyyyy",
"id": 2
}
]
}
Globally generated skeleton
$ skeleton -c ./skeleton.config.json
After the page DomReady, a red button appears at the top of the page: Start generating the skeleton screen.
After the build is complete, a skeleton-output file is generated in the run directory, which includes the skeleton screen png image, base64 text, and html file:
- base64-baidu.png # skeleton picture
- base64-baidu.txt # skeleton diagram Base64 encoding
- base64-baidu.html # Final HTML generationL
The html file can be used directly, copy the following location:
<html>
<head>
<!--- skeleton html code -->
</head>
</html>
note:
- The skeleton is destroyed by default after onload event.
- Manual destruction method：
window.SKELETON && SKELETON.destroy();
Of course, you can also use the generated Base64 image directly in your project
Creating a skeleton screen in the project
Add a script to package.json :
"scripts": {
"skeleton": "skeleton -c ./skeleton.config.json"
}
Generate skeleton screen:：
$ npm run skeleton
Solve the login status
If the page requires a login, you'll need to download the Chrome plugin [EditThisCookie] (https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg) to copy the cookie into the configuration parameters.
Parameters
| Parameter Name | Required | Default | Description |
|---|---|---|---|
| pageUrl | Yes | - | Page address (this address must be accessible) |
| pageName | no | output | page name (English only) |
| cookies | no | page cookies to resolve login status issues | |
| OutputPath | no | skeleton-output | skeleton file output folder path, default to project skeleton-output |
| openRepeatList | no | true | by default will copy the first item of each list |
| device | no | empty for PC | reference puppeteer/DeviceDescriptors.js, can be set to 'iPhone 6 Plus' |
| debug | no | false | turn on debug switch |
| debugTime | No | 0 | Time in the debug mode, the page stays in the skeleton |
| minGrayBlockWidth | No | 0 | Minimum processing width of gray blocks |
| minGrayPseudoWidth | No | 0 | Minimum processing pseudo-class width |
dom node attribute
This is the main point of obtaining a high-quality skeleton. By setting the following dom node attributes, some nodes are removed, ignored, and specified in the skeleton to remove the interference of redundant nodes, thus making the skeleton effect Get the best.
| Parameter Name | Description |
|---|---|
| data-skeleton-remove | Specifies the dom node properties to remove |
| data-skeleton-bgcolor | Specify the background color added in a dom node |
| data-skeleton-ignore | Specifies to ignore dom node properties without any processing |
| data-skeleton-empty | Set a dom's innerHTML to an empty string |
Example:
<div data-skeleton-remove><span>abc</span></div>
<div data-skeleton-bgcolor="#EE00EE"><span>abc</span></div>
<div data-skeleton-ignore><span>abc</span></div>
<div data-skeleton-empty><span>abc</span></div>
development
Installation dependencies
$ git clone [email protected]:kaola-fed/awesome-skeleton.git
$ cd awesome-skeleton && npm i
Running the project
Since the code that generates the skeleton is inserted through dynamic scripts, the code in src/script needs to be packaged into src/script/dist/index.js by Rollup.
$ npm run dev
Modify the configuration in demo/index.js to generate a skeleton of the different pages:
$ cd demo
$ node index.js
Thanks
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].