整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線(xiàn):

          38個(gè)不可錯(cuò)過(guò)的實(shí)用前端工具

          家好,我是Echa。

          又到周五啦,提前祝大家周末愉快!今天來(lái)分享一些實(shí)用的前端工具!

          1. Small Dev tools

          Small Dev Tools 是一個(gè)前端工具網(wǎng)站,包含了很多實(shí)用的功能,比如JSON解碼器、JSON格式化程序、UTF8編碼、Base64編碼、Base64解碼、CSS格式化程序、CSS壓縮器等。

          官網(wǎng):https://smalldev.tools/

          2. Carbon

          Carbon 是一個(gè)在線(xiàn)工具,可以生成漂亮的不同風(fēng)格的代碼圖片。

          官網(wǎng):https://carbon.now.sh/

          3. UI Design Daily

          UI 設(shè)計(jì)日?qǐng)?bào),提供免費(fèi)優(yōu)質(zhì)的 UI 資源。

          官網(wǎng):https://www.uidesigndaily.com/

          4. Color Hunt

          ColorHunt,即顏色獵人,是一個(gè)在線(xiàn)設(shè)計(jì)配色的網(wǎng)站,其最大的特點(diǎn)就是使用飽和度調(diào)配配色方案。每天會(huì)根據(jù)瀏覽量進(jìn)行更新排版,并可以直接使用。

          官網(wǎng):https://colorhunt.co/

          5. SCHEME COLOR

          SCHEME COLOR 是一個(gè)在線(xiàn)的配色工具網(wǎng)站,可以根據(jù)顏色、類(lèi)型等查找合適的配色方案。

          官網(wǎng):https://www.schemecolor.com/

          6. Keyframes

          Keyframes 可以用來(lái)創(chuàng)建動(dòng)畫(huà)、陰影和使用顏色,幫助我們編寫(xiě)更好的CSS。

          官網(wǎng):https://keyframes.app/

          7. Design Resources

          Design Resources 是一個(gè)設(shè)計(jì)資源的集合。

          官網(wǎng):https://www.designresourc.es/

          8. Omatsuri

          Omatsuri 是一個(gè)開(kāi)源項(xiàng)目,包含12個(gè)實(shí)用的前端工具。

          官網(wǎng):https://omatsuri.app/

          9. UI Snippets

          UI Snippets 是一個(gè)前端動(dòng)畫(huà)合集,可以通過(guò)右鍵點(diǎn)擊想要的動(dòng)畫(huà)直接復(fù)制對(duì)應(yīng)的 CSS 或 SCSS 代碼。

          官網(wǎng):https://ui-snippets.dev/

          10. Pattern CSS

          Pattern CSS 可以用漂亮的圖案填充空白背景。

          官網(wǎng):https://bansal.io/pattern-css

          11. Can I use

          Can I use 可以用來(lái)查詢(xún) HTML5、CSS、JS、SVG 在各種流行瀏覽器中的特性和兼容性。

          官網(wǎng):https://caniuse.com/

          12. CSS Gradient

          CSS Gradient 是一個(gè)用來(lái)快速方便的創(chuàng)建 CSS 漸變的網(wǎng)站。

          官網(wǎng):https://cssgradient.io/

          13.CSS matic

          CSS matic 是一個(gè) CSS 工具,目前包含4個(gè)很有用的工具,分別是:支持各種顏色和透明度的漸變工具,使用漸變工具,可以創(chuàng)建漸變平滑的色彩變化效果和微妙的透明膠片;邊框圓角工具可以幫助你方便的實(shí)現(xiàn)需要的圓角效果;噪聲紋理可以幫助你創(chuàng)造奇妙的背景圖案,能夠?qū)崟r(shí)預(yù)覽結(jié)果;盒陰影工具可以控制模糊半徑的變化,顏色變化,陰影大小,可以實(shí)現(xiàn)你想要的任何效果。

          官網(wǎng):https://www.cssmatic.com/

          14.Am I Responsive

          Am I Responsive 用來(lái)測(cè)試響應(yīng)式網(wǎng)頁(yè)。輸入鏈接即可生成預(yù)覽,Am I Responsive 能幫我們測(cè)試出頁(yè)面在手機(jī)、平板電腦、筆記本電腦和桌面端設(shè)備上的瀏覽體驗(yàn)。

          官網(wǎng):http://ami.responsivedesign.is/

          15. CSS Generator

          這是一個(gè)實(shí)用的 CSS 生成器,可以實(shí)時(shí)查看調(diào)試效果。

          官網(wǎng):https://html-css-js.com/css/generator/

          16. My Brand New Logo

          My Brand New Logo 是一個(gè)CSS 調(diào)色板生成器,用來(lái)創(chuàng)建一致的調(diào)色板方案。

          官網(wǎng):https://mybrandnewlogo.com/color-palette-generator

          17. 裁剪路徑生成器

          CSS cli-path 功能能夠構(gòu)建復(fù)雜的形狀,該工具讓我們可以輕松地以交互方式構(gòu)建該多邊形。

          官網(wǎng):https://bennettfeely.com/clippy/

          18. CSS Grid Generator

          CSS Grid Generator 是一個(gè) Grid 布局生成器,通過(guò)這個(gè)工具可以快速創(chuàng)建自定義CSS Grid布局。

          官網(wǎng):https://cssgrid-generator.netlify.app/

          19. CSS Layout Generator

          CSS Layout Generator 布局生成器可以為布局組件創(chuàng)建 CSS 和 HTML 的工具。

          官網(wǎng):https://layout.bradwoods.io/

          20. Fluid-responsive font-size calculator

          Fluid-responsive font-size calculator 即響應(yīng)式字體計(jì)算器,可以輕松創(chuàng)建流暢的排版體驗(yàn)。它有更廣泛的支持,可以用幾行 CSS 來(lái)實(shí)現(xiàn)。

          官網(wǎng):https://websemantics.uk/tools/responsive-font-calculator/

          21. regex101

          Regex101是學(xué)習(xí)、測(cè)試正則表達(dá)式的工具網(wǎng)站。

          官網(wǎng):https://regex101.com/

          22. Regex-Vis

          Regex-Vis 是一個(gè)正則表達(dá)式可視化器和編輯器。


          官網(wǎng):https://regex-vis.com/

          23. Loupe

          Loupe 是一個(gè)可視化工具,可幫助我們了解 JavaScript 的調(diào)用堆棧/事件循環(huán)/回調(diào)隊(duì)列是如何執(zhí)行的。

          官網(wǎng):http://latentflip.com/loupe/

          24. RunJS

          RunJS 是一個(gè)桌面應(yīng)用程序,可幫助我們編寫(xiě)專(zhuān)門(mén)的 Javascript 和 Typescript 代碼。它的一些優(yōu)勢(shì)是可以快速測(cè)試代碼,輕松導(dǎo)入和測(cè)試庫(kù)代碼,并且能夠修改界面、主題和字體以適應(yīng)偏好。

          官網(wǎng):https://runjs.dev/

          25. Wrap SVG Online

          Wrap SVG Online 通過(guò)拖放從計(jì)算機(jī)上傳圖像,可以輕松地編輯網(wǎng)頁(yè)的 SVG 圖像。

          官網(wǎng):https://pavellaptev.github.io/warp-svg/

          26. SVG Path Visualizer

          SVG Path Visualizer 可以幫助我們通過(guò)輸入 SVG 路徑數(shù)據(jù)來(lái)快速直觀地查看 SVG 圖像。此外,該工具還提供了詳細(xì)的說(shuō)明,以便了解如何創(chuàng)建基本的 SVG 形狀,如直線(xiàn)、曲線(xiàn)、三角形等。

          官網(wǎng):https://svg-path-visualizer.netlify.app/

          27. BGJar

          BGJar 是一個(gè)在線(xiàn)工具,可以輕松快速地為網(wǎng)站創(chuàng)建 SVG 背景。只需編輯必要的信息,它將自動(dòng)導(dǎo)出圖像或代碼供我們應(yīng)用到網(wǎng)站。

          官網(wǎng):https://bgjar.com/

          28. Wavesnippets

          Wavesnippets 可以將代碼分步設(shè)置為動(dòng)畫(huà)、視頻或 GIF。

          官網(wǎng):https://www.wavesnippets.com/

          29. Generate SVG Waves

          Generate SVG Waves 可以用來(lái)創(chuàng)建 SVG 波形背景。

          官網(wǎng):https://svgwave.in/

          30. CodeSandbox

          CodeSandbox 是一個(gè)為 Web 應(yīng)用程序開(kāi)發(fā)而構(gòu)建的在線(xiàn)編輯器,支持多種主流框架。

          官網(wǎng):https://codesandbox.io/

          31. Openbase

          Openbase 幫助開(kāi)發(fā)人員在數(shù)以百萬(wàn)計(jì)的開(kāi)源軟件包中進(jìn)行選擇和使用。

          官網(wǎng):https://openbase.com/

          32. CodePen

          CodePen 是一個(gè)在線(xiàn)的前端代碼編輯工具,可用于制作測(cè)試頁(yè)面、代碼調(diào)試,所見(jiàn)即所得。

          官網(wǎng):https://codepen.io/

          33. JSONLint

          JSONLint 是一個(gè) JSON 調(diào)試工具,如果遺漏了語(yǔ)法中的某些內(nèi)容,它會(huì)進(jìn)行檢查。JSONLint 是處理大型 JSON 格式的絕佳工具,而且很容易上手。

          官網(wǎng):https://jsonlint.com/

          34. Minify

          Minifier 可以對(duì) JavaScript 和 CSS 代碼進(jìn)行壓縮,通過(guò)縮小可以提高網(wǎng)站加載速度。Minifier 通過(guò)刪除 .js 和 .css 文件中的空白并重新格式化它們以減小大小。

          官網(wǎng):https://www.minifier.org/

          35. Unminify

          Unminify 和 Minifier 恰恰相反。使用 Unminify 可以使 .js 或 .css 文件可讀。這兩種工具都非常容易使用。

          官網(wǎng):https://unminify.com/

          36. CRADIENT.ART

          CRADIENT.ART 是一個(gè)高級(jí) CSS 漸變編輯器,使用帶有分層、設(shè)計(jì)工具和免費(fèi)云存儲(chǔ)的功能豐富的編輯器設(shè)計(jì)插圖、圖案、圖標(biāo)等。

          官網(wǎng):https://gra.dient.art/

          37. 3DPop

          3DPop 可以使用 CSS 生成很棒的 3D 文本效果。

          官網(wǎng):https://textpop3d.web.app/

          38. CSS Photo Filters

          CSS Photo Filters 是一個(gè)CSS圖片濾鏡工具,提供了 36 個(gè) CSS 過(guò)濾器供我們使用。

          官網(wǎng):https://baseline.is/tools/css-photo-filters/

          件特色

          網(wǎng)頁(yè)代碼編輯器是集html代碼編輯、css代碼編輯和js代碼編輯為一體的網(wǎng)頁(yè)代碼編輯軟件,此軟件分為代碼編輯區(qū)和結(jié)果顯示區(qū),用戶(hù)可以在一邊編寫(xiě)代碼的情況下一邊查看結(jié)果,無(wú)需手動(dòng)運(yùn)行瀏覽器查看結(jié)果。該軟件操作方便,適合剛?cè)腴T(mén)的網(wǎng)頁(yè)設(shè)計(jì)學(xué)習(xí)者。

          使用說(shuō)明

          1.在本站下載網(wǎng)頁(yè)代碼編輯器最新版軟件包

          2.解壓網(wǎng)頁(yè)代碼編輯器軟件,運(yùn)行文件

          3.雙擊打開(kāi),進(jìn)入網(wǎng)頁(yè)代碼編輯器軟件界面

          4. 此軟件為綠色版,無(wú)需安裝即可使用

          更新內(nèi)容

          1、增加了代碼高亮顯示功能

          2、增加了代碼行數(shù)顯示功能

          3、增加了代碼折疊功能

          4、增加了網(wǎng)頁(yè)代碼中圖片保存功能,用戶(hù)可以一次性把代碼中的圖片保存到文件夾中

          提示:本軟件運(yùn)行在微軟.net framework 平臺(tái)上,如出現(xiàn)軟件不能運(yùn)行的用戶(hù)可百度搜索“.Net 4.0”下載微軟.Net運(yùn)行框架,如不想安裝.Net平臺(tái)的用戶(hù)可繼續(xù)使用網(wǎng)頁(yè)代碼編輯器2.5版本

          來(lái)源:http://www.3h3.com/soft/250963.html

          端頁(yè)面有時(shí)候可能遇到只有在某些小場(chǎng)景下需要額外的js庫(kù),如果我們把這些庫(kù)或樣式一開(kāi)始就放置到head里進(jìn)行加載,往往從用戶(hù)進(jìn)入瀏覽到離開(kāi)也不會(huì)觸達(dá)這些庫(kù)或樣式的被使用場(chǎng)景,所以一個(gè)好的優(yōu)化手段就是進(jìn)入這些特定場(chǎng)景下時(shí)動(dòng)態(tài)去加載依賴(lài)庫(kù),做到有需要才使用, 今天推薦的就是此功能,加載時(shí)可以做到是否已經(jīng)存在檢測(cè)及加載完成通知回調(diào)。

          基礎(chǔ)使用

          使用方式

          1. 引入加載庫(kù)
          <script src="tr.easydynamic_load_css_js.min.js"></script>
          1. 執(zhí)行加載 (這里我們拿pdf預(yù)覽作為演示使用)
          TR.LoadJSAndCSS(
          [
              'https://your.cdn.com/js/pdf.js',
              'https://your.cdn.com/js/pdf.worker.js',
              'https://your.cdn.com/js/pdfh5.js',
              'https://your.cdn.com/js/pdfh5.worker.js'
          ], 
          [
              'https://your.cdn.com/css/pdfh5.css'
          ], 
            () => {
              //加載完成
              this.pdfh5 = new window.Pdfh5('#demo', {
                  pdfurl: 'pdf地址'
              })
          }, (p) => {
              //加載進(jìn)度
              console.log('load:', p)
          })
          • 參數(shù)1 為待加載js地址列表
          • 參數(shù)2為待加載css地址列表
          • 參數(shù)3為加載完成回調(diào)通知
          • 參數(shù)4為加載進(jìn)度回調(diào)通知

          是不是很簡(jiǎn)單呢? 奉上庫(kù)地址

          https://github.com/Ti-R/EasyDynamicLoad-CSS-JS

          關(guān)注、點(diǎn)贊、評(píng)論老碼每天分享!


          主站蜘蛛池模板: 一区二区精品在线观看| 老湿机一区午夜精品免费福利| 人妻AV中文字幕一区二区三区| 熟女性饥渴一区二区三区| 久久免费视频一区| 伊人久久精品无码av一区| AV天堂午夜精品一区| 中文字幕精品亚洲无线码一区应用 | 国模无码人体一区二区| 亚洲日韩精品无码一区二区三区| 中文字幕永久一区二区三区在线观看| 国产一区二区精品久久岳 | 黑人一区二区三区中文字幕| 一区二区不卡久久精品| 农村人乱弄一区二区| 亚洲国产日韩一区高清在线| 精品视频一区二区三三区四区 | 人妻AV一区二区三区精品| 国产小仙女视频一区二区三区| 无码人妻精品一区二区三区9厂| 亚洲成av人片一区二区三区| 国产激情精品一区二区三区| 日本在线不卡一区| 国产对白精品刺激一区二区 | 狠狠色婷婷久久一区二区三区| 香蕉久久av一区二区三区| 国产精品一区二区久久| 日韩一区二区三区视频| 精品少妇一区二区三区视频| 国产精品日本一区二区不卡视频| 99久久无码一区人妻a黑 | 夜夜添无码试看一区二区三区 | 国产吧一区在线视频| 内射一区二区精品视频在线观看| 国产亚洲情侣一区二区无码AV| 福利视频一区二区牛牛| 人妻少妇一区二区三区| 玩弄放荡人妻一区二区三区| 无码国产精品一区二区免费式芒果| 制服丝袜一区二区三区| 国产精品夜色一区二区三区|