{"id":1141,"date":"2020-12-22T12:46:17","date_gmt":"2020-12-22T20:46:17","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=1141"},"modified":"2020-12-22T12:49:01","modified_gmt":"2020-12-22T20:49:01","slug":"hacky-holidays-2020","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/hacky-holidays-2020\/","title":{"rendered":"Hacky Holidays!"},"content":{"rendered":"<p>\n  Hello developers,\n<\/p>\n<p>\n  For many people around the world, this time of year is for celebration of holidays and enjoying long-standing traditions. Some folks use the time for hacking &#8211; to learn new skills or catch up on the latest technologies, and since 2020 marked the release of the Microsoft Surface Duo, we\u2019d like to take this opportunity to share some developer highlights from throughout the year. We look forward to bringing even more fun, interesting, and exciting dual-screen developer content in the year ahead!\n<\/p>\n<h2>Kotlin and Java developers<\/h2>\n<p>\n  To get started developing for Surface Duo, check out our droidcon <a href=\"https:\/\/www.droidcon.com\/media-detail?video=470494530\">session video<\/a> and <a href=\"https:\/\/www.droidcon.com\/media-detail?video=481194469\">workshop video<\/a> (and review the <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/droidcon-webinar-recap\/\">questions and answers<\/a> asked afterwards):\n<\/p>\n<p>\n  <a href=\"https:\/\/www.droidcon.com\/media-detail?video=470494530\"><img decoding=\"async\" width=\"2500\" height=\"1149\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-5.png\" class=\"wp-image-1142\" alt=\"Watch the building dual-screen experiences session online\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-5.png 2500w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-5-300x138.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-5-1024x471.png 1024w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-5-768x353.png 768w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-5-1536x706.png 1536w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-5-2048x942.png 2048w\" sizes=\"(max-width: 2500px) 100vw, 2500px\" \/><\/a>\n<\/p>\n<p>\n  If you want to dive into some code:\n<\/p>\n<ul>\n<li>\n    Download and experiment with complete app samples like <a href=\"https:\/\/docs.microsoft.com\/samples\/microsoft\/surface-duo-app-samples\/two-note\/?WT.mc_id=samples-surfaceduoblog-gmerin\">TwoNote<\/a>, <a href=\"https:\/\/docs.microsoft.com\/samples\/microsoft\/surface-duo-app-samples\/source-editor\/?WT.mc_id=samples-surfaceduoblog-gmerin\">SourceEditor<\/a>, and <a href=\"https:\/\/docs.microsoft.com\/samples\/microsoft\/surface-duo-app-samples\/photo-editor\/?WT.mc_id=samples-surfaceduoblog-gmerin\">PhotoEditor<\/a>.\n  <\/li>\n<li>\n    Visit the docs to get the <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/android\/emulator\/?WT.mc_id=docs-surfaceduoblog-gmerin\">Surface Duo Android emulator<\/a> and download <a href=\"https:\/\/docs.microsoft.com\/samples\/browse\/?expanded=surface&#038;products=surface-duo&#038;WT.mc_id=docs-surfaceduoblog-gmerin\">samples<\/a> of the <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/introduction\/?WT.mc_id=docs-surfaceduoblog-gmerin\">dual-screen app patterns<\/a>.\n  <\/li>\n<\/ul>\n<h2>Xamarin and .NET developers<\/h2>\n<p>\n  You can learn how to build an Android app for Surface Duo with this Microsoft Learn module on <a href=\"https:\/\/docs.microsoft.com\/learn\/modules\/xamarin-forms-dual-screen\/?WT.mc_id=learn-surfaceduoblog-gmerin\">building a dual-screen Xamarin.Forms app<\/a>:\n<\/p>\n<p>\n  <a href=\"https:\/\/docs.microsoft.com\/learn\/modules\/xamarin-forms-dual-screen\/?WT.mc_id=learn-surfaceduoblog-gmerin\"><img decoding=\"async\" width=\"1845\" height=\"1021\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-6.png\" class=\"wp-image-1143\" alt=\"Xamarin Microsoft Learn module\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-6.png 1845w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-6-300x166.png 300w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-6-1024x567.png 1024w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-6-768x425.png 768w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-6-1536x850.png 1536w\" sizes=\"(max-width: 1845px) 100vw, 1845px\" \/><\/a>\n<\/p>\n<p>\n  When you\u2019re ready to build your own app, you can:\n<\/p>\n<ul>\n<li>\n    Download the <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/sketch-360\/?WT.mc_id=blog-surfaceduoblog-gmerin\">Sketch 360<\/a> Xamarin.Forms app, or run the <a href=\"https:\/\/github.com\/microsoft\/sketch360\">source code<\/a> locally.\n  <\/li>\n<li>\n    Visit the Xamarin dual-screen <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/xamarin\/?WT.mc_id=docs-surfaceduoblog-gmerin\">docs<\/a> and <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/xamarin\/samples\/?WT.mc_id=docs-surfaceduoblog-gmerin\">samples<\/a> to find out more.\n  <\/li>\n<li>\n    Enhance UWP\/WinUI apps for Surface Duo using the <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/get-started-uno-platform\/?WT.mc_id=blog-surfaceduoblog-gmerin\">Uno Platform<\/a>.\n  <\/li>\n<\/ul>\n<h2>React Native developers<\/h2>\n<p>\n  React Native developers can use JavaScript or TypeScript to build dual-screen apps for the Surface Duo. The <a href=\"https:\/\/www.npmjs.com\/package\/react-native-dualscreeninfo\">DualScreenInfo<\/a> and <a href=\"https:\/\/www.npmjs.com\/package\/react-native-twopaneview\">TwoPaneView<\/a> modules can be added from npm, and you can check out the <a href=\"https:\/\/github.com\/microsoft\/react-native-dualscreen\/\">examples or the open-source code for the SDK<\/a>. Visit the <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/react-native\/?WT.mc_id=docs-surfaceduoblog-gmerin\">dual-screen React Native docs<\/a> for more information.\n<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/react-native-contoso-pizza.png\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/react-native-contoso-pizza.png\" alt=\"React Native sample\" width=\"646\" height=\"505\" class=\"alignnone size-full wp-image-1162\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/react-native-contoso-pizza.png 646w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/react-native-contoso-pizza-300x235.png 300w\" sizes=\"(max-width: 646px) 100vw, 646px\" \/><\/a>\n<\/p>\n<h2>Flutter developers<\/h2>\n<p>\n  We blogged in the past about how to <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/get-started-with-flutter-on-surface-duo\/?WT.mc_id=blog-surfaceduoblog-gmerin\">get started with Flutter<\/a> and learn <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/lighting-up-a-flutter-application-on-microsoft-surface-duo\/?WT.mc_id=blog-surfaceduoblog-gmerin\">how to add the Surface Duo SDK<\/a> to your Flutter apps. As part of our annual Microsoft hackathon, the <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/adding-microsoft-surface-duo-support-to-the-flokk-application\/?WT.mc_id=blog-surfaceduoblog-gmerin\">Flokk sample<\/a> shown was enhanced for dual-screens, and is available as an example:\n<\/p>\n<p>\n  <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/adding-microsoft-surface-duo-support-to-the-flokk-application\/?WT.mc_id=blog-surfaceduoblog-gmerin\"><img decoding=\"async\" width=\"646\" height=\"505\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/image-flokkhero.png\" class=\"wp-image-1145\" alt=\"Image FlokkHero sample app enhanced for dual-screens\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/image-flokkhero.png 646w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/image-flokkhero-300x235.png 300w\" sizes=\"(max-width: 646px) 100vw, 646px\" \/><\/a>\n<\/p>\n<h2>Web developers<\/h2>\n<p>\n  Microsoft Edge on the Surface Duo has support for dual-screen CSS and JavaScript web standards. We shared <a href=\"https:\/\/docs.microsoft.com\/dual-screen\/web\/?WT.mc_id=docs-surfaceduoblog-gmerin\">docs<\/a> and <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/build-and-test-dual-screen-web-apps\/?WT.mc_id=blog-surfaceduoblog-gmerin\">samples<\/a> to help kick-start your web site dual-screen enhancement.\n<\/p>\n<p>\n  The community has created <a href=\"https:\/\/github.com\/foldable-devices\/demos\">other examples<\/a> like the Photo Gallery and News website demos, as well as the <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/dual-screen-web-game-foldship\/?WT.mc_id=blog-surfaceduoblog-gmerin\">FoldShip game<\/a> shown below. You can try these samples out on a Surface Duo device or emulator, but also in Edge or Google Chrome desktop builds using the <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/build-and-test-dual-screen-web-apps\/?WT.mc_id=blog-surfaceduoblog-gmerin\">Surface Duo simulator in devtools<\/a>.\n<\/p>\n<p>\n  <img decoding=\"async\" width=\"454\" height=\"473\" src=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-7.png\" class=\"wp-image-1146\" alt=\"Dual-screen web-based game\" srcset=\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-7.png 454w, https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/12\/word-image-7-288x300.png 288w\" sizes=\"(max-width: 454px) 100vw, 454px\" \/>\n<\/p>\n<p>\n  If you\u2019re using web technologies like HTML, CSS, and JavaScript to publish your apps with Cordova, we have a <a href=\"https:\/\/devblogs.microsoft.com\/surface-duo\/dual-screen-cordova-plugin\/?WT.mc_id=blog-surfaceduoblog-gmerin\">plugin<\/a> for that too!\n<\/p>\n<h2>Feedback<\/h2>\n<p>\n  We\u2019d love to hear how your hacking is going over the holidays. Please reach to out to our team using our\u00a0<a href=\"http:\/\/aka.ms\/SurfaceDuoSDK-Feedback\" target=\"_blank\" rel=\"noopener noreferrer\">feedback forum<\/a>\u00a0or message us on Twitter <a href=\"https:\/\/twitter.com\/surfaceduodev\">@surfaceduodev<\/a>.\n<\/p>\n<p>\n  Happy Holidays!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello developers, For many people around the world, this time of year is for celebration of holidays and enjoying long-standing traditions. Some folks use the time for hacking &#8211; to learn new skills or catch up on the latest technologies, and since 2020 marked the release of the Microsoft Surface Duo, we\u2019d like to take [&hellip;]<\/p>\n","protected":false},"author":17398,"featured_media":1142,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,46],"class_list":["post-1141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-dual-screen-development","tag-surface-duo"],"acf":[],"blog_post_summary":"<p>Hello developers, For many people around the world, this time of year is for celebration of holidays and enjoying long-standing traditions. Some folks use the time for hacking &#8211; to learn new skills or catch up on the latest technologies, and since 2020 marked the release of the Microsoft Surface Duo, we\u2019d like to take [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/17398"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1141"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1141\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1142"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}