【現代 CSS】標準滾動條控制規範 scrollbar-color 和 scrollbar-width

Chrome 在 121 版本開始,原生支持了兩個滾動條樣式相關的樣式 scrollbar-color 和 scrollbar-width。 要知道,在此前,雖然有 ::-webkit-scrollbar 規範可以控制滾動條,可是,::-webkit-scrollbar 是非標準特性,在 MDN 文 ...

Tailwind CSS 實戰指南:快速構建響應式網頁設計

這篇文章介紹了Tailwind CSS框架的特點與優勢,包括其作為實用性的CSS框架如何通過預設的樣式類實現快速佈局和設計,以及如何在不犧牲響應式和自適應性的同時減少開發時間。此外,還提及了框架的可定製性,允許開發者輕鬆創建符合項目需求的樣式規則,從而提高前端開發效率。 ...

記錄--前端實現文件預覽(word、excel、pdf、ppt、xmind、 音視頻、圖片、文本) 國際化

‍ 寫在開頭 點贊 + 收藏 學會 前言 在這之前公司項目的文檔預覽的方式都是通過微軟線上預覽服務,但是微軟的線上服務有文件大小限制,想完整使用得花錢,一些圖片文件就通過組件庫antd實現,因為我們項目存在多種類型的文件,所以為了改善用戶的體驗,決定把文件預覽單獨弄一個拆出一個項 ...

前端微服務架構qiankun初體驗

我們是袋鼠雲數棧 UED 團隊,致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神,探索前端道路,為社區積累並傳播經驗價值。 本文作者:修能 這是一段平平無奇的 SQL 語法 SELECT id, sum(name) FROM student GROUP BY id ORDER BY id; ...

Tailwind CSS 響應式設計實戰指南

這篇文章介紹瞭如何運用Tailwind CSS框架創建響應式網頁設計,涵蓋博客、電商網站及企業官網的佈局實例,包括頭部導航、內容區域、側邊欄、頁腳及輪播圖等組件的響應式實現。同時,探討了與JavaScript框架集成、CSS預處理器配合、設計工具應用以及伺服器端渲染的策略,並提供了性能優化、代碼組織... ...

記錄--Vue 網頁全屏

‍ 寫在開頭 點贊 + 收藏 學會 在後臺系統中有一種常見的功能,點擊按鈕將整個網頁全屏,再點擊退出全屏。 瀏覽器提供了2種全屏方式,一種通過API在js中實現,另一種是按F11鍵進入全屏模式。 但F11進入的全屏模式優先順序更高,無法通過API退出。 基本知識 元素全屏 檢查可用 ...

RSS 解析:全球內容分發的利器及使用技巧

RSS(Really Simple Syndication)是一種 XML 格式,用於網站內容的聚合和分發,讓用戶能快速瀏覽和跟蹤更新。RSS 文檔結構包括 `<channel>` 和 `<item>` 元素,允許內容創作者分享標題、鏈接和描述。通過 RSS,用戶可以定製新聞源,過濾不相關信息,提高... ...

有點東西,template可以直接使用setup語法糖中的變數原來是因為這個

你知道為什麼setup語法糖中的頂層綁定可以在template中直接使用的呢?setup語法糖是如何編譯成setup函數的呢? ...

清新優雅&高顏值!一個基於Vue3實現的後臺管理模板

SoybeanAdmin —— 一個清新優雅、高顏值且功能強大的後臺管理模板。基於最新的前端技術棧,包括 Vue3、 Vite5、 TypeScript、 Pinia 和 UnoCSS。 ...

Angular 集成 StreamSaver 大文件下載

應用場景: 實現目標: 在網頁端實現大文件(文件大小 >= 2 G) 斷點續傳 實際方案: 發送多次請求, 每次請求一部分文件數據, 然後通過續寫將文件數據全部寫入. 難點: 無法實現文件續寫, 最後採用 StreamSaver 來解決這個問題. 1. 首先從 git hub 將 StreamSav ...

Vue 3深度探索:自定義渲染器與服務端渲染

這篇文章介紹瞭如何在Vue框架中實現自定義渲染器以增強組件功能,探討了虛擬DOM的工作原理,以及如何通過SSR和服務端預取數據優化首屏載入速度。同時,講解了同構應用的開發方式與狀態管理技巧,助力構建高性能前端應用。 ...

記錄--N 個值得一看的前端代碼片段

‍ 寫在開頭 點贊 + 收藏 學會 在日常的開發過程中,我們都會有一些常用的代碼片段,這些代碼片段可以直接複製到各個項目中使用,非常方便。如果你有接手過別人的項目,就可以很明顯感受到幾個項目一般都會有一些相同的工具類方法,這些方法就是之前開發者的常用代碼片段。 現在前端社區相當完 ...

Vue微前端架構與Qiankun實踐理論指南

這篇文章介紹了微前端架構概念,聚焦於如何在Vue.js項目中應用Qiankun框架實現模塊化和組件化,以達到高效開發和維護的目的。討論了Qiankun的原理、如何設置主應用與子應用的通信,以及如何解決跨域問題和優化集成過程,從而實現前端應用的靈活擴展與組織。 ...

隨便寫的小網頁練習

隨便寫的小網頁練習: 原視頻:十分鐘學會寫網頁【編程前端入門】 簡介: 本期重做了好幾遍,是全新的視角和概念,從瀏覽器底層渲染原理到實現網站的演示,一節課講透,必看的一期。後面不管是寫小程式還是App,都會用到這一期的概念。 這一期內容是我做完第一章個人網站後更新的,用來替代原先沒做好的第三節, ...

探索Web Components

這篇文章介紹了Web Components技術,它允許開發者創建可復用、封裝良好的自定義HTML元素,並直接在瀏覽器中運行,無需依賴外部庫。通過組合HTML模板、Shadow DOM、自定義元素和HTML imports,Web Components增強了原生DOM的功能,提高了組件化開發的封裝性和... ...

高級前端開發需要知道的 25 個 JavaScript 單行代碼

1. 不使用臨時變數來交換變數的值 2. 對象解構,讓數據訪問更便捷 3. 淺克隆對象 4. 合併對象 5. 清理數組 6. 將 NodeList 轉換為數組 7. 檢查數組是否滿足指定條件 8. 將文本複製到剪貼板 9. 刪除數組重覆項 10. 取兩個數組的交集 11. 求數組元素的總和 12. ... ...

[JS] 動態執行JS與修改詞法作用域

JS中有一些操作可以動態地執行JS代碼,並修改或新建詞法作用域,這種操作雖然帶來了更多的靈活性,但是會嚴重地影響到性能。 ...

安裝 Nuxt.js 的步驟和註意事項

摘要:本文闡述了Nuxt.js作為基於Vue.js的伺服器端渲染框架,其在提升Web開發效率、確保代碼質量和優化應用性能方面的核心價值。通過詳盡的安裝步驟、配置說明、常見問題解決策略及進階部署方法,為開發者搭建和部署Nuxt.js項目提供了全方位指導。 ...

一周排行
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...