Vitest UIを使ってみよう！
export const getLabel = (name: string, age: number) => { return `名前は${name}で年齢は${age}歳です` } import { afterEach, describe, expectTypeOf, assertType, it, vi } from 'vitest' import { getLabel } from "./test" describe(`Testing Types`, () => { afterEach(() => { vi.restoreAllMocks() }) it(`関数であるかどうかと、引数の型を検証する`, () => { //! 関数であるかどうか expectTypeOf(getLabel).toBeFunction() //! 引数の型を検証する expectTypeOf(getLa
VS Code拡張 Code Spell Checker を使ったスペルチェックが快適 | Hinemosu
「ソースコードは一通りスペルチェックしてね」と言う天命が降りたので、Visual Studio Code用の拡張機能を探したら、Code Spell Checkerと言うのが良く出来ていて快適だった。 わざわざ「コード用スペルチェック」となっているように、キャメルケースやスネークケース（アンダーバーによる連なった単語群）もソレっぽく認識してスペルチェックしてくれる。 使い方的に難しいところはなく、インストールして有効化すると自動で定期的にスペルチェックが行われ、問題がある個所には波線が付いて「問題」にリストアップされる。 間違っている場合は修正する。電球をクリックするかコマンド「⌘/Cmd/Ctrl +.」でクイックフィックスが発動する。 辞書にない単語の場合は右クリックメニューかコマンドメニューから「Add Word to XXXX Dictionary」を選んで辞書登録。ワークスペース
VSCode に Code Spell Checker を導入して typo と戦う - Qiita
✖ この記事は ACCESS Advent Calendar 2018、7日目の記事です。 こんばんは！ @diescake です。 突然ですが、皆さん！ typo してますか！？ 今年も一度はコードレビューで typo を指摘されたのではないでしょうか？ また、苦虫を噛み潰したような苦悶の表情で typo を指摘したのではないでしょうか？ 自分自身もそれなりの typo をこの世に産み落とし、多くの人を不幸のどん底に陥れました。 レビューの網を掻い潜った typo 達一行は master の奥深くに潜み、 数多の親・家族・友人を浄化したエンジニアに対して復讐の炎を滾らせ、虎視眈々と production へデプロイされるチャンスを狙っているのであった… typo の定義 先に断っておくと、ここでいう typo とは、クラス・関数・変数名、文言などのスペルミスを指していて、 多くの場合、動
vscode-pets - Visual Studio Marketplace
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Puts a small, bored cat, an enthusiastic dog, a feisty snake, a rubber duck, or Clippy 📎 in your code editor to boost productivity. Report a Bug · Request feature Installation Install this extension from the VS Code marketplace. OR With VS Code open, search for vscode-pets in the extension panel (Ctrl+Shift+X on Win
EditorConfigを使ってコーディングスタイルを統一 - Visual Studio Code - [SMART]
EditorConfigの概要 EditorConfigはインデントや改行コードなど、コーディングスタイルを統一するための仕組みです。EditorConfigを導入すると、様々なエディタやIDE間で共通のルールを設定したり、プロジェクトごとに設定を変更・統一することができます。EditorConfigの導入で得られるメリットを下記に記載しました。 チームで共通のコーディングスタイルを設定できる様々なエディタで共通のコーディングスタイルを設定できるプロジェクト毎に異なるコーディングスタイルを設定できるJavaScriptやCSSなどファイルタイプ毎に異なるコーディングスタイルを設定できる EditorConfigの正体は、.editorconfigという非常にシンプルな設定ファイルです。この設定に対応したエディタは、その設定を読み込んで保存時に自動的にフォーマットしてくれます。Visual
![EditorConfigを使ってコーディングスタイルを統一 - Visual Studio Code - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
Web制作時にGoogleChrome拡張のAccessibility Insightsを使ってアクセシビリティの評価を行う | DevelopersIO
いわさです。 皆様、アクセシビリティに配慮したWebサイトの設計されてますでしょうか。 Webアクセシビリティを評価するためのツールがMicrosoftから提供されていますので紹介したいと思います。 Accessibility Insightsというツールです。 元々はMicrosoftにて内部開発されていたもので、2019年にオープンソース化されています。 本日はWebサイトのアクセシビリティの評価を行いたいと思いますが、AndroidやWindowsのアプリケーションにも対応しています。 Webアクセシビリティの場合はGoogle Chromeの拡張として提供されています。 Webアクセシビリティとは 全ての利用者や環境下において、使用できるようにWebサイトが設計・開発されていることを指します。 弊社の以下のエントリをご参照ください。 使ってみた テスト用のWebサイトはSeleni
無料で表示中のページの過去を簡単に見ることができる拡張機能「Vandal」レビュー
サイトを閲覧中に「このサイトの過去のページが気になるけど、わざわざインターネットアーカイブにアクセスしてウェイバックマシンで検索するのはちょっと面倒」と思ったことがある人は少なくないはず。無料でインストール可能なChromeおよびFirefox向け拡張機能「Vandal」を使うと、ウェイバックマシンが収集したスナップショットを簡単に見ることができます。 Vandal | Navigator for Web Archive https://vegetableman.github.io/vandal/ 上記のURLにアクセスすると、以下のように表示されます。VandalはChrome版とFirefox版が用意されていますが、今回はChromeに導入するため「ADD TO CHROME」をクリックします。 続いて「Chromeに追加」をクリックします。 「拡張機能を追加」をクリックします。 導入
Vue.js Devtoolsの導入方法と機能まとめ。Vue.jsを用いた開発を効率化させよう！ - Qiita
最近、JavaScriptフレームワークであるVue.jsの勉強をしているのですが、jQueryを用いて開発を進めるときと比べるとデバックに時間がかかってしまいます。 何か良い解決策を探してみると「Vue.js Devtools」というchromeブラウザの拡張機能の存在を知りました。 早速導入してみると、 作業がとても捗った ので、導入方法や使い方を簡単にまとめたいと思います。 Vue.js Devtoolsとは Vue.js Devtoolsは、Vue.jsの開発をサポートする Chromeブラウザの拡張機能 です。これを導入するとconsoleを開かなくてもdataの中身などを確認することができるようになります。 Vue.js Devtoolsの導入方法について それではさっそくVue.js devtoolの導入方法について。まずは下記URLにアクセスして拡張機能を追加します。 Vu
デバッグ作業が快適に！VS Codeにブラウザのプレビュー機能を加える機能拡張 -Browser Preview for VS Code
エディタで作業しながらデバッグをしたい人にぴったりな、VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。 ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可能なので、デバッグがかなり捗ると思います。 Browser Preview for VS Code -GitHub Browser Preview for VS Codeの特徴 Browser Preview for VS Codeのインストール Browser Preview for VS Codeの使い方 Browser Preview for VS Codeの特徴 Browser Previewは、VS Code内に実際のブラウザをプレビューとして表示させることができます。 VS Code内でブラウザのプレビューが可能（Chrome Headlessにより）。 複数の
Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
[CSS]これは便利！検証が面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefoxの機能拡張
CSSでレイアウトをする際、最近の主流はFlexbox、そしてCSS Gridも増えてきました。 そんな中、サポートされていないブラウザ用に必要になるのがフォールバックです。 検証するのが面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefox対応の機能拡張を紹介します。 Feature Queries Manager -GitHub Feature Queries Managerの機能 Feature Queries Managerのダウンロード Feature Queries Managerの使い方 Feature Queries Managerの機能 Feature Queries Managerはその名の通り、@supports機能クエリに記述されたCSSのスタイルを管理して、切り替えることができます。 例えば、レイアウトをFlexboxで実装する場合、Fle
![[CSS]これは便利！検証が面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefoxの機能拡張](https://cdn-ak-scissors.b.st-hatena.com/image/square/971099afcdbec5ce4d85c8447e3cda9402d0849b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018052507.png)
1クリックで、IE, Edgeをはじめ、さまざまなブラウザ・スマホなどの表示確認ができるChromeの便利な機能拡張
指定したページが一般的なブラウザやデバイスでどのように表示されるか、1クリックで確認できるChromeの機能拡張を紹介します。 WindowsからSafari, iOSの確認、macOSからIE, Edge, Androidの確認もできます。 Multi-browser Screenshots Multi-browser Screenshotsで対応しているブラウザ・デバイスは、下記の通り。 ※2018年5月現在 それぞれ、WindowsからでもmacOSからでも利用できます。 Edge 15.0(Windows 10) IE 11.0(Windows 10) Chrome 50.0(Windows 10) Firefox 45.0(Windows 10) Safari 9.1(OS X El Capitan) IE 10.0(Windows 7) IE 9.0(Windows 7) IE
PerfectPixel by WellDoneCode
Multiple overlays support Create as many overlays as you need. No Image size restrictions. Separate for each domain. Saved between browsing sessions. Cloud sync coming! Collapsed mode PerfectPixel dialog box will get out of your way when you want. Great for mobile design or when you simply don’t want to see it. Just double click on the PerfectPixel header to enter the collapsed mode.
Gyazoとは？撮った画像をその場で相手と共有できるツールの使い方を解説
無料プランと有料プラン、どちらがおすすめ？ Gyazoの無料プランでは、画像・GIF動画の撮影や画像URLの共有などの基本機能が使用できます。ただし、確認できる画像数に制限があり、大量の画像を確認することはできません。ビジネスでたくさんの画像をやりとりする必要がある人は有料プランを検討してみましょう。 Gyazoの始め方 今回は、WindowsでGyazoの始め方を解説します。 TOPページ中央か右上の「今すぐダウンロード」をクリックします。 「Gyazoをダウンロード中…」とメッセージが表示され、ダウンロードが始まります。ダウンロードが完了したら、「実行」をクリックしてインストールを進めます。 インストールが完了すると、デスクトップ上に「Gyazo」と「Gyazo GIF」という2つのアイコンが表示されます。「Gyazo」がスクリーンショットを撮るツールで、「Gyazo GIF」がGIF
どんどん便利になってるChromeの機能拡張！Web制作に便利な機能がまとめられた -CanvasFlip
DOMの構造を調査する、要素のサイズを測る、要素のみのキャプチャを撮る、画像ファイルを抽出する、カラーやテキストを編集するなど、これらWeb制作に便利な機能がまとめて、しかも高性能で快適に利用できるChromeの機能拡張を紹介します。 それぞれ単体の機能拡張を使用している人は、一つにまとめられて簡単だと思います。 CanvasFlip CanvasFlipの機能 CanvasFlipのインストール CanvasFlipの使い方 CanvasFlipの機能 CanvasFlipは先日リリースされたばかりの新しい機能拡張で、私も先週から使用していますが、かなり便利です。パネルのUIも操作しやすく、ページに表示されるハイライトやメジャーも見やすいと思います。 ページの基本情報。 指定した要素のプロパティを表示するインスペクタ。 インスペクタでスタイルを変更すると、すぐにページに反映されます。 メ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Microsoft、アプリのアクセシビリティ問題を調査する無償ツールをオープンソース化／WindowsアプリとWebアプリの両方をカバー
人気のFirefox拡張機能「Stylish」がポリシー違反でブロック、すべての閲覧履歴を収集か／有志のセキュリティエンジニアによる調査で発覚
Web Maker
ヤバイ便利すぎる！Googleが提供するすべてのアプリ・サービスを1クリックで利用できるChromeの機能拡張
CSSの確認に使いやすくてかなり便利！要素検証、アセット抽出ができるChromeの機能拡張 -CSSPeeper
