Author: @urahiroshi, Engineering manager of Web Platform team 2022年8月4日、メルカリで “web-2” と呼ばれるサーバがシャットダウンされました。これはメルカリWeb版の開発に携わっているチームにとって、一つの区切りとなる出来事でした。 web-2はPHPで記述されたwebサーバで、2015年から https://www.mercari.com/jp/ 配下のコンテンツを配信していましたが、現在では複数のWebマイクロサービスがその機能を担っており、 https://www.mercari.com/jp/ 配下のページは後継となるWebマイクロサービスが配信するページへリダイレクトされています。 メルカリWebのマイクロサービス化に向けた開発が始まり、最終的にweb-2がシャットダウンされるまで、実に4年以上の期間がかか
＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員として働きつつ、個人でブログ／メディアライターとして活動するパラレルワーカー。 iPhone・iPad・Mac・ITツールを用いて人々の生活をより豊かにするための活用術を提供する「デジタルライフブロガー」です。 Web制作に関わる人にとって、すでに公開されているWebサイトというのは非常に重要な勉強材料です。中には「こういった表現、次のプロジェクトで使ってみよう」「こういう見せ方いいなぁ。いつかやってみたい」と、いつか役立てたいサイトもあるでしょう。 そういった「参考サイト」は、自分だけのデータベース化しておくと便利です。私はNotionを使って、自分だけの参考サイト集を作成しています。 【目次】 自分だけの参考サイトギャラリーをNotionで作ろう 自分専用の参考サイトギャラリーを作る
はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (Layout Shift) が生じる問題がありました. この問題を解決するため以前より, アスペクト比を埋め込むための新たな属性の導入が提案されていました. しかし最近議論に動きがあり, 既存の属性を利用する方法が提案され, ブラウザに実装され始めています. ここでは問題の背景, 提案と議論の変遷, そして開発者が取るべき対応について紹介します. はじめに img タグと Layout Shift intrinsicsize 属性 intrinsicsize
Awesome Dev Tool Tips 🔥
Contents (Click to expand) ↕️ Design Mode Pretty Print Command Pallet and Super Search Snippets Live Expressions Tracking Changes Console Shorthand Find Unused Code Rendering Panel Network Paint Times Network Timings Inspect Network Requests Performance Identifying Memory Leaks Raw Memory Inspection Test bfcache Full Refresh Lighthouse Page Size Breakdown Record User Flows Advanced User Flow Opera
都内の事業会社で分析やWebマーケティングの仕事をしています。大学・大学院では経済学を通じて統計解析を行うなどしておりました。企業に勤めてからは、機械学習やテキストマイニング、クローリング技術などに関心を持っています。 Twitterアカウント Mr_Sakaue( SKUE ) GitHub 読書メーター ほしいものリスト 仕事で、いろんな会社でデータサイエンスってどう使われているのですか？と聞かれることがあり、自分としてはなんとなくしか掴めていないな、知ったかぶりしたくないなと思うところがあったので、やや手厚くリサーチをしてみようと思いました。 2022/3/6の段階では11つの市場しかないですが、最終的には30市場を目指します。 【2021/11/27追記】 公開したところ、それなりにこの記事に関心を持ってくださった方が多かったようなので、少しずつ事例を埋めていこうと思います。 業界
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 として表示する機能を追加し、ユーザーが
続編(続 消耗する文章を避けるためのはてなブックマーク NGワード集)書きました。 返信は https://anond.hatelabo.jp/20211117205441 です。 uBlockOriginのMyFilter機能を使って、はてなブックマークのエントリーから特定のワードを含む記事をブロックしてます。 GoogleChrome95/Firefox94で動作確認済み。 作り始めたばかりなので、追加できるワードがあればコメントいただけると嬉しいです。 基本的な内容は[はてブ]uBlock Originで特定のエントリーを隠す方法のメモを参考に 炎上しがちのジェンダー関連、自分が興味のないコンテンツ・人名、記事の荒れそうな表現を集めました。 ジェンダー関連ははてなフィルタを導入してジェンダーレスなはてブにしようからコピーし、少しだけ改変しました。 なお、ジャンル分けはかなりざっくりで
2019/01/22(火) ネットから、見やすい白黒地図を印刷する方法 - 称名じじの称名滝から大日岳に通っています
この記事では、無料のYahoo地図を用いて、灰色さえ使わない本物の白黒地図を、プリンタ用紙いっぱいに印刷する手順を説明しています。 ネットを開けば、日本中の地図をカラーで見たり印刷することができます。 ところがじじのように白黒プリンタに印刷すると、濃淡が薄かったり文字がぼやけてしまい、思わず目をこすってしまいます。 そこで、くっきり・はっきりした見やすい白黒地図を、無料で印刷する手順を紹介します。 元になる地図は、Yahooの地図を使います。 －－－ 2021/07/13補足： 本記事を書いて以降、Yahoo地図がバージョンアップしています。 それで本記事とは操作が少し異なる部分がありますが、手順はほぼ同じです。 またEdgeやGoogleChromeには「ハイコントラスト」という拡張機能があり、それを用いると、あのはっきりと見えないGoogleMAPがくっきりと見えます。「ハイコントラス
Sizzyというツールがあります。 様々なサイズの画面を同時に表示し、レスポンシブレイアウトがどうなるかを一気に確認できるという便利なツールです。 スマホ向けWebサイトを開発している人なら、持っていると非常に便利でしょう。 参考：レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy / 『Sizzy』様々なデバイスでのサイト表示を確認出来る便利サイト さてこのSizzy、元々無償のChromeエクステンションだったのですが、先日2019年7月に単独のアプリとして有償化されました。 一人あたり月5ドル(団体割引あり)のサブスクリプション制です。 以下は作者のKizte( Twitter、Medium、Webサイト )がその理由や経緯を綴った記事、GitHub stars won't pay your rentの日本語訳です。
言語&開発基礎編 PythonやSQLなどの言語と開発環境に関連することをまとめました。 機械学習に関する教材はこの次のセクションにまとめてあります。 学習環境 インストール及び使い方チュートリアルのサイトと、ある程度使い慣れた後に役立つtips集を各エディタでまとめました。 Google Colaboratory Python初学者にとって最もわかりやすいPython実行環境です。プログラミングは初めて！という方はまずこのGoogle Colaboratory(通称: Colab)から始めてみて、使い方がある程度わかったら、そのまま次のセクションのPython編に移りましょう。 Pythonプログラミング入門 難易度: ★☆☆ 東京大学の公開しているPython講座ですが、冒頭でColabの使い方を解説しています。使ったことのない方はこちらから！ Google Colabの知っておくべき
業務で使うツール(iTerm2,SequelPro,Chrome)をShellScriptでハイパーテクニックする - ハイパーマッスルエンジニア
業務で使うツール(iTerm2,SequelPro,Chrome)を ShellScriptでハイパーテクニックする はじめに この記事は今年イチ！お勧めしたいテクニック by ゆめみ feat.やめ太郎 Advent Calendar 2019の20日目の記事です。 今年は「お勧めテクニック」ということで、業務効率化ｯ!!を盾に業務時間の30％はShellScript遊びに当てている私にピッタリな企画ですね、ありがとうございます。 今回は業務でよく使うツールを、ShellScriptでハイパーテクニックする方法をいくつかご紹介。 今回紹介するコードは全部Githubにあげているので実際に試したい人はどうぞ。 ハイパーテクニックする対象 GoogleChrome iTerm2 SequelPro GoogleChrome ブラウザに移動せずTerminalで自在にタブ移動する Web開発を
WebサイトがどのCMSと技術で作られているかが分かるGoogleChrome拡張機能「Wappalyzer」 – ワードプレステーマTCD
WebサイトがどのCMSと技術で作られているかが分かるGoogleChrome拡張機能「Wappalyzer」 2019.07.20 2023.05.05 「このサイトはどのCMSや技術でつくられているのか」 それが一目で分かるGoogleChromeエクステンション「Wappalyzer」をご紹介します。「Wappalyzer」を使えば、ブラウザにこのように表示されます。 「Wappalyzer」をインストールする GoogleChromeブラウザを開き、下記ページから「Chromeに追加」をクリックします。Firefoxをお使いの方は右側のボタンからどうぞ。 Chrome版 Firefox版 以上でインストール完了し、ブラウザの右上に表示されるようになります。WordPressを使っているサイトであれば、ブラウザからひと目で分かるようになりますね。また、アイコンをクリックすると、インス
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の
@1000ch です、今回は新しいメルカリ Web について書きます。この大きなプロジェクトのリリースは、多くの人の多大なる貢献によって成されたものです。そのプロジェクトの立ち上がりから今日まで、リードする役割でプロジェクトを見てきた一部始終を記録するべく書きます。 メルカリにおけるレガシーなソフトウェア ソフトウェアは生モノとよく言われますが、古くなったソフトウェアとどう付き合っていくかは、どの開発組織も抱えている、あるいはいつかはぶつかる課題なのではないかと思います。多くの方々に利用して頂くためには大規模なソフトウェア群を開発し運用する必要があります。しかし、はじめから全てを見越して完璧なアーキテクチャを構築するのは不可能であり、それをビジネスの成長に耐えうるものにソフトウェアを成長させていくのがエンジニアリングの責務です。 2013 年にスタートしたメルカリに於いても例外はなく、急速
はじめに 本記事は dely Advent Calendar 2019 の15日目の記事です。 昨日は開発部サーバサイドエンジニアの高橋くんが「Rails6の複数データベースの仕組みと実装時にハマったところ」という記事を書きましたので是非読んでみてください。 tech.dely.jp こんにちは！dely開発部SREの井上です。 本記事ではWEBサイトのパフォーマンスを定期的に計測する仕組みについて紹介をしたいと思います。 実は去年のAdvent Calendarでも同じような記事を書いたのですが、時代背景に沿って計測するツールをsitespeed.ioからLighthouseに変更したので理由も含めて紹介させてください。 基盤の構築においては下記のサービスやツールを利用しています。 AWS CodeBuild S3 Athena Terraform Lighthouse 前置きはいいから
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
PWA(Progressive Web Apps)対応サイトの作り方・実装方法まとめ・入門 － AWS上で学習したPWA導入例とLighthouse Report Viewerの使い方 - NRIネットコムBlog
小西秀和です。 現在、AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 概要編などAWSのサーバーレスな静的ウェブサイトホスティングをテーマにしたブログ記事を執筆しています。 今回もAWSは関係しますが、フロントエンドに近い話題で、最近動向が本格的になってきたと感じているPWA(Progressive Web Apps)について私が自主的に学習した内容を記事にしてみました。 私の場合はAmazon S3、Amazon CloudFront、AWS Certificate Manager、Amazon Route53を使用した静的ウェブサイトに最小限のコンテンツをデプロイしてPWAの実装について学習しました。 また、Lighthouse Report ViewerというPWAなどの品質テストができるツールを使用して、PWAの基準に合格し、Pe
ウェブ制作に活かすユニバーサルデザインの視点
この記事は、2019年12月7日に名古屋で開催された WCAN 2019 Winter での登壇内容をテキスト化したものです。アクセシビリティ Advent Calendar 2019 の 9日目のエントリーです。 当日使用したスライドは SpeakerDeck で公開しています。 ウェブ制作に活かすユニバーサルデザインの視点｜SpeakerDeck はじめに 「ユニバーサルデザインとウェブ」と聞くと、あまり馴染みがないように思われるかもしれません。しかし実は、ウェブは生まれながらにユニバーサルな性質を持っています。ワールド・ワイド・ウェブの考案者ティム・バーナーズ＝リーは、次のように述べています。 The power of the Web is in its universality. ウェブは、世界中の誰もが、自分の好きな場所で、好きなデバイスで、好きな時にアクセスすることができます。
Googleサーチコンソールにインデックス登録 ＋ にほんブログ村に登録・・・ 私が、ブログの記事をアップ後に行うこと - Pythonでレトロゲームをつろう！！（佐藤 誠 の あくまでも独り言）
こんばんは〜 佐藤 誠 です。 今日は、私がブログの記事をアップした後に、どんな事をしているのかを紹介します。 Googleサーチコンソールについて いつも必死で記事を書き上げたあと、まず忘れないうちにGoogleサーチコンソールにインデックス登録のリクエスト（依頼）を行います。 要は、Googleの検索エンジンに認識してもらい、Google検索に引っかかるようにする作業です。 この作業を行わなくても、いずれはGoogleの検索エンジンに認識されます。 でも、早いに越したことは無いので、自分からGoogleの検索エンジンに認識してもらえるよう依頼をかけていきます。 【Googleサーチコンソールとは】 Googleの検索エンジンに認識してもらえるように依頼する Google検索に関する情報を知ることができる（キーワードごとの順位やクリック数など） サイト・ページに問題がないか確認する ww
アプリ版ChatGPTの使い方 ダウンロード後、画像左端のようなログイン画面が表示されるので、すでにアカウントを持っている場合は「log in」からログイン、アカウント開設がまだの方は「Sigh in」からアカウント開設を行ってください。 ログインが完了すると、以下の注意事項が表示されます。 「Continue」をタップするとChatGPTを利用し始めることができます。 ChatGPT Plusとは？有料版の料金や限定の新機能について ChatGPT Plusとは一言で言えばChatGPTのより先進的なモデルである「GPT-4」を使えるプランのことです。料金は20ドル/月(約3000円弱)です。 ChatGPT Plus(GPT-4)限定の新機能としては「音声出入力」、「画像やPDF、Wordファイルなどの入力」、WEBブラウジング機能や各種プラグインなどがあります。また、通常のチャットに
こんにちは。ものづくり推進部、フロントエンドエンジニアの武田です。 今日は Datadog, Lighthouse を使ったクライアントパフォーマンス計測に取り組んでいる、というお話です。 mediba では webpagetest を使った定期実行と計測を以前から行っています。 DataStudioとGASでWebPagetestの計測結果をグラフ化するuknmr/gas-webpagetest紹介記事: gas-webpagetestでWebPagetestのパフォーマンス計測を自動化、可視化する1 での取り組みをベースにし、clasp で GAS のソースコード管理・デプロイを実現するための仕組みや webpagetest Lighthouse test と連携したメトリクスの取得まで網羅したものが 2 になります。 今回は少し webpagetest とは趣向を変えて Lighth
Vite/VueでChrome拡張機能を作ってみる | 4. 環境構築/開発編 - くらげになりたい。
前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω｀*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω｀*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "auto-install-peers=true" > .npmrc # @crxjs/vite-pluginの追加。vite3はbeta版 $ pnpm add @crxjs/vite-plugin@beta -D manifest.jsonの設定 manifest.jsonが必要だけど、CRXJSでは.tsにも対応してる。
Building a more private web: A path towards making third party cookies obsolete
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 78 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 34 chrome 81
Core Web Vitalsを上げる - ゆーすけべー日記
「Core Web Vitalsを上げる」機会があったので、Core Web Vitalsについてまとめてみる。 これから書くことは今現在、僕が把握してることで、間違っていることがあると思うけど、そこはご愛嬌でお願いします。 1. Web Vitalsとは？ Web VitalsというのはGoogleが提唱したUXの指標である。GoogleはWebに対するUXのことを「ページエクスペリエンス」と呼んでいる。「Core Web Vitals」ってのは「Web Vitals」のサブセットになっているので、まずはそこを理解しておく必要がある。 なぜWeb Vitals？ 最近、Webのフロントのことについて調べることが多いのだが、やたらとこの「Web Vitals」もしくは「Core Web Vitals」という言葉に出会う。 「フロントの体験」としてWeb Vitalsが重要だからであると同時
FirefoxとChromeのバージョンが初の3ケタ「100」になるとユーザーエージェント文字列が原因で一部のサイトが破損する可能性があるとの警告
2022年2月時点でのFirefoxとGoogle Chromeの最新バージョンはどちらも「97」となっており、2022年の5月にはどちらもバージョン番号が大台の「100」に到達します。これに伴い、ブラウザがどのバージョンのものかを特定しようとするウェブサイトが破損する可能性があると、両ブラウザの開発者が警告しています。 Version 100 in Chrome and Firefox - Mozilla Hacks - the Web developer blog https://hacks.mozilla.org/2022/02/version-100-in-chrome-and-firefox/ Chrome and Firefox soon to reach major version 100 https://web.dev/chrome-firefox-100/ Firefox
いま話題の某書籍と著者のおかしなところ
はじめに 最近話題の某書籍をAmazonの試し読みで気になった所を抜粋しました。 著者のnoteや会社のホームページもかなり酷いです。 読みたい方はこちらからどうぞ↓ 追記 電子版の無料公開無くなっちゃいました。 流石に出版社もやばいと思ったみたいです。 公式サイトにお知らせが載ってます。 第1章:某書籍のおかしなところ プロトコルを独占？？？ Web1で誕生したTCP/IP、SMTP、HTTPなどのプロトコルは、本来、誰のものでもなくオープンな仕組みです。これらのプロトコルは、Web2の時代にGoogleやAmazonなどの一部のプラットフォーマーに独占されてしまっています。田上 智裕 (2106-02-07T15:28:15.000). いちばんやさしいWeb3の教本 人気講師が教えるNFT、DAO、DeFiが織りなす新世界 (「いちばんやさしい教本」シリーズ) (Japanese E
InstChocoでChocolateyをインストールするとWindowsソフトウェアの引っ越しが超簡単にできます。 ChocolateyをインストールするならInstChocoも使うのがお勧めです。単なるパッケージ管理ソフトウェアとして利用するのはもったいないです。 ChocolateyでWindowにインストールしたパッケージリストや設定をiCloudやDropbox、GoogleDrive、OneDriveに保存してくれるChoco Package List Backup to Local and Cloudの使い方も併せてご紹介します。 InstChocoとChoco Package List Backup to Local and Cloudの使い方を日本語で説明した記事が見当たらないので書いてみました。本邦初公開記事です！ Chocolateyとは Chocolateyのインス
AIに、「Bingは誰も使わないという偏見を利用したジョークを教えてください」と聞いたらメンヘラすぎる回答が来てゾッとした
Wsan / 笑さん @ws_wsan @d_d_osorezan GoogleChrome検索するとEdgeに誘導するようなMicrosoftが作ったからこうなるもの仕方ない...? 2023-02-11 14:15:21
年末に限った行事では無いのですが月に一度くらいはMacの簡単なメンテナンスをします。MacBook AirやiPad miniたちはまだ新しいのでそうでも無いのですがiMacは11年が経っているので定期的に行います。この11年間、1度も故障もなく今日まで働いてくれています。メンテナンスと言ってもいたって簡単な事をするだけです。やるのはセーフブートとブラウザの履歴とキャッシュの削除そしてFirstAidによるメンテナンスです。 セーフブート セーフブートについて もっとも簡単で効果も高いセーフブートを使ってMac のメンテナンスをします。Appleサポートでも次のように推奨しています。セーフブートとセーフモードは同じです。 セーフモードでは、Mac の起動時に所定のソフトウェア (ログイン項目、macOS で必須ではないシステム機能拡張、macOS でインストールされたものではないフォントな
Web パフォーマンスとプロダクト KPI の相関を可視化する話 2022ver - ドクターズプライム Official Blog
@1000ch (id:hc0001) です。技術顧問業としては広報周りの戦略を考えていることが多いのですが、今日はエンジニアリングの話です。 ドクターズプライムのプロダクト開発の中でも、パフォーマンス上の課題を発見して改善に取り組むことがあります。今回は @oinume (id:oinume) さんから 「この辺りの実装が問題になっていそう…」 という相談があったので、私がアプリケーション全体を眺めてボトルネックになっている箇所をいくつかピックアップし修正方針を提案したのですが、 実装を修正する前に 「まずは継続的にモニタリングできる環境を準備してパフォーマンスの前後がわかるようにしましょう」 ということで原点回帰した話です。 Core Web Vitals でリアルユーザーモニタリング パフォーマンス指標とプロダクト KPI の選定 リアルユーザーモニタリングと合成モニタリング データ
お気にリのサイトをアプリ化してしまう機能。 この機能はEdgeにもあるんだけど 今回はGoogleChromeでやってみた。 これがアプリ化したGoogleMap。 GoogleMapが独立したアプリのように使えるようになった。 よく使うサイトをアプリ化する利点は… ○ブラウザで開いたときのタブやアドレスバー、メニューがない ○画面の縦横をフルにして使える ○スタートメニューやタスクバーからワンクリックで起動できる 何よりもさっとアクセスできて したい作業に集中できるのがいい。 サイトのアプリ化の手順は簡単。 （１）Chromeのメニューを開いて （２）その他のツール （３）ショートカットの作成と進む ウインドウとして開くにチェックを入れて作成をクリック。 これでデスクトップ上にアプリ化されだサイトができてしまう。 右クリックで スタートメニューやタスクバーへの登録もできる、 アプリ化して
はじめに 今回は、クリエイターの業務効率を上げるGoogleChromeのおすすめ拡張機能をまとめていきます。 OctoTree - GitHub code tree GitHubでのレビューや検索を効率化させる拡張機能になっています。 コードナビゲーションによって、GitHub上の大量のコードの検索が簡単にできるようになります。 ColorZilla ColorZillaは、スポイトやカラーピッカーグラデーションの生成など簡単にできるツールになっています。 WhatFont Web ページで使用されているフォントを識別する際に使えるツールになっています。 OneTab 開いているページをリスト化しまとめることができる。メモリの消費量を削減できる。 JSON Formatter JSONデータを整形し、可読性を上げてくれるツールになっている。 エンジニア向けにJSONの解析やデバックをする
WebTransportとWebCodecsを組み合わせてビデオチャットを実装してみる - Qiita
この記事は？ こんにちは。NTTコミュニケーションズのyuki uchidaです。普段はSkyWayというWebRTCプラットフォームの開発やWebRTCリサーチャー(見習い)をしています。 この記事は NTTコミュニケーションズ Advent Calendar 2020 10日目の記事です。昨日はy-i さんの記事、 「グループ内プログラミングコンテストをオンライン上で開いた件」でした。 前回、 NTT コミュニケーションズのアドベントカレンダー3日目の記事として、「WebSocketの次の技術！？WebTransportについての解説とチュートリアル」という記事を投稿しました。 WebTransportが出てきた背景や、双方向通信の歴史について解説しているため、興味があれば是非ご覧ください。 今回の記事は、そのWebTransportとWebCodecsを組み合わせてビデオチャットを実
Web制作時にGoogleChrome拡張のAccessibility Insightsを使ってアクセシビリティの評価を行う | DevelopersIO
いわさです。 皆様、アクセシビリティに配慮したWebサイトの設計されてますでしょうか。 Webアクセシビリティを評価するためのツールがMicrosoftから提供されていますので紹介したいと思います。 Accessibility Insightsというツールです。 元々はMicrosoftにて内部開発されていたもので、2019年にオープンソース化されています。 本日はWebサイトのアクセシビリティの評価を行いたいと思いますが、AndroidやWindowsのアプリケーションにも対応しています。 Webアクセシビリティの場合はGoogle Chromeの拡張として提供されています。 Webアクセシビリティとは 全ての利用者や環境下において、使用できるようにWebサイトが設計・開発されていることを指します。 弊社の以下のエントリをご参照ください。 使ってみた テスト用のWebサイトはSeleni
LighthouseをFirebase Functionsから毎日叩いて本番環境のパフォーマンスを計測してみた - SMARTCAMP Engineer Blog
スマートキャンプの笹原です。 みなさんはWebサイトの、特にフロントのパフォーマンス改善を日頃から行っていますか？ 常に意識しているという方もいれば、気が向いたときにたまに見てみるなんてこともあるんじゃないかと思います。 今回はそんなパフォーマンスに常に意識を配れるように、毎日Lighthouseを叩いてみたのでその構成を紹介したいと思います。 Lighthouseとは 要件 処理の流れと制約 実際の構成 1. 定期的にCloud Tasksに各ページごとのTaskをEnqueueする TaskをEnqueueされるCloud Tasksのキュー作成 TaskをEnqueueするFunctionの作成 2. 各ページにLighthouseを実行しBiqQueryに結果を格納する 終わりに Lighthouseとは まずはLighthouseについて簡単な説明です。 Lighthouseとは
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
「Chromium OS」で古いノートパソコンを再利用
ノートパソコンの世界において、数年前の製品はあっという間に低スペック。とはいえ、古いノートパソコンといえども立派な電子デバイスです。どうにか活用したいなら「Chromium OS」を導入するという手もあります。実際に、ドライバーの不具合で起動できない古いノートパソコンにChromium OSを導入してみました。 Chromium OSは低スペックでも軽快 「Chromium OS」とは、GoogleChrome OSのオープンソース版のこと。元はGoogleが開発したOSで、Chromeブラウザ上で各種Webアプリを使うことを前提に開発されています。ウェブ閲覧はもちろんのこと、オンラインストレージにGoogleドライブ、文書作成にはGoogleドキュメントといったサービスが利用可能です。 Windowsに比べてOS自体が非常に軽く、低スペックの古いパソコンでも軽快に動作するのが最大の特徴。
GitHub - GoogleChrome/lighthouse-ci: Automate running Lighthouse for every commit, viewing the changes, and preventing regressions
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
オンラインセッション用TRPGツール「TRPGスタジオ」無料公開。リプレイを簡単に動画/ゲーム化可能 - AUTOMATON
フリーランスエンジニアのシケモクMK氏は7月29日、オンラインセッション用TRPGツール「TRPGスタジオ」を無料公開した。PC/スマートフォン/タブレット端末のブラウザ上で動作し、推奨ブラウザはGoogleChrome。同様のオンラインセッション用ツールとしては竹流氏の開発した「どどんとふ」があるが、「TRPGスタジオ」はリプレイをワンボタンでゲーム化できることが特徴となっている。なお、Twitter上でのトレンド入りに伴いアクセスが集中しているため、サービスが落ち着いてからの利用が促されている。 新ツール『TRPGスタジオ』をリリースしました！? GM・PLに分かれて手軽にオンラインセッションが楽しめます。セッション結果はティラノスクリプトとティラノビルダーのプロジェクトとしてゲーム化できる。無料です！https://t.co/Ki700pKGmk — シケモクMK? (@shikem
この記事はDiverse Advent Calendar 2020の16日目の記事です。 日本語 昨年の記事の続きです。 あれから一年経ちました。え、もう１年？ ことのあらまし 昨年、インドから来たエンジニアさんが後輩になりました。 それについては昨年のアドベントカレンダーに書いたので、まずはそちらをお読みください。 2ヶ月間、英語で後輩指導してみた 現在の英語スキル そりゃあメキメキ成長しましたよ！ 嘘です、見栄を張りました 昨年に自分が書いた記事と比較すれば間違いなくスキルは伸びていると思います。 昨年よりかはスムーズに文章の読み書きができるようになりましたし、件の後輩さんと英語でおしゃべりするにしてもハードルが低くなった気がしています。 （まあ私の場合は言語に関係なく誰と話すのでも緊張したりするんですねどね、コミュ障なので…） 語彙も増えました whether, I wonder /
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
メルカリWebのマイクロサービス化、その4年 | メルカリエンジニアリング
Notionを使って自分だけの参考サイト集を作ってみる - paiza times
画像による Layout Shift が無くなる Web がやって来る - mizdra's blog
各業界でのデータサイエンスの活用について調べてみた（随時追加） – かものはしの分析ブログ
Web パフォーマンスのための HTML 最適化 | メルカリエンジニアリング
消耗する文章を避けるためのはてなブックマーク NGワード集
GitHubのスターは金にならない - Qiita
【2023年版】機械学習の日本語無料学習教材まとめ - Qiita
Web Speed Hackathon 2021 miniでほぼ満点を出しました
新しいメルカリ Web の話 | メルカリエンジニアリング
10分で完成！WEBサイトパフォーマンス計測基盤 ver.2019 - dely Tech Blog
Temporarily rolling back SameSite Cookie Changes
【ChatGPTとは?】2024年最新!始め方と使い方を徹底解説 - 起業ログ
Datadog と Lighthouse を利用した WebPerf の継続的計測
InstChocoでのChocolateyインストールでWindowsソフトウェア引っ越しが楽々！ - はるなぴログ
2020年のMacはセーフブートやFirstAidでスッキリ大掃除 - T’s blog
GoogleChromeでサイトをアプリ化♪ : Pentax Heaven
【2024年】業務効率を上げるChromeの拡張機能 - Qiita
Chrome is deploying HTTP/3 and IETF QUIC
1年とちょっと、英語で後輩指導してみた - Qiita