整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
同瀏覽器對(duì)網(wǎng)頁默認(rèn)的組件解析樣式不一致，而且不夠美觀，網(wǎng)頁樣式開發(fā)需要大量時(shí)間，今天介紹一款優(yōu)雅的 CSS 框架。
Pico.css 是一個(gè)簡(jiǎn)單輕量化的 CSS UI 框架，最大的特點(diǎn)是樣式都基于 HMTL 原始的標(biāo)簽名和內(nèi)置的屬性，少用甚至是不用 class 來定義樣式，寫出來的代碼語義清晰，可維護(hù)性強(qiáng)，能夠幫助開發(fā)者構(gòu)建自己的 UI 系統(tǒng)，也可以直接用于快速的小型項(xiàng)目中。
Pico-css 官網(wǎng)
截止發(fā)文日期，Pico.css 在 Github 上已經(jīng)有高達(dá) 3898 個(gè) Star。
引入 Pico.css 最簡(jiǎn)單直接的方式就是下載后直接引入一個(gè)樣式文件：
Pico-css cdn 引入
當(dāng)然也可以通過 npm 安裝：
Pico-css npm 安裝
然后就可以編寫 html 代碼了。
想要做一個(gè)輸入框和提交表單，往往需要這樣的代碼：
常規(guī)實(shí)現(xiàn) form 表單代碼
而使用 Pico.css，只需要：
Pico-css 實(shí)現(xiàn)表單
Pico.css 內(nèi)置了很多基礎(chǔ)的組件，包括常用表單控件、表格、彈窗、導(dǎo)航菜單、卡片等，代碼非常簡(jiǎn)潔，比如實(shí)現(xiàn)一個(gè)美觀的進(jìn)度條，只需要這點(diǎn)代碼：
Pico-css 實(shí)現(xiàn)進(jìn)度條
Pico.css 內(nèi)置了淺色和深色兩套主題，使用方法非常簡(jiǎn)單，給父級(jí)元素添加屬性data-theme。
切換主題
官網(wǎng)還有很多代碼例子，比如編寫一個(gè)美觀大氣的登錄界面，html 代碼十分簡(jiǎn)潔，仿佛回到了剛剛開始學(xué)習(xí) html 語法的時(shí)代。
登錄界面
通過 CSS 文件的源碼，可以看到樣式的選擇器大多通過 HTML 元素標(biāo)簽名、內(nèi)置的屬性以及自定義屬性來命中，這樣就規(guī)避了常規(guī)的只使用 class 來區(qū)分的“命名地獄”，是一種非常好的網(wǎng)頁編程思路。
Pico-css 源碼
面向?qū)兇?HTML 有極致追求的開發(fā)者，Pico.css 還提供了 classless 版本，這個(gè)版本將一個(gè) class 都沒有，完全使用元素標(biāo)簽名和屬性編寫網(wǎng)頁。
在項(xiàng)目中使用 Pico.css 源自于一次快速的營(yíng)銷頁需求，需要做簡(jiǎn)單的幾個(gè)帶有輸入交互的頁面，使用 bootstrap 這樣龐大的框架顯然有點(diǎn)笨重了，如果使用當(dāng)前流行的能夠按需引入的 Vue UI 組件庫，又免不了要用 Vue.js 來工程化。只是做幾個(gè)簡(jiǎn)單的頁面，沒有必要用中大型項(xiàng)目的標(biāo)配，考慮到目前市面上大多數(shù) UI 框架都過度封裝，堆疊了很多包含各種語義的 class 名，不僅會(huì)讓頁面加載變慢，而且會(huì)導(dǎo)致更長(zhǎng)的樣式計(jì)算時(shí)間，最終還是找到了適合這樣場(chǎng)景的 Pico.css。
css 樣式的寫法很自由，目前前端開發(fā)存在一個(gè)趨勢(shì)，為了做精美的界面，需要花費(fèi)大量的時(shí)間來寫樣式，為了樣式可以復(fù)用，絞盡腦汁給 class 起名字，甚至網(wǎng)上還有各種 class 命名規(guī)范，這可能導(dǎo)致了大量的樣式被覆蓋，很多時(shí)候 class 屬性的名稱，甚至比樣式的代碼還要多，極難維護(hù)。
Pico.css 的出現(xiàn)給這樣的開發(fā)現(xiàn)狀提供了一種新思路，不僅可以直接用在實(shí)際項(xiàng)目中，也能夠作為構(gòu)建自己的 UI 庫的基礎(chǔ)樣式。
Pico.css 是一個(gè)免費(fèi)開源的項(xiàng)目，源碼基于 MIT 開源協(xié)議托管在 Github 上，任何個(gè)人和公司都可以免費(fèi)下載使用。
關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開源、免費(fèi)商用的資源。
↓↓點(diǎn)擊查看本次分享的網(wǎng)址。
Pico.css - 簡(jiǎn)單優(yōu)雅的純 CSS 開源 UI 框架，用原始的 HTML 元素標(biāo)簽來做界面｜那些免費(fèi)的磚
者 | Tim Anderson
譯者 | 王強(qiáng)
策劃 | Tina
AI 大模型超全落地場(chǎng)景&金融應(yīng)用實(shí)踐，8 月 16 - 19 日 FCon x AICon 大會(huì)聯(lián)訣來襲、干貨翻倍！
用于擴(kuò)展 HTML 規(guī)范的 Htmx 項(xiàng)目發(fā)布了 2.0 版，這是該項(xiàng)目自 2020 年 11 月 發(fā)布 1.0 版以來的第一個(gè)主要版本。
Htmx 2.0 取消了對(duì) Internet Explorer 的支持，并將擴(kuò)展項(xiàng)移出了核心存儲(chǔ)庫，這樣每個(gè)擴(kuò)展都可以按照自己的節(jié)奏發(fā)布更新了。新版本還刪除了一些已棄用的屬性，并將 HTTP DELETE 請(qǐng)求更改為使用參數(shù)。
新版還加入了一些新特性，包括 htmx.swap() 方法，該方法用新內(nèi)容替換現(xiàn)有內(nèi)容。它替換并改進(jìn)了現(xiàn)有的內(nèi)部 selectAndSwap() 方法。新版還改進(jìn)了與 Web 組件、可重復(fù)使用的自定義元素的集成。
新版發(fā)布博文解釋說，為了避免破壞現(xiàn)有項(xiàng)目，1.x 版本將在 NPM（節(jié)點(diǎn)包管理器）中繼續(xù)標(biāo)注為為“l(fā)atest”，2.x 還是“next”，直到 2025 年 1 月 1 日為止。遷移到 2.0 版并不困難，但根據(jù)遷移指南，用戶可能需要做一些工作。
Htmx 是一種新的前端開發(fā)方法，側(cè)重于 HTML 而非 JavaScript（盡管它是作為 JavaScript 庫實(shí)現(xiàn)的）。Htmx 是從之前的一個(gè)項(xiàng)目 intercooler.js 發(fā)展而來的，后者是由 Htmx 發(fā)明者 Carson Gross 于 2013 年創(chuàng)建。這兩個(gè)項(xiàng)目的靈感都來自于這樣一種觀點(diǎn)：HTML 的特性一直因?yàn)樾袠I(yè)對(duì) JavaScript 框架的關(guān)注而被限制住了，而 JavaScript 框架的復(fù)雜性卻一直在增長(zhǎng)。Gross 在 2020 年推出 1.0 版時(shí)寫道：“HTML 導(dǎo)向的 Web 開發(fā)范式被拋棄，不是因?yàn)槌谋臼莻€(gè)壞主意，而是因?yàn)?HTML 沒有足夠的表達(dá)能力。htmx 旨在解決這個(gè)問題，并讓你可以使用 Web 的原始超文本模型實(shí)現(xiàn)許多常見的現(xiàn)代 Web UI 模式?！?/span>
Htmx 現(xiàn)在支持包括異步請(qǐng)求、CSS 轉(zhuǎn)換和使用 HTML 屬性的 WebSocket 通信在內(nèi)的特性。
盡管 Htmx 仍然不如 React 或 Angular 等框架那么出名，但它還是收獲了開發(fā)人員的贊賞。之前就有人提到，“我絞盡腦汁想找出一個(gè)沒有過度設(shè)計(jì)的 js 框架，找到 htmx 讓我非常高興”。另一個(gè)人則表示“Htmx 簡(jiǎn)直太棒了。我們正用它來完成一個(gè)重大項(xiàng)目?！?/span>
Gross 參與了 Hacker News 上的討論并回答了問題。有人問他，是否在設(shè)法將 Htmx 的一些特性推向 HTML 標(biāo)準(zhǔn)？“我們正在與 Chrome 開發(fā)人員討論這些想法，我持謹(jǐn)慎樂觀的態(tài)度”，Gross 說。
Htmx 使用的是 XMLHttpRequest，而非更新、更強(qiáng)大的 fetch API。有人問，團(tuán)隊(duì)是否考慮過改用 fetch？“看過了，不幸的是 fetch() 和 xhr 有一組不相交的特性（特別是 xhr 的上傳進(jìn)度），所以我們決定不碰它”，Gross 回答道。
該項(xiàng)目在 GitHub 上根據(jù) Zero-Clause BSD 許可開源。
原文鏈接：
https://devclass.com/2024/06/18/htmx-2-0-released-aims-to-replace-complex-javascript-frameworks-with-easily-understood-html-attributes/
聲明：本文為 InfoQ 翻譯，未經(jīng)許可禁止轉(zhuǎn)載。
原文鏈接：Htmx 2.0 發(fā)布：用易懂的 HTML 屬性取代復(fù)雜 JavaScript 框架_架構(gòu)_InfoQ精選文章
端工程師在創(chuàng)建web應(yīng)用時(shí)一般都會(huì)選擇合適當(dāng)前項(xiàng)目的框架，目前JavaScript開發(fā)中有幾十種常用框架可以選擇，基本都是大同小異，但我們更應(yīng)該選擇開發(fā)者受歡迎的，而且有在維護(hù)已成熟不斷更新技術(shù)的框架。
第一個(gè)是最基礎(chǔ)，受初學(xué)者喜愛的Bootstrap，Bootstrap 是全球最受歡迎的前端組件庫，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目，框架本身已經(jīng)裝有強(qiáng)大的 jQuery 插件，開發(fā)者直接使用即可。目前已經(jīng)更新Bootstrap4，當(dāng)然我們推薦先使用成熟的Bootstrap3。
Bootstrap
第二個(gè)jQuery是JavaScript最古老框架之一，它是JavaScript的壓縮版，整合JavaScript最常用的功能，寫得少，做得多，目前市場(chǎng)上的網(wǎng)站前端都使用到j(luò)Query。
jQuery對(duì)DOM的操作非常容易，提高AJAX（異步 JavaScript 和 XML）方便使用，即后臺(tái)加載數(shù)據(jù)無需重新加載整個(gè)頁面。jQuery支持目前所以流行瀏覽器，跨瀏覽器支持特性很強(qiáng)。
jQuery中文社區(qū)很成熟，學(xué)習(xí)很方便，目前開發(fā)者一直不斷貢獻(xiàn)，已經(jīng)發(fā)展14年的它不會(huì)被開發(fā)者忘記。
jQuery
第三個(gè)Vue是UI開源的JavaScript 框架，Vue數(shù)據(jù)體積很小，正常20k左右。Vue.js與DOM數(shù)據(jù)綁定，渲染函數(shù)的模板。目前開發(fā)文檔也很簡(jiǎn)單易懂，你隨時(shí)可用根據(jù)文檔寫出自己第一個(gè)Vue頁面。
Vue
第四個(gè)NodeJS，很多人稱為前端后臺(tái)框架，Node.js 是一個(gè)基于 Google Chrome 的 JavaScript 引擎構(gòu)建的開源服務(wù)器端平臺(tái)，所以我們NodeJS使用編程后臺(tái)數(shù)據(jù)邏輯，包括操作數(shù)據(jù)庫等功能。
Node.js 庫的所有API都是異步的，即非阻塞的。利用這個(gè)特點(diǎn)我們?cè)谑褂卯惒焦δ軙r(shí)，服務(wù)器永遠(yuǎn)不會(huì)等待 API 返回?cái)?shù)據(jù)，服務(wù)器在調(diào)用一個(gè)API之后直接移動(dòng)到下一個(gè) API。
Node.js還有一個(gè)特點(diǎn)是使用帶有事件循環(huán)的單線程模型，Node.js 使用的單線程可以有更多的請(qǐng)求服務(wù)。
NodeJS
第五個(gè)AngularJS是目前JavaScript最強(qiáng)大、最高效的 JavaScript 框架之一。
AngularJS是 MVC 架構(gòu)（模型、視圖和控制器），給開發(fā)者提供高效的邏輯。
AngularJS 通可以過指令擴(kuò)展了HTML，且通過表達(dá)式綁定數(shù)據(jù)到 HTML頁面。
AngularJS
以上五個(gè)前端JavaScript框架是目前受歡迎使用的框架。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
