以前当ブログで紹介した時からずっと愛用しているEagleがver.2に神アップデートしたので、改めて紹介したいと思います。 簡単に言うと、フォント（ttf,otf,ttc,woffも）、画像（jpg,png,gif,svg,webpはもちろん、raw,psd,ai,xd,sketch,clipも）、動画、音声、PDFやテキストも管理でき、タグ付けやフォルダ分けやカラーフィルターなどで整理も簡単できるアプリです。 Windows, macOS（M1対応）に対応したアプリで、1ライセンスで2つ使用でき、サブスクではなく買い切り、しかもバージョンアップの追加料金なしです。 ver.2が先日リリースされ、ver.1の人は無料でアップデートできます！ Eagle Eagleとは Eagle ver.2の神アップデート Eagleのダウンロード・インストール Eagleの使い方 Eagleとは Eag
500点出す！ - ゆーすけべー日記
「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内（サイバーエージェント）向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日（17日）、ついに500点満点を出しました！ たぶん、レギュレーションはクリアしている、はずです（もし違反してたらすいません…）。 自動で行われる「Visual Re
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
Merpay Advent Calendar 2019 の2日目は @1000ch (id:hc0001) がお送りします。この記事は2019年11月16日に福岡で開催された Frontend Conference Fukuoka 2019 のセッション、HTML Optimization for Web Performance の書き起こし記事です。 docs.google.com なぜ HTML の最適化が重要なのか 先日公開された Chromium Blog: Moving towards a faster web をご覧になられたでしょうか。Google は Web ページのパフォーマンスの重要性を様々な形で啓蒙してきましたが、この記事では Chrome のもとになっている Chromium に、Web ページのパフォーマンスをブラウザ UI として表示する機能を追加し、ユーザーが
先般、当協議会所属のフォント技術のエキスパートから、MJ明朝体フォントをWOFF化するサービスを提供しているサイトがある、MJ明朝体フォントの使用許諾契約に違反しているのではないか、との指摘があった。事務局長や対外窓口をお願いしている理事の方とも相談して、このサイトのオーナーに連絡を取り、MJ明朝体決め打ちのサービスについては、公開を差し控えていただいた。 ぼく的には、フォントをWOFF化するサービスの必要性もよく分かるし、協議会としても、WOFF化やサブセットフォントの提供など、協議会として直接行うか、協議会メンバーのフォントベンダー各社にビジネスとしてやっていただくかも含めて、具体的な方策を検討しているところだ。 ちょうどいい機会なので、MJ明朝体フォントの使用許諾契約書の成立の経緯と、ついでに、フォントの知的所有権を巡るず〜っと以前のぼくの経験を書き記しておきたい。 そう考えて、経緯
gzip圧縮だとあまり圧縮できていなく、スライディングウィンドウが小さいせいかなと思ったのですが、実際に大きさがかなり違うみたいなので、それが原因としてありえそうです。 Gzip uses a fixed size, 32KB window, and Brotli can use any window size from 1KB to 16MB, in powers of 2 (minus 16 bytes). This means that the Brotli window can be up to 512 times larger window than the deflate window. Results of experimenting with Brotli for dynamic web content - The Cloudflare Blog AudioContextの
簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは？ 実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整（カーニング）ができます。 はじめに：ベタ組みと文字詰め 日本語フォントは基本的にベタ組み（等幅）で読みやすいように設計をされています。長文を読むにはベタ打ちのほうがリズムよく読めて疲れないので、本文などはベタ打ちのままのほうがよい場合が多くあります。 それでもフォントサイズの大きい見出しなどでバシッといい感じに決めたい場合もありますよね。個人的には記事のタイトルが並んでいるなかで、カッコから始まるものが混じっているときなどは、「んぁ〜」
追記) v10.2からデフォルトでGoogle Fontsの最適化が行われるように Next.js v10.2から自動でWebフォントの最適化が行われるようになりました。v10.2時点ではGoogle Fontsにのみ対応しているとのことです。特に設定は不要で、いつも通りGoogle Fontsを読み込めばOKです。 ↓ 詳細 これより下の解説は古い内容になります。実装の参考にしないようお願いします。 以前、Next.jsのリポジトリを眺めていたときにFont Optimizationsというプルリクエストを見つけました。 2020年12月時点ではExperimantalな機能のようですが、v10.0.4で既に使えるようになっていたので試してみました。 :::message alertz Next.js v10.0.4でのドキュメントに則っていない記録になります。 ::: Font Opt
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう | Recruit Tech Blog
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう wakamsha Vite （ヴィート）とは Vue.js の作者である Evan You 氏が中心となって開発されているビルドツールです。 Vite - Next Generation Frontend Tooling ES Modules 形式のままブラウザからインポートする Dev サーバを搭載し、ソースコードをバンドルすることなく高速で動作させるのが特徴です。もちろん npm パッケージもブラウザから読み込み可能な ES Modules 形式に変換します。プロダクションビルド時は Rollup を使ってバンドルします。 Vue.js だけでなく React、Preact、Svelte のビルドもサポートしており、GitHub トレンドの上位にも頻繁に登場している
クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT（Flash of Invisible Text）か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT（Flash of Unstyled Text）のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、
だれかWebのチョットワカル人、 「(日本語など大容量の)Web FontのCore Web Vitalsへの影響 使い続ける方法とその是非」 を記事に書いてほしい。。。 preload頼りでいいんだろうか。どのくらい失敗するんだろうか…… — 辻正浩 | Masahiro Tsuji (@tsuj) January 20, 2021 私自身も、WebフォントがどれくらいCore Web Vitals影響するのか、影響を回避しながらWebフォントを使う方法がハッキリ分かっていなかったので、調査してみました。 本投稿はWEB上から入手できる情報源をもとに内容をまとめています。情報の正確性には留意していますが、私の独自の解釈・予想も含まれています。以上から、本情報はいち見解として捉えていただきますようお願い致します。WebフォントによるCore Web Vitalsへの影響とはCore Web
SECURITY IS AWESOME SECURITY IS AWESOME I write about security and privacy. I regularly post original security research, custom tools, and detailed technical guides. Companies selling "security scorecards" are on the rise, and have started to become a factor in enterprise sales. I have heard from customers who were concerned about purchasing from suppliers who had been given poor ratings, and in a
Webフォントの表示を最適化するテクニック
Webページに表示するフォントは通常、システムフォントとWebフォントの2種類があります。システムフォントはOSにインストールされているフォントで、Webフォントは表示用にフォントファイルを用意する必要があります。 WebフォントはさまざまなフォントをWebページに使用できるというメリットがありますが、パフォーマンス面でシステムフォントに劣るので使用を控えている人もいるかもしれません。Webフォントのフォントファイルを調整し、読み込みを最適化し、最大速度と最小のFOUTを実現するテクニックを紹介します。 5 steps to faster web fonts by Iain Bean 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Webフォントには最新のファイルフォーマットを使用する 2. font-displ
この記事では、「もっと早く知りたかった」と思ってしまう、Web制作が加速する便利な最新オンラインツールをまとめてご紹介します。 面倒な設定をコピペで利用できるCSSツールや配色ツール、人工知能を使った便利ツールなどが数多く公開されており、ますますクリエイティブな表現が広がりそうなものばかり。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレスの少ない快適な作業フローを実現してみてはいかがでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール 2. 配色ツール 3. デザインツール 4. プロトタイプ・アイコンツール 5. フォント・書体ツール 6. クリエイティブ・面白ツール 2021年のベストツールも一緒にどうぞ。 Web制作を変える！2021年の便利オンライ
Web フォントを使って contenteditable から脱出する - LINE ENGINEERING
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINE フロントエンド開発センターの玉田です。突然ですが、本日よりフロントエンド開発に携わる UIT のエンジニアが持ち回りで記事を公開する「UIT 新春 Tech blog」を開催します。 UIT のメンバーが普段の業務で得た知識や、年末年始でたまった知見などを共有していきます。本記事の公開から 1 月 28 日 (金) まで、平日の毎日違うメンバーが記事を公開していきます。ぜひ最後まで見に来てください！ トップバッターは私から、フロントエンドエンジニアを悩ませる contenteditable からの脱却についてです。 contenteditable の呪い みなさんは contenteditable につい
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
エクサウィザーズでAIプロダクトのUI/UXデザイナーを担当している吉田です。前回はデザインシステムのアルゴリズムを活用したカラーパレット開発についてご紹介しました。今回はアイコンのデザインをどのように定義していったかのプロセスをご紹介します。 デザインシステムを開発する前の状態エクサウィザーズは 2016年に AI スタートアップ会社として起業してから、「AIを用いた社会課題解決を通じて幸せな社会を実現する」というミッションのもと、10 個以上の AI プロダクトを開発してきています。 社会に新たな価値を早く届けようと、それぞれのチームがスピード感をもって開発してきたという背景もあり、プロダクト間の UI デザインの一貫性を保つ取り組みに手をつけられないままこれまで駆け抜けてきました。 例えばアイコンでは、Material Icons を使用していたり、Font Awesome を使用し
限界を極めた内定者が語る！ Web Speed Hackathon 2022 戦略と秘訣 | CyberAgent Developers Blog
本記事は CyberAgent Developers Advent Calendar 2022 21 日目の記事です。 2023 年度入社予定の加藤 零(@cut0_) です。現在は株式会社 WinTicket で内定者アルバイトをしています。Web Speed Hackathon 2022 Public では 499.1 点を記録しました。 お疲れさまでした！ 届かなかった残り 0.9 点を噛み締めて社会人エンジニアを迎えようと思います。 CDN 使わずに Heroku 単体でもここまで戦えます！！https://t.co/ikVmhml6iq #WebSpeedHackathon — レイ (@cut0_) November 27, 2022 本記事では、Web Speed Hackthon 2022 Public で取り組んだことに加え、これから Web Speed Hacktah
Source Han Sans（日本語名称：源ノ角ゴシック）がバリアブルフォントに 源ノ角ゴシックがバリアブルフォントに。最小値から最大値の間の数値で表現される連続したウェイトを自由に使え、ニーズに応じて微妙なタイポグラフィの変化や効果を作り出すことができます。 2010年代初頭のある日、Googleはアドビに、東アジアの幅広い言語をサポートするオープンソース書体の共同開発という、野心的な提案を持ちかけました。当時アドビは、幸運にも（あるいは時代の流れとして）すでにそのような書体を開発しているところでした。そこで両社は、世界初のオープンソースのPan-CJK（中国語、日本語、韓国語で共用できる）書体をデザイン、開発するために協力することにしたのです。その取り組みは、Source Han Sans（GoogleからはNoto Sans CJKとしてリリース）として実を結びました。本日、アドビ
My current HTML boilerplate posted on 09.04.2021 Every element I use for the basic structure of a HTML document, with explanations why. Traducción a Español by www.ibidemgroup.com. Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate. Recently I didn’t start a new project, but I had to document
はじめまして、フロントエンドエンジニアの minamo です。 趣味は映画鑑賞、特にアクション映画が大好きです。 今年は「イップ・マン外伝マスターZ」、「ジョン・ウィック : パラベラム」、 「HiGH&LOW THE WORST」と最高アクション映画が豊作でうれしいですね。 2月に astamuse にジョインしてから初めてのブログで、好きな映画以外書くことが思い浮かばなかったのですが、最近「バリアブルフォントがおもしろい！」と思ったので、ご紹介します。 バリアブルフォントって何？ バリアブルフォントとは、Adobe・Apple・Google・Microsoftが共同で開発したフォントの規格です。 Variable = 可変フォントとも呼ばれていました。 通常のフォントは字幅やウェイト、斜体などによってファイルが分かれていますが、バリアブルフォントだとそれらが ひとつのフォントファイルで
Intro WebFont を読み込む際に、取得完了までのラグを、システムが持つフォールバックフォントで代替する場合がある。 このとき、フォールバックフォントと読み込んだ Web フォントで、高さに関する情報が異なる場合、 Layout Shift が発生してしまう。 これを防ぐ方法として、 CSS からフォントメトリクスの上書きを行う仕様の提案が行われているため、本サイトへの適用を目指し検証を行った。 なお、この仕様は Layout Shift ではなく、単純にテキストレイアウトスタイル用途での利用も考えられるが、そこはスコープ外としている。 Font metrics override これらの値を @font-face で指定する。 @font-face { font-family: "helvetica-override"; src: local("Helvetica"); asce
Figma でアイコンを更新したら GitLab に勝手に MR が作られるやつ - pixiv inside
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。最近は社内のデザインシステム整備の仕事もやっており、今回はそちらで作っているアイコンライブラリの話をします。 SVG アイコンを社内 npm で配る みなさん、プロダクト内で利用するアイコンをどのように管理していますか？ 大抵の場合は元になる .svg ファイルが存在し、それを最終的に React コンポーネントで読んだり、あるいは昔ながらのアイコンフォントを生成したりして使っているでしょう。 ピクシブではこれまで各プロダクトがそれぞれの方法でアイコンを生成していました。あるプロジェクトは svg スプライトを生成して <use> タグで読み、またあるプロジェクトは svgr を使い、これまたあるプロジェクトでは woff を生成する npm スクリプトを持ったりしています。 実装方法
この記事では、文字テキストを入力するだけでおしゃれな雰囲気を表現できる、最新の英語・日本語フリーフォントをまとめています。 人気の高い手書きや筆記体スタイルの他に、ポップでかわいいフォントや使い勝手の良いゴシックフォント、毛筆、かっこいいフォントなど幅広いセレクションが揃います。 紹介しているフリーフォントはどれも無料ダウンロードが可能となっていますが、利用の際には一度ライセンスに目を通すようにしましょう。 商用ライセンス付の期間限定プレミアム日本語フォント集 クライアント向け案件でも利用できる、商用ライセンス付きのフォントを探しているひとは、4月7日までの2週間限定特別セールも活用してみましょう。 大活躍！コミックフォントコレクション – Design Cuts Japan 今回の素材集では、見出しにぴったりのコミックフォントと漫画のセリフに使えるアンチック体、動作環境を選ばず使える加工
1週間で20万PV「ためしがき」ツイッターのトレンド入りまでにやった工夫と、AI問診サービスが語る「常識が通じない」高齢者向けUIデザインの改善事例。｜アプリマーケティング研究所
1週間で20万PV「ためしがき」ツイッターのトレンド入りまでにやった工夫と、AI問診サービスが語る「常識が通じない」高齢者向けUIデザインの改善事例。 WEB系プロダクトの運営者さんにインタビューしました。 <目次> １、日本語フォントお試しサイト「ためしがき」 ２、AI問診「Ubie（ユビー）」 ３、建設業者マッチングサービス 「ツクリンク」 ４、女性向けネット診察サービス 「スマルナ」 ５、スマホ保険アプリ「justInCase」 ◎１、「ためしがき」がツイッターのトレンドになるまで ※株式会社クリモ 渡邊 達明さんワタナベさんは夫婦で会社をやっているんですか？夫婦で会社をやっています。妻はブログやメディア運営をしていて、私はリモートの受託開発がメインで、空き時間にWEBサービスをつくってます。 もともと二人とも会社員だったんですけど、まず妻が会社を辞めてブログで食っていくというときに
アドビは4月8日、グーグルと共同開発した世界初のPan-CJK（中国語、日本語、韓国語で共用できる）オープンソースフォント「Source Han Sans」のバリアブルフォント「Source Han Sans Variable」を発表した。GitHubからダウンロードできる。 Source Han Sansは、日本語名では「源ノ角ゴシック」と呼ばれており、2014年にリリース。継続的にアップデートされており、日本語以外に韓国語、 簡体字中国語、繁体字中国語（台湾）、繁体字中国語（香港）に対応しているほか、Source Sansファミリーのラテン文字、キリル文字、ギリシャ文字のグリフを、日中韓のグリフとうまく調和するよう若干修正したものも含まれているという。 今回のバリアブルフォント対応により、既存の7ウェイト（Extra LightからHeavyまで）以外に、最小値から最大値までの範囲内で
表題のことについて検証してみましょう。 目次 目次 前提 Webページ上で独自のフォントを読み込むには フォントファイルのサイズ フォントファイルのサイズを抑える工夫 フォントファイルを分割し、必要に応じて読み込む フォントファイルを圧縮する 前提おわり 本題 規格によると 4.5. Character range: the unicode-range descriptor 4.5.1. Using character ranges to define composite fonts 実験する 準備 実験方法 実験結果 まとめ 前提 本題に入る前に、Webフォントを配信する際の前提について説明します。分かっている方は読み飛ばしてもらって大丈夫です。 Webページ上で独自のフォントを読み込むには CSSの font-family 属性に使いたいフォント名を書くことで、Webページ上のコンテン
CSS @font-faceに使用する新しい構文の基礎知識と使い方、format()とtech()、OpenType-SVGとCOLRv1によるカラーフォントの表示
CSSの@font-faceで見慣れない構文があるなと思ったら、どうやら新しい構文がChrome, Edge, Safari, Firefoxの各ブラウザにサポートされていました。 CSSの@font-faceに使用する新しい構文の基礎知識と使い方を紹介します。 The new @font-face syntax by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 @font-faceの新しい構文のブラウザサポート @font-faceによる可変フォントの使用方法 tech()によるカラーフォントの使用方法 @supportsでも同等の機能が使用できる @font-faceの新しい構文のブラウザサポート CSSの@font-faceの新しい構文は、Safai 17（次のバージョンアップ）, Fir
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
コンピューターで画面に文字を表示したり、印刷したりする際になくてはならない「フォント」。さまざまなベンダーから多彩なフォントがリリースされているが、その多くは文字の太さ（ウェイト）や幅ごとに個別のファイルが用意されており扱いがめんどうだった。そこで2016年に登場したのが、単一のファイルでウェイトや幅などを自由に調整できる「バリアブルフォント」だ。 欧米ではすでに多くのバリアブルフォントがリリースされているが、日本などアジア圏では文字の種類が膨大で複雑なこともあって開発に手間やコストがかかり、これまであまり普及が進んでいなかった。 そうした状況を変えそうなのが、2021年4月8日にアドビが正式発表した「源ノ角ゴシック VF（英語名：Source Han Sans Variable）」だ。今回は、その特徴やメリット、開発エピソードを、アドビのシニアフォントデベロッパーである服部正貴氏とザック
日本語や縦書き、OpenTypeフォントの様々な仕様にも対応したオープンソースのMac用フォント比較ツール「FontGoggles」がリリース。
日本語や縦書き、OpenTypeフォントの様々な仕様にも対応したオープンソースのMac用フォント比較ツール「FontGoggles」がリリースされています。詳細は以下から。 FontGogglesはプログラミング言語Pythonを開発したGuido van Rossumさんの弟で、現在はアメリカでフォントデザイナー兼プログラマーをされているJust van Rossumさんが、GoogleのGoogle Fontsの支援を受けながら開発したMac用フォントツールで、所有している複数のフォントをリアルタイムでプレビュー/比較することが出来ます。 FontGoggles is a font viewer for various font formats. It is a desktop application for macOS. It is free and open source.The
——————————————————————————————————————————————————— Redis(REmote DIrectory Server)Redisは例えば以下の特徴を持つLLOOGGを元としたインメモリの非リレーショナルのデータベースです。 String, List, Hash, Set, Sorted Setに代表される豊富なデータ型シングルスレッド処理イベント駆動処理 by aeライブラリ通常RESPプロトコルによるクライアント/サーバーモデルでリクエスト/レスポンスデータは条件を満たす場合にメモリ最適化されて保存。CPUとのトレードオフRAXを利用したメモリ利用量の最適化(Redis 4.0~)この記事では、入門から始まり、実装をより意識することで深く理解することを目標としています。 以下の説明中の(*)マークは、特にVanilla Redisでの話となり
IEサポートやめます！で使えるようになったもの
去年IEのサポートがきれ、やっとIEを気にせず制作ができるようになりましたね。 でも結局、IE対応が板につきすぎて、便利なプロパティを使い損ねたままコーディングしていませんか・・・？ ということで、「IE対応しなくていいなら、これも使えるよ！」をまとめていきたいと思います！ 自分用のメモも兼ねているので、網羅はせず、よく使いそうなものに絞っています。 (逆に「IEだめだったんだ、気にせず切り捨ててた・・・」みたいな要素やプロパティも省いてます。) IEなしなら使えるcss 改めて知ったので使っていきたいな〜 accent-color, caret-color accent-colorでフォーム要素(inputなど)の色がまとめて指定できます！ (caret-colorはキャレットのの色) フォームって、別のシステムが入る場合、デザインのトンマナを完全に合わせらないと思うのですが、 アクセン
Resource inlining in JavaScript frameworks | Aurora | Chrome for Developers
As part of project Aurora, Google has been working with popular web frameworks to ensure they perform well according to Core Web Vitals. Angular and Next.js have already landed font inlining, which is explained in the first part of this article. The second optimization we will cover is critical CSS inlining which is now enabled by default in Angular CLI and has a work in progress implementation in
Godot 4メモ
最終更新日：2024年02月18日 オープンソースのゲームエンジンGodotの特徴やTipsをメモしています。 更新履歴 （2024年2月18日）Webエクスポートの対応状況等を更新、C#のサポート状況を反映、「Godot Engineの名前の由来と読み方について」を更新 （2023年10月9日）Androidエクスポートのセットアップ方法を更新 （2023年7月22日）「エディタのスクロール速度について」を追加 （2023年5月20日）Debug Menu add-on for Godot 4.xを紹介 （2023年3月2日）Godot 4.0安定版リリースを簡単に反映 Godotとは GodotはオープンソースのC++製2D/3Dゲームエンジンです。 もともとは2007年頃から元アルゼンチン在住のJuan Linietsky氏（現在はスペインに移住）とAriel Manzur氏が開発し
WebAssembly and Back Again: Fine-Grained Sandboxing in Firefox 95 – Mozilla Hacks - the Web developer blog
WebAssembly and Back Again: Fine-Grained Sandboxing in Firefox 95 In Firefox 95, we’re shipping a novel sandboxing technology called RLBox — developed in collaboration with researchers at the University of California San Diego and the University of Texas — that makes it easy and efficient to isolate subcomponents to make the browser more secure. This technology opens up new opportunities beyond wh
2.26コピペジェネレータ
【エキスパート向けオプション】※通常はそのままで大丈夫です フォント SJISテキスト Unicodeテキスト Unicode(IVS)テキスト(要 Microsoft Edge/IE11および游明朝) 推奨環境 WebフォントとしてWOFFフォントに対応したパソコン用ブラウザ（最近のブラウザであれば大抵大丈夫ですが、スマートフォン用のブラウザではうまく表示出来ないかもしれませんし、フォントも6MB以上あります） 「エキスパート向けオプション」を使用する場合は、Windows7以降、EdgeまたはIE11、IVS(Adobe-Japan 1-4/1-5/1-6)対応の日本語OpenTypeフォント（Office2010/2013用の游明朝はマイクロソフトのサイトでダウンロード可能です） 上記環境以外では正常動作しない可能性がありますので悪しからずご諒承下さい。 こちらで確認済の問題として、
こんにちは、あずんひ（@aznhe21）です。最近は標準ライブラリを持続的に翻訳する仕組みを考えてますが難航中です。 さて、本日7/1（金）にRust 1.62がリリースされました。 この記事ではRust 1.62での変更点を詳しく紹介します。 7/1は郵便番号制度がスタートした郵便番号記念日 ピックアップ 列挙型で#[derive(Default)]できるようになった 浮動小数点数で全順序による比較ができるようになった LinuxにおいてMutexなどの実装がfutexに切り替わった cargo addコマンドが追加された 安定化されたAPIのドキュメント bool::then_some サンプル f32::total_cmp サンプル f64::total_cmp サンプル Stdin::lines サンプル windows::CommandExt::raw_arg 変更点リスト 言語
今一番キテるライセンス？「SILオープンフォントライセンス」 近頃はいろいろなフリーフォントが利用できるようになりましたね。 ここ最近では、フォントワークスのフォント８種が「SIL Open Font License（SILオープンフォントライセンス）」で公開されたことも大きな話題となりました。 （ちなみに私が制作したフォント「Yusei Magic」「たぬゴ」「エセナパJ」もSILオープンフォントライセンスです。よろしくです。） ところで、フォントやライセンスに詳しい人で無い限り、「SILオープンフォントライセンス」という名前は耳慣れないのではないでしょうか？すごく自由度が高いライセンスなのに、知らないなんてもったいない！ということで、この記事では、SILオープンフォントライセンスについてできるだけわかりやすく説明してみたいと思います。 ※以下、正式名称は「SILオープンフォントライセン
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォントと画像の管理にはこれ！シンプルで使いやすい、WinMac両対応アプリ「Eagle」が神アップデート
Webフォント読み込み戦略（2021年） - MOL
Web パフォーマンスのための HTML 最適化 | メルカリエンジニアリング
IPAフォントライセンスを巡って | 一般社団法人 文字情報技術促進協議会
Web Speed Hackathon 2021 miniでほぼ満点を出しました
Next.jsのFont Optimizations（Webフォントの最適化）を試してみる
フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD
Web FontによるCore Web Vitalsへの影響と使い続ける方法｜平大志朗
HTTP Security Headers - A Complete Guide
知らなきゃ損！Web制作を爆速にする最新オンラインツール40個まとめ
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-後編 | POSTD
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-中編 | POSTD
デザインシステム【アイコンデザインルール設計】〜プロセス大解剖〜｜エクサウィザーズ HR note
Source Han Sans（日本語名称：源ノ角ゴシック）がバリアブルフォントに
My current HTML boilerplate - Manuel Matuzovic
バリアブルフォントで遊ぼう - astamuse Lab
Web Font のメトリクス上書きによる CLS の改善 | blog.jxck.io
おしゃれなフリーフォント大集合！最新英語・日本語フォント48個まとめ 2020年3月度
アドビの「源ノ角ゴシック」がバリアブルフォントに対応--ウェイトを自由に調整可能
Webフォントを分割して読み込む際にunicode-rangeを指定しなかったらどうなるのか - 私が歌川です
和文書体にもバリアブルフォント化の波が!? - アドビに「源ノ角ゴシック VF」開発秘話を聞く
Dive Deep Redis ~ 入門から実装の確認まで - hayashier Tech Blogs
Rust 1.62を早めに深掘り - あずんひの日
「SILオープンフォントライセンス」って何？という方のためのざっくり解説