タグ

webに関するginpeiのブックマーク (482)

  • JSON Lines

    Documentation for the JSON Lines text file format This page describes the JSON Lines text format, also called newline-delimited JSON. JSON Lines is a convenient format for storing structured data that may be processed one record at a time. It works well with unix-style text processing tools and shell pipelines. It's a great format for log files. It's also a flexible format for passing messages bet

    ginpei
    ginpei 2024/03/04
    1行ごとにJSONを記述する方式のテキストファイル仕様。ログファイルに最適、CSVより良いぞ、とのこと。推奨の拡張子は.jsonl、MIMEタイプはapplication/jsonl。
  • Identity Platform | Google Cloud

    Add Google-grade identity and access management to your apps with our customer identity and access management (CIAM) platform.

    Identity Platform | Google Cloud
    ginpei
    ginpei 2023/11/15
    Google提供の汎用ログインAPIサービス。
  • decoding="async" について詳しく調べてみる

    この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを

    decoding="async" について詳しく調べてみる
    ginpei
    ginpei 2023/07/21
    <img>に付けるloading="lazy"とdecoding="async"に関する説明。Chromeの挙動。decodingは指定なしで良さそう。
  • Bridgy Fed

    Got a fediverse account? Follow any 🌐 web site, eg example.com, by searching for @example.com@web.brid.gy in your fediverse instance. Bridgy Fed connects some of the most popular decentralized social networks. You can use it from one network to make your profile visible in another network, follow people there, see their posts, and reply and like and repost them. All interactions work in both dire

    ginpei
    ginpei 2023/07/18
    ウェブサイトをMastodon等のfediverseへ接続するサービス。独立アカウントとして運用する他、既存アカウントから投稿させることも可能。
  • 文字と行間の大きさは何が良い?読みやすさとKPI両立への挑戦

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか? 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き

    文字と行間の大きさは何が良い?読みやすさとKPI両立への挑戦
    ginpei
    ginpei 2023/06/11
    日本語の文章に関する実験。スマホ向けには文字の大きさ17pxと高さ1.6を中心に考えると良いそう。
  • Perplexity AI

    Bulletproof coffee, also known as butter coffee or keto coffee, is a high-calorie drink made with added fats, intended to fuel your start to the day. It was created by Dave Asprey, the originator of the Bulletproof Diet, and is popular among low-carb dieters and those following a ketogenic diet. The drink consists of coffee made from high-quality beans, unsalted butter, and a medium-chain triglyce

    ginpei
    ginpei 2023/02/01
    質問すると複数の出典付きで回答してくれるチャットボット。必ずしも内容が正しくはないが、すぐ参考文献を確認できる。
  • Introducing Turbopack: Rust-based successor to Webpack – Vercel

    Vercel's mission is to provide the speed and reliability innovators need to create at the moment of inspiration. Last year, we focused on speeding up the way Next.js bundles your apps. Each time we moved from a JavaScript-based tool to a Rust-based one, we saw enormous improvements. We migrated away from Babel, which resulted in 17x faster transpilation. We replaced Terser, which resulted in 6x fa

    Introducing Turbopack: Rust-based successor to Webpack – Vercel
    ginpei
    ginpei 2022/10/27
    Webpack作者Tobias Koppers氏による後継ツール。Rust製で最新のメモ化機構を備え700倍高速とのこと。まだアルファ版でNext.js 13から利用可能
  • Netlify App

    Start building the best web experiences in record time

    ginpei
    ginpei 2022/09/10
    HTMLの静的ファイルを含むフォルダーを単純にアップロードして公開できるサービス。未ログイン状態だと1時間で消える。
  • GitHub Skills

    GitHub Skills Learn how to use GitHub with interactive courses designed for beginners and experts. Start with Introduction to GitHub

    ginpei
    ginpei 2022/06/09
    GitHubの使い方を学べる公式テキスト。PRレビューや衝突の修正、Pages公開等。チュートリアル的なリポジトリーをUse this templateして始める。英語のみ。
  • signal

    Fully Open-sourced Online MIDI Editor

    signal
    ginpei
    ginpei 2022/02/14
    オンラインのMIDIエディター。Launchからすぐ利用できる。CodePenの音楽版を目指しているそうだ。
  • 2022年におけるフロントエンド開発のベースライン

    LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022フロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは4Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは!LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変

    2022年におけるフロントエンド開発のベースライン
    ginpei
    ginpei 2022/01/27
    データ提示多い安心記事。2年前Safari、安いAndroid、4G回線を現代の基準線に。速度(Core Web Vitals)とアクセシビリティ不十分サイト多い。IEを落とすと機能をフルに使えてサイズも減る。静的サイトは専用ツール優位が顕著。
  • Web フォントを使って contenteditable から脱出する - LINE ENGINEERING

    LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINE フロントエンド開発センターの玉田です。突然ですが、日よりフロントエンド開発に携わる UIT のエンジニアが持ち回りで記事を公開する「UIT 新春 Tech blog」を開催します。 UIT のメンバーが普段の業務で得た知識や、年末年始でたまった知見などを共有していきます。記事の公開から 1 月 28 日 (金) まで、平日の毎日違うメンバーが記事を公開していきます。ぜひ最後まで見に来てください! トップバッターは私から、フロントエンドエンジニアを悩ませる contenteditable からの脱却についてです。 contenteditable の呪い みなさんは contenteditable につい

    Web フォントを使って contenteditable から脱出する - LINE ENGINEERING
    ginpei
    ginpei 2022/01/22
    絵文字等が利用可能な入力欄の作り方。文字列としては空白を表示し別レイヤーで画像等を重ねる。空白は独自に可変フォントを用意、設定で柔軟な大きさに。
  • rjとtとjqコマンドでHTTPレスポンスを試験する - ゆーすけべー日記

    Web 開発者は HTTP レスポンスをよく見る。 以前 CDN を導入する際に、キャッシュがヒットしているかどうか、どこのエッジがキャッシュを返しているかを確認するためにヘッダをよく見ていた。また、ヘッダだけではなく、TTFB といったレスポンスタイムも気にしている。とにかく HTTP レスポンスをよく見る。 HTTP レスポンスを確認する3つの方法 Chrome さえあれば DevTools を見て一目瞭然である。 とはいえ、コマンドラインで確認したい時がしばしばある。 GUI を操作するよりも手軽である。 その場合はcurlコマンドを叩けばよい。 これでプロトコル、ステータス、ヘッダが分かる。 また、レスポンスタイムを測りたければ、その名もttfb.shというcurlをラップしたコマンドラインツールがある。 https://github.com/jaygooby/ttfb.sh この

    rjとtとjqコマンドでHTTPレスポンスを試験する - ゆーすけべー日記
    ginpei
    ginpei 2022/01/22
    rjでウェブAPI結果取得、jqでJSON解析して抽出、tで試験。パイプで繋げてCLIから利用。返却内容の試験の他、死活監視や応答時間計測も。
  • Dream by WOMBO

    Create beautiful artwork using the power of AI. Enter a prompt, pick an art style and watch WOMBO Dream turn your idea into an AI-powered painting in seconds.

    ginpei
    ginpei 2022/01/06
    キーワードと雰囲気を入力するとAIが絵画を生成してくれるサービス。印刷物販売で稼ぐのかな。生成物の権利が不明。ウェブ版動かなかった。
  • Mozilla Observatory

    📣︎ Heads up! Mozilla Observatory 2.0 launches on January 25, 2024. New security scoring standards will apply - Your website grade may change. Learn More. The Mozilla Observatory has helped over 240,000 websites by teaching developers, system administrators, and security professionals how to configure their sites safely and securely.

    ginpei
    ginpei 2021/10/17
    ウェブページのレスポンスをスキャンしてCORSやCSP等セキュリティ方面のヘッダーを評価してくれるツールっぽい。Mozilla製
  • ちいさな Web ブラウザを作ってみよう

    ちいさな Web ブラウザを作ってみよう
    ginpei
    ginpei 2021/07/24
    おもしろそうだ。現時点では冒頭のみ。
  • Getting Started

    Welcome to version 3 of The Movie Database (TMDB) API. This is where you will find the definitive list of currently available methods for our movie, tv, actor and image API. If you need help or support, please head over to our API support forum. To register for an API key, click the API link from within your account settings page. Please note that the API registration process is not optimized for

    ginpei
    ginpei 2021/05/01
    世界中?の映画の情報を網羅するThe Movie Database (TMDb)の情報を得られるAPI。要登録。学生さんの課題とかに良さそう。
  • Next.jsアプリをVercelからGoogle Cloudに移行した話

    ZennではフロントエンドNext.jsを使っています。もともとはVercelで動かしていたのですが、2021年3月にGoogle Cloudに移行しました。今回は移行を決めた理由や、具体的な構成、移行作業などについて書きたいと思います。 なぜ移行したのか Next.jsのデプロイ先としてVercelは圧倒的に優れています。ISRやImage OptimizationといったNext.jsの強力な機能をサーバー側の追加設定なしで使用できますし、CDNでの静的ファイルのキャッシュなども特に意識しなくてもいい感じにやってくれます。 Vercel以外にデプロイするとなると、Next.jsの一部の機能がうまく動かなかったり、パフォーマンス・チューニングを自分で頑張る必要があったりと自分で面倒を見なければならない部分が多くなります。 しかし、Zennのケースでは以下のような理由からVercelから

    Next.jsアプリをVercelからGoogle Cloudに移行した話
    ginpei
    ginpei 2021/03/30
    元々GCP利用なので親和性の向上、依存先の低減、値段。GCPでISRは使えないが近い挙動は実現可能。一部機能や開発環境は先に移行し、負荷試験も済ませ、詳細な手順書を用意して当日のミスを防ぐ。
  • Stick Figure Recorder

    Create animated stick figure gifs by recording youself with your webcam!

    Stick Figure Recorder
    ginpei
    ginpei 2021/03/25
    映像から人体を認識して棒人間のアニメーションにする。ウェブ技術で完結。
  • <css-doodle />

    There's an alternative way to set up the grid by using the @grid property. <css-doodle> :doodle { @grid: 5 / 8em; } background: #60569e; transform: scale(@rand(.2, .9)); </css-doodle> :doodle { @grid: 5; @size: 8em; } background: #60569e; transform: scale(@r(.2, .9)); use Import rules from CSS custom properties (CSS variables). <css-doodle use="var(--rule)"></css-doodle> It's highly recommended to

    ginpei
    ginpei 2021/02/10
    ウェブコンポーネントを使って独自に拡張したCSSを記述できるもの。こういう使い方もあるんだ。