tailwindcss 系列 Flex Aligin Content
aligin content start 效果 代碼 div class="flex content-start flex-wrap bg-gray-200 h-48" div class="w-1/3 p-2" div class="text-gray-700 text-center bg-gray-400 p-2"1/div /d
昵稱 henry_57bcfc6a67f76
@前端
貢獻者508
粉絲0
貢獻者
@前端
動態 列表
Flex佈局
上一期我整理介紹了grid佈局方式，如果想看的同學，可以直接點擊此文章： Grid佈局 這期我把flex佈局方式筆記也整理出來了，內容是我自己在根據別人視頻學習過程中整理的資料。 目前很多css的框架都使用Flexbox作為基礎。瀏覽器大部分也都兼容。 接下來直接看代碼演示，我們先準備一個素材,準備5個div元素，定義為 ABCDE。因為div默認情況下display是block塊級元素，所
昵稱 貓多少
Flex響應式佈局 ：元素必要時的換行以及讓元素佔滿水平剩餘的空間
item的換行 默認情況下，item都排在一條軸線上： 使用 flex-wrap 可以使一條軸線排不下的情況下換行。 div style="display:flex; flex-wrap:wrap" div style="background-color: yellow; min-width: 200px;height: 200px;"Item 1/div div style="bac
昵稱 Erin
flex佈局製作自適應網頁
網頁佈局是css的一個重點應用。傳統的佈局都是依賴display、position、float屬性來實現的，但是特殊佈局就不易實現，如垂直居中。 01 flex佈局是什麼？ Flex 是 Flexible Box的簡寫，意為“彈性佈局”為盒模型提供最大靈活性。任何一個容器都可以指定為flex佈局。 採用flex佈局的元素，稱為flex容器。他的所有子元素自動成為容器成員，稱為flex項目，簡稱項
昵稱 前端知識搬運工
細説Flexbox 佈局
在響應式設計中，Flexbox 是一種理想的佈局工具。它使得元素能夠根據容器的尺寸自動調整，靈活地填充可用空間。因此，無論是在桌面端還是移動端，Flexbox 都能夠確保佈局自適應、整潔且易於維護。 示例：響應式導航欄 假設我們需要創建一個具有可調節寬度的導航欄，項之間應均勻分佈，並且在小屏幕上時，導航項能夠堆疊在一起： nav class="navbar" a href="#"Home/a
昵稱 玩足球的傷疤
退出歷史舞台的Grunt基本瞭解
Grunt Grunt 生態系統非常龐大，並且一直在增長。由於擁有數量龐大的插件可供選擇，因此，你可以利用 Grunt 自動完成任何事，並且花費最少的代價。如果找不到你所需要的插件，那就自己動手創造一個 Grunt 插件，然後將其發佈到 npm 上吧 Grunt基本使用 yarn add grunt yarn add安裝之後，創建一個gruntfile.js文件，這是grunt的入口文件，用
昵稱 HeiYanjing
前端構建工具技術（介紹篇）
構建工具：俗稱打包。 理解：將模塊文件進行合併，代碼壓縮，整合資源等一系列自動化操作。 為什麼會出現構建工具這項技術？ 我們希望看到頁面加載平滑，快速進行響應。 通過： 1.編寫代碼的邏輯，避免無效浪費內存資源，即優化代碼； 2.優化瀏覽器請求資源的速度； 原因： 首先瀏覽器加載資源 請求的文件數量越多越耗時，文件容量越大越耗時。但是為了我們前端項目結構清晰，我們一般會分成
昵稱 XiaoYu
使用grunt腳本創建新分支
使用grunt 寫一個創建新分支的task 首選安裝必要的修飾庫 npm i ora inquirer chalk --save 編寫task 這一步主要為了給用户展示最近的幾個分支用來判斷新建是否重複，如果不用也可以，那就在拉取的時候通過shell判斷下輸入的分支號是否存在，不存在提示就行 function getBranchCurrent(callback) { exec
昵稱 呼啦星星星
Node 調試利器，前端、Node 開發必備 - VSCode JS Debug Terminal
經常看到有同學抱怨 Node 調試麻煩或者是搞不清怎麼調試各種腳本、Jest、Webpack 等等，而偶爾看到的調試相關的文章又全都是在寫 inspect、launch.json 這些方案，其實有一定學習成本。 而其實在 VSCode 中早已內置了相當無腦的 Debug 方式，就是 JavaScript Debug Terminal，利用它我們只需要負責打斷點，別的什麼 inspect、launc
昵稱 嘿嘿不務正業
vscode調試技巧
由於圖片和格式解析問題，可前往 閲讀原文 在現代前端與全棧開發的日常工作中，代碼調試是不可或缺的一環，而一款優秀的調試工具能夠顯著提升開發效率，減少問題定位的時間成本。Visual Studio Code（簡稱 VSCode）作為一款備受開發者喜愛的輕量化編輯器，不僅提供了豐富的插件生態和高效的代碼編輯體驗，更以其強大的調試功能成為開發者工作流中不可或缺的一部分 無論是調試 Node.js 後端代
昵稱 大衞talk
H5應用抓包及調試技巧
由於圖片和格式解析問題，可前往 閲讀原文 在現代移動互聯網時代，H5 應用以其跨平台、輕量化、快速迭代的特性，成為移動開發的重要一環。然而，隨着功能的複雜化和用户體驗要求的提升，H5應用的調試也面臨着諸多挑戰，如設備多樣性、網絡環境複雜性以及性能瓶頸等。為了應對這些問題，開發者需要掌握不同的調試工具及場景使用才可應對不確定結果。本篇就帶大家瞭解下具體的調試過程 瀏覽器手機模式 瀏覽器的手機模式調試
昵稱 大衞talk
whistle抓包工具及調試技巧
由於圖片和格式的解析問題，可前往 閲讀原文 往期文章我們已經講過fiddler、charles以及wireshark等多種抓包工具，已經在工作中足夠解決各種抓包問題了，但我今天還想再分享給大家一款抓包工具 whistle，因為它真的很優秀，本人在工作中也一直在用這個 為什麼我會選擇whistle，首先是fiddler不支持MacOS，其次Charles在M1芯片上會感覺明顯的卡頓；除此之外是whi
昵稱 大衞talk
記一次樣式 debug
背景 在一個平凡的工作日中，突然有客户説我們產品的彈窗點擊無法顯示，這讓我立刻放下了手裏的活，去看了下線上環境，結果卻是一切正常 這不禁讓我有些奇怪，所以和客户要了截屏，最後發現在客户的電腦上點擊無效，作為一個老開發，第一反應就是兼容性的問題 涉及到公司產品，暫時不能放出對應截圖，不過會用 demo 截圖來代替。 這裏我用 demo 復現的場景： 這是正常的antd modal樣式： 現
昵稱 Grewer
禁止別人調試自己的前端頁面代碼
🎈 為啥要禁止？ 由於前端頁面會調用很多接口，有些接口會被別人爬蟲分析，破解後獲取數據 為了 杜絕 這種情況，最簡單的方法就是禁止人家調試自己的前端代碼 🎈 無限 debugger 前端頁面防止調試的方法主要是通過不斷 debugger 來瘋狂輸出斷點，因為 debugger 在控制枱被打開的時候就會執行 由於程序被 debugger 阻止，所以無法進行斷點調試，所以網頁的請求
昵稱 江户川亮仔
uniapp方式實現視頻播放加密統計
uniapp方式實現視頻播放加密統計 在移動應用開發中，視頻播放功能是常見的需求之一，而視頻內容的加密保護和統計則成為了開發者需要關注的問題。本文將分享如何使用uniapp結合視頻雲點播插件，實現視頻播放的加密和統計功能。 環境準備 在開始之前，請確保你已經安裝了HBuilderX，並創建了一個uniapp項目。接下來，你需要從插件市場購買並下載視頻雲點播插件。 集成插件 購買插件：在插件市場
昵稱 Conan
關於tsup工具構建項目庫使用過程
最近一直在寫前端項目、然後又使用strapi在寫後端服務，在使用到加解密這快內容，相同的代碼需要複製粘貼，索性寫一個工具吧，於是帶着研究，百度了一番，目前常見的工具有webpack、vite、rollup，相對主流的vite和rollup目前比較流行，webpack實在是卡頓 於是我又找找看看，又翻翻看，看到了tsup，構建方式簡單，不用繁瑣的配置，這不正是我想要的嘛 介紹一下tsup t
昵稱 羊先生
3.vue請求數據
請求數據的方式： vue-resource 官方提供的 vue的一個插件 axios fetch-jsonp vue-resource的使用 使用步驟： 1、安裝vue-resource模塊 cnpm install vue-resource --save 2、在 main.js 引入 vue-resource import VueResource from 'vue-reso
昵稱 樑柱
使用Workbox創建PWA應用
前言 最近公司項目迭代逐漸放緩，下班時間逐漸變早，所以本着漸進增加的理念，在下班後，將公司項目進行了一下PWA改造 為何要改造成PWA 用户需求。我們的用户有許多電腦小白，不想記網址，又不會使用瀏覽器的收藏功能。以前使用的同類軟件都有桌面版，有一種覺得桌面版比網頁版可靠，使用簡單的錯覺，曾多次在釘釘售後羣裏反映，如何將網頁保存至桌面，方便他下次直接在桌面打開 PWA是漸進式的，如果用户的瀏覽
昵稱 悖論BeilunYang
2020 年 Chrome 開發者峯會的亮點
2020 年的Chrome 開發者峯會和往年有所不同，今年是在線上召開的，每次談話大約十分鐘，討論規模更大。雖然我沒有在第一時間觀看會議的直播，但是看回放也不會錯過這些亮點。 所有的回放在這裏：https://developer.chrome.com/... 通過“Core Web Vitals”簡化了性能指標 我們都知道 Chrome 有大量的性能指標，可以用它們來跟蹤關於網站性能的所有內容。儘
昵稱 瘋狂的技術宅
天人合一物我相融，站點升級漸進式Web應用PWA(Progressive Web Apps)實踐
原文轉載自「劉悦的技術博客」https://v3u.cn/a_id_216 PWA（Progressive web apps，漸進式 Web 應用）使用現代的 Web API 以及傳統的漸進式增強策略來創建跨平台 Web 應用程序，説白了，PWA可以讓我們的站點以原生APP的形式運行，但相比於安裝原生APP應用，訪問PWA顯然更加容易和迅速，還可以通過鏈接來分享PWA應用。 有許多知名的網絡平台已
昵稱 劉悦的技術博客
PWA 圖標顯示問題，兼顧 macOS、Windows、iPad
首先看macOS任務欄的圖標規律： 會發現第三個：YouTube Music（PWA版本）的圖標很不對勁，不是因為它是圓形，其他都是方形。而是它很大，寬高明顯大過其他圖標。在我對比了VSC和YouTube Music的圖標圖片之後發現了區別所在： 上面看不明顯的話，這麼對比看就明顯了： 解釋下，圖3是圖2在控制枱（F12）資源那裏顯示的圖片，之所以看這個是因為可
昵稱 林水溶
面向邊緣場景的PWA實踐
背景 隨着5G技術的發展，物聯網邊緣側主要應用於數據傳輸量大、安全要求高以及數據實時處理等行業與應用場景中。其中，邊緣計算是一種分佈式計算模式，其將計算資源和數據處理能力推向接近數據源的邊緣設備，以減少延遲並提高響應速度。 對前端領域而言，面對邊緣場景下的應用開發也發生了相應的變化，其通常需要考慮邊緣側與終端側的實現方式，並且還需考慮相較於傳統 B/S 架構下的部署方案。本文旨在通過工業互聯網場
昵稱 維李設論
PWA 離線方案研究報告 | 京東雲技術團隊
本文並不是介紹如何將一個網頁配置成離線應用並支持安裝下載的。研究PWA的目的僅僅是為了保證用户的資源可以直接從本地加載，來忽略全國或者全球網絡質量對頁面加載速度造成影響。當然，如果頁面上所需的資源，除了資源文件外並不需要任何的網絡請求，那它除了不支持安裝到桌面，已經算是一個離線應用了。 什麼是PWA PWA（Progressive Web App）是一種結合了網頁和原生應用程序功能的新型應用程序開
昵稱 京東雲開發者
對於企業軟件系統而言，唯一重要的架構設計是什麼
相對於系統軟件而言，企業軟件往往是面向應用場景、業務邏輯。雖然很多工程師、架構師會面帶嚴峻表情的告訴你，軟件項目所要保障的高可用性、魯棒性、可擴展性、高併發性、低延遲性、安全性、可測試性、靈活性，是如何如何的重要，彷彿一套只有幾個部門三五十人用的軟件系統，其架構也得是多麼科學、嚴謹、隆重的經歷一系列的設計、論證、測試，姿勢拉好、儀式感滿滿。 但現實中，多少企業的軟件系統是由代碼屎山堆成，多少IT運
昵稱 陳小西