指示したUIをAIがTailwindベースで実装してくれるv0が凄い
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
もうみんなプログラマーになれるよ｜shi3z
僕の20年来の親友にnpakaというプログラマーがいるんだけど、彼はもう超凄い。何でもすごい。何でも書けるし何でも早い。本を書くのもプログラムを書くのも、新しいわけわかんない説明書がバグだらけの環境に慣れるのも早い。 んで、これまではちょっとしたことも難しいことも全部npaka(布留川君)に頼んでたんだけど、最近二人とも独立したからつまんないこと頼むのは悪いなと思って「あれはできるんだっけ」くらいのことは自分で何とかしようかなと思った。 それでChatGPTに「Swiftで⚪︎⚪︎やるにはどうすんの?」と聞いたら、Swiftについてほとんど何も勉強してないのに作りたいものが何となくすぐにできてきちゃって、でもまあやっぱりChatGPTだと知識が古いので詰まったらネットで検索すると、だいたい結局npaka(布留川君)のページが出てきてやはり信頼と実績の大先生(仲間内ではそう呼ばれている)です
【W3Techs】2023年8月にWebで最も使われている技術はjQuery・Bootstrap・PHP・WordPress - Qiita
【W3Techs】2023年8月にWebで最も使われている技術はjQuery・Bootstrap・PHP・WordPressPHPJavaScriptランキングW3TechsQ-Success コンサル会社Q-Successは、World Wide Web Technology Surveysという分析サービスを提供しています。 なんかいかにもW3Cとかと関係ありそうな名前ですが、特に関係はないみたいです。 W3Techsでは、Webサイトを収集し、それらがどのような技術で作られているかといった調査結果を無料で分析・公開してくれています。 こんなに公開していて生計はどうやって立てているのかというと、過去の履歴や細かいレポートなどを有料で売っているみたいです。 6450ページのPDFとか細かすぎて逆に使いこなせそうにもなさそうですが、興味のある方は手を出してみてはどうでしょうか。 データを覗
Webサーバーアーキテクチャ進化論2023
はじめに 最近プログラマーとしてのキャリアに一区切りつけようと思っており、これまでのプログラミングの勉強の集大成となるブログを書きたくなったので書く。初めてプログラミングをして、フロントエンド開発をして、サーバーから値が返ってきたときは「どういう仕組みで値が返ってきたんだ？」と疑問に思っていた。ずっと理解したくて理解できていなかった。だからずっと勉強していた。そして最近になってようやく自分の言葉で説明できるようになった気がしたのでブログを書きたい。 2015 年版が自分の原点であり、この記事を書くモチベーションになった このような記事は実は過去に存在している。 FYI: https://blog.yuuk.io/entry/2015-webserver-architecture その記事はサーバーがどういう仕組みで動いていて、どのように進化し、2015 年に至るかを解説してくれた記事だ。自
動かして学ぶ！Vue.js開発入門 | 翔泳社
【Vue.js（ビュージェイエス）とは】 Vue.jsは、Webアプリ開発用のJavaScriptフレームワークです。 比較的小規模の開発から利用でき、さらにWebアプリ開発で主流になりつつある、 シングルページアプリケーション（SPA）を構築することもできるため、 Web開発で大人気のフレームワークです。 【本書の概要】 Vue.jsの基本機能を押さえたサンプルを元に、Webアプリ開発手法を学ぶことができます。 具体的には、ニーズの高い、データバインディング、イベント、ライブラリの利用、コンポーネントなど 開発の現場でニーズの高いトピックを中心に解説。 さらに現在、主流になりつつあるSPAの作成に役立つポイントも盛り込みます。 【ターゲット】 フロントエンドエンジニア初心者 【著者】 森巧尚（もり・よしなお） この世にパソコンが誕生したばかりの時代からミニゲームを作り続けて30数年。 現
シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita
開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
Firebaseを使い始めたら人生が変わった(ような気がした) - Qiita
最近、僕の周りでFirebaseを使った人たちは、 「サーバーの処理をFirebaseに置き換えたら、筋肉がつきました！」(29歳, 社会人) 「Firebaseを使ったら友達も増えてわっしょいわっしょい」(11歳, 小学生) 「もうFirebase無しじゃ生きられない」(38歳, エンジニア) 「にゃーん」(1歳4ヶ月, うちの猫) と言っていました。嘘です。 冗談はさておき、趣味で開発しているアプリのサーバーサイドをFirebaseに置き換えたらすごく良かったので、ずらずらと書いていきたいと思います。 Firebaseとは？ Firebaseは、Googleが運営しているmBaaSで、iOS/AndroidアプリからWebサービスまで幅広く使えます。 リアルタイム同期や豊富な機能が特徴で、サーバーサイドの開発コストを大幅に減らすことができます。 色々機能はあるのですが、今回僕が使った機
JSONをURIに埋め込んでも%地獄にならない「Rison」のススメ - Qiita
さくらのクラウドでバックエンドを担当しております、@townewgokgok と申します（記事はフロントエンド寄りの記事になります）。これは さくらインターネット Advent Calendar 2018 11日目の記事です。 JSONのように階層化された値をURLに埋め込みたいことってありませんか？ たとえば 価格.com の商品検索結果ページ のように、リンクを開いたら検索フォームの内容が復元されて、URLのコピー時に見ていたものがそのまま表示されて欲しい。 これを実現するには、従来なら文字列のキーバリューとしてごく一般的な application/x-www-form-urlencoded 形式でURLにパラメータを埋め込むところです（上記の価格.comの例でもやはりそうなっています）。ただ、そこそこ複雑な検索フォームの値をいちいちこの形式にまとめたり復元したりするのはわりと面倒です
10年モノのインフラを3年がかりでカイゼンした - Qiita
CI いちおうJenkinsが立ってました。失敗して赤くなってるジョブが大半で、かといって誰が治すわけでもなく、よくわからないけど失敗したり成功したり、とにかく不安定でした。 CloudWatchのメトリクスで眺めて、EBSのIOPSクレジットの枯渇から激遅になって、Jenkinsジョブのタイムアウト設定で失敗になる、まで明らかにしました。その時の対処は、IOPSクレジット上限サイズの1TBのSSDのEBSを付けることと、同時並行で動けるJenkinsジョブ数に上限を設けることで、落ち着くようになりました。 とはいえ「Jenkinsおじさん」問題があるので、CIをどうにか民主化する必要があります。SaaSから検討して、TravisCIとCircleCIが最終候補になって、トラブルシュートをSSHでできるのを決め手に、CircleCIを導入しました。 8月末にCircleCI1.0が死んだと
クライアントサイドのモデルとは何か 前編 ~ クライアントサイド MVC の死 - mizchi's blog
前置き この記事、本来は Flux には Model がないのではないかと思った覚書 - ナカザンドットネット と Flux の Store が ViewModel かって話からの MVW とかどうでもいいって話 - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く のアンサーとして書き始めた記事だが、前置きだけで別テーマとなったので、前後編に分割する。 僕は元々がゲームクライアント屋だったときの発想を引きずってるのと、既存の Web の開発の文脈に対して距離を置いていることを明言しておく。あとこういうテーマでとある原稿書いていたので、頭の整理も兼ねて。 ActiveRecord の功罪を振り返る このテーマを語るにあたって、まず Rails の MVC について述べなければならない。なぜなら、フロントエンドのアーキテクチャとは、サーバーサイドの MVC の模倣に始まり、破綻し、結果として
新メールドメイン「au.com」の提供について
No.2017-111 KDDI株式会社 沖縄セルラー電話株式会社 2017年8月22日 KDDI、沖縄セルラーは2018年4月以降、Eメールドメインを従来の「ezweb.ne.jp」から、よりauブランドと統一性のある「au.com」に変更します。なお、現在ご利用のメールアドレスは、2018年4月以降も引き続きご利用いただけます。 また、2017年秋冬モデル以降、より便利にEメールをお楽しみいただける「auメールアプリ」の提供を開始します。 新メールドメイン「au.com」について 1. 概要 新しくEメールアドレスを取得されるお客さま、Eメールアドレスを変更されるお客さまを対象に「au.com」ドメインの提供を開始します。既に「ezweb.ne.jp」ドメインを利用中のお客さまは、ご利用中のEメールアドレスを引き続きご利用いただけます。 さらに、法人のお客さま向けにご提供しているビジネ
すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ｜こんぴゅ
javascriptの開発では、sassやtypescriptなどのコンパイル、minifyやautoprefixerでの最適化、依存関係を解決しbundleするなど多様な工程があるので、属人化・職人依存を避けるためにタスクランナーでの自動化が昔から当たり前に行われています。 webpackはこの手のツールのデファクトです。webpackはタスクの自動化支援ではなく、なんでもjsにまとめるという仕事をうまくやる事に特化しています。gulpやbrowserifyで行なっていたようなタスクの自動化はnpm scriptで十分やん、という割り切りを感じます。 なんでもjsで扱えるようにするので、cssや画像やhtmlもjs内にロードでき、設定が煩雑になりにくくなります。 webpackのloaderという仕組みがjsへの組み込みや最適化をうまくやってくれるのですが、どういうものか検証していきまし
フロントエンドの負債と向き合う - mizchi's blog
某所で書いたものを公開用に書き直したもの 前提 フロントエンドでTDDは難しい、というかほぼ不可能である。なぜなら事前に副作用をデータとして表現できるか不明だからだ。たとえばあなたのプロダクトの画面の何処かにボタンを追加するために、その内部表現を事前に思い浮かべることが可能だろうか？ react-redux などのFluxフレームワークは如何に副作用をアクションとして表現することで、テスト・デバッグのための情報を残すか、という視点で発展してきた側面がある。あの冗長なアクション定義は、全てデバッグのために書いていると言っても、過言ではない。それすら「Textは文字がある」といったトートロジーなデータになりがち。 フロントエンドの現実的な単体テストは、他の開発者のために、自分が書いたコードの要求を満たしているか検知する手段として、防衛的にテストアフターしておく。これぐらいしか現実的な手法がない
選定した技術が1年で死んだ話 | そど
今年の夏頃から、特にサービスとして出すわけではなく、社内で使っているシステムのリプレースを行う事になりました。主な目的はレガシーすぎる設計をある低度モダンにする事、そして他のシステムと連携出来るようにする事、です。 対象のシステム 見積書や請求書などを管理・発行している。機能はそれなりに多いがUI操作はFormベース、テーブルタグで諸情報を表示するシンプルな物。ノンフレームワークで1画面1PHPファイルな古き良き時代のコード。おそらく10年ぐらい？稼働している。当初はPHP 5.1、PostgreSQL 8.x系だったが、現在はPHP 5.6とPostgreSQL 9.6で稼働しています。 その他の社内システム かつてはノンフレームワークだったり、太古のバージョンのCakePHPだったり、PHPが4系だったりしたが、概ねCodeIgniter 3系最新版 + PHP 5.6～7.1 + P
Caching Tutorial for Web Authors and Webmasters
for Web Authors and Webmasters This is an informational document. Although technical in nature, it attempts to make the concepts involved understandable and applicable in real-world situations. Because of this, some aspects of the material are simplified or omitted, for the sake of clarity. If you are interested in the minutia of the subject, please explore the References and Further Information a
【Chrome DevTools】「Provisional headers are shown」が表示される原因と対策
Chromeの開発者ツールを使ってリクエストヘッダを確認しようとしたところ、「Provisional headers are shown」と表示されているのみで、確認したかったヘッダの内容を表示することができませんでした。 このときの原因と対処法をメモしておきます。 原因が分かってしまえばあっけなかったのですが、「Provisional headers are shown」でGoogle検索すると別の原因が出てきて、この単純な原因を教えて貰えず困ったので。 目次 1. 「Provisional headers are shown」表示2. 原因3. 対策 スポンサーリンク 「Provisional headers are shown」表示 Chromeの開発者ツールで、ヘッダの内容を表示したところ、「Request Headers」に「Provisional headers are sho
最高のモックアップツールかもしれないBootstrap Studio - Qiita
1. モックアップツールって何使ってる？？ 2017年の11月くらいから、毎日コツコツと作っていたWebアプリケーションをなんとか完成しました （色々あってリリースはまだしていません...）。Webアプリケーションを作り始めるときに、はじめに「設計」と「モック」を作りました。 世の中に出ているモックツールのまとめ https://navi.dropbox.jp/mockup-tool https://www.mockplus.com/blog/post/webux-10 色々と調べた結果「Bootstrap Studio」が良さそうだったので、有料版を購入してみましたが、とても良く、Qiitaにもあまり情報共有されていなかったので、使ってみた感想などを、まとめようと思います。 2. Bootstrap Studioについて Bootstrap Studio https://bootstra
新QiitaでReactをやめてhyperappを採用した背景 - Qiita
12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない 学習コスト 仮想 DOM は学ぶ価値のある知識
［53選］国内注目のWebサービス・アプリを大調査！ プログラミング言語、フレームワーク、アーキテクチャの一覧【2017年】 - エンジニアHub｜Webエンジニアのキャリアを考える！
［53選］国内注目のWebサービス・アプリを大調査！ プログラミング言語、フレームワーク、アーキテクチャの一覧【2017年】 星の数ほど存在するWebサービスやアプリ。その裏側を覗いてみると、開発当時のトレンドや開発者の設計思想が見えてきます。53サービスのフレームワークやアーキテクチャ、開発効率化ツールを集めました。 国内だけでも星の数ほど存在するWebサービスやアプリ。その裏側を覗いてみると、開発当時のトレンドや開発者の設計思想が見えてきます。 今回は53サービス（追記を含む）のフレームワークやアーキテクチャ、開発効率化ツールを集めました。選定理由もお答えいただけたサービスについては、アーキテクチャを選んだ理由も紹介していきます。 C2C、コマース メルカリ、ココナラ、BASE、Tokyo Otaku Mode、STORES.jp、Snapmart、IQON 情報サービス グノシー、価
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GPUなサービスをそこそこな費用で運営する | Kai INUI
