紙っぽいかわいいWebサイト作りたい - Qiita
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ
モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響
モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、
RustでWebバックエンドを書き始めてから1年くらい経った
はじめに 僕はDeno Land Inc.でDenoを利用したサーバレスエッジホスティングサービスのDeno Deployを開発するチームに所属しています。OSSのほうのDenoのメイン言語はRustで、Deno Deployのバックエンドも同様にRustで書かれています。 今年のアドベントカレンダーで一休さんから以下の記事が公開されましたが、日本でもRustをWebバックエンドの言語として採用する企業がじわじわと増えてきている印象があります。 Deno DeployのバックエンドをRustで開発してきて、RustでWebバックエンドを書くことのメリットやデメリットをいくつか感じたので、この記事で紹介したいと思います。 Deno Deployの構成 まず、ざっくりとDeno Deployのバックエンドの構成を紹介します。 多くのコンポーネントがありますが、ここではどのようにRustを利用し
一休レストランのふつうのRustバックエンド開発 - 一休.com Developers Blog
この記事は一休.com Advent Calendar 2023 25日目の記事です。 一休レストランでは、よりスムーズな予約体験の提供を目的とするシステムのリニューアルを進めています。その一環として、2023年10月から、レストラン個別ページの表示から予約までのスマートフォンビューにおいて、バックエンドのサーバをRustで書かれたものに置き換えました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) October 4, 2023 本番運用が始まって3か月近く経ちましたが、これまで安定して継続的な開発と運用ができています。これはRustだからと構えることなく、「ふつう」のバックエンド
Introducing "Lit" for Web Components
概要 2021/04/22に新しいWeb Componentsライブラリ、Lit(Lit 2.0)がリリースされ、同日ローンチイベントもYouTubeで生配信されました。 それに伴いPolymer ProjectがLitに改名されロゴが刷新されました。 ウェブサイトも新しく公開されました。チュートリアルとPlaygroundが刷新され、非常に便利になりました。 実装は https://github.com/lit/lit に公開されています。 LitElementとlit-htmlのおさらい 旧Polymer Project（Lit 1.0）では、lit-html(HTMLテンプレートライブラリ)とLitElement(Web Componentsを実装するためのライブラリ)の2つのライブラリが提供されていました。 LitElementにもテンプレート機能があったので、2つとも独立したライ
デジタル庁のサイトやばすぎるwww - Qiita
はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
Chrome113でHTTPヘッダを上書きしていろんな状態をお試しできる - hogashi.*
Chrome 113 で、 DevTools の Network ペインで HTTP ヘッダを好きなように編集して、いろんな状態をお試しできるようになっている。 What's New in DevTools (Chrome 113) - Chrome Developers で紹介されている。 GitHub から example.com を fetch してみる GitHub の CSP ヘッダを上書き example.com の CORS のヘッダを上書き 途中で指定したフォルダの中身は何？ 上書きをやめるには？ 感想 GitHub から example.com を fetch してみる 試しに、 CSP で外部への通信がそれなりに制限されている GitHub から、 example.com への fetch を成功させてみる (外部サイトへの通信は、認証情報や秘密の情報の漏洩などに気をつ
WebGPUがついに利用可能に - WebGL以上の高速な描画と、計算処理への可能性 - ICS MEDIA
2023年5月にリリースされたGoogle Chrome 113で、次世代WebグラフィックスのJavaScript APIであるWebGPU（ウェブジーピーユー）がデフォルトで利用できるようになりました。ICS MEDIAでは2018年にWebGPUについて紹介していましたが、当時はSafariで開発者向けのフラグを有効にした場合にのみお試しできる実験的機能でした。 デスクトップChrome限定ではありますが、WebGPUが一般ユーザーの環境でも動作できるようになったいま、オリジナルのデモを交えてあらためてWebGPUを紹介します。 この記事で紹介すること WebGPUがChrome 113で標準で利用可能になった WebGPUはモダンな3D APIに直接アクセスすることで、WebGLより高い性能が得られる WebGPUだとドローコールの最適化をしなくても十分に高速 WebGPUはコンピ
IPAウェブサイトリニューアルに係るお詫びと対応について | 新着情報 | IPA 独立行政法人 情報処理推進機構
IPAウェブサイトリニューアルによるリンク切れや不具合について、ご不便をおかけしまして大変申し訳ありません。 IPAは本年3月31日、ユーザーの皆様にIPAウェブサイトについて、より快適にご利用いただけるようリニューアルを行い、スマートフォンやタブレットから閲覧する場合でも適切に表示されるようにマルチデバイス対応を行うとともに、ユーザーが目的のコンテンツを探しやすくするため、掲載内容やサイト構造の見直し等を行い、多くのページのURLも変更することとなりました。 URL変更の対応にあたっては、安定的なレスポンスの確保を考慮し、リダイレクト対象とするコンテンツの選定を行いました。しかし、今回の対応は、多くのユーザーがIPAウェブサイトに掲載されたコンテンツへのリンクを自組織のサイトや資料等で活用していることの影響に関して、認識が不十分でした。頂いた多くのご指摘を重く受け止め、ユーザーの皆様のコ
Chrome 111 の View Transitions API でリッチなページ間トランジションを実現する
Chrome 111 は CSS の色関数 や 三角関数の追加 など、目を引く更新が多いですが、中でも View Transitions API は、Web アプリの UX 向上という観点で、高いポテンシャルを秘めた API です。 この記事では、この View Transitions API について、実装例・実用例を交えて概説します。 View Transitions API とは View Transitions API は、『画面の更新前後の異なる DOM 要素間のトランジションを、簡素な記述で実現』 する API です。 PC および Android の Chrome 111 以上、または Edge 111 以上 で使用できます。 つまりどういうこと？ モバイルのネイティブ App には、以下のように、 『ページ遷移が発生したとき、同じ要素がページをまたいで移動する』 ような、リ
Unovis
import React, { useCallback } from 'react' import { VisXYContainer, VisAxis, VisArea, VisXYLabels } from '@unovis/react' import { data, formats, DataRecord, getLabels } from './data' export default function StackedArea (): JSX.Element { const labels = getLabels(data) return ( <> <VisXYContainer data={data} height={'50vh'}> <VisArea x={useCallback((d: DataRecord) => d.year, [])} y={formats.map(g =>
「2022年 検索エンジンの変化」押さえておきたい5つのポイント - web > SEO
2022年もSEO周りでは沢山の変化がありましたが、検索エンジン周りの全ての情報を追うことは不可能です。 この記事では、2022年の検索エンジンの変化の中で「Webに関わる多くの人が知っておくべき変化」と私が考えます5つのポイントをお届けします。 「2022年 検索エンジンの変化」押さえておきたい5つのポイント 検索結果がよりリッチに これは、12月31日段階のGoogleの[観葉植物]検索結果です。 モバイル検索では表示されていた検索結果へのサムネイル表示が、2022年の頭からPC画面でも多く表示されるようになりました。 このサムネイルは、検索語句によってはクリック率に非常に大きな影響を与えます。特に検索結果で自分のサイトの前後のサイトにサムネイルが表示されている場合は、その有無だけでクリック数は2～3倍に変わることも多いです。 このサムネイルでどの画像をGoogleが使うかを明確に指示
限界を極めた内定者が語る！ 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
今は、もう、動かない、その User-Agent 文字列
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、広告エンジニアの中山です。 唐突ですが、みなさまの Web アプリケーションに User-Agent 文字列を参照する処理はありますか？ User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.1234.56 Safari/537.36例えば User-Agent 文字列を解析して内容に応じて制御を分岐させたり、機械学習の特徴量として用いたり、さらには一般に悪しきユースケースとされていますが IP アドレスと組み合わせて fingerprinting に活用する … と
1KBのWebフレームワークをつくる - ゆーすけべー日記
1KBのWebフレームワークをつくりました。 名前は「Pico」。 minifyしてビルドした模様。 コードはこれだけ。依存なし。ほんとにこれだけです。 Cloudflare WorkersとDenoで動きます。 今回はこのPicoというフレームワーク、 それに必要不可欠なURLPattern、実装について、 そして僕がつくっているもう一つのフレームワークHonoとの関係などを紹介します。 Hello World text/plainでレスポンスを返す、“Hello World"相当のコードは4行で書けます。 import { Pico } from "@picojs/pico"; const app = new Pico(); app.get("/", (c) => c.text("Hello Pico!")); export default app;
500点出す！ - ゆーすけべー日記
「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内（サイバーエージェント）向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日（17日）、ついに500点満点を出しました！ たぶん、レギュレーションはクリアしている、はずです（もし違反してたらすいません…）。 自動で行われる「Visual Re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - DhanushNehru/Ultimate-Web-Development-Resources: A collection of web development resources for most of your development needs
Node.jsやめる(Rustにする？) · Issue #11078 · misskey-dev/misskey
今日から始めるリアルタイム配信の裏側
Japan EQ Locator
