CSSとJSの変数管理でイライラしてない？CSSのenv()関数をマスターしよう - コハム
Why you should use CSS env() 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 共有のCSSとJavaScript値を最新の状態に保ち、同期させるのに苦労していますか？共有値を更新する際に、一見ランダムなバグに直面していますか？この記事では、近日公開予定のCSS env() 機能とPostCSSプラグインを使用して、CSSとJS間で同じ変数を共有し、さらにそれらを単一のファイルに保存する方法を紹介します。 よくある以下のシナリオに遭遇したことがあるかもしれません： 比較的複雑なレスポンシブデザインを実装する必要がある CSSセレクターと calc() だけではデザインに影響を与えられないため、信頼できる友人であるJavaScriptに頼る 問題を解決するために、JavaScript からCSS値（例：コンテナのサ
JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新
JavaScript Primer v6.0.0をリリースしました 🎉 JavaScript Primer v6.0.0では、ECMAScript 2024の対応とNode.jsのユースケースを新たに増えたnode:utilのparseArgs関数やnode:testを使うように書き直しています。 JavaScript Primer Sponsors JavaScript Primer(jsprimer)では、Open Collectiveを通じてプロジェクトの更新に関わる資金を募っています。 JavaScript Primer - Open Collective 今回のv6リリースにおいては、次の方々にご支援いただきました！ 株式会社コクチョウさんは、Yearly Gold Sponsorとしてご支援いただいています。 ご支援ありがとうございます！ JavaScript Primerス
汎用的な非依存のReactフックを30以上まとめたコレクション・「Nova.js」 - かちびと.net
Nova.jsは汎用的な非依存のReactフックを30以上まとめたコレクションです。何もインストールする必要はなくコードをコピーするだけで使う事が出来ます。 TypeScriptとJavaScriptで利用可能、依存関係も無くセットアップや構成も不要、CLIでフックを追加できます。 用意されたフックはオーディオ管理、バッテリー状態の追跡、クリップボードへのコピー、カウントダウンやカウントアップの実装、ユーザーが初期訪問かどうかの検出、ユーザーの位置情報の検出、ブラウザの選択言語の検出、タッチデバイスかどうかの検出、ローカルストレージの管理、オフラインかどうかの検出などなどその他にもさまざまなフックが用意されています。 各フックのコードも使い方もドキュメントに詳しく書かれていますので合わせてご参照下さい。ライセンスはMIT。 Nova.jsGithub
Deno 2.0リリース候補版が公開、1.0のリリース以来最大のアップデート
9月20日、Deno 2.0のリリース候補版が公開された。これは、Deno 1.0のリリース以来、最大のアップデートであり、Node.jsとの互換性向上や依存管理システムの改良、グローバル変数の変更など、様々な新機能と改善が含まれている。 1. グローバル変数の変更 Deno 2.0では、windowグローバル変数が削除され、代わりにglobalThisやselfの使用が推奨されている。この変更は、Denoがブラウザと互換性を持つことを目指して導入されたwindowが、思わぬバグを引き起こしていたためだ。これにより、ライブラリがDeno上での動作時に問題を引き起こすことが少なくなる。 // Deno v1.x window.addEventListener("load", () => { console.log("loaded"); }); // Deno v2.x globalThis.
先進的なWeb技術を詰め込んだAstro 5.0 β版リース — Server Islandsに注目
9月18日、Astro 5.0 Betaがリリースされた。Astroは、モダンなウェブサイト開発のための静的サイトジェネレーターで、特にフロントエンド開発において人気が高まっている。サーバーレンダリングと静的サイト生成の両方をサポートし、ReactやVueなどのフレームワークとも互換性がある点が特徴だ。性能向上や使いやすさを重視しており、ビルド後のファイルサイズを最小限に抑えることで、表示速度の高速化を実現している。この新バージョンでは、コンテンツ管理のための「Astro Content Layer」や、新しい「Server Islands」機能が安定版として導入され、開発者にとってより柔軟かつ効率的なウェブサイト構築が可能となる。Astro 5.0 Betaの主要な新機能は以下の通りだ。Content LayerContent Layerは、Astro 5.0で導入された強力なコンテンツ
2024-09-16のJS: Biome v1.9、ESLint 8.xのEOL、TypeScript 5.6、ES5の現状
JSer.info #707 - Biome v1.9がリリースされました。 Biome v1.9 Anniversary Release | Biome CSSのFormatter/LinterがStableに、GraphQLのFormatter/Linterを追加されています。 GritQLを使ったbiome searchコマンドを追加、.editorconfigをサポートなども追加されています。 ESLint v8.xのサポートが2024年10月5日に終了することが発表されました。 Version support policy and ESLint v8.x end of life - ESLint - Pluggable JavaScript Linter ESLintの現在の最新バージョンはv9.xです。 マイグレーションガイドは次のページに公開されています。 Configura
Bun 1.1.28で、「C言語をJavaScriptでコンパイルして実行」機能が導入 — N-APIより3倍速く、システムプログラミングも自在に
9月19日、bun.shで「Compile and run C in JavaScript」と題した記事が公開された。この記事では、JavaScriptからCを直接コンパイルし実行できる機能について詳しく紹介されている。この新機能は、システムプログラミングにおけるCやC ABI（Application Binary Interface）が果たしてきた重要な役割に焦点を当て、Bun v1.1.28で導入された実験的サポートを説明している。 以下に、その内容を詳しく解説する。 CとJavaScriptの統合 C言語はシステムプログラミングにおける過去、現在、未来を代表する言語である。圧縮、暗号化、ネットワーキングなど、あらゆるコンピュータシステムの基盤を支えている。さらに、C++やRust、Zigといった言語もC ABIと互換性があり、Cライブラリとして提供されていることが多い。つまり、Cはシ
Safari 18.0リリース — 最注目のView Transitions APIなど、Web開発者向けの機能を一挙紹介
9月17日、AppleはSafari 18.0をリリースした。iOS 18、iPadOS 18、macOS Sequoia、そしてvisionOS 2と共に、53の新しいウェブプラットフォーム機能、25の非推奨機能、そして209の修正が加えられた。このリリースでは、特にCSS、HTML、JavaScriptの新機能に注目すべき点が多く、Webエンジニアにとっては重要なアップデートである。 Safari 18.0における新機能 1. Distraction Control Safari 18では「Distraction Control」が導入された。この機能により、ウェブ閲覧中に表示されるサインインバナーやクッキー通知、ニュースレターのサインアップオーバーレイなど、煩わしい要素を非表示にできる。Distraction ControlはiOS 18、iPadOS 18、macOS Sequoi
オラクルよ、 JavaScriptの商標を手放すときだ。Denoのライアン・ダール氏がオラクルに公開書簡
主要なJavaScriptランタイムであるNode.jsの作者であり、現在もDenoの開発を進めているライアン・ダール氏は、JavaScriptの商標を所有しているオラクルに対して商標を手放すように要請する公開書簡「Oracle, it’s time to free JavaScript.」を公開しました。 オラクルへの要請は今回で2回目 同氏がオラクルにJavaScriptの商標を手放すように要請する試みは2回目です。1回目は2022年9月に行われています。 参考：Denoのライアン・ダール氏「親愛なるオラクル殿、どうかJavaScriptの商標を手放して」と呼びかけ JavaScriptはNetscapeがWebブラウザ用に開発したプログラミング言語であることはよく知られていますが、その名称はサン・マイクロシステムズが登録商標として所有し、同社がオラクルに買収されたことで現在はオラクル
FullCalendarの代替として開発されたオープンソースのJavaScript製イベントカレンダー・「Schedule-X」 - かちびと.net
Schedule-XはFullCalendarの代替として開発されたオープンソースのJavaScript製イベントカレンダーです。 技術スタックに関係なく、イベントカレンダーを簡単に配信出来る、というもの。もちろん、React、Vue、 Angular、Svelte、Preactといったフレームワークのコンポーネントも RWD対応、国際化（日本語サポートされています）、プラグインによるカスタマイズ、D&Dによるスケジュール変更などが可能で、このようなカレンダーアプリを数分で利用可能になります。 また、有償で構築サポートも承っているみたいです。FullCalendar代替とはいえ、あちらもOSSではあるので好みで選ぶと良いんじゃないでしょうか。ライセンスはMIT。 Schedule-XGithub
ESLint v8のEOLなど: Cybozu Frontend Weekly (2024-09-10号)
こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/9/10 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Paragraphs | scottohara.me HTML における「段落（paragraph）」の概念と、その適切な使用について解説した記事です。 HTML の paragraph は、<p> 要素だけでなく他の要素も含む広い概念で、スクリーンリーダーは <p> 要素だけでなく、<span>, <div>,<li> なども段落として認識します。そのため role=paragraph のような ARIA ロールは、
コードのタイピング力を測るエンジニア向けタイピングゲーム「UnTyping」が登場、コースは「JavaScript」「TypeScript」「React」「Python」の4つ
120秒間ひたすらタイピングし続けてコードを記述するゲーム「UnTyping」が公開されました。下記URLから誰でも無料でプレイできます。 UnTyping - エンジニア向けプログラミングタイピングゲーム https://untyping.jp/ URLにアクセスしたら以下のようにコースが表示されます。コースは「JavaScript」「TypeScript」「React」「Python」の4つです。今回は試しに「JavaScript」をクリック。 スペースキーまたはエンターキーを押してゲームスタート。 ゲームのプレイ動画は以下から確認できます。なお、プレイヤーはプログラミング未経験者です。 エンジニア向けタイピングゲーム「UnTyping」にプログラミング未経験者が挑戦してみた - YouTube ゲームが始まると以下のようにコードが表示されるのでタイピングしていきます。 一つのコードに
MinifyされたJavaScriptのコードをChatGPTで読みやすい形式に戻すことに成功
チーム向けのチャットボットAIを提供しているGlama.aiのエンジニアであるフランク・フィーゲル氏が、容量削減のために変数名を短縮し、改行や空白を消す「Minify」が行われたJavaScriptのコードをChatGPTを使って読みやすい形式に戻すことに成功したと報告しています。 Using ChatGPT to reverse engineer minified JavaScript - ChatGPT for teams | Glama https://glama.ai/blog/2024-08-29-reverse-engineering-minified-code-using-openai フィーゲル氏が最初に注目したのは、以下のサイトで背景に表示されているアニメーションでした。このアニメーションは文字で構成されたアスキーアートが波打って目まぐるしく変化していくもので、フィーゲル
フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ
TOPコラム新発見！フロントエンド技術の今フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ 2024年9月2日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL 技術選定に失敗はない 技術選定に失敗はありません。 仮説を立て、検証し、結果の分析からNext Actionを考える。検証の結果がどうであれ、それは過程に過ぎません。 机上の空論だけで全てを理解できるほど、我々人間は賢くないのです。（注意: これは人類全体を誹謗中傷する意味ではありません。） この記事では、この２年間で行った技術選定の成功例をその理由と共に紹介していこうと思います。 申し訳遅れましたが、私、YadaYadaKonnanYadaといいます。私は今回初めて記事を書いたので、どうぞお手柔らかに。 Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 前提 技術選定に結論はありません。組織毎に前提が違うのだから当然のことです。みんな違っ
2024-09-01のJS: Rspack 1.0、Safari Technology Preview 202、Material UI v6
JSer.info #705 - webpackとの互換性を持つようにRustで書かれたbundlerであるRspack 1.0がリリースされました。 Announcing Rspack 1.0 - Rspack 0.7からの破壊的な変更もいくつか含まれているため、マイグレーションガイドも公開されています。 Migrating from Rspack 0.x - Rspack Safari Technology Preview 202がリリースされました。 Release Notes for Safari Technology Preview 202 CSSのbackground-clip: border-area/ruby-align、shape() function/@pageでjis-b4とjis-b5のサポートなどが追加されています。 また、ECMAScript Proposal
JavaScript/TypeScriptからWebAssemblyやネイティブバイナリを生成するコンパイラ「Porffor」の開発が加速へ、開発者がフルタイムで取り組み
「Porffor」は、JavaScript/TypeScriptをWebAssemblyバイナリやネイティブバイナリへとコンパイルする実験的なツールであり、これまでにない2つの特徴を備えています。 1つ目はJavaScript/TypeScriptをコンパイルしてWebAssemblyバイナリやネイティブバイナリを生成しようとしている点です。 これまでもJavaScript/TypeScriptをWebAssemblyに変換するツールは存在していましたが、JavaScriptのコードとWebAssembly版のJavaScriptエンジンを1つにパッケージングするという手段で実現していました。 実行時には、パッケージ内部のJavaScriptコードをWebAssembly版JavaScriptエンジンで実行していたのです。そのため生成されたバイナリの大きさは比較的大きく、また実行速度はあく
顧客の要望から要件定義、システム生成まで自動化する「Babel」 OSSの「Zoltraak」がコア
AIと量子コンピューティングの研究開発を行なうKandaQuantumは、2024年8月31日、顧客の要望内容を元に自動的に要件定義を生成し、さらに自律的にシステムを構築する要件定義システム生成AI「Babel（バベル）」をリリースした。 Babelは一行の要望から要望一覧、要件定義まで一気通貫で記載する。「要件定義プログラミング」により、自然言語からコードへの直接変換を実現。顧客の要望やビジョンを入力するだけで、Babelが詳細な要件定義のYAMLファイルを自動生成する。その上で生成された要件定義に基づき、Babelが独自にシステムを設計、開発。技術的な詳細を指定することなく、望む機能やふるまいを記述するだけでシステムが構築される。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
意外と忘れていたJavaScriptの書き方 - Qiita
Calling LLMs from client-side JavaScript, converting PDFs to HTML + weeknotes