Introducing Project IDX, An Experiment to Improve Full-stack, Multiplatform App Development
Introducing Project IDX, An Experiment to Improve Full-stack, Multiplatform App Development Posted by Bre Arder, UX Research Lead, Kirupa Chinnathambi, Product Lead, Ashwin Raghav Mohan Ganesh, Engineering Lead, Erin Kidwell, Director of Engineering, and Roman Nurik, Design Lead These days, getting an app from zero to production – especially one that works well across mobile, web, and desktop plat
Cybozu Frontend Day 2023の社内開催と資料公開 - Cybozu Inside Out | サイボウズエンジニアのブログ
主催のkoba04による写真 こんにちは、フロントエンドエンジニアの@shisama_です。 6月30日にサイボウズ東京オフィスで開催された「Cybozu Frontend Day 2023」の資料と開催レポートを公開します。 「Cybozu Frontend Day 2023」は、サイボウズのフロントエンドエンジニアが集まりフロントエンドに関する知見を共有する社内イベントです。 発表資料 発表資料は以下の通りです。発表者が公開している一部の資料については、発表者の許可を得て掲載しています。 Pages RouterとApp Routerでのi18n対応の違い 発表者: @nissy_dev zenn.dev 誰でも簡単⁉️👀 絵文字ができるまで😃👍 発表者: @oguemon_com speakerdeck.com Node Streamでメモリ性能改善、そしてWeb Stream
Intlの今までとこれから
JSConf JP 2023 : 2023/11/19 - https://jsconf.jp/2023/talk/ryusei-sajiki-1/
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
Stay organized with collections Save and categorize content based on your preferences.
当ブログのレスポンシブコーディング施策のまとめです。 メディアクエリよりもコンテナクエリを優先する前回の記事でも触れたようにメディアクエリを一切使わずレスポンシブコーディングしました。 僕がメディアクエリを使用しなかった理由は以下の点が気になっていたからです。 各コンポーネントの状態変化をウィンドウのサイズに依存させるのは都合が悪い。実装者はウィンドウのサイズとにらめっこしながらデザインを調整する必要があり、非常に面倒。ある程度の的確な位置・間隔でブレイクポイントを用意するコーディングは効率的だが、全ての画面サイズで完璧な表示を実現するのが難しい。必ずどこかしらのサイズで見た目を妥協しないといけなくなってくる。ウィンドウのサイズではなく各コンポーネントのサイズを基準にデザイン調整するなら、どのように配置されるかを細かく考える必要がなくなる。代わりに、それぞれのコンポーネントが含まれるコンテ
ナビゲーションリスト ナビゲーションリストは、主にメニューやリンクの一覧を整理して表示するためのUI要素です。自分が今どのページを訪れているのかを示すことによって、ユーザーはウェブサイトの構造や階層を理解しやすくなります。 ▼ 実装例（一部抜粋） <li><a href="#">CSS</a></li> <li><a href="#" aria-current="page">JavaScript</a></li> <li><a href="#">その他</a></li> ▼ スクリーンリーダー（VoiceOver） aria-current="page"を指定した要素は「現在のページ、リンク、JavaScript」と読み上げられます。また、リンクが一度でもクリックされていたら、「閲覧済み」という音声が追加されます。 ▼ スクリーンリーダー（ナレーター） 「リンク、JavaScript」と読
A content-first Web framework Nue is a closer-to-metal framework embracing minimalism and web standards. It's structurally clean and stupidly fast. Get started Product roadmap Content-first: Build entire sites without ever leaving your content Vision The ultimate goal of Nue is to build a perfect web framework, which is ridiculously fast and easy to use. Nue JS Server-side templating and reactive
フロントエンド開発のためのテスト入門書評
はじめにlink 2023/04/24に発売された「フロントエンド開発のためのテスト入門」を読了したので、読みながらとったメモをもとに感想や自分の考えと違ったところなどをまとめる。 Amazon 全体的に非常に参考になる内容が多いが、特に後半にいくにつれて加速度的に参考になる内容が増え非常に良著であると感じた。 実践Node.js入門でもテストはある程度量をとって記述しているが、テストそのものがメインではないため情報や考え方として落ちている内容の多くがこの本で補完されている。自著を読んだ人には同時に本書もおすすめしていこうと思っている。 Amazon 自分はフロントエンドのテストはバックエンドに比べて優先度が低くなる傾向にある。 これは自分が扱うサービスがtoB系が多く、表示崩れなどがサービス継続上致命的になりにくいため、気づいたベースで最速で直せる環境があればよいと考えているため。 また
How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile Stay organized with collections Save and categorize content based on your preferences. Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation. It significantly improves the browsing experience for users, especially for websites that involve many back and forth naviga
2023年6月27日に開催されたFLEXY meetupのテーマは「フロントエンドのテスト」です。 技術の進化とともにバックエンドとフロントエンドが疎結合になる今、フロントエンド領域ではテストの重要性が高まっています。 一方、現場レベルではテストコードを書いたことがなく、何から始めるべきなのか悩みを抱えているエンジニアは多いのではないでしょうか。 そこで今回は、実際にフロントエンドのテスト導入を行っている古川さん、nus3さんの2名がディスカッション。「フロントエンドテストはじめの一歩」として今、何ができるのかを実例も交えながら教えていただきました。 イベント概要 技術の進化に伴い、アーキテクチャレベルでバックエンドとフロントエンドが疎結合になった今、フロントエンド領域におけるテストの重要性について注目が集まっています。 一方でまだ手法が広まっておらず実際にテストコードを書いたことがないた
![フロントエンドテストはじめの一歩 [FLEXY meetupイベントレポート] - FLEXY（フレキシー）](https://cdn-ak-scissors.b.st-hatena.com/image/square/61e23c19faa14a56ce4e6b940ca5ce2e6f726ac8/height=288;version=1;width=512/https%3A%2F%2Fflxy.jp%2Fmedia%2Fwp-content%2Fuploads%2F2023%2F07%2F3bfdf32ad90ed12f36456c563abc807d-e1689937462143.png)
unjs/nitro+satori+sharpで動的OGP画像を自動生成する - くらげになりたい。
Nuxtだと、Nuxt SEO Kitのnuxt-og-imageを使えば、 vueコンポーネントとかHMLTをOG画像にできるけど、 unjs/nitroでもできないかなと思い、 いろいろ調べてみたときの備忘録(*´ω｀*) nuxt-og-imageの中をのぞいてみたら、 satoriとsharpを使ってたので、それを参考に実装してみた satori+sharpを使った画像生成 この3つのライブラリを使うと、HTMLをPNGに変換できるっぽい vercel/satori ... ReactNode(VNode)をSVGに変換 lovell/sharp ... SVGをPNGに変換 natemoo-re/satori-html ... HTMLをVNodeに変換 satoriはVercel社が出しているライブラリで、JSX形式で利用するっぽい。 なので、HTMLといってもReactNod
*1. 画面に表示されるがコンソールにエラーが出る。 Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string. *2. 画面には表示されずコンソールにワーニングが出る。 [Vue warn]: Invalid VNode type: undefined (undefined) *3. Chrome だと以下の形式（実行環境によって異なる可能性あり）。 Mon Jan 01 2024 00:00:00 GMT+0900 (GMT+09:00) *4. ランタイムエラー。 Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you
はんずおんVitest
Next.jsとKtorとLaravelの周辺知識について書きます。最近は「負債になりにくい設計」「どうすればアプリケーションの品質を高められるか？」「どうすればアプリケーションを安定かつ安全かつ効率的に動かせるのか？」に関心があります。 アイコン▶︎Twitter@amon_mikio。
🏆 結論 「とりあえず ref を使えばいい！」 おしまいです。ref でできないことはありません。 注意点として補足しておくと、これは「Vue.js が ref を推奨している」「迷ってるならとりあえず ref を使っておけばいい」という話であって、reactive をはじめとする他の Reactivity API が非推奨だという話ではありません。 reactive がケースによって便利であることは Evan 氏なども認めており、そもそも Vue.js には厳密なルールがあるわけではないので、結局は自分の手に馴染むものを選択していくのが良いと思います。 なので、究極的な結論としては「とりあえず ref ファーストで考えておいて、なんらかしらの理由で reactive を使いたいなら別にそれも良い」という話になりますが、特別な理由がない場合は ref の方が推奨されます。 🚩 はじめ
【Unit4 ブログリレー 1日目】 Viteは"ヴィート"と読みます♫ もう覚えましたね♫*1 こんにちは、エムスリーエンジニアリンググループの山田(@Satoki_1226)です。 本日より、Unit4でもブログリレーを行うこととなりました。Unit4は医療系ポータルサイト m3.com の開発・運営を担当するチームです。Unit4エンジニアがリレー形式でテックブログを執筆し、どんなメンバーがいるのか・どのような開発をしているのかなど、ご紹介できればと思います。 トップバッターである私からは、m3ラウンジというサービスのVite移行時に得られた知見をもとに、 Vite/Vitestへの移行によって感じた「速さ」 移行時の手順とポイント をお伝えできればと思います。Viteが気になっている方や、Vite移行の進め方に困っている方にとって少しでも参考になれば幸いです。なお掲載しているサンプ
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
はじめに vue公式の拡張機能のバージョンアップにより、VSCodeで開発するときに推奨される拡張機能や設定に変更がありました。 非推奨の設定のままの人は、多分以下のような通知が出てると思うので、直しましょう。 今までの推奨設定 Vue - Officialをインストールする TypeScript Vue Plugin (Volar)をインストールする テイクオーバーモードを有効にする 今後の推奨設定 Vue - Officialをインストールする 新しく設定する人がやること Vue - Officialのインストール Vue - Officialをインストールする 今までの推奨設定をしていた人がやること TypeScript Vue Plugin (Volar)のアンインストール TypeScript Vue Plugin (Volar)が非推奨になったので無効に、もしくはアンインストー
![[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/f28ba34c6e547e0c824adf322d8478550799e91c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--AjgvUUB7--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B2024%2525E5%2525B9%2525B43%2525E6%25259C%2525882%2525E6%252597%2525A5%25255D%252520Vue3%25252BTypeScript%2525E3%252581%2525AE%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E6%2525A7%25258B%2525E7%2525AF%252589%2525E3%252581%2525A7%2525E6%25258E%2525A8%2525E5%2525A5%2525A8%2525E3%252581%252595%2525E3%252582%25258C%2525E3%252582%25258B%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A8%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%2525E3%252581%25258C%2525E5%2525A4%252589%2525E3%252582%25258F%2525E3%252581%2525A3%2525E3%252581%25259F%2525E3%252582%252588%2525E3%252580%252582%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Asimo%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2YyYTk1ZTA4YmUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
7 principles for rich web apps And how next.js achieves these principles
ジャムスタックチョットデキル 2023/09/09
React + CSS Modules なプロジェクトを例にサンプルコードを書いてるけど、それ以外の構成のプロジェクトでも使えるテクニックのはず。記事タイトルは id:hitode909 さんの 似ているけどちょっと違うものたちをモデリングする技術 - hitode909 のリスペクトです。 data 属性, 属性セレクター, CSS カスタムプロパティを使う 記事のリストがあって、記事のカテゴリごとに文字色やボーダーの色を変えたい、みたいな状況だったとする。多分素朴に書くと以下のようになるはず。 import styles from './Entry.module.css'; import clsx from 'clsx' function Entry(props) { return ( <div className={ clsx(props.category === '暮らし' ? s
GitHub - m31coding/fuzzy-search: A fast, accurate and multilingual fuzzy search library for the frontend.
import * as fuzzySearch from './path/to/fuzzy-search.module.js'; const searcher = fuzzySearch.SearcherFactory.createDefaultSearcher(); const persons = [ { id: 23501, firstName: 'Alice', lastName: 'King' }, { id: 99234, firstName: 'Bob', lastName: 'Bishop' }, { id: 5823, firstName: 'Carol', lastName: 'Queen' }, { id: 11923, firstName: 'Charlie', lastName: 'Rook' } ]; const indexingMeta = searcher.i
React 化した共通ヘッダーを kintone の全ページに適用しました！ - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！kintone フロントエンドリアーキテクチャプロジェクト (フロリア) で、エンジニアとして活動している @nissy_dev です。 以前投稿したチーム紹介記事の中で、コンポーネント単位での共通ヘッダー部分の React 化に取り組んでいることを紹介しました。それから約半年の期間を経て、React 化した共通ヘッダーを全ページへ適用することができました。kintone の７月版のアップデート情報にも記載されています。 今回は、このリリースの流れや技術的な詳細について紹介したいと思います。技術的な内容については、昨年の 12 月にマイクロフロントエンドに挑戦しているという記事を公開しているので、マイクロフロントエンドを実際に適用してみた感想などにも触れたいと思います。 目次 React 化した共通ヘッダーの全ページへの適用 リリースの詳細な流れ Closure Tools に
日本CTO協会から、プロダクトのユーザー体験と変化に適応するチームのためのガイドライン『Webフロントエンド版DX Criteria』を4月24日に新公開
日本CTO協会から、プロダクトのユーザー体験と変化に適応するチームのためのガイドライン『Webフロントエンド版DX Criteria』を4月24日に新公開 一般社団法人 日本CTO協会(本社：東京都渋谷区／代表理事：松岡剛志、以下：日本CTO協会)は、Webフロントエンド版DX Criteria（プロダクトのユーザー体験と変化に適応するチームのためのガイドライン）を2024年4月24日に公開しました。 Webフロントエンド版DX Criteria（プロダクトのユーザー体験と変化に適応するチームのためのガイドライン） https://dxcriteria.cto-a.org/frontend Webフロントエンドの技術環境は日々変化しており、プロダクトを構成する技術要素だけではなく、ユーザーの利用端末や通信環境、要求も変化し続けています。その変化の速さに企業や団体の組織変革やWebフロントエ
デジタルコンテンツにおけるアクセシビリティ、特にコントラストの基準について解説する連載の第2回目です。前回の記事では、現在のWCAG2のコントラスト基準と課題について解説しました。今回はWCAG3で採用が検討されている新しいコントラスト基準、APCAについて解説します。 APCAとは WCAG 2.0でコントラストの基準が策定されて以降、ディスプレイやWebコンテンツ、CSSの機能、および視覚科学の進歩など様々な状況が変化しました。WCAGの基準についても、コントラストや視認性についてより知覚を正しくモデル化するガイドラインが求められるようになりました。 APCA（Advanced Perceptual Contrast Algorithm）はWCAG3にて現行のコントラストに代わる基準として開発・検討されている、新しいコントラスト基準です。前回紹介したようなWCAG2の基準の課題に応える
Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン
Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン
「ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット」 https://trident-qa.connpass.com/event/308664/ の登壇資料です。
Safetest is a powerful UI testing library that combines Playwright, Jest/Vitest, and React for a powerful end-to-end testing solution for applications and component testing. With Safetest, you can easily test the functionality and appearance of your application, ensuring that it works as expected and looks great on all devices. Safetest provides a seamless testing experience by integrating with yo
2024年5月11日（土）に開催された TSKaigi 2024 のセッションで発表したスライドになります。 Vue3がリリースされ、早くも4年弱経とうとしています、Vue2のLTSも2023年末に終了し、新規開発ではVue3を利用することが主流となってきました。 Vueと並ぶフレームワークとしてReactがありますが、未だにReactと比較される際、TypeScript対応が…という噂がたまに聞こえてきます。しかして、Vue3とTypeScriptの親和性は実際のところどうなのでしょうか。Piniaやその他ツールチェイン側などと共にVue3の機能や実際の実装例とともにVue3とTypeScriptの親和性の疑問を解消できるような発表にできればと思っています。 https://tskaigi.org/talks/karan_corons
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号)
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号) こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの @nus3_ です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/08/01 の Frontend Weekly で取り上げた記事や話題を紹介します。 How React 18 Improves Application Performance – Vercel React18で新しく導入されたTransitions、Suspense、React Server Componentsなどをパフォーマンスの観点から解説しています。React17以前とReact18
こんにちは。ひらやまです。 今回は、これまでフロントエンド環境を作ったり、運用したり、設計のアドバイスをしたりしてきた私がひとまずたどり着いた、このくらいの塩梅の設計が良いのではないかと考えている一つの案をみなさんに共有しようと思います。 フロントエンド設計の必要性 フロントエンドは JSON 色づけ係と言われることもありますが、ただ JSON をきれいにしてユーザに見せる以上の難しさを感じることもあるのではないでしょうか。 実装を完遂するために必要となるスキルが広いため、様々なバックグラウンドを持つ人がコードを書くことになりやすいです。フロントエンドエンジニアと呼ばれる人も、私みたいにマークアップエンジニアからフロントエンド領域に手を伸ばした人もいれば、デザイナーやバックエンドエンジニアなどの領域からこの環境に挑戦される方もいらっしゃいます。 このような様々な背景を持つ人たちが一つのコー
私たちはStorybookとChromaticを活用してデザインシステムを運用しています。本記事では私たちがどのようにStorybookとChromaticを活用しているのか紹介します。 私たちが作ってるデザインシステムに自体ついては下記の記事をどうぞ。 StorybookとChromaticの簡単な紹介 Storybookは、コンポーネントを開発、テスト、管理するためのOSSツールです。私たちは、コンポーネントの動作を確認し、ドキュメンテーションを充実させるために、Storybookを中心に使用しています。Chromaticはこれを補完し、Visual Regression TestingやUIレビューを効率化します。 私たちのデザインシステムでも活用しています。Storybook上でコンポーネントの動作を確認できるため、実環境と分離したコンポーネントの動作確認ができ、コンポーネントのさ
はじめに 最近なにかと話題のTailwindCSSですが、個人的には結構手に馴染むし、何よりもUI構造とスタイルをセットにできるところがかなり好きだったりします。 ただしTailwindCSSはその便利さゆえに自由奔放に書くことができてしまうため、無秩序なUIコンポーネントの定義ができてしまったりします。そういった状況を数々経験してきた方々は、あまりTailwindCSSをよく思わないかもしれません。 個人的には「TailwindCSSは、ルールを守って運用できれば楽しくUIコンポーネントの実装ができる」のかなと思ったりします。 今回は楽しいTailwindCSSを用いた開発を実現するために、守るべきお作法を共有できたらと思います。 個人的Tailwindcssお作法の四箇条 今回紹介したいTailwindCSSのお作法は、以下の四箇条です。 classNameは見やすさ重視で改行すべし
オーバーレイ ファクトシート
Webアクセシビリティ オーバーレイとは何ですか？オーバーレイは、Webサイトのアクセシビリティを向上させることを目的とした技術の総称です。サードパーティのソースコード（多くはJavaScript）を読み込み、フロントエンドコードを改善します。 アクセシビリティの向上を謳うWebサイトのアドオン製品は、1990年代後半に登場したReadspeakerやBrowsealoudに遡ります。これらは、インストールされたWebサイトにテキストの読み上げ機能を追加するものでした。 その後、そのようなソフトウェアに機能を追加した類似製品が、市場に出回るようになりました。それらは、読みやすさを向上させるために、ユーザーのニーズに基づき文字サイズや色などをコントロールするものです。 最近のオーバーレイ製品のなかには、支援技術からのアクセスのしやすさを妨げる問題を修正することを目的としているものがあります。
Elly Loel Front-end development’s identity crisis 🔗 https://ellyloel.com/blog/front-end-development-s-identity-crisis/ Created on March 29, 2024 •Last modified on March 29, 2024 • Complete • BlogWorkingWeb design I’m not a “[full-stack] developer”, regardless of what my last job title says. I’m not even a front-end developer, thanks to the JavaScript–industrial complex. I’m a front-of-the-front-e
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回は、MisskeyでUIフレームワークとして採用している、Vueの実験的な脱仮想DOM実装であるVaporモードの開発状況を紹介します。 仮想DOMとは 今日、一般的なWebのUIフレームワークでは仮想DOM（Virtual DOM, VDOM）と呼ばれる技術を採用していることが多いです。 Webでは、JavaScriptからHTMLを操作するためのインターフェイスとしてDOMが用意されていますが、仮想DOMを採用するフレームワークではこのDOMを直接操作するのではなく、一旦独自に仮となるDOM（V-tree）をメモリ上に構築し、操作する必要のあるHTML要素を特定して効率的にDOMを変更（patch）します。 しかし、UIが複雑になってくると仮想DOMも大き
TypeScriptのサポートが強化されたVue3.3の新機能とは？──PropsとEmitsに関する新機能を解説【前編】
Vue3、すなわち、Vue.jsのバージョン3がリリースされたのが3年前の2020年9月です。そのVue3が、Vueプロジェクトのデフォルトになったのが、2022年2月です。その時点でのVue本体のバージョンは3.2です。それから1年以上が経過した2023年5月11日に、Vue3.3がリリースされました。本稿では、前編と後編の2回にわたって、このVue3.3での新機能をまとめて紹介します。前編である今回は、PropsとEmitsに関する新機能を紹介します。 TypeScriptとの親和性を高めるアップデート Vue3.3によって導入された新機能を紹介する前に、このアップデートの趣旨をまず紹介しておこうと思います。 Vue3.3アップデートの趣旨 Vue.jsの開発者であるEvan Youによると、3.3にアップデートを行うにあたって、その一番中心に据えたのが、TypeScriptによるコー
Next.js 14 リリースなど: Cybozu Frontend Weekly (2023-10-31号)
はじめに こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。 サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/11/31 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Rspress, the Rspack-based static site generator Rspack ベースの Static Site Generator である Rspress の v1 がリリースされました。 i18n 対応やコンポーネントのプレビューなど、様々な機能が盛り込まれているようです。 Faster TypeScript builds with --isolatedDeclarations TypeScr
Mac と Windows に無償で付属してくる日本語フォントに「游ゴシック」があります。両環境で共通して利用できる希少な「日本語」のデバイスフォントであることから重宝され、ウェブサイトでもCSSのローカルフォント参照で利用されるケースがありました。 「サイトの書体に “游ゴシック” を適用させるCSS記述方法」のような記事は最近になっても大変多く、あたかもMac・Windowsの全てのブラウザで表示可能と錯覚してしまいがちなのですが、 結論から言うと Mac の Safari・Brave・Firefox（プライベートウィンドウ）ではもうローカルフォントとしての「游ゴシック」をウェブサイトの表示に使うことはできません。（Safariにおいては5年前の macOS Mojave 以降から使えなくなっているはず…。） フィンガープリントなぜそんな事態になっているかと言うと、最近のブラウザ界隈の
State of CSS 2023 の結果公開など : Cybozu Frontend Weekly (2023-08-29号)
State of CSS 2023 の結果公開など : Cybozu Frontend Weekly (2023-08-29号) こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2023/08/29 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 <search> が Chrome118 で実装予定 検索や絞り込み要素に関するコンテナ要素である <search> が Chrome 118 で実装予定とのことです。Firefox や Safari にはすでに実装済みのため、メジャーブラウザの多くで利用可能になります。 Fresh 1.4
Storybook 8 Beta
🚀Update March 12: Storybook 8 is out now!Storybook 8 is now available to try in beta! This latest release continues Storybook’s quest of giving you an instant-on, seamless environment for frontend development. Check out the release highlights and try the beta release today! 🚀 Major performance improvements 🆕 Visual tests workflow 📱 Polished mobile UI 🔬 Improved test utilities ⚛️ React Server
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
Learn Testing | web.dev
当ブログのレスポンシブコーディングについて ｜ TAKLOG
アクセシビリティーに考慮するHTMLコーディング - WAI-ARIAでスクリーンリーダーの読み上げがこう変わる - ICS MEDIA
Nue: The content-first web framework
How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile | web.dev
フロントエンドテストはじめの一歩 [FLEXY meetupイベントレポート] - FLEXY（フレキシー）
【徹底比較】Vue.js と React でレンダリングされる値、されない値
「ref と reactive」 結局どっちを使えばいいのか？ (2024 年最新版)
ViteとVitestで開発のリズムを上げる - エムスリーテックブログ
OpenAI、JavaScript/TypeScriptランタイム「Deno」の公式SDKをリリース
[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。
似ているけどちょっと違うものをスタイリングする CSS テクニック - mizdra's blog
第2回 WCAG3のコントラスト基準APCAの考え方と実例 | gihyo.jp
VRTツールのダークホース Lost Pixelを紹介したい
GitHub - kolodny/safetest
サービス開発におけるVue3とTypeScriptの親和性について
いい塩梅を目指したデザインエンジニアによるフロントエンド設計 - estie inside blog
デザインシステムのStorybookとChromatic活用の紹介
【提案】TailwindCSSの新お作法、一旦これにしませんか？
Front-end development’s identity crisis
Vue Vaporモード近況 | gihyo.jp
ウェブサイトでローカルフォントの「游ゴシック」はもう使えない｜Takehiko Ono