這5個Web開發工具可提高你的開發生產力

對於開發人員而言,時間始終是稀缺資源。

從嚴格的最後期限到多個項目——到出乎意料的需求——我們的時間總是有需求的。因此,我們一直在尋找有助於提高生產率的工具和流程。

在本文中,我將介紹五種Web開發工具,它們可能會為你帶來所需的額外生產力。

這5個Web開發工具可提高你的開發生產力

通過Oh My Zsh掌握命令行

WindowsOS X的默認命令行界面(命令Prompt和Bash)可能令人生畏且難以自定義。如果你不是這方面的專家,你可能會重複那些可以自動完成的瑣碎工作。

Oh My Zsh是一個基於Zsh的開源社區驅動框架,Zsh是一個命令行 shell,許多人發現它比默認選項更容易和更好。

Oh My Zsh 提供了許多開箱即用的插件(250)和主題(140),使您可以根據自己的喜好自定義終端。

Oh My Zsh 速度更快,使用起來更舒適,並且可以讓您輕鬆地自動執行日常任務。由於命令行正逐漸成為每個Web開發人員工作流程的一部分,因此這可能是一種出色的生產力工具,可以將其整合到您的日常工作中。

這5個Web開發工具可提高你的開發生產力

Oh My Zsh

安裝Oh My Zsh非常簡單。

<code>$ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"/<code>

同樣簡單的是安裝插件和可定製的主題。

Oh My Zsh 也擁有大量活躍的貢獻者社區,實際上,已有1,500多人為該項目做出了貢獻。

我已經使用這個工具一年多了,我喜歡它簡化了我的工作流程,讓我在終端工作變得非常簡單。使用Oh My Zsh幫助我變得更加舒適和高效。尤其是自動建議和別名加快了我的工作流程並提高了生產率。我最喜歡的一些插件包括:

  • Heroku: Heroku CLI的自動完成
  • zsh-autosuggestions: 自動建議以前的任何命令
  • npm:npm的自動補全和別名


測試API的Insomnia

測試REST端點可能很麻煩,你可能用過Postman,還有新興的Postwoman。我要介紹的Insomnia也很不錯,它是一個免費且開放源代碼,跨平臺的GraphQLREST客戶端,不僅功能強大,而且還帶有直觀,簡單的UI,可簡化測試。它簡化了我的一天,Insomnia的一些特徵包括:

  • 生產代碼片段: Insomnia可以為超過20種不同的語言生成客戶端代碼,包括Node.js,Go,Swift,Python,Java和C。
  • 插件系統: 插件系統使您可以擴展Insomnia的功能。您可以創建用於呈現自定義值的自定義模板標籤,也可以使用Plugins API創建自定義顏色主題。
  • 環境變量: 這些是可重用的值,可用於Insomnia中的任何文本輸入。一些常見的變量是基本URL,身份驗證令牌和資源ID。
  • 這5個Web開發工具可提高你的開發生產力

    Insomnia

    Insomnia的主要好處之一是對GraphQL的支持。下面的演示顯示了查詢GraphQL端點的典型工作流程。

    在此示例中,我使用稱為countries的公共GraphQL API發送請求。傳遞URL時,Insomnia會自動生成模式。在左側發送查詢後,它將在右側返回響應。

    這5個Web開發工具可提高你的開發生產力

    該應用程序附帶許多有用的功能,可以簡化您的工作流程。例如,在這裡我們可以看到使用環境變量的能力。該應用程序附帶許多有用的功能,可以簡化您的工作流程。

    這5個Web開發工具可提高你的開發生產力

    使用API時,通常會在多個請求中重複相同的值,手動執行此任務可能很耗時且困難。使用環境變量可以解決這個問題,它允許您定義一個值——然後在需要的地方引用該值。

    使用Hub增強Git的超能力

    我們大多數人在GitHub上花費很多時間。hub是一個命令行工具,可幫助您執行日常GitHub任務,而無需不斷從終端來回切換。

    這5個Web開發工具可提高你的開發生產力

    您可以使用hub執行大量的命令和操作。這是安裝命令的完整列表。您還可以通過在終端上運行命令 man hub

    來找到列表。

    使用DevDocs訪問離線文檔

    我們都使用文檔(其中有些人使用了很多文檔)。當您在多個技術棧中工作時,經常在文檔集之間來回切換既耗時又不方便。

    DevDocs解決了這個問題。DevDocs是一個免費的開源工具,可以在一個乾淨、有組織的web UI中一次性瀏覽各種編程語言和開發工具文檔。

    DevDocs提供:

    • 即時搜索
    • 離線支持
    • 移動端支持
    • 黑暗模式
    • 快捷鍵
    • 更多...
    這5個Web開發工具可提高你的開發生產力

    我用它來處理多種語言或工具。例如,我大量使用它來同時閱讀和搜索Vue和Cypress的文檔。

    使用SVGOMG縮放SVG圖像

    最後,切換到更實用的工具,我們有SVGOMG——一個用於優化可伸縮向量圖形(SVG)文件的免費在線工具。

    SVG圖像優於其他格式(例如PNG或JPG),因為它們能夠縮放並在各種設備和屏幕尺寸上保持響應。使用SVG的一個缺點是,由於冗餘信息,比如編輯器元數據、註釋、隱藏元素和默認值或非最優值,文件可能會變得非常大。

    SVGOMG是一個安全刪除和優化這些數據以減少文件大小的工具。

    這5個Web開發工具可提高你的開發生產力

    上圖顯示了一個典型場景,其中SVG文件已優化69.42%。這是一個非常簡單的工具,但是它可以幫助提高網站的整體性能並避免網頁上出現膨脹。 SVGOMG是SVGO Optimizer的UI實現,它是基於Node.js的命令行工具。


    如果對你有所啟發和幫助,可以點個關注、收藏、轉發,也可以留言討論,這是對作者的最大鼓勵。

    作者簡介:Web前端工程師,全棧開發工程師、持續學習者。

    私信回覆:大禮包,送某網精品視頻課程網盤資料,準能為你節省不少錢!


    分享到:


    相關文章: