不管你是一個多麼有經驗的開發人員,你都想讓你的生活儘可能的簡單。正確的工具可以幫助您完成此任務。你的能力取決於你使用的工具,所以花點時間挑選適合你需要的工具是明智的。
在本文中,我將討論每個web開發人員都可以使用的一些工具,以便使你的工作更輕鬆、更高效。
1. Transition Generator
https://makingcss.com/transition
有一個CSS屬性有很多可能性,這讓你很難記住所有的CSS屬性,那就是 transition
屬性。
當你不確定你想要什麼樣的過渡,或者你只是想嘗試其中一些過渡的時候,這個工具就很有用了。這個工具可以很容易地混合轉換不同方面,比如持續時間和延遲。通過這種方式,你可以確切地看到每個不同的轉換是如何工作的。
請注意,該網站還提供許多其他工具,例如漸變和變換生成器。
2. Transfonter
https://transfonter.org/
Transfonter是在轉換字體時使用的工具,這樣你就可以在web上使用它們。它支持許多不同的格式,比如TTF、EOT、WOFF、WOFF2和SVG。
當你擁有需要在網絡上使用的自定義字體時,此功能非常有用!
3. Flip Switch Generator
https://www.cssportal.com/css3-flip-switch/
每隔一段時間,你可能需要爲正在構建的新應用程序實現一個翻轉開關。你可以使用此工具爲你生成代碼,而不必一遍又一遍地重複勞動。
4. Flexbox.help
https://flexbox.help/
Flexbox.help是一個很好的工具,當你需要幫助的時候,你可以利用Flexbox.help。如果你是flexboxes的新手,這是一個很好的工具,使用這個工具你可以嘗試使用所有可用的flex選項,CSS會根據你選擇的選項爲你生成,所以你不需要自己輸入所有的代碼。
5. SASS to CSS
https://jsonformatter.org/sass-to-css
使用此工具,你可以將SASS代碼轉換回CSS,當你需要使所編寫的SASS代碼準備好在web上使用時,這可能很有用。
6. Pure CSS Image Effects
http://angrytools.com/css-generator/filter/
CSS Filter 屬性提供了在元素顯示之前對元素的渲染效果的訪問,如模糊或顏色偏移。該工具允許您試驗filter屬性所提供的所有可能性。
7. Generating Color Schemes
https://coolors.co/
有時候,當你需要爲某個設計或網站尋找最佳色彩時,你會缺乏靈感。當你沒有靈感的時候,你應該使用這個工具。這是一個非常優雅和易於使用的工具,爲你提供了最好的配色方案。
8. Style Guide Generator
http://atomicdocs.io/
當你在一個多人前端團隊中工作時,都非常歡迎使用此工具。它使你可以生成樣式指南,因此不會對如何設置某些元素的樣式產生誤解。
9. Darken or Lighten a Certain Color
https://www.cssfontstack.com/oldsites/hexcolortool/
最後一個工具,可以讓你調暗或調亮任何顏色。有很多情況下,你有一個顏色,然後你想要一個只是有點深或淺的顏色,例如,在爲按鈕尋找背景顏色時。
現在我們已經到了這個列表的末尾,我希望你已經學會了一兩個工具,它們可以使你的生活更輕鬆一些。
你認爲這個列表中缺少了什麼好工具嗎?讓我知道!