ツールキット - ページ 4

フロントエンドフレームワークを選ぶとき、あなたは通常美学を最初に見るでしょう。誤解しないでください、美学は重要です! しかしあなたのウェブサイトの 性能はデザインと同じくらい使いやすさにとって重要です。 あなたのページのブートストラップのような多くのフレームワークでは、パフォーマンスとデザインのみを選ぶことができます。. トップコートは違います。それは焦点を当てながら使いやすさを念頭に置いて設計されています パフォーマンスが重視される. 実際、Topcoatは性能テストが行​​われており、新しいコンポーネントはすべて最速のロード時間を確保するためにスピードトライアルを実行します。. トップコートの素晴らしいところは、軽量でもミニマリストでもないということです。. あなたはまだ持っています ボタンからタブまでのコンポーネントの巨大なライブラリへのアクセス, チェックボックス、フォームフィールド、およびオン/オフスイッチ（他の多くの要素の中で）. このライブラリにはCSSとJSファイルが付属しています。これを使用するためにページに含めるだけです。 TwitterのBootstrapほど複雑なもの、そして確かに複雑なものは何もない. コンポーネントライブラリはBootstrapよりも小さく感じられるかもしれません、そしてそれはより軽いことを意味します。ただし、ページ構造が優れているため、Topcoatは新しいサイトの優れたフレームワークになります。 スピードを気にする 最初. TopcoatはBEM命名規則を使用します。BEM命名規則は、コードを体系化するために作られた多くの一般的なCSS記述スタイルの1つです。 Topcoatのスタイルシートを拡張したいのであれば、これを学ぶのは難しいかもしれませんが、コーディングプロセスをかなりクリアするでしょう。. また、Topcoatを使用すると、ページのコンポーネントを編集または再設計する場合に、PSDファイルにフルアクセスできます。かなりクール! からのすべて カスタムアイコンセットへのカスタムスタイルはTopcoatに同梱されています. パフォーマンスに明確に焦点を絞った、最もクリーンなフロントエンドフレームワークです。. 詳細については、トップコートのWebサイトを参照してください。また、メインのGitHubレポジトリでセットアップ手順とソースファイルへのダウンロードリンクを確認してください。. Twitterアカウント@topcoatで自分の考えをチームと共有することもできます。.

生産的なチームも通常よく管理されています。ここに表示される2つのキーワードは「生産的」と「管理されている」です。そのため、設計チームが生産性に関する優れたヒントと管理原則を順守しています。. ここでは、Webデザイナーやデザインチームにとっての生産性に関するヒントと、より高品質の作業をより頻繁に行うのに役立つチーム管理の原則について説明します。見てみましょう. Webデザイナーとデザインチームの生産性向上のためのヒント 最初からそれはおそらく最善です 期待される成果を明確にする.•混乱や曖昧な期待は、 あいまいまたは意図しない結果 プロジェクトを引渡し日の真ん中または非常に近くで先導している. これを行うには、それが不可欠です コミュニケーションを開いておく. 気軽に質問できるチームメンバー 公然と誠実に懸念を表明する, あなたの目標のために戦い、あなたの約束を果たすことができる幸せな戦士になりやすい. それはまた重要です チームメンバーに自治権を与える.•自分たちがしていることの所有権を彼らに与えます。チームメンバーにあたかものように感じさせる 彼らは自分たちのために、そしてチームのために働いています. ミーティングを再考する.時々、最高の会議は会議ではありません。会議が必要な場合は チームの努力を支援する. 最後に、私たちは好きなものをすべて計画することができますが、時には物事が計画通りに進むことを拒否することもあります。これは、ダウンタイムを予約したときです。 プロジェクトの結果にとって重要になる可能性があります, 特に テンポの速い24時間365日の職場環境. 事前にダウンタイムを予約することで、すべてを管理下に置くことができます。. これらのチーム管理の原則を遵守する を雇う スマートスケジューリングシステム 両方をスケジュールする 労働時間 そして ダウンタイム. メンバーを最新に保つ...

ツールチップは、余分なコンテンツを少しだけ表示するのに役立ちます。それらはページ上のスペースを節約し、人々の注意を引く何かをアニメ化するための空間をあなたに与えます。. これまではツールチップスクリプトを取り上げましたが、多くの開発者はカスタムライブラリを望んでいます。 jQueryを好む人もあれば、単純なvanilla JSが欲しい人もいます. Tippyプラグインは後者のグループに最適です。 バニラJSコードで作業したい人. Tippy.jsを使えば 完全に機能するツールチップライブラリ Popper.jsの上で動作しています。つまり、プラグインには小さな依存関係がありますが、jQueryライブラリよりも管理がはるかに簡単です。. それで、Tippyの美しさは何ですか？それは作成するデフォルトのPopperスタイルに追加されます より動的なツールチップ 素晴らしい効果を. フェード、スライド、ウィグル、カスタムデュレーション、コールバックメソッド、さらには自動回転ツールチップのような動的効果も追加できます。. 本当にこのプラグインは、明確に定義されたユーザビリティ機能であなたのツールチップをまったく新しいレベルに引き上げるでしょう。あなたは保つことができます 特定のページ要素を含む画面に固定されたツールチップ, あるいは、画面が小さくなりすぎると向きを変えます。. また、タッチデバイスをサポートしているため、レスポンシブレイアウトに最適です。ツールチップHTMLは、最大限のアクセシビリティを実現するためにARIA標準を使用してラベル付けされています。私はこのプラグインについて言うのが悪いことは考えられません! あなたがあなた自身のサイトでこれを試してみたいのであれば、GitHubからソースコードのコピーをダウンロードするだけです。これには、npmを使ったインストール方法の詳細とともに、メインのプラグインファイルが含まれています。. デフォルトのTippy.jsスクリプトファイルにはPopper.jsが含まれているので、追加のライブラリをダウンロードする必要すらありません。必要なのは、デフォルトのJS / CSSファイルとツールチップを実行するためのWebページだけです。. いくつかの例を詳しく調べたい場合は、ライブサンプルとコードスニペットを含むTippy.jsのホームページを見てください。コピーして再利用できます。.

モーダルウィンドウはすぐにデフォルトのブラウザ警告ボックスに置き換わりました。うまく設計されたモーダルは、優れたユーザーエクスペリエンスとより互換性があります。 モーダルウィンドウには多くのカスタムエフェクトとデザインが付属しています. 純粋なCSSモーダルを構築することは可能ですが、これらはしばしば特定のものを欠いています Je ne Sais quoi JSで動くスクリプトで見つかるでしょう. そして私のお気に入りの1つはTingle.jsです。これは、シンプルなWebサイト用に構築された無料のJavaScriptモーダルウィンドウです。. このライブラリはしばらく前から出回っていましたが、それでも技術的にはv1.0開発段階にあり、頻繁に改良が行われています。. しかし、それは 純粋なvanilla JSで動作する安定したスクリプト だからあなたはどこでもこれを使用することができます。 ECMAScriptに関する知識がなくても、TypeScriptのような高レベルのライブラリも必要ありません。. Tingle.jsのすべてはよく文書化されており、アニメーション、ボタン効果、およびコールバック関数をカスタマイズするための明確なAPIも付属しています。. GitHubレポジトリを見てください。 メインAPIへのリンクを含む詳細情報 これらはすべてTingle.jsのホームページで詳細に説明されています。. あなたがJavaScriptの編集を快適に感じているなら、あなたはこのプラグインを好きになるでしょう。作業はとても簡単で、CSSコードは自分のスタイルシートで上書きするのがさらに簡単です。. 主な文書はあなたができる実際の例で明確に概説されています HTMLにコピー/貼り付け. Tingle.jsはかなり簡単なスクリプトです。あなたはそれが機能する方法が好きか、あなたは好きではないでしょう。. メインのデモページに数分であなたはこれが好きかどうかを伝えることができるはずです。ユーザーから情報を取得したい場合は、ユーザー入力フィールドとともに必要な数のボタンをサポートします。. それにこれでうまくいく サービスの面で巨大な長いモーダル, カスタムアラートメッセージ、さらには画像やビデオの埋め込まれたコンテンツ. 確かにそこで最もよくサポートされているモーダルウィンドウの1つで、すっきりとしたデザインはどんなレイアウトにも簡単に作り直すことができます。.

キーボードショートカットは、マッスルメモリと習慣として根付くまでの繰り返しです。しかし、そこから選ぶべきたくさんのデザインソフトウェアでは、 すべてのショートカットを暗記することはできません. それがShortcuts.designの美しさです。このサイトはすべての主要な設計プログラムのための近道の最大のリストを提供します。最近では、Sublime Textのような開発者向けIDEのショートカットも追加されました。. ホームページから、できます 3つのカテゴリーから探す：デザインプログラム、開発プログラム、その他. ご想像のとおり、デザインカテゴリには他のどのキーボードショートカットよりもはるかに多くのショートカットがあります。そして狂ったことはこのサイトさえ完全ではないということです! これを書いている時点では、以下のプログラムのキーボードショートカットを閲覧することができます。 フォトショップ イラストレーター InDesign アドビXD スケッチ 原理 フィグマ インビジョン 他の多くの一般的なデザインプログラムがリストされていますが、アイコンはグレーアウトされています。だからこれらのプログラムは明らかに将来的に彼ら自身のページのために整理されている. ショートカットページのいずれかを詳しく調べると、機能ごとにまとめられたショートカットのブロックがあります。一般的なショートカット、タイポグラフィ、レイヤー管理、すべてここにあります. できます Ctrl + Fキーを押してアクションを見つけます。 ショートカットしたい. そして、デザイナーがこれらの種類のリソースを無料でリリースするのを見るのは素晴らしいことだと私は言わなければなりません。私たちがデザインコミュニティに貢献するほど、新規参入者の参入が容易になります。これはコミュニティがより速く成長し、将来のデザイナーのための強固な基盤を築くのに役立ちます。. メインのWebサイトにアクセスして、見て回ってください。私はそれだと思う あなたのショートカットを習得するための便利なリソース それはあなたの好みのプログラムに関係なくすべてのデザイナーを助けることができ.

何回記事を開き、数センチの文章を読み、そして別のタブを閲覧するために離れてクリックしますか？私はこれを毎日犯しています。それほど簡単ではありません 訪問者の注意を引く そしてそれが理由 Don't Goスクリプト とても価値があります. このスクリプトをあなたのページに追加することで、次のことができます。 自動的に更新する ページが現在表示されていないときはいつでもあなたのサイトのfaviconとページタイトル. あなたは見ることができます ライブデモ こことそれはかなり単純なものです。ブラウザでページを開いてから別のタブに移動するだけです。数秒以内に ページのfaviconがタイトルとともに変わります. これはすべて起こる 動的に, JavaScriptを使用するので、ページが再びアクティブになるとすべてが元に戻ります。ご想像のとおり、このスクリプトは セットアップがとても簡単. 必要です 3つの設定： タイトル - 新しいページのタイトル ファビコン - 新しいfaviconのURL タイムアウト - ユーザーが切り替えを行うまでの合計遅延時間（秒） に注意してください 必要な値だけ...

すべてのWebサーバーには、次の形式があります。 CHMOD これはの略 モード変更. それはあなたをすることができます 特定のフォルダ/ファイルの権限を変更する, システム内の各ユーザーに基づく. CHMODは、すべての開発者がコマンドラインを学ぶ必要がある主な理由の1つです。それはの大部分です ウェブサイトのメンテナンス そして あなた自身のサーバーで作業する. しかし、のようなツールで このCHMOD電卓, あなたは簡単な時間を過ごすでしょう 最初から適切なコマンドを作成する. それは余分な機能のトンを提供していますので、これは最も広範な電卓の一つです。あなたはできる 権限を直接設定する 3つの一般的なアクションを使います。 読む 書きます 実行する あなたもすることができます フラグを追加する より高度な機能を定義するために、すべて単一のGUIから。これらのフラグは 再帰的な機能 フォルダ内のすべてに設定が適用されます. あなたはできる コンテンツ出力を定義する のようなフラグを使って --冗長な...

探している カスタムチェックボックスUIスタイル あなたのウェブサイトのために？でのぞき見をする CSSチェックボックスライブラリ GitHubで無料でホスト. この大規模図書館 チェックボックス項目のスタイルを多数サポートしています, スライダー、オン/オフデザイン、他の多くの形状の中の円と四角形など. 君は HTML / CSSコードへのフルアクセスを取得する, それであなたのサイトでそれを立ち上げて実行するのは簡単です。言うまでもなく、それはまた完全にオープンソース化されています。 個人用と商用の両方のプロジェクトで利用可能. はじめに、GitHubリポジトリにアクセスして すべてのファイルを自分のマシンにローカルにダウンロードする. あるいは、npm経由でライブラリをインストールすることもできます。. デフォルトで, すべてのチェックボックススタイルには独自のクラスがあります. の checkboxes.min.css スタイルシートには必要なものがすべて揃っているので、それがあなたのページに含まれていれば、すべて設定済みです。. すべてのチェックボックススタイル 最新のブラウザと、IE9を含むほとんどのレガシーブラウザをサポートします。+. このライブラリのワークフローは、おそらく私が今まで見た中で最も簡単なものです。スタイルシートをページに追加したら、 メインデモのすべてのスタイルを掘り下げる そして際立っているものを見てください. そこから、あなたは最もうまくいくものなら何でも選ぶことができます。 HTMLボタンをクリックする そのチェックボックスのソースコードを含むモーダルを表示します。....