Ice sinking and floating water

Ice sinking and floating water https://www.wdssmq.com/ Put a hundred feet of black ice and crack it. Throw the water in the pool for a moment and float and shake it. "Triumph" VSCode extension group management https://www.wdssmq.com/post/20230306656.html The Edge for browser has an "extension manager" that can group and manage extensions, which is very convenient VSCode has also installed a bunch of extensions, which are more in number, so we searched whether there is something with the same function positioning, even if there is one --<code>zyg. extension pack-manager2</code>  A brief introduction and link will be given later <hr /> The first is the "Extension Manager" under the browser, and the next is the link on Edge/Chrome: <blockquote> Chrome: <a href=" https://chromewebstore.google.com/detail/gjldcdngmdknpinoemndlidpcabkggco "Title=" Extension Manager - Chrome ">Extension Manager</a> Edge：<a href=" https://microsoftedge.microsoft.com/addons/detail/bhahgfgngfghgjhnpplmemebhenieijb "Title=" Extension Manager - Edge ">Extension Manager</a> </blockquote> The core functions are as follows: <ol> <li>The extensions can be grouped as needed to enable quick switching</ li> <li>For those that need to be enabled all the time, you can add them to the Fixed Group</ li> <li>When switching groups, the extension of "target group" and "fixed group" will be enabled byunion, and those not in these two groups will be disabled by default</ li> <li>You can still enable or disable an extension temporarily, and it will return to the status in the group the next time you switch groups</ li> </ol> Other functions that can be enabled by matching sites are icing on the cake. At present, the core functions are enough for me <img alt="edge-001" src=" https://img.wdssmq.com/_posts/2024-05-04-Ext-Mngr-VSCode/edge-001.png " /> <hr /> For VSCode, you can search<code>zyg. extension pack-manager2</code>or directly visit the following link: <blockquote> Extension Manager - Visual Studio Marketplace <a href=" https://marketplace.visualstudio.com/items?itemName=zyg.extension -pack-manager2" title="Extension Manager - Visual Studio Marketplace"> https://marketplace.visualstudio.com/items?itemName=zyg.extension -pack-manager2</a> </blockquote> ↑ This is a modified version. It seems that the original version cannot be used and has not been updated. Then the modified git library has also disappeared The function is also slightly simple. After grouping, you can only enable/disable the extensions contained in the grouping itself with one key How to use it:<code>Shift+Ctrl+P</code>Open the command panel, enter<code>Extension</code>, and you can find the following two command items: <ul> <li>Extension: Create a custom expansion pack</li> <li>Extension: View the customized expansion pack</li> </ul> ↑ Text words are not unified - _ - <ul> <li>When creating, you can set the name, description and icon, and then check the extension to be included</ li> <li>Use the View command to list all customized expansion packs, and enable/disable them with one click< ul> <li>You can find the option of "Edit Expansion Package" in the "Management" menu of each "Expansion Package"(the gear in the left list below)</ li> </ul> </li> </ul> Important: Uninstalling a customized Expansion Pack directly will uninstall along with the included extensions. If you just want to delete the group, please use the Uninstall button in the Edit Expansion Pack interface <img alt="vscode-001" src=" https://img.wdssmq.com/_posts/2024-05-04-Ext-Mngr-VSCode/vscode-001.png " /> Then I recorded a video and clicked the link to enter Station B to watch:<a href=“ https://www.bilibili.com/video/BV1QMETeDEc7/ "Title=" "Triumph" VSCode Extended Group Management_bilibili ">" Triumph "VSCode Extended Group Management_bilibili</a> <iframe src="//player.bilibili.com/player.html?aid=112380450702080&bvid=BV1QMETeDEc7&cid=500001530258651&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> Sat, 04 May 2024 12:27:47 +0800 "List Chronicle" Station B "Mary Radio Theater" Series Chinese Moving Arrangement https://www.wdssmq.com/post/20100715601.html At present, we are pursuing the two series of "Mary Radio Theater" and "Super Power Funny". The latest series is now carried by the following two UPs in Chinese:  BLUE_Hawaiii: <a href=" https://space.bilibili.com/3493114515819032/ "Title=" BLUE_Hawaiii's personal space - BLUE_Hawaiii's personal homepage - Bilibili video "> https://space.bilibili.com/3493114515819032/ </a> Sweet hermit:<a href=“ https://space.bilibili.com/929197/ "Title=" Personal space of sweet hermit - personal homepage of sweet hermit - Bilibili video "> https://space.bilibili.com/929197/ </a> <hr /> Now let's sort out some of the "Mary Radio Theater" carried by other UPs before, and see if there are any that have not been seen UP: sweet hermit Quantity: 9 [Mary Radio Theater]: <a href=" https://space.bilibili.com/929197/channel/seriesdetail?sid=2575069 "Title=" [Mary Radio Theater] "> https://space.bilibili.com/929197/channel/seriesdetail?sid=2575069 </a> Description: At present, he is mainly engaged in "super ability school running", and also has a few words about "Mary Radio Theater" ==== UP: Naizizao Animation Club Quantity: 15 Collection · [Mary's Daily Life]: <a href=" https://space.bilibili.com/651861849/channel/collectiondetail?sid=328325 "Title=" Collection · [Mary's Daily] "> https://space.bilibili.com/651861849/channel/collectiondetail?sid=328325 </a> ==== UP: Yujing Zhuozhiyu Quantity: 30 Submission video: <a href=" https://space.bilibili.com/5847815/video "Title=" Yujing Zhuo Zhiyu's contribution video "> https://space.bilibili.com/5847815/video </a> Note: There is no collection, but all contributions are radio theater ==== UP: Teaching Japanese in meditation Quantity: 7 Collection, Translation and Transportation | Japanese Funny Animation Short Film <a href=" https://space.bilibili.com/8204468/channel/collectiondetail?sid=1012254 "Title=" Collection · Translation and Transportation | Japanese Funny Animation Short [マリマリマリーーマリーーマリーマリーーマママリ https://space.bilibili.com/8204468/channel/collectiondetail?sid=1012254 </a> ==== UP: Xieli Quantity: 2 [Self made Chinese characters] Just alive girl with just appearance | <a href=" https://www.bilibili.com/video/BV1KP411A7j5 "Title=" [Self made Chinese characters] Just live younger sister whose appearance is just | マリリリママリーーー bilibili "> https://www.bilibili.com/video/BV1KP411A7j5 </a> [Self made Chinese characters] Stinky man who treats the cheating object as a ghost | マリリリマリーーー _bilibili: <a href=" https://www.bilibili.com/video/BV1PW4y1r7Kw "Title=" [Self made Chinese characters] The smelly man who treats the cheating object as a ghost | マリリリママリーーー125ILI "> https://www.bilibili.com/video/BV1PW4y1r7Kw </a> Note: Only these two Mary Radio Theaters are moved ==== UP: Grey Goo Niang - Grey Wind subtitle group Quantity: 26 Collection · Mary Radio Theater: https://space.bilibili.com/28968096/channel/collectiondetail?sid=1132159 Note: At present, this group is mainly engaged in the "Warrior Avoidance Flag Sauce" series Wed, 01 May 2024 16:03:43 +0800 "Code snippet" two slightly strange JS codes https://www.wdssmq.com/post/20160621482.html <blockquote> 2024-03-13： I studied another unknown piece of code, and when I remembered that I had worked on another piece of code before, it was merged together, and I found that the confusion was much higher </blockquote>  Extract elements by interval in array: <pre><code class="language-js">(() => { const allNum = 21; const perNum = 4; /** *Total number of @ param {int} all elements *@ param {int} per is used to divide all into per groups *@ param {int} offset is calculated to determine which element to start from, greater than or equal to 0, and no upper limit is set *@ returns {string} returns a string, and each element wraps */ function fnPickArr(all, per, offset = 0) { const rltArr = []; // const chunkNum = Math.floor(all / per); //↑ floor is rounded downwards, which will result in per+1 element const chunkNum = Math.ceil(all / per); //↑ The ceil is rounded up. Contrary to the floor, it will get per - 1 element //Essentially, every chunkNum - 1 element is taken once, and the remainder is judged twice for (let i = 0; i < all; i++) { if (i % chunkNum === offset % chunkNum) { // rltArr[i] = "*& quot;; rltArr[i] = i % per + 1; } else { rltArr[i] = "#& quot;; } } //Traversal rltArr, concatenated into characters, and each element is newlined let rltStr = ""; for (let i = 0; i < rltArr.length; i++) { rltStr += rltArr[i]; if ((i + 1) % per === 0) { rltStr += "\n"; } } return rltStr; } for (let i = 0; i < 6; i++) { console.log(fnPickArr(allNum, perNum, i)); } })(); </code></pre> 「- -」「- -」「- -」 A brain hole opened when studying cache expiration time, although it is not very clear what practical value it has: <pre><code class="language-js">(() => { let m; let lstM; let lstN; for (let n = 0; n <= 50; n++) { if (! m) { m = n + 5; lstN = n - 1; } if (m <= n) { if (n !== 11 && amp; n !== 12 && n !== 21) { // if (1 == 1) { fnLog([m - n, m, n, n - lstN, "do some thing"]); lstM = m; m = n + n - lstN; lstN = n + n - lstM; } else { fnLog([m - n, m, n, n - lstN, "skip"]); } } else { fnLog([m - n, m, n, n - lstN]); } } // ---------------------------- function fnLog(n) { if (Object.prototype.toString.call(n) === " [object Array]") { a = n.join(" , & quot;); } // document.getElementById(" debug").innerHTML += a + " "; console.log(a); } })(); </code></pre>  Wed, 13 Mar 2024 21:08:10 +0800 "Triumph" GM_Script+CF Workers KV semi-automatic collection of B user contributions into RSS https://www.wdssmq.com/post/20120519803.html <h2>One</h2> Finally, I tried this way  With the help of RSSHub subscription to B station user contributions and drama updates, the overall situation has been relatively stable for several years. I thought that if anti climbing becomes more strict, we could simply use<code>GM_Script</code>to directly grab data from the browser to remote storage, and then it finally happened in 2023-12 As a result, the code of the scheme described in this paper has been basically completed, but it can't run automatically after all, and the positioning is also different from the standard RSS requirements. Maybe we should study how to configure cookies for RSS Hub <h2>II</h2> With regard to functional positioning, some up masters would like to see the historical contributions as well, but there will be a lot of them in total. They have adopted the scheme of paging based on time and item serial number, dividing the cycle by m days, and outputting a fixed number of n pieces of data in the current cycle. See the code for details <blockquote> Wdssmq/later url cf: use Cloudflare Workers KV storage service to collect web addresses and output them in RSS <a href=" https://github.com/wdssmq/later-url-cf "Title=" wdssmq/later url cf: use Cloudflare Workers KV storage service to collect web addresses and output them as RSS; "> https://github.com/wdssmq/later-url-cf </a> userscript/packages/later-url at main · wdssmq/userscript <a href=" https://github.com/wdssmq/userscript/tree/main/packages/later-url#readme " title="userscript/packages/later-url at main · wdssmq/userscript"> https://github.com/wdssmq/userscript/tree/main/packages/later-url#readme </a> </blockquote> <h2>Three</h2> <blockquote> Bilibili2RSS - add RSS update notification for any favorite "TV series" on B station [Web] - niche software <a href=" https://www.appinn.com/bilibili2rss/ "Title=" Bilibili2RSS - Add RSS update notification for any of your favorite B-station "TV dramas" [Web] - niche software "> https://www.appinn.com/bilibili2rss/ </a> ↑ The code at that time is not reserved </blockquote> In 2017, I used PHP to write a tool for subscribing to the drama updates of Station B, and later learned that RSSHub exists RSSHub also needs to add a subscription to a reader for a specific drama at the earliest, so PR submitted a route of "user fan list" <blockquote> Add: user fan tracking list by wdssmq · Pull Request # 2735 · DIYgod/RSSHub <a href=" https://github.com/DIYgod/RSSHub/pull/2735 "Title=" Add: user fan tracking list by wdssmq · Pull Request # 2735 · DIYgod/RSSHub "> https://github.com/DIYgod/RSSHub/pull/2735 </a> ↑ It is marked with "Strict anti climbing", but it is probably still usable </blockquote> <code>I didn't really understand Github's PR/ISSUE search function. jpg</code> The problem with RSSHub is that the official website may be targeted for reverse crawling, and self built maintenance and update are troublesome, so the reverse generation method is used for multiple RSSHub instances <blockquote> Wdssmq/proxy_rsshub: Use GitHub Actions to reverse RSSHub+multi instance polling <a href=" https://github.com/wdssmq/proxy_rsshub "Title=" wdssmq/proxy_rsshub: Use GitHub Actions to reverse RSSHub+multi instance polling "> https://github.com/wdssmq/proxy_rsshub </a> ↑ This may not comply with the terms of use of GitHub Actions, so it was disabled after a period of time Wdssmq/rsshub cf: Cloudflare Worker reverse generation RSSHub <a href=" https://github.com/wdssmq/rsshub-cf "Title=" wdssmq/rsshub cf: Cloudflare Worker replays RSSHub "> https://github.com/wdssmq/rsshub-cf </a> ↑ Originally, this scheme was relatively reliable, but Station B strengthened a wave of anti climbing </blockquote> Thu, 04 Jan 2024 11:03:24 +0800 The reduce() method of the Code Fragment JavaScript array https://www.wdssmq.com/post/20231130787.html A requirement example seen in the post bar asked AI to write down the reduce() method. Previously, AI only knew about such a thing. Let's use this example to deepen our impression  <h2>Document</h2> <blockquote> Array.prototype.reduce() - JavaScript | MDN <a href=" https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce " title="Array.prototype.reduce() - JavaScript | MDN"> https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce </a> </blockquote> <h2>Code case</h2> <pre><code class="language-js">(() => { const data = [ { k: "a", v: 1 }, { k: "a", v: 1 }, { k: "a", v: 2 }, { k: "a", v: 3 }, { k: "b", v: 3 }, { k: "b", v: 3 }, { k: "b", v: 2 }, { k: "c", v: 2 }, { k: "c", v: 1 }, { k: "c", v: 1 }, ]; /*Convert to the following format [ { k: "a", v: [1, 2, 3] }, { k: "b", v: [3, 2] }, { k: "c", v: [2, 1] } ]; */ const result = data.reduce((acc, cur) => { const { k, v } = cur; const index = acc.findIndex(item => item.k === k); if (index === -1) { acc.push({ k, v: [v] }); } else { acc[index].v.push(v); //For de duplication, AI still ignores some explicit statements from time to time. -- acc[index].v = [...new Set(acc[index].v)]; } return acc; }, []); console.log(result); })(); </code></pre> <h2>End</h2> Although there is a little water, it seems that there is nothing to say Some other articles: <ul> <li><a href=" https://www.wdssmq.com/post/20210529408.html "Title=" "Code snippet" JavaScript queue executes asynchronous task_computer network_sinking and floating ">" Code snippet "JavaScript queue executes asynchronous task_computer network_sinking and floating</a></li> <li><a href=" https://www.wdssmq.com/post/20170313538.html "Title=" "Notes" JavaScript error prompt and solution_ Computer network_sinking and floating ">Memo JavaScript error prompt and solution! _Computer network_sinking and floating</a></li> <li><a href=" https://www.wdssmq.com/post/20190701815.html "Title=" "Code snippet" When the web page element is visible...... _Computer network_creeze floating water ">" Code snippet "When the web page element is visible...... _Computer network_creeze floating water</a></li> </ul> Sat, 16 Dec 2023 11:13:22 +0800 "VPS" DesiVPS 2023 Black Five Promotion https://www.wdssmq.com/post/20220219378.html  <h3>Write in front</h3> Therefore, their activities were pushed a little later However, we are struggling to decide whether to renew the previous one this year. The billing time is December 17,<code>1.5 GB/25 GB</code>, and the annual payment is $19.50 The focus of this time is also NVME SSD, and the hard disk is smaller at the same price  <blockquote> It seems that the previous promotional items can still be bought< code>2 GB / 40 GB</code>， If you pay $25, is it more cost-effective in terms of hard disk space "VPS" DesiVPS April 23 discount | Chinese win system option_advertisements_ice floating <a href=" https://www.wdssmq.com/post/20100211992.html "Title=" "VPS" DesiVPS April 23 discount | Chinese win system_optional Chinese win system_advertisements_ice-cream floating "> https://www.wdssmq.com/post/20100211992.html </a> </blockquote>  <h3>Registration link</h3> [ShortSth:DesiVPS][/ShortSth] [ShortSth: Host Cloud] [/ShortSth] "The main site is located here" <h3>Configuration Information</h3> <blockquote> The content here is published on 2023-12-02, please note whether the information is invalid </blockquote>  Discount code: <code>BLACK10</code>← Use this discount code to get an additional 10% discount (purchase+renewal) Co configuration: <ul> <li>1 IPv6 address</li> <li>10 GBPS ports</li> <li>IP replacement 3 times a year</li> <li>One snapshot backup every month</li> <li>It seems that the computer rooms are all San Jose</li> </ul> Linux VPS： 1GB KVM VPS 10GBPS <ul> <li>1 CPU Cores</li> <li>1 GB RAM</li> <li>15 GB NVME SSD</li> <li>1 IPv4 Address</li> <li>1.5 TB bandwidth</li> </ul> Price:<code>$17/year</code>(about RMB 121.36/year) Purchase link:<a href=“ https://clients.desivps.com/cart.php?a=add&amp ; pid=198"> https://clients.desivps.com/cart.php?a=add&amp ; pid=198</a> <hr /> 2GB KVM VPS 10GBPS <ul> <li>1 CPU Cores</li> <li>2 GB RAM</li> <li>30 GB NVME SSD</li> <li>1 IPv4 Address</li> <li>3 TB bandwidth</li> </ul> Price:<code>$33/year</code>(about RMB 235.57/year) Purchase link:<a href=“ https://clients.desivps.com/cart.php?a=add&amp ; pid=199"> https://clients.desivps.com/cart.php?a=add&amp ; pid=199</a> <hr /> 3GB KVM VPS 10GBPS <ul> <li>2 CPU Cores</li> <li>3 GB RAM</li> <li>45 GB NVME SSD</li> <li>2 IPv4 Address</li> <li>4.5 TB bandwidth</li> </ul> Price:<code>$49/year</code>(about RMB 349.79/year) Purchase link:<a href=“ https://clients.desivps.com/cart.php?a=add&amp ; pid=200"> https://clients.desivps.com/cart.php?a=add&amp ; pid=200</a> <hr /> 4GB KVM VPS 10GBPS <ul> <li>2 CPU Cores</li> <li>4 GB RAM</li> <li>60 GB NVME SSD</li> <li>2 IPv4 Address</li> <li>6 TB bandwidth</li> </ul> Price:<code>$65/year</code>(about ￥ 464.01/year) Purchase link:<a href=“ https://clients.desivps.com/cart.php?a=add&amp ; pid=201"> https://clients.desivps.com/cart.php?a=add&amp ; pid=201</a> <hr /> 5GB KVM VPS 10GBPS <ul> <li>3 CPU Cores</li> <li>5 GB RAM</li> <li>75 GB NVME SSD</li> <li>3 IPv4 Address</li> <li>7.5 TB bandwidth</li> </ul> Price:<code>$81/year</code>(about ￥ 578.23/year) Purchase link:<a href=“ https://clients.desivps.com/cart.php?a=add&amp ; pid=202"> https://clients.desivps.com/cart.php?a=add&amp ; pid=202</a> <hr /> 6GB KVM VPS 10GBPS <ul> <li>3 CPU Cores</li> <li>6 GB RAM</li> <li>90 GB NVME SSD</li> <li>3 IPv4 Address</li> <li>9 TB bandwidth</li> </ul> Price:<code>$97/year</code>(about ￥ 692.44/year) Purchase link:<a href=“ https://clients.desivps.com/cart.php?a=add&amp ; pid=203"> https://clients.desivps.com/cart.php?a=add&amp ; pid=203</a> Windows OS： The Chinese version of Windows Server 2012 or 2016 is provided, and the IP can also be changed and a snapshot backup can be made It is more expensive. I will give you the configuration information and pid <ul> <li> 1 core CPU / 2 GB RAM / 30 GB SSD / 1000Mbps port / 1 IP address / 2.5 TB bandwidth / <code>$8/month or $88/year</code> / <a href=" https://clients.desivps.com/cart.php?a=add&amp ; Pid=171 ">Purchase: pid=171</a> </li> <li> 2 core CPU / 4 GB RAM / 60 GB SSD / 1000Mbps port / 2 IP address / 5.0 TB bandwidth / <code>$16/month or $176/year</code> / <a href=" https://clients.desivps.com/cart.php?a=add&amp ; Pid=172 ">Purchase: pid=172</a> </li> <li> 3 core CPU / 6 GB RAM / 90 GB SSD / 1000Mbps port / 2 IP address / 7.5 TB bandwidth / <code>$24/month or $264/year</code> / <a href=" https://clients.desivps.com/cart.php?a=add&amp ; Pid=173 ">Purchase: pid=173</a> </li> </ul>  <h3>Network information</h3> <ul> <li>San Jose, CA, USA</li> <li>Test IP: <code>139.28.232.5</code></li> <li>Test File: <code> http://139.28.232.5/100MB.bin </code></li> <li>Looking Glass: <code> https://lg.desivps.com </code></li> </ul>         Sat, 02 Dec 2023 11:31:09 +0800 "Triumph" Vue's simple state management practice https://www.wdssmq.com/post/20220810247.html It has been more than two years since I officially contacted Vue.js. It seems that there are only four projects actually written? Based on Vite  In addition, I have also tried to write small programs in mpvue and taro - the same functional requirements have been realized once with two frameworks plus Vue  The first<a href written as a Z-BlogPHP theme=“ https://gitee.com/wdssmq/vite_zbp_vue_TestType "Title=" Blog theme based on Z-BlogPHP API; Vue 3 + Vite； ">vite_zbp_vue_TestType</a>In the project, Vuex management status was used. Later, it was officially recommended to change Pinia, but it was too lazy to update it. In fact, the specific differences between the two use are still not clear. Then, for this project, it may be possible to do without special status management <blockquote> Simple status management with responsive API | Vue.js <a href=" https://cn.vuejs.org/guide/scaling-up/state-management.html#simple -State management with reactivity api "title=" Simple state management with responsive API | Vue. js "> https://cn.vuejs.org/guide/scaling-up/state-management.html#simple -state-management-with-reactivity-api</a> </blockquote> Then the current fourth project is an online video player integrated with DPlayer. The implementation of work+diversity switching requires state management, which is a very appropriate practice The following is the explanation of the realization idea - ·Encapsulates a store object for global state management ·The reading and writing of status attributes and the interaction with localStorage are encapsulated into corresponding methods <pre><code class="language-ts">// store.ts //Introducing responsive API and localStorage encapsulation import { reactive } from 'vue' import { useStorage } from '@vueuse/core' //Some type definitions and implementation of specific methods are omitted const lsStore = useStorage('lsStore', { lst_work: 0 } as TypeLsStore) export const store = reactive({ //Current episode information work_id: 0, work_name: '', work_ep: 1, work_ep_time: 0, work_ep_max: 0, //Episode List work_list: [] as TypeData['items'], //Initialization init: (list: TypeData['items']) => { //Write episode list store.work_list = list //Switch to the last played work store.changeWork(lsStore.value.lst_work) }, //Work switching changeWork: (id: number) => { }, //Drama switching changeEp: (ep: number) => { }, //Judge and read the last play record, the second of the episode getProg: () => { }, //Write Playback Record setProg: () => { lsStore.value[store.work_id] = { lst_ep: store.work_ep, lst_ep_time: store.work_ep_time, } }, }) </code></pre> ·There is only one App.vue page, so no routing is required <pre><code class="language-html">< script setup lang="ts"> //Introducing API and state management objects import { computed } from 'vue' import { store } from './ base/store' //Other components, data processing, etc // ... //Initialization status store.init(data.items) //After paging switch, update the new "page number" to the store function pageChange(type: string, page: number) { if (type === 'ep') { store.changeEp(page) } else if (type === 'works') { store.changeWork(page - 1) } } //↑ Bind the click event in the paging component, pass it up to the listening function in the parent component, and render the switching effect back to the paging component after updating the store status; //↑ Here, you can directly update the store status in the paging component. The switching function is placed in the paging component itself. The specific choice depends on the actual needs; //The dplayer component has automatic replay and time progress records, so it chooses to directly update the store status; //Work paging information const worksPageInfo = computed(() => { return { Name: 'Work List', type: 'works', page: store.work_id + 1, items: store.work_list, } }) //Diversity paging information const epPageInfo = computed(() => { return { Name: 'Diversity List', page: store.work_ep, type: 'ep', total: store.work_list[store.work_id].maxP, } }) //When the "status" changes, the video data and paging information above will be re acquired const dplayerInfo = computed(() => { return buildDplayerInfo(data as TypeData, store.work_id, store.work_ep) }) </ script>  < template>  < dplayer :dplayerInfo="dplayerInfo"></dplayer>  < pagebar :pageInfo="epPageInfo" @page-change=" pageChange"></pagebar>  < pagebar :pageInfo="worksPageInfo" @page-change=" pageChange"></pagebar> </ template> </code></pre> 「- -」「- -」「- -」「- -」「- -」「- -」「- -」「- -」 Then the Vue DPlayer project is written in the private Git. If you are interested, please add QQ group to download it ·Various QQ groups <blockquote> Salted Fish Study Room:<code>576621997</code> My salted fish heart:<code>189574683</code> </blockquote> ·Work information <blockquote> <h3>Vue integrated DPlayer | Works+diversity switching</h3> <code>Vite + Vue3 + TypeScript + DPlayer</code>； Record playback progress for each work (localStorage) </blockquote> ·Attached drawings <img alt="001.png" src=" https://img.wdssmq.com/_posts/2023-11-23-Vue-State-Simple/001.png " title="001.png" /> <img alt="002.png" src=" https://img.wdssmq.com/_posts/2023-11-23-Vue-State-Simple/002.png " title="002.png" /> Thu, 23 Nov 2023 15:12:04 +0800 "VPS" RackNerd Special Price for Black Five Year Plan in 2023 https://www.wdssmq.com/post/20231112097.html <h3>Registration link</h3> [ShortSth: RackNerdVPS] [/ShortSth] ← The service provider mainly introduced in this article [ShortSth: aff] [/ShortSth] ← A random  <h3>Configuration Information</h3> <blockquote> The content here is published on November 16, 2023-12. Please note whether the information is invalid </blockquote> Linux VPS 768 MB KVM VPS <ul> <li>1 vCPU Core</li> <li>15 GB Pure SSD Storage</li> <li>768 MB RAM</li> <li>1000 GB Monthly Transfer</li> <li>1 Gbps Network Port</li> <li>Full Root Admin Access</li> <li>1 Dedicated IPv4 Address</li> <li>KVM / SolusVM Control Panel</li> <li>FREE Clientexec License</li> <li>Available in: SJC, SEA, DAL, CHI, ATL, NY, ASH</li> </ul> Price:<code>$10.18/YEAR</code>(about<code>￥ 73.88/year</code>) Purchase:<a href=“ https://my.racknerd.com/aff.php?aff=7293&amp ; Pid=792 "title=" 768 MB KVM VPS ">Click here</a> <hr /> 2GB KVM VPS <ul> <li>1 vCPU Core</li> <li>30 GB Pure SSD Storage</li> <li>2 GB RAM</li> <li>2500 GB Monthly Transfer</li> <li>1 Gbps Network Port</li> <li>Full Root Admin Access</li> <li>1 Dedicated IPv4 Address</li> <li>KVM / SolusVM Control Panel</li> <li>FREE Clientexec License</li> <li>Available in: LAX, SJC, SEA, DAL, CHI, ATL, NY, ASH</li> </ul> Price:<code>$16.98/YEAR</code>(about<code>￥ 123.22/year</code>) Purchase:<a href=“ https://my.racknerd.com/aff.php?aff=7293&amp ; Pid=793 "title=" 2GB KVM VPS ">Click here</a> <hr /> 2.5GB KVM VPS <ul> <li>2 vCPU Cores</li> <li>50 GB Pure SSD Storage</li> <li>2.5 GB RAM</li> <li>5000 GB Monthly Transfer</li> <li>1 Gbps Network Port</li> <li>Full Root Admin Access</li> <li>1 Dedicated IPv4 Address</li> <li>KVM / SolusVM Control Panel</li> <li>FREE Clientexec License</li> <li>Available in: LAX, SJC, SEA, DAL, CHI, ATL, NY, ASH</li> </ul> Price:<code>$25.49/YEAR</code>(about<code>￥ 184.98/year</code>) Purchase:<a href=“ https://my.racknerd.com/aff.php?aff=7293&amp ; Pid=794 "title=" 2.5GB KVM VPS ">Click here</a> <hr /> 4GB KVM VPS <ul> <li>2 vCPU Cores</li> <li>80 GB Pure SSD Storage</li> <li>4 GB RAM</li> <li>8000 GB Monthly Transfer</li> <li>1 Gbps Network Port</li> <li>Full Root Admin Access</li> <li>1 Dedicated IPv4 Address</li> <li>KVM / SolusVM Control Panel</li> <li>FREE Clientexec License</li> <li>Available in: LAX, SJC, SEA, DAL, CHI, ATL, NY, ASH</li> </ul> Price:<code>$38.88/YEAR</code>(about<code>￥ 282.15/year</code>) Purchase:<a href=“ https://my.racknerd.com/aff.php?aff=7293&amp ; Pid=795 "title=" 4GB KVM VPS ">Click here</a> <hr /> 4.5GB KVM VPS <ul> <li>4 vCPU Cores</li> <li>115 GB Pure SSD Storage</li> <li>4.5 GB RAM</li> <li>10,000 GB Monthly Transfer</li> <li>1 Gbps Network Port</li> <li>Full Root Admin Access</li> <li>1 Dedicated IPv4 Address</li> <li>KVM / SolusVM Control Panel</li> <li>FREE Clientexec License</li> <li>Available in: LAX, SJC, SEA, DAL, CHI, ATL, NY, ASH</li> </ul> Price:<code>$52.49/YEAR</code>(about<code>￥ 380.92/year</code>) Purchase:<a href=“ https://my.racknerd.com/aff.php?aff=7293&amp ; Pid=796 "title=" 4.5GB KVM VPS ">Click here</a> Ryzen NVMe VPS <blockquote> More expensive models, only the New York machine room </blockquote> 1.5GB Ryzen NVMe VPS <ul> <li>1 vCPU AMD Ryzen Core</li> <li>30 GB NVMe Storage</li> <li>1.5 GB RAM</li> <li>2500 GB Monthly Transfer</li> </ul> Price:<code>$19.00/YEAR</code>(about<code>￥ 137.88/year</code>) Purchase:<a href=“ https://my.racknerd.com/aff.php?aff=7293&amp ; Pid=797 "title=" 1.5GB Ryzen NVMe VPS ">Click here</a> <hr /> 2GB Ryzen NVMe VPS <ul> <li>2 vCPU AMD Ryzen Cores</li> <li>40 GB NVMe Storage</li> <li>2 GB RAM</li> <li>4000 GB Monthly Transfer</li> </ul> Price:<code>$29.00/YEAR</code>(about<code>￥ 210.45/year</code>) Purchase:<a href=“ https://my.racknerd.com/aff.php?aff=7293&amp ; Pid=798 "title=" 2GB Ryzen NVMe VPS ">Click here</a> <hr /> 3GB Ryzen NVMe VPS <ul> <li>2 vCPU AMD Ryzen Cores</li> <li>55 GB NVMe Storage</li> <li>3 GB RAM</li> <li>6000 GB Monthly Transfer</li> </ul> Price:<code>$45.00/YEAR</code>(about<code>￥ 326.56/year</code>) Purchase:<a href=“ https://my.racknerd.com/aff.php?aff=7293&amp ; Pid=799 "title=" 3GB Ryzen NVMe VPS ">Click here</a><-- 749--> Thu, 16 Nov 2023 12:28:07 +0800 "Water Pit" skill tree atlas without map https://www.wdssmq.com/post/20230914731.html It is probably an extension of "about ice sinking and floating water":<a href=“ https://www.wdssmq.com/guestbook.html "Title=" Message Book/About ">Message Book/About</a> <blockquote> Why is it called a "puddle"? See the<a href="/post/20200617652. html" title="Index of" puddle "series tutorials">Index of "puddle" series tutorials</a> List of "puddles" series articles:<a href="/tag/GosF Force/" title="Tag: GesF Force">/tag/GosF Force/</a> </blockquote>  <ul> <li> System <ul> <li>[ ] Window</li> <li>[ ] Linux / WSL</li> </ul> </li> <li> Basic tools <ul> <li>[X] Git</li> <li>[X] VSCode</li> </ul> </li> <li> Language environment <ul> <li>[X] HTML + CSS + JavaScript</li> <li>[ ] Node.js | Vue.js / GM_Script / Astro / TypeScript / Sass / Less</li> <li>[] PHP|Z-BlogPHP application development</li> <li>[ ] Python</li> </ul> </li> <li> Environment deployment <ul> <li>[ ] Docker / Docker Compose | Node.js / PHP / MySQL / Nginx|Apache</li> <li>[ ] LNMP/LAMP/LNMPA | PHP / MySQL / Nginx|Apache</li> <li>[ ] IIS | PHP / ASP / MySQL</li> <li>[] Pagoda panel|PHP related environment deployment, Node.js and Docker can also be used</li> </ul> </li> </ul> Wed, 18 Oct 2023 13:16:54 +0800 Notes Various pieces of information [2023-10-07] https://www.wdssmq.com/post/20230223818.html Some fragmentary notes may be added later; 「2023-10-07」  <h2>2023-10-07</h2> TITLE: The space before the function brackets when VSCode formats JS code TAG: <code>#VSCode</code> <code>#JavaScript</code> <code>#Format</code> BODY: By default, VSCode formats the JS code according to the following results: <pre><code class="language js">//Named function, no blank is added by default function fnNamed() { console.log('fnNamed') } //Anonymous function, with spaces by default const fnAnonymous = function () { console.log('fnAnonymous') } //Asynchronous arrow function, with spaces by default const fnAsyncArrow = async () => { console.log('fnAsyncArrow') } </code></pre> Although I don't know why, I don't like the blank space of anonymous function --, so I want to remove it · VSCode configuration: Shortcut key<code>ctrl+,</code>open settings, search<code>Insert Space After Function Keyword</code>, and you can set JavaScript and TypeScript respectively: <blockquote> JavaScript > Format: Insert Space After Function Keyword For Anonymous Functions [] Define space handling after function keyword of anonymous function TypeScript > Format: Insert Space After Function Keyword For Anonymous Functions [] Define space handling after function keyword of anonymous function </blockquote> ↑ If checked, spaces are added; if unchecked, spaces are not added The corresponding JSON configuration is as follows: <pre><code class="language-json">{ " javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false, " typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false } </code></pre> · ESLint configuration: <blockquote> 「 Triumph 」 ESLint installation and use_Computer network 」 ice sinking and floating water <a href=" https://www.wdssmq.com/post/20190917021.html "Title=" "Triumph" ESLint installation and use_computer network_sinking and floating "> https://www.wdssmq.com/post/20190917021.html </a> </blockquote> <pre><code class="language-js">{ 'rules': { //Space requirements before function parentheses 'space-before-function-paren': [ 1, { 'anonymous': 'never', 'asyncArrow': 'always', 'named': 'never', }, ], } } </code></pre>  <h2>2023-10-08</h2> TITLE: Use of 'Type Defined Namespace' in TypeScript TAG:<code># TypeScript</code><code># VSCode</code><code># Namespace</code> BODY: <code>@types/dplayer - npm</code> https://www.npmjs.com/package/ @types/dplayer? activeTab=code <pre><code class="language-ts">// d.ts export as namespace DPlayer; export default class DPlayer { } //Import Pose 1 import DPlayer from 'dplayer' //Import Pose 2 import DPlayerX from 'dplayer' // import type DPlayer from 'dplayer' </code></pre> Posture 1 seems to be usable, but it is not easy to distinguish (Figures 1 and 2) Figure 3 shows that the namespace can be found, but it still prompts that it is not defined. It feels different from the understanding, although you can use<code>/* global DPlayer */</code>to mask the prompt So the conclusions explored at present are as follows: <ul> <li><code>import XXX from</code>can be used as a "value", and can be used as a "type" when there is a type definition. Neither "value" nor "type" needs to be the same as the export name</ li> <li><code>import type XXX from</code>cannot be used as a "value". When used as a "type", it does not need to be the same as the export name</ li> <li>For the "namespace", I have imported the<code>@ types/dplayer</code>with a triple slash, but it seems that you can still find it after removing it, and there is no other special import syntax< ul> <li>The above two<code>import</code>imports can have the same name as the "namespace". At this time, they can be identified as the "namespace" according to the use method, and the<code>no undef</code>prompt of eslint can be eliminated</ li> </ul> </li> </ul> The feeling is that ts and eslint do not work well together. You can use one of the following methods to deal with it: <ol> <li>Use the<code>import</code>import with the same name as the "namespace". It seems that it is OK after understanding</ li> <li>Specify<code>/* global XXX */</code>for the Namespace to mask the eslint prompt</ li> <li>Instead of using a namespace, you can directly use<code>import</code>to import the specific types under it</ li> </ol> <img alt="001.png" src=" https://s2.loli.net/2023/10/08/X3VZdkK9rWs8Lul.png " /> ↑ Figure 1 <img alt="002.png" src=" https://s2.loli.net/2023/10/08/X1Bs53KWtPJIjhp.png " /> ↑ Figure 2 <img alt="003.png" src=" https://s2.loli.net/2023/10/08/dYCiA5XhSwFKn8N.png " /> ↑ Figure 3 <h2>2023-10-31 #</h2> TITLE: Various postures concerning water TAG:<code># Social platform</code><code># Seeking attention</code><code># Internet</code> BODY: 《<a href=" https://www.wdssmq.com/guestbook.html "Title=" Message Book/About ">Message Book/About</a>" lists various platform accounts, which are intended to be in the form of "Remuneration Collection" or "Deduction", although I still hope to make money directly A total of 4 tasks, including required tasks, can be completed. Any one can be used when a site has multiple optional operations. In principle, the same site is only counted once Current Required Tasks: <ul> <li>FeedsPub Subscription</li> <li>2 coins in station B</li> </ul> Task List: <ol> <li>GitHub<ul> <li>Links:<a href=“ https://github.com/wdssmq "Title=" wdssmq (ice sinking and floating water) "> https://github.com/wdssmq </a></li> <li>Operation: Follow<code>or</code>Like (Star)</li> </ul> </li> <li>FeedsPub<ul> <li>Links:<a href=“ https://feeds.pub/feed/https%3A%2F%2Fwww.wdssmq.com%2Ffeed.php "Title=" Ice floating water "> https://feeds.pub/feed/https%3A%2F%2Fwww.wdssmq.com%2Ffeed.php </a></li> <li>Action:Register and follow</li> </ul> </li> <li>Bi Li Bi Li<ul> <li>Links:<a href=“ https://space.bilibili.com/44744006 "Title=" Personal space of ice flots_bilibili "> https://space.bilibili.com/44744006 </a></li> <li>Operation: follow<code>or</code>coin insertion<code>or</code>charging</li> </ul> </li> <li>Zhihu<ul> <li>Links:<a href=“ https://www.zhihu.com/people/wdssmq "Title=" Ice floating water - Zhihu "> https://www.zhihu.com/people/wdssmq </a></li> <li>Action: Focus</li> </ul> </li> <li>Post Bar<ul> <li>Links:<a href=“ https://tieba.baidu.com/home/main?un= Ice floating water "title=" Ice floating water stickers "> https://tieba.baidu.com/home/main?un= Ice sinking and floating water</a></li> <li>Action: Focus</li> </ul> </li> </ol>  Sat, 07 Oct 2023 18:22:42 +0800