ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。 なぜ「できます」ではなく「できるはずでした」と記載しているのかと言うと、高品質な回答を得るためには質問文に毎回さまざまな定型文を記載しなければならない、回答が表示されるまでに時間がかかるなど、意外と面倒なことが多いからです。 ChatGPTで高品質な回答を得るために たとえばWeb制作全般に関して質問するときは「あなたは世界最高のWeb制作者です。」と質問文の先頭につけると良いです。 あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説してください」と質問文の最後につけると良いです。 さらに重要なのが「英語で調べて日本語で回答してください」と最後に付け加えることです。 これは
はじめに 通常のSNSで胡散臭い人が多いと感じてしまいました プログラミングスクールが流行り、エンジニアになって億稼いでます！みたいな・・・ そこで、本当のエンジニア・プログラマしか使えないSNSを作ってみました！ つまり、WebApi提供のみのSNSです 一般ピープルが使うようなフロントエンドなんてありません！！ Postmanなり、なんなりを使って叩いてください エンジニア・プログラマしかWebApiが叩けないであろうという考えなので、 エンジニア・プログラマにしか使えないSNS！ということです この記事を見ている、プログラマ・エンジニアの方であれば使えますよね？😁 実際、WebApiが叩くことが出来れば誰でも使えてしまうわけですが・・・。 2021/07/20 更新 このWebApiを作ったシステムについて書きました ソースコード公開しました CRUDのWebApi開発は不要！Js
どうしてこうなった。 何の話？ WindowsでのSSH-AGENTとSSHの話です。 この記事での用語: SSHとssh, SSH-AGENTとssh-agent この記事では、SSH-AGENTと書いたときにはカテゴリとしてのSSHエージェントを意味します。 ssh-agentと書いたときには、実行プログラムとしてのssh-agentコマンドを意味します。 同様に、SSHと書いたときにはカテゴリとしてのSSHクライアントを意味します。 sshと書いたときには、実行プログラムとしてのsshコマンドを意味します。 SSH-AGENTって？ SSH-AGENTは、秘密鍵での署名を代行1してくれるツールです。 SSH-AGENT に秘密鍵をロードしてしまえば、あとはパスワード(パスフレーズ)入力なしでSSH認証できる agent forward機能を使うことで、SSHした先でさらにSSHすると
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています（出典：caniuse.com）。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
知らないWebアプリケーションの開発に途中からJOINしたとき、どこから切り込むか？ / PHPerKaigi 2020
https://fortee.jp/phperkaigi-2020/proposal/c8d6b9b1-29e4-48bd-b8bd-9f43f74d6265
DXを大幅に低下させるDocker for Macを捨ててMac最速のDocker環境を手に入れる - Qiita
※DXはデジタルトランスフォーメーションではなくてDeveloper Experienceの方です 2020/05/26追記 https://qiita.com/nanasess/items/16ab9274c34bdc34e567 を使うことでVagrantを経由せずにDocker for Macの機能だけでMutagenを使うことができるようになりそうです。 パフォーマンスの測定はしていませんが、Docker for Macの設定のみでこの記事の手法と同等の速度が出るようになるかもしれません。 概要 Macでネイティブでの動作とほぼ同等の速度の安定したDocker環境を手に入れることができたので、その知見について公開します。 ものによりますが、最大10倍程度パフォーマンスの向上が見られました。 具体的な手法としてはVirtualBox + Dockerを用います。 設定は2ファイル50
そうはっきり言ったほうが良かった。いや言わなくても伝わる現場は良かったんだけど、伝わらないままごく一部だけをコンポーネントに移行、それ以外はただ生 DOM API に変えて終わり（あるいは他は jQuery のまま）みたいな「モダン化」で済ます余地を与えたのは発信の失敗だった……という10年代の振り返り。 テンプレートエンジンはなぜ倒された方が（…といって悪ければ、変わったほうが）良いのかは端的に指摘できて、それは初回レンダリングしか考慮してないからだということになる。 Web の UI には状態変化がつきもの（になったのは実は最近の話）だが、テンプレートエンジンは1回目のレンダリングだけを担当し、変化した後の2回目以降の見え方は JavaScript が担当するというパラダイムを構成する。
概要 フロント開発をするとき、レイアウトやアニメーション、その他CSS等の生成をしてくれるWebツールのまとめです。 使いやすそうなツールがあれば追記していく予定です。 ドキュメント類 何はともあれドキュメントは読む癖をつけて、正しい使い方ができるようになるのが良いでしょうということで mdn (Mozilla Developer Network の略) ウェブ標準ドキュメント 個人ブログやQiita内で「こう使うといい！」って書いてあってもその内容自体が間違っている可能性もあるので、より正確な情報を得るにはmdnを参照する Can I use ブラウザごとにCSSやjsの標準関数等が使用可能かどうか一覧表示してくれる ジェネレーター系 Interactive CSS Grid Generator Gridを使ったレイアウトをGUIで作り、コード生成できる そのレイアウトをもとにCodeP
はいさい！ちゅらデータぬオースティンやいびーん！ 今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感＝芽生えては大きく育った種 筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。 しかし、そんな筆者は、最近に
フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。 一休.coｍレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。 このエントリではBulmaを選定した理由と、採用後に見えたPros / Consについて述べたいと思います。 なお今回リニューアルした一休.comレストランの管理画面の概要は以下の通りです。 レストラン店舗向けの管理画面 店舗の方と一休スタッフの両方が使う DAUは数千の規模 主な用途は在庫の管理と、プラン（コース）や席の管理 現在は店舗を限定してリリース済み 具体的には以下のような画面で構成されています。 UIフレームワークは必要か？ まずそもそもUIフレームワークは必要かという議論があります。 今回のプロジェ
これは5年かけて JavaScript の技術スタックの間をうろつき、無駄な時間を過ごし、迷い、そしてなんとかローンチにこぎつけた体験の記録です。 自己紹介 初めまして。私は小さなモバイルアプリ開発会社を運営しているエンジニアです。 プログラミングを始めたのと同じくらいのときから、趣味で作曲活動をしています。 今日の作曲は DAW と呼ばれる大型のソフトウェアを利用することがスタンダードになっています。しかしたくさんのプラグインをマシンにインストールしなければならないことや、すぐに立ち上がる作曲ソフトが無いことにフラストレーションを覚え、軽量な MIDI シーケンサーアプリを好んで使っていました。 しかしそれらの多くは Windows2000 の時代から存在し、アップデートされず、その上 Windows 10 以降 MIDI の再生はまともにサポートされなくなりました。 その問題を解決する
これは Aizu Advent Calendar 2019 の 15 日目の記事です。14 日目は uzimaru0000 さん、16 日目は kacky__917 さんです。 はじめに 世の中には日々たくさんの価値ある Web サービスが生まれていますが、その価値を正しく提供するにはアプリケーションが正しく動かなければなりません。 たとえばアプリケーションは適切なユーザに適切なリソースを提供しなければならず、エラーを返す際は十分に定義された仕様に沿って返し、UI 側ではユーザに適切なメッセージを表示しなければなりません。 実際のところ、これらを厳密に実現するのは非常に困難ですが、アプリケーションにはこれら以上に複雑な問題が常につきまといます。 現在の Web アプリケーションはほとんどが分散システムの一形態です。例えばクライアントとサーバや、サーバとデータベースがネットワークを介して接続
と、この例では3回の通信がなされます。1が終わったら 2、2が終わったら 3とバケツリレーされます。 ※3の後に、メールボックスにあるメールをWebで見たりPOP3などでメーラーがメールを取得したりする このSMTPを使用したメールのバケツリレーの様相は、ブラウザとWebサーバーが End to End なHTTP(S)と大きく異なります（HTTPにもプロキシはあって通信が多段になることはありますが、バケツリレーではない）。 「IPレピュテーション」という概念は、上の表の2の通信、インターネット越しに送る側と受け取る側がSMTP通信するところに係わります。 レピュテーション=評価、です。メールにおけるIPレピュテーションとは、受け取る側の送る側の送信元IPアドレスに対する評価 です。この評価によって、受け取る側のメールサーバーは メールを速やかに受け取り受信者の受信箱に配送する メールを受
(社内用ドキュメントの公開版) テストのポリシー 前提として、ユニットテストを導入するコストを、限界まで低くすることを目指す。テストが根付いていない言語環境や文化では、放っておくとテストが書かれないまま実装が進行し、結果としてテスト不可能な巨大な雪だるまが完成する。こうなるとメンテコストが高いE2Eを大量に書かないといけなくなり、テストの実行時間が膨れ上がっていく。 そうなる前に、ユニットテストを書きやすい環境を維持し、ユニットテストとして問題を切り分けられるような環境を維持する。とにかく書きやすさを重視し、一つのユニットテストを書くオーバーヘッドを限界まで下げる。 最初の一つを早い段階で書く 自分の経験的には、ユニットとテストの最初の一つを書いたらあとは自然とその周辺で増えていく。サンプルがあったら人はコピペする。逆にいうと最初の一つを書かない限り一切書かれない。まず一つ用意するのが大事
はじめに Webフロントエンド開発の学習において、多くの人がまず最初にconsole.logの使い方を学びます。 console.logはデバッグの際に非常に便利なツールですが、JavaScriptにはこれ以外にも多彩なデバッグ機能が存在します。 通常のconsole.logだけでなく、さまざまなconsoleのメソッドを活用することで、デバッグ作業をより効率的に、かつ迅速に進めることができます。 console.log ブラウザの開発者ツールやNode.jsのコンソール上に、渡された引数を表示します
こんにちは。ミーティングテクノロジーという会社で会議ツールを開発している伊勢川です。 仕事で位置情報サービスを軽く調べる機会があって、せっかくなので調べた内容を記事にしたいと思います。 位置情報（地図）サービスといえば、Google Mapを思い浮かべる人も多いのではないでしょうか。私もGoogle Mapのヘビーユーザー＆ファンで、カーナビの代わりとして使ったり、街で見つけた史跡の写真等を2000件以上投稿したりしています。 B2Cのサービスの中ではGoogle Mapが圧倒的な存在感を放っていますが、B2B向けのサービスとなると様相が異なるようです。今回は、ある調査でB2B向けサービスの中ではGoogle Mapより高い評価がついていた「HERE」というサービスについて書きます。 Google Mapよりすごいと言われる所以はなにか Omdiaのレポートによると、B2B市場の位置情報サ
2021年になりましたね。 矢倉眞隆（myakura）です。ウェブ標準やブラウザに興味のあるウェブ開発者です。gihyo.jpでは2009年に「Web標準とその周辺技術の学び方」という連載をしていました。 今回は昨年の泉水さんに代わり、2021年のウェブ標準やブラウザの動向を占おうと思います。2020年は世界もブラウザもそれなりに大きな出来事がありましたので、2020年の動きをまずおさえ、そのうえで2021年はどうなるのかを考えてみました。 W3Cのプロセス改訂でLiving Standardライクな仕様の改訂が増えていく W3Cは2020年9月に、新しいプロセス文書と特許ポリシーを公開しました。 新しい文書プロセスはW3Cの組織の定義や標準化の流れ、意思決定などについて定めた文書です。ここ数年は毎年更新されていますが、2020年はこれまでと比べて最大級とプレスリリースでもうたわれています
2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.jsです。 以下は2020年のランキング、2020 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2020 5回目のJavaScript ライジングスターにようこそ！ こ
運用出来るWebアプリケーションの作り方
はじめに 先日、下記のようなツイートを見つけて、そういえば趣味で個人開発してたときには然程気にしてなかったけど、仕事で運用するようになって先輩たちから学んだり自分で身につけたチップスってちょこちょこあるよねー、とふと思ったので、Webアプリケーション開発に関わるものをいくつかまとめてみました。 特に体系的/網羅的という程でもないですし、最近はFWや色々な仕組みでカバーされてるものも多いですが備忘録として。 Tips 機械が読めるログを作る これは割と重要なのですが、ログは人間が読むものではなく機械が読むものです。それはZabbixだったりDatadogだったりSplunkだったりgrep/awkだったりツールは何でも良いのですが、古の時代はさておき現代ではログは機械が読めることが最重要です。 まず大前提として構造化されている必要があります。言うまでもないですが「フリーフォーマット」のログの
はじめに SQLite は世界で一番使われている だから世界で一番凄いものに決まってるだろ SQLite は世界で最も使われている RDBMS です。名前に反して（？）おもちゃの RDBMS ではありません。元ネタと同じで 一番普及しているからと言って必ずしも一番凄いものであるとは限りませんが、普及しているのであればそこには何かしらの理由があるはずです。その理由を調べないことには、凄いか凄くないかの結論は出せないので SQLite のなにがそんなに凄いのかを調査しました。 2022/04/01 続編記事↓を書きました。 注意 この記事は「なぜシェルスクリプトで高度なデータ管理にSQLiteを使うべきなのか？ ～ UNIX/POSIXコマンドの欠点をSQLで解決する」の補足記事して書いたものです。ところどころ不自然にシェルスクリプトや Unix コマンドの話が登場するのはそのためです。基本的
概要 AI革命のインフラを目指すSaaS系スタートアップのFastLabel（最近資金調達しました！記事はこちら）で働いているが、今までGCPで動かしていたインフラを訳あってAWSに基盤を載せ替えることになった。 スタートアップは何よりスピードが求められるが、だからといってセキュリティやモニタリング、可用性を疎かにはできないし、大きなインフラコストに耐えられるほど体力もない。 アプリケーション要件を満たしつつ、以下を実現するアーキテクチャを設計する。 シンプルな構成・構築の容易さ スピーディな開発・適用 可用性の担保 セキュリティの担保 最低限のモニタリング 低コスト（リソース・運用） ここで紹介するアーキテクチャは実際に運用まで行っており、問題なく稼働しているし、先日AWSの方にレビューしてもらったが、「なかなかイケてる」というお言葉をもらい、特に改善点も指摘されなかった。 結論（アーキ
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？ 静的なHTMLファイルをWebサーバが配信する仕組みから始まったWebは、サーバ側で動的にHTMLを生成するCGIの仕組みや、Webブラウザ上でJavaScriptを実行してインタラクティブな操作を実現するなどの仕組みを得たことでWebアプリケーション基盤へと発展しています。 現在、Webアプリケーションの仕組みとして代表的なものがSPA（Single Page Application）でしょう。 SPAはWebブラウザ上で多くの処理が行われるためユーザーの操作に対する反応が速く、インタラクティブ性の高い快適なWebアプリケーションを実現できる利点があります。 しかし、これからのWebはサーバサイドレンダ
クラウドのアーキテクチャ図作成ツール「CloudSkew」、Webブラウザから無料で利用可能。AWS／Azure／GCP／Kubernetes／Oracle Cloudなどマルチクラウド対応
クラウドのアーキテクチャ図作成ツール「CloudSkew」、Webブラウザから無料で利用可能。AWS／Azure／GCP／Kubernetes／Oracle Cloudなどマルチクラウド対応 クラウドのアーキテクチャ図を作成するためのWebアプリケーション「CloudSkew」が公開されています。 AWS／Azure／GCP／Kubernetes／Oracle Cloud／HashiCorp／Alibaba Cloudなど人気のクラウドやツールのアイコンがあらかじめ用意されており、Webアプリケーションとして提供されているためインストール不要で、誰でも無料で利用可能です。 操作は一般的なドローツールと同じように、左側からアイコンを選んで真ん中の図に置き、アイコン同士を矢印でつなげていくことでアーキテクチャ図が作成されていく、という感じです。 開発しているのは、元マイクロソフトのエンジニアを
追記 作者のcatnose99さんがより詳細を解説してくださいました zenn.dev /追記 ポエム特化のZenn2との噂の「しずかなインターネット」を使いはじめたので、ユーザーとしてどんな技術が使われているのかを確認していく。 sizu.me おもむろにbuiltwith.comにかけてみる。 builtwith.com ここで分かる情報はブラウザのDevTools眺めてても得られるのであまり収穫はない。 前段にCloudflareのCDNサーバーがいて Next.jsで生成されたレスポンスを返している ことがわかる。 この時点ではキャッシュのみCloudflareなのか、Pages/WorkersでNext.jsのSSRごと動かしているのかは判断できない。 認証 Set-Cookie: __Secure-next-auth.session-token=が含まれているのでNextAut
全ブラウザ対応になったCSSのコンテナクエリについて、基礎から一歩踏み込んだ内容までを解説します。 デモ① SNSリアクションバー（container-type, @container） https://codepen.io/tonkotsuboy/pen/PoBMMZw デモ② 古都…
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第6回目となる本記事ではウェブ業界の「HTMLコーダーにとっての2020年」と題してアンケート結果を紹介します。 HTMLのエディター HTML制作によく使われるエディターはどれでしょう？ アンケートで質問してみました。 805票の回答があり「VS Code」が64.5%、「Atom」が8.8%、「WebStorm」が8.2%、「その他」が18.5%でした。 VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事『VS Codeの拡張機能7選』で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。 WebStormの回答者数は
背景 Dockerコンテナを立てたらマルウェアに感染したのでサイバーセキュリティの啓蒙を兼ねてメモ書きしてみました。 注意事項 マルウェアに感染した被害の対処方法を記述しています。マルウェア自体の機能や解析の解説ではなく一般利用者ユーザーの視点から感染経路と対応方法についての記述になります。 マルウェア感染状況 症状 Dockerコンテナを稼働させたホストのロードアベレージ(CPU負荷)が常時4を超える状況になっていました。つまり400%でホストがフル回転してた訳ですな。 例えるならエヴァンゲリオン初号機が暴走してマヤちゃんがコンソール画面に向かって叫んでいるところです（違） こうなるとクラウドサービスのAWSとかだと英文で警告アラートが飛んで来ますし毎日課金されで膨大な利用料金請求が来ることになります。恐ろしい！！ 状況の調査 CPUの利用状況やメモリの使用量などを調査するツール類があり
極めつけは、2019年12月に起きた、さくらインターネットへの不満の記事を Qiita 側で勝手に非公開にした一件だ。 「さくらインターネット側が公開停止要請をしたのでは？」と騒がれたが、Qiita が独自判断で非公開にしたとわかり、真摯に対応をしようとしていたさくらインターネットにまで迷惑をかけてしまう結果となった。 管理社会としての姿エンジニアは、コミュニティーのために情報共有をオープンにする姿勢でいる。 時間をかけて見つけた答えに、他者がすぐにたどり着けるようにできれば全体の生産性を上げられるゆえの貢献だ。 一方で、Qiita がユーザーに見せてしまった姿は、Qiita 独自の判断で情報統制がおこなわれるクローズドな管理社会だ。 この結果、エンジニアから Qiita への不信感は積もり続けたまま今日に至り、それがついに爆発してしまった。 今回の件は個人情報の取扱として問題があるが、仮
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあらためて記す。 仕様策定の経緯 表題の通り、 <form> の method には GET と POST しかサポートされていない。 HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。 仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Descriptio
2022年になりました。矢倉眞隆（@myakura）と申します。昨年に引き続き、新春特別企画のブラウザとウェブ標準を担当させていただきます。 なお、取り上げるトピックの数やインパクトの大きさもあり、CSSについては別記事となりました。あわせて読んでいただければ幸いです。 ChromeとFirefoxがバージョン100に到達 昨年の新春企画でもすこし触れましたが、今年はChromeとFirefoxのバージョンが100になります。 Chrome 100は、今年の3月29日にリリース予定です。もともとはもう少し先だったのですが、Chrome 94からリリースサイクルが4週間に短縮されたため、Chrome 100のリリースが早まりました。 Chromeよりも早く4週間のリリースサイクルに移行していたFirefoxも、5月3日にFirefox 100がリリース予定です。 バージョンが3桁になることで
現代のWebアプリケーションエンジニアとして最低限の常識TODO - shimobayashiパブリック
古代のWebアプリケーションエンジニアなので、現代との差分を身に付けていくぞ！ 個人的なスキルセットの差分を埋めるためのものなので、誰にでもマッチするものではありません。 習うより慣れろの精神で、読んで終わりじゃなくて手を動かします。 コンテナ化 x done.icon The Twelve-Factor App （日本語訳） done.icon What is Amazon Elastic Container Service? - Amazon Elastic Container Service 機械翻訳がひどかったので英語版をGoogle翻訳で読むほうがマシそう メニュー1階層目だけ全部読んで、気になるところがあれば深堀りする ↑で物足りなかったらKubernetes完全ガイド 第2版 impress top gearシリーズ | 青山真也 | 工学 | Kindleストア | Ama
コンテンツ投稿系のWebサービスでは「ユーザーのページに好きな独自ドメインを登録できる」という機能をつけたくなることがあります。ユーザーからすると「コンテンツが自分自身の所有物であること」を感じやすいですし、コンテンツのポータビリティが上がりますし、とても夢がありますよね。僕もいつか実装してみたい機能のひとつです。 しかし、この機能を提供するには、以下のようなハードルがあります。 料金 ベンダーロックイン 複雑な実装（とくに認証） (1)の料金についてはデプロイ先によります。例えばVercelであればProプラン以上であれば無制限に独自ドメインを登録できます（Unlimited custom domains for all Pro teams）。 Google Cloudの場合にはCertificate Managerで独自ドメインごとの証明書を管理するのに「ひとつあたり○USD」という感
ChromeのDevToolsの便利機能まとめ
池田 泰延 @clockmaker ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSSのフロントエンド技術が専門、TypeScript/WebGLによる3D表現やクリエイティブコーディングが得意。著書『JavaScriptコードレシピ集』など解説書12冊を執筆。ウェブ業界の最新情報と、現場で役立つ技を発信します。趣味でタイムラプス撮影。 ics.media/entry/staff/ik…
概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この記事を読んで理解すれば、綺麗なグラデーションが簡単に作れるようになるでしょう。 原因 1. RGBについて理解する RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を それぞれ、0~255の値を指定することで、色が作られます。 例えば、 R: 255, G: 0, B: 0 → 赤 R: 255, G: 255, B: 0 → 黄色 このように色が指定されます。 では、RGB全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ
コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する
本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま
サーバーレスの次はなんなんだ
はじめに この記事は、同人誌サークル「めもおきば」から不定期刊行している技術解説本「めもおきばTecReport」に書いたものを公開用に再編集したものです。 ⇒ めもおきばTecReport 2023.12 この記事のほかにも「私もSecHack365に参加したい！」や、「2023年振り返りと2024年技術予想」としてこんなキーワードを取り上げているので、気になったらぽちっとしてください！ メガクラウドと特化型クラウド／ハイパーバイザーのSoC化／ライセンスとクラウドベンダー／イベント駆動型API／LLM時代のAIペアプロ力／生活必需品としてのGPU・NPU／Passkey／ウェブアクセシビリティ／リアルイベントの再開 サーバーレスの次はなんなんだ サーバーレスと呼ばれる技術ムーブメントが盛り上がり始めて8年近くが経ちました。各クラウドベンダーのFaaS（Function-as-a-Ser
1. はじめに フロントエンドを始めたばかりの頃、参考書や参考サイトで当然のように使われているものの、特に說明がないような**「慣習」や「テクニック」**に困惑したり、その理由が気になった経験を思い出したので、その一部を簡単にまとめてみました。 2. HTML 2-1. iタグでアイコン HTML の興味深いテキスト要素 (<i>)は、何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、技術用語、外国語のフレーズ、架空の人物の思考などです。英文においてはよく斜体で表示されるものです。 <i>: 興味深いテキスト要素 - HTML: HyperText Markup Language | MDN 仕様上は適切な使用方法ではなさそうですが、「Bootstrap Icons」や「Font Awesome」などでも採用されているように、普及している印象があります。 ちなみにHT
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChatGPTを使用して「Web制作者の疑問に答えるWebアプリ」を作りました
エンジニア・プログラマにしか使えないSNSを作ってみた話 - Qiita
IIJ、6月16日施行の「Cookie規制」 を解説〜多くのサイトやアプリが対象になり、情報の公表などが義務に
混沌を極めるWindowsのssh-agent事情 - Qiita
jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita
本当に倒すべきだったのは jQuery ではなくテンプレートエンジンだった - fsubal
フロント開発をするときにブックマークしておくと役立ちそうなオンラインツールまとめ - Qiita
React、過剰に複雑な代物。 - Qiita
CSSフレームワークBulmaについて - 一休.com Developers Blog
5年かけて作ったウェブアプリを Hacker News に投稿し、最初の1ドルを得た話
アプリケーションにおけるデータ不整合との戦い - blog.syfm
メールというインターネットの闇とIPレピュテーション（だけど重要）(前編) - Qiita
(自分の) JavaScript のユニットテストの書き方
JavaScriptでconsole.logを使用してませんか？
Google Mapよりすごい！と噂の位置情報サービスを使ってみた - Qiita
2021年のウェブ標準とブラウザ | gihyo.jp
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
利用者は数十億人！？ SQLiteはどこが凄いデータベース管理システムなのか調べてみた - Qiita
SaaS系スタートアップのリアルなAWSアーキテクチャ設計
2020年に立ち上げたWebフロントエンド構成の振り返り
「しずかなインターネット」の技術スタックを調べる - laiso
全ブラウザ対応したcontainer queryは何がスゴイのか？
HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
Dockerコンテナのpostgresqlがマルウェアに感染した件について - Qiita
Qiita はなぜここまで退会炎上したのか？｜横江 as a なんとか
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io
2022年のブラウザとウェブ標準 | gihyo.jp
Webサービスで「ユーザーページに独自ドメインを登録できる」機能を提供するのがなぜ難しいか
【CSS】「なんかグラデーションが汚くなるんだけど」を解決する。 - Qiita
フロントエンドの慣習のまとめ - Qiita