blogccasion

My Working From Home Setup During COVID-19

Google, like many other companies, has a required working from home (WFH) policy during the COVID-19 crisis. It has taken me a bit, but now I have found a decent WFH setup.

The Hardware

School bench on two chairs. On top of the school bench are shoe boxes with a laptop on top and two iPads surrounding it.
My COVID-19 working from home setup

The Software

  • The Sidecar feature, so I can use my iPad Pro as a second screen with my MacBook Air. The coolest about this feature is that I can multitask it away (see next bullet) without the laptop readjusting the screen arrangement.
  • The Hangouts Meet app on my iPad Pro, so my laptop performance stays unaffected when I am on a video call. A nice side-effect is that the camera of the iPad Pro is in the middle of my two screens, so no weird "looking over the other person" effect when I am on a call.
  • The Gmail app on my iPad Air, so I can always have an eye on my email.
  • (Honorable mention) The iDisplay app on the iPad Air with the iDisplay server running on the laptop, so I can use the iPad Air as a third screen. Unfortunately, since I do not have another free USB C port on my laptop, it is really laggy over Wi-Fi, but works when I really need maximum screen real estate.
  • (Out of scope) The Free Sidecar project promises to enable Sidecar on older iPads like my iPad Air 2, since apparently Apple simply blocks older devices for no particular reason. It requires temporarily turning off System Integrity Protection, which is something I cannot (and do not want to) do on my corporate laptop.

The Furniture

  • A school desk—This is a desk we had bought earlier on eBay, placed on two kids' chairs to convert it into a standing desk.
  • Some shoe boxes to elevate the two main screens to eye height. I had quite some neck pain during the first couple of days.

It is definitely not perfect, but I am quite happy with it now. I very much want the crisis to be over, but (with the kids back in school), I could probably get used to permanently working from home.

You can edit this page on GitHub.

Webmentions

13 Replies

It was installed as a provisional desk. As the saying goes: “Provisorien halten am längsten.” Our constitution even is one: en.wikipedia.org/wiki/Basic_Law….

10 Mentions

Get information about connected displays and position windows relative to those displays. Sep 14, 2020• Updated Sep 14, 2020 The Multi-Screen Window Placement API is part of the capabilities project and is currently in development. This post will be updated as the implementation progresses. The Multi-Screen Window Placement API allows you to enumerate the displays connected to your machine and to place windows on specific screens. Suggested use cases # Examples of sites that may use this API include: Multi-window graphics editors à la Gimp can place various editing tools in accurately positioned windows. Virtual trading desks can show market trends in multiple windows any of which can be viewed in fullscreen mode. Slideshow apps can show speaker notes on the internal primary screen and the presentation on an external projector. Current status # Step Status 1. Create explainer Complete 2. Create initial draft of specification Complete 3. Gather feedback & iterate on design In progress 4. Origin trial In progress 5. Launch Not started How to use the Multi-Screen Window Placement API # Enabling via chrome://flags # To experiment with the Multi-Screen Window Placement API locally, without an origin trial token, enable the #enable-experimental-web-platform-features flag in chrome://flags. Enabling support during the origin trial phase # Starting in Chrome 86, the Multi-Screen Window Placement API will be available as an origin trial in Chrome. The origin trial is expected to end in Chrome 88 (February 24, 2021). Origin trials allow you to try new features and give feedback on their usability, practicality, and effectiveness to the web standards community. For more information, see the Origin Trials Guide for Web Developers. To sign up for this or another origin trial, visit the registration page. Register for the origin trial # Request a token for your origin. Add the token to your pages. There are two ways to do that: Add an origin-trial <meta> tag to the head of each page. For example, this may look something like: <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE"> If you can configure your server, you can also add the token using an Origin-Trial HTTP header. The resulting response header should look something like: Origin-Trial: TOKEN_GOES_HERE The problem # The time-tested approach to controlling windows, Window.open(), is unfortunately unaware of additional screens. While some aspects of this API seem a little archaic, such as its windowFeatures DOMString parameter, it has nevertheless served us well over the years. To specify a window’s position, you can pass the coordinates as left and top (or screenX and screenY respectively) and pass the desired size as width and height (or innerWidth and innerHeight respectively). For example, to open a 400×300 window at 50 pixels from the left and 50 pixels from the top, this is the code that you could use: const popup = window.open( "https://example.com/", "My Popup", "left=50,top=50,width=400,height=300" ); You can get information about the current screen by looking at the window.screen property, which returns a Screen object. This is the output on my MacBook Air 13″: window.screen; Like most people working in tech, I have had to adapt myself to the new work reality and set up my personal home office. Mine looks like on the photo below (if you are interested, you can read the full details about my setup). The iPad next to my MacBook Air is connected to the laptop via Sidecar, so whenever I need to, I can quickly turn the iPad into a second screen. A multi-screen setup.If I want to take advantage of the bigger screen, I can put the popup from the code sample above on to the second screen. I do it like this: popup.moveTo(2500, 50); This is a rough guess, since there is no way to know the dimensions of the second screen. The info from window.screen only covers the built-in screen, but not the iPad screen. The reported width of the built-in screen was 1680 pixels, so moving to 2500 pixels might work to shift the window over to the iPad, since I happen to know that it is located on the right of my MacBook Air. How can I do this in the general case? Turns out, there is a better way than guessing. That way is the Multi-Screen Window Placement API. Feature detection # To check if the Multi-Screen Window Placement API is supported, use: if ("getScreens" in window) { } The window-placement permission # Before I can use the Multi-Screen Window Placement API, I must ask the user for permission to do so. The new window-placement permission can be queried with the Permissions API like so: let granted = false; try { const { state } = await navigator.permissions.query({ name: "window-placement" }); granted = state === "granted"; } catch { } The browser can choose to show the permission prompt dynamically upon the first attempt to use any of the methods of the new API. Read on to learn more. The isMultiScreen() method # To use the the Multi-Screen Window Placement API, I will first call the Window.isMultiScreen() method. It returns a promise that resolves with either true or false, depending on whether one or multiple screens are currently connected to the machine. For my setup, it returns true. await window.isMultiScreen(); The getScreens() method # Now that I know that the current setup is multi-screen, I can obtain more information about the second screen using Window.getScreens(). It returns a promise that resolves with an array of Screen objects. On my MacBook Air 13 with a connected iPad, this returns an array of two Screen objects: await window.getScreens(); Note how the value of left for the iPad starts at 1680, which is exactly the width of the built-in display. This allows me to determine exactly how the screens are arranged logically (next to each other, on top of each other, etc.). There is also data now for each screen to show whether it is an internal one and whether it is a primary one. Note that the built-in screen is not necessarily the primary screen. Both also have an id, which, if persisted across browser sessions, allows for window arrangements to be restored. The screenschange event # The only thing missing now is a way to detect when my screen setup changes. A new event, screenschange, does exactly that: it fires whenever the screen constellation is modified. (Notice that “screens” is plural in the event name.) It also fires when the resolution of one of the connected screens changes or when a new or an existing screen is (physically or virtually in the case of Sidecar) plugged in or unplugged. Note that you need to look up the new screen details asynchronously, the screenschange event itself does not provide this data. This may change in the future. For now you can look up the screen details by calling window.getScreens() as shown below. window.addEventListener('screenschange', async (event) => { console.log('I am there, but mostly useless', event); const details = await window.getScreens(); }); New fullscreen options # Until now, you could request that elements be displayed in fullscreen mode via the aptly named requestFullScreen() method. The method takes an options parameter where you can pass FullscreenOptions. So far, its only property has been navigationUI. The Multi-Screen Window Placement API adds a new screen property that allows you to determine which screen to start the fullscreen view on. For example, if you want to make the primary screen fullscreen: try { const primaryScreen = (await getScreens()).filter((screen) => screen.primary)[0]; await document.body.requestFullscreen({ screen: primaryScreen }); } catch (err) { console.error(err.name, err.message); } Polyfill # It is not possible to polyfill the Multi-Screen Window Placement API, but you can shim its shape so you can code exclusively against the new API: if (!("getScreens" in window)) { window.getScreens = async () => [window.screen]; window.isMultiScreen = async () => false; } The other aspects of the API—the onscreenschange event and the screen property of the FullscreenOptions—would simply never fire or silently be ignored respectively by non-supporting browsers. Demo # If you are anything like me, you keep a close eye on the development of the various cryptocurrencies. (In reality I very much do not, but, for the sake of this article, just assume I do.) To keep track of the cryptocurrencies that I own, I have developed a web app that allows me to watch the markets in all life situations, such as from the comfort of my bed, where I have a decent single-screen setup. Relaxing and watching the markets.This being about crypto, the markets can get hectic at any time. Should this happen, I can quickly move over to my desk where I have a multi-screen setup. I can click on any currency’s window and quickly see the full details in a fullscreen view on the opposite screen. Below is a recent photo of me taken during the last YCY bloodbath. It caught me completely off-guard and left me with my hands on my face. Panicky, witnessing the YCY bloodbath.You can play with the demo embedded below, or see its source code on glitch. Security and permissions # The Chrome team has designed and implemented the Multi-Screen Window Placement API using the core principles defined in Controlling Access to Powerful Web Platform Features, including user control, transparency, and ergonomics. The Multi-Screen Window Placement API exposes new information about the screens connected to a device, increasing the fingerprinting surface of users, especially those with multiple screens consistently connected to their devices. As one mitigation of this privacy concern, the exposed screen properties are limited to the minimum needed for common placement use cases. User permission is required for sites to get multi-screen information and place windows on other screens. User control # The user is in full control of the exposure of their setup. They can accept or decline the permission prompt, and revoke a previously granted permission via the site information feature in the browser. Transparency # The fact whether the permission to use the Multi-Screen Window Placement API has been granted is exposed in the browser’s site information and is also queryable via the Permissions API. Permission persistence # The browser persists permission grants. The permission can be revoked via the browser’s site information. Feedback # The Chrome team wants to hear about your experiences with the Multi-Screen Window Placement API. Tell us about the API design # Is there something about the API that does not work like you expected? Or are there missing methods or properties that you need to implement your idea? Have a question or comment on the security model? File a spec issue on the corresponding GitHub repo, or add your thoughts to an existing issue. Report a problem with the implementation # Did you find a bug with Chrome’s implementation? Or is the implementation different from the spec? File a bug at new.crbug.com. Be sure to include as much detail as you can, simple instructions for reproducing, and enter Blink>WindowDialog in the Components box. Glitch works great for sharing quick and easy repros. Show support for the API # Are you planning to use the Multi-Screen Window Placement API? Your public support helps the Chrome team to prioritize features and shows other browser vendors how critical it is to support them. Share how you plan to use it on the WICG Discourse thread Send a tweet to @ChromiumDev with the #WindowPlacement hashtag and let us know where and how you are using it. Ask other browser vendors to implement the API. Helpful links # Wanna go deeper # Acknowledgements # The Multi-Screen Window Placement API spec was edited by Victor Costan and Joshua Bell. The API was implemented by Mike Wasserman. This article was reviewed by Joe Medley, François Beaufort, and Kayce Basques. Thanks to Laura Torrent Puig for the photos. Last updated: Sep 14, 2020 Improve article
Safe data about related displays and dispute home windows relative to these displays. Sep 14, 2020• Updated Sep 14, 2020 The Multi-Camouflage Window Placement API is segment of the capabilities challenge and is currently in construction. This post will most likely be updated because the implementation progresses. The Multi-Camouflage Window Placement API helps you to enumerate the displays related to your machine and to dispute home windows on disclose displays. Instructed use cases # Examples of websites that will use this API comprise: Multi-window graphics editors à la Gimp can dispute diverse editing tools in precisely positioned home windows. Digital trading desks can say market traits in more than one home windows any of which is willing to be viewed in fullscreen mode. Slideshow apps can say speaker notes on the interior important display and the presentation on an exterior projector. Most up-to-the-minute internet internet site # Step Living 1. Impact explainer Total 2. Impact preliminary draft of specification Total 3. Safe suggestions & iterate on develop In progress 4. Foundation trial In progress 5. Launch Now not began Ideas to use the Multi-Camouflage Window Placement API # Enabling thru chrome://flags # To experiment with the Multi-Camouflage Window Placement API in the neighborhood, without an starting put trial token, allow the #allow-experimental-internet-platform-functions flag in chrome://flags. Enabling increase for the length of the starting put trial segment # Starting up in Chrome 86, the Multi-Camouflage Window Placement API will most likely be readily on the market as an starting put trial in Chrome. The starting put trial is expected to total in Chrome 88 (February 24, 2021). Foundation trials would possibly perchance possibly perchance support you to steal a look at recent functions and give suggestions on their usability, practicality, and effectiveness to the safe standards community. For more data, search the Foundation Trials E-book for Web Developers. To hitch this or one more starting put trial, search the recommendation of with the registration page. Register for the starting put trial # Inquire of of a token to your starting put. Add the token to your pages. There are two ways to preserve out that: Add an starting put-trial designate to the pinnacle of every page. For example, this will look one thing admire: When you happen to can configure your server, you would possibly perchance possibly perchance presumably also add the token the use of an Foundation-Trial HTTP header. The resulting response header would possibly perchance possibly perchance presumably restful look one thing admire: Foundation-Trial: TOKEN_GOES_HERE The topic # The time-tested merely about controlling home windows, Window.launch(), is sadly unaware of further displays. Whereas some parts of this API seem a piece feeble, comparable to its windowFeatures DOMString parameter, it has nonetheless served us effectively over time. To specify a window’s dispute, you would possibly perchance possibly perchance presumably creep the coordinates as left and top (or screenX and screenY respectively) and creep the desired dimension as width and height (or innerWidth and innerHeight respectively). For example, to launch a 400×300 window at 50 pixels from the left and 50 pixels from the pinnacle, right here is the code that you would possibly perchance possibly perchance presumably use: const popup = window.launch( "https://example.com/", "My Popup", "left=50,top=50,width=400,height=300" ); It is most likely you’ll perchance perchance be in a situation to receive data about essentially the most up-to-the-minute display by taking a look at the window.display property, which returns a Camouflage object. Here is the output on my MacBook Air 13″: window.display; Be pleased most other folks working in tech, I even own needed to adapt myself to the recent work truth and diagram up my interior most home dispute of business. Mine seems admire on the picture beneath (in case you own an interest, you would possibly perchance possibly perchance presumably read the chubby vital functions about my setup). The iPad subsequent to my MacBook Air is hooked up to the laptop laptop thru Sidecar, so on every occasion I ought to, I’m in a position to rapidly turn the iPad into a 2d display. A multi-display setup.If I desire to steal good thing about the bigger display, I’m in a position to build the popup from the code sample above on to the 2d display. I carry out it admire this: popup.moveTo(2500, 50); Here is a tough wager, since there would possibly perchance be now not always a mode to clutch the scale of the 2d display. The info from window.display only covers the constructed-in display, however now not the iPad display. The reported width of the constructed-in display became as soon as 1680 pixels, so transferring to 2500 pixels would possibly perchance possibly perchance presumably work to shift the window over to the iPad, since I happen to clutch that it is positioned on the honest of my MacBook Air. How can I carry out this in the in model case? Turns out, there would possibly perchance be a greater procedure than guessing. That procedure is the Multi-Camouflage Window Placement API. Feature detection # To ascertain if the Multi-Camouflage Window Placement API is supported, use: if ("getScreens" in window) { } The window-placement permission # Earlier to I’m in a position to use the Multi-Camouflage Window Placement API, I ought to build a question to the person for permission to preserve out so. The recent window-placement permission would possibly perchance possibly perchance presumably additionally be queried with the Permissions API admire so: let granted = untrue; strive { const { dispute } = prove for navigator.permissions.request({ name: "window-placement" }); granted = dispute === "granted"; } dangle { } The browser can rob to say the permission instructed dynamically upon the important strive to use any of the programs of the recent API. Learn on to be taught more. The isMultiScreen() methodology # To utilize the the Multi-Camouflage Window Placement API, I will first name the Window.isMultiScreen() methodology. It returns a promise that resolves with both stunning or untrue, looking out on whether or now not lots of than one displays are currently related to the machine. For my setup, it returns stunning. prove for window.isMultiScreen(); The getScreens() methodology # Now that I know that essentially the most up-to-the-minute setup is multi-display, I’m in a position to fabricate more data about the 2d display the use of Window.getScreens(). It returns a promise that resolves with an array of Camouflage objects. On my MacBook Air 13 with a related iPad, this returns an array of two Camouflage objects: prove for window.getScreens(); Allege how the payment of left for the iPad starts at 1680, which is precisely the width of the constructed-in display. This permits me to settle exactly how the displays are arranged logically (subsequent to 1 one more, on top of 1 one more, and so forth.). There shall be data now for every display to say whether or now not it is an interior one and whether or now not it is a important one. Allege that the constructed-in display is now not necessarily the important display. Each and each also own an identification, which, if persisted at some stage in browser sessions, permits for window preparations to be restored. The screenschange match # The sole thing lacking now is a technique to detect when my display setup changes. A brand recent match, screenschange, does exactly that: it fires on every occasion the display constellation is modified. (Peer that “displays” is plural in the match name.) It also fires when the resolution of 1 of the related displays changes or when a recent or an existing display is (physically or nearly about in the case of Sidecar) plugged in or unplugged. Allege that you need to seem up the recent display vital functions asynchronously, the screenschange match itself does now not present this info. This would possibly perchance well perchance perchance presumably commerce in the future. For now you can look up the display vital functions by calling window.getScreens() as confirmed beneath. window.addEventListener('screenschange', async (match) => { console.log('I'm there, however largely unnecessary', match); const vital functions = prove for window.getScreens(); }); New fullscreen suggestions # Till now, you would possibly perchance possibly perchance presumably presumably request that parts be displayed in fullscreen mode thru the aptly named requestFullScreen() methodology. The methodology takes an suggestions parameter where you would possibly perchance possibly perchance presumably creep FullscreenOptions. To this level, its only property has been navigationUI. The Multi-Camouflage Window Placement API adds a brand recent display property that lets you identify which display to launch the fullscreen ogle on. For example, in case you would possibly perchance possibly perchance presumably admire to fabricate the important display fullscreen: strive { const primaryScreen = (prove for getScreens()).filter((display) => display.important)[0]; prove for file.body.requestFullscreen({ display: primaryScreen }); } dangle (err) { console.error(err.name, err.message); } Polyfill # It is now not that you would possibly perchance possibly perchance presumably factor in to polyfill the Multi-Camouflage Window Placement API, however you can shim its form so that you would possibly perchance possibly perchance presumably code exclusively against the recent API: if (!("getScreens" in window)) { window.getScreens = async () => [window.screen]; window.isMultiScreen = async () => untrue; } The different parts of the API—the onscreenschange match and the display property of the FullscreenOptions—would merely never fire or silently be now not celebrated respectively by non-supporting browsers. Demo # When you happen to are anything else admire me, you maintain a shut survey on the enchancment of the an very objective appropriate different of cryptocurrencies. (Basically I very worthy carry out now not, however, for the sake of this text, honest rob I carry out.) To maintain song of the cryptocurrencies that I own, I even own developed a internet app that lets in me to search the markets in all existence cases, comparable to from the comfort of my bed, where I even own single-display setup. Stress-free and looking out at the markets.This being about crypto, the markets can receive stressful at any time. Might well also restful this happen, I’m in a position to rapidly circulate over to my desk where I even own a multi-display setup. I’m in a position to click on any currency’s window and rapidly search the chubby vital functions in a fullscreen ogle on the opposite display. Under is a recent picture of me taken for the length of the final YCY bloodbath. It caught me entirely off-guard and left me with my hands on my face. Panicky, witnessing the YCY bloodbath.It is most likely you’ll perchance perchance be in a situation to play with the demo embedded beneath, or search its source code on glitch. Security and permissions # The Chrome team has designed and implemented the Multi-Camouflage Window Placement API the use of the core guidelines defined in Controlling Safe admission to to Vital Web Platform Facets, including person adjust, transparency, and ergonomics. The Multi-Camouflage Window Placement API exposes recent data about the displays related to a instrument, rising the fingerprinting ground of customers, critically these with more than one displays repeatedly related to their devices. As one mitigation of this privacy subject, the uncovered display properties are restricted to the minimum important for in model placement use cases. User permission is required for sites to receive multi-display data and dispute home windows on other displays. User adjust # The person is in chubby adjust of the exposure of their setup. They would possibly be able to accept or decline the permission instructed, and revoke a beforehand granted permission thru the positioning data feature in the browser. Transparency # The fact whether or now not the permission to use the Multi-Camouflage Window Placement API has been granted is uncovered in the browser’s space data and shall be queryable thru the Permissions API. Permission persistence # The browser persists permission grants. The permission would possibly perchance possibly perchance presumably additionally be revoked thru the browser’s space data. Feedback # The Chrome team needs to hear about your experiences with the Multi-Camouflage Window Placement API. Allege us about the API develop # Is there one thing about the API that does now not work comparable to you expected? Or are there lacking programs or properties that you need to place into effect your idea? Possess a quiz or touch upon the safety mannequin? File a spec subject on the corresponding GitHub repo, or add your tips to an existing subject. Document a subject with the implementation # Did you receive a worm with Chrome’s implementation? Or is the implementation diverse from the spec? File a worm at recent.crbug.com. Be sure to incorporate as worthy detail as you can, easy instructions for reproducing, and enter Blink>WindowDialog in the Substances box. Glitch works mammoth for sharing like a flash and straight forward repros. Allege increase for the API # Are you planning to use the Multi-Camouflage Window Placement API? Your public increase helps the Chrome team to prioritize functions and presentations other browser vendors how serious it is to spice up them. Fragment the model you intend to apply it to the WICG Discourse thread Send a tweet to @ChromiumDev with the #WindowPlacement hashtag and grunt us where and the model you are the use of it. Inquire of of alternative browser vendors to place into effect the API. Purposeful links # Spec draft Public explainer Multi-Camouflage Window Placement API demo | Multi-Camouflage Window Placement API demo source Chromium monitoring worm ChromeStatus.com entry Blink Element: Blink>WindowDialog Wanna creep deeper # TAG Evaluate Intent to Experiment Acknowledgements # The Multi-Camouflage Window Placement API spec became as soon as edited by Victor Costan and Joshua Bell. The API became as soon as implemented by Mike Wasserman. This text became as soon as reviewed by Joe Medley, François Beaufort, and Kayce Basques. Due to Laura Torrent Puig for the images. Final updated: Sep 14, 2020 Give a remove to article
Tweet Science Technology Get information about connected displays and position windows relative to those displays. Sep 14, 2020 • Updated Sep 14, 2020 The Multi-Screen Window Placement API is part of the capabilities project and is currently in development. This post will be updated as the implementation progresses. The Multi-Screen Window Placement API allows you to enumerate the displays connected to your machine and to place windows on specific screens. Suggested use cases # Examples of sites that may use this API include: Multi-window graphics editors à la Gimp can place various editing tools in accurately positioned windows. Virtual trading desks can show market trends in multiple windows any of which can be viewed in fullscreen mode. Slideshow apps can show speaker notes on the internal primary screen and the presentation on an external projector. Current status # Step Status 1. Create explainer Complete 2. Create initial draft of specification Complete 3. Gather feedback & iterate on design In progress 4. Origin trial In progress 5. Launch Not started How to use the Multi-Screen Window Placement API # Enabling via chrome://flags # To experiment with the Multi-Screen Window Placement API locally, without an origin trial token, enable the #enable-experimental-web-platform-features flag in chrome://flags. Enabling support during the origin trial phase # Starting in Chrome 86, the Multi-Screen Window Placement API will be available as an origin trial in Chrome. The origin trial is expected to end in Chrome 88 (February 24, 2021). Origin trials allow you to try new features and give feedback on their usability, practicality, and effectiveness to the web standards community. For more information, see the Origin Trials Guide for Web Developers. To sign up for this or another origin trial, visit the registration page. Register for the origin trial # Request a token for your origin. Add the token to your pages. There are two ways to do that: Add an origin-trial tag to the head of each page. For example, this may look something like: If you can configure your server, you can also add the token using an Origin-Trial HTTP header. The resulting response header should look something like: Origin-Trial: TOKEN_GOES_HERE The problem # The time-tested approach to controlling windows, Window.open(), is unfortunately unaware of additional screens. While some aspects of this API seem a little archaic, such as its windowFeatures DOMString parameter, it has nevertheless served us well over the years. To specify a window’s position, you can pass the coordinates as left and top (or screenX and screenY respectively) and pass the desired size as width and height (or innerWidth and innerHeight respectively). For example, to open a 400×300 window at 50 pixels from the left and 50 pixels from the top, this is the code that you could use: const popup = window.open( "https://example.com/", "My Popup", "left=50,top=50,width=400,height=300" ); You can get information about the current screen by looking at the window.screen property, which returns a Screen object. This is the output on my MacBook Air 13″: window.screen; Like most people working in tech, I have had to adapt myself to the new work reality and set up my personal home office. Mine looks like on the photo below (if you are interested, you can read the full details about my setup). The iPad next to my MacBook Air is connected to the laptop via Sidecar, so whenever I need to, I can quickly turn the iPad into a second screen. A multi-screen setup.If I want to take advantage of the bigger screen, I can put the popup from the code sample above on to the second screen. I do it like this: popup.moveTo(2500, 50); This is a rough guess, since there is no way to know the dimensions of the second screen. The info from window.screen only covers the built-in screen, but not the iPad screen. The reported width of the built-in screen was 1680 pixels, so moving to 2500 pixels might work to shift the window over to the iPad, since I happen to know that it is located on the right of my MacBook Air. How can I do this in the general case? Turns out, there is a better way than guessing. That way is the Multi-Screen Window Placement API. Feature detection # To check if the Multi-Screen Window Placement API is supported, use: if ("getScreens" in window) { } The window-placement permission # Before I can use the Multi-Screen Window Placement API, I must ask the user for permission to do so. The new window-placement permission can be queried with the Permissions API like so: let granted = false; try { const { state } = await navigator.permissions.query({ name: "window-placement" }); granted = state === "granted"; } catch { } The browser can choose to show the permission prompt dynamically upon the first attempt to use any of the methods of the new API. Read on to learn more. The isMultiScreen() method # To use the the Multi-Screen Window Placement API, I will first call the Window.isMultiScreen() method. It returns a promise that resolves with either true or false, depending on whether one or multiple screens are currently connected to the machine. For my setup, it returns true. await window.isMultiScreen(); The getScreens() method # Now that I know that the current setup is multi-screen, I can obtain more information about the second screen using Window.getScreens(). It returns a promise that resolves with an array of Screen objects. On my MacBook Air 13 with a connected iPad, this returns an array of two Screen objects: await window.getScreens(); Note how the value of left for the iPad starts at 1680, which is exactly the width of the built-in display. This allows me to determine exactly how the screens are arranged logically (next to each other, on top of each other, etc.). There is also data now for each screen to show whether it is an internal one and whether it is a primary one. Note that the built-in screen is not necessarily the primary screen. Both also have an id, which, if persisted across browser sessions, allows for window arrangements to be restored. The screenschange event # The only thing missing now is a way to detect when my screen setup changes. A new event, screenschange, does exactly that: it fires whenever the screen constellation is modified. (Notice that “screens” is plural in the event name.) It also fires when the resolution of one of the connected screens changes or when a new or an existing screen is (physically or virtually in the case of Sidecar) plugged in or unplugged. Note that you need to look up the new screen details asynchronously, the screenschange event itself does not provide this data. This may change in the future. For now you can look up the screen details by calling window.getScreens() as shown below. window.addEventListener('screenschange', async (event) => { console.log('I am there, but mostly useless', event); const details = await window.getScreens(); }); New fullscreen options # Until now, you could request that elements be displayed in fullscreen mode via the aptly named requestFullScreen() method. The method takes an options parameter where you can pass FullscreenOptions. So far, its only property has been navigationUI. The Multi-Screen Window Placement API adds a new screen property that allows you to determine which screen to start the fullscreen view on. For example, if you want to make the primary screen fullscreen: try { const primaryScreen = (await getScreens()).filter((screen) => screen.primary)[0]; await document.body.requestFullscreen({ screen: primaryScreen }); } catch (err) { console.error(err.name, err.message); } Polyfill # It is not possible to polyfill the Multi-Screen Window Placement API, but you can shim its shape so you can code exclusively against the new API: if (!("getScreens" in window)) { window.getScreens = async () => [window.screen]; window.isMultiScreen = async () => false; } The other aspects of the API—the onscreenschange event and the screen property of the FullscreenOptions—would simply never fire or silently be ignored respectively by non-supporting browsers. Demo # If you are anything like me, you keep a close eye on the development of the various cryptocurrencies. (In reality I very much do not, but, for the sake of this article, just assume I do.) To keep track of the cryptocurrencies that I own, I have developed a web app that allows me to watch the markets in all life situations, such as from the comfort of my bed, where I have a decent single-screen setup. Relaxing and watching the markets.This being about crypto, the markets can get hectic at any time. Should this happen, I can quickly move over to my desk where I have a multi-screen setup. I can click on any currency’s window and quickly see the full details in a fullscreen view on the opposite screen. Below is a recent photo of me taken during the last YCY bloodbath. It caught me completely off-guard and left me with my hands on my face. Panicky, witnessing the YCY bloodbath.You can play with the demo embedded below, or see its source code on glitch. Security and permissions # The Chrome team has designed and implemented the Multi-Screen Window Placement API using the core principles defined in Controlling Access to Powerful Web Platform Features, including user control, transparency, and ergonomics. The Multi-Screen Window Placement API exposes new information about the screens connected to a device, increasing the fingerprinting surface of users, especially those with multiple screens consistently connected to their devices. As one mitigation of this privacy concern, the exposed screen properties are limited to the minimum needed for common placement use cases. User permission is required for sites to get multi-screen information and place windows on other screens. User control # The user is in full control of the exposure of their setup. They can accept or decline the permission prompt, and revoke a previously granted permission via the site information feature in the browser. Transparency # The fact whether the permission to use the Multi-Screen Window Placement API has been granted is exposed in the browser’s site information and is also queryable via the Permissions API. Permission persistence # The browser persists permission grants. The permission can be revoked via the browser’s site information. Feedback # The Chrome team wants to hear about your experiences with the Multi-Screen Window Placement API. Tell us about the API design # Is there something about the API that does not work like you expected? Or are there missing methods or properties that you need to implement your idea? Have a question or comment on the security model? File a spec issue on the corresponding GitHub repo, or add your thoughts to an existing issue. Report a problem with the implementation # Did you find a bug with Chrome’s implementation? Or is the implementation different from the spec? File a bug at new.crbug.com. Be sure to include as much detail as you can, simple instructions for reproducing, and enter Glitch works great for sharing quick and easy repros. Show support for the API # Are you planning to use the Multi-Screen Window Placement API? Your public support helps the Chrome team to prioritize features and shows other browser vendors how critical it is to support them. Share how you plan to use it on the WICG Discourse thread Send a tweet to @ChromiumDev with the #WindowPlacement hashtag and let us know where and how you are using it. Ask other browser vendors to implement the API. Helpful links # Spec draft Public explainer Multi-Screen Window Placement API demo | Multi-Screen Window Placement API demo source Chromium tracking bug ChromeStatus.com entry Blink Component: Wanna go deeper # TAG Review Intent to Experiment Acknowledgements # The Multi-Screen Window Placement API spec was edited by Victor Costan and Joshua Bell. The API was implemented by Mike Wasserman. This article was reviewed by Joe Medley, François Beaufort, and Kayce Basques. Thanks to Laura Torrent Puig for the photos. Last updated: Sep 14, 2020 Improve article Read More Share this: Twitter Facebook Like this: Like Loading...
Get records about linked displays and region home windows relative to those displays. Sep 14, 2020 • Up so a ways Sep 14, 2020 The Multi-Cover Window Placement API is an component of the capabilities venture and is at this time in vogue. This put up shall be up so a ways as the implementation progresses. The Multi-Cover Window Placement API allows you to enumerate the displays linked to your machine and to region home windows on particular screens. Suggested employ instances # Examples of websites that can employ this API consist of: Multi-window graphics editors à la Gimp can region quite so much of editing tools in accurately positioned home windows. Digital procuring and selling desks can order market dispositions in multiple home windows any of which is ready to be viewed in fullscreen mode. Slideshow apps can order speaker notes on the interior predominant display cloak cloak and the presentation on an exterior projector. Most trendy suppose # Step Discipline 1. Carry out explainer Total 2. Carry out initial draft of specification Total 3. Win solutions & iterate on get In development 4. Origin trial In development 5. Begin No longer began Win out how to employ the Multi-Cover Window Placement API # Enabling by process of chrome://flags # To experiment with the Multi-Cover Window Placement API within the neighborhood, with out an origin trial token, enable the #enable-experimental-web-platform-parts flag in chrome://flags. Enabling give a uncover to all the plot in which by the origin trial phase # Starting in Chrome 86, the Multi-Cover Window Placement API shall be on hand as an origin trial in Chrome. The origin trial is anticipated to total in Chrome 88 (February 24, 2021). Origin trials enable you to appear at out recent parts and give solutions on their usability, practicality, and effectiveness to the fetch requirements community. For extra records, gaze the Origin Trials Guide for Web Builders. To sign up for this or yet every other origin trial, talk over with the registration page. Register for the origin trial # Put a matter to a token to your origin. Add the token to your pages. There are two methods to enact that:Add an origin-trial set aside to the head of each page. As an illustration, this could presumably presumably watch something luxuriate in: Whenever you happen to could presumably presumably also configure your server, which you must presumably presumably presumably also furthermore add the token using an Origin-Trial HTTP header. The resulting response header could presumably presumably serene watch something luxuriate in: Origin-Trial: TOKEN_GOES_HERE The disaster # The time-examined procedure to controlling home windows, Window.open(), is unfortunately ignorant of extra screens. Whereas some aspects of this API seem a little bit frail, corresponding to its windowFeatures DOMString parameter, it has nonetheless served us well over time. To specify a window’s region, which you must presumably presumably presumably also skedaddle the coordinates as left and top (or screenX and screenY respectively) and skedaddle the desired size as width and top (or innerWidth and innerHeight respectively). As an illustration, to open a 400×300 window at 50 pixels from the left and 50 pixels from the dwell, that is the code that you just could presumably presumably employ: const popup = window.open( "https://example.com/", "My Popup", "left=50,top=50,width=400,top=300" ); That you just must also get records in regards to the recent display cloak cloak by taking a watch on the window.display cloak cloak property, which returns a Cover object. That is the output on my MacBook Air 13″: window.display cloak cloak; Admire most folks working in tech, I in fact be pleased needed to adapt myself to the recent work truth and place up my private home place of commercial. Mine seems luxuriate in on the picture beneath (ought to which you must presumably presumably presumably also very well be involving, which you must presumably presumably presumably also read the fat significant capabilities about my setup). The iPad subsequent to my MacBook Air is linked to the pc by process of Sidecar, so every time I be pleased to, I will be able to swiftly turn the iPad exact into a second display cloak cloak. A multi-display cloak cloak setup.If I be pleased to profit from of the bigger display cloak cloak, I will be able to set aside the popup from the code sample above on to the second display cloak cloak. I enact it luxuriate in this: popup.moveTo(2500, 50); That is a tough wager, since there might maybe be no formulation to understand the dimensions of the second display cloak cloak. The records from window.display cloak cloak most though-provoking covers the constructed-in display cloak cloak, nonetheless no longer the iPad display cloak cloak. The reported width of the constructed-in display cloak cloak changed into once 1680 pixels, so shifting to 2500 pixels could presumably presumably work to shift the window over to the iPad, since I happen to understand that it is located on the real of my MacBook Air. How can I enact this within the everyday case? Turns out, there might maybe be a higher formulation than guessing. That formulation is the Multi-Cover Window Placement API. Feature detection # To envision if the Multi-Cover Window Placement API is supported, employ: if ("getScreens" in window) { } The window-placement permission # Earlier than I will be able to employ the Multi-Cover Window Placement API, I must set aside a matter to the patron for permission to enact so. The recent window-placement permission could presumably presumably also furthermore be queried with the Permissions API luxuriate in so: let granted = spurious; attempt { const { suppose } = await navigator.permissions.set aside a matter to({ name: "window-placement" }); granted = suppose === "granted"; } prefer { } The browser can prefer to order the permission suggested dynamically upon the first strive to employ any of the methods of the recent API. Be taught on to learn extra. The isMultiScreen() formulation # To employ the the Multi-Cover Window Placement API, I could first call the Window.isMultiScreen() formulation. It returns a promise that resolves with both appropriate or spurious, reckoning on whether or no longer one or multiple screens are at this time linked to the machine. For my setup, it returns appropriate. await window.isMultiScreen(); The getScreens() formulation # Now that I do know that the recent setup is multi-display cloak cloak, I will be able to originate extra records in regards to the second display cloak cloak using Window.getScreens(). It returns a promise that resolves with an array of Cover objects. On my MacBook Air 13 with a linked iPad, this returns an array of two Cover objects: await window.getScreens(); Tag how the sign of left for the iPad begins at 1680, which is precisely the width of the constructed-in demonstrate. This permits me to resolve precisely how the screens are arranged logically (subsequent to every utterly different, on top of each utterly different, etc.). There might maybe be furthermore records now for every display cloak cloak to order whether or no longer it is an interior one and whether or no longer it is a predominant one. Tag that the constructed-in display cloak cloak is no longer necessarily the principle display cloak cloak. Every furthermore be pleased an id, which, if persevered across browser intervals, permits for window arrangements to be restored. The screenschange tournament # The exact thing missing now is a fashion to detect when my display cloak cloak setup adjustments. A recent tournament, screenschange, does precisely that: it fires every time the display cloak cloak constellation is modified. (Trace that “screens” is plural within the tournament name.) It furthermore fires when the choice of considered one of the most linked screens adjustments or when a recent or an present display cloak cloak is (physically or almost about within the case of Sidecar) plugged in or unplugged. Tag that you just be pleased to appear at up the recent display cloak cloak significant capabilities asynchronously, the screenschange tournament itself doesn’t present this recordsdata. This might maybe replace within the future. For now you can watch up the display cloak cloak significant capabilities by calling window.getScreens() as shown beneath. window.addEventListener('screenschange', async (tournament) => { console.log('I am there, nonetheless largely useless', tournament); const significant capabilities = await window.getScreens(); }); Contemporary fullscreen alternate ideas # Until now, which you must presumably presumably presumably ask that parts be displayed in fullscreen mode by process of the aptly named requestFullScreen() formulation. The model takes an alternate ideas parameter the place which you must presumably presumably presumably also skedaddle FullscreenOptions. To this level, its most though-provoking property has been navigationUI. The Multi-Cover Window Placement API provides a brand recent display cloak cloak property that allows you to resolve which display cloak cloak to open the fullscreen look on. As an illustration, ought to you be pleased to be pleased to get the principle display cloak cloak fullscreen: attempt { const primaryScreen = (await getScreens()).filter((display cloak cloak) => display cloak cloak.predominant)[0]; await doc.body.requestFullscreen({ display cloak cloak: primaryScreen }); } prefer (err) { console.error(err.name, err.message); } Polyfill # It is no longer doable to polyfill the Multi-Cover Window Placement API, nonetheless you can shim its shape so which you must presumably presumably presumably also code completely in opposition to the recent API: if (!("getScreens" in window)) { window.getScreens = async () => [window.screen]; window.isMultiScreen = async () => spurious; } The assorted aspects of the API—the onscreenschange tournament and the display cloak cloak property of the FullscreenOptions—would merely never fireplace or silently be no longer noted respectively by non-supporting browsers. Demo # Whenever you happen to could presumably presumably also very well be something else luxuriate in me, you lend a hand a shut watch on the near of the many cryptocurrencies. (Truly I very significant enact no longer, nonetheless, for the sake of this text, exact prefer I enact.) To lend a hand observe of the cryptocurrencies that I hold, I in fact be pleased developed a web based app that allows me to appear at the markets in all lifestyles scenarios, corresponding to from the comfort of my mattress, the place I in fact be pleased a first rate single-display cloak cloak setup. Relaxing and staring on the markets.This being about crypto, the markets can get worrying at any time. Must this happen, I will be able to swiftly skedaddle over to my desk the place I in fact be pleased a multi-display cloak cloak setup. I will be able to click on on any currency’s window and swiftly gaze the fat significant capabilities in a fullscreen look on the reverse display cloak cloak. Beneath is a recent picture of me taken all the plot in which by the last YCY bloodbath. It caught me entirely off-guard and left me with my hands on my face. Panicky, witnessing the YCY bloodbath.That you just must also play with the demo embedded beneath, or gaze its offer code on glitch. Security and permissions # The Chrome personnel has designed and implemented the Multi-Cover Window Placement API using the core solutions defined in Controlling Get admission to to Worthy Web Platform Aspects, along side consumer control, transparency, and ergonomics. The Multi-Cover Window Placement API exposes recent records in regards to the screens linked to a machine, rising the fingerprinting surface of customers, specifically those with multiple screens consistently linked to their devices. As one mitigation of this privateness be troubled, the uncovered display cloak cloak properties are restricted to the minimal wanted for total placement employ instances. User permission is required for sites to get multi-display cloak cloak records and region home windows on utterly different screens. User control # The patron is in fat control of the publicity of their setup. They’ll win or decline the permission suggested, and revoke a previously granted permission by process of the region records feature in the browser. Transparency # The fact whether or no longer the permission to employ the Multi-Cover Window Placement API has been granted is uncovered within the browser’s region records and is furthermore queryable by process of the Permissions API. Permission persistence # The browser persists permission grants. The permission could presumably presumably also furthermore be revoked by process of the browser’s region records. Feedback # The Chrome personnel needs to hear about your experiences with the Multi-Cover Window Placement API. Disclose us in regards to the API get # Is there something in regards to the API that doesn’t work corresponding to you expected? Or are there missing methods or properties that you just be pleased to put into effect your opinion? Gain a ask or observation on the protection model? File a spec topic on the corresponding GitHub repo, or add your thoughts to an present topic.Articulate an topic with the implementation # Did you salvage a bug with Chrome’s implementation? Or is the implementation utterly different from the spec? File a bug at recent.crbug.com. Make certain that to consist of as significant component as you can, easy instructions for reproducing, and enter Blink>WindowDialog within the Parts box. Glitch works huge for sharing like a flash and simple repros.Insist give a uncover to for the API # Are you planning to employ the Multi-Cover Window Placement API? Your public give a uncover to helps the Chrome personnel to prioritize parts and presentations utterly different browser distributors how extreme it is to present a uncover to them. Piece how you intend to employ it on the WICG Discourse thread Send a tweet to @ChromiumDev with the #WindowPlacement hashtag and order us the place and the plot in which which you must presumably presumably presumably also very well be using it. Quiz utterly different browser distributors to put into effect the API. Truly handy links # Spec draft Public explainer Multi-Cover Window Placement API demo | Multi-Cover Window Placement API demo offer Chromium monitoring bug ChromeStatus.com entry Blink Ingredient: Blink>WindowDialog Wanna skedaddle deeper # TAG Review Intent to Experiment Acknowledgements # The Multi-Cover Window Placement API spec changed into once edited by Victor Costan and Joshua Bell. The API changed into once implemented by Mike Wasserman. This text changed into once reviewed by Joe Medley, François Beaufort, and Kayce Basques. Thanks to Laura Torrent Puig for the shots. Final up so a ways: Sep 14, 2020 Crimson meat up article Be taught More