ツールキット - ページ 5 | 最高のWeb開発チュートリアル。

Visual StudioのコードにおけるMicrosoftの包括的なデザインの影響

ユニバーサル, またはインクルーシブデザインマイクロソフトは最近、ソフトウェア開発に真剣に取り組んでいるようです。. インクルーシブデザインアクセシビリティをより広い観点から見ているので、アクセシブルデザインを次のレベルに引き上げます。 Microsoftの新しいソースコードエディタであるVisual Studio Codeをテストしていたとき、実際に理論をどのように実施したか自然に私の心の中で生じた. この記事は、Visual Studio Codeのアクセシビリティ機能の説明だけを目的としたものではありません。公式ドキュメントには、それらの優れた要約が掲載されています。包括的なアプリをデザインする将来は. なぜなら私たちはソフトウェアとWebデザインの両方において包含性がまもなく必要条件になると確信できるからです。もちろん利他的な理由からだけでなく、それは多くの新しいユーザーをテーブルに入れるからです. マイクロソフトのインクルーシブデザインの4つの原則 Windowsデベロッパーセンターはアクセシブルなソフトウェアデザインを置きますユーザビリティカテゴリ内, そしてそれらはまたトピックについての多くのすばらしい記事を出版した。マイクロソフトのインクルーシブデザインの4つの原則この記事では（以下に簡単にリストされている）議論しています. と思うユニバーサル. それを作る個人的な. それを保つ単純な. 作成する...

ビルドスクリプトの戦いGulp Vs Grunt

Gulpの使い方とGruntの使い方についてはすでに書いています。彼らはふたりともタスクを自動化する, 彼らはふたりともノードを使用, そしてそれらは両方ともあなたに要求しますタスクを作成してプラグインをインストールするある種の。しかし、この2つの違い、あるいはそれ以上の違いについて疑問に思いますか。? この記事では主に焦点を当てますこれら2つのプロジェクトの違いこれは、2つのうちどちらが自分にとって良いと考えるかを決める手助けになるかもしれません。なじみのないコードを使用します。もしそうなら、私はあなたが始める前に2つの前に出版された記事を通して読むことを勧めます. Hongkiat.comについての詳細 Gulpを始める方法 Gruntを始める方法速度 GulpとGruntの主な違いは、内側で自動化タスクをどのように扱うか. Gulpはノードストリームを使用し、Gruntは一時ファイルを使用します。それをわかりやすい英語にしましょう。? あなたのプロジェクトにSASSコードを書きたいとしましょう。あなたはあなたのSASSコードをコンパイルし、そしておそらくそれを縮小したいと思うでしょう。. Gruntはこれを使ってこれを処理します。中間ファイルこれはディスクI / O操作です。 SASSファイルはコンパイルされてから一時ファイルに書き込まれます。一時ファイルは自動プレフィックスによって使用され、最終製品は宛先ファイルに書き込まれます。. Gulpはこれらすべての面倒を見るインメモリ. ソースのSASSファイルがコンパイルされ、結果がファイルに書き込まれずに自動プレフィックスに渡され、宛先ファイルが書き出されます。. メモリ内操作と比較して、ディスクへの書き込みは遅くなります。 Gulpはスピードの面で大きな利点があります（今のところ）。速度比較はtech.tmwによって行われました、それは大部分のタスクがGulpで少なくとも2倍速いことを示します。これはあまり科学的な研究ではありませんが、傾向はそこにあり、私は自分のプロジェクトでも同じことを見ました。しかし、速度の違いはインパクトのうちどれほど大きいのか?...

最も魅力的な10のjQueryグリッド

jQueryは、HTML要素を選択してDOMを操作するための簡単な方法を提供するので、通常JavaScriptプログラミングに足を踏み入れたいほとんどの人にとって最初の選択肢です。最近のW3Techの統計によると、jQueryは大人気です。, “JavaScriptライブラリを知っているウェブサイトの95.4％がjQueryを使用している.” jQueryは、多くのJavaScriptライブラリで依存関係としても使用されています。新しいメジャーリリースのアルファバージョンであるjQuery 3.0は既に存在します。あなたのプロジェクトが何らかの方法でjQueryを使っていて、動的で柔軟なレイアウトあなたの設計のためにあなたのフロントエンドスタックにjQueryグリッドプラグインを含めることを検討する価値があります. jQueryグリッドの仕組み? jQueryグリッドを使えばあなたのサイトにPinterest風のレイアウトを作成する. それらは仮想マトリックスのように働き、それらは “箱の中の箱” 原理。 jQueryグリッドは、項目の最適な配置を動的に計算し、最も空白のないスペースになるようにページにそれらを入力します。. 画像：DHomie Home Design MagazineCSSグリッドと比較したjQueryグリッドの主な利点は、幅や高さが異なるイメージやその他のメディア要素を扱うことです。クールなJavaScript効果も、モダンなレイアウトを作成するためにjQueryグリッドを使用する大きな理由です. この記事では、について読むことができます最も魅力的な10のjQueryグリッド現在市場に出ているもの - もちろん、jQueryのように、それらはすべてオープンソースで無料です。. ネストされたjQuery jQuery Nestedは便利な機能を提供します。レスポンシブなマルチコラムグリッドレイアウトそしてあらゆる種類のデバイスに渡って動作します。このjQueryプラグインは自分自身を完全にギャップフリーとして宣伝しています。このスローガンは、最初は安いマーケティングトリックのように思えるかもしれませんが、その作成者が約束したように、実際にはプラグインがギャップフリーを非常にうまく達成しています. jQuery Nestedは、次の独自のスクリプトに従います。グリッド行列の生成....

タイプナゲットを使用してブラウザでWebタイポグラフィをテストする

Webのタイプをデザインすることは今まで以上に簡単になりました。カスタムWebフォントとCSS3プロパティにより、このプロセスはほとんど手間がかかりません。. しかし、テストは依然として面倒な作業であり、多くの場合改訂が必要になります。そしてType Nuggetのようなツールを使えばブラウザに表示されているフォントをテストします。そしてさらに LESS / SASSまたはCSSコードを生成する - 自分で一行も書かずに！アプリは完全に無料であり、それは現在ライブベータ版です。あなたが無料のアカウントにサインアップすれば、あなたはあなた自身のカスタムテーマを保存し、異なるフォントスタイルをテストするための異なるプロジェクトを作成することができます。. 右側のツールバーにはたくさんのものがあります。ヘッダー、段落、ハイパーリンク、および番号付き/番号なしリストに基づいてページフォントを調整するためのオプション. 各フォントタイプには、フォントの色、サイズ、太さ、行の高さ、および文字間隔を変更するためのプロパティを含む独自のセクションがあります。. 当然できますフォントファミリーを変更するも。 Google Webfontsライブラリ内の任意のフォントと、システムにローカルにインストールされているフォントから選択できます。これは、Photoshopでデザインするよりもずっと簡単です。なぜなら、フォントがWebブラウザでどのようにレンダリングされるかがわかるからです。. 匿名タイプのナゲットユーザーは、自分の好みに合わせてフォントを編集および調整できます。, しかしアカウントがなければ、たくさんの優れた機能が欠けているでしょう. タイプナゲットユーザーは個々のテーマを保存できますさまざまなタイプスタイルのライブラリを構築する多くのWebプロジェクト用. そして無料のアカウントで、あなたは大きな×を使うことができます。¢コーデックを生成する¢Â？？？純粋なCSSまたはSASSやLESSなどの前処理言語でフォントスタイルを取得するためのボタン。できますコードを縮小する生産準備が整ったら. Type Nuggetはまだベータ版ですが、できることに驚いています。これは私が今まで見た中で最も強力なブラウザベースのタイプツールです。 CSSでWebフォントをいじり回すのが嫌なら、Type...

Hex Nawを使ってサイトのアクセシビリティカラー評価をテストする

アクセシビリティ評価を向上させる方法をお探しですか？できることはたくさんあり、アクセシビリティのトピックは深く. しかしあなたができる最も簡単なことの1つはあなたの場所の色選択を変えることである。あなたは、にマッチしそしてうまく調和するカラースキームが欲しいです色覚異常または視覚障害のあるユーザーのための強いコントラスト. Hex Nawはあなたがこれを計画するのを手助けする無料のアクセシビリティツールです。それはあなたのブラウザで正しく働き、あなたにあなたをさせます。 2つの色を比較してそれらがどのように積み重なるかを確認しますアクセシビリティテストでお互いに対して. 実際には、ツールは実際にあなたが追加することができます 12色まですべて同じテストです。これにより、すべての色を比較して、レイアウト全体の効果を評価できます。. いくつかの色はそれら自身でよりよく働くか、または一緒によりよく働くかもしれないことに注意してください。それは予想されることです. だからHex Nawが実際にこれらすべての色を個別に比較しますだからあなたは自分で評価を測定することができます。これは、6色以上のカラーをテストしている場合、多くの組み合わせを検討する必要があることを意味します。. しかし、あなたのサイトがすべてのユーザーにとって完全にアクセス可能であることを保証するために支払うのは少額の費用です。. 各色ペアで、あなたは得るでしょう背景色に対するスモールテキストとラージテキストのコントラスト比と評価. アプリは4つの評価を使用しています。 AAA - 完全準拠. AA - ほぼ準拠しているがまだ素晴らしい. A - まともですが改善される可能性があります. Naw -...

CMDチャレンジでコマンドラインの知識をテストする

の重要性について説明しましたコマンドラインを学ぶそして今、これまで以上に重要になっています。しかし、それはまた侵害を受けるのが難しい課題です, 急な学習曲線で. どこから始めればいいのか、どれだけ学ぶ必要があるのかわからない場合は、コマンドラインチャレンジ. この無料ウェブサイト特定のタスクを実行コマンドラインだけを使って解決する必要があります。それは簡単な挑戦から始まり、しばしばあなたにヒントを与えます、しかし徐々に難易度が上がる. 私は主にしたい経験豊富なコーダーにこのツールをお勧めします CLIの知識をさらに広げる. スキルセットを他の開発者が知っておくべきと思うものと比較するのに最適な方法ですが. プロジェクト全体は開発者のための試験場それ以来、Unixのコマンドラインシェルで学習して遊ぶための人気のあるリソースに成長しました. すべてのソースコードは GitLabとGitHubから無料でリリース, だからあなたもこれをダウンロードして自分でコピーをホストすることができます。あなたはpについてもっと学ぶことができますrojectの作成とホスティングの設定稼働状態を維持するために必要なAWS設定の詳細が記載された[About]ページ. また、あなたがホームページの一番下を見ればあなたはいくつかを見つけるでしょうあなたが試すことができる具体的な課題. チャレンジを要求したユーザーによって作成されたものもあります。困難の広い範囲. 実際、素晴らしいアイデアを持つ人なら誰でも挑戦を提案するアプリに追加されます。かなりクール! あなたが自分自身をコマンドラインのエキスパートと考えるならば、これは間違いなくあなたが取るべき挑戦です。それは驚くほど有益そして、あなたが本当にこれらの課題に自分自身を駆り立てれば、あなたはたくさん学ぶことができます....

Hex NawでWebサイトのアクセシビリティカラー評価をテストする

Stylie - 無料のCSSウェブアニメーションビルダー

CSS3の文法に苦労していてアニメーションを作成する簡単な方法スタイリング保存するのに最適なツールです. これは多くの無料のうちの1つですコードジェネレータ純粋なCSSのアニメーション効果に焦点を当てて。 StylieはGitHubでホストされ、Rekapiと呼ばれるキーフレームライブラリによって運営されています。. レカピ図書館 JavaScriptを使用していますか, それは純粋なCSSに代わるものです。そしてありがたいことに、Stylie Webアプリは両方の方法をサポートしています。純粋なCSSまたはJavaScriptでコードをエクスポートする. デフォルトでは、最初のページは連続アニメーションデモを線形アニメーションでロードします。あなたはこれを編集することによってこれで遊ぶことができますデフォルトの設定の中にモーションタブまたはを編集してキーフレームタブ. キーフレームリストでは、新しいキーフレームを追加する, 合計期間を編集する, そしてアニメーションスタイルを変更する, X / Y軸に基づく動きを含む. まず、これになります非常に分かりにくい, 特にこれまでにキーフレームアニメーションを実行したことがない場合は特にそうです。ただし、このアプリケーションで遊ぶ回数が多いほど、意味があります。....