Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 なお、この記事では各項目の解説はあまり入れていません。2024年7月10日のClassmethod Odysseyで少し詳しく話そうと思っているので、よかったら聞きにきてください。オンラインなので無料です。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみC
日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。 私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。 そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。 全てのサイトを おすすめ度 サイト内検索の可否 いいね/保存機能の有無 ランキング機能の有無 掲載サイト数 を基準にランクづけし、おすすめできるサイト順に載せているので忙しいという方は、とりあえず上から順にチェックしていただければ大丈夫です！みなさんのデザイン制作に活かしていただけると嬉しいです。 【全サイト徹底比較】超参考になるおすすめギャラリーサイトTOP38 ちょう
本セミナーでは、デザインやITの知識を持たない方でも直感的で使いやすいUIの検討（アプリケーションの画面設計等）を行える方法論をご紹介します。 DXに取り組む企業の増加、ノーコード開発ツールの発展などの背景から、最近、デザインやITの知識をほとんど持たない方が業務用アプリ等の画面をつくる機会が増え…
はじめに こんにちは。Webフロントエンドチームの山口です。 この記事では、N予備校の規約類を microCMS で管理して、運用を改善した取り組みについてご紹介します。早速ですが、前置きは抜きにして本題に入りたいと思います。ぜひお付き合いください！ 背景、前提 N予備校では、基本的な 利用規約 の他、定期的に開催されるキャンペーンの応募規約など、様々な規約を公開しています。 中野信子講座での著書プレゼント企画 受講者参加型お悩み相談企画 総数は年々少しずつ増加しており、記事の執筆時点で23件もの規約が存在します。これらは全てプロダクトのコードベースにハードコードされており、開発チームが社内のステークホルダーから変更依頼を受け付ける形で管理されていました。 新しく規約を追加することもあれば、既存の規約に変更を加えることもあります。開発チームは依頼元と必要なコミュニケーションを取りながら対応
エッジは誰のもの？ - ゆーすけべー日記
CDNの文脈でいうエッジコンピューティングはフロントエンドのものとされることが多い気がするけど、そうじゃない。フロントエンドの技術を使ったバックエンドである。 フロントエンド？ ユーザーに近いところで実行されるという意味ではフロントエンドかもしれない。あと、VercelのNext.jsのように、フロントエンドフレームワークのファンクションがエッジで動くからフロントエンドでしょというのはある。そしてエッジのファンクションはたいていフロントエンドで使われているJavaScriptもしくはTypeScriptで書く。そうするとツールチェーンも、例えば「Vite」と聞いてそれが何であるか？を答えられる人はフロントエンドやってる人の方が多いだろう。 2つのユースケース エッジには2つのユースケースがある。 CDNの機能を拡張する。オリジンありき。 サーバーレスコンピュート。オリジンそのものになる。
Ruby on Browser
ruby.wasm で作ったページの紹介と ruby.wasm の使い方 スライド内のリンク - 文字化けを復元するよ https://tmtms.net/mojibake/ - シャッフル https://tmtms.net/shuffle.html?list=Ruby,Perl,Pytho…
はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl
10年物の長寿プロダクトのバリデーションアーキテクチャを変更した件 - RAKUS Developers Blog | ラクス エンジニアブログ
改善施策を決めるまで 旧アーキテクチャ概要 旧アーキテクチャの問題分析 新アーキテクチャ概要 最後に こんにちは、楽楽販売開発課の岡本です。 弊社では10年を超える長寿プロダクトをいくつも擁していますが、私が担当しているプロダクトもそんな長寿プロダクトの一つです。 さて、どのように優れたプロダクトでも10年以上開発を続けていれば、少なくない量のコード負債を抱えてしまうもので、我々の開発チームでもこの問題に日々悩まされております。 このような状況を打開すべく、昨年9月に開発チーム内に改善専門部隊が立ち上がりました。 本記事では、改善部隊が行った施策の1つである「バリデーションアーキテクチャの変更」を取り上げて紹介しようと思います。 改善施策を決めるまで 先の項でも紹介した通り、我々のプロダクトは少なくない量のコード負債を抱えてしまっています。 ですので、改善部隊が発足時点で改善したい内容はい
Cloudflare を使って polyfill を自動で安全なものへ置き換えましょう | DevelopersIO
先日ブラウザ互換の JS ライブラリである「Polyfill」にマルウェアが混入されて大きな問題となっていますが、Cloudflare であれば対応がワンクリックで実施できます。 ウィスキー、シガー、パイプをこよなく愛する大栗です。 先日ブラウザ互換の JS ライブラリである、「Polyfill.io」にマルウェアが混入されて大きな問題となっています。Cloudflare では、簡単に対策を行えるための機能がリリースされたのでご紹介します。Polyfill の対応がワンクリックで行えます。 JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響 Polyfill について Polyfill はブラウザ間のバージョンの違いなどを無効にするためのライブラリですが、今年の2月に売却されていることが発覚していました。 Cloudflare では、Po
Why Google Sheets ported its calculation worker from JavaScript to WasmGC Stay organized with collections Save and categorize content based on your preferences. Google Sheets is one of the first products at Google to use WasmGC on Chrome. The move was announced in 2022, and the Sheets and Chrome teams partnered on standardization, engineering, and tooling to provide real-time feedback on optimizat
iOSのSafari、AndroidのChromeはそれぞれPCと連携してウェブアプリケーションをデバッグできます。 PCのSafariのWeb Inspector、ChromeのDevToolsと連携すれば、コンソールログやネットワーク、デバッガーなども利用できます。 スマホと繋いでWebサイトをデバッグする方法をまとめたページが見つけられなかったので、メモです。 ネットワークで繋いでデバッグもできたりするので、結構便利です。 Mobile Safari on iOS iOSのSafariは、macOSのSafariと接続してログやネットワークの通信などを見るデバッグが可能です ドキュメント: Inspecting iOS and iPadOS | Apple Developer Documentation iOSのSafariとmacOSのSafariを接続する 初回は次の設定が必要で
JSer.info #697 - Nuxt 2は2024年6月30日でEnd-of-Life (EOL)となることが発表されました。 Nuxt 2 End-of-Life (EOL) · Nuxt Blog Nuxt 2.xの最終版となる2.18.0が6月末にリリースされる予定となっていて、それ以降はセキュリティアップデートも公式には提供されなくなります。 TypeScript 5.5がリリースされました。 Announcing TypeScript 5.5 - TypeScript TypeScript 5.5では、関数からtype predicatesを推論できるようになり、Array.prototype.filterなどでの絞り込みが簡潔に書けるようになっています。 また、Stage 3のSet Methodsをサポート、JSDocで@import {foo} from "foo"を
JSer.info #698 - ECMAScript 2024が正式にリリースされました。 Release ES2024 Candidate February 28th 2024 · tc39/ecma262 ES2024では、Object.groupBy/Map.groupBy、Promise.withResolvers、ArrayBuffers.prototype.resize、Atomics.waitAsyncなどが追加されています。 次の記事でも詳しく解説されています。 Ecma International approves ECMAScript 2024: What’s new? Playwright v1.45.0がリリースされました。 Release v1.45.0 · microsoft/playwright 時間を操作できるClock APIの追加、--fail-on-
JSer.info #696 - Storybook 8.1がリリースされました。 Storybook 8.1 Storyファイルを作成するUIの追加、Subpath importsを使ったモックの対応、Playwright Component Testの対応しています。 pacakge.jsonのimportsフィールドで特定のモジュールを条件分岐して読み分けるための仕組みであるSubpath importsについては、次の記事でも解説されています。 Type-safe module mocking in Storybook Mocking modules • Storybook docs その他には、React 19/Angular 18のサポートなども含まれています。 Turborepo 2.0がリリースされました。 Turborepo 2.0 Turborepoはmonorepo向
週刊Railsウォッチ: Ruby on Jets 6.0がRailsをサポートほか（20240620後編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やX.comでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Rails: 先週の改修（Rails公式ニュースより） 公式更新情報: Ruby on Rails — Better error message, opt-i
週刊Railsウォッチ: Rails 8からPropshaftがアセットパイプラインのデフォルトにほか（20240619前編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Rails: 先週の改修（Rails公式ニュースより） 公式更新情報: Ruby on Rails — Better error message, opt
週刊Railsウォッチ: Active Recordにstrict_loading_mode追加、to_time_preserves_timezoneの扱いほか（20240625前編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やX.comでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Rails: 先週の改修（Rails公式ニュースより） Ruby on Rails — Global strict loading mode setting,
週刊Railsウォッチ: Railsのシステムテストを単体テストに置き換えるほか（20240627後編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やX.comでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Rails 🔗 RubyConf 2024登壇者募集（Rails公式ニュースより） 元記事: RubyConf 2024: Call for Speaker
例えば現代的なフロントエンドを備えた Ruby on Rails 環境で考えると、 1 の builder image は その構築のためには native extension をコンパイルするためのコンパイラ環境と Ruby, Node.js を mix した環境が必要Gemfile, Gemfile.lock, package.json, npm の lock ファイルをもとに必要な依存パッケージをインストールただし、extension のインストール終了後にはコンパイラ環境は不要なので Docker の multi-stage build を利用して最終的には言語ランタイムと必要な依存パッケージのみの image にする（でないと単純に重い）※ Docker image は最小で安全にすべし、みたいな知識だけがあって躊躇している人は躊躇してはいけない。必要なものは必要だし、この bu
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
私がWEBデザイン制作の参考になりそうだと思うサイトを61個挙げてみた。
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
N予備校の規約類を microCMS で管理して、運用を改善した取り組み - ドワンゴ教育サービス開発者ブログ
【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？ - Qiita
Why Google Sheets ported its calculation worker from JavaScript to WasmGC | web.dev
モバイル端末でのウェブアプリのデバッグ方法、Safari on iOS/Chrome on Android
2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果
2024-07-01のJS: ES2024、Playwright v1.45.0、e18e(Ecosystem Performance)
2024-06-13のJS: Storybook 8.1、Turborepo 2.0、Node v22.3.0(Snapshot Testing)
Dockerを利用したアプリケーション構築のためのイメージの役割とビルドについて整理してみた