When encountering a problem, the first thing to do should be thinking and analyzing. Cultivating this thinking habit in your mind is essential, rather than getting stuck in a "dead end of confusion about the problem" and staring blankly. I use this to describe a state of stagnation in thinking and lack of analytical ability: "Why is this happening?!" "It shouldn't be?!" "Theoretically, it's impossible?!" "Why on earth is this happening?!", or immediately asking others. The most profound insights come from independently thinking through problems.
Performance Optimization#
All stories related to performance optimization begin with this image...
Source from w3c Timing
Initialization Phase#
navigationStart: The creation time of the current page, or the unload time of the previous page
unloadEventStart: The time when the unload event callback of the previous page starts executing
unloadEventEnd: The time when the unload event callback of the previous page finishes executing
redirectStart: The start time of the redirect
redirectEnd: The end time of the redirect
Connection Phase#
fetchStart: The time when the fetch sends a GET request
domainLookupStart: The start time of DNS resolution
domainLookupEnd: The end time of DNS resolution
connectStart: The time when TCP starts to connect
secureConnectionStart: For HTTPS, the time when SSL starts connecting, otherwise 0
connectEnd: The time when TCP connection is completed
Request Phase#
requestStart: The time when the request is sent
responseStart: The time when the response starts being received from the server (or cache, local resources)
responseEnd: The end time of the response
Rendering Phase#
domLoading: The time when the document starts loading, at this point document.readyState = 'loading'
domInteractive: The DOM is constructed, but sub-resources like images, js, css, iframes, etc., are still loading, at this point document.readyState = 'interactive', triggering the DOMContentLoaded event
domContentLoadedEventStart: The time when the DOMContentLoaded event callback starts executing
domContentLoadedEventEnd: The time when the DOMContentLoaded event callback finishes executing
domComplete: The time when the document and its sub-resources are fully loaded, at this point document.readyState = 'complete', triggering the load event
loadEventStart: The time when the load event callback starts executing
loadEventEnd: The time when the load event callback finishes executing
Fishing Gains#
A Plugin for Optimizing SVG in Projects#
svg-chunk-webpack-plugin is a community-contributed webpack plugin that provides "code splitting" capabilities for SVG with zero configuration, optimizing SVG references in projects; it can also reduce the size of SVG code provided by designers. The author provides an example, assuming there are three components that import some SVG files:
// news.js
import '../svgs/smiley-surprised.svg';
import '../svgs/popcorn.svg';
// components.js
import '../svgs/smiley-love.svg';
// home.js
import './component.js';
import '../svgs/gradient.svg';
import '../svgs/video.svg';
Webpack build file input and output configuration:
entry: {
home: `${path.resolve(__dirname, './src/js/home.js')}`,
news: `${path.resolve(__dirname, './src/js/news.js')}`
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'js/[name].js'
},
Finally, SVG files will be output separately based on the entry files:
<!-- home.svg -->
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs><linearGradient id="24d5a"><stop offset="5%" stop-color="green"/><stop offset="95%" stop-color="gold"/></linearGradient></defs>
<symbol id="gradient"><rect width="100%" height="100%" fill="url(#24d5a)"/></symbol>
<symbol id="smiley-love" viewBox="0 0 48 48"><circle cx="24" cy="24" r="24" fill="#fbd971" class="e79d992bst0"/><path fill="#d8b11a" d="M24 41.1c-7.6 0-13.7-6.2-13.7-13.7 0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1c0 6.3 5.1 11.4 11.4 11.4s11.4-5.1 11.4-11.4c0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1c.2 7.6-5.9 13.7-13.5 13.7" class="8a82da16st1"/><path fill="#e64c3c" d="M14.3 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.4 0 2.4.8 2.9 1.9"/><path fill="#e64c3c" d="M33.6 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.3 0 2.4.8 2.9 1.9" data-name="Calque 1-2-2"/></symbol>
<symbol id="video" viewBox="0 0 16 16"><path fill="#ff004b" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m3.3 8.5-4.5 3c-.1 0-.1.1-.2.1s-.2 0-.3-.1c-.2-.1-.3-.3-.3-.5V5c0-.2.1-.4.2-.5.2-.1.3-.1.5 0l4.5 3c.2.1.3.3.3.5s-.1.4-.2.5"/></symbol>
</svg>
<!-- news.svg -->
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs/>
<symbol id="popcorn" viewBox="0 0 32 32"><path d="M15.4 4.5c-2 0-3.6 1.6-3.6 3.6 0 .5.4.9.9.9s.9-.4.9-.9c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8c0 .5.4.9.9.9s.9-.4.9-.9c0-2-1.6-3.6-3.6-3.6"/><path d="M29.1 9c0-1.3-.9-2.5-2.1-2.8-.4-2.4-2.4-4.2-4.9-4.2q-.9 0-1.8.3C19.4.9 17.9 0 16.1 0s-3.3.9-4.2 2.3Q11 2 10.1 2C7.6 2 5.6 3.8 5.2 6.2 4 6.5 3.1 7.7 3.1 9c0 .7.3 1.4.7 1.9-.5.5-.9 1.3-.9 2.1 0 .2 0 .4.1.6l3.2 16C6.4 31 7.7 32 9.1 32h13.8c1.4 0 2.7-1 2.9-2.4l3.2-16c0-.2.1-.4.1-.6 0-.8-.3-1.5-.8-2 .5-.5.8-1.2.8-2M9 30c-.5 0-.9-.3-1-.8l-3.2-16V13c0-.5.4-1 1-1H9v.1L10 30zm6 0h-3v-.1L11 12h4zm5 0h-3V12h4zm7-16.8-3.2 16c-.1.5-.5.8-1 .8H22l1-17.9V12h3c.6 0 1 .5 1 1zM26 10H6c-.6 0-1-.4-1-1s.4-1 1-1c.3 0 .5-.1.7-.3S7 7.3 7 7c0-1.7 1.3-3 3-3 .6 0 1.2.2 1.7.5.3.2.6.2.9.1q.45-.15.6-.6c.4-1.2 1.5-2 2.8-2s2.4.8 2.8 2q.15.45.6.6c.3.1.6.1.9-.1.5-.3 1.1-.5 1.7-.5 1.7 0 3 1.3 3 3 0 .3.1.5.3.7s.4.3.7.3c.6 0 1 .4 1 1s-.4 1-1 1"/></symbol>
<symbol id="smiley-surprised" viewBox="0 0 41 40"><g transform="translate(.216)"><circle cx="20" cy="20" r="20" fill="#ffd93b"/><path fill="#f4c534" d="M40 20c0 11-9 20-20 20-6.3 0-11.9-2.9-15.6-7.4C7.9 35.3 12.2 37 17 37c11 0 20-8.9 20-20 0-4.8-1.7-9.1-4.4-12.6C37.1 8.1 40 13.7 40 20"/><circle cx="20" cy="31.2" r="3.5" fill="#3e4347"/><path fill="#fff" d="M31.3 19.5c0 2.5-2 4.5-4.5 4.5s-4.5-2-4.5-4.5 2-4.5 4.5-4.5 4.5 2 4.5 4.5"/><circle cx="26.7" cy="19.5" r="2.1" fill="#3e4347"/><path fill="#5a5f63" d="M27.9 19.3c-.2.1-.5 0-.7-.2s-.2-.5 0-.7c.2-.1.5 0 .7.2.1.3.1.6 0 .7"/><path fill="#e9b02c" d="M32.4 13.8c.1.7.1 1.5-.1 2.1-.9-2.5-3.4-4-6.1-3.5-1 .2-1.5-1.1-.6-1.6.7-.4 1.4-.7 2.3-.7 2.1 0 4.1 1.6 4.5 3.7"/><path fill="#fff" d="M8.7 19.5c0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5-2-4.5-4.5-4.5-4.5 2-4.5 4.5"/><circle cx="13.3" cy="19.5" r="2.1" fill="#3e4347"/><path fill="#5a5f63" d="M12.1 19.3c.2.1.5 0 .7-.2s.2-.5 0-.7c-.2-.1-.5 0-.7.2-.2.3-.1.6 0 .7"/><path fill="#e9b02c" d="M7.6 13.8c-.1.7-.1 1.5.1 2.1.9-2.5 3.4-4 6.1-3.5 1 .2 1.5-1.1.6-1.6-.7-.4-1.4-.7-2.3-.7-2.1 0-4.1 1.6-4.5 3.7"/></g></symbol>
</svg>
The entry HTML will include the corresponding SVG content, using the <use> element to reuse SVG icons where needed:
<!-- Import -->
<svg class="svgItem-icon">
<use xlink:href="#gradient"></use>
</svg>
<svg class="svgItem-icon">
<use xlink:href="#smiley-love"></use>
</svg>
<svg class="svgItem-icon">
<use xlink:href="#video"></use>
</svg>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs><linearGradient id="24d5a"><stop offset="5%" stop-color="green"/><stop offset="95%" stop-color="gold"/></linearGradient></defs>
<symbol id="gradient"><rect width="100%" height="100%" fill="url(#24d5a)"/></symbol>
<symbol id="smiley-love" viewBox="0 0 48 48"><circle cx="24" cy="24" r="24" fill="#fbd971" class="e79d992bst0"/><path fill="#d8b11a" d="M24 41.1c-7.6 0-13.7-6.2-13.7-13.7 0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1c0 6.3 5.1 11.4 11.4 11.4s11.4-5.1 11.4-11.4c0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1c.2 7.6-5.9 13.7-13.5 13.7" class="8a82da16st1"/><path fill="#e64c3c" d="M14.3 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.4 0 2.4.8 2.9 1.9"/><path fill="#e64c3c" d="M33.6 12.2c.5-1.1 1.6-1.9 3-1.9 1.8 0 3.1 1.5 3.2 3.2 0 0 .1.4-.1 1.2-.3 1.1-.9 2-1.7 2.8l-4.4 3.8-4.3-3.8c-.8-.7-1.4-1.7-1.7-2.8-.2-.8-.1-1.2-.1-1.2.2-1.8 1.5-3.2 3.2-3.2 1.3 0 2.4.8 2.9 1.9" data-name="Calque 1-2-2"/></symbol>
<symbol id="video" viewBox="0 0 16 16"><path fill="#ff004b" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m3.3 8.5-4.5 3c-.1 0-.1.1-.2.1s-.2 0-.3-.1c-.2-.1-.3-.3-.3-.5V5c0-.2.1-.4.2-.5.2-.1.3-.1.5 0l4.5 3c.2.1.3.3.3.5s-.1.4-.2.5"/></symbol>
</svg>
<svg class="svgItem-icon">
<use xlink:href="#popcorn"></use>
</svg>
<svg class="svgItem-icon">
<use xlink:href="#smiley-surprised"></use>
</svg>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs/>
<symbol id="popcorn" viewBox="0 0 32 32"><path d="M15.4 4.5c-2 0-3.6 1.6-3.6 3.6 0 .5.4.9.9.9s.9-.4.9-.9c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8c0 .5.4.9.9.9s.9-.4.9-.9c0-2-1.6-3.6-3.6-3.6"/><path d="M29.1 9c0-1.3-.9-2.5-2.1-2.8-.4-2.4-2.4-4.2-4.9-4.2q-.9 0-1.8.3C19.4.9 17.9 0 16.1 0s-3.3.9-4.2 2.3Q11 2 10.1 2C7.6 2 5.6 3.8 5.2 6.2 4 6.5 3.1 7.7 3.1 9c0 .7.3 1.4.7 1.9-.5.5-.9 1.3-.9 2.1 0 .2 0 .4.1.6l3.2 16C6.4 31 7.7 32 9.1 32h13.8c1.4 0 2.7-1 2.9-2.4l3.2-16c0-.2.1-.4.1-.6 0-.8-.3-1.5-.8-2 .5-.5.8-1.2.8-2M9 30c-.5 0-.9-.3-1-.8l-3.2-16V13c0-.5.4-1 1-1H9v.1L10 30zm6 0h-3v-.1L11 12h4zm5 0h-3V12h4zm7-16.8-3.2 16c-.1.5-.5.8-1 .8H22l1-17.9V12h3c.6 0 1 .5 1 1zM26 10H6c-.6 0-1-.4-1-1s.4-1 1-1c.3 0 .5-.1.7-.3S7 7.3 7 7c0-1.7 1.3-3 3-3 .6 0 1.2.2 1.7.5.3.2.6.2.9.1q.45-.15.6-.6c.4-1.2 1.5-2 2.8-2s2.4.8 2.8 2q.15.45.6.6c.3.1.6.1.9-.1.5-.3 1.1-.5 1.7-.5 1.7 0 3 1.3 3 3 0 .3.1.5.3.7s.4.3.7.3c.6 0 1 .4 1 1s-.4 1-1 1"/></symbol>
<symbol id="smiley-surprised" viewBox="0 0 41 40"><g transform="translate(.216)"><circle cx="20" cy="20" r="20" fill="#ffd93b"/><path fill="#f4c534" d="M40 20c0 11-9 20-20 20-6.3 0-11.9-2.9-15.6-7.4C7.9 35.3 12.2 37 17 37c11 0 20-8.9 20-20 0-4.8-1.7-9.1-4.4-12.6C37.1 8.1 40 13.7 40 20"/><circle cx="20" cy="31.2" r="3.5" fill="#3e4347"/><path fill="#fff" d="M31.3 19.5c0 2.5-2 4.5-4.5 4.5s-4.5-2-4.5-4.5 2-4.5 4.5-4.5 4.5 2 4.5 4.5"/><circle cx="26.7" cy="19.5" r="2.1" fill="#3e4347"/><path fill="#5a5f63" d="M27.9 19.3c-.2.1-.5 0-.7-.2s-.2-.5 0-.7c.2-.1.5 0 .7.2.1.3.1.6 0 .7"/><path fill="#e9b02c" d="M32.4 13.8c.1.7.1 1.5-.1 2.1-.9-2.5-3.4-4-6.1-3.5-1 .2-1.5-1.1-.6-1.6.7-.4 1.4-.7 2.3-.7 2.1 0 4.1 1.6 4.5 3.7"/><path fill="#fff" d="M8.7 19.5c0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5-2-4.5-4.5-4.5-4.5 2-4.5 4.5"/><circle cx="13.3" cy="19.5" r="2.1" fill="#3e4347"/><path fill="#5a5f63" d="M12.1 19.3c.2.1.5 0 .7-.2s.2-.5 0-.7c-.2-.1-.5 0-.7.2-.2.3-.1.6 0 .7"/><path fill="#e9b02c" d="M7.6 13.8c-.1.7-.1 1.5.1 2.1.9-2.5 3.4-4 6.1-3.5 1 .2 1.5-1.1.6-1.6-.7-.4-1.4-.7-2.3-.7-2.1 0-4.1 1.6-4.5 3.7"/></g></symbol>
</svg>
Free and Useful Browser Screen Recording Plugin#
screenity is an incredibly useful free plugin. It has a user-friendly interface, is easy to operate, and has powerful features. Click to record, click again to stop recording, supports free cropping, and downloads in various formats (gif, mp4, webm). It improves efficiency in scenarios like remotely reproducing issues during development and quickly sharing screen recordings.
How to Efficiently Switch Proxies#
lightproxy is an open-source proxy tool from Alibaba, which is much better (sha) than Proxyman/Charles (gua). The rule configuration is consistent with the host file syntax, supports domain name wildcards, and file-level granularity, allowing easy opening, closing, switching, and proxying mobile requests. Here are a few configurations I often use:
switchyomega is a browser plugin that integrates proxy management/switching and request forwarding, making it convenient to quickly switch between different proxies or forward requests to different proxies.
It supports different scenario modes, such as:
- Proxy Server: For example, if I use a VPN software called Little Cat, which is also Clash for Windows, I can configure a proxy server through SwitchyOmega, setting the port number to the running port of Little Cat.
- Automatic Switching Mode: Automatically switch to a specified proxy server based on various conditions. For example, I can use domain wildcards to forward traffic to foreign websites to Little Cat while directly connecting traffic to domestic websites, thus achieving a better surfing experience.
- Direct Connection: This means not using any proxy, and network requests connect directly.
- System Proxy: Proxy configuration for other extensions or operating system environments.
I No Longer Use iTerm2 Because...#
I found a better command-line tool in the versatile Push community, an intelligent terminal integrated with AI capabilities 👉 Warp, which is impressive without needing much explanation:
Finding files:
CLI command auto-suggestions:
Prompt-generated Command (free version 40 times/month):
Interesting Things#
Iconify#
iconify is an open-source icon set that supports various frameworks, CSS, and HTML embedding, and also provides plugin support for design software like Figma and Sketch, comprehensive and extensive.
Color4bg#
color4bg can generate various creatively artistic backgrounds, which is simply amazing!
I randomly exported a webm format video:
Product Hunt#
You can check out new product trends and find interesting and fun new things to experience first on producthunt.
Dribbble#
dribbble is said to be the ultimate destination for all designers in the world. Spend more time there to cultivate your design and product vision 😏
🍱#
free-bento-grid-generator bento, a bento box, this popular bento box layout card generation tool~
Independent Developer Navigation Site#
Indie hackers is an independent developer navigation site that categorizes and collects tools used by independent developers, aiming to help newcomers speed up application delivery. It's great; I really need it at this stage as I'm just starting out.
Google SEO#
Just like web.dev provides a specialized study on Core Web Vitals to optimize frontend application performance, google search center offers knowledge related to website SEO optimization for learning in the SEO optimization field.
AITDK#
aitdk uses AI to assist with SEO, inputting descriptions to generate TDK. There are many factors that influence SEO ranking, and I believe that after becoming very familiar with these factors, using AI capabilities to optimize them one by one is a promising platform.
Screen Studio#
screen.studio is incredibly powerful; just go to the official website to see the introduction. It's an all-in-one screen recording client software used by big companies like Microsoft, Google, Vercel, and Adobe; it's truly versatile.