タグ

javascriptに関するms2satoのブックマーク (6)

  • [JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium

    ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo

    ms2sato
    ms2sato 2017/07/03
    これは良いな。今度試したい。
  • Reduxチュートリアル動画を見ながらReduxを基礎の基礎から - Qiita

    背景 Reactを一通り使えるようになって、そろそろReduxを、と思いました。 でも、あれだけ充実している公式のドキュメントを見ても、Qiitaにうなるほどある親切な解説を読んでも、いまひとつピンと来ませんでした・・・ ですが、公式に紹介されているチュートリアル動画が非常にわかりやすかったので、ひとつなぞってみよう、と投稿しました。(制作者であるDan Abramov様には了解を得ています) Getting Started with Redux この動画の、簡単なカウンターアプリ作成までをなぞっていきます。基的には、動画を見ていなくても大丈夫なように書いていきたいと思います。 以下のコードは基的に上記の動画をもとに一部改変しています。また、コードについてはes2015スタイル、セミコロンなしのスタイルでの記述をしています。 環境 当方の環境です。 Windows10 node v5.

    Reduxチュートリアル動画を見ながらReduxを基礎の基礎から - Qiita
    ms2sato
    ms2sato 2017/04/11
    最初これをやるとすごくいいかも?わかりやすいよ。
  • 「JavaScript初級者のためのコーディングガイド」に補足を試みる - Qiita

    はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな?と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる(もしくは行う目標がある)前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ?」みたいなイメージだとわかりやすいかな? ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず

    「JavaScript初級者のためのコーディングガイド」に補足を試みる - Qiita
    ms2sato
    ms2sato 2017/01/03
    書いてみた。
  • 40通り以上の自動マルチブラウザテストをSelenium x CircleCI x BrowserStackで実現する| PLAID engineer blog

    CircleCI上で、BrowserStackを利用したマルチブラウザJavascript Test,Selenium Test を実現している方法についてご紹介します。Selenium webdriver, CircleCI, BrowserStack

    40通り以上の自動マルチブラウザテストをSelenium x CircleCI x BrowserStackで実現する| PLAID engineer blog
  • Visual Studio CodeのエディターをWebページに埋め込む - ぷろじぇくと、みすじら。

    Created at: 2016-02-02 Visual Studio CodeのシンタックスハイライトをWebページで使うという話を少し前に書きましたが、 今回はエディタ部分をWebページに埋め込んでみようという話です。 前にも少し触れましたが、Visual Studio Codeのエディター部分、いわゆるMonacoはVisual Studio Code以前からいろいろなところで埋め込まれて使われています。 Visual Studio Online “Monaco”を始め、TypeScript Playground、WinJS Playground、IE/EdgeのF12開発者ツールなどなど、 エディター部分の出来の良さというか埋め込んで使われることが念頭に置かれている感じがします。 動作サンプルまずは動作するサンプルを貼り付けてみるので、触ってみてください。 内容を取得/表示 適当

  • Railsのフロントエンドのビルドをnpmコマンドのみで完結したい - Qiita

    こんにちは、freeeエンジニアをやってます @yo_waka です。 これは、freee Engineers Advent Calendar 2015の11日目の記事です。 これまでの弊社のAdvent Calendarでは、社内で革命と呼ばれるフロントエンドの改善ネタが多いと思いますが、その流れとして、RailsアプリケーションにおけるフロントエンドのビルドツールであるところのSprocketsをどのようにしたら外せるかという話を書きます。 Sprocketsがやってくれること まずはSprocketsが裏側でどういうことをやっているのか知る必要があります。 Advent Calendar4日目の記事で既に概要が書かれていますが、もう少し細かく内部動作に踏み込んで書いてみます。 尚、Sprocketsのコードは現状のRailsの最新版である4.2.5で利用されている、Sprocket

    Railsのフロントエンドのビルドをnpmコマンドのみで完結したい - Qiita
    ms2sato
    ms2sato 2015/12/11
    ES2015 & Railsで、sprocketsに苦しんだら、読み返したい。
  • 1