But as many of you have experienced, when you click in your console, that moves focus out of your webpage, and the popover goes away! In this case, I can’t even right-click the popover to click Inspect Element:
Today marks the release of iOS and iPadOS 16.4 beta 1, and with it comes support for Web Push and other features for Home Screen web apps. Today also brings the first beta of Safari 16.4. It’s a huge release, packed with over 135 features in WebKit — including RegExp lookbehind assertions, Import Maps, OffscreenCanvas, Media Queries Range Syntax, @property, font-size-adjust, Declarative Shadow DOM
はじめに🙇こんにちは、LAPRASに業務委託として参画しているWebエンジニアのしんです。 弊社の主要プロダクト(LAPRAS および LAPRAS SCOUT)ではVueを使用しているのですが、先日そのバージョンを2系最新である2.7へアップデートしました🎉 そこで本記事では、 Vue3ではなく2.7に上げた理由Vue + Webpack構成での詳細なアップグレード手順2.7に上げたことで得られたメリット などを詳しく解説していきたいと思います。 公式アップグレードガイドに書いていないハマりポイントもいくつかあったので、今後アップグレードを見据えている方はぜひ読んでみてください。 なぜ3ではなく2.7にアップデートしたのか🤔 現在のVueのデフォルトバージョンは3です。 そのためLAPRAS内でも「早く3に上げたいね」という話がたびたび上がっていました。 それでも「まずは2.7に上
みなさん satisfies operator は使ってますか? この記事では、satisfies が手に馴染んだけどまだ TS 4.9 に移行できていない環境で作業している人に向けた satisfies を代替するヘルパー関数を紹介します satisfies とはなにか satisfies operator は TS 4.9 で追加された演算子です 型注釈には 変数等の型を注釈した型に推論させる 注釈した型を満たすように制約を設ける の 2 つの効果があり、制約の効果のみ取り出したものが satisfies operator です いつ制約だけあると嬉しいかと言うと、制約よりも値(宣言)のほうが厳格なケースです type ILang = { lang: string } const valueAnnotation: ILang = { lang: "typescript", } as c
TypeScriptによる型のある世界は生のJavaScriptでも体験できます。JSDocを使えば良いのです。JSDocを使えば型が付与された、しかし正真正銘のJavaScriptコードが書けます。JSDocはJavaScript実行環境にとってはただのコメントなので当然ブラウザでそのまま動きます。tscによる変換の儀式は不要で、型チェックだけを行うことになります。 その型チェックもVSCodeを使っていればTypeScriptをインストールしなくても勝手にやってくれるので、小さなプロジェクトならこれで十分だと思います。VSCodeを使っている前提にはなりますが、その場合なんのセットアップや変換もなく型のあるJavaScriptを扱えます。 JSDocによる型付けは割と強力で一般的な場面ではほとんど不自由しません。しかし比較的よく使う型宣言なのに今まで唯一できないことがありました。それが
はじめに 目的は、Supabase の公式クイックスタートに記載されていることだけを TypeScript で実装することです。 Supabase とは何かを簡単に紹介します。 ソースは以下を参照ください。 Supabaseとは Supabase とは何かです。 Firebase の代替品とされているソリューションです。 主な機能としてデータベース、認証機能、ストレージ、エッジ機能があります。 Supabase を利用することで、Firebase のような機能を自分の環境に構築できます。 以下が公式サイトです。 英語ですが Supabase の紹介が 2 分半で簡潔にされています。 Supabaseの特徴 Supabase の特徴を 3 点あげます。 特徴1:データベースがPostgreSQL SQL の知識があれば、データベースの操作がすぐそうできるため、学習コストが低いです。 RDB
こんにちは。ソフトウェアエンジニアの坂井 (@manabusakai) です。 カミナシは Web ブラウザ向けに React、ネイティブアプリ向けに React Native を採用しています。 2023/02/10 時点で ts, tsx のファイルは 1,468 個ありました。 一定規模を超えたプロジェクトということもあり、Prettier や Organize imports が適用されているファイルとされていないファイルが混在していました(Organize imports は未使用の import を削除したり、既存の import をファイルパスでソートする機能のことで、TypeScript 2.8 から使えるようになりました)。 Pull request を作るときはコードフォーマッターの差分だけコミットを分けたり、少しの変更であれば他のコミットに混ぜてしまっているケースも見
Make sure that your import statements stay consistent no matter who writes them and what their preferences are. A plugin that makes Prettier organize your imports (i. e. sorts, combines and removes unused ones) using the organizeImports feature of the TypeScript language service API. This is the same as using the "Organize Imports" action in VS Code. Features 👌 Dependency-free (just peer-dependen
TypeScriptでDecoratorって使っていますか? DecoratorはJava等のオブジェクト指向言語ではお馴染みのアノテーションです。DI/AOP等のメタプログラミングでよく使われているものです。 Decorator自体はECMAScriptの仕様として、かなり昔(2014年)から存在していました。 現時点(v4.9)のTypeScriptでサポートしているDecoratorは、Stage 2(Draft)の仕様です。 仕様策定が難航していたDecoratorですが、一部を除いて2022-03にようやくStage 3(Candidate)へと昇格し、TypeScript v5.0(2023-03リリース予定)から正式サポートされる予定です。 Announcing TypeScript 5.0 Beta Decoratorは、AngularやNestJS、TypeORM等のライ
概要 StackBlitzのサービスを支えるWebContainerという素晴らしい技術のAPIが公開されたので、実際に気になっている方に向けて、体験した所感を紹介しようと思います。一見サーバサイドのNode.jsでやっているように見えることが、実際にはブラウザ内部で動いているので、めちゃくちゃすごいです。 対象読者 StackBlitzにお世話になっていて、その裏側の仕組に興味がある方 ブラウザ内で、Node.jsを動かしたいなぁと思っている方 WebContainerに興味がある方 はじめに フロントエンド界隈では、有名なplayground環境と思われるStackBlitz(このZennの挿入もできるサービスなので、見たことある方も多いかもしれません)が提供している、サービスを支える重要な技術である、WebContainer(Webブラウザ上で実現されるWebAssemblyベースの
皆さんこんにちは。筆者は先日、TypeScript向けライブラリのts-array-lengthを公開しました。 この記事ではこのライブラリを宣伝するとともに、ライブラリの実装がどのようになっているのか解説します。 ts-array-lengthの機能 ts-array-lengthは3つの関数を提供しており、これらを使うことでなんと配列の要素数をチェックできます。 例えばhasLengthを使うと、配列の要素がちょうど2個かどうか調べることができます。 if (hasLength(arr, 2)) { // arrは2要素の配列! const [first, last] = arr; }
[{ "teamName": "チームA", "players": ["Aさん", "Bさん", "Cさん", "Dさん"] }] スプレッドシートの内容を Node.js で取得 スプレッドシートの内容を Node.js で取得するために @googleapis/sheets を使用しました。 認証情報は Application Default Credentials (以下 ADC) が設定されていることを前提にしました。事前に認証情報に紐付いているメールアドレスに対して、スプレッドシートを閲覧できる権限を与えておく必要があります。 これにより以下のコードでスプレッドシートの内容を取得することができます。 const sheetId = ""; const auth = new GoogleAuth({ scopes: [ "https://www.googleapis.com/aut
What is Deno? Deno は、V8 JavaScriptエンジン及びRustプログラミング言語に基づいた、JavaScript及びTypeScriptのランタイム環境 Node.jsの作者によって作られているとのこと。 Node.jsの反省点を活かして改善を入れているらしいです。 また、単一実行ファイルとしてビルドできるため、Denoの環境が無くても実行ができるのが特徴。 個人的には最初からTypeScriptをサポートしている点がNode.jsより強いと思いました。 Installation macOS/Linuxを基準として記載します。 curl -fsSL https://deno.land/x/install/install.sh | sh # 以下を自身のシェルの設定に入れる ex.) .zshrc or .bashrc export DENO_INSTALL="$H
はじめに こんにちは。Sugawara Yuutaです。今回は高校の休み時間に考え、空いた時間で作ったJSONデコーダーについて紹介したいと思います。 知ってる限りでは、汎用型受け入れ型をとっているデコーダー(つまり、標準パッケージと同じスタイルという意味です)の中では最速です。 モチベーション Go言語で開発を始めて、(Go言語のコミュニティーのスタイルがJavaScriptなどと比べるとなんでも標準ライブラリでやってしまうようなのにも関わらず)サードパーティー製のJSONデコーダーが多く作られていることに驚きました。 しかし、大規模なものから小規模なものまで試してみて、それぞれが必ずしも共通しているとは限らない、たくさんの問題を持っていることに気づきました。それについては下のセクションで詳しく取り上げます。 今までのJSONデコーダーが持つ問題 具体的なライブラリの名前は出さないでおき
Manter is a project aimed at enhancing the terminal experience by offering features such as autocomplete suggestions, current branch display, reusable scripts, and more. The terminal is built with Svelte for front-end flexibility and Rust for back-end performance. The core framework is based on Tauri. Currently, Manter supports limited command suggestions (cd, ls). To expand this library, add comm
structuredCloneは、JavaScriptにおいてオブジェクトのディープコピーができる便利な関数です。 従来ディープコピーの標準化された方法が無かったため、structuredCloneの登場はJavaScriptのユーザーにとって画期的なものです。あまりに画期的であり、その便利さも分かりやすいため、出たばかりの時期はTwitterでのJavaScript豆知識ツイートの常連でした。 現在はstructuredCloneのもの珍しさは無くなり、単純に便利なAPIとして受け入れられていますが、そのせいかstructuredCloneに対する理解も単純な人が出てきているようです。 そこで、この記事ではstructuredCloneがどのようなものなのか、どうしてそのようになっているのかについて、じっくりと説明します。 structuredCloneの歴史 筆者は自称世界一技術の歴史
何のプラグインを使うか聞かれるので、スペースで選択します。 対応する設定が書かれた dprint.json が作成されます。 TypeScriptの例 下記プレイグラウンドから設定をコピーして、dprint.json に貼り付けます。 { "typescript": { "lineWidth": 80, "indentWidth": 4, "useTabs": true, "semiColons": "prefer", "quoteStyle": "alwaysDouble", "quoteProps": "preserve", "newLineKind": "lf", "useBraces": "whenNotSingleLine", "bracePosition": "sameLineUnlessHanging", "singleBodyPosition": "maintain", "
こんにちはーむちょこです。 ずっと利用していたお名前.com をやめて、 Cloudflare Registrar にドメインを移管してみました。 背景に興味がない方は、目次から「移管手順」のセクションに飛んでください。 お名前.com をやめる理由 初めてドメインを取ったのがお名前.com でした。 たぶんその頃は日本語サイトでドメインを取ろうと思ったら真っ先に思い浮かぶのがお名前.com だったような気がします。 それからずーっとお名前.com を使い続けていましたが、その間サービスはいろいろと施策を打つわけです。メールたくさん送ってみたりね。 そうして蓄積されたちょっと嫌なイメージと、値上がりのお知らせと、他のサービスも使ってみたいという好奇心に駆られて今回やめてみることにしました。 Cloudflare Registrar を選んだ理由 とりあえず、エンジニアがたくさんいる com
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く