Contributes66
Followers0
所有源代碼、文檔和圖片都在 github 的倉庫裏，點擊進入倉庫 相關閲讀 React服務端渲染之路01——項目基礎架構搭建 React服務端渲染之路02——最簡單的服務端渲染 React服務端渲染之路03——路由 React服務端渲染之路04——redux-01 React服務端渲染之路05——redux-02 React服務端渲染之路06——優化 React服務端渲染之路07—
Nickname karuru
背景 公司中有多個項目需要同時開發 PC 端和 H5 端，大部分地方邏輯和交互比較類似，主要是樣式上有些區別。為了更好地複用代碼、提高開發效率，經過一段時間的實踐後，我們總結出這套 React Hook 和 SCSS 結合、px 和 vw 共存的響應式佈局方案。 基礎代碼 創建項目 首先，我們來創建一個項目，這裏我用的是 Create React App，選擇了 typescript 模板，通過以
Nickname heruns
使用 scss 的變量，集合和 mixin ，定義mixin 函數，輕鬆處理媒介查詢 源碼 // 定義 map 和 mixin $breakpoints: ( 'phone': (320px, 480px), 'pad': (481px, 768px), 'laptop': (769px, 1920px), 'desktop': (1921, 3440px), 'tv': 34
Nickname today
本文翻譯自 CSS Nesting，作者：Ahmad Shadeed， 略有刪改。 如果你是一個前端開發人員，那麼你應該使用過CSS預處理器以及預處理器中的嵌套特性。它一直是一個受歡迎的功能，我一直都在使用CSS預處理器。 今年所有的主流瀏覽器都支持原生CSS嵌套：Chrome、Firefox和Safari。這是一個重要的CSS功能，這將使編寫CSS更加容易。在本文中我將記錄到目前為止我所學到的關
Nickname 南城FE
使用 Python 將網頁轉換為 PDF 有時您需要離線訪問網頁，使其更易於訪問。因此，將HTML頁面轉換為PDF即可滿足您的需求。令人驚訝的是，您可以在幾秒鐘內在 Python 項目中啓用 HTML 到 PDF 的轉換。本指南將為 Python 開發人員介紹一個功能強大的 SDK——Aspose.HTMLfor Python via .NET，它提供了一系列用於將網頁轉換為不同文件格式的類和方
Nickname IT開發者筆記
在這個人工智能時代，Markdown因其易用性而備受重視。這種標記語言易於人類和機器理解。此外，與 HTML 和 DOCX 相比，這種格式更有助於法學碩士 (LLM) 理解文檔結構。因此，本指南將介紹如何以 Python 編程方式將HTML轉換為 Markdown。我們將使用Aspose.HTML for Python via .NET，因為它易於在 Python 項目中設置。這款 Python
Nickname IT開發者筆記
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 npm link 詳解：本地包開發與測試的利器 什麼是 npm link？ npm link 是 npm 提供的一個強大功能，它允許你在本地開發環境中創建符號鏈接，將本地開發的包鏈接到其他項目中進行測試和使用。這個功能特別適合在開發自己的 npm 包時進行本地調試和測試。 核心概念 符號鏈接（Symbolic
Nickname 林恆
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 在 React 開發中，我們經常需要根據窗口大小來調整組件的行為。今天我們將從最簡單的實現開始，逐步優化，最終構建出一個高性能的useWindowSizeHook。 第一步：最簡單的實現 讓我們從最基礎的版本開始： import { useState, useEffect } from 'react' function useW
Nickname 林恆
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 啊！！！Blob 居然這麼強大！ 在前端開發的世界裏，我們每天都在和各種 API、對象和數據打交道。然而，有一個對象，常常被我們忽視，卻又在背後默默支撐着許多關鍵功能 —— 它就是 Blob。 Blob（Binary Large Object）聽起來像是一個“冷門”對象，但實際上，它幾乎無處不在：文件上傳、下載、視頻
Nickname 林恆
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 什麼是瀏覽器指紋？ 瀏覽器指紋，是用來唯一標識你瀏覽器的一組“特徵值”。它不是我們理解中的那種真實指紋，而是通過收集瀏覽器、操作系統、設備分辨率、字體、插件等信息，組合成的一個獨特 ID。 和傳統的 Cookie 不同，瀏覽器指紋不需要在用户設備上存儲任何東西，完全是“讀取現有信息”來識別用户。 使用背景 在最近的項目
Nickname 林恆
問題描述 在學udemy的htmlcss課的時候，challenge2有一部分是給超鏈接添加margin-top/bottom,添加後瀏覽器devtool的樣式中顯示margin已生效，但是在頁面中卻無法顯示。 解決過程 搜索margin不生效的幾個原因可以總結為 parent box 放不下 上下相鄰的塊產生margin摺疊 但是前者一般對parent中頭尾的child產生影
Nickname wdllmh
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 環境配置 系統：windows10 平台：HBuilderX4.76 語言：vue、javascript 庫：uni 概述 本文是基於uniapp，編寫的自定義日期選擇器組件，大致效果如下： 1、組件簡介 這是一個日期選擇器，即可以選擇年、月、日的組件，所以，組件的功能是很簡單的，組件的效果就是如上面的效果圖所
Nickname 林恆
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 一、引言：為何選擇微前端？ 在傳統單體前端架構中，隨着業務複雜度增加，代碼臃腫、協作困難、部署效率低等問題愈發突出。微前端通過將項目拆分為多個獨立自治的微應用，解決了這些問題： 技術棧無關：支持 Vue、React、Angular 等框架混合開發 獨立部署：各團隊可獨立開發、測試、發佈 漸進升級：允許逐步重構舊系統 動態加載
Nickname 林恆
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 情況説明 主系統單點登錄點擊觸發window.open()打開本系統。 是發佈生產後的新需求：要求退出登錄後直接關閉當前系統頁面。 本地運行增加了window.close()方法實現功能，點擊退出後頁面沒反應。 排查過程 官方解析中説明，window.close() 方法只能關閉由window.open()或者瀏覽器直接輸入
Nickname 林恆
scss 轉 css 在線轉換 https://33tool.com/scss_to_css/ 變量 $primary-color: #000; .main1 { background-color: $primary-color; } 一、嵌套 1.1 父選擇器 (Referencing Parent Selectors: ) 在嵌套 CSS 規則時，有時也需要直接使用嵌套外層的父選
Nickname 【唐】三三
在 CSS 中，transition 是用於實現元素樣式平滑過渡的屬性，能讓元素從一種樣式狀態（如顏色、尺寸、位置等）逐漸變化到另一種狀態，避免樣式突變帶來的生硬感。它是實現基礎動畫效果的核心工具，廣泛用於 hover 交互、狀態切換等場景。 一、transition 核心語法 transition 是一個複合屬性，可以同時定義過渡的多個參數，語法如下： css transition: [過渡屬性
Nickname 【唐】三三
🧑💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 為何網站要升級為https 原因有以下幾點: 1. 避免瀏覽器的不安全的警告 瀏覽器對於http的網站會在地址欄明確標記【不安全】字樣 這樣直接降低用户對網站的信任度 造成用户流失 甚至可能被用户誤認為是釣魚網站 如下圖，是筆者的網站沒有升級https證書的時候的樣子 升級後的 2. 加密傳輸數據，防止數據泄露
Nickname 林恆
這並不是一篇網絡上氾濫的“前端體積優化”文章。 百尺竿頭，更進一步！本文以我的博客為例，介紹極限控制頁面體積的奇技淫巧。 成果預覽 眼見為實，本人博客首頁 的網絡傳輸總體積為 2.6 KB。 本人的博客 Repo 在 kblog - GitHub，喜歡就給個 Star 唄~ 需求精簡 平淡無奇的頁面，體積再小，也不足為奇。我需要： 單頁面（SPA）。 使用 Material
Nickname kkocdko
LayoutUnit Subpixel Layout 引言 為了更好的支持移動端和 PC 端的縮放，WebKit 增加了subpixel layout（次像素/亞像素佈局）為此他們還改變了 rendering tree。一個次像素單元在 WebKit 內被稱為 LayoutUnit 用於取代之前使用整數來佈局一個元素在頁面中位置和大小。從 2013 年開始 WebKit 就已經開啓了這個 fla
Nickname Jiavan
這篇文章是關於什麼的 相信大家對於 web 版的線上聊天室都不陌生，這篇文章主要講的就是如何使用 Socket.io 和 React 開發一下簡單的線上聊天應用。 所謂線上聊天應用，就是你給一個人或者一個羣發送一條消息，他們可以看到這條消息並且可以回覆。既簡單又複雜。 開發一個聊天室應用，你需要在新信息來到的時候及時的感知到。 通常來説，為了獲得服務端的信息，我們需要發送一個 HTTP 請求。但是
Nickname superZidan
作者：京東零售劉偉東 此文為系列文章第一篇，為淺嘗輒止的引入，目的是為了讓前端從業人員及非從業但是對此領域感興趣的人對於”前端“是幹什麼的這個話題有個無門檻的瞭解。 “前端職能是什麼” 説起"前端"，維基百科對這個技術角色的定位是“前端（英語：front-end）和後端（英語：back-end）是描述進程開始和結束的通用詞彙。 前端作用於採集輸入信息，後端進行處理。 計算機程序的界面樣式，視
Nickname 京東雲開發者
用到的知識點： （1）input type="file"標籤 （點擊閲讀參考資料） （2）利用addEventListener()事件監聽input type='file'改變（點擊閲讀參考資料） （3）利用HTML5FileReader()中的.readAsDataURL()方法將圖片url轉為Base64位碼（點擊閲讀參考資料） （4）FileReader.onload(
Nickname 顧昀峯
中文網字計劃是收錄眾多中文字體並通過 Web Font 的形式為 網站開發者 提供美麗字體的項目。 中文網字計劃致力於在互聯網中提供更加便捷實用的全字符集中文渲染方案。中文網字計劃通過精巧設計的字體分包方式，將龐大的字體文件切割為多個小型靜態分包部署於雲端，在全網領域內都可快捷、穩定地進行加載。為提高中文字體在網絡中的流通體驗而努力！ 為什麼要使用獨特的中文字體 提高藝術風格的表現力
Nickname shoyuf
上一期我整理介紹了grid佈局方式，如果想看的同學，可以直接點擊此文章： Grid佈局 這期我把flex佈局方式筆記也整理出來了，內容是我自己在根據別人視頻學習過程中整理的資料。 目前很多css的框架都使用Flexbox作為基礎。瀏覽器大部分也都兼容。 接下來直接看代碼演示，我們先準備一個素材,準備5個div元素，定義為 ABCDE。因為div默認情況下display是block塊級元素，所
Nickname 貓多少
