ツールキット - ページ 9

の ポケモンの人気 減速の兆候は見られず、90年代から今日に至るまで、何世代にもわたります。多くの開発者はこれらのゲームを愛し、多くの場合、 表示情報 そして データを共有する ゲームから. これがの目標です ポケアピ, 無料 RESTful API のために特別に作られた ポケモンゲーム情報. それははるかに無料のポケモン情報の最大のデータベースであり、APIは完全に無料で使用できます. 多くの開発者がすでに作成しています 単純なAPIラッパー あなたがより早くアプリを構築するのを助けるために。それらはすべてのプログラミング言語で利用できるわけではありませんが、ここで最も人気があります。 PHP開発者は使用することができます PokePHP ノード開発者が使用できる Pokedexの約束 迅速な開発者が使用することができます ポケモンキット 私はAndroid用のJavaラッパーやバックエンドWeb作業用のRuby / Pythonラッパーを見つけたことはありませんが、将来的には他の開発者がこれらのライブラリーを構築するのに十分親切になるでしょう. あなたが訪問した場合 ドキュメントページ あなたは見つけるでしょう...

常に忙しい私たちのうちの何人かにとって、通知は私たちをあらゆる重要な出来事、ニュースビットや情報の上に保っています。最新の出来事をお知らせするために管理している間の待ち時間が短縮されます。デスクトップとモバイルの両方で通知が届くのも当然です。. しかしながらあなたがあなたのサイトのために通知を作成したいなら、あなたはPNotifyと呼ばれるこのプラグインを使ってそれを簡単に作成することができます。それはたくさんのオプションを持つ無料でオープンソースのjavascriptプラグインであり、そしてそれは使いやすいです。 PNotifyを使えば、最大1000個の通知を一度に表示することもできます（試してみるには、このベンチマークテストを参照してください）。なんてかっこいいですか? PNotifyを使う理由? 以前はPines Notifyと呼ばれていたPNotifyには、主に3つの通知タイプがあります。 情報, 通知 そして エラー. それは機能、効果、テーマそしてスタイルの束を持っています。 Bootstrap、jQuery UI、Font Awesomeからさまざまなスタイルを選択することも、独自のスタイルを使用することもできます。あなたが選ぶことができる（Bootswatchで作られた）約18の既製のテーマもありますそして移行効果さえあります. PNotifyの素晴らしいところは、それが素晴らしいグラフィック機能を持っているだけでなく、強力で豊富なAPI（あるいはモジュール）で強化されているということです。これらのAPIには、デスクトップ通知（Web Notifications Draft標準に基づく）、動的更新のサポート、さまざまなイベントのコールバック、以前の通知を確認するための履歴ビューア、およびタイトルと本文のHTMLサポートが含まれます。. PNotify を提供します 控えめな通知 つまり、通知を消さずに通知の背後にある任意の要素をクリックできます。また、Stacks機能を使用して通知を表示する場所を決定することもできます。これにより、通知をあらゆる場所に配置できます。上下のバースタイルまたはツールチップとして. 基本的な使い方 PNotifyのソースはカスタマイズ可能なバンドルモジュールに入っていてここから入手できます。. 入門 ソースを入手したら、次のようにそれらをHTMLに含めます。 PNotifyはとても使いやすいです。これは簡単な通知です。 $（function（）new PNotify（タイトル： 'Simple Notification'、テキスト：...

一部の開発者は、その機能豊富なスタイルのために、Bootstrapなどの詳細なUIライブラリを好みます。しかし、のために作られた多くの小さなCSSライブラリ 微妙なデザインの美学 そして カスタマイズ. あなたが探しているなら 小さくてもスタイリッシュなCSSライブラリ 私はお勧め ピクニックCSS. それは完全に無料の、オープンソースであり、そしてシンプルでエレガントなスタイルであなたのページをジャズアップするために多くの編集なしで動作します. すべてのネイティブHTML要素は デフォルトで再調整, だからあなたもクラスに頼る必要はありません。 PicnicスタイルシートをWebページに追加して更新するだけです。あなたは、すべてのフォーム、ボタン、そしてタイポグラフィ要素がすべて新しい外観になっているのに気付くでしょう。. しかし、もちろん、この図書館 モジュール設計をサポートしていますか すべてをカスタマイズするためのオプション付き。それは すべてSassで書かれて, それで、あなたは本当にコードを通して働くためにSass開発者である必要があります. デフォルトのタイポグラフィ、クラス、グリッドシステム、およびページ要素のスタイリングとカラーリングに使用される変数にアクセスできます。. ピクニックCSSも信じられないほど小さくなるように構築された サイズはわずか10KB 縮小時これは約1/10です番目 Bootstrapを使用しても、カスタムUIフレームワークに期待される魅力をすべて備えています。. これは小さな図書館なので、 動的な機能はありません. しかし、あなたはボタン、ヘッダー、カード、入力、タブと他の同様の要素を含むテストページの例を見ることができます. モーダルやタブなどの動的要素, 純粋なCSSで作業する. そのため、JavaScriptを完全に無視して準拠Webサイトを構築することもできます。かなりクール! 私はデフォルトのピクニックスタイルはちょっと当たり障りのないものだと思うので、彼らはいくらかのレタッチを使うことができました。しかし、全体的に見て、私はこのライブラリを崇拝しています。それは、正しいプロジェクトを立ち上げる最も簡単な方法の1つです。....

インスタグラム 最も人気のある写真ネットワークとして広く知られています。 1日あたり5200万枚以上の写真を処理し、それらの多くは フィルタを含める その場で画像を変更する. これはCSSフィルタを使っても可能です。 ブラウザで直接適用する. これらのカスタムフィルタプロパティは、多くのブラウザで幅広くサポートされていて、見栄えがします。. とともに Philter JavaScriptプラグイン, このプロセスを拡張して時間を節約し、コードをHTMLに変換することができます。 動的フィルタ効果. このプラグインを使用することで、あなたは得ます あなたのイメージをはるかによくコントロール. これにより、個々の画像に適用するフィルタを選択したり、ホバーリングなどのユーザの行動に基づいて特定のフィルタを変更するかどうかを選択できます。. CSS アニメーショントランジションをサポート そしてPhilterはこのプロセスをとても簡単にします。あなたは、ホームページまたはGitHubリポジトリからPhilterをダウンロードするだけです。 Webページに追加されたら、 初期化コードを追加する そしてそれを手放す. これが サンプルスニペット GitHubリポジトリから： デフォルトでは、 遷移と追加のデータ属性を設定する HTMLに追加できることの URL パラメータは、フィルタ処理で使用されるカスタムSVGファイルをPhilterが探す場所のパスを定義します。....

視差効果 早く注意を引く。これらの効果 特定の背景を視野に入れる ページをスクロールしながら。あなたは多くのウェブサイトとWordPressテーマで視差スクロールを見つけるでしょう、そしてそれらは現代のウェブデザインの大部分です. あなたも作ることができます ユニークな視差スタイル を使用して StickyStack.js プラグインそれは jQueryの上に構築された スクロールダウンしても、メインページの各セクションは上部に固定されたままになります。. これにより、 階層化されたWebサイトの錯覚 各ページの場所 “スタック” 他の上に。それは本当にクールで自分でセットアップするのはかなり簡単です. 設定はかなり簡単ですが、フロントエンド開発についてある程度理解する必要があります。. あなたが最初にする必要があります 個々のページセクションを作成する メインコンテナ内このように HTMLで囲まれたものすべて, だからあなたはStickyStackのjQuery関数ですべてをターゲットにすることができます. それはまたあなたがカスタマイズすることができる少数の選択と来る。 親コンテナ, の 積み重ねるべき要素, そして可能 ボックス影 あなたがその効果が好きなら. これが...

ほとんどの開発者は、サイトを完全に最初から構築することを望みません。これには2つの選択肢があります：フロントエンドフレームワークを使うかカスタムリセットを使うか. 最も一般的なリセットは すべてのブラウザのデフォルトスタイルをフォーマットする正規化 同じで、異なるOSやブラウザ間で一貫性を保つのが簡単になります。. あなたがNormalizeを試してみるなら、おそらくそれを気に入るはずです。しかしNanoresetはスピードのために作られたもう一つの選択肢です. この無料のリセットライブラリは狂気を測定します 950バイト 縮小時これはおそらく私が今まで見た中で最小のリセットです。. それ すべての主要ブラウザをサポートし、すべての基本ページ要素をカスタマイズします すべてのレンダリングエンジン用。 Nanoreset CSSファイルをページに含めるか、コードミニファイヤーを使用してスタイルシートとマージします。. そして、この無料のリセットは使いやすいものではありませんでした。それはあなたができるようにパッケージマネージャnpmとヤーンを通して動作します ターミナルウィンドウから直接コピーをダウンロードする. または、オンラインCDNからコピーを入手して、読み込み時間を短縮することもできます。. CDNファイルでは、このリセットをCodePenや他のオンラインクラウドIDEに埋め込むこともできます。これにより、単一のファイルをダウンロードせずにブラウザでリセットをテストできます。. デフォルトでページがどのように見えるかを知りたい場合は、このデモもGitHubでホストされています。それは確かにきれいな視界ではありませんが、それはあなたがあなたが扱わなければならないデフォルトの考えをあなたに与えます. この ライブラリはMITライセンスの下でリリースされています オープンソースであり、あらゆる種類のWebプロジェクトで利用可能です。. 始めるために必要なものはすべてGitHubのメインリポジトリにありますので、Nanoresetを使って遊んでみてください。.

メニューを選択 原始的ですが、彼らは働きます。次のようなすべての典型的なフォーム入力についても同様です。 チェックボックス そして ラジオボタン. 独自のフォームを作成するのは簡単ですが ゼロからインターフェース要素を再構築 厳しいことができます。それが理由です Multi.js のような貴重なプラグインです デフォルトの選択ボックスを置き換える. Multi.jsでは、あなたは 訪問者に選ぶアイテムのリストを与える フォームに複数選択機能が組み込まれています。このようにしてユーザーはできる 複数のアイテムをクリック チェックボックスに頼らずに. このスクリプトも 検索機能をサポート, リストが特に長い場合、ユーザーはアイテムを検索できます。. メニューも直感的に分かりやすいので、 あまり説明する必要はない. 右側の列に追加するには、左側の項目をクリックします（または “選択された” アイテム）。次に、それらを削除するには、右側の列の項目をクリックしてください. すべてがバニラジャバスクリプトで動く, 検索機能を含むので、依存関係は必要ありません。しかし、それは jQueryをサポートしていますか あなたのサイトがそのライブラリを使っているなら. 必要なのはMulti.jsファイルとそれに付随するCSSスタイルシートだけです。次に、あなただけ を作成する...

あなたが十分に検索するなら、あなたは無料のフロントエンドWebフレームワークのトンを見つけることができます。それらはすべて自分たちの長所と短所がありますが、皆のための枠組みがあります. Mozilla Brickは 新しいフレームワークとそれはUIライブラリとして構築されています Webコンポーネント上で動作する. これらのコンポーネントは次のように動作します GoogleのPolymerライブラリに似た再利用可能なコード. ただし、Mozilla Brickを使用すると、UI要素とともに独自のコンポーネントのライブラリが1つの大きなパッケージにまとめられていることになります。. このライブラリに飛び込むと、他のライブラリとは異なる方法で構築されていることがすぐにわかります。. Mozillaが使う カスタム要素を記述する独自の言語 一緒にバンドルされたコンポーネントとして機能するレンガのように。あなたがあなたのページにたくさんのレンガを追加するなら、あなたはBowerのようなパッケージ管理ツールを使ってそれらを管理することができます. Mozilla BrickはPolymerの上で動作することができるので多目的なフレームワークです。本質的には、Brickを使用してページ上の特定のページ要素または特定のユーザーアクションを定義します。. 次にあなた これらのコンポーネントをHTMLのすぐ内側にある一般的なUI要素に接続します。. このように、あなたはまだBrickコンポーネントの上に標準に準拠した命名規則を使っています。. 現在はバージョン2.0で、GitHubにはリポジトリの全リストがあります。 Mozillaが作成しました このプロジェクト専用のGitHubアカウント だから情報を見つけるのに最適な場所です. カレンダーのUIからタブバー、カスタムカードのレイアウト、そしてBrickのメインのWebサイトコードまで、すべて揃っています。すべて 完全にアクセス可能なソースで無料でリリース. 各プロジェクトにはGitHubでホストされているライブデモが含まれているので、ドキュメントを詳しく調べると、これらすべてのリンクが見つかります。. あなたはBrickに入る前にWebコンポーネントにある程度の快適さを持つべきです。スーパーじゃない 初心者に優しい、それは本当にフロントエンドの開発者を対象としています 自分のWebアプリケーション用に事前設計されたコンポーネントが必要な人. それでも初心者でも自分でBrickで練習することでロープを学ぶことができます。図書館全体を理解するのに苦労するかもしれませんが、もっと練習すれば あなたが学ぶほど、そして簡単に...