タグ

ブックマーク / efcl.info (9)

  • 私のJavaScriptの情報収集法 2024年版

    個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変

    私のJavaScriptの情報収集法 2024年版
  • ディスプレイを鏡の代わりにして、鏡のスクショ画像をNotionに記録できるようにした

    全身鏡が欲しいけど買うとデカくて捨てにくいので、使ってないディスプレイを縦置きにすれば全身鏡の代わりになるんじゃないかと思いました。 試しに23インチぐらいのディスプレイとiPadを繋いでフロントカメラで撮影したみて、1.5m~2.0mぐらい離れれば全身が十分見える感じでした。 ただし、ディスプレイを鏡とする場合にスイッチを入れるのはリモートでやりたいので、iPadではリモートから起動が難しくて別のPCが必要でした。 ちょうど、普段あんまり使えてないmac miniがあったので、これをディスプレイと繋いで作ってみることにしました。 あと、せっかくディスプレイに表示するので、そのディスプレイ(鏡)に写した内容を半自動的に記録できるといいなと思いました。 こういうストック的なメモにはNotionを使ってたので、撮影した画像を自動的にNotionへアップロードする仕組みも作りました。 ボタン一つ

    ディスプレイを鏡の代わりにして、鏡のスクショ画像をNotionに記録できるようにした
  • ウィンドウ管理アプリの.phoenix.jsを使って、任意のアプリをSplit Viewのように左右に並べる

    ウィンドウ管理アプリの.phoenix.jsを使って、任意のアプリをSplit Viewのように左右に並べる TwitterDiscordを1つの画面で見たかったので、Phoenixを使って実現しました。 Phoenixは、アプリやウィンドウの位置やサイズをJavaScriptで管理できるmacOS向けのアプリです。 kasper/phoenix: A lightweight macOS/OS X window and app manager scriptable with JavaScript このPhoenixを使うことでmacOSのSplit Viewのように複数のアプリを任意の割合で左右に並べる実装を書きました。 macOSにはビルトインでSplit Viewという2つのアプリをSide by Sideで並べて表示できる機能があります。 Split View で Mac の Ap

    ウィンドウ管理アプリの.phoenix.jsを使って、任意のアプリをSplit Viewのように左右に並べる
  • JavaScriptやCSSを読み込むローダーライブラリをES Modulesとして読み込む

    今どきのnpmパッケージはUNPKGやPika CDNを使えば、ES Modulesとして直接import文読み込めることがあります。 たとえばPreactなら、次のようにUNPKG経由で直接モジュールをインポートできます。 <script type="module"> import { h, Component, render } from 'https://unpkg.com/preact?module'; // Create your app const app = h('h1', null, 'Hello World!'); render(app, document.body); </script> Getting Started | Preact: Fast 3kb React alternative with the same ES6 API. Components & Vir

    JavaScriptやCSSを読み込むローダーライブラリをES Modulesとして読み込む
  • SecretlintでAPIトークンや秘密鍵などのコミットを防止する

    SecretlintAPIトークンや秘密鍵のようなリポジトリにコミットしてはいけないデータを含んだファイルがないかをチェックするツールです。 Secretlintが見つけられるCredentials(秘匿情報)はプラグインで拡張できるようになっていて、npmAWSGCPSlack、SSH秘密鍵、ベーシック認証などの検知に対応しています。 Gitのpre-commit hookやCIサービス上でSecretlintを使ってファイルの中身をチェックすることで、 リポジトリにうっかりCredentialsをコミットしてしまうことを防止する目的のLintツールです。 Credentials(秘匿情報)のチェックに特化したESLinttextlintのようなLintツールです。 まずチェックしてみよう SecretlintDockerかNode.jsが入っている環境なら次のコマンドで、現

    SecretlintでAPIトークンや秘密鍵などのコミットを防止する
  • textlintで日本語の文章をチェックする

    textlintMarkdownなどテキスト向けのLintツールで、テキスト版ESLintみたいな感じのツールです。 JavaScriptでルールを書けるテキスト/Markdownの校正ツール textlint を作った | Web Scratch 最近azu/JavaScript-Plugin-Architectureという小さな書籍を書いていて、色々簡単に使えるような仕組みを追加しています。 この記事では簡単なtextlintの導入方法について紹介します。 公式サイトには一部ルールを含むオンラインデモが公開されています。 textlint · The pluggable linting tool for text and markdown ドットインストールにてNode.jsのインストール、textlintの利用方法、エディタとの連携などのチュートリアルが公開されています。Node.

    textlintで日本語の文章をチェックする
    okumuraa1
    okumuraa1 2019/06/23
    ありがとうございますm(_ _)m
  • npmで名前空間を持ったモジュールを公開する方法(scoped modules)

    npmにモジュールを公開することは多くなってると思いますが、今までのnpmだと名前は早い者勝ちでした。 最近npm Private Modulesというprivateで扱えるモジュールを有料でサポートしましたが、これはscoped modulesをprivateで扱う時だけ有料でpublicで公開する時は無料で行えます。 scoped modulesというのは、@username/project-name という感じで、@ユーザー名がパッケージ名に入るので異なるユーザー間では重複しません。 The npm Blog — solving npm’s hard problem: naming packages 公開手順 実際にscoped modulesをpublicに公開する手順としては、 npm init --scope=<npmユーザ名> パッケージの名前が@<npmユーザ名>/パッケー

    npmで名前空間を持ったモジュールを公開する方法(scoped modules)
    okumuraa1
    okumuraa1 2019/04/20
    ありがとうございますm(_ _)m
  • pandocでMarkdownを拡張しコードをインポート出来るfilterを書く

    はじめに pandoc の --filter 機能を使ってMarkdown等にプリプロセスな処理を挟んで、 Markdown上に特定の記法で書いたら自動でコードを埋め込むようにするという話です。 pandocのfilter pandocでは --filter [filter script] という感じで、フィルター処理をするスクリプトを変換時に入れることが出来ます。 詳しくは下記を参照して下さい Pandoc – Scripting with pandoc この--filter は以下のような処理のalias的な存在になってます。 変換前ファイル -> JSON -> フィルタースクリプト -> JSON -> 変換後ファイル フィルタースクリプトには変換前のファイルをJSONにしたものが渡されます。 つまり、フィルタースクリプトは文章をJSON(Pandoc AST)を処理するようなスク

    pandocでMarkdownを拡張しコードをインポート出来るfilterを書く
    okumuraa1
    okumuraa1 2019/04/20
    ありがとうございますm(_ _)m
  • ECMAScriptの仕様/プロポーザルの調べ方を知る

    このステージの詳細についてはThe TC39 Processを参照してください。 2ヶ月に1度行われるTC39のミーティングにおいて、プロポーザルごとにステージを進めるかどうかを議論します。 このミーティングの議事録もGitHub上のtc39/tc39-notesにて公開されています。 ステージ4となったプロポーザルはドラフト版であるtc39/ecma262へマージされます。 そして毎年の決まった時期にドラフト版を元にしてECMAScript 20XXとしてリリースします。 この仕様策定プロセスの変更は、ECMAScriptに含まれる機能の形にも影響しています。 たとえば、class構文の策定は最大限に最小のクラス(maximally minimal classes)と呼ばれる形で提案されています。 これによりES2015でclass構文が導入されましたが、クラスとして合意が取れる最低限の

    ECMAScriptの仕様/プロポーザルの調べ方を知る
  • 1