ツールキット - ページ 28

Webアニメーション 長い道のりを歩んできました。開発者はCSS / SVG / JSのコンボを使ってアニメーションを作ることができるだけでなく、 何十もの無料ライブラリ プロセスの時間を節約する. 私のお気に入りの一つは Anime.js, 完全に無料のオープンソース JavaScriptアニメーションライブラリ. このライブラリは 全部やる. それは JavaScriptで構築された しかしそれも CSSアニメーションに大きく依存している. 個々のページ要素をターゲティングできます DOM経由 またはあなたもターゲットにすることができます カスタムSVG. すべてのドキュメントは GitHubでセルフホスト, だからあなたは正確にあなたが探しているものを見つけるためにスクロールする必要があるかもしれません。しかし各アニメーション機能 いくつかのパラメータが付属しています 遅延、期間、緩和など. このライブラリに注意してください 来ない 多くのデフォルトのアニメーションスタイルで。...

できることはたくさんあります Chrome DevTools ライブWebサイトの編集から詳細なHTTPリクエストの調査まで。しかし CSSパターンを分析する機能 コンソールに焼き付けられていない. あり CSS Dig, あなたはすべてを分析することができます CSSセレクター, 特異性, そして ユニークな特性 Chromeから直接任意のWebページの。この拡張機能は完全に無料で、フロントエンドの開発者に大きな力を提供します。. スタイルシートを調べると、CSS Digパネルからたくさんのデータが得られます。それはあなたを見ることができます 個々のセレクタ, 含む 重複 そして 不必要な特定性レベル. はじめに、 プラグインをインストールする そしてコンソールウィンドウを開きます。あなたは見つけるでしょう 2つのタブ CSS Digウィンドウで： プロパティ そして...

多くのWebアプリケーション ユーザー入力をサポート ユーザーが自分のテキストをフォーマットして編集できるようにすると便利です。太字のテキスト、見出し、リンク、下線、これらの機能はすべて、通常、設定に生のHTMLが必要です。. とともに 物質フレームワーク, あなたはできる 幅広い編集機能をサポート, 1つのスクリプトですべて. Substanceは単なるプラグインやWeb用の簡単なテキスト編集GUIではありません。それは フレームワーク全体 に建てられた Webベースのエディタをサポートする. これは基本的なCSSライブラリを使用しても可能ですが、これは決して簡単ではありませんでした。物質は インストールが簡単 そして 機能のトンが付属しています あなたはあなたのサイトのニーズに基づいて実行する（あるいは実行しない）ことを選択できます. これを実際に見たい場合は、例題ページをご覧ください。それはからほとんどすべてをサポートしています 画像のアップロード に カスタム絵文字 そしてさらに Webコンテンツのインラインフォーム. 現在のベータ6では、このフレームワークは絶対に巨大です。私はそれだと思います 生産現場の準備ができて そしてそれはStencilaのような多くの大きなウェブアプリケーションですでに使われています。しかし、どういうわけか、このフレームワークは主要な開発者コミュニティの亀裂を抜け出しました. それは持っています フルGitHubレポジトリ ブラウザサポートとカスタムオプションの一覧表. すべてのファイルは...

TechCrunchやMashableのような大規模サイトでは、この機能が多く見られるでしょう。記事を読んでいると、文全体が リンクのように強調表示. それでも、クリックすると ツイートウィンドウを開く そのテキストスニペットをTwitterのフォロワーと共有するように依頼してください。それは素晴らしい方法です あなたのサイトへのトラフィックを促進する そしてより多くのソーシャルシェアを奨励する. この効果をあなたのサイトに再現するには、 InlineTweet.js. この機能をページに追加することで、セットアップ時間を節約できます。. この無料のJavaScriptプラグインはインストールがとても簡単で、それも持っています 無料のWordPressプラグイン あなたがそのルートを好む場合. それ JavaScriptの依存関係は必要ありません, だからあなたはこのsans-jQueryを実行することができます. すべてのコンテンツ作品 データ属性を通じて直接, あなたのコンテンツに基づいて、あなたはこれらを一つずつ設定するでしょう。当然のことながら、WordPressプラグインはこれをずっと簡単にするので、もっと制御したいのならこれは素晴らしい選択肢です。. メインのスクリプトページには、 いくつかのコードスニペット これがどのように機能するかを示す. あなたは、あなたのページにJSスクリプトを含めて、あなたのスタイルシートにいくつかのCSSをコピーする必要があります（3ブロックのみ）。そこから、できます HTMLコードを追加する このような： Lorem Khaled Ipsumは成功への大きな鍵です の 必須項目のみ...

ほとんどのブラウザは CTRL + F機能 ユーザーが探しているものは何でも検索して見つけます。しかし、この機能 モバイルデバイスではサポートされていません 動的テキストを使用してもうまく機能しません. 幸いなことに、 Mark.js, を追加する無料のJavaScriptプラグイン ハイライト検索機能 簡単に任意のページに. デフォルトでは、 バニラJSプラグイン 実行することもできます jQueryの上に. これは完全にオープンソースのプロジェクトなので、コマーシャルまたはその他のウェブサイトで自由に使用できます。. それは余分な機能が付属していることを除いて、他のブラウザ検索機能とよく似た働きをします。あなたは付け加えられます あなた自身のカスタムフィルタ に基づいて単語を検索 正規表現, 特定の同義語, そしてでさえ 動的ページ要素 iframeなど. はじめに、Mark.jsファイルをダウンロードするだけです。 GitHubから またはファイルをホストする CDNを通じて 時間を節約するために....

私たちのほとんどはプログレスバーについて、そしてこれらがUIデザインでどのように機能するのかを知っています。彼らはに役立ちます ページロード時間、アップロードフォーム、および同様の遅延期間を定義する ページ間. しかし 進捗ステップ 少し違います。これらはページ上部のブレッドクラムのように機能し、ユーザーをステップバイステップで案内します（通常はサインアップおよびチェックアウトのフォーム）。. jQueryのステップであなたがすることができます 任意のページにカスタムの進捗手順をすばやく追加する あなたのサイトの. プラグイン全体がjQuery上で動作し、GitHubから無料でリリースされています. あなたはこれらを実行することができます 複数ページの機能としての進行手順 それはあなたのサイトの異なるページを通して訪問者を導きます。あるいは、ユーザーを動かすAjaxステップのようにこれを実行することもできます。 同じページを通して 動的フォームフィールドを使用する. プラグインのオプションには、 “開始” 位置、フッターボタン、進む/戻るボタン、その他たくさん. ユーザーがプログレスステップを進めたとき、またはユーザーが最後に到達したときはいつでも、独自のカスタムコールバック関数でターゲットにできるイベントもかなりあります。. すべてのことを考慮し、これはかなり新しいプラグインですので、それは から選択するオプションのトンがありません. しかし、それは間違いなくこれらのカスタムプログレスステップ機能を作成するために見つけることができるでしょう最高のプラグインの一つです。. ちょっと注意してください。ブラウザのサポートはほとんど現代のブラウザに限られています、そしてマイクロソフトのブラウザのためにこれはIE 11でテストされているだけです。レガシーユーザーを処理するための代替メソッド. 確かに 私が今まで見た中で最も簡単な進歩ステッププラグイン そしてそれは他のjQueryプラグインでもうまくいくはずです。. カスタムJSオプションとダウンロードボタンを使用して、ライブデモのホームページを簡単に確認して、自分用のコードのコピーを取得してください。.

毎日あるようです たくさんの新しいツールとライブラリ オンラインで公開されました。しかし、そこにはたくさんのデータがあります。 追いつくのはほとんど不可能. GitHubコミュニティはそのような例です。 新しいリポジトリが追加されました ずっと。プロジェクトは次第に人気を集め、Web上で細流化していますが、それでもまだ それらを見つけるのは難しい. 無料で Githuntエクステンション, あなたははるかに簡単な時間を過ごすでしょう 最新のレポを見つける 好きな言語に. Githuntをインストールすると、 人気のあるレポのリストを入手する Chromeで新しいタブを開くたびに。上記の画面のようになります。ソートできます 決められた時間までに （毎週、毎月、または毎年）そしてそれはまたあなたをソートすることができます 言語をコーディングすることによって. GitHubは何十もの言語を提供しているので、何を決めるべきかを知るのは難しいかもしれません。もしあなたがフロントエンドの開発者なら CSS または JavaScript 最も理にかなっているでしょう。バックエンド開発者は、好きな言語を好みます。 Python または ルビー または PHP. 注目すべき1つのことは、GitHubには...

インラインツールチップ 素晴らしいですが、時には彼らは特定のコンテンツにうまく適合しないことがあります。ほとんどのウェブサイトはページ本文に沿って余白にスペースを残しており、これは追加するのに最適です。 ツールチップのないツールチップスタイルのコンテンツ. 入る 余白, 無料のオープンソースのjQueryプラグイン カスタムメモを余白に追加します あなたのWebページの。リンクやページ上の特定の要素（画像など）に基づいてこれらのメモを切り替えることができます。. このプラグインは設定が驚くほど簡単で、それは付属しています デフォルトスタイルシート あなたのマージンノートのために。これらが現れる 横へ あなたのコンテンツとあなたのWebページの段落要素のすぐ隣に並んでいる. ホバーノートは 手動で追加 あなたのHTML要素に, を使って desc 属性. 私はこれをHTML 5で見たことがないので、完全に準拠しているかどうかはわかりません。しかし、それはあなたが本当に必要とするすべてであるJavaScriptによって拾われるのですか. あなたもすることができます この属性を変更する 実行すると marginotes（） 関数なので、次のように変更できます。 データ記述 より準拠したい場合. これが 1行のjQuery...