mastodon.world is one of the many independent Mastodon servers you can use to participate in the fediverse.
Generic Mastodon server for anyone to use.

Server stats:

8.4K
active users

#web開發

0 posts0 participants0 posts today
GripNews<p>🌘 使用 JavaScript 建立句子級文字轉語音閱讀器<br>➤ 打造互動式文字轉語音閱讀器<br>✤ <a href="https://jsdev.space/tts-sentence-reader/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">jsdev.space/tts-sentence-reade</span><span class="invisible">r/</span></a><br>本文介紹如何使用 JavaScript 的 SpeechSynthesis API 建立一個簡單的網頁工具,實現句子級的文字轉語音功能,並搭配句子亮顯效果。文章循序漸進地說明瞭 TTS 的基本概念、程式碼範例,以及如何整合 HTML、CSS 和 JavaScript 建立一個互動式的閱讀器,包含播放、暫停、恢復、停止按鈕和語音選擇功能。<br>+ 這篇文章寫得非常清楚,範例程式碼也很好理解,對於想學習文字轉語音技術的人來說很有幫助。<br>+ 終於找到了一個簡單易懂的 JavaScript TTS 教程了!整合了亮顯功能更是錦上添花。<br><a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.social/tags/Web%E9%96%8B%E7%99%BC" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Web開發</span></a> <a href="https://mastodon.social/tags/%E6%96%87%E5%AD%97%E8%BD%89%E8%AA%9E%E9%9F%B3" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>文字轉語音</span></a> (TTS)</p>
GripNews<p>🌘 重訪圖像地圖<br>➤ 懷舊與現代技術的結合<br>✤ <a href="https://css-tricks.com/revisiting-image-maps/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/revisiting-imag</span><span class="invisible">e-maps/</span></a><br>本文探討了在現代網頁設計中重新利用圖像地圖的可能性。作者為一位獲獎遊戲作曲家設計網站時,希望結合90年代的復古風格,同時兼顧現代網頁的可訪問性、效能和響應式設計。他回顧了圖像地圖的歷史,並分享瞭如何透過圖像地圖實現互動式導航,克服了圖像地圖在響應式設計上的挑戰,並最終提出了一種使用SVG路徑和錨點的替代方案,以實現更靈活和可維護的互動式圖像。<br>+ 這篇文章讓我回憶起以前的網頁設計,當時圖像地圖非常流行。現在重新看來,它仍然有其價值,但需要一些技巧才能在現代網頁中有效地使用。<br>+ 作者的解決方案很有創意,利用SVG路徑和錨點來克服圖像地圖的限制,這是一個值得學習的技巧。<br><a href="https://mastodon.social/tags/Web%E9%96%8B%E7%99%BC" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Web開發</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>網頁設計</span></a></p>
GripNews<p>🌕 Deno 的衰落(六個地區且持續減少)<br>➤ Deno Deploy 的地域覆蓋範圍急劇萎縮,產品更新停滯,未來令人擔憂。<br>✤ <a href="https://dbushell.com/2025/04/28/denos-decline/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">dbushell.com/2025/04/28/denos-</span><span class="invisible">decline/</span></a><br>本文詳細記錄了 Deno Deploy 平臺自 2023 年以來服務區域的持續縮減,從最初的 35 個地區一路下降至目前的 6 個地區。作者指出 Deno 的「邊緣主機」宣傳與其實際覆蓋範圍不符,並批評 Deno 的其他產品(如 Fresh 框架、KV 數據庫和 JSR 包管理器)發展停滯或缺乏創新。作者表達了對 Deno 發展方向的失望,並轉向關注 Bun 這樣的替代方案。<br>+ 「我一直對 Deno 的概念很感興趣,但如果連基本的區域覆蓋都做不好,那它的未來真的堪憂。」<br>+ 「這篇文章點出了 Deno 一直以來存在的問題,過於雄心勃勃但缺乏實際的技術支持,讓人們感到失望。」<br><a href="https://mastodon.social/tags/%E7%A7%91%E6%8A%80%E8%A9%95%E8%AB%96" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>科技評論</span></a> <a href="https://mastodon.social/tags/Deno" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Deno</span></a> <a href="https://mastodon.social/tags/Web%E9%96%8B%E7%99%BC" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Web開發</span></a></p>
GripNews<p>🌘 項目流動:版面配置的新統一概念(第一部分)<br>➤ 統一Flexbox、Grid和Masonry佈局的全新方法<br>✤ <a href="https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">webkit.org/blog/16587/item-flo</span><span class="invisible">w-part-1-a-new-unified-concept-for-layout/</span></a><br>WebKit團隊正在探索一種名為「項目流動」(Item Flow)的新概念,旨在統一Flexbox和Grid的版面配置屬性。此概念源於對現有方案的不足之處的考量,以及W3C技術架構小組(TAG)提出的將Flexbox、Grid和Masonry整合到統一屬性集合中的建議。項目流動將包含新的簡寫屬性 `item-flow`,以及 `item-direction`、`item-wrap`、`item-pack` 和 `item-slack` 等長寫屬性,旨在提供更靈活、更通用的版面設計控制能力,並為Flexbox和Grid帶來新的功能。本文介紹了項目流動的概念,並探討了它對Flexbox和Grid的影響,後續文章將深入探討其對Masonry樣式版面配<br><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/Web%E9%96%8B%E7%99%BC" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Web開發</span></a> <a href="https://mastodon.social/tags/%E7%89%88%E9%9D%A2%E9%85%8D%E7%BD%AE" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>版面配置</span></a> <a href="https://mastodon.social/tags/Flexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Flexbox</span></a> <a href="https://mastodon.social/tags/Grid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Grid</span></a></p>
GripNews<p>🌗 對將 JavaScript 工具重寫為「更快」語言持懷疑態度<br>➤ JavaScript 工具性能轉換的慎重考量<br>✤ <a href="https://nolanlawson.com/2024/10/20/why-im-skeptical-of-rewriting-javascript-tools-in-faster-languages/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">nolanlawson.com/2024/10/20/why</span><span class="invisible">-im-skeptical-of-rewriting-javascript-tools-in-faster-languages/</span></a><br>該篇文章討論了對將 JavaScript 工具重寫為「更快」語言的懷疑。作者指出 JavaScript 在性能方面還有改進空間,提到了目前 JavaScript 命令行工具趨向使用更快的語言進行重寫,以及這種趨勢可能存在的影響和挑戰。<br>+ 對於開發者來說,選擇是否將 JavaScript 工具轉換為其他更快的語言,確實需要仔細思考過後再做決定。<br>+ 文章探討了轉換 JavaScript 工具的可能性,呈現了作者對於在選擇更快語言時的疑慮和反思。<br><a href="https://mastodon.social/tags/JavaScript%E9%87%8D%E5%AF%AB" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript重寫</span></a> <a href="https://mastodon.social/tags/%E6%80%A7%E8%83%BD" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>性能</span></a> <a href="https://mastodon.social/tags/Web%E9%96%8B%E7%99%BC" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Web開發</span></a></p>

🌗 Web元件其實挺好的
➤ 優缺點並存,Web開發者應多角度看待
nolanlawson.com/2024/09/28/web
Web元件被議論已久,文章討論其性能、標準成本等議題,應從共識出發,不只著重性能。作者認為雖然Web元件有缺點,但無須抨擊,而應看見各種優點及彼此之間可能的共通點。
+ 在追求性能的同時,理解Web元件的多樣性與共識有助於開發更全面的應用。
+ 文章呈現了一個平衡見解,建議探討Web元件的各面向優劣,而非僅止於強調單一因素。
#Web開發 #性能 #Framework

Read the Tea Leaves · Web components are okayEvery so often, the web development community gets into a tizzy about something, usually web components. I find these fights tiresome, but I also see them as a good opportunity to reach across &#82…

🌘 使用不同的Web框架構建相同應用程序
➤ 使用不同的Web框架構建相同的Web應用程序
eugeneyan.com/writing/web-fram
最近,我一直在思考是否應該從目前的Web應用程式堆棧(FastAPI、HTML、CSS和少量JavaScript)轉移到一個現代的Web框架,特別是對FastHTML、Next.js和Svelte感興趣。通過使用這些框架來構建相同的Web應用程序,希望瞭解各框架的獨特功能和相應的開發者體驗。
+ 這篇文章涵蓋了作者在構建Web應用程序時使用不同框架的經驗,很有啟發性。
+ 閱讀後更深入瞭解了不同Web框架的特點和適用場景。
#Web開發

eugeneyan.com · Building the Same App Using Various Web FrameworksFastAPI, FastHTML, Next.js, SvelteKit, and thoughts on how coding assistants influence builders' choices.

🌖 搖動樹木: 程序設計中的誤導性算法
➤ WebAssembly在開發領域的成功與挑戰
wingolog.org/archives/2023/11/
文章探討了WebAssembly在網頁開發中的成功和失敗,指出樹搖動(tree-shaking)在程式語言編譯中的重要性,強調精簡代碼的優勢。
+ 有趣的對比,讓人思考網頁開發的技術前景。
+ 樹搖動的概念在程式語言編譯中的應用讓人眼前一亮。
#WebAssembly #Web開發 #開發工具

wingolog.orgtree-shaking, the horticulturally misguided algorithm — wingologwingolog: article: tree-shaking, the horticulturally misguided algorithm

🌗 為什麼Tailwind不適合我
➤ 專業開發者對於Tailwind的看法
spicyweb.dev/why-tailwind-isnt
網站開發者提到對Tailwind的疑慮,包括對其產生的HTML的不滿,以及@apply的建議和CSS自定性質。
+ 這篇文章很清楚地表達了作者對於Tailwind的看法,讓人深入瞭解了這個開發工具的優勢和缺點。
+ 作者的見解很有建設性,對於理解Tailwind在實際應用中可能出現的問題有了更深入的瞭解。
#Web開發

The Spicy Web · Why Tailwind Isn’t for MeI think the folks building Tailwind are talented and nice people. But at a pure technical level, I simply don’t like Tailwind. Whoever it was built for, it was not built for me.

🌘 表格單元格不正確支持'溢出'
➤ 表格單元格不支援'自動'和'滾動',對於'隱藏'的支援也不正確。
bugzilla.mozilla.org/show_bug.
這是一則關於表格單元格無法正確支持'溢出'的錯誤報告,它不支援'自動'和'滾動',而對於'隱藏'的支援也是不正確的。
+ 這個錯誤報告提供了對於表格單元格遇到問題的具體描述,以及與其他瀏覽器的差異。希望能盡快修復這個問題。
+ 這個問題看來已經存在了很久,希望開發團隊能夠優先處理這個問題,讓網頁開發者可以更順利地進行開發。
#Web開發

bugzilla.mozilla.org221154 - table cells do not support 'overflow' correctlyRESOLVED (emilio) in Core - Layout: Tables. Last updated 2024-01-26.

🌘 用6行Rust代碼提供Web服務
➤ Rust程式語言和Rocket Framework快速搭建靜態網站
jeffmitchelldev.wordpress.com/
Rust程式語言不僅適用於系統開發,使用Rust開發Web服務也很乾淨、無壓力。只需6行Rust代碼,就能使用Rocket Web Framework提供網頁內容。該文章介紹了使用Rust和Rocket Framework快速搭建靜態網站的方法。
+ 該文以簡單易懂的方式介紹了使用Rust和Rocket Framework建立靜態網站的方法,對於想要快速入門Web開發的人來說很有幫助。
+ 這篇文章清晰明瞭地展示瞭如何使用Rust程式語言和Rocket Framework搭建Web服務,對於有興趣學習新技術的讀者來說是一篇有價值的文章。
#Rust程式語言 #Web開發

The Crusty Rustacean · Serving the web…with 6 lines of RustHow to leverage the Rocket web framework to serve a vanilla HTML/CSS/JavaScript site.

🌖 使用Docker Compose和Traefik在多個Web項目上工作
➤ 使用Docker Compose和Traefik在多個Web項目上工作的最佳實踐
georgek.github.io/blog/posts/m
本文介紹瞭如何使用Docker Compose和Traefik在多個Web項目上工作,以及如何使用compose.override.yaml文件和Traefik來解決端口衝突的問題。
+ 這是一篇非常有用的文章,對於正在使用Docker Compose和Traefik的Web開發人員來說,這是一個必讀的文章。
+ 這篇文章非常清晰明瞭,對於初學者來說也很容易理解。我會推薦給我的同事們。
#Docker #Traefik #Web開發

gpk blog · Working on Multiple Web Projects with Docker Compose and TraefikDocker Compose is a brilliant tool for bringing up local development environments for web projects. But working with multiple projects can be a pain due to clashes. For example, all projects want to listen to port 80 (or perhaps one of the super common higher ones like 8000 etc.). This forces developers to only bring one project up at a time, or hack the compose files to change the port numbers.