您應該了解的15種以上前端工具:我最喜歡的2020年發現

又過了一年,如果您像行業中的許多Web開發人員一樣,您可能已經發現了很多已經考慮納入工作流程的新前端工具。我在同一條船上,特別是因為我深入參與定期研究工具領域的新功能。

在這篇文章中,我將總結一些快照(以及一些截圖和演示),我發現一些最有趣的前端工具在2020年會有用。這些不一定是最受歡迎的前端工具。工具或最熱門的工具,但我認為它們在用例中都是獨特的,值得更多注意。這些本質上是我今年在前端工具中最喜歡的發現。

最好的前端工具

快捷鍵

前端工具:熱鍵

使用JavaScript檢測擊鍵並不是一項過於複雜的任務,但是GitHub團隊的這個小實用程序使其變得非常簡單。

有了它,您可以使用鍵盤快捷鍵觸發對元素的操作。

快捷方式的類型包括鍵,鍵組合甚至鍵序列。您也可以為一個操作設置多個快捷方式。

JavaScript只是一個聲明以及一個導入:

從’./hotkey.js’導入{install};

對於(document.querySelectorAll('[data-hotkey]’)){
  安裝(EL)
}

該代碼到位後,主要工作將在HTML中完成。這是我創建的用於顯示某些內容的鏈接列表,具體取決於所使用的快捷方式:

注意添加到每個鏈接的data-hotkey屬性。這些是為目標操作啟用熱鍵的功能(在這種情況下,通過CSS觸發:target選擇器)。多個熱鍵以逗號分隔;按鍵組合以加號分隔;鍵序列之間用空格隔開。

這是一個現場演示:

參見Louis Lazaris的Pen Hotkey演示頁面
(@impressivewebs)在CodePen上。

試用每個快捷方式,然後注意JavaScript面板中的代碼很少。導入模塊後,設置非常簡單。另外,如果您有一個要在模式窗口中顯示的帶有多個快捷鍵的應用程序(例如在Twitter,GitHub等上完成的操作),則可能要簽出QuestionMark.js和舊版本我的項目。

當然,使用鍵盤快捷鍵,您需要注意可訪問性,因此請務必查看存儲庫的自述文件以獲取有關此信息。

Freezeframe.js

前端工具:Freezeframe.js

在網頁中嵌入簡短的視頻很常見,以顯示正在執行的操作。有時,動畫GIF也是合適的。但是GIF會分散注意力,因為它們會自動播放其內容。

這個小工具可讓您向嵌入HTML的GIF動畫中添加類似視頻的功能。

在頁面中包含Freezeframe.js源代碼後,只需一個JavaScript聲明即可:

新的Freezeframe(’。freezeframe’,{
  觸發:「懸停」,
  覆蓋:錯誤
});

如果省略第二個參數(例如new Freezeframe(’。freezeframe’)),則默認為無播放按鈕,動畫會在懸停時觸發。唯一的缺點是,因為它是動畫GIF,從技術上講您不能「暫停」它,而只能「停止」它(這意味著它從頭開始)。但是通常使用GIF並不是什麼大問題。

這是一個包含三個不同示例的演示:

請參閱Louis Lazaris的Pen Freezeframe.js演示頁
(@impressivewebs)在CodePen上。

但是,僅使用此工具可能無法節省性能,因為看起來整個GIF都在後台載入。但是我假設如果頁面載入時GIF不在屏幕上,則可以將其與惰性載入庫一起使用。

ARC工具包

前端工具:ARC工具包

您的首選前端工具應包括許多輔助功能選項。

這是一個Chrome擴展程序,可在您的開發人員工具中添加一個標籤,以幫助您查找與WCAG 2.1 A級和AA級指南有關的可訪問性錯誤和警告。

該工具如此出色的兩個原因:

  • 它與開發人員工具中現有的測試/調試工作流集成在一起
  • 它由The Paciello Group製造,該組織在開發人員社區中以無障礙洞察力而聞名

ARC工具包功能

安裝擴展程序後,只需在開發人員工具中選擇選項卡,然後選擇「運行測試」。初始輸出將與您在上一個屏幕截圖中看到的類似。從那裡您可以向下鑽取以查看與特定功能有關的任何潛在的可訪問性問題,如下面的屏幕快照所示:

ARC Toolkit功能深入分析

請注意,左側的「鏈接」選項旁邊帶有複選標記。在這種情況下,這就是我選擇要檢查的內容。如您在實時頁面上的開發人員工具上方所見,這還會在頁面上添加一個疊加層,顯示所有選定對象的位置。

Scene.js

前端工具:Scene.js

每年似乎在前端工具領域都有一個新的動畫庫。

我今年的選擇是Scene.js。

與到目前為止的其他功能相比,這不是您可以在幾分鐘之內就可以使用並使用的功能。

有一條學習曲線可以適應API,如下所示:

讓場景=新場景({
  「。搜索框」: {
    「 0%」:「寬度:50px」,
    「 70%」:「寬度:300px」,
  },
  「 .line」:{
    「 30%」:「寬度:0%」,
    「 100%」:「寬度:100%」,
  }
},{
  持續時間:1
  緩動:Scene.EASE_IN_OUT,
  選擇器:true,
})。exportCSS();

scene.setTime(0);
讓toggle = false;

document.querySelector(「。submit」)。addEventListener(「 click」,function(){
  toggle =!toggle;
  scene.setDirection(toggle?「 normal」:「 reverse」);
  scene.play();
});

這是主頁上示例之一的代碼。這是一個簡單的動畫小搜索框。這是他們的CodePen演示:

請參閱Daybrush的Pen Scene.js示例搜索框動畫
(@daybrush)在CodePen上。

同樣,這不是一個快速學習的簡便工具,但是如果您有興趣嘗試使用看似非常簡單的API嘗試新的動畫庫,則可能是個不錯的選擇。

評論者

前端工具:Commento

當前的可感知隱私的在線環境可以使用更多類似這樣的工具。一段時間以來,我一直在考慮改善WordPress網站上的評論系統的選項,Commento看起來不錯。

我喜歡Disqus之類的功能(支持/不支持,熱門評論等),但它的功能過於龐大。

我也喜歡WordPress注釋默認情況下是自託管的,但是它們缺少Disqus的那些額外功能。我認為Commento是朝著解決這些問題的正確方向邁出的一步。

如果您正在考慮從現有的評論平台切換到Commento,那麼從我閱讀的內容來看,這是一項很大的工作,因此不利之處很大。

此外,儘管Commento允許您從Disqus中導入,但您將無法對來自Disqus中的舊評論或發布評論的用戶的頭像導入「投票」。

除非先導出到Disqus,然後再從Disqus導入Commento,否則也無法將舊的WordPress注釋導入Commento(可以在註冊Commento時使用Disqus導入工具來完成)。

最後一個缺點是,除非您自行託管Commento,否則它不是免費的。但是,當您考慮到Disqus的膨脹和隱私問題時,少量的月費是值得的。

git歷史

前端工具:Git歷史記錄

儘管它不僅在前端工具類別中,但由於它的工作方式簡單而新穎,因此在此列表中是我的最愛之一。

Git歷史記錄允許您查看公共Git存儲庫(GitHub,GitLab或Bitbucket)中任何文件的歷史記錄。

例如,假設您要查看Normalize.css的源文件更改歷史記錄。該文件位於:

https://github.com/necolas/normalize.css/blob/master/normalize.css

為了查看其歷史記錄,請使用github.githistory.xyz替換URL中的github.com:

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

新網址的輸出會載入一種簡潔,互動式的方式來查看文件隨時間的變化。每當您選擇一個歷史記錄點時,都會觸發一些很酷的動畫,使您可以查看發生了哪些更改以及哪個用戶提交了這些更改。

CSS功能切換

前端工具:CSS功能切換

如果您仍在必須進行一些舊版瀏覽器測試的環境中工作,則可能是個不錯的Chrome擴展插件,可以添加到測試工具箱中。

與上述ARC Toolkit類似,CSS Feature Toggles在瀏覽器的開發人員工具中添加了一個新標籤。

在標籤中,您會注意到一系列現代CSS功能。

可切換的CSS功能

您可以切換這些按鈕,以立即查看用戶在不支持該特定功能的瀏覽器中訪問該頁面時的外觀。這是快速了解布局在較舊環境中的性能下降的好方法。

選擇其他功能時,頁面將自動更新以顯示更改。例如,使用Flexbox構建的網站將受益於一些較舊的CSS,以保持布局合理,同時在新型瀏覽器中逐步增強功能。

建立應用程式

前端工具:創建應用

毫無疑問,您的前端工具工作流程包括許多用於構建的選項。該網站是學習網站和項目生成工具的組合,供使用(或希望學習使用)Webpack或流行資產捆綁工具Parcel的開發人員使用。

在左側的類別中向下鑽取以選擇所需的構建選項,然後在主窗口中看到必要的文件和配置選項。

創建應用程序配置選項

該頁面是完全互動式的,因此您可以單擊任何虛擬文件以查看其內容,也可以將滑鼠懸停在選定的選項上以查看描述以及與該選項相關的內部突出顯示的部分。

對於學習和創建新項目都非常有用!

CSSJanus

前端工具:CSS Janus

在國際化領域,這是一個在線工具,可讓您將樣式表從左到右轉換為從右到左,反之亦然。

這使您可以輕鬆地為從右到左(rtl)的語言(如阿拉伯語和希伯來語)創建樣式表。

這是一個CSS示例:

.example {
  向左飄浮;
  文字對齊:左;
  填充:1px 2px 3px 4px;
  左邊距:1em;
  背景位置:5%100px;
  游標:ne-resize;
  border-radius:1px 2px;
}

以上內容將轉換為以下內容:

.example {
  浮動:正確;
  文字對齊:右;
  填充:1px 4px 3px 2px;
  右邊距:1em;
  背景位置:95%100px;
  游標:nw-resize;
  border-radius:2px 1px;
}

請注意,差異不僅包括float:left和text-align:left這樣的行,還包括水平填充聲明和背景位置值之類的其他行。

而且有用的是,如果您希望工具忽略樣式塊或單個聲明,則可以使用@noflip指令:

/ * @noflip * / .ignored {
  向左飄浮;
}

.not-ignored {
  向左飄浮;
  / * @noflip * /背景:#fff(poster-ltr.png);
}

色賊

前端工具:色賊

Color Thief確實很整潔,使用起來也很簡單,但是在用例上卻非常具體。

基本上,使用此實用程序,您可以使用JavaScript抓取基於給定圖像2至20種顏色的調色板。

這並不是您會在每個網站或應用程序上使用的東西,但這是一個好主意,顯然已經存在了一段時間,並且在過去一年中進行了更新。

使用簡單的API,您可以單行從圖像中獲取調色板:

讓myPalette = colorThief.getPalette(img,10);

從那裡開始,只需處理返回的數組。您可以在下面看到我在CodePen中構建的演示,該演示從顯示的圖像中獲取用戶輸入的多種顏色。我在數組上使用的代碼是:

myPalette.forEach(
  元素=> colors.innerHTML + =「


);

我正在使用構建調色板

元素和內聯樣式。顏色作為RGB值返回。

參見Louis Lazaris的筆色小偷演示
(@impressivewebs)在CodePen上。

在CodePen演示中,我使用一種解決方法來解決在CodePen上遇到的跨域問題,但通常在常規環境中不需要(注釋)這些行。

正則表達式指南

前端工具:RegexGuide

似乎每年我都會找到一個很棒的互動式應用程序來添加到我的前端工具集合中,以幫助構建正則表達式,所以這是今年的條目。而且,如果您像我一樣,將盡一切可能獲得這些幫助。

首先,這個想法有點奇怪,因為它像嚮導一樣一步一步地完成。

完成並滿足所有條件後,您可以嘗試使用不同的值來滿足指定的條件,並且頁面將互動式地指示有效的方法。

這類工具始終是我的最愛,因為它們不僅用作創建原本會很乏味的代碼的方式,而且還可以幫助您學習語法。

前端工具:榮譽獎

我認為這些就是一些我發現在過去一年中沒有引起足夠重視的更有趣的前端工具。我確定您有自己的發現,請隨時將其放入下面的評論中。同時,這是一份最終清單,雖然還沒有成為主要清單,但我認為值得一提:

  • wehatecaptchas –一種驗證碼替代方法,沒有圖像或字母/數字解密,甚至沒有一個複選框來「確認我不是機器人」

  • simpleParallax –一種使用JavaScript進行視差效果的簡便方法。

  • 精簡版YouTube嵌入-顯然比傳統的嵌入代碼快224倍。

  • 瀏覽器默認樣式–輸入任何HTML元素,此工具將告訴您該元素的每個瀏覽器的默認CSS。

  • 誰可以使用–輸入兩種顏色的組合,此工具將告訴您哪些類型的視障用戶可以將該組合用於文本/背景。

別忘了加入我們的速成班,以加快WordPress網站的速度。通過一些簡單的修復,您甚至可以減少50-80%的載入時間:

Karol K的布局和演示。

相關文章