コーディング - ページ 16

それは偶然の一致ではありません 原子, Githubによって作成されたソースコードエディタは、Web開発コミュニティで人気があります。それだけではありません 簡単に拡張可能 何千ものAtomパッケージで 幅広い言語サポート, しかしほとんどすべての部分は カスタマイズ可能 ユーザーによる. Atomを活用して スニペット機能, コーディングワークフローをより生産的にすることができます。 繰り返し発生するコードスニペットの再利用 あなたはあなたの仕事の繰り返し部分を減らすことができます。この記事では、私はあなたができる方法を紹介します Atomの組み込みコードスニペットを使用する, そして 独自のカスタムスニペットを作成する. 組み込みのコードスニペットを使用する デフォルトでは、Atomは付属しています 組み込みコードスニペット, それぞれが スコープにバインド 特定のファイルタイプに属しています。たとえば、次のようにしてファイルを操作しているとします。 .js 拡張子は、JavaScriptスコープに属するスニペットのみがそのファイルで利用可能になります。. 見る 利用可能なすべてのスニペット 現在のファイルの種類については、Alt + Shift...

リンター 現代のWeb開発に不可欠なツールです。コードを書くときにエラーをチェックし、ベストプラクティスを強制するのに役立ちます。 SublimeTextを使用している場合は、SublimeLintersをインストールすることを強くお勧めします。長年にわたり、SublimeLintersはSublimeTextのパワーツールスイートであることを明らかにし、さまざまなプログラミング言語のリンターに接続する公式パッケージをもたらしました. このチュートリアルでは、SublimeLinterのインストール方法と設定方法について説明します。始めましょう. 入門 SublimeLinter 4をインストールする最も簡単な方法はSublimeText Package Controlを使うことです。以来ずっと SublimeLinter 3, 各 リンター 別にインストールする必要があります。これにより、SublimeLinterを実行するだけでより効率的に実行できます。 リンター インストールしたこと. 私のプロジェクトではHTML、CSS、JS、PHPをほとんど使っているので、これらの言語用のリンターをインストールしたいと思います。の中に パッケージ管理, 私は以下のプラグインと一緒にSublimeLinterをインストールします。 SublimeLinter-html-tidy SublimeLinter-stylelint SublimeLinter-eslint SublimeLinter-php それから、それらのプラグインを動作させるために、私達はまたインストールする必要があります。 リンター HTML Tidy、CSSLint、JSHint、およびPHP CLIの各言語用. OSXを使用している人のために、TidyとPHPがシステムにプレインストールされています。確認するには、次の2つのコマンドを連続して実行します。. tidy...

ビューポートパーセンテージ長, または ビューポートユニット それらがより頻繁に呼ばれるように、あなたがディメンションを定義することを可能にする敏感なCSSユニットです ビューポートの幅または長さのパーセンテージとして. ビューポート単位は、パーセンテージなどの他のレスポンシブCSS単位が 仕事がしにくい. が W3Cのドキュメント ビューポートユニットでは理論に入れることができるすべてが含まれています、それはあまり冗長ではありません。それで、この記事では、これらのCSSユニットがどのようにしているのかを見ていきます。 実際に働く. ビューポートの高さ（VH）＆ビューポート幅（vw） W3C ビューポートを定義します として “初期包含ブロックのサイズ”. 言い換えれば、ビューポートは面積です。 ブラウザウィンドウ内に含まれている または画面上の他の表示領域. の vw そして VH 単位 実際のビューポートの幅と高さの割合を表します。彼らは値を取ることができます 0から100まで 以下の規則に従って。 100vw =ビューポート幅の100％1vw =ビューポート幅の1％100vh...

の CSSグリッドレイアウトモジュール で出荷されました 新しいCSSユニット と呼ばれる fr 単位. それができるのと同じくらい簡単, fr それは 単語の略語 “分数”. 新しいユニットにより、グリッドを比例する列または行にすばやくスライスすることができます。その結果、 完全に応答性があり柔軟なグリッド ほとんど風になる. 分数単位はグリッドレイアウトモジュールと一緒に導入されたので、どのブラウザでも使用できます。 CSSグリッドをサポート. あなたも古いブラウザをサポートしたい場合はここに素晴らしいです。 CSSグリッドポリフィル それだけでなく、あなたが使用することができます fr ユニットだけでなく他のグリッド機能. 基本的な使い方 まず、見てみましょう 基本グリッド 分数の単位を使います。下のレイアウトはスペースをに分割します 3つの等幅列 そして 同じ高さの2行. 所属HTMLは...

Google APIを使用してjQueryやWeb Fontsなどのライブラリを提供しているのは、Googleの信頼できるインフラストラクチャを介して迅速に機能するためです。ほとんどの場所で使用されていますが、ブラウザにキャッシュがすでに保存されているためにライブラリがロードされることもあります。 でも もっと早く. 残念ながら、中国ではそうではありません。中国政府は、2014年にGoogle APIを含むGoogleの多くのサービスへのアクセスを閉鎖しました。 部分的に壊れているように見える GoogleでホストされているjQueryおよびWebフォントにアクセスできないため、中国で. この記事では、中国の「デジタル」万里の長城を迂回する方法を見ていきますので、私たちのウェブサイトは中国国外で見られるように運営することができます。 Googleフォントとライブラリを反映した代替フォントライブラリを使用する予定ですが、最初に中国出身のユーザーを特定するための対策を講じる必要があります。. ユーザーの所在地の特定 まず最初に、訪問者の出身地を特定する必要があります。このWIPMania APIを使用して、訪問者の国名を含めた訪問者の位置情報を取得できます。 $ .getJSON（ 'http://api.wipmania.com/jsonp?callback=？'、function（data）swal（ 'あなたは出身です'、data.address.country）;）; jQueryを使っています $ .getJSON APIを呼び出します。それから私達は渡します data.address.countryこれは、訪問者の出身地を教えてくれるはずです。これがデモです. 代替Webフォントソースの提供 これで、訪問者の場所を取得できるようになりました。GoogleFontsをUsesoライブラリ（Google APIのFontsとLibrariesを反映するCDNサービス）に置き換えて、中国からの訪問者にサービスを提供します。. この段階では、Google APIを指すフォントスタイルがまだあります。 私達は取り替えます href...

新しいMountain lionを探索するのは、特に最新のMac OS Xが提供するものを見つけようとしているときには、とても楽しいことです。以前のOSでGITを使用していたWeb開発者であれば、次のエラーメッセージが表示されることがあります。 「-bash：git：commandが見つかりません「 実行しようとすると git ターミナルでコマンド. 心配しないで、ここにあなたがたった2ステップで非常に速くこれを直すことができる方法があります. ステップ1 App Storeを起動してからダウンロードします」Xcode「. ステップ2 Xcodeをインストールして実行し、ショートカットキーを使ってXcodeの設定に行きますCommand + , に行く ダウンロード タブ、 "を探しますコマンドラインツールをクリックします インストール. Apple Developer IDを入力する必要があるかもしれません。アカウントをお持ちでない場合は、アカウントを登録してください。. ステップ3 私たちは子供です。それでおしまい。コマンドラインツールがインストールされたら、ターミナルを終了して再度開き、 git コマンドを実行し、正常に復元されたかどうかを確認します。.

ウェブパック です モジュールバンドラー それは複雑なJavaScriptアプリケーションの構築を容易にします。 Reactコミュニティがそれを主な構築ツールとして選んだので、それは深刻な牽引力を得ています。 Webpackは パッケージマネージャでもタスクランナーでもありません それは別の（より高度な）アプローチを使用していますが、その目的はまた 動的ビルドプロセスを設定する. WebpackはバニラJavaScriptで動作します。あなたはそれを使用することができます アプリケーションの静的アセットをバンドルする, 画像、フォント、スタイルシート、スクリプトなどの単一ファイルへの すべての依存関係の面倒を見る. 単純なアプリやWebサイトを作成するのにWebpackは必要ありません。たとえば、JavaScriptとCSSファイルが1つだけで、画像が2、3個しかないものなどです。 複数の資産と依存関係を持つ、より複雑なアプリケーション. Webpack対タスクランナー対Browserify それで、Webpackはどうやって積み重ねますか 他のビルドツールと比較して Grunt、Gulp、またはBrowserifyなど? GruntとGulpはタスクランナーです。それらの設定ファイルでは、 タスクを指定する, そしてタスクランナーはそれらを実行します。の タスクランナーのワークフロー 基本的にはこのようになります： 画像：pro-react.comしかし、Webpackは モジュールバンドラー プロジェクト全体を分析する, 依存関係ツリーを設定する, そして バンドルされたJavaScriptファイルを作成します...

この記事では、SassまたはCSSと呼ばれるCSSプリプロセッサについて説明します。 文法的に素晴らしいスタイルシート. あなたがLESSに関するこれまでの投稿をフォローしているのであれば、あなたはに精通していると確信しています。 CSSプリプロセッサ. SassとLESSはどちらもCSSプリプロセッサで、主に変数、ミックスイン、関数などのプログラミング言語を使用してプレーンスタティックCSSの作成方法をより動的に拡張します。. Sassをインストールする Sassを作成する前に、インストールする必要があります. SassはRuby上に構築されています. もしあなたがMacで作業しているのであれば、あなたはすでにRubyをインストールしているでしょう。 WindowsにRubyをインストールする場合は、このRubyインストーラを使用してください。. インストールが完了したら、ターミナル（Macの場合）またはコマンドプロンプト（Windowsの場合）に移動して、そこに次のコマンドラインを入力します。 Macの場合; sudo gem install sass Windowsの場合; 宝石インストールsass インストールが成功すると、ターミナル/コマンドプロンプトに次のように通知されます。. 次に、次のコマンドを使用してSassがどのディレクトリを監視するかを選択する必要があります。 sass - 監視パス/ sassディレクトリ 上記のコマンドラインは毎回監視します。 .scss/.セス のファイル パス/ディレクトリ そのディレクトリ内のファイルのいずれかが変更されると、Sassは対応するファイルを更新するか、存在しない場合はそれを作成します。. Sassが特定のディレクトリにファイルを生成する必要がある場合は、この方法で実行できます。...