タグ

webとjavascriptに関するtoshi-tomaのブックマーク (9)

  • Async Clipboard API

    Safari 13.1 adds support for the async Clipboard API. This API allows you, as web developers, to write and read data to and from the system clipboard, and offers several advantages over the current state of the art for reading and writing clipboard data via DataTransfer. Let’s take a look at how this new API works. The API The Clipboard API introduces two new objects: Clipboard, which is accessibl

  • WebでHTMLをいい感じにコピーさせる - VideoTouch Engineering Blog

    こんにちは id:mstssk です。 Webサービスを作っていると、何かしらをユーザーにコピーして使ってもらうというシチュエーションが出てきます。 WebページをシェアするためにURLのコピーボタンが置いてある、なんていうのはよく見かけますね。 しかし、ある程度複雑なコンテンツはHTML情報としてコピーさせたい事が稀にあります。 画像やリンクを含んだHTMLです。 そこで、もう少し欲張って、こういうことが出来ないか調べてみました。 テキストエディタに貼り付けると、HTMLソースコードのテキストとして貼り付け WYSIWYGエディタに貼り付けると、書式情報を保ったコンテンツとして貼り付け 3行まとめ ただのテキストをコピーするだけならクリップボードAPIを使えばOK。 HTMLをWYSIWYGに貼り付ける状態でコピーさせるには、現在非推奨な実装方法を使いつつ一工夫必要になるけど可能。 一行

    WebでHTMLをいい感じにコピーさせる - VideoTouch Engineering Blog
  • An Introduction to the Picture-in-Picture Web API | CSS-Tricks

    How to use the Picture-In-Picture API Let’s start by adding a video to a webpage. <video controls src="video.mp4"></video> In Chrome, there will already be a toggle for entering and exiting Picture-in-Picture mode. To test Firefox’s implementation, you’ll need to enable the media.videocontrols.picture-in-picture.enabled flag in about:config first, then right-click on the video to find the picture-

    An Introduction to the Picture-in-Picture Web API | CSS-Tricks
  • クリティカル レンダリング パス  |  Articles  |  web.dev

    クリティカル レンダリング パス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 クリティカル レンダリング パスの最適化とは、現在のユーザー操作に関連するコンテンツの表示を優先することです。 高速なウェブ エクスペリエンスを提供するには、ブラウザで多くの処理を行う必要があります。こうした作業のほとんどは、ウェブ デベロッパーには見えません。Google がマークアップを記述すると、見栄えのよいページが画面に表示されます。しかし、ブラウザはどのようにして HTMLCSSJavaScript を取り込み、画面上のピクセルをレンダリングするのでしょうか。 パフォーマンスを最適化するには、HTMLCSSJavaScript のバイトを受け取るまでの中間ステップと、それらをレンダリングされたピクセルに変換するために必要な処理(クリティカル レンダリング パ

  • History - Web API | MDN

    History インターフェイスで、ブラウザーのセッション履歴、つまり現在のページが読み込まれたタブまたはフレームで訪問したページを操作することができます。 history のインスタンスは 1 つしかなく(シングルトンです)、グローバルオブジェクト history を通してアクセスできます。 History インターフェイスは何もプロパティを継承していません。 length 読取専用 現在読み込まれているページを含むセッション履歴の要素数を表す Integer を返します。たとえば、新しいタブで読み込まれたページのこのプロパティは 1 を返します。 scrollRestoration ウェブアプリケーションが履歴の操作で既定のスクロール位置の復元を明示的に設定できるようにします。このプロパティは auto または manual を指定することができます。 state 読取専用 履歴スタッ

    History - Web API | MDN
  • 会長のGoogle I/O 19 ツイートまとめ

    Yosuke Furukawa @yosuke_furukawa これがGoogle ioか、、、今までのカンファレンスと比較にならない。 jsconf euも “すごい”と思ったけど、こっちは “やばい”。 一つの法人が運営できる規模を大幅に超えてる。 2019-05-08 01:06:26

    会長のGoogle I/O 19 ツイートまとめ
  • 話題の Portals を使った画面遷移 UX の未来 | ウェブボウズ

    ご無沙汰しております。ウェブボウズを立ち上げて 1 年が経ちました。皆さま如何お過ごしでしょうか。私は、この 1 年間ひとつもブログポストできていません。さらには私の坊主頭(スキンヘッド)にちなんでウェブボウズという名前をつけた個人ブログでありましたが、5 年間共にしたこの Hair-less style から心機一転して 2019 年は髪を育んでいく方針を固めましたので、もはやボウズでもなくなってます。変わり続けることだけが普遍であると胸に刻んで今年も強く生きていきたいと考えております。 さて、最近 Signed HTTP Exchanges やら Performance Budget やらさまざまな面白いことに関わらせていただいて忙殺と幸せを噛み締めている中でも、Chrome Dev Summit 2019 でも大きくフィーチャーされました Portals という新しい HTML 要素

    話題の Portals を使った画面遷移 UX の未来 | ウェブボウズ
  • Rendering on the Web  |  Articles  |  web.dev

    Rendering on the Web Stay organized with collections Save and categorize content based on your preferences. One of the core decisions web developers must make is where to implement logic and rendering in their application. This can be difficult because there are so maby ways to build a website. Our understanding of this space is informed by our work in Chrome talking to large sites over the past f

  • 2019年に注目すべきWebテクノロジー6選 - Qiita

    以下はInteresting Web Technologies to follow in 2019の日語訳です。 Interesting Web Technologies to follow in 2019 Web開発の世界は絶えず変化し続けており、起こっていること全てに目を配ることは困難です。 来年はどのフレームワークがまだ生き残っているでしょうか? そして、あなたのWebアプリケーションにはどのプログラミング言語が最も適しているでしょうか? Web開発のための興味深い技術を6個、選んで解説してみます。 この記事ではフロントエンドとバックエンドの技術を区別しています。 まずフロントエンド開発フレームワークを3点紹介し、次にバックエンド開発フレームワークを3点紹介します。 Front-end Frameworks 1. React.js Reactを使うと、開発者はそれぞれが独自のsta

    2019年に注目すべきWebテクノロジー6選 - Qiita
  • 1