2020年、知っておくと便利なCSSのプロパティのまとめ
ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。 Uncommon CSS Properties by Ahmad Shadeed はじめに CSS Gridでの中央揃え place-itemsプロパティ Flexboxと古き良きmargin: auto; あまり知られていない::marker疑似要素 text-alignプロパティ display: inline-flex;プロパティ column-ruleプロパティ background-repeat: roun
最終フロンティアに到達したJavaScript：宇宙
原文(投稿日：2020/06/30)へのリンク 最近のSpaceX Dragonの打ち上げにより、宇宙にJavaScriptが登場した。ChromiumとJavaScriptを利用して、ユーザーインターフェイスの大部分はWeb技術に依存している。 Twitterでの関連する議論やSpaceXソフトウェアチームのメンバーとのRedditでのAMAセッションでは、「もしかして、node_modulesは本当に宇宙一重いモジュールなのか？」のような重要なユーモアがありましたが、JavaScriptはSpaceX Dragon宇宙船のためのモダンなタッチスクリーンベースのUIをサポートしている。 最近のOpenJS WorldカンファレンスでNASAの宇宙飛行士Christina Koch氏が説明したように、SpaceXは非常に近代的なディスプレイを備えている。Dragonはタッチスクリーンを搭載
Chromiumベースのブラウザー開発を手がけるBraveの最高経営責任者（CEO）Brendan Eich氏は、JavaScriptの中核デザイナーとしても知られている。その同氏の手によって、「Mosaic」から「Internet Explorer」（IE）、そして「Google Chrome」に至るまでのウェブブラウザーにおけるJavaScript誕生後の20年をまとめた文書が公開された。 JavaScriptは、ウェブやブラウザー向けの最も頼れるプログラミング言語となっており、ネイティブなモバイルアプリやデスクトップアプリでも採用されるケースが増えている。 ウェブアプリを開発する上でJavaScriptの知識は必須と言えるだろう。同言語はJavaや、機械学習（ML）の台頭によって普及してきているPythonとともに3大人気プログラミング言語に数えられている。 JavaScriptは1
Googleが、Webページ内の特定のテキストにリンクを張れるChrome拡張機能を公開した。Chromium版Edgeでも利用可能だ。 米Googleは6月17日（現地時間）、Chrome拡張機能「Link to Text Fragment」をChrome Web Storeで公開した。Webページ上の特定のテキストへのURLを生成できる。 拡張機能をインストールしたら、リンクしたいテキスト部分を選択し、右クリックで表示されるメニューで「Copy link to Selected Text」を選ぶ。 これでURLが生成されるので、後はメールなりメッセンジャーなりにペーストするだけだ。例えば記事の途中などにもリンクできる。リンクをクリックすると、リンク先として選ばれた部分が黄色く表示される。 長い論文で参照したい部分の覚え書きにも使えそうだ。 筆者の環境では、Chromium版Edgeでも
Link to Text Fragment
Browser extension that allows for linking to arbitrary text on a page.
複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。 そんな:is()と:where()の便利な使い方を紹介します。 CSS :is() and :where() are coming to browsers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 :is()を使用すると、繰り返しを減らせる :where()を使用すると、詳細度を低くキープできる CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 CSSの新しい疑似クラス「:is()」「:where()」が、Safari（Tech Preview 1
Latest topics > Chromiumのコミットメッセージの「よりinclusiveにする」とはどういう意味か、GitHubがしている事の何がキナ臭いのか - outsider reflex
Latest topics > Chromiumのコミットメッセージの「よりinclusiveにする」とはどういう意味か、GitHubがしている事の何がキナ臭いのか 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « GitHubに多数ある自分のリポジトリのデフォルトブランチをmasterからtrunkに切り替えた Main 「同調圧力は忌むべきものだ」と思考停止していたことに気付いた話 » Chromiumのコミットメッセージの「よりinclusiveにする」とはどういう意味か、GitHubがしている事の何がキナ臭いのか - Jun 16, 2020 1つ前のエントリにちょいちょい追記してるんだけど、見通しが悪くなってしまったので別エントリにした。
Why this is importantOur Code of Conduct under “Be respectful and constructive” says: Each of us has the right to enjoy our experience and participate without fear of harassment, discrimination, or condescension, whether blatant or subtle. Emphasis is added: unnecessarily exclusive code is discriminatory and condescending, and reading biased code isn't enjoyable. Gender-NeutralSome points in our c
2020年初め、Chromium版のMicrosoft Edge（以下新Edge）がリリースされました。新Edgeは「Microsoft Edge Legacy」（以下Edge Legacy）と比べて多くの機能が使えるようになっており、Chrome・Firefox・Safariのモダンブラウザと遜色ないレベルになっています。 先日5月29日にリリースされた「Windows 10 May 2020 Update」では、Edge Legacyの開発が終了することもアナウンスされており（参考記事「Windows 10 features we’re no longer developing - Windows Deployment」）、今後のWindows標準ブラウザは新Edgeとなっていくでしょう。 ウェブ制作の面で嬉しいことは、多くのCSSやJavaScriptの機能が使えるようになったことで
Yasoob Khalidのブログより。 皆さん、こんにちは! 👋 この土曜日に行われたSpaceXの打ち上げをご覧になった方も多いのではないでしょうか。それは驚くべき、歴史的な出来事でした。何百万人もの人々がYouTubeや他の場所でその様子をライブで見ていました。日を追うごとに、私たちは商業宇宙飛行に近づいており、私は興奮していることに同意しなければなりません。 この打ち上げは、宇宙旅行に対する興奮を煽るだけでなく、これらのロケットに搭載されている技術にも興味が湧いてきました。コンピュータ・サイエンスの観点からいくつか調べてみましたので、その結果を共有したいと思いました。言うまでもなく、これらの情報のほとんどは、私がオンラインで見付けた様々な情報源から集めたものです。間違った情報が含まれないように努めましたが、この情報が100%正確である保証はありません。 チーム 7年前、Space
What computer and software is used by the Falcon 9?
I don't know if this would be public, but what CPU / Microcontrollers are used and what software do they run on the Falcon 9? Do they use an OS or is it just bare metal programming? I found some model rocket flight computers that are available for purchase and just wanted to know what approach SpaceX took towards this.
e-TaxはGoogle Chromeに対応していきます。| 【e-Tax】国税電子申告・納税システム(イータックス)
令和2年5月25日より、Google Chromeから「受付システム」及び「e-Taxの開始(変更等)届出書作成・提出コーナー」をご利用いただけるようになりました。 Google Chromeからのご利用に当たっては、事前にChromeウェブストアへアクセスし、Chrome拡張機能をダウンロードする必要があります。 Chrome拡張機能は、受付システム専用の事前準備セットアップインストーラを実行中にChrome ウェブストアのページへ移動し、ダウンロードすることができます。 操作にご不明な点がございましたら、インストールマニュアルをご確認ください。 なお、以下のソフト・コーナーについても、令和3年1月からGoogle Chromeに対応する予定です。 Google Chrome対応予定ソフト・コーナー（令和3年1月予定） ・e-Taxソフト(WEB版) ・NISAコーナー ・FATCAコー
Microsoftが、開催中の「Build 2020」において、Linux向けの「Microsoft Edge」を初めて披露しました。 Linux向けの「Microsoft Edge」は昨年11月に開催された「Ignite 2019」で正式に明らかにされたもので、今回の「Build 2020」でチラ見せがあったようで、そのスクリーンショットが上記画像です。 なお、「Microsoft Edge for Linux」正式なリリース時期はまだ明らかにされていないものの、今夏になるものとみられています。 IS THAT EDGE ON LINUX?????!!!! #MSBuild pic.twitter.com/OGL4K2vPRs — Zhuowen Cui (@zhuowencui) May 19, 2020
$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
Playwright
Playwright enables reliable end-to-end testing for modern web apps. Any browser • Any platform • One API Cross-browser. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Cross-platform. Test on Windows, Linux, and macOS, locally or on CI, headless or headed. Cross-language. Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java. Test Mobile Web
Cookie の SameSite 属性について - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの小林（@koba04）です。 フロントエンドエキスパートチームでは、日々の業務としてブラウザやライブラリの更新情報をキャッチアップして社内で共有しています。 例えば先日、CSSのプロパティである image-orientation のデフォルト値が none から from-image に変わったため、画像の Exif 情報の扱いが変更されました。 https://www.fxsitecompat.dev/ja/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/ 注： Firefox では COVID-19 の影響により、この変更は延期されました。（Chrome は予定通り 81 で リリースしています） https://blog.chromium.o
「Chromium OS」で古いノートパソコンを再利用
ノートパソコンの世界において、数年前の製品はあっという間に低スペック。とはいえ、古いノートパソコンといえども立派な電子デバイスです。どうにか活用したいなら「Chromium OS」を導入するという手もあります。実際に、ドライバーの不具合で起動できない古いノートパソコンにChromium OSを導入してみました。 Chromium OSは低スペックでも軽快 「Chromium OS」とは、GoogleChrome OSのオープンソース版のこと。元はGoogleが開発したOSで、Chromeブラウザ上で各種Webアプリを使うことを前提に開発されています。ウェブ閲覧はもちろんのこと、オンラインストレージにGoogleドライブ、文書作成にはGoogleドキュメントといったサービスが利用可能です。 Windowsに比べてOS自体が非常に軽く、低スペックの古いパソコンでも軽快に動作するのが最大の特徴。
2020年の1月-3月の3ヶ月間、GoogleのChromeチームでインターンをしました。Chromeプロダクトでインターンをするのはこれで3回目です。したがって、Chromeにもインターンにも比較的慣れており、仕事のスタートアップとラップアップに限って言えば正社員さんよりも回数をこなしている入社と退職のエリートです。 そんな僕が今年配属されたのはChrome Worker Teamでした。この記事ではインターンで実際に体験させてもらった「ChromiumでFeatureをShipする流れ」について紹介しようと思いますが、その前に今回のターゲットであるWorkerというものについて軽く説明してみます。(詳しい仕組みなどはまた別の記事で書いたり書かなかったりします。) Workerとは？ Workerとは、別スレッドでスクリプトを処理させるためのAPIです。重そうな処理とか別働隊として稼働し
Chrome 83 Beta: Cross-site Scripting Protection, Improved Form Controls, and Safe Cross-origin Resource Sharing
$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 34 chrome 81
This commit was created on GitHub.com and signed with GitHub’s verified signature. Big changes Chromium 81.0.4044.0 (r737027) Puppeteer can now fetch a Firefox Nightly binary for you via PUPPETEER_PRODUCT=firefox npm install. Also, there’s now an example showing how to launch Firefox with Puppeteer. File uploads are generally more reliable (#5363) and elementHandle.uploadFile(...filePaths) now tri
電子情報学特論： Chromium のアーキテクチャを解き明かす 〜 EEIC の授業が生きるプロダクトの世界〜 Kentaro Hara 2020 April (๑>ᴗ<๑) * * * *
電子情報学特論： Chromium のアーキテクチャを解き明かす 〜 EEIC の授業が生きるプロダクトの世界〜 Kentaro Hara 2020 April (๑>ᴗ<๑) * * * *
電子情報学特論： Chromium のアーキテクチャを解き明かす 〜 EEIC の授業が生きるプロダクトの世界〜 Kentaro Hara 2020 April (๑>ᴗ<๑) * * * *
電子情報学特論： Chromium のアーキテクチャを解き明かす 〜 EEIC の授業が生きるプロダクトの世界〜 Kentaro Hara 2020 April (๑>ᴗ<๑) * * * *
この度『手を動かしながら学ぶブラウザ拡張開発【基礎編】』という本を書きました。 技術書典8で販売する予定でしたが、残念ながら新型コロナウィルスの影響で技術書典のリアル開催が中止になりました。 その代わりにオンライン開催の技術書典 応援祭（おうえんまつり）が開催することになりました。 （運営の方、本当にお疲れ様です）。 電子版を以下のリンクからご購入いただけます。 手を動かしながら学ぶ ブラウザ拡張 開発［基礎編］（PDF版）：windhole またサンプルとして第1章を公開しているので、内容が気になるという方はこちらもチェックしてみてください。 手を動かしながら学ぶ ブラウザ拡張 開発［基礎編］ サンプル どんな本なの？ この本は「ブラウザ拡張」開発をテーマにした入門本です。 ブラウザ拡張とは、Chromium/Google ChromeでいうExtensions、FirefoxでいうAd
GitHub - go-rod/rod: A Devtools driver for web automation and scraping
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. Dismiss alert
$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
Clone via HTTPS Clone with Git or checkout with SVN using the repository’s web address. Date: 2020-04-01 Author: @azu Twitter: @azu_re 一次情報に近い二次情報の情報源をまとめたもの。 ここでの一次情報はコミットとかコードのこと。 Browser browser-resources: A Collection of official Resources/Status/Issues for browsers. ブラウザの公式ブログとかリリースノートとかのリンク集 JSer.info 週一のウェブ周りの情報ブログ Meta Weeklyに色々 増えては消えを繰り返している mozaic.fm Monthly Web Podcast 各ブラウザのリリースについて 各
アルゴリズムビジュアル大事典
このサポートページでは、マイナビ出版発行の書籍「アルゴリズムビジュアル大事典」にて作成しましたシンボル、アニメーション、疑似コードを掲載いたします。また、内容のアップデートを行ってまいります。詳しい解説は、本書をご参考にしてください。 アニメーションコントローラの使い方はクイックマニュアルでご確認頂けます。 補足情報が表示されているトピックにつきましては、ご注意ください。その他の訂正等は正誤表をご覧ください。ご質問、不具合等のご報告は、ご遠慮なくy.watanobe@gmail.com（渡部）までお送りください。
Get started here. Visual Studio Code (VS Code) is a free, open source, lightweight and powerful code editor for Windows, macOS and Linux, based on Electron/Chromium. It has built-in support for JavaScript, TypeScript and Node.js and a rich extension ecosystem that adds intellisense, debugging, syntax highlighting etc. For many languages like C++, Python, Go, Java, it works without too much setup.
Net Applicationsから2020年2月のデスクトップブラウザのシェアが発表された。2020年2月はChromeとEdgeがシェアを増やし、Firefox、Internet Explorer、Safariがシェアを減らした。シェアの上では2位以下を引き離して強い存在感を示しているChromeだが、過去1年間の推移は横ばい傾向を示しており、デスクトップ向けのWebブラウザとしてはほとんどシェアが変わらない状況になりつつある。 一方、順位は3位だが、Microsoft Edgeは過去1年間にわたり増加傾向にある。すでにChromiumをベースに開発された新しいバージョンのMicrosoft Edgeはリリースされており、今後Windows Update経由でより多くのユーザーに行き渡ることにもなっている。現在の傾向が続いた場合、FirefoxとMicrosoft Edgeの順位は逆転
【現在は対応不要】Chrome80以降でALBの認証を使っているとcookieが4096バイトを超えて認証できないことがあり、社内サービスではcookie名を縮めて対応した - hitode909の日記
2020/2/18追記 サポートに問い合わせたところ、ALBの不具合はロールバック済みで、cookie名を縮める対応は不要、とのことでした。試してみたところ、たしかにcookie名の指定をやめても問題なく認証できました。 AWSのApplication Load Balancerの認証機能を使って、スタッフからのアクセスのみ許可する社内向けウェブサービスを運用しているのだけど、昨日くらいからGoogle Chromeで認証が通らなないという声を聞くようになった。 現象としてはリダイレクトループが発生していて、コンソールを見るとSet-Cookie headerが長すぎるというエラーが出ていた。 Set-Cookie header is ignored in response from url: https://****/oauth2/idpresponse?code=e51b4cf0-8b
Chromium版Edgeの「IEモード」は仕事で使える？ セキュリティや仕事効率化の便利機能もチェックした Windows 10の標準ブラウザとなった「Chromium版Edge」は果たして仕事に使える？ 「Silverlight」でできたWebサイトはどうする？ 「Active X」は動く？ 実際の使い勝手をレビューした。思いの他「使える」機能も紹介する。 レンダリングエンジンを切り替えた新生Edgeブラウザである「Chromium版Edge」は2020年1月16日からMicrosoftのWebサイトでダウンロード配布が始まった。さてこのChromium版Edgeは企業にとってどのようなメリットがあるのだろうか？ Web標準に準拠したChromium版Edge Chromium版Edgeの最大の特徴は、オープンソースのChromiumを使用して、Web標準に準拠したHTMLエンジン（B
マイクロソフト、新しいEdgeでDevToolsの日本語化実現。Chromiumのソースコードにもコントリビュート
マイクロソフト、新しいEdgeでDevToolsの日本語化実現。Chromiumのソースコードにもコントリビュート Chromeには「DevTools」と呼ばれる開発者向けのツールが組み込まれており、表示しているWebページのHTML/CSSの詳細の把握やJavaScriptのデバッグなど、さまざまな機能が利用ができます。 DevToolsはWebサイトやWebアプリケーションの開発にはなくてはならないツールですが、その表示内容はすべて英語で行われており、ややとっつきにくいところがあります。 そのDevToolsの日本語化が実現します。 マイクロソフトは、Chromiumをベースにした新しいEdgeブラウザで、DevToolsの日本語化を実現したと発表しました。 日本語のほかにも中国語（简体、繁體）、フランス語、ドイツ語、イタリア語、ポルトガル語、韓国語、ロシア語、スペイン語などにも対応し
Electron 8.0.0 | Electron
Electron 8.0.0 has been released! It includes upgrades to Chromium 80, V8 8.0, and Node.js 12.13.0. We've added Chrome's built-in spellchecker, and much more! The Electron team is excited to announce the release of Electron 8.0.0! You can install it with npm via npm install electron@latest or download it from our releases website. The release is packed with upgrades, fixes, and new features. We ca
「〜がChromiumベースに！」なことが起こるたびに「Chromium/BlinkはWebKitを源流とするエンジンでしかじか」みたいな話が出てきて、「実質WebKitだから同じだね」という反応が出てくるのが恒例行事っぽくなってるけど、結構モニョモニョする。 先祖が同じなら子孫も同じ、ってそんな単純な話じゃない。 fork前、BlinkがChromium WebKitというかWebKit Chromium portと呼ばれていた頃でさえ、Chromium portとApple portの2つが同じエンジンと呼べる箇所って、layoutとかdomとかstyleとかブラウザエンジンのコア部分だけで、他はV8とJSCとか、SkiaとCore Graphicsとか、そもそもプロセス分けてる方法も違うし、呉越同舟というか寄り合い所帯感だった。composition周りだってApple portはC
$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
オリジン全体にポリシーを適応するOrigin PolicyをChromeで試す - ASnoKaze blog
目次 Origin Policy 有効にさせる方法 試してみる Chromeがオリジン全体にポリシーを適応する「Origin Policy」という仕様をサポートしてるようなので、簡単に試してみる。(現在は Chrome Canaryのみの模様) おそらく仕様及び実装も変わりうるので注意が必要です（極力仕様の変更があったら、記事を更新するようにします） Origin Policy Content-Security-PolicyやFeature-Policyといった、ブラウザがページを表示する際に機能を制限したりセキュリティ上の制限を与える機能があります。これらの機能はレスポンスヘッダに該当のヘッダを付けることでポリシーを適応させることができます。 そのため、これらの機能をもれなく適応するにはレスポンスの都度きちんとこれらのヘッダーを付加しなければなりません。 また、CSPやFeature-P
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript誕生後の20年を生みの親ブレンダン・アイク氏らが振り返る
Webページの特定のテキストにリンクを張れるChrome拡張機能、Googleが公開
メモリ食いのGoogle Chrome、ついに消費量削減へ
CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！
Inclusive Chromium code
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 - ICS MEDIA
ブログ: SpaceX内部のソフトウェア・エンジニアリング
Microsoft、Linux版｢Microsoft Edge｣を披露
Protecting against resource-heavy ads in Chrome
ChromiumでFeatureをShipした話 - elkurin’s blog
Release v3.0.0 · puppeteer/puppeteer
電子情報学特論：Chromiumのアーキテクチャを解き明かす
電子情報学特論：Chromiumのアーキテクチャを解き明かす
電子情報学特論：Chromiumのアーキテクチャを解き明かす
電子情報学特論：Chromiumのアーキテクチャを解き明かす
『手を動かしながら学ぶブラウザ拡張開発【基礎編】』という本を出します
Temporarily rolling back SameSite Cookie Changes
ブラウザ/セキュリティ/プライバシー周りの一次情報に近い二次情報の情報源をまとめたもの
Chromium Docs - Visual Studio Code Dev
Edge、Firefoxを抜く勢い - 2月ブラウザシェア
Chromium版Edgeの「IEモード」は仕事で使える？ セキュリティや仕事効率化の便利機能もチェックした
アプリフレームワーク「Electron 8」が公開 ～Chrome組み込みのスペルチェック機能に対応／「Electron 5」系統のサポートは終了。「Electron 9」からは“remote”モジュールが廃止
BlinkとWebKitの違い（大雑把） - saneyuki_s log
Rethinking Payment Request for iOS Chrome