Programming Language
貢獻者53
粉絲0
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 為何網站要升級為https 原因有以下幾點: 1. 避免瀏覽器的不安全的警告 瀏覽器對於http的網站會在地址欄明確標記【不安全】字樣 這樣直接降低用户對網站的信任度 造成用户流失 甚至可能被用户誤認為是釣魚網站 如下圖，是筆者的網站沒有升級https證書的時候的樣子 升級後的 2. 加密傳輸數據，防止數據泄露
昵稱 林恆
navigator.mediaDevices.getUserMedia只有在https或者localhost下使用。 如果需要再http協議下使用navigator.mediaDevices.getUserMedia，需要打開不安全的配置。 火狐瀏覽器打開多媒體不安全的配置： chomre打開不安全配置： 瀏覽器輸入chrome://flags/ 搜索Insecure o
昵稱 任天鏜
上一期我整理介紹了grid佈局方式，如果想看的同學，可以直接點擊此文章： Grid佈局 這期我把flex佈局方式筆記也整理出來了，內容是我自己在根據別人視頻學習過程中整理的資料。 目前很多css的框架都使用Flexbox作為基礎。瀏覽器大部分也都兼容。 接下來直接看代碼演示，我們先準備一個素材,準備5個div元素，定義為 ABCDE。因為div默認情況下display是block塊級元素，所
昵稱 貓多少
本文並不是介紹如何將一個網頁配置成離線應用並支持安裝下載的。研究PWA的目的僅僅是為了保證用户的資源可以直接從本地加載，來忽略全國或者全球網絡質量對頁面加載速度造成影響。當然，如果頁面上所需的資源，除了資源文件外並不需要任何的網絡請求，那它除了不支持安裝到桌面，已經算是一個離線應用了。 什麼是PWA PWA（Progressive Web App）是一種結合了網頁和原生應用程序功能的新型應用程序開
昵稱 京東雲開發者
1、PWA應用介紹 PWA 是一種通過現代 Web 技術提供類似原生應用體驗的 Web 應用。它的核心特性包括： 可離線訪問：通過 Service Worker 實現離線緩存快速加載 利用緩存策略加速資源加載可安裝 用户可以將 PWA 添加到主屏幕，像原生應用一樣使用響應式設計 適配各種設備屏幕 PWA 的核心技術包括： Service Worker：用於攔截網絡請求、管理緩存
昵稱 PatWu16
上篇文章整理了PWA離線應用的技術脈絡和注意事項，本篇文章將記錄使用Vue + Workbox + localforage 實現離線應用的實踐過程。 一、Vue工程改造 Vue CLI 提供了一個官方的 PWA 插件，可以快速為 Vue 項目添加 PWA 支持。運行以下命令安裝插件： // 在vue工程目錄下執行如下命令 vue add pwa 安裝完成後，插件會自動生成以下文件： src/
昵稱 PatWu16
Java 將 Excel 轉換為 HTML：解鎖數據在線展示的無限可能 在當今數據驅動的時代，Excel 作為數據存儲和分析的利器，幾乎無處不在。然而，當我們需要將這些精心組織的數據在 Web 應用中展示、跨平台分享，或實現自動化報表生成時，傳統的 .xlsx 或 .xls 文件往往顯得力不便。它要求用户安裝特定的辦公軟件，且在不同設備上的顯示效果可能不盡相同，更難以與 Web 系統無縫集成。 這
昵稱 Lu_Lu
如果你想通過獨立站拿詢盤獲取訂單，那麼必須先要有一個自己的網站，所以建站是你繞不過去的一件事。對於零基礎的新手小白來説，如何從零開始搭建一個B2B外貿網站呢？本文將為你提供一份詳細的WordPress外貿建站教程，幫助你從零開始搭建一個專業的B2B外貿網站。 展示效果 這是花了不到一小時搭建的一個B2B外貿網站， 哪怕你是不懂任何代碼的新手，對於網站搭建方面也一無所知，跟着本教程也可以輕鬆做出來。
今天解析來自John Rosato的一篇文章“What is document flow?”，什麼是文檔流？ 開頭是摘要： 文檔流是由 CSS 定位語句定義的頁面元素的排列，以及 HTML 元素的順序。 也就是説，每個元素如何佔用空間以及其他元素如何相應地定位自己。 簡單點説，就是 document flow 指示了頁面上的元素如何去排列。 接着，講到了 document flow 的三種影響元
昵稱 compose_hub
本文翻譯自 CSS Grid and Custom Shapes, Part 1，略有刪改 在正常的開發中，我們會遇到很多元素塊排列對齊的需求，如九宮格抽獎，多張圖片上傳後等分佈局預覽，微信朋友圈多張圖片展示等。這都是正常的正方形很規整的佈局。 如下所示，如果圖像不是完全正方形，而是形狀像六邊形或菱形怎麼辦？我們怎麼做呢。事實上，我們將結合我們已經研究過的 CSS 網格技術，並加入一些 CSS c
昵稱 南城FE
在前端的面試中，相對JavaScript而言，CSS佈局方面考察的內容會相對少一些，其中BFC是佈局樣式方面常考的一個考點。 什麼是BFC BFC，全稱為Block Formatting Context，翻譯過來即塊格式化上下文。 之前在其他文章中看到的説明是，網頁上一個獨立且隔離的渲染區域。現在呢，我稍微查閲了一些官方的信息。 在瞭解BFC之前，我們需要先了解一些其他概念： 包含塊（contai
昵稱 beckyyyy
手動擋經常會改不齊全，發現能寫正則還是很方便的。 find replace調出替換面板 也可以快捷鍵 command+alt+F 這個引用到複雜點的數據裏面 真的省事不要太多 方便不要太多 我知道得太遲了。。。。。。 mark一下 僅供參考 歡迎更正補充 end
昵稱 Jerry
本文首發於知乎《10分鐘徹底搞懂前端頁面性能監控》，搬運轉載請註明出處，否則追究版權責任。 前言 前端頁面性能是一個非常核心的用户體驗指標。本文介紹阿里UC 嶽鷹全景監控平台 如何設計一個通用、低侵入性、自動上報的頁面性能監控方案。主要採用的是Navigation Timing API以及sendBeacon等方法。 為什麼要監控頁面性能？ 一個頁面性能差的話會大大影響用户體驗。用户打開頁面等待的
昵稱 Marks
總體原則：極簡、極快、解耦 主要適用範圍：vue 單頁項目+ 文件組織規範 文件結構 原則：文件少、層級淺、資源集中、相對獨立互不影響 基本結構： . |_ node_modules |_ dist |_ src |_ assets // 公共資源 |_ img // 全局圖片 |- favicon.png |- comm
昵稱 前端一鍋煮
最近一段時間留意到一個叫Svelte的前端框架，它與Vue 等前端框架的最大不同是採用了編譯的方案進行的實現，這是官網的介紹 Svelte 是一種全新的構建用户界面的方法。傳統框架如 React 和 Vue 在瀏覽器中需要做大量的工作，而 Svelte 將這些工作放到構建應用程序的編譯階段來處理。 與使用虛擬（virtual）DOM 差異對比不同。Svelte 編寫的代碼在應用程序的狀態更改時就
昵稱 yangrd
隨着教育信息化與數字化轉型的加速推進，傳統線下考試模式正面臨效率瓶頸與場景侷限。組織大規模考試時，試卷印製、考場安排、人工監考及成績統計等環節耗費大量資源，且難以應對突發情況。在此背景下，在線考試答題系統應運而生，成為重塑教育評估體系的核心工具。 源碼及演示：zx.xcxyms.top 在線考試答題系統需覆蓋多端使用場景，包含題庫管理、在線答題、成績統計、錯題分析等核心功能。目標用户包
昵稱 行走的打火機
前端進階（1）Web前端性能優化 Web前端性能優化, 不僅能夠改善站點的用户體驗，並且能夠節省相當的資源利用。下面將從1）服務器、2）html內容、3）css、 4）javascript、 5）圖片等幾方面介紹具體的優化操作。 1. 服務器優化 1.1. 使用內容分發網絡（CDN） 把網站內容分散到多個、處於不同地域位置的服務器上可以加快下載速度。 1.2. 服務器使用http2.0協議 Htt
昵稱 Jack_N
歡迎關注我的公眾號：前端偵探 介紹一個全新的、和用户行為息息相關的屬性：inert。 HTMLElement.inert - Web APIs | MDN (mozilla.org) 有了這個屬性，可以更加輕易地控制很多交互行為，花幾分鐘瞭解一下吧 一、inert 是什麼？ inert是 HTMLElement 的一個布爾屬性，意為"惰性"，簡單來説，可以禁用一切交互，包括鼠標點擊、選中、拖
昵稱 XboxYan
HTML DOM 簡介 HTML DOM 定義了訪問和操作 HTML 文檔的標準。 什麼是 DOM？ DOM 是 W3C（萬維網聯盟）的標準。 DOM 定義了訪問 HTML 和 XML 文檔的標準： "W3C 文檔對象模型 （DOM） 是中立於平台和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。" W3C DOM 標準被分為 3 個不同的部分： • 核心 D
昵稱 阿里雲開發者
一： HTML DOM 1.HTML DOM：文檔對象模型 JS操作HTML文檔的接口，JS改變頁面中的所有HTML元素、HTML屬性、CSS樣式，對所有世間做出反應;DOM是JS操作HTML和CSS的橋樑。 樹型結構 eg: 2.nodeType 1 元素節點 3 文字節點 8 註釋節點 9 docunment節點 10 DTD節點
昵稱 茶色島
導讀 本文主要針對常用跨端技術Flutter、ReactNative、Weex、H5，從技術特點、基本架構、編譯原理、基本渲染流程等進行梳理分析；以及一些常見性能問題如何優化解決，然後如何進行技術選型或在進行業務開發時選擇不同技術棧的邏輯是什麼。 01 背景 在今年的敏捷團隊建設中，我通過Suite執行器實現了一鍵自動化單元測試。Juint除了Suite執行器還有哪些執行器呢？由
昵稱 京東雲開發者
一、背景 使用過Redis的同學肯定都瞭解過一個説法，説Redis是單線程模型，那麼實際情況是怎樣的呢？ 其實，我們常説Redis是單線程模型，是指Redis採用單線程的事件驅動模型，只有並且只會在一個主線程中執行Redis命令操作，這意味着它在處理請求時不使用複雜的上下文切換或鎖機制。儘管只是單線程的架構，但Redis通過非阻塞的I/O操作和高效的事件循環來處理大量的併發連接，性能仍然非常高。
昵稱 得物技術
這裏主要用到button的open-type功能，官網已有説明： 給button設置open-type="chooseAvatar"，來使bindchooseavatar方法生效，在bindchooseavatar指定的函數中獲取用户的頭像信息 button open-type="chooseAvatar" bindchooseavatar="chooseavatar"/b
昵稱 兔子先森
前言 我們的圖像標註系統中，標註的時候，每人需要一個容器（docker），需要把數據推到去LabelStudio裏面去標註，利用webhook回推標註好的數據。 Canvas的使用，當選中某個矩形框的時候，會變成藍色。 畫布大小 設置的是，圖片有多大，畫布就有多大,然後以畫布的中心點對齊。默認是左上角對齊 this.ctx.drawImage(this.image, -this.image
昵稱 zZ_jie
