[B! web開発] stealthinuのブックマーク

指示した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を作ってくれ

stealthinu 2023/12/03

これはだいぶ実用的ぽい。少なくともプロトタイピングはこれで作って良さそう。

リンク

GPUなサービスをそこそこな費用で運営する | Kai INUI

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

stealthinu 2023/09/24

DL系使ったサービスをやる場合に問題となるクラウドのGPUありサービスが高い件の対策。オンプレへの回帰…　でも圧倒的に価格安い。

リンク

もうみんなプログラマーになれるよ｜shi3z

僕の20年来の親友にnpakaというプログラマーがいるんだけど、彼はもう超凄い。何でもすごい。何でも書けるし何でも早い。本を書くのもプログラムを書くのも、新しいわけわかんない説明書がバグだらけの環境に慣れるのも早い。んで、これまではちょっとしたことも難しいことも全部npaka(布留川君)に頼んでたんだけど、最近二人とも独立したからつまんないこと頼むのは悪いなと思って﹁あれはできるんだっけ﹂くらいのことは自分で何とかしようかなと思った。それでChatGPTに﹁Swiftで⚪︎⚪︎やるにはどうすんの?﹂と聞いたら、Swiftについてほとんど何も勉強してないのに作りたいものが何となくすぐにできてきちゃって、でもまあやっぱりChatGPTだと知識が古いので詰まったらネットで検索すると、だいたい結局npaka(布留川君)のページが出てきてやはり信頼と実績の大先生(仲間内ではそう呼ばれている)です

stealthinu 2023/09/11

『だいたい結局npaka(布留川君)のページが出て』最近すごいこの状況になってる。RAG使う何かを作ってる人たちはみんなこの状況ではないか。

リンク

【W3Techs】2023年8月にWebで最も使われている技術はjQuery・Bootstrap・PHP・WordPress - Qiita

︻W3Techs︼2023年8月にWebで最も使われている技術はjQuery・Bootstrap・PHP・WordPress PHP JavaScript ランキングW3TechsQ-Success コンサル会社Q-Successは、World Wide Web Techno logy Surveysという分析サービスを提供しています。なんかいかにもW3Cとかと関係ありそうな名前ですが、特に関係はないみたいです。 W3Techsでは、Webサイトを収集し、それらがどのような技術で作られているかといった調査結果を無料で分析・公開してくれています。こんなに公開していて生計はどうやって立てているのかというと、過去の履歴や細かいレポートなどを有料で売っているみたいです。 6450ページのPDFとか細かすぎて逆に使いこなせそうにもなさそうですが、興味のある方は手を出してみてはどうでしょうか。データを覗

stealthinu 2023/09/06

2023/8時点でも真にメジャーなのはjQuery/Bootstrap/PHP/Wordpressと。まあ… Wordpressが強いよね。既に出来上がっているものは構成大きくいじらないからってことだろうなあ。

リンク

Webサーバーアーキテクチャ進化論2023

はじめに最近プログラマーとしてのキャリアに一区切りつけようと思っており、これまでのプログラミングの勉強の集大成となるブログを書きたくなったので書く。初めてプログラミングをして、フロントエンド開発をして、サーバーから値が返ってきたときは﹁どういう仕組みで値が返ってきたんだ？﹂と疑問に思っていた。ずっと理解したくて理解できていなかった。だからずっと勉強していた。そして最近になってようやく自分の言葉で説明できるようになった気がしたのでブログを書きたい。 2015 年版が自分の原点であり、この記事を書くモチベーションになったこのような記事は実は過去に存在している。 FYI: https://blog.yuuk.io/entry/2015-webserver-architecture その記事はサーバーがどういう仕組みで動いていて、どのように進化し、2015 年に至るかを解説してくれた記事だ。自

stealthinu 2023/03/31

すごい力作。というか今やNode.jsから開発経験スタートでそのあたりしか触らずにこれてるって時代なのね…

リンク

動かして学ぶ！Vue.js開発入門 | 翔泳社

︻Vue.js︵ビュージェイエス︶とは︼ Vue.jsは、Webアプリ開発用のJavaScriptフレームワークです。比較的小規模の開発から利用でき、さらにWebアプリ開発で主流になりつつある、シングルページアプリケーション︵SPA︶を構築することもできるため、 Web開発で大人気のフレームワークです。︻本書の概要︼ Vue.jsの基本機能を押さえたサンプルを元に、Webアプリ開発手法を学ぶことができます。具体的には、ニーズの高い、データバインディング、イベント、ライブラリの利用、コンポーネントなど開発の現場でニーズの高いトピックを中心に解説。さらに現在、主流になりつつあるSPAの作成に役立つポイントも盛り込みます。︻ターゲット︼フロントエンドエンジニア初心者︻著者︼森巧尚︵もり・よしなお︶この世にパソコンが誕生したばかりの時代からミニゲームを作り続けて30数年。現

stealthinu 2021/09/07

Vue.jsの本探しててふと作者の名前見たらなんと！「森巧尚」さんじゃん！！JR-100ユーザにとっては神様みたいな人。びっくり。内容は入門らしいんだけどそんなの関係なくポチってしまった…

リンク

シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita

開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で

stealthinu 2021/04/07

Chromeのデベロッパーツール、思ってたよりもいろんな知らない機能があった。「$_」が特別な変数として使えるのはperl文化からきてるのかな？

リンク

Firebaseを使い始めたら人生が変わった(ような気がした) - Qiita

最近、僕の周りでFirebaseを使った人たちは、﹁サーバーの処理をFirebaseに置き換えたら、筋肉がつきました！﹂(29歳, 社会人) ﹁Firebaseを使ったら友達も増えてわっしょいわっしょい﹂(11歳, 小学生) ﹁もうFirebase無しじゃ生きられない﹂(38歳, エンジニア) ﹁にゃーん﹂(1歳4ヶ月, うちの猫) と言っていました。嘘です。冗談はさておき、趣味で開発しているアプリのサーバーサイドをFirebaseに置き換えたらすごく良かったので、ずらずらと書いていきたいと思います。 Firebaseとは？ Firebaseは、Googleが運営しているmBaaSで、iOS/AndroidアプリからWebサービスまで幅広く使えます。リアルタイム同期や豊富な機能が特徴で、サーバーサイドの開発コストを大幅に減らすことができます。色々機能はあるのですが、今回僕が使った機

stealthinu 2018/12/20

Firebase使うと楽らしいのだがブコメでFiresotreが制約多くて無理というのもあるな。

Web開発

リンク

JSONをURIに埋め込んでも%地獄にならない「Rison」のススメ - Qiita

さくらのクラウドでバックエンドを担当しております、@townewgokgok と申します（記事はフロントエンド寄りの記事になります）。これはさくらインターネット Advent Calendar 2018 11日目の記事です。 JSONのように階層化された値をURLに埋め込みたいことってありませんか？たとえば価格.com の商品検索結果ページのように、リンクを開いたら検索フォームの内容が復元されて、URLのコピー時に見ていたものがそのまま表示されて欲しい。これを実現するには、従来なら文字列のキーバリューとしてごく一般的な application/x-www-form-urlencoded 形式でURLにパラメータを埋め込むところです（上記の価格.comの例でもやはりそうなっています）。ただ、そこそこ複雑な検索フォームの値をいちいちこの形式にまとめたり復元したりするのはわりと面倒です

stealthinu 2018/12/11

Risonという%エンコードが最小限で済むようにデザインされたJSON互換フォーマット。URL埋め込みするときに。

web開発

リンク

10年モノのインフラを3年がかりでカイゼンした - Qiita

CIいちおうJenkinsが立ってました。失敗して赤くなってるジョブが大半で、かといって誰が治すわけでもなく、よくわからないけど失敗したり成功したり、とにかく不安定でした。 CloudWatchのメトリクスで眺めて、EBSのIOPSクレジットの枯渇から激遅になって、Jenkinsジョブのタイムアウト設定で失敗になる、まで明らかにしました。その時の対処は、IOPSクレジット上限サイズの1TBのSSDのEBSを付けることと、同時並行で動けるJenkinsジョブ数に上限を設けることで、落ち着くようになりました。とはいえ﹁Jenkinsおじさん﹂問題があるので、CIをどうにか民主化する必要があります。SaaSから検討して、TravisCIとCircleCIが最終候補になって、トラブルシュートをSSHでできるのを決め手に、CircleCIを導入しました。8月末にCircleCI1.0が死んだと

stealthinu 2018/09/26

2015レベルだわ…　今やなんでも外のサービス利用するのが当たり前なんだねえ。

リンク

クライアントサイドのモデルとは何か前編 ~ クライアントサイド MVC の死 - mizchi's blog

前置きこの記事、本来はFlux には Model がないのではないかと思った覚書 - ナカザンドットネットとFlux の Store が ViewModel かって話からの MVW とかどうでもいいって話 - 猫型の蓄音機は1分間に45回にゃあと鳴くのアンサーとして書き始めた記事だが、前置きだけで別テーマとなったので、前後編に分割する。僕は元々がゲームクライアント屋だったときの発想を引きずってるのと、既存の Web の開発の文脈に対して距離を置いていることを明言しておく。あとこういうテーマでとある原稿書いていたので、頭の整理も兼ねて。 ActiveRecord の功罪を振り返るこのテーマを語るにあたって、まず Rails の MVC について述べなければならない。なぜなら、フロントエンドのアーキテクチャとは、サーバーサイドの MVC の模倣に始まり、破綻し、結果として

stealthinu 2018/05/16

『Modelという名前のストレージ兼ロジック抽象の何かになった。そしてたぶんCakePHPで導入されたその思想はRails等の他のMVCに受け継がれていった』Cake発祥なの？Railsかと思ってた。

リンク

新メールドメイン「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メールアドレスを引き続きご利用いただけます。さらに、法人のお客さま向けにご提供しているビジネ

stealthinu 2018/03/28

携帯アドレス判定や携帯アドレスだけ別処理してるものの判定基準に追加しないと…

リンク

すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ｜こんぴゅ

javascriptの開発では、sassやtypescriptなどのコンパイル、minifyやautoprefixerでの最適化、依存関係を解決しbundleするなど多様な工程があるので、属人化・職人依存を避けるためにタスクランナーでの自動化が昔から当たり前に行われています。 webpackはこの手のツールのデファクトです。webpackはタスクの自動化支援ではなく、なんでもjsにまとめるという仕事をうまくやる事に特化しています。gulpやbrowserifyで行なっていたようなタスクの自動化はnpm scriptで十分やん、という割り切りを感じます。なんでもjsで扱えるようにするので、cssや画像やhtmlもjs内にロードでき、設定が煩雑になりにくくなります。 webpackのloaderという仕組みがjsへの組み込みや最適化をうまくやってくれるのですが、どういうものか検証していきまし

stealthinu 2018/03/19

webpack使ってCSSや画像までもJSで一括して扱ってしまうという手法

リンク

フロントエンドの負債と向き合う - mizchi's blog

某所で書いたものを公開用に書き直したもの前提フロントエンドでTDDは難しい、というかほぼ不可能である。なぜなら事前に副作用をデータとして表現できるか不明だからだ。たとえばあなたのプロダクトの画面の何処かにボタンを追加するために、その内部表現を事前に思い浮かべることが可能だろうか？ react-redux などのFluxフレームワークは如何に副作用をアクションとして表現することで、テスト・デバッグのための情報を残すか、という視点で発展してきた側面がある。あの冗長なアクション定義は、全てデバッグのために書いていると言っても、過言ではない。それすら「Textは文字がある」といったトートロジーなデータになりがち。フロントエンドの現実的な単体テストは、他の開発者のために、自分が書いたコードの要求を満たしているか検知する手段として、防衛的にテストアフターしておく。これぐらいしか現実的な手法がない

stealthinu 2018/03/14

つらみしか感じられない…　ここまで苦労してもやはりやらねばならぬのだろうか…

リンク

選定した技術が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

stealthinu 2018/03/13

Webアプリなのに8年とか10年とか超長期のライフタイムを求められた案件があってPHPのフレームワーク選定すごく困った。未来を見通すのはむりだよね。

リンク

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

stealthinu 2018/02/16

Last-Modified(かETag)があればブラウザキャッシュしてくれる感じ。というか無いとしてくれないと考えれば良い。

web開発

リンク

【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

stealthinu 2018/02/15

Chrome Developer Toolsで「Provisional headers are shown」表示のときはキャッシュから取得してる場合。

web開発

リンク

最高のモックアップツールかもしれない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

stealthinu 2018/02/13

bootstrap使ったモックをWYSIWYGで作れるツール。有償だが2500円程度。

リンク

新QiitaでReactをやめてhyperappを採用した背景 - Qiita

12/1 にQiitaのトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについてプレゼンテーション層を実装するためのツールとして学習コストの観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない学習コスト仮想 DOM は学ぶ価値のある知識

stealthinu 2017/12/28

これブ米読むと単にWebフレームワークアーキテクチャの問題じゃない、人間が絡むもっと深い問題なんだなってわかって勉強になった。Vueくらいがちょうどよい感があるから流行ってるのかな？

リンク

［53選］国内注目のWebサービス・アプリを大調査！プログラミング言語、フレームワーク、アーキテクチャの一覧【2017年】 - エンジニアHub｜Webエンジニアのキャリアを考える！

﹇53選﹈国内注目のWebサービス・アプリを大調査！プログラミング言語、フレームワーク、アーキテクチャの一覧︻2017年︼星の数ほど存在するWebサービスやアプリ。その裏側を覗いてみると、開発当時のトレンドや開発者の設計思想が見えてきます。53サービスのフレームワークやアーキテクチャ、開発効率化ツールを集めました。国内だけでも星の数ほど存在するWebサービスやアプリ。その裏側を覗いてみると、開発当時のトレンドや開発者の設計思想が見えてきます。今回は53サービス︵追記を含む︶のフレームワークやアーキテクチャ、開発効率化ツールを集めました。選定理由もお答えいただけたサービスについては、アーキテクチャを選んだ理由も紹介していきます。 C2C、コマースメルカリ、ココナラ、BASE、Tokyo Otaku Mode、STORES.jp、Snapmart、IQON 情報サービスグノシー、価

stealthinu 2017/12/27

やっぱRails多いな。もはやPHPは少数派か。思いの外golang多い。あとPython+DjangoやScala+Play2が思ってたより少ない。Railsは一般教養として触っとかないとな。

リンク

はてなブックマーク

タグ

関連タグで絞り込む (85)

web開発に関するstealthinuのブックマーク (308)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

月間はてなブックマーク数ランキング（2024年5月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス