英文 | https://javascript.plainenglish.io/want-to-make-your-life-as-a-developer-a-lot-easier-use-these-tools-bf7796c2e12c

翻譯 | 楊小二

創(chuàng)新工具幾乎每天都會出現(xiàn)在網(wǎng)絡(luò)上，專為網(wǎng)頁設(shè)計和網(wǎng)頁開發(fā)等領(lǐng)域而創(chuàng)建。如果你想讓自己的工作更輕松，可以嘗試使用這些工具。

1、Typing.io

地址：https://typing.io/

對于想要在 JavaScript、Ruby、C、C++、Java、PHP 或 Perl 等開源編碼環(huán)境中練習編寫代碼的程序員來說，Typing.io 是一款令人興奮的應用程序。

2、CSS3P

地址：http://css3ps.com/

CSS3Ps 是一個免費的 Photoshop 插件，可以將你創(chuàng)建的圖層轉(zhuǎn)換為 CSS3 代碼。創(chuàng)作者不斷擴展插件的可能性，但你可以親眼看看它在實踐中是如何工作的。

3、Dewey Bookmarks

地址：https://chrome.google.com/webstore/detail/dewey-bookmarks/aahpfefkmihhdabllidnlipghcjgpkdm

Dewey 是比較流行的 Google Chrome 瀏覽器的出色插件。它可以使管理書簽變得更加友好。用戶可以訪問多個選項，例如標記或添加屏幕。

4、BrowserSync

地址：https://browsersync.io/

BrowserSync 是一個強大的工具，它將吸引創(chuàng)建響應式網(wǎng)站的人。該應用程序的任務(wù)是同時在多個設(shè)備和瀏覽器上自動測試頁面（點擊、滾動等）。多虧了這一點，在創(chuàng)建的 RWD 頁面中檢測錯誤變得更加容易。

5、EnjoyCSS

地址：https://enjoycss.com/

EnjoyCSS 是一個在線 CSS 代碼生成器。得益于友好的界面，使用 EnjoyCSS 變得輕松而直觀。完成后，你可以復制代碼并將其粘貼到你正在創(chuàng)建的頁面中。

6、Compressnow

地址：https://compressnow.com/

Compressnow 是一個方便的在線照片調(diào)整工具。“瘦身”照片可能會有所幫助，例如，當我們希望創(chuàng)建的頁面加載速度更快時。

該工具的原理簡單直觀：加載你感興趣的照片并指定要縮小的尺寸百分比。原始照片的寬度和高度將被保留。該工具支持 .gif、.jpg、.jpeg 和 .png 擴展名。

7、EasyZoom

地址：https://github.com/i-like-robots/EasyZoom

EasyZoom 是一個 jQuery 插件，可讓你放大照片。該插件支持觸摸設(shè)備，可以使用#CSS 語言輕松修改。

8、Layoutit

地址：https://www.layoutit.com/

Layoutit 是一個基于 Bootstrap 的在線工具，用于創(chuàng)建拖放頁面。高級開發(fā)人員可以下載 HTML 文件并以任何語言對其進行修改。

9、 Bespoke.js

地址：http://markdalgleish.com/projects/bespoke.js/

Bespoke.js 是一個非常簡約的框架，用于創(chuàng)建令人興奮和引人注目的演示文稿。對于新手程序員來說，框架的入門可能需要一些時間，但最終的結(jié)果是值得的。

10、Mueller Grid System

地址：https://muellergridsystem.com/

Mueller 網(wǎng)格系統(tǒng)只是一組用于響應式和固定布局頁面的網(wǎng)格。用戶可以完全控制媒體查詢和列寬。

11、qSnap

地址：https://chrome.google.com/webstore/detail/qsnap-screen-capture-scre/bijakfpegjnjmfdoiloebhaemhomjkon

qSnap 是一個截圖工具。該工具適用于所有流行的瀏覽器。截取屏幕截圖后，我們可以使用內(nèi)置編輯器對其進行編輯。然后我們可以與他人共享圖像或?qū)⑵浔４娴侥愕挠嬎銠C。

12、Iconion

地址：https://iconion.com/

Iconion 是一個直接從字體生成 PNG 圖標的程序。此外，可以修改圖標，添加顏色、陰影、漸變等等。

13、Font Combiner

地址：https://fontjoy.com/

字體組合器是一種用于創(chuàng)建字體的工具。用戶可以選擇調(diào)整大小、創(chuàng)建提示或字距。當我們希望我們的網(wǎng)站從其他網(wǎng)站中脫穎而出時，這是一個有用的工具。

14、Impress.js

地址：https://impress.js.org/#/bored

Impress.js 是一個用于創(chuàng)建令人興奮的演示文稿的框架。該框架是使用現(xiàn)代 Web 瀏覽器中 CSS 轉(zhuǎn)換和轉(zhuǎn)換的可能性創(chuàng)建的。

15、Prototypo

地址：https://www.prototypo.io/

字體是任何網(wǎng)站的基本元素。Prototypo 是一種工具，可讓你直觀地修改字體。借助此工具，可以輕松獲得獨特的字體外觀并使創(chuàng)建的頁面對用戶更加有趣。

16、Avocode

地址：https://avocode.com/

Avocode 是一款無需 Photoshop 即可訪問 PSD 文件的應用程序。設(shè)計人員和 Web 開發(fā)人員之間協(xié)作的絕佳解決方案。目前，使用該應用程序需要邀請。

17、InVisionapp

地址：https://www.invisionapp.com/

InVisionapp 是一款專為在各種項目上進行協(xié)作的人而設(shè)計的應用程序。我們可以輕松發(fā)布創(chuàng)建的項目、與他人分享我們的想法、交換意見或進行更改。

18、 bootstrap Studio

地址：https://bootstrapstudio.io/

Bootstrap Designer 是一個用于為 Bootstrap 框架創(chuàng)建 HTML 模板的在線工具。一個令人興奮的選擇是生成一個快速模型，可以呈現(xiàn)給客戶以供批準。

19、CSSDesk

地址：https://cssdeck.com/

CSSDesk 是一個專注于處理 CSS 和 HTML 代碼的工具。該工具的優(yōu)勢無疑是實時預覽頁面、行編號或有用的代碼顏色。

20、Cold Turkey

地址：https://getcoldturkey.com/

Cold Turkey 是一種工具，可以在一段時間內(nèi)阻止訪問你選擇的站點。特別是在學校課程期間或當我們有一個項目要做時很有用，并且我們最喜歡的頁面不允許我們集中注意力。

21、Junior

地址：https://justspamjustin.github.io/junior/#home

Junior 是一個用于在 HTML5 中創(chuàng)建移動應用程序的框架。該框架使用所謂的 CSS3 過渡，即從一個值到另一個值的動畫過渡效果。此外，該框架與流行的backbone.js 庫集成。

22、 FitVids.js

地址：http://fitvidsjs.com/

Fitvids.js 是一個輕量級的 jQuery 插件，可以輕松地將視頻文件嵌入到響應式網(wǎng)站中。多虧了這個插件，文件才能順利適應頁面的大小。

23、CollagePlus

地址：https://github.com/ed-lea/jquery-collagePlus

CollagePlus 是我們列表中的另一個 jQuery 插件。它將以 Google+ 或 Flickr 的風格為你的畫廊帶來令人興奮的外觀。用戶可以在 CSS 中定義元素邊框、行高或照片之間的間距。

總結(jié)

正如我在文章開頭所說，新工具每天都在被創(chuàng)造。因此，這不是一個完整的列表。

只希望這23款實用工具，有可以幫助你提升開發(fā)效率。

最后，感謝你的閱讀。

23 個讓你的開發(fā)工作更輕松的工具

學習更多技能
請點擊下方公眾號

23 個讓你的開發(fā)工作更輕松的工具

學習更多技能請點擊下方公眾號

學習更多技能
請點擊下方公眾號