ツールキット - ページ 29

たくさんあります 無料ズームプラグイン それは信じられないほどうまくいっています。しかし、これらのほとんどは 画像用に構築された そしてそれらは方向を指定します 画像のみのコンテンツ. できたら 拡大効果を加える あなたのWebページのあらゆる部分に？ありがとう jfMagnify, あなたはできる. それは 無料のjQueryプラグイン 画像のズーミングだけでなく、 ページ全体のズーム. それはまたあなたを可能にするいくつかのプラグインの一つです。 倍率を選択してください そして タッチイベントをサポート モバイルユーザー向け. このプラグインはちょっと重い感じがするので注意してください 2つの依存関係に依存している： 通常のjQuery そして jQueryのUI. これらは両方ともjfMagnifyを正しく動作させるために必要です。言うまでもありません 実際のjfMagnifyスクリプト あなたはあなたのページに含める必要があるでしょう. あなたは拡大された要素だけをターゲットにできるのでセットアップは少しトリッキーです。 コンテナ内....

無料のライブラリを探しています ドラッグ＆ドロップ機能を処理する? それから ドラキュラ あなたが必要とする唯一のリソース. この無料のスクリプトはあなたを可能にします ページ上の任意の要素にドラッグ＆ドロップ機能を追加する. これには、一般的なJavaScriptと共に、React＆AngularJSフレームワークのサポートが含まれます。. ドラキュラはセットアップがとても簡単で、付属しています ユーザーの行動に対する一連のカスタムトリガー. つまり、ユーザーがアイテムをドラッグしたり、アイテムをクリックしたり、ページの任意の部分を再配置したりした後で、独自の機能を起動できます。. ライブデモを覗いてみるとわかります いくつかのコードスニペット, に加えて 使えるサンプル. ドラキュラの設定 単一のJavaScriptファイルのみが必要 それを動かすために。ただし、追加のオプションは少し混乱を招く可能性があります。. たとえば、2つのコンテナがあるとしましょう。, ＃左 そして ＃右, ドラッグ可能なアイテムをサポートしたいあなたがする必要があります これらのコンテナをDragula関数に手動で追加する ドラッグ＆ドロップ方法をサポートする. フロントエンド開発の基本をしっかり理解していない場合は、Dragulaを使用するのに苦労します。しかし、GitHubリポジトリにはたくさんの情報があります。 あなたが一緒に従うことができる素晴らしい例 そしてさらに コピーできるコードスニペット. 以下はGitHubのドキュメントのサンプルです。...

すべての最高のIDEがあなたをさせてくれます インターフェースをカスタマイズする. 私は通常、暗いテーマは目に優しいのでコーディングに最適であると思います。. Sublime Textのようないくつかのプログラムは何十もの無料テーマでパッケージされています。しかし、すべてのプログラムがそのようなわけではないので、City Lightsはとてもクールなプロジェクトです。. これは ダークUIアセットの無料パック AtomまたはVisual Studio Codeソフトウェアに追加できます。. また、City Lightsを使用すると、単なる暗い構文の強調表示以上のものが得られます。実際にあります IDEをカスタマイズするために使用できるフリーアセットのライブラリ全体. これらには、カスタムアイコン、さらにはインターフェース全体の完全なGUIテーマさえも含めることができます。. AtomはUIをもっと細かく制御できるので、そのプログラムにはもっとやるべきことがあります。実際には、City Lightsはのパックを提供しています Atomに追加できる60のユニークなアイコン より視覚的なワークフローのために. MicrosoftのVisual Studio Codeでは、City Lightsシンタックスハイライトのみが得られます。しかし、それは私がコーディングに関して見た中でより優れたテーマの1つであり、あらゆるバックグラウンドのWeb開発者にとって完璧です. 詳細についてはVSCレポジトリを見てください。あなたが直接あなたのコンピュータにコピーをダウンロードしたいのであれば、端末から直接これを引き出すこともできます。. Atomの無料サービスには、それぞれ独自のGitHubリポジトリが付属しています。 構文の強調表示 カスタムアイコン フルUIテーマ あなたがこれらのIDEのどちらかのパワーユーザーなら、あなたはCity Lightsを好きになるでしょう....

開発ワークフローでSassを使用している場合、ミックスインの重要性がわかります。書かれていることがいくつかあるとき CSSで繰り返し退屈に, それがミックスインがあなたが繰り返し作業を防ぐのを助けることができるところです。ミックスインには、サイト全体で再利用できるCSS宣言が含まれています. 開発中にSassを使用するときに役立つように、開発者によって作られたミックスインはたくさんあります。大部分はCSSで頻繁に繰り返されることをカバーしています。から 複数のブラウザに適応する に ボタン、アニメーション、トランジション効果の作成, Sass開発に必要な以下の11のミックスインライブラリで、これ以上のものを見つけてください。. 1.バーボン Bourbonは、クロスブラウザで使用するためのスタイルシートの作成を簡単にするミックスイン、関数、およびアドオンを含むSassライブラリです。私にとって、これは最も素晴らしいSass mixinです。それはあなたのスタイルシートを軽量に保ちながらあなたがあなたのウェブサイトをスタイルするのに必要なほとんどすべてを含んでいます. 利用可能なそれぞれのミックスインと関数を使用するために完全なドキュメントをチェックしてください. Sass CSS3 Mixin Sass CSS3 Mixinは、異なるブラウザ間で動作するミックスインを提供します。背景、境界線、ボックス、列、フォントフェイス、変換、トランジション、アニメーションなど、ベストプラクティスのミックスインがここにたくさんあります。あなたのスタイリングニーズには十分です。使用するには、 css3-mixins.scss そしてCSSクラスのミックスインを呼び出します。. このmixinをここからダウンロードしてください. 3. CssOwl CssOwlは、要素の位置（相対的または絶対的）を設定し、擬似セレクターを使ってコンテンツを追加するための便利なミックスインを提供します（ ：後 そして ：前）スプライト要素を作成したい場合にも役立ちます。ミックスインを使用すると、スプライト内の画像位置を柔軟に設定できます。 Sassに加えて、CssOwlミックスインライブラリはLESSとStylusでも利用可能です。. 4.ブレークポイントセス ブレークポイントを使用すると、Sassを介して簡単にメディアクエリを実行できます。ブレークポイントを使用すると、変数を作成してそれを定義する値を与えることができます。...

ですから、たくさんの変数を持った大量のデータを持っているので、どういうわけか他の人に中継しなければなりません。生の未整理のデータは、理解するのが難しいでしょう。これがチャートの助けが必要な理由です。 Webデザインで, グラフはデータの視覚化に最適なツールの1つです。. 読みやすく、目に優しく、比較的セットアップが簡単です。. しかし、ノッチを取り上げましょう。 これらのチャートにアニメーションとインタラクティブ機能を追加する, 読者がチャートから何か新しいことを学ぶことができるだけでなく、それと共に遊ぶことができるように。そこにあるたくさんのJSライブラリーのおかげで、実際には思ったより簡単です。チェックしてみましょう. チャートJS Chart.js 折れ線グラフ、棒グラフ、レーダーチャート、極地域チャート、円グラフ、ドーナツチャートの6種類のチャートを作成するための依存関係のないライブラリです。ライブラリもチャートの種類に応じて分割されているので、不要なものがページに表示されることはありません。レスポンシブデザインをサポートし、色やアニメーションなどの変数を簡単に変更してチャートインターフェイスをカスタマイズできます。. 2.チャーティストJS チャーティストJS SVGを利用するレスポンシブチャートを作成するための素晴らしいライブラリです。その応答性に加えて、Chartistは懸念の明確な分離を使用することによってあなたに柔軟性を与えます：CSSによるスタイルとJSによるコントロール。カスタマイズを容易にするために、SASSファイルが含まれています。ここで素晴らしいことは、ChartistアニメーションAPIのSMILを使用してチャートをアニメーション化するための無限のオプションがあり、それによって追加のアニメーションオプションが得られることです。. 3. C3 JS C3 JS D3 JSに基づいてグラフを作成するためのライブラリです。 D3 JSを使ってチャートを作成するのに必要なコードをまとめているので、D3コードの作成をスキップしてデータを入力するだけで済みます。 C3には、チャートを簡単に制御するために使用できるさまざまなAPIが付属しています。チャートをカスタマイズするには、特定のCSSクラスに独自のカスタムスタイルを定義します。単純な折れ線チャートからゲージチャートまでチャートを作成します。このページをチェックして、図書館のしくみを確認してください。. 4.浮遊する 浮遊する シリーズのオン/オフ、データポイントのインタラクション、パン、ズームなどのインタラクティブな要素を持つチャートを作成するためのjQuery plguinです。 Flotにはさまざまなチャートタイプのオプションがあります。チャートにもっと機能を追加したい場合は、ここで使用できるプラグインもいくつかあります。チャートは、HTMLキャンバスをサポートするブラウザでうまく機能します。. 5. EChart...

魅力的でありながらアニメーションGIF アニメーションを表示するのに便利, JPG、PNG、その他の画像フォーマットよりはるかに多くの帯域幅を使い果たします。 GIFを頻繁に表示するサイトでは、これは必要な読み込み時間が長いことを意味します。つまり、ウェブサイトが完全に読み込まれるまでに時間がかかるようです. 幸いなことに、たくさんあります アニメーションGIFオプティマイザ それはに役立ちます GIFを圧縮して最適化する, サイズを最小限に抑えるこれにより、ページの読み込み速度にほとんど影響を与えない最適化されたGIFが得られます。これは、短いビデオの代わりとしても役立ちます。. これが私たちが見つけた最高のものです. オマティックシュリンク Shrink O'Maticは ドラッグアンドドロップGIF処理ツール これにより、画像の出力サイズ、回転、名前と場所、画像形式、透かしの追加、画像の比率などのカスタマイズオプションを選択できます。バッチモードで複数のGIF画像を処理できます. サポートされているその他の形式： JPG、PNG | サポートされているプラ​​ットフォーム： Windows ImageOptim ImageOptimは、元の品質を損なうことなくGIF画像を圧縮できるドラッグアンドドロップツールです。, 元のサイズの最大60〜80％. プログラムは、詰め込まれたメタデータと見えない目に見えないゴミを取り除き、不要なカラープロファイルも取り除きます。. サポートされているその他の形式： JPEG、PNG | サポートされているプラ​​ットフォーム： OS X...

PHPコードのデバッグに長い時間を費やしたことがありますか。まあ、ほとんどのプログラマーにとって、それはおそらく最も魅力的な挑戦ではありませんが、この面倒な作業を短縮するのに役立つ解決策があります。. 自動テスト PHP開発のワークフローを大幅に改善できます。 開発プロセスを推進するための事前作成テストの許可. この記事では、理解しようとします 自動テストがとてもクールな理由, それがどのように機能するのか、そして何があるのか 最高のテストフレームワーク あなたは始めることができます. テストが重要な理由 初心者のPHP開発者は自分のコードのテストを書かない傾向があります。私たちのほとんどは、ブラウザウィンドウに1つずつ書いたばかりの新しい機能をテストすることでキャリアを始めました。. 私たちのコードでテストを書くことは、貴重なデバッグ時間と頭痛の時間を節約することができます。. テストされていないコードが本番に入るとき、私たちが得るレビューはおそらくそれほど良くないでしょう。だから私たちにできること? おそらく最良のアイデアは 生産的なテストワークフローを確立する アプリケーションコードが正しく動作するかどうかを確認するためのテストコードを書く必要があります。. トリックはそれです テストコードはアプリケーションコードの前に書く必要があります. このようにして、私たちが書いたコードが最初から正しく動作することを保証することができます。テストコードは別々のファイルに入ります。後でPHPアプリケーションでエラーが発生した場合は、他に何もする必要はありません。うまくいけば、テストを実行してください。 問題についての適切なヒントをください。. 時間を節約し、本番用にアプリを適切に準備すること以外にも、テストには他にも多くの利点があります。 より保守しやすいコード 促進されたリファクタリング セキュリティ上の問題が少ない それほど肥大化していないコードベース（アプリケーションコードを事前に作成されたテストコードに適合させることで、余分な部分を省くことができます） よりよい性能 自動テストとは? もちろん、テストを手動で書くこともできますが、しばらくすると、多くの反復作業で面倒で時間がかかる可能性があります。手動テストは、私たちが面倒な仕事をする特定のソフトウェアを使用する自動テストに置き換えることができ、テストコードのロジックを作成するためにより多くの時間を費やすことができます。. 幸いにもPHPは非常に人気のあるプログラミング言語なので、私たちが選ぶことができる多くの自動テストフレームワークがあります。. テスト駆動開発（TDD）と動作駆動開発（BDD）...

会議やプロジェクトの締め切りなどのために、たくさんの時間を費やしていますか。そうだとすれば、結局あなたはあなたの労働生活がそのようなものであるべきではないと感じるようになるでしょう。. これは両方のチームと進取的なフリーランサーにあてはまります。彼らは、組織化された状態を保つためにかなりの時間を費やします。その結果、彼らは彼らのデザイン活動に費やす時間を短縮します。. 通常は、やらなければならないプロジェクト管理作業に時間をかけます。それでも、時にはあなたは真実ではあなたの時間の価値がないタスクに時間を費やす。両者の違いを見分けるのは難しいかもしれません. いずれにせよ、トラックにとどまることはあなたがほとんどの日に直面するより挑戦的なタスクの1つであることが多い。もしあなたがフリーランサーなら、そのルートを選ぶことによってあなたが求めていた自由もまたあなたの没落につながる可能性があります. 幸い、集中力を維持するのに役立つ生産性向上アプリケーションがたくさんあります。彼らはあなたを組織化し、統制下におくでしょう. これが私がお勧めする8つのツールです。 1. monday.com monday.comは、1つのプロジェクトで共同作業を行う必要がある2人のフリーランサーであるか、何百または何千人もの個人が複数のプロジェクトの結果に関与しているかにかかわらず、あらゆる規模のプロジェクトチームが使用できます。. このチーム管理ツールは、あらゆる産業分野での使用にも適しています。当初は主にハイテク企業や新興企業に販売されていましたが、その機能はハイテク企業ではなくすぐに発見されました。当初はdapulseというブランド名で販売されていたmonday.comは、約200の業種を代表する22,000以上のチームによって使用されており、そのうちの70％はハイテク分野以外の分野に属しています。. これらのユーザーがMonday.comにアクセスした理由はいくつかあります。 “チーター速い” 速度（最近のアップグレードから “猫クイック”）. さらにもっと重要なのは、monday.comのカスタマイズ性です。このプロジェクト管理ツールは、ワークフローを管理するために簡単にカスタマイズできます。設計プロセスをツールに合わせて変更する必要はありません。. カラービジュアルももう1つの理由です。チームメンバーは、何が起こっているのか、何が起こっているのか、そして特定のタスクまたはプロジェクト全体の現在のステータスを簡単に確認できます。. タイガ プロジェクトマネージャは、自分のプロジェクトを管理下に置くだけでなく、完全に管理下に置くように努めます。そしてそれこそが、タイガが彼らにできることなのです。このプロジェクト管理プラットフォーム（スクラムおよびアジャイルの設計者および開発者のニーズを満たすために作成された）はオープンソースであり、シンプルで直感的に使用でき、最大3人まで無料で利用できます。. すべてのプロジェクトには独自の特性があります。これは、すべてのプロジェクト管理ツールまたはプラットフォームが対処できるわけではないことの要因です。 Taigaはカスタマイズ可能なので、各プロジェクトの個性に合わせて簡単に調整できます。ツールのかんばん方法論を適用して、プロジェクトを任意の段階に分割することができます。また、TaigaのEpicsfeatureを適用して、複数のプロジェクトにわたって戦略的に計画し、それらのプロジェクトを管理し、それらの間の関係を管理することもできます。. プレミアムおよびエンタープライズプランも利用可能です。これは、Taigaアプリと同様に、モバイルで作業するためのより良い方法を提供します。. メイソン メイソンはひねりを加えた生産性ツールです。 Web構築とコラボレーションの要素を組み合わせて、モックアップやプロトタイプの操作に制約されるのではなく、チームが実際のソフトウェア要素でコラボレーションできるようにします。チームが個々のWebおよびモバイルソフトウェアの要素に取り組むことができれば、チームの生産性を著しく向上させることができます。. メイソンは、デジタル製品を次のように分割して組み立てるという点で、Webデザインに対する根本的なアプローチです。 “アトミック” パターンを作成してから、ビルディングブロックアプローチを使用してそれらを再構築します。このツールは設計段階のどこにでも適用できますが、設計の特定の要素を変更または改良する必要がある場合は、後の段階で特に役立ちます。. 設計とテストは無料です。あなたのWeb顧客が最終製品を見るときだけあなたはメイソンを使うことに対する料金を請求されるでしょう. 4. ActiveCollab...