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
The Buffer type has been the cornerstone for binary data handling in Node.js since the beginning. However, these days we have Uint8Array, which is a native JavaScript type and works cross-platform. While Buffer is an instance of Uint8Array, it introduces numerous methods that are not available in other JavaScript environments. Consequently, code leveraging Buffer-specific methods needs polyfilling
2023年7月31日JavaScript,インタラクション,アニメーション,iOS普段 iPhone を使っている人でスクロールが端に到達した時に、少しだけ端を越えていき、その後跳ね返ってくる挙動を意識したことがある人はどれだけいるでしょうか?その挙動をどう実装するか考えたことはありますか? この iOS の挙動をラバーバンドスクロールやバウンススクロール、バウンスバックなどと呼びますが、ほとんどの人はあまり意識せずに iOS デバイスを使っていると思います。今では当たり前のこの挙動は、iOS の使っていて気持ちのいい UI に大きく寄与しています。 本記事では、この挙動をラバーバンド効果と呼び、単純化した例を通じてその実装方法を解説します。 ラバーバンド効果の単純化した例 #ラバーバンド効果はスクロールだけではなく、移動可能なオブジェクトが動ける範囲を暗に示すために使えます。例えば、この
この記事はドワンゴ Advent Calendar 2023 の 22 日目の記事です。 ドワンゴ教育事業Webフロントエンドチームの berlysia です。1 この記事では、オンライン学習サービスN予備校の開発を支えるコーディング規約の考え方に少し触れ、その運用を支えるESLintの活用を紹介します。 この記事の内容は、他社様主催イベントにて発表した内容の再構成です。 speakerdeck.com コーディング規約は実行可能にしたい 教育事業のWebフロントチームには、細かいコーディング規約が書かれた文書は存在しません。コーディング規約はESLintをはじめとする各種ツールによって、自動で検出・修正可能な形になっています。 文書という形でなく、各種ツールのコンフィグファイルとそのコメントとしてまとまっている、と言い換えてもよいかもしれません。ドキュメンテーションは重要な仕事ですが、そ
https://github.com/google/typograms/ Overview Typograms (typographic diagrams) is a lightweight image format (text/typogram) useful for defining simple diagrams in technical documentation. Like markdown, typograms is heavily inspired by pre-existing conventions found in ASCII diagrams. A small set of primitives and rules to connect them is defined, which you can use to build larger diagrams. Typog
Publickeyが関連記事の動的生成をPHPとJavaScriptとMovableTypeで実装した方法とは? ブログやニュースサイトなどのWebサイトを構築する際には、「人気記事ランキング」と「関連記事」の表示はぜひWebサイトに組み込みたい機能といえます。 Publickeyでも、この2つの機能を組み込んでいます。具体的には、人気記事の表示はGoogle Analyticsのデータを基にランキング表示を行ってくれる外部サービス「Ranklet4」を採用しています。 問題は「関連記事」です。私の知るところでは、関連記事の中に広告へのリンクが埋め込まれるという形で提供される関連記事表示サービスはたくさんあるのですが、純粋に関連記事の表示機能だけを提供してくれるサービスは有料のものを含めても見つけることができません。 そうした中で、Publickeyが使い続けてきたのがログリー社のLOGL
はじめに こんにちは!!@Sicut_studyです! クラウド破産しかけました!ギリギリ払えるくらいやばかったです!! 普段サービスを Firbese でデプロイしているのですが、この度自分でサービスをリリースした時に破産しそうになった話を共有していきます。 自分が使うためのサービスとみんなに利用してもらうためのサービスではこの点が大きく違うんだなとしみじみ感じたので、自分以外が使うサービスをリリースする方には参考になるかと思います 0. アラートは突然に とあるメールが自分のもとに届きました !?!??!??!??!?!!!?? やばいまだ11月始まって6日なのに予算の半分を使ってしまっただと!?! とくにリリースなどは行っていなかったのでなぜか今月になって請求額があがるようになっていました 仕事中にメールが来たのですが、気になりすぎてまったく集中できませんでした😅😅😅😅 1.
2024年2月、JavaScriptライブラリ htmx の発見から始まり、短期間でその可能性に引き込まれ、以下の3つの記事を書きました。 JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ | kazumich.log kazumich.log htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位 になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうな... Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル appleple htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページ
JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32%がテストを書かない。JetBrainsによるアンケート調査 Kotlin言語やIntelliJ IDEAなどの開発ツールを開発提供しているJetBrainsは、 JavaScriptとTypeScriptに関する調査結果「2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケートのインサイト」を公開しました。 この調査は世界中の2万6348人の開発者からのアンケートを集計したもので、アンケートは2023年に行われています。公開された集計結果から興味深いものを見ていきましょう。 IDEはVisual Studio Codeが過半数のシェア 回答者の半数以上となる51%が、JavaScriptやTypeScriptのプログラミングを行う場合の統合開発ツール
Back to articlesWinterJS 1.0Announcing WinterJS 1.0, the fastest Javascript web server now also supporting Cloudflare applications and React Server Components WinterJS 1.0 is finally here. WinterJS is an incredibly fast WinterCG-compatible Javascript runtime written in Rust using the SpiderMonkey engine to execute JavaScript, and Tokio to handle the underlying HTTP requests and JS event loop. Wint
2023/11/19(日)で開催された JSConf JP 2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 x アカウントについては、以下のように確認できたものを記載しております。 JSConf JP 公式サイトに記載がある JSConf JP 公式サイトに記載のプロフィールと一致している 当イベントで登壇されることに言及されている スライドに記載されている リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube で配信されていましたが、執筆時点ではトラック A の動画が非公開になっていました。 アーカイブとして残るのかがわからなかったため、一旦 JSConf JP の YouTube アカウントへのリンクのみ記載にしておきます。
ライブラリやツールなどを作っているときに、特定の機能やパッケージを非推奨にする場合があります。 これらの非推奨はリポジトリ上のREADMEやIssueなどに書いても、利用者が気づかないことがあります。 そのため、利用者が気付けるように非推奨の機能やパッケージを使った場合に警告を出す方法を紹介します。 非推奨にはいくつかの段階があり、それに応じてやり方を変えられるので、それぞれの方法を紹介します。 パッケージの非推奨化: npm deprecate <package> <message> コードレベルの非推奨化: JSDocタグの@deprecated 実行時の非推奨化: process.emitWarning() パッケージの非推奨化: npm deprecate <package> <message> npmのパッケージレベルで、そのパッケージが非推奨であることを通知するにはnpm de
ライブラリがこんな構成になっていませんか? TypeScript製のライブラリをnpmで配布するとき、そのパッケージの構成は次のようなフラットな構造になっていませんか?フラットな構造とは、TypeScriptファイル(.ts)と、型定義ファイル(.d.ts)が同じディレクトリにあるような構成です。 ├── index.ts ...... TypeScriptファイル ├── index.d.ts .... 上の型定義ファイル | package.jsonのtypesフィールドで指定してる。 ├── index.js ...... 上のJavaScriptファイル | package.jsonのmainフィールドで指定している。 | ├── module.ts ..... TypeScriptファイル | index.tsからimportされている。 ├── module.d.ts ...
We recently launched the JavaScript Registry - JSR. It’s a new registry for JavaScript and TypeScript designed to offer a significantly better experience than npm for both package authors and users: It natively supports publishing TypeScript source code, which is used to auto-generate documentation for your package It’s secure-by-default, supporting token-less publishing from GitHub Actions and pa
Syntax Highlighting code snippets with Prism and the Custom Highlight API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ上の構文ハイライトの一般的な仕組みは、すべてのトークンを要素で囲み、適切なクラスを割り当て、CSSを使って色付けすることです。 CSS Custom Highlight APIのおかげで、DOMツリーにを散りばめてカラー情報を追加するステップを省略できます。 Custom Highlight APIの基礎 ブラウザサポート 静的コードスニペットの構文ハイライト 仕組み ステップ1:セットアップ ステップ2:コードのトークン化 ステップ3:トークンとハイライトの関連付け Custom Highlight APIの欠点 制限されたスタイリングオ
Module Harmony とは 現在 TC39 で多くのモジュール機能を追加する提案が進行しています。かつてはそれぞれの提案が無秩序に進行していましたが、2023年5月に Module Harmony として整理されました。この記事ではそれら提案についてまとめようと思います。 モジュール提案仕様の依存関係 インポートフェーズ修飾子 モジュールの読み込みがフェーズに分けられ、それぞれに対して修飾子が提案されています。シンタックスとしては import の後ろに修飾子を付けます。 import <Modifier> <ImportBinding> from <ModuleSpecifier>; import.<Modifier>(<AssignmentExpression>); モジュールの各フェーズと修飾子の対応 アセット参照 URL やパス解決のみをするのがアセット参照です。Asset
The document provides an in-depth look at the process of parsing in Javascript. It explains parsing as the transformation of a programming language described in strings into a structured state. Key topics include the flow of parsing (reading source code, converting Unicode sequences and escapes, tokenization, etc.), dealing with Javascript escapes, lexical analysis, syntax analysis using Backus-Na
概要 □ スライドパズルのゲームを作る □ 基本に立ち返りHTMLとCSSとピュアなJavaScriptだけで作成する ・パズルの実装はシンプルで簡単。 ・考え方さえ理解すれば早いため、実装の前にイメージで説明する。 □ パズルを試したい人は https://jd253t.csb.app (codesandboxのpreview)から試せる ※下の埋め込み表示ではJavascriptが想定通り動作しないので上記のURLから試してください ※パズルはPCからの操作のみ対応 ※codesandboxのpreviewが安定しないことがあります。もし表示が崩れていたらソースコードを貼っているのでローカルで試してください イメージ.パズルを作る方法 □ 1.canvas要素(390×390で)を作成する □ 2.写真を390×390でcanvas内に描画する □ 3.スライドパズル画像を作る定義を作
JavaScriptやTypeScriptのアプリケーションを開発する際に使われる、ソースコードのフォーマットや文法チェック、複数のコードのバンドルなどのツールを連携させた、いわゆるツールチェインを、単一のツールで実現してしまおうというのが、2020年にオープンソースで登場したRomeです。 その主要な開発者であるSebastian McKenzie氏がRomeの開発とサポートを推進するための企業「Rome Tools, Inc.」を2021年5月に立ち上げます。 参考:JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ しかし現時点でこのRome Tools,Inc.は全従業員をレイオフした状態で、Romeの開発も滞っていると、コア開発チームのEmanuele Stoppa氏はブログ「Announcing Biom
Hanabi.REST AIにHonoJSのバックエンドを書かせて遊ぶ、Hanabi.RESTというサービスを一般公開します。それに際して、この記事では、Hanabiの紹介と簡単に技術スタックを解説していきます。 皆さんは、AIがプロンプトからUIを生成する、V0というサービスをご存じですか?僕はあれを見たときに、ある妄想が膨らみました。 「V0のAPI版があれば、プロンプトからWebアプリケーションを作れるやん!!」と。 当初はハッカソン用の小プロジェクトとして始めましたが、想定以上に面白い結果が得られたため、開発を継続することにしました。技術的な制約、様々な黒魔術による不安定な挙動、LLMの劣化など、数多くの壁を乗り越えながら、約半年をかけてようやくリリースに至りました!! 次のリンクから実際にAIが生成したTwitter風のAPIを試すことが出来ます! また、会員登録すれば誰でもAP
上記以外で特筆すべき点として、他の開発者(≒チームメンバー)にとっては、変更の影響をほとんど受けずに、ノーコストで上記恩恵を受けられる点があります。 これは Vitest の Jest に対する高い互換性のおかげでテストコードの書き方に大きな変更がなかったことと、テスト実行コマンドを npm-scripts によって隠蔽していたことによるもので、移行したことに気づきさえしない可能性もあります。 Vite を使ってないのに Vitest 使ってええんか? 今回 Jest から Vitest への移行を行ったプロジェクトは、開発サーバーやプロダクションビルドには Webpack を使用しており、Vite は一切使用していませんでした。 そういったプロジェクトにおいても、Vite をベースとしたテストフレームワークである Vitest は使用して良いものでしょうか? これについては Vitest
ウェブサイトをスクロールした時に、他のサイトよりも滑らかに余韻が残るような動きを目にしたことはないでしょうか? このスクロールの挙動は慣性スクロールと呼ばれ、ウェブサイトを演出する手法のひとつです。 スクロール操作を止めた後に少し余韻が残りながらスクロールが継続することで、コンテンツをスムーズに閲覧できたり、演出と組み合わせることで世界観や没入感を表現できます。また、macOSに比べるとWindowsはデフォルトでスクロールしたときにカクカクと動くため、慣性スクロールを実装するとWindowsでもmacOSのように滑らかにスクロールさせることができます。 前編である今回の記事では、慣性スクロールを使ったウェブサイトを紹介し、簡単に実装できるライブラリ「Lenis」で実際に慣性スクロールを実装してみます。 慣性スクロールが使われているサイト 慣性スクロールはどのようなウェブサイトで使われてい
サーバサイドで実行可能なJavaScriptランタイム「Bun」は、2023年5月に登場したバージョン0.6で、単独の実行ファイルを生成できる「bun build」機能が搭載されました。 単独の実行ファイルは、Bunをインストールすることなく、そのまま実行可能です。 そして4月26日にリリースされたBun 1.1.5では、このBun buildの機能にクロスコンパイルの機能が追加されました。 Bun v1.1.5 - Fixes 64 bugs (addressing 101) - Cross-compile standalone JS/TS binaries - https://t.co/8hd5RVXz0H is bun's new crash reporter - package.json won't error on comments & trailing commas - Nod
ESLintがJavaScript以外にも対応言語を広げるとの方針を説明。まずはJSON、Markdownへの対応プラグインを開発 JavaScriptコードの構文やスタイルをチェックできる「ESLint」の開発者であるNicholas C. Zakas氏は、ESLintのブログに投稿した記事「What's coming next for ESLint」で、今後ESLintをJavaScriptだけでなく他の言語にも対応させていく方針を説明しました。 We're excited to share our plans for the future of ESLint:https://t.co/4joAwfRqkR — ESLint (@geteslint) July 5, 2024 ESLintはJavaScriptの構文やスタイルなどをチェック ESLintはその名前にあるように、いわゆる
JavaScriptの識別子(変数名、関数名、プロパティ名など)の2文字目以降に中黒「・」(U+30FB KATAKANA MIDDLE DOT)が使えるようになりました。以下のコードはChrome 124では構文エラーになりますが、Chrome 125では問題なく実行できます。 const シン・ゴジラ = 2016; JavaScriptの識別子 中黒が使えるようになったのは、JavaScript(ECMAScript)の仕様が変わったからではありません。変わったのはUnicodeの仕様のほうです。Unicode 15.1.0(2023年9月)においてOther_ID_Continueプロパティ(を持つ文字の集まり)に中黒が追加されました。 そもそもJavaScriptの識別子に使える文字は、Unicodeを参照して定義されています。ECMAScript 2023(2023年6月)では
はじめに bun installで生成されるBunのロックファイルはbun.lockbというバイナリファイルである。 公式を読むと性能向上のためにバイナリ化していることがわかる。 Why is it binary? In a word: Performance. Bun’s lockfile saves & loads incredibly quickly, and saves a lot more data than what is typically inside lockfiles. 困ること まさにこのツイートの問題で、Git管理したいのにバイナリが出力されるのは不便で、どうしよう? と実際の本番利用では困るだろう。 解決方法 案1. git diffで差分確認する 公式のページを読むと、どうやら設定追加でgit diffができるらしい。 bun install request g
前置き 4月の第1週に行われたCloudflare Developer Week 2024でAIやデータベース関係のアップデートの影に隠れ、WorkersをつくってるKenton氏のブログが2つ投下されました。 そして「JS RPC」という機能が追加されました。 これが一見地味なんですが、非常に楽しい未来を想像できるので、書いてみます。というか以前chimameさんが書いた記事でだいぶ理解できるのですが、もう少し噛み砕いて書いてみます。 Bindings Cloudflareにはいくつもプロダクトがあります。ストレージのR2、データベースD1、KVストアのKVなどです。そしてそれらに繋ぐ方法が「Bindings」という方法です。このBindingsで繋げられるものはたくさんあります。 AI Analytics Engine Browser Rendering D1 Environment
I am pleased to announce, with support from Miško Hevery and Ryan Carniato, my new open source project Valibot. Valibot is a schema library for validating structural data, comparable to Zod, Ajv, Joi, and Yup. The big innovation of Valibot is the modular design of the API and an optimization of the source code for compression. This new approach enables unprecedented bundle size minimization throug
このエントリは【カヤック】面白法人グループ Advent Calendar 2023 の24日目の記事です。 こんにちは!意匠部のおばらです。 面白法人カヤックでは日々、様々な社内勉強会が開催されています。本記事では JS 好きな社内のエンジニア向けに私が企画&主催している「JS体操」についてご紹介します。 記事の最後にはみなさんも挑戦できるように最新の「JS体操」を紹介しています。ぜひ挑戦してみてください。 1.「JS体操」とは? 2.「JS体操」の掟 3.「JS体操」のメニュー 3.1. 何らかのロジックを解く 3.2. コードゴルフで文字数を競う 4.「JS体操」の流れ 4.1. 出題方法 4.2. 解答方法 4.3. 実際の様子 5.「JS体操」の過去問の紹介 5.1. 第一回 5.2. 第二回 5.3. 第三回 5.4. 第八回 5.5. 第十一回 5.6. 第十四回 5.7.
はじめに 吉川@広島です。 OpenAIの新機能が盛り上がっていますね! OpenAI DevDayで発表された様々な機能について、公式ドキュメントを見ながら少しだけ詳細を確認してみた | DevelopersIO いまのところ弊社記事はPythonコードが多い印象がありますので、いくつかの新規機能についてNode.js組である自分もサンプルコードを上げてみます。 環境 node v18.14.2 typescript 5.0.2 openai 4.16.1 [共通] OpenAIクライアントの初期化 openai パッケージをインストールします。 npm i openai クライアントを初期化します。 const openAi = new OpenAI({ apiKey: "xxxxxxxxxxxxxxxxxxxxxx", }); DALL·E 3 API [アップデート]DALL·E
Web development moves at lightning speed. I still remember when I first started using libraries like jQuery, Prototype, script.aculo.us, Zepto, and many more. Even with modern tools like Angular, VueJS, React, Solid and Svelte, we still have to deal with the Document Object Model (DOM). While these frameworks encapsulate and hide direct DOM management, they still give us access to work with the DO
大規模なコードベース向けの高速なASTツールとしてast-grepというものがある。これについての調査メモ。 主に以下の公式ドキュメントを読み進めて、利用方法、パターンやルールの詳細などについて理解を深める。 ast-grepとは 公式ドキュメントでは、コードの検索からLint、codemodに至るまでASTツールとして網羅的にカバーできるツールであることが以下のように表現されている。 Think ast-grep as an hybrid of grep, eslint and codemod. 結果に精度が求められる場面では、高速であるものの精密さに欠けるテキストベースではなく、ASTベースでの正確な解析の方が望ましいだろうけど、ASTでの記述は非常に面倒になりがちという側面がある。 その点においてast-grepは、テキストベースでのgrepではなく、ASTベースでのgrepというよ
新興のJavaScriptフレームワークNueとは?公式サイトざっくりまとめこの記事では、新興のJavaScriptフレームワークであるNueについて公式サイトの内容をざっくりまとめています。注)完全に正確な情報が知りたい方は記事内のリンクより公式サイトをご確認ください。 Nueは、MITライセンスでGitHubでホストされているオープンソースプロジェクトで、ヘルシンキ出身のフロントエンド開発者であるTero Piirainen氏によって開発されました。彼はオープンソースプロジェクト、テクノロジー製品、スタートアップの構築に25年以上の経験を持ち、Riot.js、Flowplayer、jQuery Toolsの製作者として知られています。 公式サイトのファーストビューでは「Nueは強力なReact、Vue、Next.js、Vite、Astroの代替ツールです。あなたのウェブ開発のやり方を変
Patterns for Reactivity with Modern Vanilla JavaScript August 21, 2023 “Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things. Reactivity Patterns are Core to Web Development We handle a lot with JavaScript in websites and web apps since the browser is an entirely asynchronous environment. We mu
4月6日、CloudflareはCloudflare WorkersにJavaScriptネイティブのRPC(Remote Procedure Call)システムを追加した。 4月6日、CloudflareはCloudflare WorkersにJavaScriptネイティブのRPC(Remote Procedure Call)システムを追加した。 この新機能により、クライアント・サーバー間はもちろん、Worker間の通信も、ほぼボイラープレートなしでシームレスに行えるようになる。 ※RPC(Remote Procedure Call)とは、異なるコンピュータシステム間、または同一システム内の異なるプロセス間で、あたかもローカルのプロシージャ(関数やメソッド)呼び出しのように通信を行う手法。この手法を用いることで、開発者はネットワークの詳細を意識することなく、簡単にシステム間でデータを交換
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く