Rust is a fast, reliable, and memory-efficient programming language. It's been voted the most loved programming language six years in a row (survey). Created by Mozilla, it's now used at Facebook, Apple, Amazon, Microsoft, and Google for systems infrastructure, encryption, virtualization, and more low-level programming. Why is Rust now being used to replace parts of the JavaScript web ecosystem li
next.js + vercel + firebase authentication で JWT の検証を行う + Graphql
今個人で作ってるアプリの 認証 + Graphql の部分を抜き出して GitHub に公開した。 mizchi/next-boilerplate-20200727 next.js + vercel + firebase は (パーツを良く選べば) 最高 next.js はルーティングを持つページを作るには最高で、サーバー、静的サイト、JAM スタック、AMP と必要に応じて選択できる。React ベースならこれ一択。 認証サーバーの実装は毎度疲れるし、Firebase Athunetication はこの点においては OAuth Secret を置くだけ + Custom Provider も作れるので、最高。 それと比べて firestore は、ちょっと前に firestore べったりでアプリを試作したことがあったのだが、型がないためにかなり扱いづらく、また読み書きの速度が遅くパフ
Rails MVCしか知らなかったバックエンド開発者が、最近のフロントエンド開発を学んで得た知見 - スペクトラム
これは、これまでRailsの古き良きMVCな開発体制しか知らなかったバックエンド開発者が、環境が変わってフロントエンド開発を学ばざるをえなくなった者の記録です。 歴史的に正しい事実を書いたものではなく、私個人の理解を整理するための妄想日記です。 私はこれまではWebアプリの開発ばかりやってきて、RailsでHTMLテンプレートエンジン使ってviewを作るスタイルでしか開発してきませんでした。 しかし、ネイティブフロントとWebフロント両方があるアプリケーションが開発されているところを見て、ある事を思いつきました。 「Webフロントもネイティブフロントのように開発できれば、バックエンドエンジニアはバックエンドに、フロントエンドエンジニアはフロントエンドに分業できて、開発しやすくなるのでは？」 この気付きが超重要でした。このイメージを持てたおかげでフロント開発の意義がスルスル入ってきました。
Fly.io に入社した - blog.8-p.info
3月の末から Fly.io という会社ではたらいている。 いわゆる Heroku のような PaaS なのだけど、 Cloudflare や Vercel のような、東京の人々には東京のサーバーが、ポートランドの人々にはシアトルのサーバーがリクエストをひろうので速い、というエッジっぽいことができる でも、そこで動くのは WASM や V8 Isolates ではなく、Linux コンテナなので Rails や Django も使える とはいえ Linux コンテナでマルチテナントを隔離するのは怖いので、なかでは Firecracker も使われている いわゆる3大パブリッククラウドのラッパーではなく、いろいろを自前でもっている という特徴がある。これはポジショントークになってしまうけど、WASM などでワークロードをつめこみたいというのは多分にプラットフォーム側の都合なので、エッジでもどこ
Render.comについて、日本語記事が全然なかったので紹介します。 (2021/08/01追記 使用感を追加しました) Render.comとは 様々なWebアプリをGitHub連携で簡単にデプロイできるPaaSです。 RailsのようなWebサーバーのデプロイ以外にも、静的サイトやバックグラウンドジョブ、またデータベースやスケジュール実行なども提供されており、よほど尖ったことをしない限りは大体のWebサービスはこれひとつでカバーできそうです。 またデプロイプレビュー、様々なミドルウェアのワンクリックデプロイなど、いろいろな便利機能が揃っています。 自分はBlitz.jsのデプロイ先として一番先頭で紹介されていたので知りました。日本だとほぼ知名度がないように見えますが、Twitterで検索してみると「次世代のHeroku」などと紹介されており、徐々に盛り上がりを見せているように感じます
CDNエッジでJS/TS/WASMを実行できる「Vercel Edge Functions」正式リリース。Node.jsサブセットを目指す
CDNエッジでJS/TS/WASMを実行できる「Vercel Edge Functions」正式リリース。Node.jsサブセットを目指す Next.jsの開発元であり、Webアプリケーションのホスティングサービスなどを提供するVercelは、CDNエッジでJavaScript/TypeScript/WebAssemblyを実行できるサーバレス基盤「Vercel Edge Functions」の正式リリースを発表しました。 Announcing Vercel Edge Functions: instant, cost-effective compute. JS/TS/Wasm Deploy functions close to your data and users 10x more cost-effective Streaming and Edge Caching Support for
Herokuの移行先を考える 今運用しているアプリ達をすぐにHeroku以外に移すということはしないまでも、競合となるプロダクトの調査をしておくことは(特に後発のものについては)機能面で実はこんなに便利なものがあったのか、と気づくことにもなったりするので、やっておいて損はないかと思いました。 比較対象について 比較する対象としては、インターネットで最近見かけるPaaSを選定しました。同様のことができるIaaSのコンポーネントとして、AWS FargateやGoogle Cloud Runがありますが、そのようなIaaSの一部として提供されるものについては今回は比較対象とはしません。 今回の比較対象は以下3つです。 Render https://render.com Railway https://railway.app Fly.io https://fly.io deployするRails
2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。 これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。 というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃♂駆け足で振り返ってみます。 （数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します） 🗓2023年1月 2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。 年が明けて2023年1月の主だった情報です。 🔼Nuxt 関連 2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision
2023 年 4 月 18 日にリリースされた Node.js v20 の主な変更点を紹介します。 nodejs.org ファイルのアクセスやプロセスの起動を制限する新しいパーミッションモデル (experimental) --allow-fs-read でファイルの読み込みを許可する --allow-fs-write によるファイル書き込み許可 --allow-child-process による child_process の許可 --allow-worker による Worker Threads の許可 Permission Model の参考記事 V8 11.3 による新しい JavaScript の機能 テストランナー（node:test）が stable に昇格 Single Executable Application JSON の config を使った Blob が必要に
Cloudflare Workers を活かしきるスタックを考えた(remix+d1 on pages-functions) + 残タスク
Cloudflare Workers を活かしきるスタックを考えた(remix+d1 on pages-functions) + 残タスク このスクラップ で試行錯誤していたまとめ。 最終形はここにアップロードした。 docs の下に、このリポジトリを生成した手順、セットアップ方法、リリース方法を書いてある。 (remix-validated-form や vitest のテストの追加でもうちょっといじるとは思う) なぜ cloudflare-workers + d1 のポテンシャルは最強で、近い未来、開発者|個人開発者の銀の弾丸になると思っているのだが、それを活かす開発スタックが知られていない(要出典)。この記事では GW の間に自分で周辺ライブラリを使い倒しながら選定していった。 2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを
Easily the biggest question we get asked is something like: How is Remix different from Next.js? It appears we have to answer this question! We'd like to address it directly and without drama. If you're a fan of Remix and want to start tweeting smug reactions to this article, we kindly ask that you drop the smugness before hitting the tweet button 🤗. A rising tide lifts all boats. We've been frie
Next.jsでSSRを限界まで簡単に実現する
OpenCVの新しい顔検出をブラウザでも試してみる
From Node to Deno
From Node to Denoby aralroca on Sunday, May 17, 2020 • 10 min read Last week I published an article about Deno, and how to create a Chat app with Deno and Preact. Since then, many doubts have arisen. Mostly of them are about how to do the same thing we did in Node, but with the new Deno ecosystem. I've tried to collect some of the most used topics in Node, and looked for their alternative with Den
[速報] サーバーレス実行環境である Cloudflare Workers のオープンソース化が発表されました！ | DevelopersIO
![[速報] サーバーレス実行環境である Cloudflare Workers のオープンソース化が発表されました！ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/1c4e9e28c189ba0da5e90990edaca836faea81b5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F06%2Fcloudflare-1200x630-1.jpg)
脱初級ITエンジニアまでの学習方法 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは。 株式会社ラクスで先行技術検証をしたり、ビジネス部門向けに技術情報を提供する取り組みを行っている「技術推進課」という部署に所属している鈴木（@moomooya）です。 今回は毎年春先の社内ビアバッシュで新人向けに「一歩目の学習方法」として発表している話をしようと思います。 学習とは この記事の対象 学習に対する向き合い方 まず最初は 学習作戦その1「ちょい足し学習」 例）HTTPメソッドを扱ったとき 学習作戦その2「外から情報を仕入れる」 よくある情報源 技術書 技術同人誌 ウェブサイト 勉強会 SNS 飲み会 GitHub 脱初級者 手を動かす（検証と実践） 自由にできるサーバーを用意する 情報発信 無理に全部やらなくていい エンジニアにとっての勉強 学習とは ［名］(スル) １ 学問・技術などをまなびならうこと。「学習の手引」「学習会」 ２ 学校で系統的・計画的にまなぶこと
【忙しい人のための】Next.js公式チュートリアルを完走してきたので記事１本で振り返る【ギュッと凝縮】 | DevelopersIO
本記事はNext.jsのチュートリアルが大きく変わったためリンク切れを起こしています。 技術メモのため記事としては残しますが、リンク切れにご留意ください。 また機会があれば新チュートリアルで記事を書こうと思いますm(_ _)m こんちには。 データアナリティクス事業本部 インテグレーション部 機械学習チームの中村です。 今回は以下のNext.jsのチュートリアルをほぼ一通り（SEOのところ以外）実施しましたので、ポイントを記事化しました。 https://nextjs.org/learn/foundations/about-nextjs" チュートリアル自体は、以下のような内容が分かるものとなっています。 CRA（create-react-app）のみ使用しているとイメージしづらい、素のHTML + JavaScriptとReactの関係のイメージが分かる Reactがフレームワークではな
Vercel
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約 はじめに 10 月 26 日に Next.js Conf が開催されましたが、それと前後して Kent C. Dodds (以下 kentcdodds と呼びます) と Lee Robinson (以下 leerob と呼びます) がそれぞれ という記事を公開しました。前者はタイトルの通り、Testing Library の作者であり、Remix の共同創業者の一人でもある開発者兼教育者 kentcdodds が、Next.js を使わない理由について述べたものです。そして後者は、Vercel の VP of Developer Experience である leerob が、主に前者に対する反論を述べたものです。筆者は両方の記事を公開後すぐに面白く読み、そしてどちらにも頷けるところ
I’m porting the TypeScript Type Checker tsc to Go, and not Rust. As the creator of SWC, an extensible Rust platform, this might sound strange. Let me explain. Why port tsc?# As TypeScript continues to rise in adoption, large projects are facing a dilemma: type checking is one of the slowest parts of their workflow. Developers want type safety without the tradeoff of slower iteration cycles. The Ty
Generate. Refine. Ship.Generate UI with shadcn/ui from simple text prompts and images.
普段使わないけど便利なWeb API 8選
MDNのWeb APIリストから、便利で、しかし普段のサービス開発ではあまり使われていない可能性のあるAPIを8個選びご紹介します。これらのAPIはあまり知られていないかもしれませんが、特定の状況や要件に対して非常に有効であることがあります。 Beacon API Beacon APIは、非同期でブロッキングしないリクエストをWebサーバーに送信するために使用されます。このリクエストはレスポンスを期待しないため、XMLHttpRequestやFetch APIを使ったリクエストとは異なりページがアンロード(ウェブページがユーザーによって閉じられるか、別のページに移動する際)される前にブラウザがビーコンリクエストを開始し、それを完了させることを保証します。 主な使用例としては、クライアント側のイベントやセッションデータをサーバーに送信するために使用されます。このAPIは、navigator.
Monorepo Explained
Everything you need to know about monorepos, and the tools to build them.- Made with love by Nrwl (the company behind Nx) Understanding Monorepos Monorepos are hot right now, especially among Web developers. We created this resource to help developers understand what monorepos are, what benefitsthey can bring, and the tools available to make monorepo development delightful. There are many great mo
Cloudflare、サーバレスの「Cloudflare Workers」とJAMスタックの「Cloudflare Pages」を統合へ
Cloudflare、サーバレスの「Cloudflare Workers」とJAMスタックの「Cloudflare Pages」を統合へ Cloudflareは、同社のエッジデータセンター上で提供している2つのサービス、「Cloudflare Workers」と「Cloudflare Pages」を統合することを明らかにしました。 Pages vs. Workers -- what are you choosing? Soon, you won't have to! We're thrilled to announce that Pages and Workers will be merging into one unified experience, giving you the best features and DX of both worlds. Learn more https:
分散SQLiteを実現する「LiteFS」にスナップショット機能によるディザスタリカバリを提供する「LiteFS Cloud」、Fly.ioが発表
分散SQLiteを実現する「LiteFS」にスナップショット機能によるディザスタリカバリを提供する「LiteFS Cloud」、Fly.ioが発表 データセンターをグローバル展開し、アプリケーションプラットフォームサービスを提供しているFly.ioは、分散SQLiteを実現するLiteFSの付加機能として、バックアップとスナップショット、リカバリ機能などをマネージドサービスとして提供する「LiteFS Cloud」を発表しました。 LiteFS Cloud: now in preview. We love SQLite for distributed web apps! Introducing managed backups for LiteFS. Read more from Darla Shockley and @benbjohnson.https://t.co/nQxitx5x7d
作ったもの dApp を作る練習がてら Twitter っぽいものを Ethereum で作ってみた。ツイートする・グローバルタイムライン・プロフィール・フォロー&アンフォロー・フォロー&フォロワ一覧表示など簡易な機能しかない。 ブロックチェーンにツイートが書き込まれるので削除できない点は注意してほしい。 -> [追記1] EVMのstateは削除できるので保存されたツイート自体は消せる -> [追記2] ツイートの削除はできるが過去のツイートを過去のnodeから結構力技で掘り起こすこともできる(完璧なツイ消しは出来ない)。 デモページは下記。 使い方 当然 Ethereum の mainnet にデプロイできるほどのお金は持ってないので、testnet(ropsten)にデプロイした。rinkby や kavan など他にも testnet はあるが自分がテスト用の ETH を持っている
Zig で簡単な JSON パーサを書いてみた。
#include <stdio.h> int main(int argc, char* argv[]) { int i; for (i = 1; i <= 100; i++) { if (i % 15 == 0) puts("FizzBuzz"); else if (i % 15 == 0) puts("FizzBuzz"); else if (i % 3 == 0) puts("Fizz"); else if (i % 5 == 0) puts("Buzz"); else printf("%d\n", i); } return 0; } fn main() { let mut x = 1; while x <= 100 { if x % 15 == 0 { println!("FizzBuzz"); } else if x % 3 == 0 { println!("Fizz"); } e
これは何? React(Next.js)アプリケーションのテンプレートのための Design Doc React(Next.js)アプリケーションのテンプレートとして実装したリポジトリ shimpeiws/react-boilerplate-2022 の設計についてのDesign Docです SSR/ISRはせずnext exportしてStatic Fileを出力する構成です API Routesを使っていますが、API接続コードをローカルで動作させるためのもので本番動作させるためのものではありません Design Doc 本ドキュメントは実装したリポジトリの構成、ライブラリの選定理由など設計についての背景を示すためのドキュメントという位置づけです 「デザインドックで学ぶデザインドック」(https://www.flywheel.jp/topics/design-doc-of-desig
DeepLを使った大体無料の英語学習サイトを作った
作ったもの 経緯 今年の初めにQiitaでこんな記事を見つけた。 基本機能としては、 「ある質問に対して、日本語で意見を書く -> 英語で書いてみる -> 日本語で書いた意見に対するDeepLの回答を見比べる -> DeepLの回答を覚える -> DeepLの回答を自分で書いてみる」 という感じの流れ。日本語で言いたいことを自力で英語で表す時の実力とDeepLのそれなりに正しい英語を見比べることでそのギャップを埋めようという仕組みだ。 よく英作文や英会話を学ぶ時に市販のテキストなどを使って英文暗記をやることがある。英語の基本的な言い回しや表現のストックを増やすのが目的だ。しかしこのやり方だといざ自分が使おうと思った時に暗記したはずの言い回しが使えないことが多くないだろうか。原因は自分の思考から発せられる言葉に基づいた英文暗記ではないからだ。一般に個々人が日常でよく使う言い回しやフレーズには
CloudflareでもFastlyでもVercelでもDenoでもBunでもService Workerでも動く
Next.jsとAuth0で本管理サイトを作ってみた
Next.jsとAuth0を使って読んだ本を管理するサイトを作ったので使った技術等を紹介します。 github どんなサイトか？ まずは、どんなサイトを作ったのかを紹介します。読んだ本の管理を行うサービスで、主な機能は3つです。 Google Book APIに登録されている本を検索して本棚に保存できる 登録されていないなくてもアプリ内で新しく登録できる。 今まで本棚に登録した本の合計ページ数・本の高さ・本の重さを表示。1ページ当たり0.5g、0.15mmで計算します。 画面遷移 1.トップ画面 アプリのトップ画面。「アカウント作成・ログイン」ボタンを押すことでログイン画面に遷移します。 2.ログイン画面 Auth0を使ったログイン画面。認証方法は2種類あります。 Googleアカウントを使ったログイン メールを使ったログイン 3.ホーム画面 今まで読んだ本を管理する画面。最近読んだ本の表
Next.js + microCMS + VercelでJamstackなブログ付き個人サイトを作る - あなたとあなたの話がしたい
妻の歌人としてのブログ付き個人サイトをリリースしたので、技術的な観点をまとめておきたい。 Jamstack これがサイトの構成図で*1、最近流行りのJamstackというアーキテクチャで作ってみた。 Jamstackは、静的サイトジェネレーターを用いてCMS等で管理するコンテンツをビルド時にすべて取得して、ユーザーアクセス前に用意しておいたHTML、CSS、JavaScriptをCDN経由で配信することで、画面遷移が非常に速い優れたパフォーマンスのサイト構築を可能にする。 CMS更新時のWebhook通知で自動デプロイする仕組みを入れることで、開発者がソースコードを触ることなく、サイト編集者で完結したサイト更新を行うことができるため、ビジネスから趣味の活動まで、静的サイト開発・運用の手段として有力な選択肢になるだろう。 静的サイトジェネレーター Next.js, Nuxt.js, Gats
はじめに ひょんなことから React 公式ドキュメント日本語版のメンテナをやらせていただいています smikitky です。 この記事は、React 公式ドキュメントの翻訳作業が GitHub ベースでどのように行われているのかを解説したものです。ドキュメントの翻訳には色々な方法がありますが、React の現アプローチは非常に上手く行っていると個人的に考えています。部分的には似たアプローチを説明している既存記事も探せばありますが、少し詳しめに書くことで事前の不安を取り除き、「思ったより簡単そうだから、自分もあのライブラリのドキュメント翻訳をやってオープンソースに貢献してみよう」と思えるようになることを目標にしています。 想定読者は Git、GitHub、Markdown（ないし類似の軽量マークアップ言語）、および基本的な HTML の仕組みがわかる開発者です。何らかの静的サイトジェネレー
フロントエンドの消失 - または戦争が激しくなる話
React Server Components に感じたフロントエンドの消失という記事に端を発する一連の議論だが、実際この記事で書かれていることはそうだろうなと思う。話の流れとして誤ってる部分はないと思うし同意する。 この記事ではフロントエンドエンジニアとして、この件についての僕の見解を書く。もちろんフロントエンド（とは？）の総意ではない。 元記事と重複する部分多いが、そこは同じ問題を取り扱う以上避けて通れないため、ご容赦いただきたい。 同じ領域を取り扱ってる以上、開発戦争は激しくなる 様々な理由によりユニバーサルが求められている ※この記事でいう「戦争」とは、お互いの領域を食い合う開発が、活発化することを「戦争」と称しているだけです。それ以上の意図は全くございません 領域がかぶっている 最近のフロントエンド系ユニバーサルエコシステムは、たしかに PHP や Rails の領分を侵そうとし
"Web フロントエンド"の悲しみと明るい未来
next.js が vercel を提供して CDN からサーバーサイドでの処理までをワンストップに提供しているとか、 firebase がクライアントサイドでの SDK と Cloud Functions をなるべく一貫した体験で提供しようとしていることとか、あるいは今話題の React Server Component とかについて、フロントエンドの最前線がいったいどのような苦しみにあるか、理解できる人は実はあまり多くないのではないか、と僕は思っている。 それは何かといえば、絶望的なまでのサーバーサイド/バックエンドへの忌避感だ。「とにかくフロントエンド領域しか絶対にやりたくない」という人が沢山いるが、しかし一方フロントエンドで無理しないでサーバーを書くだけで楽になるようなタスクはいくらでもある(典型的には API たくさんアクセスするとか)。 そうしたときに、フロントエンドメインだが
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rust Is The Future of JavaScript Infrastructure
次世代Herokuと噂のRender.comで、Railsアプリをデプロイしてみる
RailsアプリをHerokuから移行するならどれがいいのか比較する | うなすけとあれこれ
Vue.js と Nuxt の 2023年まとめ
Node.js v20 の主な変更点 - 別にしんどくないブログ
ここまで簡単になったNext.js on Cloud Run
Remix vs Next.js
I'm porting tsc to Go
v0 by Vercel
EthereumでTwitterっぽいものを作ってみる
Design Doc for react-boilerplate-2022
GitHubのトレンドで振り返る2020年のJavaScript
SvelteKitが正式リリースされたのでtRPCとPrismaを使ってWebアプリを開発してみた
オープンソースドキュメント翻訳プラットフォームとしての GitHub (React 日本語ドキュメントの例)
【必見】これから学ぶべきTypeScriptフレームワーク 4選
2021年後半から2022年以降のソフトウェア業界（Web中心）の技術動向予想（ポエム） - Qiita