Software security starts with the developer: Securing developer accounts with 2FA
ProductSecuritySoftware security starts with the developer: Securing developer accounts with 2FAGitHub will require all users who contribute code on GitHub.com to enable one or more forms of two-factor authentication (2FA) by the end of 2023. The software supply chain starts with the developer. Developer accounts are frequent targets for social engineering and account takeover, and protecting deve
Automating Dependabot with GitHub Actions - GitHub Docs
About Dependabot and GitHub Actions Dependabot creates pull requests to keep your dependencies up to date, and you can use GitHub Actions to perform automated tasks when these pull requests are created. For example, fetch additional artifacts, add labels, run tests, or otherwise modifying the pull request. Responding to events Dependabot is able to trigger GitHub Actions workflows on its pull requ
webpack の基本的な使い方 以下は webpack のインストール方法や webpack.config.js の設定方法、Loaders ローダー、Plugins プラグイン、splitChunks、webpack-dev-server、v5 で導入された Asset Modules などの基本的な使い方の覚書です。 Node.js がインストールされていることを前提にしています。 ※ webpack5 (バージョン 5) 用に内容を更新しました（2021年12月31日）。 以下で使用しているパッケージのバージョン node: 16.13.2 npm: 8.1.2 webpack: 5.65.0 webpack-cli: 4.9.1 webpack-dev-server: 4.7.2 関連ページ： nvm を使って Node.js を Mac にインストール Node.js を Ma
フロントエンドの技術選定 によって Svelte と SvelteKit を使って管理画面を作ることに決めました。Unicorn Cloud ID Manager (以下UCIDM) の管理画面を SvelteKit を使って開発しています。 UCIDM のフロントエンドのアーキテクチャBFF (Backend For Frontend) サーバーに Node.js を配置し、サーバーサイドレンダリングを採用したフロントエンドを提供しています。マイクロサービスでは一般的なアーキテクチャだと思います。 エンドユーザー (ブラウザ) は BFF サーバーに対して認証を行い、BFF サーバーが UCIDM API サーバーと認証します。エンドユーザーは透過的に UCIDM API サーバーが返す情報を参照できますが、直接 UCIDM API とは通信できません。これはセキュリティを担保する上での
Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly.
毎月や半年に一回といったように、リリースする時期(間隔)を決めて更新するタイプのパッケージがあります。 具体的には、次のtextlintのプリセットルールは1月と7月という形で半年に一回リリースしています。 textlint-ja/textlint-rule-preset-japanese: textlint rule preset for Japanese. textlint-ja/textlint-rule-preset-ja-technical-writing: 技術文書向けのtextlintルールプリセット なぜ、このようにリリースする時期を決めているかというと、これらのパッケージは他のパッケージに依存していて、他のパッケージの更新がそのままメジャーアップデートになりやすい性質があるためです。 そのため、依存を更新してリリースすると、頻繁にメジャーアップデートしないといけなくなりま
Huge thanks to Jarred Sumner for reviewing this post. It wouldn’t have been possible without his help. Bun is a new and ambitious JavaScript toolset and runtime. Early adopters have been reporting that Bun JavaScript is incredibly fast. So fast that it has been touted by some as a Node.js killer. Curious, I decided to check out Bun for myself and benchmark it against the competition. Is it as fast
GitHub Advisory DatabaseのRSSフィードがなかったの作りました JSON FeedとAtomフィードを出力しています。 基本的にはJSON Feedをメインにしてますが、SlackがJSON FeedをサポートしてなかったのでAtomを追加しました。 RSS Feeds for GitHub Advisory Database GitHub Advisory Databaseは、脆弱性のデータベースでRubyとかGoとかnpmとかRustとか言語ごとの脆弱性が集まっています。また、GitHub自体がセキュリティアドバイザリーの仕組みを持っているので、外部の脆弱性データベースにないものとかもあります。 About GitHub Security Advisories - GitHub Docs JavaScriptだとnpm auditとかはこのデータベースを参照した
On January 8, 2022, the open source maintainer of the wildly popular npm package colors, published colors@1.4.1 and colors@1.4.44-liberty-2 in which they intentionally introduced an offending commit that adds an infinite loop to the source code. The infinite loop is triggered and executed immediately upon initialization of the package’s source code, and would result in a Denial of Service (DoS) to
bundlephobia.com というサイトがあります。これは npm のモジュールを参照した際のバンドルサイズを算出してくれるサービスです。 便利なんですが、基本的に dist/.. 等の package.json の main で配られるものだけをターゲットにしているので、 ESM Treeshake で一部のモジュールだけ import {} from ... した際のバンドルサイズがわからない、という問題がありました。 なので、それに対応したものを自分で作りました。netlify にデプロイしてあります。 こんな感じです。 使い方 https://shakerphobia.netlify.app/?pkg=<>&imports=<a,b,c> どうやって動いてるか URL を踏むと、 cdn.skypack.dev (その実体は npm) からソースコードを落としてきて、 Web
モダンフロントのフレームワークは何を選べばいいのか?
フロントエンドのフレームワーク(FW)はあいも変わらず出たり消えたりしています。 「結局どれを選べばいいの?」 という問いに個人的には follow the money(利益が出ないとそもそもFWの開発が進まない) npm trends(利益の元 & 依存関係を増やせると生き残りやすい) 使いやすさ & 仕様を満たせるか という順序で見ればいいかなと思っています。↑は優先順位そのまま 元々捨てる前提であればともかく、採用してもメンテナンスに入ってしまいそうな技術はやはり採用しにくい。 というわけで直近で出てきたFWの現況を見ていきます💰💰 TL;DR SGがメインであればAstroは選択肢に入るかも。 ECサイトならRemix選択肢に入るかも。 SolidJS & Qwik は素振りもしばらくいいかな... プロダクトレベルではまだ怖い Astro all in one の web f
スケーラブルで保守性の高いモジュラーディレクトリ構成へのフロントエンドリポジトリ移行 | メルカリエンジニアリング
Merpay Advent Calendar 2022 の9日目は、メルペイ フロントエンドエンジニアの @tokuda109 がお届けします。 この記事は、メルペイ フロントエンドチームで保守しているリポジトリを複数のディレクトリに分割し、スケーラブルで保守性の高いコードベースに再構築する方法を紹介します。 記事の内容は『Merpay Tech Talk 〜Monorepo開発におけるツール選定〜』のイベントで一度紹介したものになりますが、この記事ではさらに詳しく説明します。 フロントエンドチームは今後 Nuxt 3 への移行作業を控えていて、今回紹介するリポジトリ移行が Nuxt 3 への移行に与える効果についても紹介します。 抱えていた課題 フロントエンドチームは、メルペイのサービスリリース時からカスタマーサポート業務を行う社内向け管理画面や加盟店さま向け管理画面など、様々なマイクロ
Microsoft傘下のGitHubは米国時間3月16日、パッケージ管理ツールnpm（Node Package Manager）の開発元であるnpm Inc.を買収すると発表した（両社ともに買収金額は公表していない）。Microsoftは、GitHubとnpmを統合し、JavaScript開発者にとってさらに魅力的なコミュニティーの構築を目指す計画としている。 npmは、パッケージ管理ツールを提供する以外に、npmレジストリとCLIを管理および維持している。 GitHubによると、npmは現在、130万件以上のパッケージをサポートしており、ダウンロード回数は月間750億回にものぼるという。npmレジストリを開発者に対して常にオープンソースかつ無償で提供し続けるつもりだと、GitHubの最高経営責任者（CEO）を務めるNat Friedman氏は述べた。 Microsoftによるnpmの買収
こんにちは。フルーリオ株式会社のlumaです。 Node.jsプロジェクトで開発をする際に役立つフルーリオ株式会社の新作CLIツール notios の紹介をします。 notiosの読み方は「ノーティオス」です。 対象読者 Node.jsでモノレポでの開発をしている npm-run-allを利用している Node.js開発で開発コマンド(next dev 、nodemon 、 node-dev)stdoutとstderrが混在しているのを解消したい すぐに導入したい人はこちら npm-run-all を利用している場合は、 npm remove npm-run-all npm install -D notios package.json が置いてあるディレクトリで npx notios yarn や pnpm でも問題なく使用できます。また、 npx notios 経由で起動していない場合は
初心者に向けての答え package-lock.json について、とりあえず以下を守ればプロジェクトに迷惑をかけません。 直接編集してはいけません 基本的に無視していいファイルです 削除してはいけません npm install コマンド実行時に変更されることもありますが、そのときに発生する変更は気にしなくて大丈夫です マージリクエスト（プルリクエスト）する際に package-lock.json に変更があった場合は、その変更も含めて提出します ※ これは package.json についても同じことが言えます。 もうちょっと知りたい人に向けての答え package-lock.json は npm install 実行時に新規作成・更新される package-lock.json には npm install で実際にインストールしたパッケージ情報が記載されている package-lock
npm Blog Archive: npm v7 Series - Beta Release! And: SemVer-Major Changes in npm v7
The npm blog has been discontinued. Updates from the npm team are now published on the GitHub Blog and the GitHub Changelog. << Why keep package-lock.json? A new beta version of npm appears! tl;dr - Run npm i -g npm@next-7 right now, and tell us about any problems you encounter with it. This is a big one, you’re going to want to check it out. As with any beta software, it’s likely to still have a
TypeScript 5.5で導入されたisolatedDeclarationsは、JavaScriptエコシステムを大きく変えるゲームチェンジャーかもしれない
7月7日、Denoの開発者マーヴィン・H氏が「JavaScriptエコシステムを加速する（Speeding up the JavaScript ecosystem）」と題した記事を公開した。この記事では、TypeScriptの新機能「isolatedDeclaration」が、JavaScript / TypeScriptエコシステムを変革する可能性について詳細に紹介されている。本記事ではその内容を簡単に紹介する。 本記事は、以下のエキスパートの皆様に監修していただきました: 古川陽介さん（Japan Node.js Association代表理事） うひょさん（株式会社カオナビ フロントエンドエンジニア） npmパッケージングの問題点 現在npmでのパッケージングプロセスは相当に複雑である。モジュールをnpmに公開しようとする開発者は、CommonJS対ESMの問題や、多くの設定調整を行
How to build, test, and publish a TypeScript npm package in 2022
How to build, test, and publish a TypeScript npm package in 2022 In this article, we will build and publish an NPM package from scratch using TypeScript and Jest for testing. We will initiate the project, set up TypeScript, write tests with Jest, and publish it to NPM. Our project Our simple library is called digx. It allows "digging" values from nested objects by path (it's similar to lodash get)
Azure Static Web Apps で Puppeteer を動かしたかった - ほりひログ
はじめに 前回のエントリーでは、Azure Functions で Puppeteer を動かして、特定のページのスクリーンショットを取得する Web API を作ってみました。 uncaughtexception.hatenablog.com Web API で動作がするのは確認できましたが、Web ブラウザーのアドレスランを編集して URL クエリーに対象の URL を入れるのがやや面倒なので、Web API を使用しつつ Web ページで UI を作ってみたいと思い、 静的ページとバックエンド API を一緒にデプロイできる Azure Static Web Apps (以下 SWA、ちな Preview) で試してみました。 Azure Static Web Apps を作る クイック スタートがあるので、そのまま使います。 docs.microsoft.com ざっくりいうと、
CommonJSとES Modulesについてまとめる
モチベーション 普段フロントエンドを領分にしているのになかなかこのあたりの基礎が足りていないと感じることが多いので、なんとかしたい。 ES Modules方式でしか対応されていないライブラリを使おうとしてコケたので色々調べたのも含め、まとめていく。 ちなみにその辺りについてはこの神記事見ると良い。 個人的に気になっているモジュールシステムについて掘り下げていく。 CommonJS CommonJSとは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトである。 from Wikipedia 例えばNode.jsで使われている。 Node.jsはデフォルトで全てのモジュールをCommonJSで扱うが、Node.jsは最近のバージョンでES Modulesに対応するなどしていて、潮流はES Modulesに流れつつある。 後述する
Storybook が 7.0 で複数のフロントエンドフレームワークを持つ monorepo で使いやすくなる
はじめに この記事を書いている時点で 7.0 は alpha だが、触る機会があったので知ったことを書こうと思う。 一応 7.0 用のドキュメントページはあるけど、まだドキュメントの更新はされていないので役に立たないと思って良い (alpha なので当然)。 6.5 からの変更点を知るにはマイグレーションガイドが役に立つ。 Storybook 6.x までで使いにくかった点 以下のような構成の monorepo 考える。 それぞれのサブパッケージに @storybook/vue3 や @storybook/react をインストールすることになる。 ここで、build-storybook や start-storybook コマンドを使いたいのだがうまくいかない。 例えば、vue パッケージで start-storybook コマンドを実行しても react 用の storybook が起
GitHub - nika-begiashvili/libarchivejs: Archive library for browsers
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Warning: This blog post is outdated. It may contain incorrect information. Update 2019-11-22: ESM support in Node.js is not experimental, anymore. This post was updated to reflect that. Conditional exports are now explained. In this blog post, we look at npm packages that contain both ES modules and CommonJS modules. Required knowledge: How ES modules are supported natively on Node.js. You can rea
Bundle Scanner
Identify NPM libraries included in Javascript filesEnter the URL of a website. Bundle Scanner will fetch every Javascript file from the website and search through the files for code that matches any of the 101,962 releases it has indexed from 35,003 of the most popular npm libraries on the web. Learn more.
GitHub - nodejs/corepack: Zero-runtime-dependency package acting as bridge between Node projects and their package managers
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
An update from the Faker team January 14th, 2022 👋 We're pretty excited to give new life to this project. We want the project to have a fresh start and become even cooler. What is Faker? Faker is a library that generates fake (but reasonable) data for you. Mock data. Data for testing, development, and the like. Faker was first implemented in Perl in 2004 by Jason Kohles (he reached out to us in
npm security update: Attack campaign using stolen OAuth tokens
Securitynpm security update: Attack campaign using stolen OAuth tokensnpm's impact analysis of the attack campaign using stolen OAuth tokens and additional findings. As of June 2, 2022, GitHub has completed directly notifying all impacted users for whom we were able to detect abuse from the attack on npm. If you have not received a notification directly from GitHub, we do not have evidence that yo
Electronの使い方 Web開発の技術でデスクトップアプリを作ろう | フューチャー技術ブログ
TIGの伊藤真彦です。 最近Electronを用いたアプリケーション開発を行っています。技術ブログで今まで取り扱った事のないテーマであるため、まずは入門記事を書いてみました。 ElectronとはElectronは、GitHubが開発したオープンソースのソフトウェアフレームワークです。 ChromiumとNode.jsをコアとして採用する事で、Web開発と同じようにHTML,CSS,JavaScriptを用いて開発したものを、デスクトップアプリケーションとしてビルドすることが可能になります。クロスプラットフォームであることも利点の一つであり、同一のソースコードからmacOS、Windows、Linuxへのアプリケーションビルドが可能です。 つまりWeb開発の技術でデスクトップアプリが作成できるものです。 Electronを使って開発されているもの。Electronを使って開発されているアプ
petite-vue
petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model as standard Vue. However, it is specifically optimized for "sprinkling" a small amount of interactions on an existing HTML page rendered by a server framework. See more details on how it differs from standard Vue. Only ~6kb Vue-compatible template
新山祐介 (Yusuke Shinyama) on Twitter: "あるセキュリティ研究者が、npmパッケージ "foreach" 作者のドメイン名が失効していることを発見し、取得する。いまや彼は foreach (と、それに依存する 36,826のnpmプロジェクト) に対して好き勝手できるよう… https://t.co/GjqrQ3xxU2"
あるセキュリティ研究者が、npmパッケージ "foreach" 作者のドメイン名が失効していることを発見し、取得する。いまや彼は foreach (と、それに依存する 36,826のnpmプロジェクト) に対して好き勝手できるよう… https://t.co/GjqrQ3xxU2
GitHub - GoogleChrome/web-vitals: Essential metrics for a healthy site.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
最近猛烈にスターを集めているビルドツール、Viteを触ってみたので簡単に紹介します。 この記事はVite v0.19.1時点での情報です。 Viteとは？ ViteはVue.jsの作者のEvan You氏が開発中のノーバンドルなビルドツールです。 ネイティブのESモジュールのインポートを利用しバンドル不要で高速に動作するdevサーバーと、Rollup.jsをベースとしたプロダクションビルド機能を提供します。 設定不要で.vueのSFC（Single File Components）をコンパイルできて、さらにデフォルトで今開発中のVue3.0が使えます。 しかも、vue-cliのようにVue.js限定ではなく、React、Preactにも対応しています。 注意 Still experimental, but we intend to make it suitable for producti
Dart Sass（@use）の基本的な書き方と@importから乗り換える方法 | HPcode（えいちぴーこーど）
Sassでファイルを呼び出す際に使っていた@importは廃止される予定でして、代わりに「@use」「@forward」を使うように推奨されています。自分も重い腰を上げて@useを使ってみました。 （※ Google日本語翻訳） Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後のいずれか早い方（遅くとも2021年10月1日）に、@importグローバルコアライブラリ関数呼び出しと同様に非推奨になります。それはモジュールを通して作ることができます。 この非推奨が発効してから1年後（ 遅くとも2022年10月1日）、@importほとんどのグローバル機能のサポートを完全に終了します。これには、すべての実装のメジャーバージョンリリースが含まれます。 https://sass-la
GitHub - Shopify/hydrogen: Hydrogen is Shopify’s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications. Hydrogen is designed to dovetail with Remix, Shopify
Hydrogen is Shopify’s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications. Hydrogen is designed to dovetail with Remix, Shopify’s full stack web framework, but it also provides a React library portable to other supporting frameworks. Demo store 👇🏼
2022年のDenoの変更点やできごとのまとめ
Denoアドベントカレンダー 25日目の記事です🎅 この記事では、2022年にDenoに関して起きた出来事や大きな変更点などをまとめます。 Denoの今後の方針について 今年の8月にDeno公式から今後の開発方針などが発表されました。 具体的には、以下の点などに注力していくことが発表されています。 Node.jsとの互換性の向上 パフォーマンスの向上 開発体験の向上 それぞれの詳細については後ほど紹介いたしますが、これらの方針を実現するために、Deno本体へのnpmパッケージサポートや新しい高速なHTTPサーバの導入などが実施されました。 Deno本体のアップデート npmパッケージがサポート Denoでnpmパッケージが利用できるようになりました。 以下のように、npm:<パッケージ>@<バージョン>のような形式でimport文を記述することでnpmパッケージを利用できます。 // @
Software Package Management with AWS CodeArtifact | Amazon Web Services
AWS News Blog Software Package Management with AWS CodeArtifact Software artifact repositories and their associated package managers are an essential component of development. Downloading and referencing pre-built libraries of software with a package manager, at the point in time the libraries are needed, simplifies both development and build processes. A variety of package repositories can be use
August 3, 2022 npm query is a new top-level command as of npm v8.16.0 which accepts a Dependency Selector (as defined in the Dependency Selector Syntax Specification) & returns a filtered JSON Array/NodeList of dependencies from your project. We believe this capability has been a missing piece of the package management ecosystem; With its introduction we hope to unlock the potential for developers
JSer.info #526 - npm 7が正式リリースされました。 npm install --global npm で npm 7がインストールされるようになっています。 npm 7がNode.jsに同梱されるのは、Node.js 15からになります。 npm 7 is now generally available! - The GitHub Blog Presenting v7.0.0 of the npm CLI - The GitHub Blog npm 7ではpackage-lock.jsonのフォーマットが変更されています。 あわせてyarn.lockファイルのサポートが追加されています。 その他の破壊的として、peerDependenciesが自動インストール、npxコマンドの変更、npm auditの出力形式変更などが含まれています。 機能追加としては、acceptD
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webpack の基本的な使い方（入門）
SvelteKit はどのようにコンパイルしているのか？
Yew Docs · Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly.
時期を決めて定期的に更新するnpmパッケージをChangesetsで管理する
Will Bun JavaScript Take Node's Crown
GitHub Advisory DatabaseのRSSフィードを作った
「Node.js」に「npm」由来の脆弱性、修正版のリリースを予告／本番環境で「npm」を実行しないように呼び掛け
Open source maintainer pulls the plug on npm packages colors and faker, now what? | Snyk
ESM treeshake に対応したバンドルサイズを計算してくれる Shakerphobia を作った
マイクロソフト傘下GitHub、JavaScriptパッケージ管理のnpmを買収へ
Node.jsモノレポ開発のターミナルログ混雑解消のための新作CLIツールnotiosを紹介
package-lock.json ってなに？ - Qiita
Hybrid npm packages (ESM and CommonJS)
An update from the Faker team | Faker
【Vite】 Vue3.0もReactも！ノーバンドルなビルドツール「Vite」を試してみる - Qiita
Introducing the new npm Dependency Selector Syntax
2021-02-09のJS: npm 7正式リリース、Vuex v4.0.0、Puppeteer v6.0.0
Comparing the New Generation of Build Tools | CSS-Tricks