axe-runnerを大幅改良してnpmで公開
Twitterを見ていて、2019年に開発した「axe-runner」のことを思い出しました。（詳細は記事「Puppeteerとaxe-coreで複数ページのアクセシビリティ検証を実現する」を参照してください。）最近何か作りたい欲が高まっていてaxe-runnerも改良してみたくなり、先週末から手を入れ始めました。結果、色々至らなかった点を大幅改良すること、またnpmでの公開を達成することができました。 axe-runnerとは Deque Systems社が開発しているアクセシビリティのテストエンジン「axe」を利用し、複数ページのアクセシビリティチェックを行い結果をCSVに記録するものです。コマンドラインで実行します。 改良点 これまではGitHubからソースコードをダウンロードしnode axe-runner（npm start）を実行する方法でしたが、コマンドラインスクリプトを用意
Colorable
Take a set color palette and get contrast values for every possible combination – useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines. Getting Started npm i colorable Usage Pass an array of color strings or an object with color strings as values. var colorable = require('colorable'); var colors = { red: 'red', green:
Comparing the New Generation of Build Tools | CSS-Tricks
A bunch of new developer tools have landed in the past year and they are biting at the heels of the tools that have dominated front-end development over the last few years, including webpack, Babel, Rollup, Parcel, create-react-app. These new tools aren’t designed to perform the exact same function, and each has different things they’re trying to achieve and features to get there. Despite their di
【Node.js7.5対応】gulp.js/Gruntを卒業すべき3つの理由とgulp非依存の本格タスクランナーの作り方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
突然ですが、皆さんのgulp.js(gulp)タスク、依存関係が複雑になりすぎて、こんな風になってませんか？ “a gulpfile” #jsart pic.twitter.com/Uj3dXoDXQm — Victor Savkin (@victorsavkin) 2016年8月12日 gulpやGruntを使って開発していると、 やれ「Node.js(Node)のバージョンが違っていて動かない」、やれ「エラーログがぐちゃぐちゃで追えない」など、様々なトラブルに遭遇しますよね。 もちろん、Node や依存モジュールのバージョンを固定したり、ドキュメントをしっかり作るなどすればこれらのエラーに遭遇する可能性は下がりますが、できれば異常系の処理をするより、新機能の開発をしていたいのが人情ってものです。 今回はそんな方が gulp.js やGrunt に頼らずに、Sassのビルドを監視して自動
package-lock.jsonの管理をプロジェクトごとに変更する - Qiita
そうすることでグローバルではなくプロジェクト単位でconfigを設定できます。 dependenciesやdevDependenciesのバージョンを固定 普通にnpm install --saveとかするとpackage.jsonのdependenciesのバージョンに^が付くと思います。 この^や~が付くことでパッケージのバージョンのアップデートが意図せず行われることがあります。 ^や~の意味についてはpackage.json のチルダ(~) とキャレット(^)を参考にしてください。 この^や~をデフォルトで付けないようにするためには.npmrcに以下を記載します。 こうすることでパッケージのアップデートは防ぐことができるかと思います。 試しにnpm install --save (何かのパッケージ)し、package.jsonを確認すると^や~が付いていないことが確認できると思います
Why Npm Scripts? | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There has been a growing sentiment (for instance) that using node packages directly, with the command line interfaces they provide, is a good route to take. As opposed to abstracting the functionality away behind a task runner. Partly: you use npm anyway, npm provides scripting functionality
タスクランナーとしてのnpm-scripts（パート1） | 株式会社コードグラフ
私たちの選択できるビジネスツールや開発ツール、またはサービスは数多く存在します。これらをうまく取り入れることで作業効率をアップし、より重要なことに時間を当てることができます。 コードグラフではリサーチや試用期間を経て、扱いやすさはもちろん主に相互連動性や信頼性、ワークフローなどの側面からよりベターなツールを絞り込んで選ぶようにしています。そしてなるべくワークフローをシンプルに保てるよう、使用するツールの数は抑えます。また便利であっても学習コストが極端に高いツールは採用しないようにしています。チーム内外での扱いやすさ、学習コストにどう影響するかも重要です。 この記事または今後、私たちのチームが実際にワークフローに組み込んでいるツールやサービスを随時紹介していこうと思います。 タスクランナ―としてのnpm-scriptsフロントエンド開発では、複雑なタスクをより自動化して効率よく作業を行うため
npm-scripts で Web フロントエンド開発を管理する - アカベコマイリ
gulp なしの Web フロントエンド開発から 1 年あまり。その間、特に問題もなく npm-scripts で Web フロントエンド開発を管理できているので、この間に得られた運用知見や所感などをまとめてみる。 npm-scrips とは？ 最近の Web フロントエンド開発では AltJS/AltCSSのビルドやリリース用イメージ作成などに Node.js + npm を利用することが一般化してきた。そのためプロジェクトは package.json で管理することになる。package.json の提供する代表的な機能として プロジェクト情報の定義 プロジェクトの成果物を npm として配布するための情報 プロジェクト名、バージョン、作者などのメタデータを定義する 依存モジュール管理 プロジェクトが依存する npm とバージョンを管理する この情報へ基づき npm install コ
Gulpの代わりにnpm-scriptsをタスクランナーとして使う | Glatch（グラッチ） – 夫婦で活動するフリーランスWeb制作ユニット
最近では当たり前のようにWeb制作時にGulpを使用していましたが、npm-scriptsを使用すれば、Node.js + npmのみで同等の環境を構築できることを知りました。いつ廃れるとも知らない、それに潰しの効かないGulpの学習にも疲れてしまったので、気分転換も兼ねてnpm-scriptsで開発環境を作ってみました。 npm-scriptsとは Gulpでもお馴染みのpackage.json内にある「scripts」というフィールドに、シェルスクリプトやエイリアスコマンドを登録できます。これがnpm-scriptsです。 このファイルに記述したスクリプトは、npm run SCRIPTNAMEで実行が可能です。今回はこの「script」にGulpで定義していたタスクと同等のスクリプトを登録し、Gulpを介さずにビルドツールを構築することが目的です。 Gulpの問題点 Gulpの使用に
更新が必要なnpmパッケージを可視化する - Hatena Developer Blog
こんにちは。ウェブアプリケーションエンジニアのid:masawadaです。普段は、はてなブログチームで開発を行なっています。 今回は、日々の開発で生まれた困りごとを解消するために作ったyarn-outdated-formatterというツールを紹介します。 経緯 以前id:amagitakayosiが「フロントエンドPodcastはじめました - Hatena Developer Blog」にて書いたとおり、はてなには現在「フロントエンドエンジニア」という肩書きのメンバーはいません。はてなブログチームでも全員がバックエンド(Perl)とフロントエンド(JavaScript)両方のコードを書いており、どちらかというとバックエンドがメインのためクライアントサイドは片手間になりがちという問題がありました。 そこで、チーム内でFWG(フロントエンド・ワーキング・グループ)という会を組織しました。F
npm trends: Compare NPM package downloads
Sick of boring JavaScript newsletters?Bytes is a JavaScript newsletter you'll actually enjoy reading. Delivered every Monday, for free.
ES2015で始めるJavaScript入門 - Qiita
はじめに JavaScript勉強会の資料です。 内容は、簡単なコマンドラインツールを作りながら、JavaScript(ES2015を含む)の書き方を学ぶものとなってます。 内容的には初心者向けなので、JavaScriptを勉強したい、JavaScriptは触ったことあるけどES2015を知らないので勉強したい、といった方が対象です。 JavaScriptとは Webブラウザで実行可能なインタプリタ言語 最近ではサーバサイドのものもある(Node.jsなど) 各ブラウザで独自の実装があるが、標準化されたECMAScriptに準拠している ES5, ES2015(ES6), ES2016, … ES2015からは毎年新しい規格が策定される これによりナンバリングは策定した年に変更 ES5(2011年策定)から4年ぶりに策定されたECMAScript 非常に多くの機能が追加された 新しいブラウ
まだ手動でやってない？UIテストを爆速で自動化できるNightwatch.jsが便利すぎ
Webアプリのクオリティアップに役立つのが、フロントエンドのテスト。実装したはずの機能がある条件で動かなかったり、期待どおりに操作できなかったりするとガッカリですね。Nightwatch.jsならテストがだいぶ捗りそうです。 少し前に、Eric Elliottが「JavaScript Testing: Unit vs Functional vs Integration Tests」でJavaScriptのテストについて比較しました。 本記事では、JavaScriptの機能テストについてもう少し掘り下げます。Nightwatch.jsライブラリーを詳しく探りながら、機能テストを実施してみましょう。 解説する前に、機能テストとはなにか、なぜ重要なのか説明します。おおまかに言うと、機能テストとはユーザーの観点から予測されるとおりにアプリケーションが動作しているか確認するためのプロセスです。 ユニ
「npm」に自己複製型のワームプログラムが動作可能な脆弱性が報告される
npmにワームプログラムが動作可能な脆弱（ぜいじゃく）性が報告されている。npmプロジェクトでは、改めてユーザーに注意を促している。 Node.jsのデフォルトパッケージマネジャーとして広く利用されている「npm」に、自己複製型のワームプログラムが動作可能な脆弱（ぜいじゃく）性が報告されている。 Sam Saccone氏が公開したレポートによると、この脆弱性は、npmのようなパッケージマネジャーが持つ「ライフサイクルスクリプト」のコンセプトに起因したものだという。パッケージマネジャーはシステムで任意のコマンドをカレントユーザーとして（Sudoの場合は一時的な特権ユーザーとして）実行できる。 npmではセマンティックバージョニング（semver）の利用を推奨しているが、セマンティックバージョニングは、依存関係にあるパッケージのバージョンを固定せず、依存パッケージの作者は、自由にアップデートバ
JVNVU#96681018: Node.js のパッケージマネージャ npm が不正なパッケージの動作を制限しない問題
npm は、サーバサイドのウェブアプリケーションを開発するための実行環境である Node.js のパッケージマネージャです。npm には、ワームプログラムの感染拡大を許す問題が存在します： npm はセマンティックバージョニング (semver) の使用を推奨しています。セマンティックバージョニングでは、依存関係にあるパッケージのバージョンは固定されておらず、依存パッケージの作者は、自由にアップデートバージョンをプッシュできるようになっています。 npm は、npm サーバへのログイン状態を維持しています。ログインすると、手動で操作しない限りログアウトすることはありません。ログイン済みユーザが npm install コマンドを実行することで、新たなバージョンのパッケージを publish させられる可能性があります。 npm は、Node.js 環境で広く使われている集中型のレジストリを
作業自動化のための Node.js 入門 - ほんじゃらねっと
これまでいくつかの記事でNode.jsを使ったスクリプトを載せてきたが、 自動化のためのスクリプトを書いて動かす環境として Node.jsは手軽だし速いし色々ライブラリは揃ってきているし なかなか良い環境だと感じている。 Web系の仕事をしていればJavascriptはある程度親しみのある言語だろうし、 GruntやGulpのようなWeb関連作業を自動化する 機能満載のタスクランナーまで用意されている。 実行環境もインストーラをダウンロードしてインストールすれば パッケージ管理ツール付きで入手することができるので、 すぐに開発を始めることができる。 非同期処理が得意なサーバアプリケーションを作るための環境として 紹介されることが多いけど、この手軽に導入できて Javascriptでサクッとアプリが作れるところだけでも十分に価値があると思う。 ノンプログラマが仕事を効率化するためにプログラミ
PhantomJS と CasperJS で複数ページを一括キャプチャする ｜ Tips Note by TAM
Web 制作をしているとページの表示確認やコンポーネントの洗い出しなどで、大量にキャプチャを撮ってきたい時があります。 しかしブラウザのエクステンションで1枚ずつ撮るのも面倒です。 そこで PhantomJS と CasperJS を使うとキャプチャを自動化することができるということなので、先達たちの情報を参考に、キャプチャしたいURLと想定するデバイスを CSV で管理して、楽にキャプチャがとれるものを作成しました。 PhantomJS と CasperJS とは PhantomJS ですが、グラフィカルな画面のないブラウザで「ヘッドレスブラウザ」と呼ばれるブラウザです。コマンドラインからブラウザの機能を使うことができ、フォームの操作やページの要素を取得することができます。よく CI ツールと組み合わせて自動テストを行ったり Web スクレイピングで使われたりします。 PhantomJS
[意訳]私がGulpとGruntを手放した理由 - Qiita
このポストは、Why I Left Gulp and Grunt for npm Scriptsを筆者の許諾を得て意訳したものです。間違いがありましたら、ご指摘いただけると幸いです。 （以下、訳） 私はGulpとGruntが不要な抽象化レイヤーだと気づきました。npmのscriptsはとても強力で、そっちの方が便利だったりします。 例を挙げましょう 私はかつてはGulpが大好きでした。しかし結局のところ、100行ものgulpfileと大量のgulpプラグインを扱うハメになりました。Gulp上でWebpackやBrowsersync、Mochaなどを統合するのは本当にたいへんでした。なぜでしょうか？それは、プラグインによってはドキュメントが不十分だったり、APIの一部しか公開されていなかったためです。 これらを解決しようと思えばできました。しかしなんと それらのツールを直接使用すると不具合が
![[意訳]私がGulpとGruntを手放した理由 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/12154c3563ab1e4c476ab29976daf0bf560e5aaf/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUU3JUE3JTgxJUUzJTgxJThDR3VscCVFMyU4MSVBOEdydW50JUUzJTgyJTkyJUU2JTg5JThCJUU2JTk0JUJFJUUzJTgxJTk3JUUzJTgxJTlGJUU3JTkwJTg2JUU3JTk0JUIxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1iZTQ0NGZiN2E3NjgxZTk3NDhhN2VjMjJjMDJlYjM5NQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0ZW5rZWkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU0NzA5OTdmMTUwMmIzOTNhZmZjMzdjZTY5MmZmOWNm%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dedfd6cbca21222e04e388c5b3c8fab39)
Home | Stylelint
A mighty CSS linter that helps you avoid errors and enforce conventions. Features It's mighty as it: has over 100 built-in rules for modern CSS syntax and features supports plugins so you can create your own custom rules automatically fixes problems where possible supports shareable configs that you can create or extend can be customized to your exact needs has 15k unit tests making it robust is
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
textlint · The pluggable linting tool for text and markdown
