Ruby on Railsはどのように生まれ、発展してきたのか［前編］。作者DHH氏やコアチームが語る動画「Ruby on Rails: The Documentary」が公開
「1999年か2000年頃、私は37signalsというWebデザイン企業を経営していました。2人のビジネスパートナーとWebデザインを受注していたのです」（Fried氏） Fried氏は本業とは別に再度プロジェクトとしてオンライン書籍データベースの開発に取り組んでいました。開発はPHPで行っていたものの、Fried氏はプログラミングでつまづきます。 当時はまだStackOverflowのような技術的な質問に答えてくれる掲示板などなかった時代。Fried氏はブログに「誰かこの問題を解決する方法をご存じですか？」と書き込みます。 するとデンマークからメールが届きます。メールを書いてきたのがDHH氏でした。 「私は（37signals社の）Signal vs. Noiseというブログを以前から熱心にフォローしていました」とDHH氏。 「ブログで彼の質問を見て、私は『おお、この答えを知っているぞ
今すぐにNext.jsでフロントエンド開発 or Web制作を快適に始めたい方におすすめの簡単セットアップを紹介する
はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。 今回は、今をときめくフロントエンドのフレームワーク「Next.js」を使って、個人もしくは複数人のチームで快適にフロントエンド開発を行いたい方にオススメのセットアップを紹介します。 本セットアップを行うメリットは以下の通りです。 （自動formatが有効になる等）開発速度が増す （StylelintやEslintの静的解析により）不具合の発生や潜在的なエラーを防ぎやすくなる コードの品質と一貫性を保つことができる Next.jsを使いこなせれば、フロントエンド開発だけに限らず、ランディングページ（LP）など静的なWebサイトの実装を行うWeb制作にも有用です。 私自身、Webサイト1ページのコーディングが求められる際もNext.jsを使っています。本セットアップも簡単に終わるので、今すぐ始めたい方はぜ
こんにちは。こむろです。 今年の札幌の夏はハードモードだ（湿気と暑さ） この先生きのこるためにエアコンが投入されました。 はじめに クラウドネイティブなアプリケーションを設計・構築・運用している皆さんは、普段どのようにアプリケーションやインフラの更新作業を行っているでしょうか。 順次インスタンスやコンテナを切り替えていくRolling Update？それとも環境を複製してDNS Routingの切り替えによるBlue-Green Deploymentでしょうか。他にも様々な方法があるかと思いますが、今回もまたBlue-Green Deploymentにおける実際の現場で発生した事象について報告したいと思います。 あまりネット上にもこういった情報が出てこないようなのですが、皆さんこういった問題は軽々とクリアされているのでしょうか。自分がポンコツなだけなのかととても不安にかられるばかりです。
この記事では、日常行っているWebデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめてご紹介しています。 これらの新しいツールやサービスを利用すれば、これまで後回しにしていた面倒な作業も自動化し、生産性アップ、円滑なプロジェクト進行を実現できるでしょう。「もっと早く知っておけばよかった」と思わせてくれる便利ツールが揃います。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. デザインからコードへの変換ツール 4. Web制作お役立ちツール 5. プロトタイプツール 6. コラボレーションツール 7. アイコン素材パック 8. 面白ツール 新型コロナの影響で無料提供中のオンラインツール、サービスまとめ 現在新型コロナウイルスの世界的流行の拡大によって、無料提供されて
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説
CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。 最近のWebサイトで使用されている、CSSの比較関数 min(), max(), clamp() の便利な使い方を紹介します。 Use cases for CSS comparison functions by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 比較関数の使用例: 流動的なサイジングとポジショニング 比較関数の使用例: 装飾要素 比較関数の使用例: 流体ヒーローの高さ 比較関数の使用例: ローディングのバー 比較関数の使用例: コンテンツの区切り線 比
レガシーシステムをDockerコンテナ化する場合に直面した4つの壁 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは。 株式会社ラクスで先行技術検証をしたり、ビジネス部門向けに技術情報を提供する取り組みを行っている「技術推進課」という部署に所属している鈴木（@moomooya）です。 ラクスの開発部ではこれまで社内で利用していなかった技術要素を自社の開発に適合するか検証し、ビジネス要求に対して迅速に応えられるようにそなえる 「技術推進プロジェクト」というプロジェクトがあります。 このプロジェクトで「WEBアプリケーションのDockerコンテナ移行」にまつわる検証を進めているので、その中間報告を共有しようかと思います。 本検証での想定環境 CIに不必要な部分は後回し 既存アプリでコンテナ化の障害になった部分 OSコマンドを利用している ミドルウェアとの密結合 オンライン系とバッチ系の密結合 ひとまず目指す状態 プロセス相乗りの影響 ログが複数出力される まとめ 続きの記事も書きました。 tech
この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを
WebSocketの次の技術！？WebTransportについての解説とチュートリアル - Qiita
概要 こんにちは。NTTコミュニケーションズのyuki uchidaです。普段はSkyWayというWebRTCプラットフォームの開発やWebRTCリサーチャー(見習い)をしています。 この記事は NTTコミュニケーションズ Advent Calendar 2020 の3日目の記事です。 昨日はMasaki Shimuraさんの記事、 「Threat Intelligenceの活用を促進するMISPの紹介」でした。 この記事は、WebSocketの次の技術ではないかと噂される、WebTransportの概要や双方向通信の歴史をまとめつつ、WebTransportのdatagram形式でデータを送信してみるチュートリアル記事です。 対象読者 WebTransportっていう技術を初めて聞いた人 WebSocketを使ったことがあり、不満がある人 双方向通信・リアルタイム通信について興味がある人
「State of JavaScript 2022」公開。利用率1位のフロントエンドライブラリはReact、レンダリングはNext.js、テストはJestなど、4万人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者3万9472人が回答したアンケートの結果をまとめた「State of JavaScript 2022」が公開されました（日本語訳版が同時公開されています）。 回答者の国別分布を上位5位までを見ると米国が11.9％、ドイツが5.2％、フランスが3.7％、イギリス（UK）が3.6％、そしてインドが3.2％。 言語別の回答者は、英語が69.6％、フランス語が3.4％、ドイツ語が3.1％、スペイン語が3％などとなっており、日本語での回答者は0.4％でした。 アンケートの結果は、ProxyやPromiseなどに関するJavaScriptの新機能がどのくらい使われているか、Service WorkerやWebGLなど新しいブラウザAPIがどのくらい使われているかや、人気のJavaScriptライブラリ、JavaScriptは正しい方向に進化していると思
YAPC::Kyoto 2023 2023-03-19 Yusuke Wada
vscode の web build を netlify にデプロイする + ファイルシステムを永続化する - mizchi's blog
年末年始の時間を使って実験していたこと。 tl;dr vscode をカスタマイズして静的サイトとしてデプロイしたい。やった。公式にない永続化層も作った。 できた。ここで試せる。 https://mizchi-vscode-playground.netlify.com/ やりたかったこと フロントエンドにまつわるものはフロントエンドで作業を完結したい。なので vscode がブラウザで動いてほしい。 vscode をカスタマイズしたものを各自が自由にデプロイできると、様々な可能性がある。インストールの手間を省いたプログラミング教育用のツールだったり、専用の開発環境だったり、その他諸々。 問題 この用途で期待していた vscode online が使いづらかった。MS のアカウントを要求されたり、Docker コンテナの Enviroment を作ったりする必要があり、面倒だった。そもそもリ
この記事の概要 サムネイル画像やユーザーアイコンなど、どんな画像が適用されるか分からない要素ってありますよね。 そんな要素に対して、視認性を確保するためにborderをひいてあるのによく遭遇します。 そのborderが時折ちらついて見えるのが嫌だったので、改善策を考えてみました。 完成物＆通常のborderとの比較 全体像はこちらです。 差がわかりやすそうな部分をクローズアップしました。 左の画像の草、真ん中の画像の右端にあるペンケース（？）、右の画像の机や天井など「borderの方が明るい箇所」が悪目立ちしているというか、ノイズに見えて気になります。 修正版がこちらです。 左の画像の空や右の画像の窓など、白く飛んでいる場所にだけborderが見え、それ以外の箇所は元の画像を活かしています。 CodePenはこちら。 仕組み <div class="adjusted-border"> <!
はじめに Next.js を Cloudflare にホスティングしようとすると、必然的に Edge Runtime 環境になります。しかし、Edge Runtime 環境では、Node.js Runtime と異なり、Prisma がそのまま使えません。 最初に思い浮かぶ解決策は Prisma Accelerate です。Prisma Accelerate は公式のサービスで、接続プールイングやグローバルキャッシュ機能を備えており、Edge Runtime でも Prisma を使えるようにします。 しかし、無料プランだと月に 6 万クエリの制限があり、本番運用には不安が残ります。 そこで、今回は Prisma Accelerate を自前で Cloudflare Workers 上に構築し、本番運用に耐えうるサービスを無料で開発する方法を紹介します。この方法なら、無料プランでも 月に
この記事は 「JavaScriptの勉強してたらみんなNode.jsの存在を前提に話が進む。でもNode.jsってWebサーバじゃないの？ なんでインストールしなきゃいけないの？ なんでみんな使ってるの？」 といった疑問を解消することを目的としています。 基礎：JavaScriptの特徴 まずはJavaScriptと他のプログラミング言語の違いを知っておく必要があるので解説します。 JavaScriptはChromeやFirefoxといった「ブラウザ上」で動作するプログラミング言語です。 対してPythonやRubyのような一般的なプログラミング言語は通常「パソコン上」で動作します。1 このことが生み出す違いは、OSの機能にアクセスできるかどうかです。 「OSの機能」とは例えばファイルの読み書きや、ネットワーク通信などの機能のことです。 パソコン上で動作するアプリケーション（Pythonや
自分が欲しかったから作ったシリーズ 説明しづらいので下記の動画を見たほうが速いです。 Shift を押している間だけオーバレイが有効になり、要素名をクリックすると vscode の該当行に飛びます。 今のところ vite + react のみの対応ですが、仕組み上、あらゆる UI フレームワークに適応可能です。 何が起きているか TypeScript transformer の仕組みで *.tsx の jsx 要素に data-sj-path="vscode://file/..." を付与する TypeScript AST は sourcemap 用の情報を持っている Node の parent を探索し、直近の関数コンポーネント名を探す Shift を押している間、 マウスでホバーされた要素が data-sj-path を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
アプリケーションが発行するSQLにコメントが埋め込めると便利です。例えば、 /* path/to/logic.go:334 */ SELECT ... のようにSQLに発行元の情報をコメントとして埋め込んでからExecすれば、DB側のログ(general log等)にも記録されるため、SREやDREサイドからも、負荷の高いSQLがアプリケーションのどこから発行されているかが分かりやすくなります。 Goには github.com/shogo82148/go-sql-proxy という、SQL実行をトレースし、フック処理を差し込める便利なライブラリがありますが、今回それにpull requestを送って、SQL実行前にクエリの書き換えができるようにしました。 https://github.com/shogo82148/go-sql-proxy/pull/61 https://github.co
Linux Daily Topics 2020年1月10日Don't use ZFS ―Linus、ZFSをマージしない姿勢をあらためて強調 「Don't use ZFS. ―ZFSは使わない。その理由はシンプルだ。ZFSはこれまでずっと、バズワード以上の何物でもなく、そして実感するのだけど、例のライセンシング問題は僕にとってZFSを価値のない存在と思わせるだけだ」 1月6日、IT業界に特化したオンラインメディア「Real World Tech」のフォーラムで繰り広げられたあるスレッドにて、Linus TorvaldsはZFSをメインラインにマージする予定がないことをあらためて明確に主張している。 Do not blame anyone. Please give polite, constructive criticism By: Linus Torvalds -Real World Te
jQuery 4.0.0 has been in the works for a long time, but it is now ready for a beta release! There’s a lot to cover, and the team is excited to see it released. We’ve got bug fixes, performance improvements, and some breaking changes. We removed support for IE<11 after all! Still, we expect disruption to be minimal. Many of the breaking changes are ones the team has wanted to make for years, but co
JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ
JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ 現在、モダンなJavaScript開発環境としては、ESLintに代表される構文チェッカーや、Babelに代表されるJavaScript変換ツール、モジュールを組み合わせるなどのバンドル操作を行うWebpackなど、さまざまなツールを組み合わせる、いわゆるツールチェインを用いるのが一般的となっています。 こうしたなかで、このツールチェインの機能をすべて備えた1つのツールでJavaScriptの開発環境を統一してしまおうというオープンソースのプロジェクト「Rome」が、昨年発表されました。 Romeでは、JavaScriptやTypeScript、JSXなどでの開発において、現時点で以下の領域をカバーする予定です。HTML、CSS、Markdown、JSONなどにも対
仕事でPythonコンテナをデプロイする人向けのDockerfile (1): オールマイティ編 | フューチャー技術ブログ
BusterとかStretchという名前が見慣れない方もいるかもしれませんが、これはLinuxディストリビューションとしてシェアの大きなDebianのコードネームです。 Debianバージョンが少し古いStretchの方がちょびっとサイズが小さかったりはしますが、まあ実用的にはサポートが長い方がいいですよね。slimを使ってGCCとかのコンパイラを自前でダウンロードしている記事とかもたまに見かける気がしますが、マルチステージビルドであれば、そんなにケチケチしなくていいのと、パッケージダウンロードは逐次処理なので遅く、処理系が入ったイメージのダウンロードの方が高速です。並列で処理されるし、一度イメージをダウンロードしてしまえば、なんどもビルドして試すときに効率が良いです。また、多くのケースでネイティブのライブラリも最初から入っており、ビルドでトラブルに遭遇することはかなり減るでしょう。 Py
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
OpenAPI Generator と TypeScript で型安全にフロントエンド開発をしている話 - SmartHR Tech Blog
こんにちは、SmartHR でフロントエンド開発を担当している @Tokky0425 です。 この記事では、私のプロダクトでの OpenAPI Generator を使ったフロントエンド開発の取り組みを紹介していきます。 目次 OpenAPI とは 「ラクラク分析レポート」の DX 上の課題 OpenAPI Generator とは 実際に generate してみる 生成ファイルを使ってみる 型情報を出力してみる 組み込み・運用の工夫 chokidar で監視する lint-staged に組み込む メリット・デメリット メリット デメリット まとめ OpenAPI とは OpenAPI とは、「REST API のドキュメントの記述形式を定めた仕様」のことを指しています。 簡単な例ですが、下記のような YAML ファイルがあるとします。 schema.yml paths: "/some
なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用 https://zenn.dev/coedo/articles/html-css-inline-element-block-level-element この記事では、『なぜインライン要素・ブロック要素概念は依然として有用なのか』という記事（以下「元記事」といいます）の説明について見ていきます。 この記事の対象者 この記事は、ウェブ制作を学んでいる人や、「インライン要素」「ブロック要素」という用語の扱いに困っている人を想定しています。 はじめに： 結論 この記事の結論は次の2つです。 今日のHTMLから「インライン要素」「ブロックレベル要素」という表記はなくなった。 ある要素にどのような要素を入れるのかは、「インライン要素」「ブロック要素」という考え方を使わなくてもできる。 詳しく説明したいと思います。
#React #フロントエンド #設計 #React プロジェクトのディレクトリ設計をもう5〜6年同じようなディレクトリ構造でやっている 1個のプロジェクトではなく複数のプロジェクトで全部同じような感じ それであまり困ったことがない のでどんな感じにしているかをメモしていく だいたい以下の構造で作る code:plaintext /src /api /domain /components /pages /utils （任意） index.tsx （任意） ルーターやフレームワークは（だいたい）問わない #Next.js だろうと React Router だろうと React Location だろうと関係ない #Redux を使ってようと #react-query や SWR を使ってようと関係ない 裏が Firestore でも #REST API でもやはり関係がない ……という程度
Hotwireの良かった点、辛かった点、向いているケース、向いていないケース - 猫Rails
（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇♂️） こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を追加できる 学習コストが低い 開発コストが低い WebSocketは必須ではない 辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違う He
No Bundle ツールの流行: vite / snowpack モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするためにメモリ上にファイルの実体と依存グラフを持っているが、これによりメモリと CPU を圧迫する問題があった。特に巨大なリポジトリではそれが顕著になる。 No bundle ツールの実装として vite と snowpack がある。 https://github.com/vitejs/vite https://www.snowpack.dev/ vite は使ってみた限り、更新時の差分ビルドが爆速で、明らかに体感が良い。 Vue
はじめに 概要 Apache Iceberg(アイスバーグ)とは [重要] Icebergの本質はTable Specである Table Spec バージョン Icebergハンズオン Icebergの特徴 同時書き込み時の整合性担保 読み取り一貫性、Time Travelクエリ、Rollback Schema Evolution Hidden Partitioning Hidden Partitioningの種類 時間 truncate[W] bucket[N] Partition Evolution Sort Order Evolution クエリ性能の最適化 ユースケース Icebergのアーキテクチャ Iceberg Catalog Iceberg Catalogの選択肢 metadata layer metadata files manifest lists manifest f
CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた
私はこれまで、 React ・ Next.js でのスタイリングには、CSS Modules + Sass を使っていましたが、最近は vanilla-extract を使うようになりました。TypeScript との相性が良く、長い間求めていた CSS 開発体験が実現できるためです。 vanilla-extract とは、CSS を TypeScript で型安全に書ける CSS in JS です。 State of CSS 2022 でも満足度が高く、先日は Next.js の appDir でも正式サポートされました。 本記事では、CSS Modules から vanilla-extract に移行した経緯と、そのメリットについて紹介します。 CSS Modules で限界を感じていた CSS Modules を使っていた理由はいくつかありますが、主に次のようなものです。 従来の C
blitz-js prisma rails 倒し方
この記事の内容 blitz-js が生まれた背景 prisma の紹介 blitz で簡単なブログを作ってみる blitz を vercel にデプロイしてみる tldr blitz-js は next.js + prisma で rails を再現しようとしているフレームワーク Prisma ORM それ自体が良い。blitz の理解のためにも、まず Prisma を学べ blitz-js 自体はまだ α 品質だけど、今から注目しておく価値はある。デファクトになるかは不明。思想は継承されそう。 はじめに next.js はとても良いフレームワークだが、永続層を持たない。なのでフロントエンドとフロントサーバーに閉じている。 永続層、つまり DB を持たないので、初学者や流行りのプログラミングスクールの教材に選ばれない。また、JavaScript の学習資料が散らばっている。 要は Rail
axios は v1.0.0 でどう変わるのか
概要 本記事は、HTTP クライアントライブラリである axios の v1.0.0 が満を持してリリースされたため、何がどう変わったのか、マイグレーションしても良いのかについて個人的に調べてまとめた結果になります。 TL;DR axios の v1.0.0 は、パッケージのモダン化に向けた節目としてのバージョンともいえる v1.0.0 では多数のバグ修正と、いくつかの小規模の機能追加がまとめて取り込まれた 破壊的変更や非推奨化は少なからずあるが、基本的な使い方や挙動を大きく変える規模の変更はない 一方で劇的に良くなる変化もないので、急いであげる理由もない 公式マイグレーションガイドは記事執筆時点では提供されていない axios について axios は、JavaScript 向けの HTTP クライアントライブラリの一種で、この種のパッケージとしては比較的古くから普及している老舗ライブラ
この雑記を書く問題意識は、Tailwind CSSに対して向けられている世の人々の不満が、Tailwind CSSがコミットしていることから外れた、お門違いの期待の押しつけになっているのではないかと感じるところにある。 ライブラリやフレームワーク、道具にはそれが作られた目的があり、果たそうとするコミットメントがある。その圏内において果たされていないコミットメントに対する不満は、それ自体の存在意義にかかわる意味を持つが、しかし利用者が一方的に寄せた期待が果たされないことに対する不満はそうではない。 念押しするまでもないと思うが、これはTailwind CSSに対して不満を向けるべきではないという話ではまったくない。むしろ、その不満の下敷きとなっている Tailwind CSS への期待が Tailwind CSS 自体によってコミットされたものでないとしたら、不満を向けてもしょうがないのでは
For modern real-time web applications, the ability to send events from the server to the client is indispensable. This necessity has led to the development of several methods over the years, each with its own set of advantages and drawbacks. Initially, long-polling was the only option available. It was then succeeded by WebSockets, which offered a more robust solution for bidirectional communicati
RubyがWebAssemblyのWASI対応へ前進。ブラウザでもサーバでもエッジでもどこでもWebAssembly版Rubyが動くように
RubyがWebAssemblyのWASI対応へ前進。ブラウザでもサーバでもエッジでもどこでもWebAssembly版Rubyが動くように Ruby言語のリファレンス実装、すなわち事実上の標準となっているRubyインタプリタはC言語で実装されています。そのため、このRubyインタプリタもしくはそのソースコードは一般に「CRuby」（もしくは、まつもとゆきひろ氏による実装という意味でMRI：Matz' Ruby Implementation）と呼ばれています。 CRubyのソースコードをコンパイルすることで、Windows対応Rubyインタプリタのバイナリ形式やLinux対応Rubyインタプリタのバイナリ形式などが生成されるわけです。 今年、2022年1月7日、このCRubyのソースコードに対する要望チケット「Proposal to merge WASI based WebAssembly
Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022
Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022 Reactベースのサーバサイドフレームワークとして知られるNext.jsの開発元のVercelは、日本時間10月25日深夜にイベント「Next.js Conf 2022」を開催。Next.jsの最新バージョンとなる「Next.js 13」と、Rust製の高速なバンドルツール「Turbopack」を発表しました。 Introducing Turbopack, the successor to Webpack. ~700x faster than Webpack 10x faster than Vite Native incremental architecture built with Rust Support f
もろもろの事情でDocker Desktopを使いたくなくなったため、Docker Desktop for Windows無しに、似たようなDocker環境をWindowsに構築する手順を確認しました。 (2021-09-05追記) 私はWSL2をDocker以外の目的で使用していないので気にしませんが、他の目的にも使っているという方は 「(おまけ) Docker用のディストリビューションを分ける」 を先に参照したほうが良いかもしれません。 (2022-01-29追記) Visual Studio Code (VSCode) に、WSL環境内の docker コマンドを直接使用できるオプションが追加されました。この機能を有効にすると、VSCodeからコンテナを使用するために一旦WSLに接続したり、Windows側にDocker CLIをインストールしたり、というステップが不要になります。詳
[旧版]クジラに乗った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)
Dockerコンテナをサーバレス化する「Google Cloud Run」で、非同期処理やバックグラウンドタスクなどが実行可能に
Googleは、Dockerコンテナをサーバレスで実行するサービス「Cloud Run」の新機能として、非同期処理などを可能にする「CPU allocation on Cloud Run」機能をプレビューとして発表しました。 非同期処理などが難しかったCloud Run サーバレスコンピューティングでは一般に、何らかのイベントやリクエストをトリガーにインスタンスが起動し、処理が終わるとインスタンスが終了します。 Google CloudのCloud Runではこうした処理をDockerコンテナで実現するサービスです。HTTPやgRPCなどによるリクエストによってあらかじめ用意されていたDockerコンテナが起動し、レスポンスを返したところでDockerコンテナが終了してCPUの割り当てが解放されるようになっています。 そのため、Cloud Runでは処理を非同期にしてレスポンスを先に返し、
React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話は無視して完全一致させる。そういう星のもとで開発している コンポーネントの分類 ロジックコンポーネント レイアウトコンポーネント ブロックコンポーネント インラインコンポーネント 定義 ロジックコンポーネント Provider や hooks などのデータ処理だけを扱い、子に渡すコンポーネント 一切の CSS や DOM 実体を持たない レイアウトコンポーネント レイアウトコンポーネントは複数の子ブロックコンポーネント(または slot)を持ち、子ブ
Headless CMSとは Headless CMSは、Wordpressなどとは違って本体のウェブサイトと管理画面が完全に分離されているのが特徴の CMS(コンテンツマネジメントシステム) です。 これを使うと、フロントエンドとCMS側が分かれるのでそれぞれを別の場所に配置することが可能です。 動的なコンテンツを表示することをサーバーを持たずに行うことが可能になるのが魅力です。 Micro CMSとは Micro CMSは国産のHeadless CMSです。 これまでのHeadless CMSというと「Contentful」が主流な気がします。 Contentfulは日本のサービスではないので英語が基本になりますが、Micro CMSはデフォルトで日本語に対応していたり、日本語でのチャットサポートがあるのが良いと思いました。 使い方 登録 上記画面の「無料ではじめる」または「新規登録」
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blue-Green Deploymentにおける注意点 | DevelopersIO
ウェブ制作がサクサク捗る！便利な最新オンラインツール37個まとめ
サイトの表示高速化につながる18のこと | knowledge / baigie
decoding="async" について詳しく調べてみる
どこでも動くWebフレームワークをつくる
自然に見える画像の枠線を求めて - Qiita
Next.jsとPrismaをCloudflareにデプロイして月300万のDBクエリに無料で耐える
Node.jsとはなにか？なぜみんな使っているのか？ - Qiita
React で展開された HTML 要素から vscode の生成元コードに飛ぶ 方法
GoでSQLにトレーシングコメントを埋め込んで実行する | おそらくはそれさえも平凡な日々
2020年1月10日 Don't use ZFS ―Linus、ZFSをマージしない姿勢をあらためて強調 | gihyo.jp
jQuery 4.0.0 BETA! | Official jQuery Blog
『なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用』という記事について
React プロジェクトのディレクトリ構成 - fsubal
Native ESM 時代のフロントエンドビルドツールの動向
Apache Iceberg とは何か - 流沙河鎮
Tailwind CSSの二面性、デザインシステムを借りるということ | Marginalia
WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport | RxDB - JavaScript Database
Docker Desktopに依存しない、WindowsでのDocker環境 - Qiita
コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)
国産Headless CMS 「Micro CMS」を試してみた - Qiita