Vercel、自然言語からUIを生成するサービス「v0」を実験的に公開。Tailwind CSSとShadcn UIをベースに
Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebのユーザーインターフェイスを自動生成してくれるサービス「v0」をプライベートアルファ版として公開しました。 v0 by Vercel Labs Generate UI with simple text prompts. Copy, paste, ship. Explore the prompt library and join the waitlist today.https://t.co/yaDdOfnOaJ — Vercel (@vercel) September 14, 2023 v0の作例として公開されている、プロンプトから生成されたUIをいくつか見てみましょう。 下記は「A dashboard for saas app」（SaaSのダッシュボードを作って）というプロンプトで生
2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列（グリッド）を入れ子にして、親行列の行や列に子行列を整列させることが可能です。 この記事では、Subgridの基本から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。 前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め 複雑な行列の入れ子と、subgrid
CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる
CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。 CSS Type Casting to Numeric: tan(atan2()) Scalars br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに tan(atan2())は単なる数値である 追記: 三角関数を学び直
margin: auto;は非常に便利なCSSで、使用することも多いと思います。 そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル以外のリンクを右寄せに配置させるなど、便利なテクニックが満載です。 All About 'margin: auto' in CSS: Centering and More by Ritika Agrawal 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 「auto」とはどういう意味ですか？ 「利用可能なスペースを占める」とはどういう意味ですか？ ブロックレベル要素でautoを使用する 絶対要素でautoを使用して中央配置 CSS GridとFlexboxでautoを使用して中央配置 Flexboxとa
Prettier 3.0 をリリースしました
2023 年 7 月 5 日に Prettier 3.0 をリリースしました。Prettier 2.0 がリリースされたのが 2020 年 3 月 21 日だったので、実に 3 年以上ぶりのメジャーアップデートとなります。 本当はもっと早くこのブログを書きたかったんですが、やる気が出ずだいぶ遅れてしまいました。 この記事では Prettier 3.0 の主要な変更点を紹介します。 Prettier 3.0 の主要な変更点 Prettier 3.0 はメジャーアップデートということもあって大きな変更がいくつか含まれています。ここでは、そのうちユーザーに直接的な影響がありそうなものを紹介します。 ここで紹介する以外にも大きな変更はありますが、プラグイン開発者向けのものとか、Prettier のソースコード自体が全部 ECMAScript Modules で書かれるようになったとか、ユーザーから
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator
レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。 Fluid Type Scale Calculator Fluid Type Scale Calculator -GitHub Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorの使い方 Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。
TVアニメ「mono」公式サイト
芳文社『まんがタイムきららキャラット」にて連載中の、あfろによる人気4コマ漫画『mono』 アニメ・実写化も果たした代表作『ゆるキャン△』でキャンプブームを盛り上げたあfろが、写真部と映像研究部が合体した「シネフォト部」に所属する女子高生たちを中心に描く《今週末の楽しみ方漫画》。 360°パノラマカメラでの撮影や、凧にカメラを括り付けた疑似ドローンなど様々な技法を用いて、山梨県甲府市を中心とした景色や彼女たちの日常を切り取っていく。 『ひだまりスケッチ』や『ぼっち・ざ・ろっく！』など、様々な作品をアニメーションとして送り出したアニプレックス×芳文社のタッグに、新進気鋭のスタジオソワネが加わり映像化が実現。 スタッフ陣は、監督に愛敬亮太（「呪術廻戦 懐玉・玉折／渋谷事変」）を迎え、キャラクターデザインを宮原拓也（「恋する小惑星」）、シリーズ構成を米内山陽子（「ゆびさきと恋々」）が担当。 今注
CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基礎知識と使い方を紹介します。 Limit the reach of your selectors with the CSS @scope at-rule by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 CSSのセレクタを記述するきめ細やかな技術 CSSの@scopeとは :scope疑似クラスとは @scope
Shadow DOMとCSSの現状
2024-02-27 DOMDOMトークス #1
Prompt library
Explore optimized prompts for a breadth of business and personal tasks. User-submitted prompts have dark backgrounds with light colored icons (currently, there are none). You can submit prompts via our prompt submission form.
「CMS(Contents Management System)」はブログやサイトのコンテンツを簡単に管理するためのツールで、代表的な製品としてはWordPressが挙げられます。TinaCMSはそうしたCMSの一つですが、バックエンド側のやりとりに特化した「ヘッドレス」なCMSとのことなので、実際に使ってどんなものなのか確かめてみました。 The Markdown CMS | Tina https://tina.io/ TinaCMSの構造はこんな感じ。赤枠部分がTinaCMSの本体で、TinaCMSのデータベースはGitリポジトリと同期しています。フロントエンド側にはAPIが公開されており、ページのデータを読み出したり書き込んだりすることができるようになっています。書き込みが行われた際には自動でコミットが生成され、バージョンを管理することが可能です。 ページのデータはマークダウンやJS
くりもと眼科｜大阪市阿倍野区 天王寺駅
JR天王寺駅から徒歩3分のくりもと眼科です。特に緑内障と神経眼科疾患に高い専門性を持ち、緑内障の手術や白内障の日帰り手術も可能です。
ユニクロアプリが動画メインになっていて、なかなか見たい商品まで辿り着けない！と話題に「素直に静止画で見せてお願い」→対処法もあるらしい
在宅管理職WM @Um6UX5LpQkTd9Ut こちらがユニクロアプリを開く時はもうキッズパジャマ買うぞ、ヒートテック買い足すぞ、みたいなテンションでのびのび動画を出されてもイラつくだけなの。 2023-12-25 10:20:22
Secrets from the Algorithm: Google Search’s Internal Engineering Documentation Has Leaked
Google, if you’re reading this, it’s too late. Ok. Cracks knuckles. Let’s get right to it. Internal documentation for Google Search’s Content Warehouse API has leaked. Google’s internal microservices appear to mirror what Google Cloud Platform offers and the internal version of documentation for the deprecated Document AI Warehouse was accidentally published publicly to a code repository for the c
海外で有名なデザインおしゃれなトグルボタンをコーディングしてみた
FigmaのXアカウントがおしゃれなトグルボタンを公開していて、「コーディング泣かせだ」との声を見かけたので、改めて自分でコーディングしてみようと思い書いてみました。 デザイナに作れよ！って言われれば作るよ。だってぷろだもん。https://t.co/HF6afHhfzm https://t.co/IXl7iufv7v pic.twitter.com/T4x4uV7tKX — ゆひゃ (@zaty_Akiyama) October 14, 2023 元ネタ 参考にしたのはFigmaのこのポストですが、結構有名なデザインで、最初に見たのはこのポストだと思います。 still laughing at this pic.twitter.com/Ny525aAuYH — Joie Chung (@hellojoie) April 28, 2023 このポストの一連の引用や返信を見ると、海外でもっと
アドビが生成AI「Firefly」を一般公開 「Creative Cloud」に統合 コンテンツは商用利用可能
アドビは9月13日、コンテンツ生成AI「Adobe Firefly」のWeb版と、同社の一部デスクトップアプリに統合されたFireflyの機能を一般公開した。これにより、Fireflyによって生成されたコンテンツの商用利用が解禁される。 一般公開版の概要 Fireflyは2023年3月からβテストが行われてきた。当初はプロンプト（文章）によるコンテンツ生成は英語にのみ対応していたが、日本語を含む多言語対応を進めるなど、機能の拡充を進めてきた。「Adobe Photoshop」「Adobe Illustrator」などのデスクトップ向けβアプリにも、Fireflyの技術が順次搭載されている。 →初登場時の記事 →Photoshopアプリへの実装時の記事 →Illustratorアプリへの実装時の記事 Adobe（アドビの親会社）によると、これまでにFireflyを使って生成されたコンテンツは
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
今年も残すところあと少しとなり、振り返ってみると数えきれないほどのツールや素材がリリースされました。 「本当に役立つツールや素材を集める」をモットーに、2016年からおよそ8年間、定期的に最新ツールをまとめ続けています。 数で言えば、３０００個以上。 知っているか知らないかの違いで、作業時間を大幅に短縮し、売り上げが2倍にワープしたことも何度もあります。 このような経験があるからこそ、ハッキリ言えることがあります。 それは、無料で使える素材を知らずに損している人が、あまりにも多いということ。 残念ですが、あなたの素晴らしい商品やサービスの魅力が、ユーザーに全く伝わっていません。 でも、ご安心ください。 この記事では、そんなあなたの役に立つ2023年公開の無料デザインツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。 CSSはそれら以外にもたくさんの単位が使用できます。フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を紹介します。 Relative length units based on font -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: capとは CSSの単位: chとは CSSの単位: emとは CSSの単位: exとは CSSの単位: icとは CSSの単位: lhとは CSSの単位: remとrlhとは CSSの単位: rex, rch, ricとは はじめに
Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。 本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。 CSR （Client Side Rendering） クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。 このJavaScriptがブラウザ上で実行されることにより、実際に表示するHTMlをレンダリングします。 メリット サーバーとの通信が初期遷移時のみに抑えられる ページ遷移が高速 デメリット 初回読み込み時に全てのデータを一括して取得するので、ページが表示されるまでの時間が長い（アプリケーションの規模が大きくなればなるほど、時間が長くなる） JavaScriptはブラウザで実行されているので、ページ表示までの時間（JavaScriptの実行時間）が使用しているマシンスペックに依存して
Yahoo! 知恵袋のフロントエンドには26000行を超えるユニットテスト(1つのcontrollerのユニットテスト)や、多くのロジックを含むcontrollerがあります。これらによって追加実装・保守が難しい状況です。この問題を解決するために、リアーキテクトを行いました。以下について主に話そうと思っています。 ・リアーキテクトで取り組んだこと ・リアーキテクトの結果・学び・反省点
登録手続きのこの画面、生まれた年までひたすら連打できつすぎる→実はここから年選択できるが「悪いUIの例として教科書に載せたい」
東京都の「018サポート」という給付金の手続きでつまづいてしまう人が続出。特にスマホの手続きの難しさが話題に 放射線科医ふくろう☢投資とポイ活.com @tk2cafe 子供1人ごとに月5,000円もらえる東京018サポートの申請が難し過ぎる。悪戦苦闘してなんとか終了。 中でも生年月日の入力がカレンダーでしかできず年も選択できない。タップ1回で1か月戻る。37年間戻るために450回くらいタップ。 ｢何としてでも途中で離脱させる｣という東京都の強い意志を感じた。 2023-09-21 13:43:02
商用利用無料！ コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上！ -Mamba UI
Webサイトやスマホアプリでよく使用されるUIコンポーネントとテンプレートをTailwind CSSベースで実装したコレクションを紹介します。 コードはHTMLとVueとJSXに対応しており、Tailwind CSSを用意しておけばコピペで簡単に利用できます。 Mamba UI Mamba UI -GitHub Mamba UIの特徴 Mamba UIの使い方 Mamba UIのコンポーネント Mamba UIの特徴 Mamba UIは、Webサイトやスマホアプリによく使用されるUI要素をTailwind CSSベースで実装したオープンソースのコレクションです。すべてのコンポーネント・テンプレートはHTMLとCSSで実装されており、Tailwind CSSのおかげで複雑なCSSルールを記述する必要はありません。 Tailwind CSSはユーティリティファーストのCSSフレームワークなので
先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 select要素内で区切り線（hr）を使用できるようになりました select要素内の区切り線（hr）の実装方法 select要素内の区切り線（hr）のデモ select要素内で区切り線（hr）を使用できるようになりました 11/1にリリースされたChrome 119では、
CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developers
CSS Text モジュール レベル 4 の 4 つの国際化 CSS 機能が Chrome に導入されます。この投稿では、すでに発送済みのサービスと今後の予定について説明します。 Chrome 119 以降: 日本語のフレーズが word-break: auto-phrase で改行されるようになりました。 Chrome 120 以降のフラグの背後: text-autospace プロパティによるスクリプト間のスペース 開発中: text-spacing-trim プロパティによる中国語、日本語、韓国語（CJK）の句読点カーニング。 言語間で最小フォントサイズが統一されます。 日本語のフレーズ改行: word-break: auto-phrase 日本語のテキストが読みやすくなるこの機能は Chrome 119 から利用可能 中国語や日本語などの東アジア言語では、単語の区切りにスペースを使
mytweetsという自分の Twitter/Bluesky の自己ポストの全部検索サービスをNext.js App Router(RSC)で書きなおしました。 mytweets は Twitter のアーカイブや Bluesky の API を使って自分のポストを S3 に保存しておき、 S3 Selectを使って全文検索ができる自分専用の Twilog のようなサービスです。 自分の Tweets をインクリメンタル検索できるサービス作成キット と Tweets をまとめて削除するツールを書いた | Web Scratch 過去の Tweets を全文検索できる mytweets を Bluesky に対応した。自分用 Twilog みたいなもの | Web Scratch 最初は CloudFront + Lambda@Edge + Next.js Pages Router で動かし
WebアプリケーションのUIの表現はどんどんリッチになってきています。しかしその一方でブラウザ上での描画の負荷は増大し、時としてスムーズに動かず体験を損ねることもあります。ユーザーにとって使い心地の良いUI体験はフロントエンドのパフォーマンスチューニングに大きく委ねられていると言えるでしょう。 スタートアップ開発を支援する株式会社Gaji-Laboでは、サービスの価値に直結するエンドユーザーの体験向上のため、快適なUIを提供する事をとても大切にしています。 この記事では、快適に動くUIを作るため、フロントエンドフレームワークのマジョリティであるReactとどう付き合っていくべきかを考えていきましょう。 Reactの仕事を理解するまず、Reactがどんな仕事をしているのかを理解するところからはじめましょう。Reactの主な仕事はUIを描画すること、そして必要に応じてそれを再描画することです。
Let’s Encryptがクロス署名を廃止すると発表、証明書のデータ量が40％削減される一方でAndroid 7.0以前の端末では対応が必要に
無料でウェブサーバー向けのSSL/TLS証明書を発行している認証局Let's Encryptは、自身を信頼していない端末にも信頼される証明書を発行できるようにIdenTrustからクロス署名を受けていましたが、Let's Encryptを信頼する端末が増加したことを受けて、2024年にIdenTrustからのクロス署名を廃止すると発表しました。 Shortening the Let's Encrypt Chain of Trust - Let's Encrypt https://letsencrypt.org/2023/07/10/cross-sign-expiration.html SSL/TLSを使うと、通信において「通信相手が偽物にすり替わっていないか」「途中でデータが改ざんされていないか」などを確認できたり、通信内容を暗号化することで盗聴されるのを防止できたりするというメリットがあ
オウンドメディアサイトの評価に役立つGoogle Analytics 4のカスタムレポート作成ガイド（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 Google Analytics 4には多様なレポートや機能が備わっており、どれを利用すれば良いか迷うことが少なくありません。複数のレポートを行き来しながら見るのも手間ですし、改善に直接役立ちにくいレポートや指標もあります。 そこで今回は、オウンドメディア向けのGA4カスタムレポートの作成方法と見方について紹介いたします。まずはこのカスタムレポートを見ておけば、各記事の評価が適切に行えるようになります。 カスタムレポートとは？ 作成するカスタムレポート カスタムレポートを見る上でのポイント カスタムレポートの作成方法 最後に カスタムレポートとは？ GA4のレポート内にある機能で、任意のディメンションと指標を選んで表を作成することができます。必要な項目だけを表示することができるため、必要なデータに絞り込むことが可
【公式】攻殻機動隊グローバルサイト
© 士郎正宗・Production I.G/講談社・攻殻機動隊2045製作委員会 © Shirow Masamune, Production I.G/KODANSHA/GITS2045
HTML: ログイン・ユーザー登録フォームの厳選ベストプラクティス11（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/05/24 原著者: Andrey Sitnik（PostCSSとAutoprefixerの作者、首席フロントエンドエンジニア） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに ログインフォームやユーザー登録（サインアップ）フォームは、ほとんどのWebサイトで使
最近のWebサイトやスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利です。
コーダーができるサイトの高速化10選
はじめに この記事では「コーダーが対応できるサイトの表示速度向上」についての具体的な手法を紹介していきます。 サイトの表示速度はユーザー体験を大きく左右し、サイトの種類によってはUI（サイトの見た目）より重要視される場合もあります。 2017年にはGoogleが「ページの読み込み速度によって離脱率が変わる」と発表しました。 ・1〜3秒の離脱率：32% ・1〜5秒の離脱率：90% ・1〜6秒の離脱率：106% ・1〜10秒の離脱率：123% 引用：https://www.thinkwithgoogle.com/ このようにサイトの表示速度はとても重要な指標になります。 サイトの表示速度向上には様々な手法が存在して、効果が出やすいものもあれば出にくいものもあり、実際に本番反映してみないと結果が分からないものもあります。また、難易度や実務上で許可を貰いやすいかなども考えなくてはいけません。 これ
[アップデート]パブリック IP アドレスなしで、EC2インスタンスにSSH接続できる EC2 Instance Connect Endpointがリリースしました | DevelopersIO
EIC エンドポイント作成 EIC エンドポイントを作成します。 VPCエンドポイントの作成から、サービスカテゴリでEC2 Instance Connect Endpointを選択します。 サブネットは、プライベートサブネットを選択します。 Preserve Client IPには、チェックを入れずに、エンドポイントを作成します Preserve Client IPとは Preserve Client IP チェックをいれると、EIC エンドポイントは、ユーザーのクライアントIPを保持できます。 クライアントIPを保持すると、EC2に接続時、ユーザーのクライアントの IP アドレスがソースとして使用されます クライアントIPを保持しない場合、EC2に接続時、プライベートサブネットにあるEC2 Instance Connect エンドポイントのElastic Network Interfac
![[アップデート]パブリック IP アドレスなしで、EC2インスタンスにSSH接続できる EC2 Instance Connect Endpointがリリースしました | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/b78e1b00fb2da19e9cae6ca64621e34b0d3796b7/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2022%2F08%2Famazon-ec2.png)
NGINXは世界で最も使用されているウェブサーバーですが、そのコア開発者の1人がNGINXを所有している会社であるF5 Networksと対立し、NGINXの開発を離れて新たにNGINXのフォーク版である「freenginx」を開発すると発表しました。 announcing freenginx.org https://freenginx.org/pipermail/nginx/2024-February/000000.html NGINXはロシアの開発者イーゴリ・シソエフ氏によって2004年に無料のオープンソースソフトウェアとしてリリースされました。その後、ソシエフ氏はマキシム・ドゥーニン氏およびアンドリュー・アレクセーエフ氏と共同で2011年に商用サポート提供のための会社Nginx Inc.を設立。着実にシェアを伸ばし続け、2024年2月時点では世界中のウェブサーバーのうち34.1％でN
最近、Next.jsが複雑になりすぎて、単なるウェブ画面を作る用途にはNext.jsは重すぎるので別のものが良いとか、Vercel統合のための機能が多いんでしょ、みたいな感想を見かけることが増えた気がします。特に管理画面とか社内システムとかですね。B2Cでも設定画面系とかは当てはまるかもしれません。 ホンダ時代に、タイプRを買っても実際にサーキットとかに走らせに行く人は1/10ぐらい、という話を聞いた気がしますが、必ずしも、そのすべてのパフォーマンスを引き出さないのはダメとかなくて、単にかっこいいからとか、一部のメリットでも自分にあえば良いのです。 Next.jsも、たくさん機能がありますが、ミニマムな使い方もできます。 ほぼNext.jsの機能をオフにした使い方たぶんNext.jsを最低限で使うライン・メリットはここかな、と思います。 基本的に全部CSR(Client Side Rend
WebサイトのログインにPasskeyを追加できる新サービス「Passwordless.dev」、Bitwardenが正式公開。月間1万ユーザーまで無料
オープンソースのパスワードマネージャ「Bitwarden」などを提供しているBitwarden,Inc.は、Webサイトのログイン機能にPasskeyを簡単に追加できる新サービス「Passwordless.dev」の正式公開を発表しました。 WebサイトをPasskey対応にすることで、ユーザーはパスワードを覚えておく必要がなくなると同時に、指紋認証などの手軽な手段でWebサイトにログイン可能になります。さらに、サーバ側でのパスワード流出や、ユーザー側での偽サイトに誘導されるフィッシングなどのリスクがほとんどなくなるというセキュリティ面での大きなメリットもあります。 一方で、WebサイトをPasskey対応にするには、ログインに関わる認証のロジックを従来のIDとパスワードの組み合わせに加えて、Passkey対応を追加しなければなりません。 今回正式公開されたPasswordless.dev
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
改正された障害者差別解消法の施行が迫りつつあり、企業にとってウェブアクセシビリティへの対応は急務といえる状況です。 また、アクセシビリティは法律だけの問題ではありません。Webサービスを展開している企業であれば、サービスを誰でも不自由なく使える状態にしていくためにも、アクセシビリティに向き合っていく必要があります。 今回は、アクセシビリティのテストと自動化における各企業の取り組み事例について、4名のパネリストにLT形式で発表していただきました。本記事では、テストの自動化やツール選定、普段の開発への組み込み方など参考になる情報が盛りだくさんだったトーク内容をご紹介します。 ■パネリスト 安田 慎さん/@syasuda90 株式会社サイバーエージェント AmebaLIFE事業本部 開発局 フロントエンドエンジニア 2016年に中途でサイバーエージェントに入社。フロントエンド開発を担当する傍らア
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する
CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック
CSS @scopeの基礎知識と使い方を解説、セレクタの適用範囲を設定できる
Gitを利用してブログ・サイトのバージョンを管理できる開発者向けのヘッドレスCMS「TinaCMS」を使ってみた
The Front End Developer/Engineer Handbook 2024
便利すぎて反則級、ずるい無料デザインツール・素材80選【2023年ベスト】
【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法 - Qiita
Yahoo! 知恵袋フロントエンドをリアーキテクトしている話
地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました
Twitter/Blueskyの自己ポストの全文検索サービスをNext.js App Router(RSC)で書きなおした方法/設計/感想
Reactの気持ちになって理解するWebパフォーマンスチューニング
デザインの参考になる！ 最近のWebサイトやスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ
NGINXのコア開発者が親会社と決別、新たに「freenginx」という名前でフォーク版を作成開始
管理画面等でNext.jsをBetter Reactとして使う | フューチャー技術ブログ
ウェブアクセシビリティ テストと自動化における挑戦と失敗 - Findy Engineer Lab