🚀🚀フロントエンド開発のスキルをプロレベルに引き上げるための10のウェブサイトやアプリ
2020年7月24日に投稿、2021年6月17日に更新
これらは私がフロントエンド開発にめちゃくちゃ役立つと見つけたサイトやアプリ・拡張機能です。
これらはあなたの開発速度を5倍にするかもしれません。
トップに置きたいのは、こちらのアプリです。オープンソースのElectronアプリで、様々な電話機や画面でどのように見えるかのレスポンシブ性をチェックできます。
それだけじゃなくて、こう考えてみてください。CSSコードをインスペクトして追加すると、すべての画面で変更され、一つのウィンドウで、どうやってそのコードがすべてのレスポンシブスクリーンに影響したのかを確認できるんです！
これ以上クールにはなりませんね😎
GithubのURL : https://github.com/manojVivek/responsively-app
これは現代の在宅勤務パターンでのワークライフバランスを保つための補助アプリです。水分補給をするのに役立ち、また素早く正確な休憩を取るのにも役立ちます。
GithubのURL : https://github.com/karthick3018/wfh-mate
ResposivelyはProduct Huntで1位のバッジを獲得しましたが、こちらは2位のバッジホルダーです。
現代のデザインの世界では、波や曲線などの多くの背景やフローティングシェイプがあります。
このアプリは、様々な形状を簡単に作るのに役立ち、形状のCSSを生成できます。
Appのリンク : https://www.shapedivider.app/
テキストやその他の要素にスタイルとアニメーションを使用する場合、アニメーションが最初にユーザーの注目を引きます。僕だってまずそこ見ちゃいます😂
Animistaが役に立ちますよ。たくさんのアニメーションテンプレートがあるから、好きなのを選んで、どう動くのかをチェックできます。箱から出してすぐに、特定のアニメーション用のCSSを生成します。アニメーションも今や簡単です:man-shrugging:
App Link: https://animista.net/
これが私が2年前に見た、唯一のborder-radiusのコードまたはテンプレートです。border-radius:10px または border-radius:50%
しかし現在は、今日のデザインでは複数のボーダー形状が進歩しています。デザインは素敵だけど、要素をインスペクトするだけで、どうやってそれを作ればいいのか？:face_with_rolling_eyes:
このサイトは最近私のborder-radiusの問題を解決してくれました。さあ、簡単だから、色々なボーダーラジアスを試してみましょう。
Site Link : https://9elements.github.io/fancy-border-radius/
グラデーションカラーは、背景などによく使用されます。同じインスペクトはあまり役に立ちません。でもCss-maticならクールなグラデーションを生成するのに役立ちます。
私の最近の投稿では、このサイトを使って背景を作りました。それはクールでした。
他のことも扱えますよ。ボックスシャドウ、ボーダーラジアス、ノイズテクスチャなどです。
Site Link : https://www.cssmatic.com/
CSS Clip pathは、border-radiusを使用する以外に、SVGや画像の形を整えるために使用されます。利用可能な幾何学的形状を生成するのに使用できます。
このサイトは形をクリッピングして、その形のCSS値を生成するのに役立ちます。
App link : https://bennettfeely.com/clippy/
これらはいくつかのCSSで作られた形ですが、テンプレートとして活用できます。まあ、ここから最近台形をコピーしました。
App link : https://css-tricks.com/the-shapes-of-css/
アイコンは、SVGであろうとFont Awesomeからであろうと、ウェブサイトの製作に欠かせないものです。
このサイトには限られた数のアイコンがありますが、無料で利用できる主要なアイコンを網羅しています。
App link : https://heroicons.dev/
私たちは日々のウェブサーフィンで多くのサイトを見ますが、中には私たちに影響を与えるフォントがあります。このシンプルなChrome拡張機能を使えば、任意のサイトで使用されているフォントを簡単に見つけ出すことができます。
App link : https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
文字選びと同じで、色選びもこれです。まあ、すでに使っている人も多いでしょうが、こちらにも書いておきます。
App link : https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en
このサイトにはボックスシャドウの一覧があります。
https://getcssscan.com/css-box-shadow-examples
このGitHubリポジトリには、ウェブサイトの開発に役立つ他のリンクやリソースのリストがあります
https://github.com/bradtraversy/design-resources-for-developers
他にもあなたを驚かせたリソースをシェアしてください
Githubで私の開発プロジェクトをチェックして github
Codepenで私のスタイルをチェックして codepen
Twitterをフォローして twitter
LinkedInで繋がって linkedIn
お時間をいただきありがとうございます
ハッピーなコーディングを！シェアを続けてください
安全に過ごしてください
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/karthick30/10-sites-or-apps-that-can-make-your-frontend-development-to-pro-level-459p
