| import React from 'react'; | |
| import ReactDOM from 'react-dom/client'; | |
| import { | |
| QueryClient, | |
| QueryClientProvider, | |
| useMutation, | |
| useQuery, | |
| } from '@tanstack/react-query'; | |
| import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; |
| <div class="label"> | |
| <span>This arrow point to something</span> | |
| <svg viewBox="0 0 97 52" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M74.568 0.553803C74.0753 0.881909 73.6295 1.4678 73.3713 2.12401C73.1367 2.70991 72.3858 4.67856 71.6584 6.50658C70.9544 8.35803 69.4526 11.8031 68.3498 14.1936C66.1441 19.0214 65.839 20.2167 66.543 21.576C67.4581 23.3337 69.4527 23.9196 71.3064 22.9821C72.4797 22.3728 74.8965 19.5839 76.9615 16.4435C78.8387 13.5843 78.8387 13.6077 78.1113 18.3418C77.3369 23.4275 76.4687 26.2866 74.5915 30.0364C73.254 32.7316 71.8461 34.6299 69.218 37.3485C65.9563 40.6999 62.2254 42.9732 57.4385 44.4965C53.8718 45.6449 52.3935 45.8324 47.2546 45.8324C43.3594 45.8324 42.1158 45.7386 39.9805 45.2933C32.2604 43.7466 25.3382 40.9577 19.4015 36.9735C15.0839 34.0909 12.5028 31.7004 9.80427 27.9975C6.80073 23.9196 4.36038 17.2403 3.72682 11.475C3.37485 8.1471 3.1402 7.32683 2.43624 7.13934C0.770217 6.71749 0.183578 7.77211 0.0193217 11.5219C-0 |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Morphing Blob</title> | |
| <style> | |
| body { | |
| background: #0f0f1a; | |
| display: flex; | |
| align-items: center; |
| // generateRoutes.js | |
| const fs = require('fs'); | |
| const path = require('path'); | |
| // the app folder path | |
| const appDir = path.join(__dirname, 'src/app'); | |
| // the output path | |
| const routeFile = path.join(__dirname, 'src/routes.ts'); | |
| function toCamelCase(str) { |
| // notepad $profile | |
| function cm { git commit @args } | |
| function ad { git add @args } | |
| function st { git status } | |
| function pl { git pull } | |
| function pu { git push } | |
| function lg { git log --oneline --graph --all } | |
| function co { git checkout @args } | |
| function br { git branch } |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| import { defineConfig, loadEnv } from '@rsbuild/core'; | |
| // import { pluginEslint } from '@rsbuild/plugin-eslint'; | |
| import { pluginReact } from '@rsbuild/plugin-react'; | |
| import { pluginSass } from '@rsbuild/plugin-sass'; | |
| import { pluginSvgr } from '@rsbuild/plugin-svgr'; | |
| import { pluginTypeCheck } from '@rsbuild/plugin-type-check'; | |
| const { publicVars, rawPublicVars } = loadEnv({ prefixes: ['REACT_APP_'] }); | |
| export default defineConfig({ |
Install
npm i -D @mocks-server/main
Add script
"scripts": {
"mocks": "mocks-server",
},
| // https://jsfiddle.net/tzi/qtqnqomL/ | |
| function isEllipsisActive(element) { | |
| return element.offsetWidth < element.scrollWidth; | |
| } | |
| Array.from(document.querySelectorAll('.ellipsis')) | |
| .forEach(element => { | |
| if (isEllipsisActive(element)) { | |
| element.title = element.innerText; |