2022年、注目しておきたいCSSの新機能のまとめ
2022年に注目しておきたいCSSの新機能を紹介します。いくつかの機能はすでに1つ以上のブラウザでサポートされており、他のブラウザもそれに続く予定です。 ビューポートではなく親コンテナに応じてスタイルを定義できる「コンテナクエリ」、詳細度とスタイルの順序を明示できる「カスケードレイヤー」、相対色構文が追加された「カラー関数」、Safariの100vhを解決する新しいビューポート単位「svh」など、今すぐにでも使用したい機能ばかりです。 Photo by Jr Korpa on Unsplash CSS in 2022 by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 注目の新機能（クロスブラウザでサポート） まだ先の新機能（実験的/シングルブラウザでサポート） 停滞している新機能 Safariは「新し
SmartNewsのサーバーサイドのすべて 大規模サービスを支えるアーキテクチャと技術スタック サーバサイドの技術スタック・アーキテクチャ総ざらい 2019年5月28日、「SmartNews Tech Night in Fukuoka Vol.1」が開催されました。日米4,000万ダウンロード (※1)を超えるニュースアプリ「SmartNews」の今と、技術にまつわる裏側について包み隠さず語る本イベント。プレゼンテーション「サーバーサイドの技術スタック・アーキテクチャ総ざらい」に登壇したのは、SREチームのEngineering Managerを務めるNobutoshi Ogata氏。SREチームの立ち上げを行い、EMとして活躍する同氏が、SmartNewsに用いられるサーバーサイドの技術について明かします。※1:日米Google Play、App Storeのダウンロード数を合算した数値
ChatGPTの面白い使い方「テンプレート・固有表現抽出・感情分析・エッセイを書かせる」 - シロッコの青空ぶろぐ
ランキング参加中GPT 目次 ChatGPTの面白い使い方 この書き出しはChatGPTに書いてもらった。 テンプレートで出力フォーマットが指定できる アメリカ合衆国の大統領リスト 大統領リストの出力 固有表現を抽出させる 固有表現とは 固有表現抽出 ChatGPTの回答 ChatGPTは感情分析が出来る 次の分析対象文を感情分析して 分析対象文の感情分析結果 アメリカ国家の歌詞を感情分析して 日本の国歌「君が代」の歌詞を感情分析して ChatGPTにエッセイを書いて貰う ペットにするのに最適な蛇を教えて 「ボールパイソンはペットに最適」というエッセイを書いて ChatGPTが書いた「ボールパイソンはペットに最適」 まとめ ChatGPTの面白い使い方 こんにちは、私はブロガーのシロッコです。最近、人工知能の言語モデルChatGPTが大きな話題となっています。ChatGPTは、自然言語処理
はじめに こんにちは。WEARバックエンド部SREブロックの春日です。普段はWEARというサービスのSREとして開発・運用に携わっています。本記事では、約60％のコスト削減に成功したNATゲートウェイの通信内容の調査方法と通信量の削減方法についてご紹介します。 目次 はじめに 目次 背景 コストの把握 NATゲートウェイの通信内容の把握 CloudWatchメトリクスでの確認 VPCフローログでの確認 リゾルバーでのクエリログでの確認 調査結果をもとにNATゲートウェイ経由での通信量を削減する AWSサービスとの通信 Datadogとの通信 WEARのAPIとの通信 ECRパブリックリポジトリとの通信 結果 まとめ 背景 ZOZOではより効果的な成長を目指してコストの最適化を進めています。コストの増大はサービスの拡大を鈍化させる原因となるため、常に最適な状態に保つことが必要です。WEARで
2020年秋にVue.jsのアプリケーションを作るなら、押さえておきたい5つのポイント | フューチャー技術ブログ
TIGの伊藤真彦です。 ここ最近はVue.jsでのフロントエンド開発を行っています。 ほぼ何もない状態からのスタート段階から始めたのですが、その際調査したことが学びになったので共有します。 ※この記事は 2020/10/13 に執筆されました。調査日は2020/08/17～2020/09/01 のため、バージョンなど当時と状況が異なるものがあります。この1ヶ月の間でも、alphaからbetaに変わったり、betaが取れたりと進化が速いです。 公式ライブラリのステータスはこちらもご参考ください。 https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries 前提として押さえておきたい2点のポイント環境構築はVue CLIフューチャーでは仕事ですぐに使えるTypeScriptと題しまして、TypeScri
100万行の大規模なJavaScript製システムをTypeScriptに移行するためにやったこと | CyberAgent Developers Blog
現在ピグ事業部の主力サービスである「ピグパーティ」でサーバーサイドエンジニアをしております新卒2年目の川口です。普段はSRE関連の業務を主とし、サーバーサイドの業務効率改善や、システムの運用保守、時には機能の開発や修正なども担当しております。 ピグパーティは、2015年にiOS/Androidでリリースされたアバターコミュニティアプリで、サーバーサイドはNode.js(JavaScript)+MongoDBを採用しています。 ピグパーティではこれまでにプライベートクラウドからGCPへの移設、Kubernetes(GKE)の採用など、技術的負債の排除や新技術の採用などを積極的に行ってまいりました。今回は、サーバーサイド開発時の大きなボトルネックになっていた、型がわからないことに起因する複数の問題を解決するために、TypeScriptを導入することにしました。その結果、システム規模に対して少な
ZOZOTOWNの検索基盤におけるElasticsearch移行で得た知見 - ZOZO TECH BLOG
こんにちは。ZOZOテクノロジーズZOZOTOWN部 検索チーム 兼 ECプラットフォーム部 検索基盤チームの有村です。 ZOZOTOWNでは、以前からキーワード検索時にはRDBと併用してElasticsearchを使用していました。本記事ではこれまでRDBで行っていたIDによる索引検索も含め、すべての検索をElasticsearchへ置き換えた事例と、その際に行った設定内容の一部をご紹介します。 背景 弊社CTOによるこちらの記事にもある通り、ZOZOTOWNでは現在マイクロサービス化を進めており検索システムについてもその対象となっています。検索の文脈では、全文検索/サジェスト/ロギング等関連する様々な課題への解決策として有効であるElasticsearchを採用しマイクロサービス化を進めています。 また、もう1つの背景として検索のパーソナライズ化があります。これまでZOZOTOWNでは
はじめに 対象イベント 読み方、使い方 Remote Code Execution(RCE) 親ディレクトリ指定によるopen_basedirのバイパス PHP-FPMのTCPソケット接続によるopen_basedirとdisable_functionsのバイパス JavaのRuntime.execでシェルを実行 Cross-Site Scripting(XSS) nginx環境でHTTPステータスコードが操作できる場合にCSPヘッダーを無効化 GoogleのClosureLibraryサニタイザーのXSS脆弱性 WebのProxy機能を介したService Workerの登録 括弧を使わないXSS /記号を使用せずに遷移先URLを指定 SOME(Same Origin Method Execution)を利用してdocument.writeを順次実行 SQL Injection MySQ
この本の概要 Go言語ユーザーとして，「もう一段レベルアップしたい」「開発に使いたい」と思っている方に向けた，Go言語の解説本です。関数やパッケージの使い方，並行処理，テストといった基本的なトピックにおいて，「こう書くと綺麗になる」「こう書くとパフォーマンスが上がる」といったエッセンスを紹介します。後半ではCLIアプリ／Webアプリの開発手順や，現場で使われている便利なパッケージなど，著者が業務やOSSの開発で培った技術をふんだんに紹介します。 こんな方におすすめ Go言語の入門を終え，さらに深く学びたい人 第1章 プログラミング言語Goとは 1.1 Goの簡単な歴史 1.2 Goの立ち位置 1.3 Goが利用される場面 標準でUTF-8をサポート マルチプラットフォーム 並行処理の扱いやすさ ストリーム指向 シングルバイナリ 1.4 教育用途としてのGo 1.5 なぜGoが使われるのか
object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック prefers-color-scheme media query prefers-reduced-motion media query text-emphasisプロパティ text-stroke, text-fill font-variation-settingsプロパティ will-changeプロパティ CSS Grid Layout (level 1) IEでCSS Gridを使用する時の既知の問題 IE 11ではプレフィックス「-ms-」が必要。 異なるプロパティ名（grid-template-columnsと-ms-grid-columns）が存在する。 レイアウトにgrid-rowsが必要。 Chrome, Firefoxとは、グリッドの数え方が異なる。 参考: IEで
WebAssembly (wasm) allows code written in languages other than JavaScript to run on browsers. If you haven’t been paying attention, all the major browsers support wasm and globally more than 90% of users have browsers that can run wasm. Since Rust compiles to wasm, is it possible to build SPAs (Single Page Applications) purely in Rust and without writing a single line of JavaScript? The short answ
Wevoxのフロントエンドエンジニアをしているタガミです。最近はmonorepo構成に移行中のWevoxフロントエンドのテストやデザインシステムなどをいい感じにしようとしています。 この記事では、WevoxというSaaSプロダクトのフロントエンドにおける自動テストの話をします。Wevoxはリリースから5年以上が経過し、チームのメンバーも増え、またソースコードも巨大化しています。そんな中でフロントエンドも"式年遷宮"をして、改善を繰り返しています。中にはソースコードをガラッと変えるようなリファクタもあり、担当するエンジニアにとってはデグレの心配が付き纏います。そんな日々変化するフロントエンドを支えるのが自動テストです。 Wevoxの開発チームは決して大人数ではありません。そんなチームでも品質の改善のために一歩ずつ改善しつつある経験をもとに、フロントエンドの自動テストポイントをいくつかお伝えし
こんにちは。たかぱい（@takapy0210）です。 本日は自然言語の可視化を手軽にできるようにしたパッケージnlplotをPyPIに公開したので、これのご紹介です。 nlplotとは？ nlplotで何ができるか 使い方 使用データ 事前準備 ストップワードの計算 N-gram bar chart N-gram tree Map Histogram of the word count wordcloud co-occurrence networks sunburst chart まとめ nlplotとは？ 自然言語の基本的な可視化を手軽にできるようにしたパッケージです。 現在は日本語と英語で動作確認済みです。 基本的な描画はplotlyを用いているため、notebook上からインタラクティブにグラフを操作することができます。 github.com （スター★お待ちしております🙇♂️）
FigmaとNotionでUML・経理処理・デザインまでAll in oneな仕様書を書いて、更新・共有を楽にしてる話 - Qiita
前提としての情報 単に「Figmaで要件定義のためのUMLも、外部設計のためのデザインも、内部設計のためのERDも全部つくるよ〜〜」という話をすると、ERD書くならデザインツールなんて使わないで、DBMSから自動生成できるツールとか使った方がいいじゃん、みたいな疑問が出るのは重々承知なので、そもそもこの形式に落ち着いた前提事項を書いておきたいと思います。 ご興味がなければ読み飛ばしてください。 筆者の仕事範囲 さて、冒頭で「事業会社でデザイナーとPMの狭間みたいな仕事をしてます」と書きました。キャリアの背景的には受託のPMっぽい仕事（厳密には違うんですが、本旨ではないので割愛します）→事業会社のインハウスデザイナー→現職という感じで、外渉から手を動かす所まで、必要ならなんでもします。 ざっくりいうと、機能の起案をして、経理などの関連部署に相談して、WBS引いて、UML書いて、画面遷移図書い
FAQサイト、サポート問い合わせをせずとも自分で疑問を解決できて便利ですよね。でも、検索した単語が一件もヒットしないと、ちょっとガッカリしてしまします。そういったガッカリを減らすために、簡単なデータ分析を使ってFAQサイトを継続的に改善する話を書いてみます。 ...というのも、自分が仕事で関わっているMackerelでは最近FAQをリニューアルしたからなのでした。 MackerelのFAQではZendesk Guideを利用していますが、Zendesk Guideは便利なAPIが用意されているので、それと既存のデータ基盤を組み合わせて改善していく形です。 FAQサイト内の検索語を列挙する まず、FAQサイト内でどういった単語が検索されているのかを列挙します。Google Tag Manager経由でFirebase Analyticsにデータを飛ばすと閲覧状況が分かりますが、そのログをBi
【感想】『Amazon Web Servicesを使ったサーバーレスアプリケーション開発ガイド』：Lambdaで本格サービス開発まで - Rのつく財団入り口
サーバーレスアプリケーション開発ガイド Lambda関数を用いたサーバーレス開発をもっと知っておこうと思って読んだ本の感想です。2018年4月刊行、サーバーレスの主要サービス解説にコードはPython、のみならずフロントはVue.jsを使った本格開発まで、実践的な内容が詰まった本です。 作者は現Amazon Web Services Japan所属のKeisuke69こと西谷圭介さん。Twitterでもよくお見掛けします。(@Keisuke69) サーバーレスアプリケーション開発ガイド Chapter1 サーバーレスアプリケーションの概要 1-1 サーバーレスアプリケーションとは 1-2 ユースケースとアーキテクチャパターン 1-3 サーバーレスアプリケーションのライフサイクル管理 Chapter2 Amazon Web Services（AWS）利用の準備 Chapter3 インフラを自
Next.js の状態管理 2020
Next.js といえば、SSG（JAMstack）が最近は特に話題ですね。1年前まではgetInitialPropsを用いて、どう SSR するのかという事が話題の中心でした。Next.js 9.3 以降、SSR をする際にはgetInitialPropsではなくgetServerSidePropsを使用することを推奨すると記載されています。（そして、getInitialPropsを使用することで自動最適化が無効となってしまう旨も）getStaticPropsやgetServerSidePropsを利用することで、私たちは SSG・SSR をページ単位で切り替えることができます。 「SSG・SSR」が共存する可能性がある場合、SSR にはgetServerSidePropsを利用することになります。この変化による影響範囲は多大で、状態管理とデータフェッチについて、再考する必要がでてきまし
一般的にChatGPTを使用する際には、プロンプトを入力して進めていく必要がありますが、プロンプトの作成は意外に難しいと感じる方も多いかもしれません。 AutoGPTは、プロンプトを作成せずとも自動的に行うべきことを提案してくれる、という驚くべき機能を持っています。AutoGPTは誰でも利用可能です。 今回PROMPTYでは、そんな話題のAutoGPTの特徴や始め方、使い方を解説していきます。 エンジニアではない方でも導入できるよう、できるだけわかりやすく説明しますので、１つずつ手順を踏みながら試してみてください。 ブックマーク必須！PROMPTYとは 国内最大級のChatGPTなどの生成AIのプロンプトエンジニア専門メディアです。 「プロンプトのテンプレ集」「生成AIの開発・活用ノウハウ」「海外の時事ニュース」など幅広い内容を取り揃えています。 一般的なニュースなどでは取り扱っていない最
概要 本記事は、 Vue.js コアチームメンバーである @antfu7 氏の以下ツイートに対する回答を個人的にまとめたものです。 React ユーザーの皆さん、 好奇心で聞くのですが、Vue を使ったり試したりするのを妨げているブロッカーや欠点は何ですか？ 注意事項 対立煽りっぽいタイトルにはなっていますが、個人的な好奇心がモチベーションとなっており、特定の技術を贔屓、批判する意図はありません。 私自身は長らく Vue を愛用しており、業務でも大規模 Vue アプリのメンテに携わっている一方で、React は小規模プロジェクトや個人開発でしか利用していません。そのため、理解度に差がある状態であるため、改めて Vue と React の対比やそれぞれの良さを実感したいと思い、一通りのツイートに目を通した次第です。 また、 Vue.js の生みの親である Evan You氏が以下のようにツイ
![[Twitter] React ユーザーが Vue を選ばない理由](https://cdn-ak-scissors.b.st-hatena.com/image/square/050cb810e4b79fc48a4bc3fe8753540d585f1720/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--QTloU7Jr--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BTwitter%25255D%252520React%252520%2525E3%252583%2525A6%2525E3%252583%2525BC%2525E3%252582%2525B6%2525E3%252583%2525BC%2525E3%252581%25258C%252520Vue%252520%2525E3%252582%252592%2525E9%252581%2525B8%2525E3%252581%2525B0%2525E3%252581%2525AA%2525E3%252581%252584%2525E7%252590%252586%2525E7%252594%2525B1%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ashingo.sasaki%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzg0NWZhNzViYTguanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Webアプリケーションの障害対応について改めて意識すべき点ややれると良いことをまとめる - stefafafan の fa は3つです
Webアプリケーションエンジニアをやっていると時たま障害が発生し復旧作業にあたるのだが、人によって「障害対応が得意」だったり「苦手」だったりする。ただ、障害対応時の「良い動き」というのが実際どういうものなのかというのが自分の中でふんわりしていたので、ざっくりはてブで「障害対応」で検索していくつかのエントリーを読んでみたり、自分の仕事での経験を振り返ってみたりして考えたことをまとめてみた。 障害にはフェーズがある 障害対応には複数の役割がある 障害対応をスムーズに進めるための目的は複数ある スキルも必要なので練習していけると良い 初心者でもやれることはある 実際やってみると良さそうなこと 障害対応時にやることをテンプレート化する スムーズに対応に入れる仕組みを整える 障害対応避難訓練 おわり 障害にはフェーズがある 障害対応したことないと、障害には「障害中」「障害中でない」の二つの状態しかな
Azure App Service (Web Apps) がリリースされて 6 年、情報のアップデートを行いつつ気になった情報は適当にブログに書くという日々ですが、Regional VNET Integration や Service Endpoins が使えるようになって設計に大きな変化が出るようになったのでまとめます。 最近は Microsoft で HackFest を行うことも多いのですが、App Service をこれから使い始めたいという場合に、失敗しない構成を共有したい、知ってほしいという意図もあります。多いですが中身は単純です。 基本設定 64bit Worker は必要な場合のみ利用する FTP / Web Deploy をオフにする Always on を有効化する ARR affinity をオフにする HTTP/2 の有効化を検討する Health Checks の
ToDo管理ツール、いろいろありますよね。 古くは Remember the Milk、Evernote、Google GmailのToDoなども便利です。 しかし、たかだかToDoを管理するのに有料のサービスを使いたくはありませんし、ToDoにはそこそこに個人的なセキュリティが求められる要素があります。 Gmail ToDoだと管理が難しい例 GmailのToDoはメールに起因するToDoには便利ですが、カンバン方式のワークフロー、メールに起因しないToDo…例えば「ああ〜、あのイベントの参加費を月末までに精算処理して領収書提出しなきゃ〜」とか「来月のLTでの講演頼まれちゃったけど、上長伺いから広報チェックから事後記事公開まで 面倒くさい たいへん～」など、チェックボックス的な1段階の階層では片付かないToDoにはあまり効率が良くありません。GmailのToDoは期限もメールそのものへの
やっぱりコンパイラが書きたい。渡米後にRuby JIT開発を趣味から仕事に変えた私のキャリア戦略 - Findy Engineer Lab
国分崇志（@k0kubun）と申します。プログラミング言語Rubyのコミッターとして活動しています。2019年からシリコンバレーで働いており、2022年からShopifyという会社でRubyのJust-In-Time（以下、JIT）コンパイラをフルタイムで開発しています。 長い間趣味でやっていたコンパイラの開発を仕事にしたのは、現職が初めてでした。この記事では、趣味を仕事に変えた経緯や、どのようにして業務経験のない分野にキャリアチェンジしたのかを紹介します。 仕事で分散システム、趣味でコンパイラを書くキャリア 楽しく稼げる仕事を求めてたどり着いたRubyエンジニア 研究で分散システムと言語処理系の両方に興味を持つ 分散ミドルウェアを仕事で、JITコンパイラを趣味のOSS活動で やっぱりコンパイラを仕事にした複合的なきっかけ 働きながら大学院に通い、コンパイラが一番好きなことに気付いた コン
背景 Next.js に App Router が導入されてから1年近くが経ちました。しかし、未だに App Router を前提として設計のベストプラクティスが定まっておらず、身近なフロントエンドエンジニアはみな「まだプロダクトに取り入れるには考えることが多いよね」という共通認識のまま止まっているような気がしています。 また、App Router が導入されるまでは、技術選定の無難な選択肢として Next.js が最有力でした。しかし、現在は App Router の設計のプラクティスが未発達なことや、オーバースペックであるという見方が出てきており、検討しなければならないことが多くなったように感じます。 そうした中で、ではその懸念というのはどのようなものがあり、導入しずらい要因に何があるのか、というところが、今回執筆を行う上での背景になります。 App Router導入で考えないといけな
はじめに プロジェクト作成 プロジェクト構成 コンポーネント レイアウト ページ ビルド Blog テンプレート Portfolio テンプレート Documentation テンプレート まとめ はじめに 先日1.0リリースとなった、静的サイトジェネレータのAstroの紹介です。 JSで作成したページをビルドして、JSを含まない早いサイトを生成し、必要な場合には React や Vue といった好きなフレームワークを簡単に組み込むことができるのが特徴になります。 プロジェクト作成 Node は、v14.18.0 以上、または v16.12.0 以上が必要です。 npm や yarn、pnpm で create astro でプロジェクトを作成します。 # npm $ npm create astro@latest # yarn $ yarn create astro # pnpm $ p
設定対象 今回紹介する設定対象は以下2つです。 Repository Settings Repository Templates 1. Repository Settings おすすめの設定内容をシートにまとめました💡 よろしければ、ご活用ください🙇♂️ 各設定の選定理由をこの章で紹介します。 設定チートシート 1.1 General 1.1.1 General Require contributors to sign off on web-based commits 必要に応じて有効 機能について GitHubのWeb上で編集を行う場合、コミット時にサインオフを求める機能です。 詳細はリポジトリの強制コミット サインオフを有効または無効にする をご覧ください。 推奨シーン OSS開発など様々な開発者のコミットが想定されるとき 理由 OSS開発などにおいて、コミッターの方に著作権やラ
Go製アプリケーションのコンテナ化にはkoを推したい - YAMAGUCHI::weblog
はじめに こんにちは、Google Cloudでオブザーバビリティを担当しているものです。Cloud Operations suiteをよろしくおねがいします。（宣伝終わり） この記事はGo Advent Calendar 2021 その1の22日目の記事です。昨日は @sago35tk さんの「ESP32 向けに TinyGo をセットアップする」でした。TinyGoのコアな情報を日本語で教えてくれるtakasagoさんには本当にいつも感謝しています。 さて、今日はGo製のアプリケーションをdockerlessでコンテナ化できるkoの紹介をします。koは本当にイチオシのツールで、みんなに使ってもらいたいのでぜひ使ってください。 github.com DockerによるGo製アプリのコンテナ化 まず最もポピュラーと思われるDockerを用いた場合のGo製アプリケーションのコンテナ化の方法に
2022年2月21日、カプコンがストリートファイターシリーズの最新作となる「ストリートファイター6」の制作決定を発表しました。このストリートファイター6のロゴが約1万円でAdobeが販売しているロゴにそっくりだっと話題になっています。 Street Fighter 6's New Logo Looks Like A Piece Of $80 Clipart https://kotaku.com/street-fighter-6-vi-capcom-graphic-design-logo-sf6-sf5-1848573656 ストリートファイターの公式Twitterアカウントは、ストリートファイターVの最後のダウンロードコンテンツ(DLC)キャラクターであるルークとリュウが対峙するムービーを公開し、ストリートファイター6の制作決定を発表しています。 『ストリートファイター6』制作決定#Str
“LLM for SRE“の世界探索 - ゆううきブログ
ChatGPTが登場した当初、対話や要約、翻訳、コード生成などの典型的な言語タスクができても、SREやAIOpsの研究開発にはあまり関係ないのではないかと正直思っていた。AIOpsでは典型的にはいわゆるObservabilityデータ（メトリクス、ログ、トレースなど）が入力となるため、自然言語ではなく数値のデータを解析することが求められる。自然言語のタスクを研究対象としていなかったため、AIOpsとChatGPTに強い関係性は見いだせなかった*1。 しかし、自分で大規模言語モデル（Large Language Model: LLM）を日常的に使用したり、表題にあるようにSREのためのLLM（LLM for SRE, LLM4SRE）に関する論文を読むうちに、LLMのテキスト生成器としての性質よりもその優れた推論機械としての性質に注目するようになった。特にSREの障害診断は、人間の専門家が推
WEBアプリ WEBフレームワークはEchoを利用します。views/index.htmlと、assets/images/orora24O.jpgを読み込んでEC2ローカルに保存した画像を表示するだけページを作成しました。このアプリケーションをEC2インスタンスで実行しWEBサーバとして起動します。 手元でビルドしてEC2へ必要なファイルをコピーする計画です。ディレクトリ構成は以下です。 $ tree . ├── assets │ └── images │ └── orora240.jpg ├── go.mod ├── go.sum ├── main.go └── views └── index.html package main import ( "io" "net/http" "text/template" "github.com/labstack/echo/v4" "gith
Next.js + TypeScript + AWS Amplify でアプリケーション開発 - 虎の穴開発室ブログ
こんにちは、虎の穴ラボのNSSです。 最近ReactやTypeScriptを勉強中なのですが、Reactで作ったアプリケーションを簡単にデプロイして公開できるツールとして、AWS Amplifyがあります。 AWS Amplifyとは、AWSが提供するモバイルやWEBのアプリケーションを素早く開発することができるプラットフォームです。 AWS Amplifyは、たった数クリックでアプリケーションをデプロイできる他、 コマンドラインツールを使ってユーザー認証やAPIなど、あらゆる機能を簡単にアプリケーションに追加することができます。 今回は、ReactベースのフレームワークであるNext.js と AWS Amplifyを使ったアプリ開発をご紹介します。 環境 Node.js (v16.4.1) Next.js (v10.2.0) TypeScript Node.jsはインストール済みである
もしも、フォトショップをつかって、写真から不要な人やものを消したいとき、あなたならどうしますか。 さまざまな方法がありますが、もっとも手軽なのが「コンテンツに応じた塗りつぶし」でしょう。 シンプルな写真では問題ないのですが、特に複雑な写真では、フォトショップにあまり良い結果を期待することができません。 今回は、フォトショップと無料のAIツールをつかって、どんな写真でも不要な人やものを消す新しい写真加工テクニックをご紹介します。 フォトショップ「コンテンツに応じた塗りつぶし」の現状 まずは、フォトショップの「コンテンツに応じた塗りつぶし」をつかって、どこまで消せるか試してみます。 こちらの写真の手前に立っている男性を、消してみましょう。 加工をはじめる前に、もとの写真をコピーして保存しておくと、もしものときのバックアップになります。 ここでは、「被写体の選択」ツールを使い、人物のみを切り抜き
Hotwireとは何なのか？
はじめに HotwireはBasecampが発表した、モダンなWebアプリケーションを作るための新しいアプローチです。名前もHTML OVER THE WIREから来ているように、HotwireではHTMLをサーバーから送ります。「それ普通のWebアプリケーションでは？」と思う方もいるかもしれませんが、SPA + APIサーバでJSONが使われるのに対し、SPAと同様の体験をHTMLを中心に置いて作るアプローチであることを示す表現です。 僕個人は、最初は「ふ〜ん」という感じだったんですが turbo-railsを読みつつHotwireのデモアプリをPhoenixに移植してみたり WebSocketではないTurbo Streamsのsourceを作ってみて遊んだり と、ある程度触ってみて良さが理解できてきたので、Hotwireを使うと何が嬉しいのか、Hotwireの各要素の紹介を記事として
Astro 1.0 | Astro
We are thrilled to announce Astro v1.0: a web framework for building fast, content-focused websites. Over the last 16 months, Astro has grown from an empty repo to over 13,000 stars on GitHub and 30,000 early users around the world. The Astro documentation has been translated into 6 different languages, and Astro has already been deployed at amazing companies such as Firebase (Google), Trivago, Th
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog
Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで
外資IT企業のSoftware Engineer - Machine Learningのオファーをもらうためにやったこと - 肉球でキーボード
写真は前職の最終出社日に同期と朝まで飲んで撮った渋谷スクランブルスクエア この記事について 本記事では自分が外資IT企業のSoftware Engineer - Machine Learning(機械学習エンジニア)に応募して、オファーをいただくまでにやったことを書きます。 外資IT企業のSoftware Engineerに関する日本語ドキュメントは、既に多くの方が素晴らしい記事を公開してくれていますが、Machine Learning / Data Science専門のポジションに関する情報はまだまだ少ない印象です。 本記事が外資IT企業でMachine Learning / Data Science関連の職を目指す人の参考になればと思います。 本記事には以下の内容は含まれません。 具体的な面接項目・質問内容 お金の話 企業ごとの面接項目についてはGlassdoor, LeetCode、
ここまで読んでくださった皆さんに、ちょっとしたクリスマスプレゼント。マンガでわかる GoF デザインパターン 23 種チートシートです。これでもうデザインパターンは完全にマスターしましたよ。やったね! (注: ここからはあとがきポエムです) ところでみなさん、せっかくデザインパターンを学んだので、これを使ってプログラムを書こう、チートシートがあるからなんでも書けそうだぞ、なんて思っていませんか。ダメですよ。そんなことしたら 2000 年前後に起きた失敗を繰り返してしまいます。 実は GoF のデザインパターンは、ビジネス的には成功したけど、教育には失敗しました。最初に出版された本に「オブジェクト指向における再利用のための」という肩書が付いていましたが、これが本当に良くなかった。 あの頃 (ポール・グレアムが LISP と Ruby を褒めるまで) は、「オブジェクト指向様こそが良い設計のす
ChatGPT APIの使い方 実際にChatGPT APIを使ってみましょう。 openai-pythonのインストール 今回はOpenAIのPython用ライブラリであるopenai-pythonを使います。pipを用いて、openai-pythonをインストールしましょう。 pip install openai APIリクエスト ChatCompletion.createで対話を生成できます。たとえば、以下のようなコードになります。 import openai openai.api_key = "sk-..." # APIキー completion = openai.ChatCompletion.create( model="gpt-3.5-turbo", messages=[{"role": "user", "content": "こんにちは！"}] ) print(complet
FastAPI入門 - モダンなPythonフレームワークの特性をチュートリアルで手軽に学ぶ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
FastAPI入門 - モダンなPythonフレームワークの特性をチュートリアルで手軽に学ぶ PythonのWebフレームワークとしていま注目を集めるFastAPIは、シンプルにコードが書けるだけでなく、パフォーマンスが高いWebアプリケーションのバックエンドサーバーが構築可能です。同フレームワークの勘所をPythonスペシャリストの杜世橋さんが、初心者向けのハンズオン、そしてより実践的な画像への自動タグ付けサービス実装をとおして解説します。 FastAPIはいま非常に注目されているPythonのWebフレームワークの1つです。Flaskのようにシンプルに書ける一方でPythonのType Hintの機能をうまく活用し、HTTPのリクエスト/レスポンスをPythonの関数の引数/戻り値とシームレスにマッピングして非常に効率的に開発ができるのが最大の特徴です。非同期処理にも対応していてその名
皆様フロントエンドのテストを書いていらっしゃいますでしょうか？ フロントエンドのテストを書くときには API コールする処理を全てモックする必要があります。外部の API をコールする処理をテストに含めると API サーバーが落ちているなどの外部の要因によってテストが失敗してしまう可能性がありますし、テストを実行するたびに実際に API をコールしてしまうとサーバーに負荷がかかってしまうなど外部に対しても悪影響を与えてしまいます。 さて、従来のモックする手段としては Jest のモックを利用して axios や fetch などのモジュールをモック化する手法がよく使われていたかと思います。 最近のテスト手法として API コールをモックする際に Jest ではなく Mock Service Worker (以下 msw ）を使用する手法が注目されています。実施にどのように使用されているのか
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SmartNewsのサーバーサイドのすべて 大規模サービスを支えるアーキテクチャと技術スタック
NATゲートウェイの通信内容を調査して対策し、コストを約60％削減した話 - ZOZO TECH BLOG
【2020年】CTF Web問題の攻撃手法まとめ - こんとろーるしーこんとろーるぶい
Go言語プログラミングエッセンス
IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ
Single Page Applications using Rust
フロントエンドの"ちょうどいい"自動テストのはじめかた - Atrae Tech Blog
自然言語を簡単に可視化・分析できるライブラリ「nlplot」を公開しました - ギークなエンジニアを目指す男
データ分析を元にFAQサイトを継続的に改善する - yasuhisa's blog
AutoGPTを徹底解剖！使い方をご紹介！【2023年4月25日最新版】
[Twitter] React ユーザーが Vue を選ばない理由
後悔しないための Azure App Service 設計パターン (2020 年版) - しばやん雑記
GitHubを最強のToDo管理ツールにする - Qiita
Next.js って App Router が出てきて平和じゃなくなったよね
モダンで早い静的サイトジェネレータ Astro の始め方 - A Memorandum
ワイのGitHubリポジトリおすすめ設定(2022年 決定版) - Qiita
新発表された「ストリートファイター6」のロゴが1万円で販売されているロゴにそっくりだと話題に
WEBサーバをコンテナにした際に静的コンテンツはどこへ保存するのか | DevelopersIO
【フォトショップ】写真から何でも削除できる、怖すぎる新AIツールをつかった魔法テク
GoF デザインパターン チートシート - Qiita
ChatGPT APIとWhisper APIで議事録文字起こしアプリを作り、Hugging Face Spacesで公開する | gihyo.jp
フロントエンドのテストのモックには msw を使うのが最近の流行りらしい