サービスの持続的な成長と技術負債について
Nuxt Scriptsって何ができるの？ Nuxt4メインセッションに添えて@Vue.js v-tokyo Meetup #21
Nuxt Scriptsって何ができるの？ Nuxt4メインセッションに添えて@Vue.js v-tokyo Meetup #21
世界中のWindowsがぶっ壊れた問題、「ぬるぽ」が原因だったらしい→ネット始まって以来最大のcrowdstrike「ぬるぽ」Windows 「ガッ」
井上🦙ラー @zenrah_moog 写真は本人です🦙㈱アルパカコネクト代表取締役兼医師兼免疫研究者兼webエンジニア(FE/BE/アーキテクト)兼コンポーザー兼ライター兼シナリオディレクター【FF14】占星【呟き】育児、サービス、web開発(Vue/SpringBoot/AWS/cloudflare)【他】ポジティ部 alpaca-connect.com 井上🦙ラー @zenrah_moog crowdstrike、C++のぬるぽが原因だったらしく、インターネット始まって以来最大の crowdstrike「ぬるぽ」 Windows 「ガッ」 をリアルタイムで見れたということ
【2024年夏】ブラウザ拡張機能開発を加速するフレームワーク・ツール3選をコードベース付きで紹介！
本記事では、ブラウザ拡張機能開発を加速させる、個人的に注目な3つの拡張機能開発フレームワーク・ツール（WXT、Plasmo、Extension.js）を紹介します。 サンプル拡張機能の実装を通して、それぞれの特徴、セットアップ方法、実際の開発フローを見ていきます。お好みの拡張機能開発ツールが見つかれば嬉しいです。 各フレームワーク・ツールの紹介 WXT WXTは、Viteベースのブラウザ拡張フレームワークです。次のような特徴を持っています（トップページから抜粋）。 クロスブラウザ対応 Chrome、Firefox、Edge、Safari、その他Chromiumベースのブラウザ Manifest V2、V3の両方に対応 開発モードでのHMRと、開発用ブラウザの自動起動 内部的にChrome Launcher等を使用 ファイルベースのエントリーポイントでマニフェストを自動生成 Nuxt風の自動
開発者にとっていかに早くWeb制作を進められるかは、永遠のテーマと言えます。 この記事ではWebサイト制作を効率化、爆速にするTailwind CSSのUIコンポーネント集、便利ツールをまとめてご紹介します。 表現したいレイアウトをコピペのみで実現でき、これまでかかっていたサイト制作時間を劇的に削減します。 おしゃれなWebサイトを素早く開発できるUIコンポーネント素材、あなたはいくつ知っていますか。 Tailwind CSSの便利UIコンポーネントまとめTailwind UIMagic UIDyna UIAnimataPrelineMamba UIFlowbiteDaisy UISailboat UIMeraki UITail-KitReact AriaWicked BlocksTailwind Starter KitWindstaticMyna UITailwind StampHype
フロントエンドエンジニアとは、WebサイトやWebアプリケーションの見た目や動作など、ユーザーが直接目にする部分を開発する職種です。 今後のキャリアプランを考えるうえで、フロントエンドエンジニアの平均年収を知りたいと思っている方もいるのではないでしょうか。 そこで本記事では、レバテックフリーランスが保有する案件から、フロントエンドエンジニアの平均年収を算出しました。すでにフロントエンドエンジニアとして働いている方はもちろん、今後フロントエンドエンジニアとして働きたいと考えている方も、ぜひ参考にしてください。 【調査概要】 調査対象：「レバテックフリーランス」の利用者が参画した案件データから、稼働日数が5日のものに絞り、月額案件単価と参画者の年齢、案件に紐づくフレームワーク・ライブラリを算出しました。 対象期間：2023年6月～2024年6月 対象案件数：358件 対象職種：フロントエンドエ
こんにちは。 めろたんです。 最近は咳としゃっくりが同時に出るようになってしまってとてもしんどいです。 はい。 今回は、弊社のサービスである、リーナー見積のフロントエンドをVueからReactに乗り換えた話について書いていこうと思います。 まず前提 リーナー見積では、フロントエンドは３つのサービスに分かれており 買い手向け画面 売り手向け画面 リーナー運営向け画面 という構成になっております。 サービスの構成図 各々Nuxt.jsで作られており、その全てでSEOや初期ページローディングのパフォーマンスをすごく求められるものではないため、CSRで行うように構成していました。 また作り始めた当時、会社やプロダクトがアーリーフェイズであり、そもそもプロダクトがこれで行けるかどうかというのもあったため、何を使って作るかというのは深く考えず、後に作り直すだろうというのを前提でNuxt.jsを選定して
Vue.js v-tokyo Meetup #21 のLT資料です。 https://vuejs-meetup.connpass.com/event/321431/
複数の開発チームの機能開発を止めずに Nuxt3 へアップデートしました - ANDPAD Tech Blog
はじめに 背景 1. 大きなリリースによるアップデートに失敗した 2. 機能開発を止めずにお客様へ価値提供したかった 課題 リリース管理の複雑さ 取り組んだこと 1. 変更予定の内容と実施時期を透明化する 2. アップデート作業による変更量を小さく頻繁にリリースする 2.1. Nuxt Bridge を利用してアップデートする 2.2. 互換レイヤーを作成してアップデートする 2.3 codemod script を作ってアップデートする おわりに はじめに SWE の sunecosuri です。 アンドパッドでは多くのプロダクトで Nuxt を使用しており、 使用していたバージョンの Nuxt2 が EOL を迎えたため、 Nuxt3 へアップデートしました。 この記事では、複数のプロダクトチームが開発する環境でどのように 機能開発を止めずに Nuxt のメジャーアップデート に取り組
静的サイトジェネレータのAstro、「Server Islands」を実験的実装。サーバで動的生成したコンポーネントをWebページ表示後に組み込み
静的サイトジェネレータのAstro、「Server Islands」を実験的実装。サーバで動的生成したコンポーネントをWebページ表示後に組み込み オープンソースで開発されている静的サイトジェネレータ「Astro」は、新機能の「Server Islands」を実験的実装した新バージョン「Astro 4.12」をリリースしました。 Full details on the blog:https://t.co/jd8GfFwbjB — Astro (@astrodotbuild) July 18, 2024 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。 ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全くJavaScriptが含まれないか、もしくはWe
「日頃の作業をどうにか楽にしたい、できることならだれかやってほしい」と思ってしまうほど自分にあまい筆者が、制作時間の短縮や効率化アップにつかえる新ツールやデザイン素材をまとめました。 すべて手作業だと時間のかかるCSSスタイリングや、スキルも必要な手描きイラストを用意したり、「このツール、早く知りたかった」と思った素材やツールが揃っています。 日頃のワークフローに活用して、デザイン制作の新ルールを一緒に見つけてみませんか。 コンテンツ目次Web便利ツールデザインツールFigma・アイコンツールユニーク・面白ツール Web便利ツール The good colors – Full spectrum – OKLCH 注目の色「OKLCH色空間」によるカラーパレット作成ができるツール。一般的なLCHとOKLCH色の比較の通り、より「いい感じの色合い」で、明度と彩度のトーンがあった美しい配色を生成し
次世代Web BandlerのFarmが熱そう
はじめに 昨今、ビルドツールは様々なものが開発され、いかに高速化するか、開発者体験を上げられるかが注目されているように思います。2024年6月にState of JSが公開され、その中でBuild Toolsはwebpackが最も使用されており、次いでViteがランキングしています。 Viteの伸びがすごいですね...🔥 ビルドツールも様々ありますが、2024年4月にFarmというWeb Bandlerのv1.0がリリースされました。 気になってドキュメントサイトを覗いてみるとなんだか良さげな雰囲気を感じたので、Farmの特長と推せるポイントをまとめてみようと思います。 やること、やらないこと やること Farmの紹介 Farmの特長とおすすめポイントの紹介 やらないこと Farmの導入方法や詳細について （ドキュメントがわかりやすい） Farmとは？ Farmは、webpackやVit
WebホスティングのNetlifyがAstroと提携、静的サイトジェネレータAstroのオフィシャルなデプロイメントパートナーに
WebホスティングのNetlifyがAstroと提携、静的サイトジェネレータAstroのオフィシャルなデプロイメントパートナーに Webホスティングサービスを提供するNetlifyと静的サイトジェネレータ「Astro」開発チームの両者は提携を発表し、NetlifyがAstroのオフィシャルデプロイパートナーとなったことを発表しました。 @Netlify increases its open-source sponsorship of Astro to become our new, official deployment partner! This collab will help bring Server Islands - the ability to define sections of personalized, dynamic content on static pages -
Django 開発の最新トレンドを知りたいですか？ PyCharm は Django Foundation と連携して世界中 4,000 人以上の Django 開発者を調査し、その回答を基にフレームワークの使用に関するトレンドを解析しました。 このブログ記事では、次のような主な結果をご紹介します。 Django 開発者の 3 人に 1 人が Flask または FastAPI も使用している。 ほとんどの開発者がフルスタック開発と API 開発の両方に Django を使用している。 Django 開発者の 61% が非同期テクノロジーを使用している。 その他にも多くのインサイトがあります！ これらの結果を詳しく確認し、インフォグラフィックによる図説も利用しながら Django 開発のその他のトレンドを発見しましょう。 バックエンド: Django 開発者 3 人に 1 人が Flask
Google、Androidの開発環境をWeb IDEで実現。「Android Studio on IDX」早期プレビュー
Google、Androidの開発環境をWeb IDEで実現。「Android Studio on IDX」早期プレビュー Googleは、Androidネイティブアプリケーションの開発環境であるAndroid Studioを、Web IDEとして現在ベータ公開中の「Project IDX」上で実現する「Android Stdio on IDX」の早期プレビューを発表しました。 これによりローカルマシンに開発環境をインストールすることなく、WebブラウザでAndroidのネイティブアプリケーション開発が可能となります。 Project IDXは、Googleが開発中のWebブラウザから利用可能な統合開発環境です。Webやモバイル、デスクトップなどのマルチプラットフォームに対応したフルスタックのWebアプリケーションを、さまざまなフレームワークや生成的AIの支援などを活用して効率的な開発を実
はじめに こんにちは、がんがんです。 2024 年 6 月に Nuxt v3.12 がリリースされました。 Nuxt v3.12 の目玉としては Nuxt4 のリリース準備が進んでいること、現環境で Nuxt4 のマイグレーション実験を行えること が挙がられると思います。 Nuxt4 へのマイグレーション実験はこちらの記事で実験されています。合わせてご覧ください。 そんな v3.12 のリリースノートの中に今まで見たことなかったモジュール名が記載されていました (以下ブログ記事の引用) 📜 Nuxt Scripts auto-install We've been gradually working to release Nuxt Scripts. It's currently in public preview, but we're near a public release, so w
以前（まだ Nuxt 3 がベータリリースだった頃）に『Nuxt 3 の useFetch() と useAsyncData() の使い方』という記事を書きました。 その後、より多機能になり、またベストプラクティス的な使い方が分かってきたこともあり、改めて useFetch() についてまとめてみたいと思います。 はじめに ここ数年、一貫して Nuxt 3 を使用している僕ですが、主要なコンポーザブルである useFetch については当初の理解が違っていたものもありました。 少しずつ修正しながら、都度コードを書き換えてきたのですが、その過程で得られた知見を共有したいと思います。 なお、記事内で Nuxt と書いた場合は Nuxt 3 および Nuxt 4 を指します。 （現時点では Nuxt 4 はリリースされていませんが、発表されている内容から Nuxt 3 との違いを考慮しつつ記述し
はじめに この記事はTypeScript初心者に向けて基本を一通りハンズオン形式で学べる教材となっています。 世の中にTypeScriptの教材は多くありますが、どれも文法ごとに文法紹介するためのコードを教えているだけで、学んだあと実際どのように自分のアプリに適応すべきなのかイメージがわきません。 これがTypeScriptの難しいところだと思っています。 このハンズオンではJavaScriptのアプリケーションをTypeScriptに移行しながら学んだことを活かしていくことで実践的に学ぶことが可能です。 ハンズオン動画と一緒に活用 こちらの記事をさらに活用できるハンズオン動画を用意していますのでご活用ください JavaScriptの怖い振る舞い JavaScriptはタイプセーフ機能が存在しません。 タイプセーフとは、コンパイラやランタイムがデータ型をチェックし、型が互換性のない操作に使
せっかくなのでフロントもバックも TypeScript を使おう、ということで、アレコレ考えて作った構成を共有します。何かの参考になれば幸いです。 下記の Web サービスを開発するときに使いました。 システム構成 ランタイム：Bun フレームワーク： Express ORM：Drizzle ORM インフラ：Docker 私的にはバックエンド中心で処理・出力し、そのうえでフロントエンドを使うのが好きです。 ディレクトリ・ファイル構成の例 あまり深くディレクトリを掘りたくなかったので、ルートに散在しています。 ├── assets ：ビルドされたフロントエンドのファイルが入る ├── constants ：定数関係 │ └── index.ts ├── controllers ；コントローラー │ ├── _Controller.ts：ルート(/)のコントローラー │ └──
エンジニアからアーキテクトを目指す方や、アーキテクトとして仕事を始めたばかりの方は、アーキテクトの仕事やアーキテクチャ設計のトレンド、さらにどんなスキルが必要なのかをまず理解しておくことが大切です。今回は長年アーキテクトとして活躍されている米久保剛さんの著書『アーキテクトの教科書』（翔泳社）から、アーキテクトの定義や職務、アーキテクチャ設計のトレンド推移、そして米久保さんが考えるアーキテクトとして備えておくべき能力と考え方について解説します。 本記事は『アーキテクトの教科書 価値を生むソフトウェアのアーキテクチャ構築』の「第1章 アーキテクトの仕事」から一部を抜粋したものです。掲載にあたって編集しています。 アーキテクトの定義 複雑な構造物であるソフトウェアにおいて非常に重要なアーキテクチャを適切に設計するには、ソフトウェア開発業務に関わる幅広い知識や経験が必要とされます。そのため、アーキ
はじめに Vue3系をReactでBridgeする必要はあるのか？と思った、そこのあなた。大正解です。 筆者自身もニーズが不確かなまま執筆しています。ぜひ、箸休め程度に見て頂けると嬉しいです。 イメージ GifのようにReact(Next.js)上で、Vue3系のFormComponentを呼び出しています。 リポジトリ Vue Next.js React(Next.js)でVueComponentをBridgeする Vue componentの定義 先ほどのGifにあったFormComponentは以下のように定義しています。 特筆するようなことはありませんが、検証の為に分かりやすく姓・名に対応する更新用のcallbackを渡しています。 詳細は割愛させて頂きますが、onamae-formという名前でnpm packageとしてライブラリ化を行います。 <script setup lan
去年はこれです。ちらほらスターがもらえていたりするので、今年も更新するかという気になった。 blog.3qe.us 以下の項目について技術スタックを考えていく。太字は今年になって追加したもの。 言語 エディタ ビルドツール スクリプティング ロギング テスト 依存性注入(DI) アーキテクチャ Webフレームワーク/サーバ GraphQL フロントエンド RPC テンプレートエンジン JSONまわり RDBMSまわり キューイング Auth 便利なツール/ライブラリ ローカル開発テク デプロイとか 言語 エディタ ビルドツール スクリプティング ロギング テスト アーキテクチャ / 依存性注入(DI) Webフレームワーク/サーバ GraphQL フロントエンド RPC テンプレートエンジン JSONまわり RDBMSまわり キューイング Auth 便利なツール/ライブラリ コンフィグ コ
Claude 3.5のSonnetは、これまでのClaude3の上位モデルであるOpusよりも高い性能を持ち、 AIの性能を評価する複数のベンチマークにおいてChat GPT-4oを超えています。 Claude 3.5 Sonnetのベンチマーク結果 GPQAやMMLUなどは、AIの性能評価を行うために用いているベンチマークです。 Graduate level reasoning（大学院レベルの推論） GPQA（Graduate Level Expert Reasoning）： 大学院レベルの専門的な知識と論理的思考を必要とする質問で評価するベンチマーク Undergraduate level knowledge（学部レベルの知識） MMLU(Massive Multi-task Language Understanding)： 大規模マルチタスク言語理解(Massive Multi-ta
sponsored by Qmonus Value Stream アプリケーション開発に注力するための工夫をシェアしよう！ 導入 何について話すのか 開発環境を改善して、効率化することでアプリケーション開発に注力するため行った（行っている）取り組みについてお話します。 本記事はQmonus Value Streamの投稿キャンペーン記事です。 想定読者 レガシーな環境を改善している（していきたい）人 開発環境改善のアイデアが欲しい人 CI/CDやDevOpsよりな仕事に関わる人 どんな人が書いているか(自己紹介) 3年目のエンジニアでバックエンドを中心に担当（最近インフラも担当するようになりました） メインで扱う技術はPHP・TypeScript・AWS アプリケーション開発とAWSインフラ構築を担当する 受託開発が中心の企業に従事 記事で触れる取り組み（取り組んだ順） Dockerの導入
ミサイルか仕掛け爆弾か ハマス指導者ハニヤ氏殺害方法の謎
【カイロ＝佐藤貴生】イスラム原理主義組織ハマスの最高指導者ハニヤ氏はイラン訪問中の７月３１日に殺害された。ミサイルのほか仕掛け爆弾が使われたとの説もあり、その方法は判然としていない。 ロイター通信はハニヤ氏が殺害された３１日、首都テヘランの滞在先に午前２時ごろ「飛翔（ひしょう）体」が撃ち込まれ、死亡したと伝えた。イランメディアの多くも「ロケット弾かミサイル」が使われたと報じているもようだ。 一方、１日付の米紙ニューヨーク・タイムズ（電子版）は米国やイランなどの当局者７人の証言を基に、殺害に使われたのは仕掛け爆弾で、ハニヤ氏の宿泊施設には約２カ月前に搬入されて隠されていたと報じた。 テヘラン北部の宿泊施設は革命防衛隊が管理しており、厳重な警備の中、ハニヤ氏が居室にいることを確認した上で遠隔で起爆された。ハニヤ氏は即死したが隣室に大した損傷はなく、「標的を狙った正確な計画」だった。 イスラエル
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript – Frontend Masters Boost
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript July 29, 2024 I’ll discuss best practices to avoid excess memory usage when managing updating the DOM to make your apps blazingly fast™️. DOM: Document Object Model – A Brief OverviewWhen you render HTML, the live view of those rendered elements in the browser is called the DOM. This is what you’ll see in your developer
Vue3のdefineModelで、オブジェクト値を双方向バインディングした時に起きた型エラーを解消する（TypeScript）
<script setup lang='ts'> const modelValue = ref({ name: '', email: '', }) </script> <template> <ChildComponant v-model="modelValue" /> </template>
Valibot: 超軽量＆型安全なスキーマバリデーションライブラリ | 豆蔵デベロッパーサイト
JavaScript、とりわけTypeScriptプロジェクトでデータのバリデーションを行う際、ZodやYup等のライブラリがよく使われています。 今回は、最近これらの代替として注目を集めているValibotというライブラリを紹介します。 Valibotとは？ # Valibotは構造化データを検証するためのスキーマライブラリです。 公式ドキュメントではその特徴を以下のように説明しています。 Fully type safe with static type inference Small bundle size starting at less than 600 bytes Validate everything from strings to complex objects Open source and fully tested with 100 % coverage Many tra
レファレンスを調べてみる デザインシステムを公開しているにはレベル差がある デザインシステムとはソフトウェア開発において一貫性のあるデザインを提供するための仕組みです。 本来は企業や団体内において実装のブレをなくすためのツールですが、業界内でのプレゼンスを得るなどの目的で社外に公開されていることがあります。 自社でデザインシステムを導入するにあたり "デザインシステムを公開しています"という企業の事例を調べたところ、公開しているにも種類があり、Webサイトを公開している、Figmaのファイルを公開している、プログラムのコードを公開しているなどレベル差があることに気づきました。 デザインの指針やFigmaファイルの公開も有用ではあるものの、ソフトウェアエンジニア視点だと実装が公開されているのが取っ掛かりとして良さそうに思いました。 実装が公開されているという切り口でのデザインシステムの一覧を
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回はWebページで3Dモデルを簡単にレンダリング（＋AR表示）できる、model-viewerについて解説します。 3Dってめんどくさい Web開発を行っていると、3Dモデルを表示したくなるケースがたびたび発生します。 たとえば、何かの商品のWebサイトであればその商品の3Dモデルだったり、ゲームが遊べるWebサイトであればキャラクターやアイテムの3Dモデルだったりと、何かと3Dモデルをレンダリングする機会はあると思います。 通常3Dモデルを表示するには、画像や動画とは違って、モデルそのものだけでなくそれを照らす光源や、それを映すカメラの配置・設定も必要になります。他にも、モデルが鏡面を持っているなら、周囲に映り込む景色も環境マップ等で用意しないと、それが鏡面で
Vitest 2.0 is here! This release page lists all changes made to the project during the beta. For the migration guide, please refer to the documentation. 🚨 Breaking Changes Simplify mock function generic types and align with jest - by @hi-ogawa in #4784 (a0c1d37) Remove --segfault-retry - by @sheremet-va in #5514 (ed60e) This flag was introduced to combat threads segfaults. Our current recommendat
パリ五輪開会式で、レオナルド・ダ・ヴィンチの名画「最後の晩餐」を想起させるパフォーマンスがあったことを巡り、写真を手にしたプラカードを持ちながら抗議する男性（AP） ２６日に行われたパリ五輪の開会式で、イエス・キリストと使徒たちとの最後の食事の場面を描いたレオナルド・ダ・ヴィンチの名画「最後の晩餐（ばんさん）」を連想させるパフォーマンスがあったことを巡り、キリスト教団体などから反発の声が上がっている。フランスのカトリック教会は「キリスト教に対する愚弄の場面を含んでいる」として遺憾の意を表明。開会式を巡っては、フランス革命で処刑された王妃マリー・アントワネットをモチーフにしたパフォーマンスに対しても批判が相次いでおり、〝余波〟が広がっている。 開会式での「祝祭」というセクションの中で、派手な女装のドラッグクイーンや、トランスジェンダーのモデルらが一堂に並び、「最後の晩餐」を彷彿（ほうふつ）さ
Panic! at the Job Market “I have the two qualities you require to see absolute truth: I am brilliant and unloved.” ready for another too-long article about personal failure while blaming the world for our faults? let’s see where we end up with 7,000 9,000 10,000 11,500 words this time1. this post is sponsored by me. funding appreciated: https://github.com/sponsors/mattsta TOC: Job Openings vs. Int
Today we’re kicking off an exciting launch week together with Astro by announcing our new partnership. Monday: Astro's Official Deployment Partner Announcement Tuesday: Announcing Durable Caching Wednesday: Why Netlify selected Astro for its developer hub and marketing site Thursday: How Astro’s server islands deliver progressive rendering for your sites Friday: Introducing the Netlify Frameworks
概要 複数のフロントエンド × 単一のバックエンドを持つSPA (Single Page Application)のメンテナンスモードを実装しました。 インフラとしてはAWSを使っています。 今回は諸々の事情でWAFにてメンテナンスレスポンスを返すのではなく、一段踏み込んだCloudFont Functions（以降CF2）でのメンテナンスレスポンス返却を行っています。 全体図 要件 複数のフロントエンドドメインがあるがそれら全てにおいて、メンテナンスモード中はユーザーにメンテナンス画面を表示したい 特定のIPからはメンテナンス中でも通常通り触れるようにしたい フロント実装手順 各々フロントエンドにてメンテナンスページとrouterを準備 ここらへんは好きなように準備 <template> <div class="maintenance__page"> <div class="mainte
Nuxt Scriptsって何ができるの？ Nuxt4メインセッションに添えて@Vue.js v-tokyo Meetup #21
2024.07.26 Vue.js v-tokyo Meetup #21 登壇資料 -
ESLint設定ファイルのFlat Config移行方法 #GMO - GMO MAKESHOP engineer blog
GMOメイクショップ コアグループ エンジニアの森です。 我々のプロジェクトではメンバー間でのコードの一貫性を保つためにESLintを導入しています。 このESLintですがバージョンアップに伴い、設定ファイルの記法をFlat Configという形式にする必要が出てきました。今回はこの移行手順について書いていきます。 ESLint・Flat Configについて 移行手順 1.plugins 2.extends パッケージがFlat Configに対応していない場合 3.env・parser vue/setup-compiler-macros 4.rules 5.overrides 6.ファイル全体 まとめ 参考記事 ESLint・Flat Configについて ESLintとはJavaScriptやTypeScriptなどのコードの静的解析ツールです。コードスタイル等のルールを作成し、従
Ruby on Browser - tmtms のメモ
NSEG 2024/06 フリープレゼン大会 - connpass で発表したやつをブログにも書いておく。 speakerdeck.com ruby.wasm で作ったやつ 文字化けを復元するよ シャッフル MySQL Parameters Rabbit on Firefox ruby.wasm の使い方 基本的な使い方 JavaScript の機能を使う DOM 操作 require まとめ ruby.wasm で作ったやつ 文字化けを復元するよ https://tmtms.net/mojibake/ 文字化けを復元したり、文字列を文字化けさせたりできる。 自分が ruby.wasm で最初に作ったページ。 前からこういうのを作りたかったんだけど、そのためにサーバーを用意するのもアレだなーと思って、静的ページにしたかったんだけど、JavaScript で実装するのはムリだと思ったので諦め
誰？僕は主にフロントエンドを中心としたウェブエンジニアです。1983年生まれの40歳で、大学卒業後は制作会社勤務・フリーランス・会社役員など働き方は色々ですが基本的には飽きずにずっとこの仕事をしています。 30歳になった時はそこまで年齢を意識しなかったのですが、40歳となるといくら平均寿命が延びている現代でも"折り返し"みたいな事をうっすら考えるようになったり、業界や仕事の変化も相まってそこそこ適当に生きてきた自分でも今くらいのタイミングで色々思う所を一旦記録しておいても良いかなと思いこれを書く事にしました(ネガティブな意味合いはありません)。 これまで美大に在学中、今で言うクリエイティブコーディングのような事を始めとしてプログラミングやセンサー・デバイスなどを用いた表現で制作を行っていた流れでウェブ制作会社に就職しました。 冒頭の年齢を見て分かる人は分かると思いますが当時(2007年ごろ
はじめに 普段 Nuxt を利用しているときにnuxiというワードを目にすることがあると思います。 例えば などです。 しかし、Nuxtテンプレートで生成したpackage.jsonのnpm scripts を眺めてみるとnuxt devと書かれていることが多いです。 nuxi devとnuxt devはどう違うのでしょうか。その謎を解くために Nuxt CLI のリポジトリを覗いて見ましょう。 答え nuxtはnuxiのエイリアスです。nuxiは Nuxt CLI から命名されている名前です。 公式からの案内は... 公式ドキュメントや Nuxt CLI のリポジトリを眺めてみましたがどこにも明記はなかったです。 さらに色々掘ってみると Reddit でSebastien Chopin氏が回答しているものを見つけました。 回答を引用してみます。 They are exactly the
自分で実装したくないので、Cursor（AI搭載エディタ）にReact開発全部してもらった結果 - Qiita
はじめに Cursorのインストールまではこちらの方の記事を参考にしました https://qiita.com/railgun-0402/items/717f44df9d68d77309f1 vueで触った時の記事はこちら https://qiita.com/Jasmine_teeeeee/items/b443c90f37a10276ff53 Reactのインストール～起動まではこちらの方の記事を参考にしました https://qiita.com/y_kato_eng/items/68e6c971358ddffbc5ff 使用しているAIモデルは、Claude 3.5 Sonnetです。 ゴール Amazonのセール画面のデザイン再現 実務で、デザイン部隊が持ってきた画面デザインを実装するときに、 Cursorを使えば爆速だと思ったので、手順を残しておきます。 デザインはキャプチャでも大丈
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コピペで時短、Tailwind CSSおすすめUIコンポーネント、UIキット集、便利ツール【まとめ】
【調査結果】フロントエンドエンジニアの平均年収！最も稼げるのは40代？
リーナー、Nuxt.jsからNext.jsに乗り換えたってよ - リーナー開発者ブログ
VueUse: 5分で分かる Vue.js 開発の効率化術
使うだけで時短になるWeb、デザイン制作の新ツール・フリー素材50選
2024 年 Django の現状 | The PyCharm Blog
Nuxt Scripts でサードパーティスクリプトをより身近に
Nuxt 3・Nuxt 4 の useFetch() を完全に理解する（したい）
【完全版】これ1本でTypeScriptの基本をマスターできる！ - Qiita
Web サービスをフロントもバックも TypeScript で作る時の構成例
アーキテクトを目指すなら知っておきたいアーキテクチャ設計のトレンド変遷、そして必要な能力と考え方
Vue3系をReactにBridgeしたいと思ったそこのあなたへ
ScalaでWebアプリを爆速開発するための技術スタック 2024 - Lambdaカクテル
Claude 3.5の最新機能Artifacts：使い方と実際の活用例を紹介
開発環境を改善するためにチームに提案して実践したこと - Qiita
実装が公開されているデザインシステム一覧
<model-viewer>を使って3Dモデルをノーコードで表示 | gihyo.jp
Release v2.0.0 · vitest-dev/vitest
パリ五輪開会式の余波収束せず 「最後の晩餐」連想の演出にキリスト教団体「愚弄」と反発
Panic! at the Tech Job Market
Netlify announces partnership with Astro | Blog
SPAのメンテナンスページをCloudFront Functionsを使って実現する - Qiita
40歳・フロントエンドエンジニア、これまでとこれから｜kojimajunya
【Nuxt】 nuxi dev とnuxt dev ってどう違うの？