Renovat とは？ Renovate とは依存関係の更新を自動化できる複数のプラットフォームと言語に対応したツールのことです。 依存関係のバージョンに変更があると Renovate が自動でバージョンを更新した Pull Request を作ってくれる上に、Pull Request には Release note も説明欄に書いてあるのでバージョンの変更によって何が変わったのかが分かりやすいです Renovat はパッケージファイルを自動で見つけます。 モノリポの場合でも複数のパッケージファイルを自動で見つけ、Renovate で管理することができます。 Renovate を導入する まずは Renovate を導入しましょう。 Renovate は無料で使用することができます。 以下のページから Renovate をインストールしましょう この時どのリポジトリに Renovate を

Relayとは Relayとは、デザイナーとエンジニア間でのAndroid UIコンポーネントの円滑な共有を可能にするツールです。 2022年のAndroid Dev Summitにて発表され、GoogleとFigmaが共同で開発を進めています。 Relayを使用することで、Figmaで管理するComponentをJetpack Composeのコードへ変換して使用することができます。 具体的なワークフロー Relayの使い方について、具体的なワークフローと共に説明していきます。 1. UI Packageの作成 まずは、RelayのFigma pluginを用いて、UI Packageを作成します。 UI Packageとは、Figmaのレイアウト情報を表現するjsonや、画像などのリソースファイル群をパッケージ化したものです。 このUI Packageという抽象化された中間表現をもとに

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

Intro 10月3日にWebAssemblyを用いてWebブラウザにx86の仮想マシンを構成することで、PostgreSQLをWebブラウザ上で実行可能にした「Postgres WASM」がオープンソースで公開されました。 以前から気になっていたSupabaseが公開していたこと、最初にSnapletという企業がOSSで公開しておりそれをフォークして完成させたこと、色々気になることばかりでしたので自分なりに調べて深掘りしてみました。

We are thrilled to announce Rome v10, the first stable release since the start of the Rust rewrite. Rome is an ambitious project aiming to unify the dozens of frontend language tools into a single easy-to-use tool built from scratch. This release includes our fast linter and formatter; they require minimal configuration, come with beautiful and descriptive diagnostics, and have built-in support fo

はじめに 引き続き Rust + WebAssembly + SolidJS で遊んでいます。前回は、Rust 側で作成した文字列を JavaScript 側で console.log に出力することを考えましたが、今回は JavaScript 側から何らかのデータを Rust 側へ渡すことを考えたいと思います。今回も、wasm-bindgen[1] に頼らずにやっていきましょう。 メモリの確保と管理 WebAssembly のメモリ空間は、シンプルな Linear Memory（線形メモリ）になっています。Rust と JavaScript との間で、「プリミティブな数値型」より大きなデータをやりとりするためには、この Linear Memory 上にデータを配置するのが良さそうです[2]。 単一のメモリバッファの確保 メモリの確保は Rust 側で実施します。線形メモリ上には WebA

現在の会社にテックリード（１人目の正社員エンジニア）として入社して、２年間やってきたことを書いています。 エンジニア二年目でテックリードとして試行錯誤してきて、自分の振り返りもしたいという思いから記事を書きました。 （前提として、シード期のスタートアップで実行してきたことです。） 入社時のチーム課題 入社当時は、２週間単位のスプリントでスクラムを回してましたが、全員が業務委託だったこともあり、完全な内製化を進める必要があり、主な課題は以下でした。 継続的リリースが困難な状態になっており、それを解消することが急務 社内にエンジニアがいなかったので、開発組織体制づくりが必要だった。 ウォーターフォール寄りのリリースが多く、継続的にリリースする文化がなかった。 リファクタリングやテストコードが不十分だった。 改善したこと Zenhubを導入 それまでは、GitHub Projectで進捗管理をし

はじめに 自分は実務でReact×TypeScriptを利用したフロント周りとNode.js(Nest)やRailsを用いたバックエンド(API)の開発をしています。 本記事では、OpenAPIを用いたAPI設計の書き方及び、Swaggerの説明と使い方についてまとめていきます。 この記事の対象者 プログラミング初心者から中級者 APIの基礎を理解している人 OpenAPIを用いてサクッとモックサーバーを試したい人 この記事の目標 モックサーバーの環境構築を学ぶ Swaggerの使い方を理解する OpenAPIを用いてAPI設計の具体的な書き方を学ぶ この記事でやらないこと 本記事ではOpenAPIの「書き方」をメインで解説するため、API設計についての細かい解説は省きます。 なおAPI設計については下記の記事でまとめているので、ぜひ参考にしてみてください。 用語解説 OpenAPI 公式

AWS Dev Day 2022 Japanの登壇に用いた資料です https://aws.amazon.com/jp/events/devday/japan/?aws-dev-day-2022-japan-cards.sort-by=item.additionalFields.sortOrder&aws-dev-day-2022-japan-cards.sort-order=asc&awsf.aws-dev-day-2022-japan-filter-session-category2=*all&awsf.aws-dev-day-2022-japan-filter-track=track%23track-a&awsf.aws-dev-day-2022-japan-filter-dev-type=*all&awsf.aws-dev-day-2022-japan-filter-dev-sub

サービスの歴史が長い場合、既存のフロントエンドを一気にモダナイズ化することは現実的ではなく、一部の画面から徐々に移行していくアプローチが考えられます。 本セッションではMPA(Multi Page Application)で構築されたレガシーフロントエンドからNext.jsへの段階的な移行を可能にするためのAWSアーキテクチャについてご紹介します。

どうも、まさとらん（@0310lan）です！ 今回は、HTML要素を簡単にアニメーション化できるJavaScriptライブラリをご紹介します。 初期設定はJavaScriptで書きますが、実際のアニメーション作りに関してはタイムラインエディタを利用した直感的な操作で実現しているのが大きな特徴です。ちょっとしたインタラクションから3Dアニメーションまでカバーできるライブラリなので、ご興味ある方はぜひ参考にしてください！ 【 Theatre.js 】 ■「Theatre.js」の導入について！ それでは、「Theatre.js」をどのように使えばいいのか詳しく見ていきましょう！ 既存のWebサイトへ「Theatre.js」を導入する方法はいくつかあるのですが、今回はもっとも基本的な手段としてCDN経由でライブラリを読み込んでみます。これはHTMLファイルが1つあれば完結するので、ちょっと試して

ブラウザを更新してください ご使用のブラウザが古いかサポート対象外の可能性があります。Canvaで引き続き続行するには、次のいずれかの最新バージョンのブラウザに更新してください：

日本人向けの記事のため表記がカタカナとなっております。そのため完全に正確な英語の発音を保証しているわけではございませんのでご了承ください。（より正しい発音が気になる方は各自で発音記号をお調べください。） また私自身は帰国次女でもない純粋な日本人＆英語力凡人レベルです。明らかに間違っているものがありましたらコメントやTwitterなどでご指摘ください。 もちろん他にもこれが間違いやすいよ、という用語もあればお待ちしております🙏 ❓がついてるのは決めきれないorネイティブでも揺れがあるor議論が必要　なものです。 a11y エイイレブンワイ absolute　アブソルート Adobe　アドビ Airbnb　エアビーアンドビー ajax　エイジャックス align　アライン（text-align　テキストアライン　など） AMP（Accelerated Mobile Pages）　アンプ An

Building a tooltip component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build a color-adaptive and accessible tooltip custom element. In this post I want to share my thoughts on how to build a color-adaptive and accessible <tool-tip> custom element. Try the demo and view the source! A tooltip is shown working across a va

【2023年02月13日追記】 コンソールからCORSの設定が出来るようになったようです。 こちらの記事はコンソールから設定できない場合にAPIから設定する方法です。 はじめに 先月にGAとなったCloudflare R2を使って静的ファイルを配信する場合の設定や使用例などを記事に起こしていきます。 【前提条件】 Cloudflareのアカウント作成方法については触れませんのでご自身で調べて下さい Cloudflareのコンソール画面を紹介していますが、言語設定を英語にしているため、そのままの紹介です Next.jsを例にビルド済みのJavaScriptやCSSの配信例を記載します 静的ファイルは専用のサブドメインから配信するものとします まとめ ざっと記事として言いたいことから public domain accessが使えるようになっているので使用するのが吉 AWS S3やGCSと異な

1. プロダクトバックログ Deep Dive 2022/1/6 Regional Scrum Gathering Tokyo 2022 株式会社アトラクタ 吉羽 龍太郎 (@ryuzee) 2. 自己紹介 吉羽龍太郎 / YOSHIBA RYUTARO ▸ アジャイル開発、DevOps、クラウドコンピューティング、 インフラ構築自動化、、組織改革を中心にオンサイトでの コンサルティングとトレーニングを提供。著書訳書多数 2

It is like @CanIUse, but for the browser devtools, created by Pankaj Parashar and curated by community.

はじめに みなさんもすでにご存じかもしれませんが、これまで無料で使えていたHerokuが有料化されます。 このあたりの話は以前、以下のエントリにまとめました。 blog.jnito.com そのときすでに「低額のEco DynoとPostgres Miniというプランが提供されるらしい」という話を書いていました。 ちょうど今朝、そのEco DynoとPostgres Miniが利用可能になったというアナウンスがあったので、さっそく移行してみました。 blog.heroku.com 移行の方法は結構簡単です。 上記の公式ブログを読むとだいたいわかると思いますが、このブログでも手順を解説しておきます。 免責事項 このエントリの手順や情報に何か致命的な間違いがあっても筆者は責任を取りません。 Herokuの公式ブログ・公式ヘルプの内容が正だという前提で読んでください。 その前に：Eco Dyno