Cloudflare Workers それは Frontend / Node.js が CDN Edge Side まで拡張されるもの
最近は Cloudflare Workers が熱くて、週末はずっとその調査しています。この記事はそのまとめです。 注意点として、手元でいろいろなパターンで動かして試してはいますが、プロダクション環境で運用したわけではないです。それを踏まえた上でお読みください。 特に断りが無い限り、引用文は DeepL で翻訳したものです。 Cloudflare Workers とはなにか Cloudflare Workers | サーバーレスコンピューティング | Cloudflare 一言でいうなら 「ServiceWorker の API が CDN Edge 上で動く JavaScript 処理系」 です。 Technology Radar では、まだ ASSESS(調査) フェーズという扱いです。 Cloudflare Workers | Technology Radar | ThoughtWo
歴史から学ぶ現代のフロントエンド
フロントエンドカンファレンス福岡2019 の資料です。 https://frontend-conf.fukuoka.jp/
この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。 GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。 VSCode 拡張のインストールは、以下のリンクから行うことができます。 VSCode 拡張を活用してテストを書く 本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright
アーキテクチャの進化はドメインイベントが起点になる - KAKEHASHI Tech Blog
こちらの記事はカケハシ Advent Calendar 2023 Part2の24日目の記事になります。 adventar.org はじめに 反復的な開発は、変更容易性の高いソフトウェアが不可欠です。ソフトウェア開発の経験がある方なら、デリバリ後の洞察や市場環境の変化から、新しい機能の追加やアーキテクチャの進化の必要性に直面したことが一度はあるでしょう。 私自身、要求分析手法やSOLID原則等の技法を取り入れ、変更容易性に対応する多くのプロジェクトに参加しました。しかし、どれだけ優れた手法や技法を持っていても、変更が難しい要求が出てくることは避けられません。その際、「過去の出来事」を正確に記録していれば、後から見返して問題解決が容易だったと感じることがよくあります。 ドメイン駆動設計（DDD）では、「過去に起こった出来事」を表現するドメインモデルを「ドメインイベント」と呼びます。変更容易性
業務システム SPA のフロントエンド技術選定（2023年版） - KAKEHASHI Tech Blog
本エントリはカケハシ Part 2 Advent Calendar 2023の13日目の記事です。 （Part 1もおもしろい記事がいっぱいあるので、ぜひご覧ください。） はじめに こんにちは。カケハシでソフトウェアエンジニアをしている平松です。 今年、新規プロダクト立ち上げの機会があり、その際に行ったフロントエンドの技術選定について紹介したいと思います。 フロントエンドの領域は選択肢が豊富で、変化のスピードも速いため、プロダクトの要件に適した技術を選ぶことはひとつの挑戦です。 実際、フロントエンド技術選定のヒント 【令和五年度版】のアドベントカレンダー記事を読んで、その難しさを改めて感じました。 今回の新規プロダクトは、ユーザがログインして利用するtoBの業務システムです。 私はカケハシでは2度目の新規プロダクト立ち上げですが、前回の経験を活かしつつ、新しいアプローチにも挑戦しています。
2020年6月17日に行われたイベント「UIT meetup vol.9『The new normal for frontend』」に、LINE株式会社のフロントエンドエンジニアであるChanghee Kim氏が登壇しました。「コロナ禍、私たちにできたこと」という講演タイトルで、新型コロナ対策のための全国調査を行った際のフロントエンド開発について紹介しました。講演資料はこちら コロナ禍での仕事の変化 Changhee Kim氏：それでは「コロナ禍、私たちにできたこと」というタイトルで発表させていただきます。まず自己紹介ですが、Kim Changhee（キム・チャンフィ）と申します。LINEでは2018年からフロントエンドエンジニアとして働いています。 LINEではたくさんの外国籍社員が働いています。私もその1人で、韓国出身のエンジニアです。ふだんはLINE公式アカウントの管理画面アプリを開
働いていないことへの言い訳記事です。 この夢のような生活がもうすぐ終わるので書きたくなりました... ちなみにサムネイルは「仕事」でぱくたそで検索したら出てきました。 「エレベーターも給料も下降中の写真素材」というタイトルです。 https://www.pakutaso.com/20140914273post-4629.html 何をしていたのか 会社を辞めて約 1 年ほどプログラミングの勉強をしていました。 前職では「みんなのレベルが高くて着いていけないな〜」って感じることが多く、その原因のほとんどが知識や経験不足に依るところだったので、そういうのを先に補ってから働いた方が良さそうと思って辞めました。 いわゆる異業種からのキャリアチェンジでプログラマとしてのキャリアを始めたので、知識や経験は同世代の人たちに比べるとかなりのハンデがあり、そのハンデを埋めるための勉強をしました。 プログラミ
DockerとAWSのコラボによりdocker ecsコマンドが爆誕したので使ってみた | DevelopersIO
Docker社とAWSがコラボレーションするという驚きとともに、新しくdockerコマンドに組み込まれたdocker ecsの使い心地を試してみました。 「docker ecsコマンド？なにこれ？」 先日、突如、DockerのECSインテグレーションなるものが発表されました！ AWS and Docker collaborate to simplify the developer experience | Containers 従来あるdockerコマンドに、なんとdocker ecsコマンドが追加され、docker-composeファイルを利用したECSへのデプロイがAWS CLIなどのAWS製ツールを使わずに、全てdockerコマンドだけで完結するという、ちょっと想像がつかないアップデートです。 まだDocker社ではベータ版の扱いということですが、なかなかにおもしろいアプローチだった
現在の私たちが何気なく使っている絵文字たち（😀🥺💦💕🏠💻🌊😈🐱💢…）って、実は誰でも提案📝📮することができて、「この絵文字はワシが作った👴」と言えるチャンス💪があることをご存知ですか❓🤔 このスライド📄では、普段あまり知ることのないUnicode Emoji😀（絵文字の代表格）の仕様策定の流れ💨や、Emojiを提案する方法🙆♀️を簡単にご紹介👩🏫します！ ✅ Zennに本スライド以外の内容（📊通過率・🗑️Emoijのボツ案など）を含めて載せてます↓ https://zenn.dev/cybozu_frontend/articles/how_to_propose_a_new_emoji ※本資料は、2023年6月30日にサイボウズで開催された社内イベント「フロントエンドデー」における登壇資料に一部編集を加えたものです。 ※ここに掲載の内容は2
2023/08/26(土)に開催された Frontend Nagoya #11 のセッションで使用したスライド資料です。
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
昨年から執筆を続けていた書籍が 4/24 に刊行します。「フロントエンド開発のためのテスト入門」という本です。 書籍ならではのテストコード解説を目指して 次の投票結果は、書籍企画時に持ち込んだ筆者のツイートです。フロントエンドテストに関していえば、8 割近くの方が何かしら不安や不足を感じている、という結果になりました。 不安や不足の原因は様々なものがあるかと思います。そのうち、筆者が着目したのは「テスト手法の豊富さ」です。「単体テスト・結合テスト・E2E テスト、何をどれほど書けばよいのか？」という疑問は、フロントエンドに限らず、はじめて自動テストに取り組まれる方が通る関門ではないでしょうか。 自動テストを書くには「テスト対象」を明確にしたうえで、テスト対象に適したテストコードを書く必要があります。本書は、現場で書かれるものに近い「テスト対象 = アプリケーションコード」をサンプルとして用
Docker ComposeのAmazon ECSデプロイを試してみた - SMARTCAMP Engineer Blog
スマートキャンプ、エンジニアの入山です。 2020年7月にDockerとAWSのコラボレーションにより、単一コマンドでDocker ComposeのyamlファイルからAmazon ECS上に各コンテナをデプロイできる機能追加が発表され、非常に注目を集めました！ From Docker Straight to AWS - Docker Blog AWS and Docker collaborate to simplify the developer experience | Containers ローカルでDockerを利用して開発を行っている方々は、ほぼ間違いなくDocker Composeを利用してアプリの動作に必要な各コンテナを一括管理しているかと思いますが、このECS Pluginを利用するとAmazon ECSへの各コンテナのデプロイとECSの動作に必要な各AWSリソースを一括し
今回の記事ではフロントエンド開発で参考にしているサイトを紹介していきます。 どれも動くCSS素材やコピペだけで簡単に実装できる素材がまとまっています。 気に入ったサイトを自己判断で参考にしてみてください。 TwinzLabo コピペだけで作れるデザインレシピを公開しています。動きのあるデザインやオシャレなWebデザインなど様々な記事があるのでおもちゃ屋さんに来たかのように楽しめます。記事に使用しているアニメーションはVue環境で作成されているので普段Vueで開発している方はコピペだけできれいに反映させることができて便利です。記事で紹介されているコードひとつひとつに詳しく解説がついているので初心者にはありがたいかと思います。 Free Frontend By using freefrontend.com you accept our cookies and agree to our priv
結論 個人で開発していたWEBサービスをOSSとして公開しました。 この背景や技術環境について書いていきます。 すべてのソースコードをGitHubに公開しています。 スターやレビューをしてくださると嬉しいです！ 公開したサービス: 上場企業ランキング 先日、オープンソースでWEBサービスを公開しました。 「上場企業ランキング」というサービスです。 その名の通り日本の上場企業を業界ごとに「給与」や「売上」順で閲覧することができるサービスです。 URL: https://company-ranking.net/ GitHub: https://github.com/yuki0920/company-ranking 私は2度の転職活動経験がありますが、企業を選ぶ際に知っておきたいことはいくつもありますよね。 「給与はどのくらいだろう」 「売上や利益はどの程度なのかな」 こういった情報は、求人ペー
はじめに IIJでは毎年「IIJ Bootcamp」というビギナー向けのハンズオン研修を開催しています。 ４年目となる今年も有志の皆様のおかげで無事開催することができました。 今年度はOverviewと呼ばれる座学が7講義、ハンズオン研修が21講義という規模で行いました。 参考：これまでのIIJ Bootcamp [IIJ Bootcamp] ハンズオン研修2021 開催報告 [IIJ Bootcamp] ハンズオン研修2020 with リモート [IIJ] 2019年度ハンズオン研修の取り組み [Bootcamp!] 研修資料は以下のページに公開されています。一部は非公開となっていますが、大半はCC BY-SAで公開しています。 ぜひ学習や研修等とご活用ください。 https://iij.github.io/bootcamp/ 今年の特徴としては、プログラミング技法として以下のハンズオ
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
複数のプログラムを順番に処理していく同期処理システムでは、どこかひとつの処理に時間がかかると後続の処理がまるごと遅れてしまいます。そんな同期処理に対し、ある処理の完了を待たずに次の処理を実行できるのが非同期処理。重たい処理によるボトルネックを回避できるため、ウェブサイトの応答速度改善などに役立てられています。クラウドストレージサービスのDropboxで開発が進められていた大規模な非同期処理フレームワークについて、同社のエンジニアであるArun Sai Krishnan氏が解説を行っています。 How we designed Dropbox’s ATF - an async task framework - Dropbox https://dropbox.tech/infrastructure/asynchronous-task-scheduling-at-dropbox これまでDropb
Docker Compose入門 (4) ～ネットワークの活用とボリューム～ | さくらのナレッジ
これまでのDocker Compose入門は、Docker Compoesの紹介に始まり（第1回）、簡単なウェブサーバを起動する方法（第2回）、ネットワークの理解を深める方法（第3回）でした。今回は連載のまとめとして、ネットワークとボリュームの活用によって、1つのサーバもしくはPC上に複数のアプリケーション環境を動かす方法をみていきいましょう。 Docker Composeはプロジェクトごとにネットワークを持つ 前回はDockerのネットワークの扱いを学びました。Dockerコンテナを実行すると、そのコンテナ内のプロセスは、デフォルトで「bridge」という名称の仮想的な内部ネットワークを通して通信を行います。またホスト上のブリッジ（仮想的なネットワーク・スイッチ）を経由して、Dockerが作成する他の内部ネットワークや、ホスト側のインターフェースを通して、インターネットなどの外部ネットワ
Building a toy browser
In the last several weeks, I have been building a toy browser based on an online book, Web Browser Engineering. As someone who spent a fair share of his career on web frontend, it was eye-opening and satisfying. It felt like I had been living on one side of a wall for years and finally visited the other side of the wall. I imagine other web frontend folks would like it as well. The book Web Browse
2021/10/22追記：最新版は下記記事になります！こちらもご一読くださいませ。 tech-blog.abeja.asia どうも、Tech Blog編集長(自称)の緒方(@conta_)です。 よくエンジニアの方にご質問いただく ABEJAってよく聞くけど、実際どんなことやってるのかよくわからない という点をクリアにするために、事業内容と技術視点でのABEJAの取り組みを紹介したいと思います。 ABEJAに興味のある方や、未来の一緒に働くメンバーに読んでいただけると嬉しいです！ 割とAIコンサルの会社と思われているらしいので、ちゃんとプロダクト作ってますよ！ということを伝えていきたい ABEJAの事業紹介 ABEJAは2012年から約7年間、機械学習・ネットワークやIoTデバイスを活用したプロダクトの研究・開発・運用を行っています。 様々な産業・業種へ機械学習の適用・運用を培ってきたナ
Rust によるデスクトップアプリケーションフレームワーク Tauri | 豆蔵デベロッパーサイト
Tauri はクロスプラットフォームデスクトップアプリのための Rust によるフレームワークです。Electron と同様 Web 技術でアプリの UI を構築します。 Build smaller, faster, and more secure desktop applications with a web frontend | Tauri Studio 記事執筆時点で v1.0.0-rc.5 (Pre-release)、もうすぐ v1.0 がリリースされそうなところです。 Release v1.0.0-rc.5: Apply Version Updates From Current Changes (#3468) · tauri-apps/tauri Electron と比べて、インストーラーのサイズ、メモリ消費量、起動時間などが圧倒的に小さいと謳われています。 https://gi
Backend エンジニア視点からの GraphQL / GraphQL from a perspective of backend engineer
"LayerX、スタディサプリ、SHEと考える GraphQLが向いている現場とは？運用実践LT" で登壇した資料です。 引用した資料 [Rails アプリに RESTful API のレールを敷いて生産性が大きく上がった話 | Wantedly Engineer Blog](https://www.wantedly.com/companies/wantedly/post_articles/85098) [React Server Components と GraphQL のアナロジー | by Yosuke Kurami | Dec, 2023 | Medium](https://quramy.medium.com/89b3f5f41a01) [実質無料で GraphQL Gateway を手に入れる / low-cost GraphQL Gateway - Speaker Deck](
Docker イメージを利用したローカル開発環境向けメールサーバ構築のすゝめ｜TechRacho by BPS株式会社
ebi です。 弊社では Rails だけでなく、 WordPress 等を利用した PHP 環境、WordPress 等のフレームワークを利用するまでもなく、素の PHP で構成されるページを作成、保守することもあります。 往々にして LP だったり、コーポレートサイトやサービスサイトが中心で、サイト上からのメールの送信を伴う問い合わせフォームがセットとなっていることが多いです。 Rails だとメール送信は Action Mailer を利用して、メール受信は letter_opener 等を利用すればすぐにそれっぽい画面で確認できて便利だな、と思っていたのですが、そこそこ前から Rails 以外のプロジェクトでも、 Docker を利用して letter_opener 相当の環境を手元に用意しているのが便利なので今回はそれを紹介します。 これまでの話 ところで、そもそもこれまではどう
このブログを書いてる経緯 rust.tokyo 楽しみ！絶対行く！といってたのに申込みを忘れたところ、じゃあスタッフとしてブログを書けという話になったので、ブロガー枠？らしく感想を書きます。とはいえ書けるのは見たやつだけです。 https://rust.tokyo/sessions# 前提 自分は低レベルプログラミングは詳しくないです。年に3日ぐらい思い出したように Rust 勉強することがある。 wasm 周りのエコシステムはずっと追ってる。 会場の雰囲気 組み込み勢とブロックチェーン勢が多そうな気配を感じた。 Visualization of mechanical CAD drawings using WebAssembly and WebGL Aki / CADDi (発表資料見つからず) 概要 Computer aided design (CAD) models used in m
なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用 https://zenn.dev/coedo/articles/html-css-inline-element-block-level-element この記事では、『なぜインライン要素・ブロック要素概念は依然として有用なのか』という記事（以下「元記事」といいます）の説明について見ていきます。 この記事の対象者 この記事は、ウェブ制作を学んでいる人や、「インライン要素」「ブロック要素」という用語の扱いに困っている人を想定しています。 はじめに： 結論 この記事の結論は次の2つです。 今日のHTMLから「インライン要素」「ブロックレベル要素」という表記はなくなった。 ある要素にどのような要素を入れるのかは、「インライン要素」「ブロック要素」という考え方を使わなくてもできる。 詳しく説明したいと思います。
こちらのイベントのLT登壇資料です。 https://ochacafe.connpass.com/event/308830/ 登壇後、資料内の論理展開を登壇者の判断で改善しております。以下は登壇時からの主な修正点です。 ・レガシーMPAについて、FCPのみに着目して初回表示が遅いとしていた記述を削除 ・レガシーMPA + Ajaxについて、初回表示に関する言及を削除。SPAで行われる初回表示に関する変化の説明と重複するため ・SPAの初回表示について、FCPが速くなったとポジティブな書き方を、逆にLCPが遅くなったとのネガティブな記述に修正 ・SPA+SSRのページを削除。サーバーサイドフェッチを伴うSSRについてはNext.js側のページで解説 ・サーバーサイドフェッチを伴うSSRについてのネガティブな記述を削除し、SPA的なクライアントサイドフェッチのアーキテクチャとフラットに取り扱う
GraphQL is an incredible piece of technology that has captured a lot of mindshare since I first started slinging it in production in 2018. You won’t have to look far back on this (rather inactive) blog to see I have previously championed this technology. After building many a React SPA on top of a hodge podge of untyped JSON REST APIs, I found GraphQL a breath of fresh air. I was truly a GraphQL h
TypeScriptのモノレポ構成を考える
はじめにlink あまりモノレポの構成について語られている記事が多くないなと感じたので、現時点で自分が考えている設計をまとめてみる。 以前にTwitterでディレクトリ構成と内容については言及したが、実際に利用する技術についてはあまり触れなかったので改めて検証してみた。 https://twitter.com/koh110/status/1617510034266808322 クライアントサイドとサーバーサイドのコード共有については下記の記事がよくまとまっていた。 https://capelski.medium.com/effective-code-sharing-in-typescript-monorepos-475f9600f6b4 上記の記事の構成も参考にしつつ、自分の考えも加えて検証していく。 相対パスを利用する方法 npmのローカルパス指定（file:xx）を利用する方法 シンボ
フロントエンド開発の準備
開発の前に決めておくこと 後から変更するのが難しいこと、大きな手戻りが発生する可能性のあることをできる限り開発のはじめに決めておきます。 多言語対応の有無 URLに依存する可能性が高い多言語対応は、後から対応すると制限がかかったり破壊的な変更が必要になる場合があるので、はじめに決めておきます。 多言語対応する予定はなかったけど、後から必要になってしまった場合は仕方ないと思います。 OGPの必要性 動的ルーティングに対するOGPの必要性によってレンダリング方法の選定やCDN周りの選定が変わってきます。 SEOのニーズ こちらもOGP同様レンダリング方法に影響します。 OGPに関しては後からなんとかなることもありますが、SEOが重要なサイトの場合、そもそもSPAを選択しない方が適している可能性もあるので重要です。 対応ブラウザ/バージョン これを明確にしないと、一部のブラウザで使用できないCS
[旧版]クジラに乗ったRuby: Evil Martians流Docker+Ruby/Rails開発環境構築（翻訳）｜TechRacho by BPS株式会社
まえがき 本記事は、私がRailsConf 2019で話した「Terraforming legacy Rails applications」↑の、いわばB面に相当します。この記事を読んで、皆さんがアプリケーション開発をDockerに乗り換えるとまでは考えていません（皆さんが以下の動画で若干言及しているのをご覧になっていたとしても）。本記事の狙いは、私が現在のRailsプロジェクトで用いている設定を皆さんと共有することです。それらのRailsプロジェクトは、Evil Martiansのproduction development環境で生まれたものです。どうぞご自由にお使いください。 原文免責事項: 英語版記事は最新の推奨事項に合わせて更新を繰り返しています。詳しくは記事末尾のChangelogをご覧ください（参考: 原文Changelog）。 私がdevelopment環境でDockerを使
![[旧版]クジラに乗ったRuby: Evil Martians流Docker+Ruby/Rails開発環境構築（翻訳）｜TechRacho by BPS株式会社](https://cdn-ak-scissors.b.st-hatena.com/image/square/21560bbf17dc149933029263d3a38154359b86f5/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2019%2F09%2Fdockerizing_ruby_rails_development_eyecatch2-min.png)
[2022年最新版]Lambdaの裏側教えます！！A closer look at AWS Lambda (SVS404-R) #reinvent | DevelopersIO
[2022年最新版]Lambdaの裏側教えます！！A closer look at AWS Lambda (SVS404-R) #reinvent Lambdaファン必見 Worker ManagerをAssignmentサービスに置き換えた話、SnapStartの裏側でSparse filesystemを利用している話など、Lambdaの裏側がどうアップデートされたのかが分かります CX事業本部@大阪の岩田です。今年のre:inventは現地参加できなかったのですが、毎年楽しみにしていたLambdaの裏側を解説するセッションSVS404(番号は年によって微妙に違います)の動画がYoutubeにアップされていたので、さっそく視聴しました。これまで言及されてきた内容に加えて新たな解説も増えているので改めてレポートをブログにまとめます。 セッション動画 セッション動画はこちらから確認可能です
![[2022年最新版]Lambdaの裏側教えます！！A closer look at AWS Lambda (SVS404-R) #reinvent | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/7fee36677e7512f1c68bcfe30d484a5033aecc91/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2022%2F11%2Feyecatch_reinvent2022_session-report.png)
こんにちは、Sally社 CTO の @aitaro です。 マーダーミステリーアプリ「ウズ」とマダミス制作ツール「ウズスタジオ」、マダミス情報サイト「マダミス.jp」を開発しています。 はじめに この記事ではウズの開発当初から利用していた Docker Compose をやめることにした背景についてご紹介します。 Docker Compose は各マシンの開発環境での差異を吸収するというメリットがあり、多くの開発現場で導入されていますが、Docker Composeの抱えているデメリットを勘案して、最終的に一部を残して辞める決断をしました。 Docker Composeの特徴 Docker Composeは、複数のコンテナを定義し、管理するためのツールです。ウズの開発環境では、バックエンド、フロントエンド、データベースなどをそれぞれコンテナ化して、Composeで一括管理していました。こ
Pull Requestをすぐ動作確認！ マイクロサービスでのプレビュー環境の作り方 - LIVESENSE ENGINEER BLOG
こんにちは、かたいなかです。 最近、マイクロサービスアーキテクチャを採用した環境でプレビュー環境の実現方法についていくつかのパターンを比較し整理する機会がありました。 今回の記事では、プレビュー環境を構築するための要件をなるべく特定の技術に依存せずに紹介したあとで、ArgoCD、Istio、OpenTelemetryを使用した実装例をご紹介します。 目次 目次 プレビュー環境とは プレビュー環境の構成要素 PRごとのアプリケーションやルーティングの設定のデプロイ ヘッダ伝播 および ヘッダによるルーティング 実装例 ArgoCD ApplicationSet Istio OpenTelemetry Baggageヘッダ挿入用Proxy 動作確認 まとめ 補足: 実装例で考慮していないこと 画像等のCORS DBのアクセス権限 参考 プレビュー環境とは ここでのプレビュー環境とは、Pull
Secrets from the Algorithm: Google Search’s Internal Engineering Documentation Has Leaked
Google, if you’re reading this, it’s too late. Ok. Cracks knuckles. Let’s get right to it. Internal documentation for Google Search’s Content Warehouse API has leaked. Google’s internal microservices appear to mirror what Google Cloud Platform offers and the internal version of documentation for the deprecated Document AI Warehouse was accidentally published publicly to a code repository for the c
フロントエンドエキスパートチームが選ぶ web.dev Live2020 オススメセッション - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームです。 フロントエンドエキスパートチームでは、フロントエンドに関する情報共有会を社内向けに行っています。 2017年から2020年までに10回開催しており、「Web ページのパフォーマンス」、「React の今とこれから」、「Google I/O セッションまとめ」などフロントエンドに関する情報を社内に共有してきました。 今回行ったのは、2020年6月30日から7月2日にかけて3日間オンラインで開催された web.dev Live2020 のセッションについての情報共有です。各セッションはYouTubeにて視聴できます。 今回は各チームメンバーが視聴したセッションの中から、それぞれ2つのセッションを選んで内容と感想を紹介します。 まだ web.dev Live2020 を見ていない方が興味を持つきっかけになれば幸いです。 BaHoのオススメ Ba
2021年6月2日に行われたSendai Frontend Meetup #6で使用したスライドです。 GitHub サンプルコード https://github.com/KanDai/openapi-sample ReDocで生成されたドキュメント https://kandai.github.io/openapi-sample/ About Swagger Specification https://swagger.io/docs/specification/about/ Swagger Editor https://editor.swagger.io/ Stoplight Studio https://stoplight.io/api-design/ Swagger UI https://petstore.swagger.io/ Redoc https://github.com/Red
動機 TensorFlowの登場をきっかけに 機械学習によるアイドル顔識別 という取り組みをしていて、3年以上かけてコツコツとアイドルの自撮りを収集してラベルをつけてデータセットを作ってきたけど、 アイドルヲタクはもう辞めてしまって 現場にも全然行かなくなり、卒業・脱退の情報を追いながらラベルを更新していく作業を続ける情熱はすっかり薄れてしまった。 もうアイドル顔識別プロジェクトは終了にしよう、と思った。 しかし折角今まで集めたデータを捨ててしまうのは勿体無い。せめて最後に何か活用できないものか。 と考えて、「画像生成」に再び取り組んでみることにした。 過去に試したことはあったけど、それほど上手くはいっていない。 TensorFlowによるDCGANでアイドルの顔画像生成 TensorFlowによるDCGANでアイドルの顔画像生成 その後の実験など この記事を書いたのが2016年。 この後
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」
はじめに JavaScriptにおけるテストのベストプラクティスをまとめた「javascript-testing-best-practices」というGitHubレポジトリが大変勉強になったため、特に参考になった内容をまとめて共有したいと思います。 （補足）本レポジトリにはfrontendのみならずbackendのテストに関する情報もありますが、今回はfrontendに焦点を当てて共有します。そのため扱うSectionは以下の4つです。 Section 0: The Golden Rule Section 1: The Test Anatomy Section 3: Frontend Section 4: Measuring Tests Effectiveness 想定読者 フロントエンドの実装はできるが、テスト経験はない方 テストに対して解像度が低い方 これからテストを学びたいと思ってい
Large language models like GPT-4 are becoming increasingly capable, at an alarming rate. Within a couple of years, we won't need developers any more! …Or at least, that's the narrative going viral on Twitter. I'm much more optimistic about what these AI advancements mean for the future of software development. Keep reading.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PlaywrightのVSCode拡張を使って効率的にテストを書く
LINEユーザー8300万人を対象とするアンケートを1週間で開発するには？ コロナ禍におけるLINEの施策とフロントエンド開発
会社をやめて約1年プログラミングの勉強に費やしたことに対する満足と後悔
誰でも簡単⁉️👀 絵文字ができるまで😃👍
「推測されやすい」パスワードを入力させないためにフロントエンドエンジニアができること
フロントエンド開発のためのテスト入門 - サンプルの紹介 -
現役Vueエンジニアが参考にしているフロントエンド素材まとめおすすめサイト４選 - Qiita
個人で開発していた上場企業の情報サイトをOSSにした
2022年度ハンズオン研修資料を公開しました | IIJ Engineers Blog
サイトの表示高速化につながる18のこと | knowledge / baigie
Dropboxが新開発した「非同期処理フレームワーク」はどのように構築されているのか？
ABEJAの技術スタックを公開します (2019年11月版) - ABEJA Tech Blog
rust.tokyo のまとめ・感想 - mizchi's blog
『なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用』という記事について
フロントエンドパフォーマンスの変遷とNext.jsに見る次の時代
Why, after 6 years, I’m over GraphQL
モノレポの開発環境でDocker ComposeをやめてTaskfileを導入した話
OpenAPIを使ってAPIドキュメントとモックサーバーを良い感じにした話
顔画像生成のためのデータセットを作る - すぎゃーんメモ
The End of Front-End Development