Next.jsのウェブアプリをサーバーサイドAPI部分も含めてデスクトップアプリとしてElectron内で動くようにtRPCで頑張る - Qiita
Next.jsのウェブアプリをサーバーサイドAPI部分も含めてデスクトップアプリとしてElectron内で動くようにtRPCで頑張るTypeScriptElectronNext.jsVerceltRPC 最近、Next.js/Vercelでちょっとしたウェブアプリケーションのツールを個人的に作っているのですが、これをデスクトップアプリケーションとしても動かしたいなと思うようになりました。私のようなふだんウェブばかりやってる人間にとっては、デスクトップアプリは憧れなのです。 このアプリケーションは、ブラウザ側で動く部分と、サーバー側(Vercel)上のNode環境で動く部分とに分かれているわけですが、Webの技術でクロスプラットフォームなデスクトップアプリケーションを作れるElectron上でもこれの全体が動くように頑張っていきたいと思います。ここでやりたいのは、ブラウザ部分だけをElect
2022年10月25日に、フロントエンドフレームワーク「Next.js」の最新版である「Next.js 13」がリリースされ、同時にバンドルツール「Webpack」の後継となる「Turbopack」も発表されました。開発元のVercelは、Turbopackについて「Webpackよりも700倍高速」とアピールし、性能を示すベンチマーク結果を公開しています。 Introducing Turbopack, the successor to Webpack. ◆ ~700x faster than Webpack ◆ 10x faster than Vite ◆ Native incremental architecture built with Rust ◆ Support for React Server Components ◆ Support for TS, JSX, CSS & mo
Edge Runtimeで遊んでみる
Edge Runtime が出た Vercelからいつの間にかEdge Runtimeなるものが出てたので、遊んでみた。 Web標準のAPIを使ったエッジ環境で動くアプリケーションの開発やテストを助けるツールキット。Edge環境はNode.jsじゃないし、evalが使えなかったりするので、それをシミュレートできる。 The Edge Runtime is a toolkit for developing, testing, and defining the runtime Web APIs for Edge infrastructure. 第一行目に「Vercel」とか「Next.js」の文字がないのがよい。とはいえ、一番の想定はVercelのEdge Functionsでしょう。 Edge Functionsってのは今のところ2つあるみたい。どちらもVercelもしくはNext.jsの機
悪いフォームUIを作った話
TL;DR こういうUIを作ってみました demo: https://bad-form.vercel.app/ source: https://github.com/miyaoka/bad-form いかがでしたか？ 経緯 世の中の「良いUIを作ろう」という風潮に身をかわし、頭のネジを外してUIデザインをしてみましょう。 新しいなにかが見えるかもしれないし、見えないかもしれません。 こちらの「イカれたUIを作ろうの会」というタイトルに惹かれて、そこでの発表用になんか作ってみようと思いました 以前にこういうのを作ったことがあるのでまあそういうノリで考えていたんですが… 今回のお題は「とあるセミナーのアンケートフォーム」 指定のタスクは「ユーザーがアンケートを送信できること」です。 お題が指定されていたのでフォームUIに向き合うことにしました 悪いフォームとは？ 大きく分けて3つあると思います
Testing | Next.js
Examples Next.js with Cypress Next.js with Playwright Next.js with Jest and React Testing Library Next.js with Vitest Learn how to set up Next.js with commonly used testing tools: Cypress, Playwright, and Jest with React Testing Library. Cypress Cypress is a test runner used for End-to-End (E2E) and Integration Testing. Quickstart You can use create-next-app with the with-cypress example to quickl
AWS Amplify ConsoleでSSRアプリの複数環境（Multi Environment）を作ってみよう - 前編 - NRIネットコムBlog
はじめまして、古田です。アプリ中心にシステムアーキテクト的なお仕事をしています。 先日、Amplify ConsoleのSSR(Server Side Rendering)アプリ対応が社内で話題になっていました。そこで今回は、Amplifyって何？という方にも解るようにAWS Amplifyの概要の説明と、実際のアプリ環境を例にAmplify Consoleという機能にスポットを当ててご紹介したいと思います。 （そしてさらに、新機能を用いてSSRアプリの構築を試していくのですが、長くなってしまったのでそちらは後編で続けたいと思います。） AWS Amplify について 開発 配信 管理 Amplify Console でできること フロントエンドの自動ホスティング バックエンドの自動構築 ポイント まとめ AWS Amplify について Amplifyはモバイル・ウェブアプリ向けの開発
次世代バンドルツールの競争の今 Turbopack vs Vite - GMOインターネットグループ グループ研究開発本部
こんにちは。グループ研究開発本部 次世代システム研究室のH.Oです。 生産的なアプリケーション開発において欠かせないものの一つにフロントエンドのJavaScriptバンドルツールがあります。 これまで、長年に渡ってJavaScriptのバンドルツールはwebpackがデファクトスタンダードとなり、Next.jsやNuxt.jsなどフレームワークにもデフォルトで組み込まれていました。その高機能性と安定性から現在も多くのWebサービスで利用されています。 一方で近年、webpackに続く次世代バンドルツールの開発競争が大きな注目を集めています。その中で特にwebpackに取って代わる勢いを見せているものにViteとTurbopackがあります。これらは、開発するアプリケーションの肥大化に伴って処理が遅くなってしまうwebpackの問題点を解決することが主要目的となっています。 今回はViteと
過去のTweetsを全文検索できるmytweetsをBlueskyに対応した。自分用Twilogみたいなもの 以前TwitterのTwilogの代替えとして、mytweetsというツールキットを作りました。 自分のTweetsをインクリメンタル検索できるサービス作成キット と Tweetsをまとめて削除するツールを書いた | Web Scratch azu/mytweets: Search all your tweets. 今回、mytweetsをBlueskyにも対応させました。 合わせて、Vercelで動くようにしたりとか色々変更したので紹介します。 特徴 TwitterのTwitter archive dataをインポートできます 全部の履歴を取り込めます。 TwitterとBlueskyをサポートしています。 アーカイブからの差分をAPIを使って取得して、常に全部のTweetsをま
お財布に優しい個人開発の戦略 - spaces.bzの場合
こんにちは。asatoです。 Qiita Advent Calendar 2021 個人開発 3日目の記事です。 みなさん、今日も楽しく個人開発やってますか？？ 個人開発は「楽しい」し「スキルアップ」できるし「夢（収益が出れば...）」もありますよね！ 2021年9月、僕は友人とふたりでspaces.bzをリリースしました。 合言葉は「なるべく無料で...」。 そう、個人開発には潤沢な資金はありません！リリースしたはいいけどランニングコストだけかかって全然使われないは避けたいのです！ 実際、spaces.bzは2021/12/3現在、支出は最初のドメイン代の3,000円のみです。 一方で、PV数は12000+/月、Twitterボットのフォロワー数は1,000+、それなりに利用してもらっているサービスになりました🎉 この記事では、spaces.bzがランニングコスト０で運営するためにとっ
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40％削減、ローカルサーバ起動の高速化など性能向上
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40％削減、ローカルサーバ起動の高速化など性能向上 Reactベースのサーバサイドフレームワークとして知られるNext.jsの最新バージョン「Next.js 13.5」正式版がリリースされました。 使用メモリの削減、ローカルサーバの起動高速化などの強化が行われています。 Next.js 13.5 22% faster local server startup 29% faster HMR (Fast Refresh) 40% less memory usage Optimized package imports `next/image` improvements And over 438 bugs patched!https://t.co/edW10gB19X — Vercel (@vercel) Sept
Next.jsのIncremental Static RegenerationをVercel以外でやってみる - Sweet Escape
本記事はNext.js Advent Calendar 2020の9日目です。 tl;dr Vercel以外でもIncremental Static Regenerationは可能 試した範囲ではフルに機能するのはコンテナで動かした場合のみ AWSのサーバーレスで動かすのは現時点で絶望的 はじめに 早速ですが、みなさん、次世代のStatic Site Generation（SSG）と言っても過言ではないIncremental Static Regeneration（ISR）はご存知でしょうか。 一応知らない人のためにすごく簡単に説明をすると、『リクエストに対して静的にビルドされたページを返しつつ、有効期限が過ぎたら非同期で静的ページの再生成をSSRで行う』っていうものです。Cache Controlにおけるstale-while-revalidateと同じような考え方が適用されたものとも言
#metaをのぞいてみると、より詳細な記録が残っている。だいたい1年おきに当時興味のあったフレームワークを学ぶために作り直していたが、ここ2, 3年は使い慣れたRubyでフルスクラッチしたシステムで落ち着いていた。だけど、ここにきて今回興味のあったNext.jsを学ぶために作り直すことになった。 途中でブログサービスなどに投稿していた記事をインポートしたり、ドメインを移したり、リポジトリを分割したり統合したりしながら、今のブログに至る。 ブログというのはWebフロントエンドのフレームワークを学ぶためのお題として実益も兼ねていて気に入っていて、今後も何度も作り替えるんだろうなと思っている。 ReactやNext.jsは以前から触っていたためだいたい理解していたが、Next.js v13.4で導入されたApp Routerであったり、最近のReactについてキャッチアップできていなかったことが
Vercel Analytics: Real-time Insights, Peak Performance | Vercel
Better insights. Peak performance.Upgrade your post-launch workflow with actionable insights, then experiment until you reach peak conversion rates.
スタンフォード大学の研究者であるVarun Shenoy氏が、入力した文章に含まれる人物や固有名詞間のつながりをナレッジグラフ化するAI「GraphGPT」を開発しました。GraphGPTはOpenAIが開発した自然言語処理モデルのGPT-3を使用しており、構造化されていない自然言語をグラフに変換するとのことです。 GraphGPT https://graphgpt.vercel.app/ GitHub - varunshenoy/GraphGPT: Extrapolating knowledge graphs from unstructured text using GPT-3 https://github.com/varunshenoy/GraphGPT Can LLMs extract knowledge graphs from unstructured text? Introduc
こんにちは。sumirenです。 イントロダクション 先日、Twitterで以下のポストが話題になっていました。 一部曖昧なところもありますが、推測と動作検証結果も交えて要約すると、以下のことを言っています。 VercelがホスティングしているWebサイトは、エッジでのサーバーサイド処理を行うことをやめた Next.jsに関して、VercelでPPR(Partial Prerendering)を利用した場合、サーバーサイド処理はNodeランタイムで行われる この記事では、このポストに絡めて、PPRとエッジに関する筆者なりの所感や解説を述べていきます。この記事の大部分はポエムですが、一部、技術的な事実についても述べるつもりです。そうした部分について誤りがあればご教示ください。 Vercelがエッジでのサーバーサイド処理を行うことをやめた件について エッジの効能 そもそもエッジに期待していたこ
PWA Night vol.59 ～フロントエンド設計の振り返り〜 (2024.01.17) https://pwanight.connpass.com/event/306410/ で使用したスライドです。本編 20 分。 ===== ▼ 元データで参考リンクとして張っていた URL たち ※ SpeakerDeck でダウンロードできる PDF はスライド中のリンクが有効です Offers「オファーズ」 - エンジニア、PM、デザイナーの副業・転職採用サービス プロダクト開発組織/エンジニアリング組織のマネジメント・パフォーマンス最大化 | Offers MGR（オファーズマネージャー） turbo/examples/basic at main · vercel/turbo Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offe
文化祭のIT化に取り組んだ話
こんにちは、eno1220です。 この記事では、私の所属する学校で行われた文化祭のIT化への取り組みについて紹介します。文化祭実行委員会等でIT系を担当する方などの参考になればと思います。 文章力がないため読みにくい箇所もあるかと思いますが、最後まで読んでいただけると嬉しいです。 記事の内容や記事中で紹介するソフトウェアに関して質問がある場合は、コメント欄や私のTwitterのDMへお願いします。 1.公式webサイト 1-1.制作までの流れ 昨年の文化祭 昨年実施された文化祭では新型コロナ感染症対策のため、クラス劇や有志発表を行う体育館への最大入場者数を全校生徒の半分に制限しました。体育館へ入ることのできない生徒に対しては映像を配信することになり、文化祭実行委員会（以下、実行委員会）から私（eno1220）の所属するパソコン部に担当の依頼がやってきました。 色々なことがあった結果、映像配
高校生がAI作品に特化した画像投稿サービス「Aivy」を個人開発した話 | SolidJS & Supabase & Cloudflare
こんにちは だだっこぱんだと言います。だだっこではないです。 今回は初めてしっかりした個人開発をしたので、技術的な部分についていろいろとお話しします。 つくったもの Aivy というAI作品に特化した画像投稿サイトを作りました🍃 👇よかったらこれ拡散してくれるとうれしいですの ScreenShot ホーム画面 投稿ページ ユーザーページ 検索 投稿管理 なにこれ AI作品に特化した画像投稿コミュニティサービスです。 ただ画像を投稿するだけでなく、プロンプトやモデル等のAI画像生成に使う情報を一緒に投稿できます。 この記事では この記事では技術面にフォーカスしてお話しします。 どうして作ったの？ とかその辺の話は下記リンクのNoteにまとめてありますので合わせてご覧ください。 開発体制 メンバー ぼく(高校生) 開発フロー 完成まではゴリゴリローカルでした。タスク分けとか何も管理しません
独学で未経験のモダンな技術を学習してポートフォリオを作るまで【Rails / Next.js / AWS / Docker / GitHub Actions】 - Qiita
独学で未経験のモダンな技術を学習してポートフォリオを作るまで【Rails / Next.js / AWS / Docker / GitHub Actions】RailsAWS初心者個人開発Next.js はじめに こんにちは！きいな(@keynyaan)と申します。 今回、モダンな技術を使って初めてポートフォリオを作ってみたので、開発背景や学習教材などを紹介します。 ポートフォリオを作るにあたって、色々な方の素晴らしいポートフォリオ作成記事が参考になったので、今度は私の記事が誰かのためになることを祈ってます。 自己紹介 大学卒業後、新卒でSIer企業に入社し、3年ほどJavaやJavaScriptなどを使って、バックエンドやフロントエンドのシステム開発を行っていました。 そんな私が自社開発企業に興味を持ち、退職を機に、2023年1月からポートフォリオ作成に向けて学習を始めました。 学習期間
Server Actions が Next.js 14 からStableに！古参フロントエンドが消失しないために知っておくこと
思い出します2年前・・・ VTeacher所属のSatokoです。 フロントエンドエンジニアとバックエンドエンジニアを兼任しています。 定番なテクノロジーと少しだけGeekなテクノロジーを組み合わせた選定が好みです🤤 Next.js Conf 、朝まで大忙しでしたね。 （ねむい・・・） Server Actions の一般的な誤解 まず最初に、SNSで話題になっている Server Actions に関する一般的な誤解についてです。 (1) 生のSQLが書かれているというアンチパターン？🤔 一部のサンプルコードでは、生のSQLを直書きしているところがあります。 しかし、以前のプレゼンテーションでも述べられているように、 React Server Component や Server Actions で、この書き方を推奨しているわけではありません。 あくまで「こんなこともできるようになっ
はじめに 自己紹介 こんにちは、株式会社ソーシャルPLUSのフロントエンドエンジニア @zomysan です。 ソフトウェアエンジニアとしての経験は10年と少しで、趣味は個人開発と食べることです。直近では Discord の読み上げ Bot「shovel」のWebインターフェイス（マイページ）機能・有償プランなどを作りました。 この記事について 個人開発でタイピングゲームを作ったので、それについて前半・後半に分けて話します。 前半では作ったタイピングゲームの技術選定の理由や 何を大事にして作ったのか？ ということを紹介します。 後半は今回の開発を実例として、私が開発をするときの進め方について紹介します。誰にでも合うものではないかもしれませんが、少しでも参考になれば嬉しいです。 ゲームの紹介 tstt で遊びながら学ぼう！ TypeScript Touch Typing 略して tstt と
2024 年 5 月現在だと Next.js のドキュメントには明示的な記載がないが、「同時に実行可能な Server Action は常に１つだけ」という件について。 実は自分もこれをちゃんと認識しておらず、先日会社の先輩に教わって初めて知ったので、試したことなどを書き残しておく。 Next.js の場合、App Router (Router Reducer) によって、Server Action の実行が直列化 (キューイング) されるようになっている。 このキューイングの挙動を考慮すると、以下のような呼び出し方は危ういコードとなる。 "use client"; import { useState } from "react"; import { increment } from "./actions"; export default function Page() { const [
はじめに 2022 年 9 月 22 日、Vercel の DevRel である Steven Tey 氏が dub.sh という短縮 URL 生成サービスを公開しました: 裏側は Vercel の Edge Functions + Upstash Redis という組み合わせらしいのですが、サイトを訪れた際の第一印象が心地よかったため、なんとなく自分も手を動かして URL shortener の簡易版を作りたくなってしまいました。ただ、まったく同じ構成で作成しても面白くないため、自分があまり触ったことがない技術を使うという縛りを設け、Edge 環境として Cloudflare Workers を、データストアとして Workers からアクセス可能なキーバリューストアである KV を、そしてルーティングを手軽におこなうために Hono を使用して実装しました。以下では、その実装の概要をチ
Next.js App Router TrainingIntroducing various basic patterns of app router with simplified code.
Next.js と React-admin を使って簡単な管理画面を作成するチュートリアルをやってみた | DevelopersIO
Next.js 初心者が React-admin を使って管理画面作成に挑戦しています。今回は React-admin 公式ドキュメントにある、Next.js Integration のチュートリアルをやってみました。 はじめに こんにちは、筧(@TakaakiKakei)です。 最近、Next.js と React-admin を使って管理画面作成に挑戦しています。 今回は、React-admin の公式ドキュメントで用意されている、Next.js Integration のチュートリアルをやってみたので、その内容についてご紹介します。 React-admin - My First Project Tutorial 前提 予め、今回の出てくるキーワードについて概要をおさらいしましょう。 Next.js とは Next.js by Vercel - The React Framework
Vercel PostgresがどうやってEdge RuntimeでORMとコネクションプールを使えるようにしているのか
TLTR 実行時にNeon serverless driver(@neondatabase/serverlessモジュール)がnode-postgres(pgモジュール)内のSocketクラスをWebSocket実装に置き換える WebSocket接続を受けたneon.techサーバーがTCP接続に変換してPgBouncerに接続し応答する Neon serverless driverの解説記事が以下にあります。 Edge RuntimeでNode.jsのSocket APIがサポートされていない問題 Node.jsのORMライブラリはPostgreSQLへの接続にnode-postgresからSocket APIを呼び出しますが、Edge Runtimeは互換性の問題からそのままでは動作しません。 これに対して、各マネージドDBのプロバイダーは専用ライブラリを提供してHTTP経由でDBに
workspaceを使ったコマンドを最適化して実行するTurborepoについて | サイボウズ フロントエンドエキスパートチーム
今年からフロントエンドエキスパートチームでは活動内容の一つである探求の一環として、メンバーが気になった技術に対して、気軽に触ってみる会をしています。次の画像は筆者が Slack で、気軽に触ってみる会の開催を宣言してる時のものです。 今回は去年の 12 月に Vercel に買収されたニュースがあった Turborepo を気軽に触ってみました。 個人的には 1 人で調べるときよりも複数人でわいわい調べた方が、その技術や関連する周辺知識の話を色んな人の観点で深掘ってできて、とても有意義な時間でした。 概要 Turborepo はモノレポのためのビルドシステムで次のような特徴があります。 Yarn, npm, pnpm の workspaces に対応してるリポジトリに対して簡単に導入できる workspace 内のコマンドの依存関係をシンプルに設定してくれる Turborepo で実行する
どうも、まさとらん（@0310lan）です！ 今回は、GitHubのプロフィールページを自分好みにカスタマイズできるウィジェットやツールなどを厳選してご紹介します！ 統計情報の可視化、グラフ、ブログの更新、アナリティクス、自動化…など、幅広く役に立つものをまとめています。無料で使えるツールばかりなので、ご興味ある方はぜひ参考にしてください！ ■独創的なコントリビューショングラフの作成！ GitHubでの活動状況を可視化してくれるコントリビューションのグラフは、当然ながらプロフィールページにも表示できます。 ただし、見た目はどのユーザーも同じなので、自分のプロフィールページを訪問してくれた人にちょっとでも印象に残るようなグラフを埋め込んでみましょう。 例えば、コントリビューションを「スネークゲーム」のように表示することができます！ グラフのドットを、ヘビが少しずつ食べていくという楽しい仕掛け
Next.js 12.3
We've shipped some quality-of-life improvements to Next.js with 12.3: Improved Fast Refresh: .env, jsconfig.json, and tsconfig.json files now hot reload. TypeScript Auto-Install: Add a .ts file to automatically configure TypeScript and install deps. Image Component: next/future/image is now stable. SWC Minifier: Minification with the Next.js compiler is now stable. New Router + Layouts Update: Imp
追加の記事を作成しました。 ※ 混乱させるかもしれないので一応、ところどころamplifyって出てきますが、apiの作成にamplify使っているだけで、デプロイとかにはホスティングにはamplify使ってないので。わかりにくくてすみません。 ※現状では、bucketRegionを指定すると、エラーになってしまいます。 https://github.com/serverless-nextjs/serverless-next.js/issues/1111 解決済み serverless-next.jsでISRに対応したNext.jsをデプロイのサポートが！ついに！ つい先日こちらのプルリクがマージされてました。 まだα版ではありますが。 ということで、やってみました！ 結論躓くことなくうまくいきました！ Vercel使わずにも生きていけるかも！ 実際に試した構成 serverless-nex
Vercel * Astro を使った開発を行い気づいた点を共有します。
個人開発のWebサービス構成（2021年）
/ kyokomi note / blog個人開発のWebサービス構成（2021年）January 10, 2021 [Go | Web | 個人開発]※2021/1/5時点の構成次回変更時に振り返ることができるようにしておきたいと思ったので、変更点をまとめておくことにした。 Next.jsを使うようになった流行りの？Client側とSSRでハイブリットな感じにした。SPA特有の面倒くささがなくなったの一番の感動。 もともとは React + Redux-Toolkit でSPAして、FirebaseFunction でogp対応的な感じだった。 モチベーションAPIサーバー（Go）も自分で書くため、swaggerを元に生成したtypeをReduxのStoreとして再定義して管理みたいな感じになっており、面倒だな〜と思いつつやってたが、静的なページは getStaticProps や ge
目次 Next.jsの概要 Next.jsを使うべき5つの理由 Next.jsを使う上での問題点と解決法 まとめ -1. 宣伝 本記事を元にしたNext.jsの入門書、『基礎から学ぶ Next.js』を出版いたしました！ モダンJavaScript/TypeScriptの書き方からNext.jsの概要、さらに最新のReact 18/Next.js 13の内容までカバーしています。ハンズオンも豊富にあり、実際に手を動かしながらNext.jsでのアプリケーション開発を学べる内容になっています。 ハンズオンのコードは以下のリポジトリにあります。 0. TL;DR Next.jsはモダンかつ強力なフロントエンドフレームワークで、様々な長所を持っています。本稿の目的はそうしたポイントをご紹介し、Next.jsの利用を勧めることです。 1章ではまずNext.jsの概要について簡単にまとめます。 2章で
にじさんじやホロライブの実況配信で盛り上がったところを自動で時間指定再生してくれる「無限にじさんじ配信自動切り抜き再生機」
生身の姿ではなく、2次元のイラストや3DCGモデルのアバターを使ってゲーム実況などの配信を行うバーチャルYouTuber(VTuber)の活躍は著しく、一説には1万3000人を超えるほど多くのVTuberが活躍しています。しかし、そんなにたくさんのVTuberを追いかけるのはほぼ不可能。ホロライブやにじさんじなどの大手グループだけに絞っても、何十人もいるVtuberの配信をチェックするのはかなりの労力を要します。 laisoさんが提供する「無限にじさんじ配信自動切り抜き再生機」は、にじさんじやホロライブのVTuber(ライバー)の配信でコメントが盛り上がった部分を自動で時間指定したうえで、文字通り無限に表示してくれるので、配信のチェックがはかどります。 無限にじさんじ配信自動切り抜き再生機 https://abbr.vercel.app/ プロトタイプができました ???? 無限にじさんじ
ぶっちゃけます、これはわりと真実なのですが朗報です。しつこく言ってるけどあまり大きな声で言えないのですが危険です。本当に悔しい。なんと、クソアプリカレンダー 6日目を担当します。今年が ５回目の参加です。 これまでに作ったものはこのようなものです。 この世の真実 僕はTwitterでこの世の真実を学びました。どうやら未経験から３ヶ月で年収１０００万を達成するには、適当な会社に入り込んで適当に箔をつけたらフリーランスに転向すると良くて、飽きたら外資転職して働くとのびのびと働きながら高給にありつけるようです。あとプログラマーは給料が安くて、ITコンサルにステップアップしたら良いと学びました。日本企業はダメらしいです。Twitterはとても学びがありますね。 あなたのSNSを加速させる魔法の言葉 ところで 9 月ごろに一世を風靡した「Twitter オススメ書き出し文１００選！」をご存知でしょう
フロントエンドのLinterやCIを改善した話
この記事は 株式会社エス・エム・エス Advent Calendar 2023 の21日目の記事です。 介護事業者向けの経営支援サービス「カイポケ」のリニューアルプロジェクトでフロントエンド開発をしている @hush_in です。 今年の4月にエス・エム・エスに入社しました。 入社してからフロントエンドのLinterやCIを改善した話をします。 忙しい人向けまとめ ESLint の recommended 系 extends を追加 全般 eslint:recommended plugin:import/recommended TypeScript plugin:@typescript-eslint/recommended-type-checked plugin:@typescript-eslint/stylistic-type-checked plugin:import/typescri
エッジ上の Cloudflare Workers で RDB からデータを取得してみる - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー15日目の記事です。 エンジニアの kenyu です。最近ウェブでもエッジコンピューティングが流行っていますね。AWS の Lambda@Edge や、ちょっと前に発表された Vercel の Edge Functions などなど、エッジでサーバサイドの処理をするのがトレンドになりつつあるのかなと感じています。 そこで気になるのは「RDB などのデータストアとどのように通信すればよいのか？」ということですが、先月 Cloudflare よりエッジから RDB に接続するためのソリューションが発表されました。 せっかくなのでどんな感じか試してみたいと思います！ 引用元：Relational Database Connectorsのご紹介 イメージはこんな感じ。tunnel ごしに Worker と RDB がつながるイメージですね。 今回は Clo
セキュリティ SaaS を「プログラマブル」に再設計した話 ― Shisho Cloud の正式リリースによせて - Flatt Security Blog
はじめに CTO の米内です。Flatt Security は、本日 2023 年 8 月 23 日、テック組織がクラウドのセキュリティを考える際の一歩目を支える SaaS 「Shisho Cloud」（シショウ クラウド） をリリースしました。 Shisho Cloud は、大雑把に言えば 「AWS/Google Cloud 上のリソースの設定がセキュリティ的に良さそうか、改善できそうかというのを検査してくれる製品」 です。 小難しい言い方をすると Cloud Security Posture Management（CSPM）の実現のための製品です。 我々がどんな背景で、どのような強みのサービスを提供するかが気になる方は、是非プレスリリースをご一読ください。 ただプレスリリースは、より広いオーディエンスに向けて書かれるという特性上、若干技術者の方には淡白に見えるかもしれません。手練の（セ
子ゃーんに喜んでもらいたくて、creative coding入門してp5.jsで色々作る練習してる。今はフワフワでキラキラな可愛いシャボン玉を表現しようと試行錯誤しています pic.twitter.com/qGeRYCelqh— すぎゃーん💯 (@sugyan) October 6, 2021 動機・目的 上記の通り、「子に喜んでもらえるものを作る」ことを目指す。 特にshort codingなどにチャレンジしたりはせず、またgenerative artのようなものよりはどちらかというと"触って遊べる"インタラクティヴなものを優先的に。 1歳半の我が子は最近はiPadの操作も慣れてきていて、幼児向けアプリなどで画面を指で触って楽しむことは出来るようになっている。複雑な操作はまだ難しいが 直感的に動かせるようなものなら楽しんでくれるのでは(という勝手な期待)。 …とはいえ 単純に自分が面白
SSRはおまいらには早すぎた 〜Next.jsのgetServerSidePropsの登場が何を意味するか〜 - Qiita
概要 Next.js 9.3から getServerSideProps という仕組みが導入されました。 上記がそのドキュメントですが、これを読んで感動した私はつい語りたくなってしまいました、私情が多分に含まれております、ああそういう視点もあるんだくらいに見ていただければと思います。 僕自身は、SEOをあまり気にしないいわゆるSPAっぽいWebページのNext.jsでの開発を1年ちょいくらい業務でやっていて、今もNext.jsユーザーです。 「getServerSidePropsって何が良いの？なんで生まれたの？」 「なんでgetInitialPropsは非推奨なの？」 「Vercel製のSWRってライブラリあるけど、あれ何？」 「てかgetServerSidePropsとSWRって関係あるの？」 この辺の疑問をお持ちのNext.jsユーザーの方は是非ご一読ください。 ※過剰な煽りタイトルで
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Webpack」より700倍高速な次世代バンドルツール「Turbopack」が登場
過去のTweetsを全文検索できるmytweetsをBlueskyに対応した。自分用Twilogみたいなもの
ブログをNext.jsで作り直した
AIで入力した文章から人物や固有名詞間のつながりをナレッジグラフ化してくれる「GraphGPT」が登場
VercelがPPRをNodeランタイムにした件からWebフロントエンドとエッジの動向に迫る
控えめな App Router と持続可能な開発 - PWA Night vol.59
Reactのコードを打ち込むタイピングゲームを作った話&個人開発の流れ
Server Actions の同時実行制御と画面の状態更新
Hono + Cloudflare Workers で URL shortener を作る
Next.js App Router Training
全部無料！GitHubプロフィールの究極カスタマイズツールを厳選してみた！ - paiza times
Vercelを使わずにAWSだけでNext.jsのISR対応!【serverless-next.js】
Astro の pros / cons
Next.jsを使うべき5つの理由 + 実装Tips - Qiita
ミュートされた超有料級の情報商材屋を救いたい。 - Qiita
creative codingに入門してみている - すぎゃーんメモ