Samsung Newsroom

Samsung DeX offers a PC-like experience for your phone app. If an app is compatible with DeX, the user can run it on a PC and enjoy its full features on a big screen. Generally, no additional coding is required to make your app DeX-compatible if the best practices of Android programming are followed during development. However, you must make some features compatible with DeX mode so that the user can fully enjoy the desktop experience. If your app is a gallery app, a game, or any kind of app where multi-touch is required, this feature needs to be made compatible with DeX mode as well. You can replace the multi-touch action with a mouse wheel up/down action for DeX mode. Today, let’s get into the details of how the mouse wheel up/down action can be used to implement the pinch zoom in/out action in a DeX-compatible app. Get Started First, let’s go through an example where an image can be zoomed in/out by using multi-touch. For an Android device, you can achieve this feature by detecting the pinch gesture. For DeX mode, you instead need to detect the mouse wheel up/down event to implement this feature. To start with, develop an app in which you can zoom in/out on an image. Then, make this feature compatible with DeX by receiving the mouse wheel up/down event. Detect the Pinch Gesture on a Touch Screen Create a new project in Android Studio, and then add a layout in an XML file. This layout should contain an image on which you can use the pinch gesture for zooming in/out. The ScaleGestureDetector class is used to determine the scaling transformation gestures using the supplied MotionEvents. First, a ScaleGestureDetector type variable is declared. Next, implement a scale listener, which extends the SimpleOnScaleGestureListener to listen for a subset of scaling-related events. The onScale() method responds to a scaling event. The scale factor is determined in this method and then the layout is scaled accordingly. The maximum and minimum factor values are set for the layout. private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener { @Override public boolean onScale(ScaleGestureDetector scaleGestureDetector) { scaleFactor *= scaleGestureDetector.getScaleFactor(); scaleFactor = Math.max(minScaleFactor, Math.min(scaleFactor, maxScaleFactor)); layout_main.setScaleX(scaleFactor); layout_main.setScaleY(scaleFactor); return true; } } An instance of ScaleGestureDetector is created in the onCreate() method and the reference of the current activity and the ScaleListener instance are passed as arguments. Next, an onTouchEvent() callback method is implemented to receive the gesture event and pass this event through to the onTouchEvent() method of the ScaleGestureDetector object. private ScaleGestureDetector scaleGestureDetector; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); layout_main=findViewById(R.id.layout); scaleGestureDetector = new ScaleGestureDetector(this, new ScaleListener()); } @Override public boolean onTouchEvent(MotionEvent motionEvent) { scaleGestureDetector.onTouchEvent(motionEvent); return true; } Detect Mouse Wheel Scroll for DeX The MotionEvent object is used to report movement events such as mouse movement. The mouse wheel up/down event is received by the MotionEvent.ACTION_SCROLL action. This action is always delivered to the window or view under the mouse pointer. The setOnGenericMotionListener event is set on the layout where the implementation of the zoom in/out action should be done. View.OnGenericMotionListener is invoked before the generic motion event is given to the view. The onGenericMotion(View v, MotionEvent event) method is called when a generic motion event is dispatched to a view. It returns true if the listener has consumed the event, false otherwise. AXIS_VSCROLL is the vertical scroll axis of a motion event. For a mouse, the value is normalized to a range from -1.0 (wheel down) to 1.0 (wheel up). layout_main=findViewById(R.id.layout); layout_main.setOnGenericMotionListener(new View.OnGenericMotionListener() { @Override public boolean onGenericMotion(View v, MotionEvent event) { int action = event.getAction(); if (action == MotionEvent.ACTION_SCROLL) { float wheelY = event.getAxisValue(MotionEvent.AXIS_VSCROLL); if (wheelY > 0.0f) { scaleFactor= Math.min(maxScaleFactor, scaleFactor*2); Log.d("Mouse_Wheel","up"); // write the code to zoom in layout_main.setScaleX(scaleFactor); layout_main.setScaleY(scaleFactor); } else { scaleFactor= Math.max(minScaleFactor, scaleFactor/2); Log.d("Mouse_Wheel","down"); // write the code to zoom out layout_main.setScaleX(scaleFactor); layout_main.setScaleY(scaleFactor); } return true; } return true; } }); If the layout supports using the mouse wheel for scrolling, then Ctrl + Mouse wheel up/down can be used for the zoom in/out action. You can implement this by following the steps below: 1. Check the status of Ctrl key. The onKeyDown() and onKeyUp() methods are called when the Ctrl key is pressed or released, respectively. private boolean ctrlKeyPressed; @Override public boolean onKeyDown(int keyCode, KeyEvent event) { switch (keyCode) { case KeyEvent.KEYCODE_CTRL_LEFT: case KeyEvent.KEYCODE_CTRL_RIGHT: ctrlKeyPressed = true; break; } return super.onKeyDown(keyCode, event); } @Override public boolean onKeyUp(int keyCode, KeyEvent event) { switch (keyCode) { case KeyEvent.KEYCODE_CTRL_LEFT: case KeyEvent.KEYCODE_CTRL_RIGHT: ctrlKeyPressed = false; break; } return super.onKeyUp(keyCode, event); } 2. Execute the zoom in/out action if the Ctrl key is pressed and the mouse wheel is scrolled. if ((action == MotionEvent.ACTION_SCROLL)&& ctrlKeyPressed) { float wheelY = event.getAxisValue(MotionEvent.AXIS_VSCROLL); if (wheelY > 0.0f){} else {} return true; } Testing Run the sample app in an Android phone to zoom the image in and out with the pinch in/out gesture. To check the mouse wheel zoom in/out feature, run the app in DeX mode. The source code of the sample app is attached at the end of this article. Feel free to download it and experiment on your own. Conclusion This is a basic introduction to mouse wheel interaction in Samsung DeX. There are many things you can do by enabling the mouse and mouse-wheel actions in your app. If you want to add more keyboard functionality, refer to the Android guide for Handling Keyboard Actions. Additional Resource Download the Source Code of Sample App View the full blog at its source

Start Date Oct 16, 2020 Location Online The Samsung Developers team is excited to sponsor the 2020 IndieCade Anywhere and Everywhere festival. We want to see the top indie games in Galaxy Store. Join our session on Wednesday October 21st at 3pm PT to learn how to get started, how to implement Samsung In-App Purchase, and how to submit your game through our seller portal. We will also demonstrate the newly updated Galaxy Store client and discuss how to get your game discovered. We invite you to set up time to meet 1:1 with us, show us your game, and find out if you qualify for our fast app review process. Drop by our virtual sponsor booth. Tickets range from $0 to $155 USD and can be purchased on Eventbrite. View the full blog at its source

Whether you are making a cryptocurrency exchange or a game on the Ethereum Blockchain, if you want to get more users for your Web Dapp, this article is for you. More web traffic now comes from smartphones than PCs. So, if you want to get more users for your Dapp, you need to take your application to the “Galaxies” (that is, Samsung Galaxy devices)! Thankfully, the Samsung Blockchain Platform (SBP) SDK has got you covered for all of your Blockchain needs. This article explores how to connect to a hardware wallet using SBP SDK and how to leverage that connection to sign your cryptocurrency transaction. You will learn how to use Cucumber Webview provided by SBP SDK to display your Web Dapp and leverage SBP SDK features. You will also explore how to send the signed transaction to a Blockchain network and receive payment. Let’s get started! Initialize the Samsung Blockchain Platform SDK Before using SBP SDK, make sure to include the required supporting libraries. To learn more about the required libraries and how to add them to the project, you can review the SBP SDK Getting Started guide. To begin, initialize the SBP SDK for our application. Running the following code segment initializes the SBlockchain object. You need to use this object for all further communication with the SBP SDK. try { mSBlockchain = new SBlockchain(); mSBlockchain.initialize(this); } catch (SsdkUnsupportedException e) { handlePlatformSDKUnsupportedError(e); } Connect to a hardware wallet Many Samsung Galaxy devices, such as the Galaxy Note20 and S20, already have a hardware wallet available: the Samsung Blockchain Keystore. You will connect to it in this demonstration. However, you can adapt the following code to connect to other supported hardware wallets, such as the Ledger Nano X, by simply changing the hardware wallet type. private HardwareWallet connectedHardwareWallet; ListenableFutureTask<HardwareWallet> connectionTask = mSBlockchain.getHardwareWalletManager().connect(HardwareWalletType.SAMSUNG, true); connectionTask.setCallback(new ListenableFutureTask.Callback<HardwareWallet>() { @Override public void onSuccess(HardwareWallet hardwareWallet) { connectedHardwareWallet = hardwareWallet; setupAccounts(connectedHardwareWallet); } @Override public void onFailure(ExecutionException e) { Log.e(LOG_TAG, "Connecting to Hardware Wallet failed."); Log.e(LOG_TAG, e.getMessage()); } @Override public void onCancelled(InterruptedException e) { Log.e(LOG_TAG, "Connecting to Hardware Wallet cancelled."); Log.e(LOG_TAG, e.getMessage()); } }); Once successfully connected to the hardware wallet, you can retrieve the accounts associated with it. Retrieve Ethereum accounts Using the SBP’s account manager, you can retrieve the list of accounts associated with a hardware wallet. AccountManager accountManager = mSBlockchain.getAccountManager(); List<Account> accountList = accountManager.getAccounts(connectedWallet.getWalletId(), COIN_NETWORK_INFO.getCoinType(), COIN_NETWORK_INFO.getNetworkType()); In order to get a list of accounts using SBP SDK, you need to specify the wallet ID of the hardware wallet connected, the coin type (cryptocurrency) you want to use (as of writing this article, only Ethereum is supported), and the desired network type (such as MAINNET or ROPSTEN). If the account list is empty, the account manager can generate a new account based on the connected hardware wallet, the specified cryptocurrency, and the network. accountManager.generateNewAccount(connectedHardwareWallet, COIN_NETWORK_INFO).setCallback( new ListenableFutureTask.Callback<Account>() { @Override public void onSuccess(Account newAccount) { defaultAccount = newAccount; showAccountAddressOnUI(defaultAccount.getAddress()); initializeWebView(); Log.d(LOG_TAG, "Account fetched."); } @Override public void onFailure(ExecutionException e) { Log.e(LOG_TAG, "Account fetching failed."); Log.e(LOG_TAG, e.getMessage()); } @Override public void onCancelled(InterruptedException e) { Log.e(LOG_TAG, "Account fetching cancelled."); Log.e(LOG_TAG, e.getMessage()); } }); After the account is retrieved, you can proceed to loading our Web Dapp using Cucumber WebView. Initialize Cucumber WebView The next step is to prepare the Cucumber WebView and enable it to make transactions through the Dapp. dAppWebView = findViewById(R.id.dapp_web_view); dAppWebView.addCoinServiceConnector(COIN_NETWORK_INFO.getCoinType(), ethereumCoinService, defaultAccount, transactionListener); To communicate with the blockchain network, use the CoinService interface of the SBP. The coin service enables us to retrieve the information needed for the transaction, such as nonce and gas prices. After all the information for the transaction has been retrieved, the coin service can help us upload the signed transaction to the blockchain network. Browser-Based Web Dapps built using web3JS nowadays use Metamask as their web3 provider. When our Dapp is loaded on the dAppWebView, the SBP SDK works as the web3 provider and forwards the web3JS-prepared transaction to a BaseOnSendTransactionListener event handler, which handles the transaction created by our Web Dapp. After preparing the transaction, a payment intent powered by the SBP SDK can be launched, which provides an interactive UI with the transaction details and a mechanism to select the preferred transaction speed. CoinService ethereumCoinService = CoinServiceFactory.getCoinService(MainActivity.this, COIN_NETWORK_INFO); BaseOnSendTransactionListener transactionListener = new OnSendEthereumTransactionListener() { @Override public void onSendTransaction(String requestID, EthereumAccount ethereumAccount, String toAddress, BigInteger value, String data, BigInteger nonce) { Intent paymentIntent = dAppWebView.createEthereumPaymentSheetActivityIntent(MainActivity.this, requestID, connectedHardwareWallet, toAddress, value, data, nonce); MainActivity.this.startActivityForResult(paymentIntent, 0); } }; dAppWebView.addCoinServiceConnector(COIN_NETWORK_INFO.getCoinType(),ethereumCoinService, defaultAccount, transactionListener); dAppWebView.loadUrl(MARKETPLACE_URL); Our Cucumber WebView (dAppWebView) is now ready to load our Web Dapp using its URL. dAppWebView.loadUrl("https://www.example.com"); When the marketplace has loaded, the SBP prompts the user to allow the Dapp to connect to our hardware wallet. The SBP’s payment intent UI enables the user to easily purchase items from the marketplace. Using the payment intent UI, the user can choose the transaction speed and send the transaction to their hardware wallet for signing. Once signing is done, the SBP SDK sends the transaction to the blockchain network for processing. Bonus: display the transaction ID In addition to enabling users to sign in and send a transaction with your Dapp, the SBP SDK can also retrieve the transaction ID. The payment intent returns the transaction Information, which can be parsed using the onActivityResult method, if desired. @Override protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == 0 && data != null) { dAppWebView.onActivityResult(requestCode, resultCode, data); switch (resultCode) { case Activity.RESULT_OK: String transactionID = data.getStringExtra("txid"); Log.d(LOG_TAG, "TransactionId : " + transactionID); showAlertDialog("Transaction Successful with Id : " + transactionID); break; case Activity.RESULT_CANCELED: Log.d(LOG_TAG, "Transaction canceled by user."); break; default: Log.d(LOG_TAG, "Unknown Activity Result Code. Result Code: " + resultCode); } } } Conclusion With the SBP SDK, your Dapp is no longer confined to PCs. Both new and existing users can have your Dapp at their fingertips on Samsung Galaxy devices. It’s also easy to add support for new cryptocurrencies and hardware wallets to your Dapp; the SBP has you covered. Submit your application to the Samsung Galaxy Store and reach millions of new users today! Additional resources Download the Samsung Blockchain Platform SDK Example App More information on Samsung Blockchain Platform SDK View the full blog at its source

Start Date Oct 15, 2020 Location Online It's a pleasure to announce that the inaugural get together of the Bluetooth® Developer Meetup will take place on October 15th 2020. Everyone is welcome to this on-line event (no registration required). Attendees will enjoy talks from a range of experienced Bluetooth developers from Google, Samsung, Foundries.IO and Bluetooth SIG. Together, they will share their knowledge and tell their stories of working with everybody's favourite low power wireless communication technology. Watch this page, the @BluetoothSIG Twitter account and accounts of speakers such as @bluetooth_mdw for updates. The URL for joining the event will be published here in due course. More information here Schedule Date: 15th October 2020. London : 17:30 - 20:00 UK time (UTC+1) Texas : 11:30 - 14:00 CDT (UTC-5) San Francisco : 09:30 - 12:00 (UTC - 7) Agenda Each talk will be approximately 30 minutes in length and include time for Q&A via a text-based system. Lessons Learned with using Bluetooth Low Energy in Wearables Speaker: Jacky Cheung, Google The cost of integrating Bluetooth Low Energy (LE) into consumer electronics has dropped significantly over the years. With all the promising features introduced in Bluetooth 5.X, Bluetooth LE has become the de-facto connectivity solution for wearables. This talk will present lessons learned with using Bluetooth Low Energy in wearable projects. It highlights some of the key design considerations and offers some practical tips to balance between speed and power consumption, which are particularly important for wearable devices. Bluetooth Low Energy (LE) OTA: or how I learned to stop worrying about spiders, snakes, hornets while building IoT devices on the Tech Farm Speakers: Thea and Marc Aldrich, Foundries IO Building and deploying embedded devices in the real world isn’t as glamorous as the corporate demos would lead you to believe. A few years ago we set out to build a simple cow tracking and happiness device. Since then things have escalated. And what have we learned? It gets hot, it rains, there is a whole lot of walking and, to be honest, the cows don't ever seem to fully appreciate the effort. Then there are the spiders, snakes and hornets. We all know this story ends in pain. But does it? In this presentation we’ll take you through the intensely scientific process of designing, building and deploying the latest version of our low cost, wirelessly connected farm automation and cow tracking system running Foundries.io’s Linux microPlatform (LmP) and Zephyr OS. All devices are now updateable over-the-air thanks to FoundriesFactory’s OTA functionality and OTA-DFU updates over Bluetooth LE from the Nordic NRF52840 based Reel Boards. No animals - other than humans - were harmed in the course of this project. The Love story between the Web and Bluetooth Speaker: Kevin Picchi, Samsung Kevin Picchi is a Software Engineer and Developer advocate at Samsung Internet, based in London. He’s passionate about web technologies, emerging tech, and enjoy sharing his knowledge. Contact him over LinkedIn: https://linkedin.com/in/kevinpicchi The Web has been around before I was even born, since its creation the Web has grown bigger, always evolves and gets blessed with new capabilities. The capability that brings me here today is Web Bluetooth. Just imagine controlling a drone through a web page without even having to download a native app, not having to update it, a quick refresh of the page and done. Well this is possible since the integration a few years since the integration of Web Bluetooth in most browsers. In this talk we are going to take a look how the relationship between Web and Bluetooth work. How it can make a difference and how to setup a basic communication between a web page and a Bluetooth device. Advanced Bluetooth Technology - Under the APIs Speaker: Martin Woolley, Bluetooth SIG Bluetooth technology has changed enormously since its initial release about twenty years ago. Communication can now take place over distances in excess of a kilometre. It’s twice as fast as it used to be and connectionless communication through broadcasting data to an unlimited number of receivers has become extremely versatile and powerful. Oh and did you know, you can also create secure networks of tens of thousands of smart devices using Bluetooth technology? All of these advanced capabilities are there for developers to exploit. By examining subjects like data rates, range and reliability, this talk will provide a guided tour of the most interesting and advanced aspects of Bluetooth technology and how they work, under the APIs. View the full blog at its source

Start Date Oct 15, 2020 Location Online It's a pleasure to announce that the inaugural get together of the Bluetooth® Developer Meetup will take place on October 15th 2020. Everyone is welcome to this on-line event (no registration required). Attendees will enjoy talks from a range of experienced Bluetooth developers from Google, Samsung, Foundries.IO and Bluetooth SIG. Together, they will share their knowledge and tell their stories of working with everybody's favourite low power wireless communication technology. Watch this page, the @BluetoothSIG Twitter account and accounts of speakers such as @bluetooth_mdw for updates. The URL for joining the event will be published here in due course. More information here Schedule Date: 15th October 2020. London : 17:30 - 20:00 UK time (UTC+1) Texas : 11:30 - 14:00 CDT (UTC-5) San Francisco : 09:30 - 12:00 (UTC - 7) Agenda Each talk will be approximately 30 minutes in length and include time for Q&A via a text-based system. Lessons Learned with using Bluetooth Low Energy in Wearables Speaker: Jacky Cheung, Google The cost of integrating Bluetooth Low Energy (LE) into consumer electronics has dropped significantly over the years. With all the promising features introduced in Bluetooth 5.X, Bluetooth LE has become the de-facto connectivity solution for wearables. This talk will present lessons learned with using Bluetooth Low Energy in wearable projects. It highlights some of the key design considerations and offers some practical tips to balance between speed and power consumption, which are particularly important for wearable devices. Bluetooth Low Energy (LE) OTA: or how I learned to stop worrying about spiders, snakes, hornets while building IoT devices on the Tech Farm Speakers: Thea and Marc Aldrich, Foundries IO Building and deploying embedded devices in the real world isn’t as glamorous as the corporate demos would lead you to believe. A few years ago we set out to build a simple cow tracking and happiness device. Since then things have escalated. And what have we learned? It gets hot, it rains, there is a whole lot of walking and, to be honest, the cows don't ever seem to fully appreciate the effort. Then there are the spiders, snakes and hornets. We all know this story ends in pain. But does it? In this presentation we’ll take you through the intensely scientific process of designing, building and deploying the latest version of our low cost, wirelessly connected farm automation and cow tracking system running Foundries.io’s Linux microPlatform (LmP) and Zephyr OS. All devices are now updateable over-the-air thanks to FoundriesFactory’s OTA functionality and OTA-DFU updates over Bluetooth LE from the Nordic NRF52840 based Reel Boards. No animals - other than humans - were harmed in the course of this project. The Love story between the Web and Bluetooth Speaker: Kevin Picchi, Samsung Kevin Picchi is a Software Engineer and Developer advocate at Samsung Internet, based in London. He’s passionate about web technologies, emerging tech, and enjoy sharing his knowledge. Contact him over LinkedIn: https://linkedin.com/in/kevinpicchi The Web has been around before I was even born, since its creation the Web has grown bigger, always evolves and gets blessed with new capabilities. The capability that brings me here today is Web Bluetooth. Just imagine controlling a drone through a web page without even having to download a native app, not having to update it, a quick refresh of the page and done. Well this is possible since the integration a few years since the integration of Web Bluetooth in most browsers. In this talk we are going to take a look how the relationship between Web and Bluetooth work. How it can make a difference and how to setup a basic communication between a web page and a Bluetooth device. Advanced Bluetooth Technology - Under the APIs Speaker: Martin Woolley, Bluetooth SIG Bluetooth technology has changed enormously since its initial release about twenty years ago. Communication can now take place over distances in excess of a kilometre. It’s twice as fast as it used to be and connectionless communication through broadcasting data to an unlimited number of receivers has become extremely versatile and powerful. Oh and did you know, you can also create secure networks of tens of thousands of smart devices using Bluetooth technology? All of these advanced capabilities are there for developers to exploit. By examining subjects like data rates, range and reliability, this talk will provide a guided tour of the most interesting and advanced aspects of Bluetooth technology and how they work, under the APIs. View the full blog at its source

Looking to show off your design chops? You can now submit your portfolio to Samsung and apply to become a Galaxy Watch face or Galaxy Themes seller. The submission window is open October 14 - October 27. Galaxy Watch Check out our latest how-to blog and read up on the new process for watch face design reviews. Then head over to the submission page and complete your application. Galaxy Themes Watch our video for an overview of the process and what you need to prepare. Then download the Themes Submission Starter Kit and let the creative juices flow. Once you've assembled everything, complete your application here. While you're working on your portolfio, listen to Tony show Diego how to use Galaxy Themes Studio. It will livestream on Thursday, October 15 at 10am PT and will be available on YouTube for replay. Submit Now The application process is very selective, and only the best of the best are selected. Think you have what it takes? We can't wait to find out. View the full blog at its source

Samsung Electronics announced today that consumers can now enjoy BTS’ “Dynamite” music video, the song that recently topped the Billboard chart, in Samsung TV retail stores around the world. The music video for ‘Dynamite’ reached 400 million views on YouTube after its release on August 21. The video also amassed 101.1 million views within 24 hours of its launch on YouTube, breaking three Guinness World Records titles: The Most-Viewed YouTube Video in 24 Hours; The Most-Viewed YouTube Music Video in 24 Hours; and The Most-Viewed YouTube Music Video in 24 Hours by a K-Pop Group. The music video ‘Dynamite’ captured the attention of viewers with its fun energy, vibrant colors and retro vibes. Samsung’s ultra-high-resolution TVs will further accentuate the visual aesthetics of this music video. “We are very pleased to showcase the new music video by BTS in Samsung TV retail shops,” said Jongsuk Chu, Executive Vice President of Visual Display Business at Samsung Electronics. “We hope that consumers around the world will enjoy the BTS music video with stunning picture quality on Samsung TVs.” Samsung TVs have ranked number one globally for 14 consecutive years and have continually pushed the boundaries over the years with innovative products. View the full article

As the home environment has continued to develop and grow in significance for the everyday consumer, the range of content consumption offerings in the home must continue to expand as well. Thus, with the home television increasingly becoming an entertainment hub, source for keeping up with current events, fitness partner and much more, Samsung has kept expanding its industry-leading lifestyle offerings to ensure that users can access all the features they need without compromising on aesthetics. The Premiere, announced on September 2, is Samsung’s newest ultra-short throw projector.1 Underpinned by Samsung’s unique TV technology expertise, the new solution delivers 4K picture quality, space-filling sound, a refined design and a host of new smart features to make the viewing experience a scintillating pleasure. Needing to be placed only 11.3cm away from the wall or screen, The Premiere projects a screen of between 100 and 130 inches to take high-quality viewing to the next level. Below, we look into the innovative features offered by Samsung’s newest addition to its lifestyle TV line-up to find out just how it is serving to elevate the user experience. Great Picture Is Worth a Thousand Words Immersion is the name of the game when it comes to the remarkable picture quality offered by The Premiere. Equipped with cutting-edge Triple Laser2 technology, The Premiere delivers outstanding picture quality and brightness, providing the user with an effective in-home cinema viewing experience. In addition to supporting 4K picture resolution, The Premiere is the world’s first HDR10+ certified projector. As far as color, The Premiere’s RGB Triple Laser uses the foundational elements of color – red (R), green (G), and blue (B), to deliver true, vibrant tones. The projector also covers 106% of BT.2020, a standard that measures how much color can be represented and establishes the widest display color gamut (147% of the DCI-P3 color gamut). With a ground-breaking contrast range that tops out at 2,800 ANSI lumens of brightness, now users can experience vivid light and dark scenes on a screen of up to 130 inches in size, all in the comfort of their own homes. Permeate Your Room With Sound But what would exceptional picture quality be without potent, impactful sound to underpin it? Equipped with 40W3 of premium, room-filling sound, The Premiere features 4.2 channel sound with speakers and woofers built right into the projector, removing the need for users to clutter their space with additional sound equipment. What’s more, the surround sound offered by The Premiere is empowered with Acoustic Beam technology, which maximizes left and right-side sound delivery for a truly immersive audio experience. Designed To Complete Your Space The days of installing complex, unaesthetic components in your spaces are coming to an end. In The Premiere, Samsung has combined its one-of-a-kind viewing technology with its award-winning lifestyle product portfolio to deliver a solution that offers both genre-defining performance and sleek, attractive design. Boasting a minimalist white design, rounded edges and an aesthetically pleasing fabric finish, The Premiere is ready to serve as the centerpiece for your home. In addition to its appealing look, The Premiere remains compact and unobtrusive, with its ultra-short throw capabilities meaning that it can be placed right in front of the wall without the need for disruptive placement elsewhere in the room. Requiring no complex installation and proving a match for changing lifestyle and interior décor trends, The Premiere harmonizes your space and serves to add to the aesthetic value of your room. A Comprehensive Smart TV Experience The Premiere projector doesn’t ask you to compromise on services or connectivity either. Compatible with multiple voice assistants and providing access to the Samsung Smart TV UI, The Premiere provides a full smart TV experience with access to Netflix, Amazon Prime Video, YouTube, and more. What’s more, Samsung’s newest projector provides the same mobile connectivity options as the company’s smart TV range as well, offering features such as ‘Tap View’ and among others. The Premiere offers gamers a fantastic experience too, providing all of its picture and sound benefits in addition to lower input lag to ensure that gamers can get fully absorbed in high-quality gameplay. With an expansive range of smart and highly capable features, The Premiere ensures that users of all kinds never have to compromise again. Outstanding picture, sound and usability, all in an attractive package that sets off your room ­­– Samsung delivers it all in The Premiere. And now, with Samsung’s all-in-one projector offering all of the features and usability of the company’s acclaimed Smart TV platform, users are ready to bring cinema-like viewing to life without ever having to leave home. 1 The Premiere is available in LSP9T and LSP7T models and the feature may vary by models. 2 Available on LSP9T model 3 Available on LSP9T model View the full article

Push notifications have a terrible reputation but if done well can give your users a positive experience. You know that thing where you go to a web site then, before you can do anything, you have to acknowledge the push notification request. Do you hate that? Yeah, me too. Jo Franchetti even wrote an entire article about the crisis of websites bombarding people with permission requests and dialogs when they first arrive on the page. A Crisis of Permissions That’s just one of the many ways it’s easy to upset your users with push notifications, this article will try to detail some ways to do them better. A bad example of requesting for push notifications on first load Failing before you even begin Push Notifications on the Web are one of the most maligned APIs on the Web and this is one of the reasons why. It’s possible to give a bad impression before you even send a single notification. Just like you wouldn’t ask to move in with someone on the first date, do not ask to send notifications on the very first user engagement. Assume your users do not want push notifications. Prove the worth of your web app with it’s high quality information and delightful user experience. Make the users want push notification before you prompt them, the best way to do this is to have a checkbox to enable push notifications in context. This makes it clear not only what the push notification request is for but how they can turn them off when they do not want them. In this example app users can turn on notifications for particular information channels with the “notify me on updates” checkbox: If they check the checkbox then we will call pushManager.subscribe() which will prompt the user to enable notifications. The users are more likely to enable push notifications because they chose to be prompted through their own intuition. On a related note app install banners: In some browsers, app install banners, pop up in a similar way to poorly done notification requests. It is not in response to a user action and are unrelated to your app’s content and not part of your apps user interface. It is possible to integrate this into your app interface, letting you hide this banner and letting you provide your own install button. Do this in the beforeInstallPrompt event: window.addEventListener('beforeinstallprompt', handleInstallPrompt); You can use this event to integrate an App Install Button into your app. If you get this event then you can show the button which allows the content to be installed. In the below image I put a subtle bubble at the bottom of the homepage for installing it. It’s easy to find and access but won’t intrude on the user’s app experience. The user pays the cost of notification, don’t be expensive. The user doesn’t pay a cost in money but they do in attention. Each notification is a weight upon the user’s mind. A notification to a user when their attention is at their limit could be the motivation the user needs to block all notifications from the entire web browser. Each notification should bring joy to the user. How do you bring joy? Be timely If you could’ve given this information earlier or could show it later why bother interrupting the user right now. Bad notification: ‘Did you know you can send money with our app’ Good Notification: ‘Alice has sent you $20’ Be efficient Opening an app or web page is comparatively slow, it can take a few seconds which is a long time to someone who is busy cooking dinner or watching Netflix or at work. If you can put all the information in the notification without them opening the app then do that. If all the response you need is a simple Option-A/Option-B question such as yes/no then add those buttons. When the user presses the button update the notification to acknowledge the button press but don’t open the app. Eve has requested $15 [Send Now] [Decline] Be clear There are many options to change the appearance of the notification use as many as possible to make it clear where the app is from, what it’s about and what action is expected from the user. Use the badge and icon for your app icon. Use the title to give a summary of what action the user needs to take, use the body and image to give relevant information and context. The next section describes how to customise your notificaition. DO NOT WASTE THE USER’S TIME Don’t push ads, don’t use them to beg users to return, don’t push boring notifications to remind the user your web app exists. I know it’s tempting and you have quotas to meet but it will only have an adverse effect on how the user views your app and notifications as a whole. The user probably does not love your app as much as you do and will be a lot less forgiving. Fully Customising Push Notifications Here is an example notification where as much as possible has been configured: { body: "Awkward Zombie - Disagree to Agree", icon: "/icons/appicon.png", image: "https://example.com/previewimage.jpg", badge: "data:image/png;base64,iVBORw0KGgoAAA...", vibrate: [100, 50, 100], data: data, tag: data.url, actions: [ { action: "Read now", title: "Open" }, { action: "close", title: "Close" }, ], }; self.registration.showNotification(title, options); If assets take too long to load they get ignored. The most important icon is the badge icon since it’s the one which gets put into the status. It’s also very small so is ideal to be URL encoded and is kept in a constant in the Service Worker file, to ensure it is loaded reliably. For the icon we use the app icon so it’s extra clear where the notification is from. This is a locally loaded PNG to be sure it loads quickly. The image is loaded from the third party site the being loaded from the RSS feed we don’t need to have it store local it’s okay for these to be from somewhere else. It adds good context but it isn’t essential so if it does not load in time then it’s not an absolute problem. These examples of action buttons I’ve done here are probably not totally necessary since notifications can be closed by some other means and we can just listen for notification clicks. Better examples would be something like “Open” and “Remind me Later”, defaulting to “Open” if neither button is clicked. Detailing the different parts of the notification Combining notifications You can’t guarantee a user will check their device in between notifications. New notifications by default do not replace the the old ones so this can result in an overwhelming flood of notifications if they arrive in short succession. If you set the tag property then notifications which share the same tag can overwrite each other. In this example the tag is set to the RSS feed’s URL, so that notifications from the same RSS feed overwrite each other. This is better since we don’t get flooded but now if a second notification comes through we lose the first one. It’s probably a good idea to check to see if you are replacing a notification and if you are concatenate them together. const existingNotifications = await self.registration.getNotifications({ tag: data.url, }); if (existingNotifications.length) { const oldNotification = existingNotifications[0]; options.body = oldNotification.body + '\n' + options.body; } There is a limited amount of text that can be fit into a notification body. An alternative solution would be to replace the notification with one that just says ‘You have N notificaitons’ then when the user taps on it open your Web App’s notification interface. Updating Notifications This can also be a good way to update the user in notification only interfaces. Once they have click on the notification to perform an action make, the request to the server to perform that action. Once the request completes then show a new notification acknowledging it’s completion. self.addEventListener("notificationclick", async function (e) { const notification = e.notification; const action = e.action; if (action === "close") { notification.close(); } if (action === "respond") { // close the old notification notification.close(); const response = await fetch('/api/respond.json') .then(r => r.json()); // Let the user know if it succeeded or not if (response.ok) { self.registration.showNotification("Success", options); } else { self.registration.showNotification(response.error, options); } } }); By having the user interact only through push notifications the user can complete their task and have a positive interaction with your app without needing to dedicate much mental energy to it giving a positive experience. Together we can use push notifications to enrich people’s lives and make users have a positive association to push notifications. View the full blog at its source

HTML in the Web is often made of reusable components, composed by templates, making it convenient to edit the different parts that make up a website. There are many templating languages used in the web such as handlebars, Pug, Vue and JSX; these are primarily used for composing HTML. Modern JavaScript has templating syntax built in which can use for all kinds of purposes including composing HTML. In this post I will introduce the JavaScript syntax for templating and then show how it can be used in the real world for sanitising HTML and introducing some of the frameworks which use template literals for their templating. Template Literals are a really nice JavaScript feature you may not have used much yet, they look a bit like strings: const message = `Hello World`; message === "Hello World" You can include new lines: const message = `Hello World`; message === "Hello\nWorld" You can use the dollar-curly-brace ${} syntax to inject variables: const name = 'Ada'; const message = `Hello ${name}`; This works really well when combined with Arrow Function Expressions to make templating functions, which turn the arguments into a string: const messageFn = name => `Hello ${name}`; const message = messageFn("Ada"); Tagged Template Literals You can put a tag on a template to transform the template before it gets turned into a string. The tag is a function which is called with the first argument being an array of the rest of the arguments are the values of the place holders. In the example below we use the rest parameter to put all of the place holder arguments into an array. There is always one more string than the number of placeholders. You can reassemble the output by interleaving these Arrays such that for a template with N placeholders the output is: strings[0] + placeholders[0] + strings[1] + placeholders[1] + … + strings[N] + placeholders[N] + strings[N+1]; This is what is looks like in JavaScript: function myTag(strings, ...placeholders) { const N = placeholders.length; let out = ''; for (let i=0; i<N;i++) { out += strings[i] + placeholders[i]; } out += strings[N]; return out; } const message = myTag`Hello ${1} world ${2}.` This function is equivalent to the String.raw function which is the default behaviour for template literals. const message = String.raw`Hello ${1} world ${2}.` You can also use String.raw inside your custom template tag to regenerate a string. In the example below we check the input to make sure it’s a string then use String.raw to output the data as a String. function myTag(strings, ...placeholders) { for (const placeholder of placeholders) { if (typeof placeholder !== 'string') { throw Error('Invalid input'); } } return String.raw(strings, ...placeholders); } Your tagged template literal doesn’t have to return a String it can return what ever you need, here is a very simple tag which measures the length of the input: function myTag(a, ...b) { return String.raw(a, ...b).length; } HTML & Tagged Template Literals Template literals are great for HTML because you can add newlines and very cleanly have dynamic classes and other attributes. const myHTMLTemplate = (title, class) => ` <!DOCTYPE html> <html> <head><title>${title}</title></head> <body class="${class}"> ... `; If you use Visual Studio Code the Lit-HTML extension will add syntax highlighting and HTML intellisense features and emmet shortcuts for templates tagged with a tag called html . The html tag doesn’t have to be the one from the lit-html library even using String.raw will give you the really nice features of HTML inside a JavaScript or TypeScript file. HTML syntax highlighting in a JS file Sanitising HTML with a Tagged Template Literal When you are outputting HTML that may contain user generated content you have to be careful about malicious JavaScript users may try into inject into all kinds of elements, these kinds of attacks are known as cross-site scripting aka XSS. It’s best to strip out dangerous elements and attributes. You can do that in a template literal tag using a library like html-parser2. We want to have two types of input into the placeholder, raw text strings which needs sanitising and safe HTML which is either authored by us or has been put through the sanitiser. This class just stores a string and we can use it to mark strings that are safe. class SafeHTML { constructor (inStr) { this.string = inStr; this[Symbol.toPrimitive] = function (hint) { return this.string; } } } Then we have our template literal tag function, this does nothing to SafeHTML objects and sanitises raw strings returning a new SafeHTML from our template literal. const html = (stringArray,...placeholders)=>{ const sanitisedHTMLArray = placeholders.map( p => p instanceof SafeHTML ? p : stripHTML(p) ); const out = String.raw(stringArray, ...sanitisedHTMLArray); return new SafeHTML(out); } To strip the HTML first I listed all the elements I wanted to allow and the attributes which are safe, these are mostly all used for formatting or semantics. const allowedTagAttributes = { a: ["href"], b: [], i: [], img: ["src", "alt", "title"], abbr: ["title"], ul: [], li: [], h1: [], h2: [], h3: [], h4: [], h5: [], h6: [], hr: [], figure: [], figcaption: [], p: [], u: [], s: [], ruby: [], small: [], span: [], del: [], strong: [], table: [], thead: [], tbody: [], tr: [], td: [], time: [], ol: [], }; const allowedTags = *Object*.keys(allowedTagAttributes); Then we use htmlparser2 to go through the input text string and rebuild the HTML string using just the allowed elements: function stripHTML(inStr) { const textOut = []; const parser = new htmlparser2.Parser( { onopentag(tagname, attribs) { if (allowedTags.includes(tagname)) { const allowedAttribs = allowedTagAttributes[tagname]; if (tagname === "a") { attribs.href = sanitiseURL(attribs.href); } textOut.push( `<${tagname} ${ allowedAttribs .map((key) => attribs[key] ? `${key}=${attribs[key]}` : "") .join(" ")}>` ); } }, ontext(text) { textOut.push(text); }, onclosetag(tagname) { if (allowedTags.includes(tagname)) { textOut.push(`</${tagname}>`); } }, }, { decodeEntities: false } ); parser.write(inStr); parser.end(); return textOut.join(""); } When we use the html tag function we just created we can now seperate our authored HTML from users unsafe HTML. const unsafe = `<img onmouseenter="location.href='[https://example.com'](https://example.com')" src="[http://placekitten.com/200/300](http://placekitten.com/200/300)" />`; const safeHTML = html` <style> div { color: red; } </style> <div>User Content: ${unsafe}.</div> `; Using template literals with JS frameworks If you need more functionality than basic templating there are some really light and fast frameworks which use template literals. lit-html is pretty well known and designed to work with the polymer web component framework. Polymer/lit-html lighter-html is designed to be really fast and very small. It’s really well featured and a great way to build a really fast web site. WebReflection/lighterhtml View the full blog at its source

In the season one finale of POW!, we interview Charlotte Allen and Hyunah Kwon. Charlotte is the driving force behind Samsung's annual Best of Galaxy Store Awards, and Hyunah is the Director of Product for Galaxy Store. Not only do we talk about the history of the awards, past highlights of previous awards, but we chat about exciting new changes to Galaxy Store and our upcoming 2020 Best of Galaxy Store Awards show. Topics Covered History of the Best of Galaxy Store Awards Previous Award Winners Galaxy Store Enhancements Exclusive Consumer Benefits Samsung Rewards Always-on Points Earning Program Pandemic Impact Galaxy Store Mobile Gaming Features Growth and Revenue Galaxy Store Badges 2020 Best of Galaxy Store Awards Show New Award Categories Winner Selections and Promoting Awards Show Trailer More About The Best of Galaxy Store Awards Celebrating the year’s top performing apps in creativity, quality, design, and innovation, the Best of Galaxy Store Awards are the ultimate achievement for Samsung Galaxy Store sellers! Join us on December 9th, 5:00pm PST, as we reveal and celebrate this years' winners! View the full blog at its source

HTML in the Web is often made of reusable components, composed by templates, making it convenient to edit the different parts that make up a website. There are many templating languages used in the web such as handlebars, Pug, Vue and JSX; these are primarily used for composing HTML. Modern JavaScript has templating syntax built in which can use for all kinds of purposes including composing HTML. In this post I will introduce the JavaScript syntax for templating and then show how it can be used in the real world for sanitising HTML and introducing some of the frameworks which use template literals for their templating. Template Literals are a really nice JavaScript feature you may not have used much yet, they look a bit like strings: const message = `Hello World`; message === "Hello World" You can include new lines: const message = `Hello World`; message === "Hello\nWorld" You can use the dollar-curly-brace ${} syntax to inject variables: const name = 'Ada'; const message = `Hello ${name}`; This works really well when combined with Arrow Function Expressions to make templating functions, which turn the arguments into a string: const messageFn = name => `Hello ${name}`; const message = messageFn("Ada"); Tagged Template Literals You can put a tag on a template to transform the template before it gets turned into a string. The tag is a function which is called with the first argument being an array of the rest of the arguments are the values of the place holders. In the example below we use the rest parameter to put all of the place holder arguments into an array. There is always one more string than the number of placeholders. You can reassemble the output by interleaving these Arrays such that for a template with N placeholders the output is: strings[0] + placeholders[0] + strings[1] + placeholders[1] + … + strings[N] + placeholders[N] + strings[N+1]; This is what is looks like in JavaScript: function myTag(strings, ...placeholders) { const N = placeholders.length; let out = ''; for (let i=0; i<N;i++) { out += strings[i] + placeholders[i]; } out += strings[N]; return out; } const message = myTag`Hello ${1} world ${2}.` This function is equivalent to the String.raw function which is the default behaviour for template literals. const message = String.raw`Hello ${1} world ${2}.` You can also use String.raw inside your custom template tag to regenerate a string. In the example below we check the input to make sure it’s a string then use String.raw to output the data as a String. function myTag(strings, ...placeholders) { for (const placeholder of placeholders) { if (typeof placeholder !== 'string') { throw Error('Invalid input'); } } return String.raw(strings, ...placeholders); } Your tagged template literal doesn’t have to return a String it can return what ever you need, here is a very simple tag which measures the length of the input: function myTag(a, ...b) { return String.raw(a, ...b).length; } HTML & Tagged Template Literals Template literals are great for HTML because you can add newlines and very cleanly have dynamic classes and other attributes. const myHTMLTemplate = (title, class) => ` <!DOCTYPE html> <html> <head><title>${title}</title></head> <body class="${class}"> ... `; If you use Visual Studio Code the Lit-HTML extension will add syntax highlighting and HTML intellisense features and emmet shortcuts for templates tagged with a tag called html . The html tag doesn’t have to be the one from the lit-html library even using String.raw will give you the really nice features of HTML inside a JavaScript or TypeScript file. HTML syntax highlighting in a JS file Sanitising HTML with a Tagged Template Literal When you are outputting HTML that may contain user generated content you have to be careful about malicious JavaScript users may try into inject into all kinds of elements, these kinds of attacks are known as cross-site scripting aka XSS. It’s best to strip out dangerous elements and attributes. You can do that in a template literal tag using a library like html-parser2. We want to have two types of input into the placeholder, raw text strings which needs sanitising and safe HTML which is either authored by us or has been put through the sanitiser. This class just stores a string and we can use it to mark strings that are safe. class SafeHTML { constructor (inStr) { this.string = inStr; this[Symbol.toPrimitive] = function (hint) { return this.string; } } } Then we have our template literal tag function, this does nothing to SafeHTML objects and sanitises raw strings returning a new SafeHTML from our template literal. const html = (stringArray,...placeholders)=>{ const sanitisedHTMLArray = placeholders.map( p => p instanceof SafeHTML ? p : stripHTML(p) ); const out = String.raw(stringArray, ...sanitisedHTMLArray); return new SafeHTML(out); } To strip the HTML first I listed all the elements I wanted to allow and the attributes which are safe, these are mostly all used for formatting or semantics. const allowedTagAttributes = { a: ["href"], b: [], i: [], img: ["src", "alt", "title"], abbr: ["title"], ul: [], li: [], h1: [], h2: [], h3: [], h4: [], h5: [], h6: [], hr: [], figure: [], figcaption: [], p: [], u: [], s: [], ruby: [], small: [], span: [], del: [], strong: [], table: [], thead: [], tbody: [], tr: [], td: [], time: [], ol: [], }; const allowedTags = *Object*.keys(allowedTagAttributes); Then we use htmlparser2 to go through the input text string and rebuild the HTML string using just the allowed elements: function stripHTML(inStr) { const textOut = []; const parser = new htmlparser2.Parser( { onopentag(tagname, attribs) { if (allowedTags.includes(tagname)) { const allowedAttribs = allowedTagAttributes[tagname]; if (tagname === "a") { attribs.href = sanitiseURL(attribs.href); } textOut.push( `<${tagname} ${ allowedAttribs .map((key) => attribs[key] ? `${key}=${attribs[key]}` : "") .join(" ")}>` ); } }, ontext(text) { textOut.push(text); }, onclosetag(tagname) { if (allowedTags.includes(tagname)) { textOut.push(`</${tagname}>`); } }, }, { decodeEntities: false } ); parser.write(inStr); parser.end(); return textOut.join(""); } When we use the html tag function we just created we can now seperate our authored HTML from users unsafe HTML. const unsafe = `<img onmouseenter="location.href='[https://example.com'](https://example.com')" src="[http://placekitten.com/200/300](http://placekitten.com/200/300)" />`; const safeHTML = html` <style> div { color: red; } </style> <div>User Content: ${unsafe}.</div> `; Using template literals with JS frameworks If you need more functionality than basic templating there are some really light and fast frameworks which use template literals. lit-html is pretty well known and designed to work with the polymer web component framework. Polymer/lit-html lighter-html is designed to be really fast and very small. It’s really well featured and a great way to build a really fast web site. WebReflection/lighterhtml View the full blog at its source

via GIPHY People dancing on Soul Train This is my first week on the Samsung Internet team as a Developer Advocate and things still feel very surreal but 2020 has been full of (mostly bad) surprises so it’s nice to be celebrating something good and new. For the last 6 years, I’ve been working in web & software development, in various roles mainly as a Ruby & Ruby on Rails developer for various companies, but most recently as a Core Support Engineer for Heroku. Outside of work my focus has been more community based & creative; I ran a non-profit for 5 years that encouraged Black women to get into the tech industry. I ran workshops, events and a paid internship with partner company, 8th Light. I host a technical podcast, do 1–1 mentoring, give talks and I’m currently finishing up my Masters in Computer Science. However, what I really enjoy doing is tinkering, exploring and creating. My first degree is in Creative Writing and English Literature and since getting into the tech industry I’ve been distracted and haven’t done much creating in the way I’d like. This is part of what spurred my shift into developer advocacy. I enjoyed my role at Heroku because I got to help people solve their technical problems but it was also structured enough that I could close my laptop at the end of the day without feeling completely spent. That was until this year. This year, I found myself needing the freedom of exploration again and flexibility around what I create, when and who for. In hindsight, I’ve spent the majority of my years in tech doing some kind of developer advocacy work but when my manager suggested it to me, I was apprehensive. I didn’t want to be restricted in the kinds of technology I could advocate for & explore or be confined to arbitrary metrics of N blog posts a week. Then there was the heavy marketing I’d seen from other Developer Advocates, it became hard to tell what was a genuine contribution to the developer community and what was a push to use a fancy new product. But I’ve always been an inquisitive person, so I emailed, video called and tweeted with some folk I knew in the space. Most of them thought I had the skillset for the job, some of them put me in touch with others to speak to and I had the overwhelming support to make the shift, if I wanted to. I just had to choose a company who’s work culture and values aligned with my own and who valued creative expression and experimentation. The Samsung job advert had been in my personal job board for a couple of days, it was there as a “maybe”. I met 90% of the job requirements. I had done some snooping on the team and knew the kind of work they were doing and the content they were putting out, about best web development practices and interesting web APIs they had used or experimented with, was what I wanted to do but still “maybe I should look for something a little more introductory”, I thought. Then I spontaneously quit my job and all of a sudden I didn’t have time for self-doubt, my bills don’t care about all of that. Then I realised I was friends with someone who knew Dan & Ada and was able to get an intro with Dan and find out more about how the team worked. Things happened really fast after that, so two weeks later here I am. My first week being an adventurer for Samsung Internet. View the full blog at its source

Push notifications have a terrible reputation but if done well can give your users a positive experience. You know that thing where you go to a web site then, before you can do anything, you have to acknowledge the push notification request. Do you hate that? Yeah, me too. Jo Franchetti even wrote an entire article about the crisis of websites bombarding people with permission requests and dialogs when they first arrive on the page. A Crisis of Permissions That’s just one of the many ways it’s easy to upset your users with push notifications, this article will try to detail some ways to do them better. A bad example of requesting for push notifications on first load Failing before you even begin Push Notifications on the Web are one of the most maligned APIs on the Web and this is one of the reasons why. It’s possible to give a bad impression before you even send a single notification. Just like you wouldn’t ask to move in with someone on the first date, do not ask to send notifications on the very first user engagement. Assume your users do not want push notifications. Prove the worth of your web app with it’s high quality information and delightful user experience. Make the users want push notification before you prompt them, the best way to do this is to have a checkbox to enable push notifications in context. This makes it clear not only what the push notification request is for but how they can turn them off when they do not want them. In this example app users can turn on notifications for particular information channels with the “notify me on updates” checkbox: If they check the checkbox then we will call pushManager.subscribe() which will prompt the user to enable notifications. The users are more likely to enable push notifications because they chose to be prompted through their own intuition. On a related note app install banners: In some browsers, app install banners, pop up in a similar way to poorly done notification requests. It is not in response to a user action and are unrelated to your app’s content and not part of your apps user interface. It is possible to integrate this into your app interface, letting you hide this banner and letting you provide your own install button. Do this in the beforeInstallPrompt event: window.addEventListener('beforeinstallprompt', handleInstallPrompt); You can use this event to integrate an App Install Button into your app. If you get this event then you can show the button which allows the content to be installed. In the below image I put a subtle bubble at the bottom of the homepage for installing it. It’s easy to find and access but won’t intrude on the user’s app experience. The user pays the cost of notification, don’t be expensive. The user doesn’t pay a cost in money but they do in attention. Each notification is a weight upon the user’s mind. A notification to a user when their attention is at their limit could be the motivation the user needs to block all notifications from the entire web browser. Each notification should bring joy to the user. How do you bring joy? Be timely If you could’ve given this information earlier or could show it later why bother interrupting the user right now. Bad notification: ‘Did you know you can send money with our app’ Good Notification: ‘Alice has sent you $20’ Be efficient Opening an app or web page is comparatively slow, it can take a few seconds which is a long time to someone who is busy cooking dinner or watching Netflix or at work. If you can put all the information in the notification without them opening the app then do that. If all the response you need is a simple Option-A/Option-B question such as yes/no then add those buttons. When the user presses the button update the notification to acknowledge the button press but don’t open the app. Eve has requested $15 [Send Now] [Decline] Be clear There are many options to change the appearance of the notification use as many as possible to make it clear where the app is from, what it’s about and what action is expected from the user. Use the badge and icon for your app icon. Use the title to give a summary of what action the user needs to take, use the body and image to give relevant information and context. The next section describes how to customise your notificaition. DO NOT WASTE THE USER’S TIME Don’t push ads, don’t use them to beg users to return, don’t push boring notifications to remind the user your web app exists. I know it’s tempting and you have quotas to meet but it will only have an adverse effect on how the user views your app and notifications as a whole. The user probably does not love your app as much as you do and will be a lot less forgiving. Fully Customising Push Notifications Here is an example notification where as much as possible has been configured: { body: "Awkward Zombie - Disagree to Agree", icon: "/icons/appicon.png", image: "https://example.com/previewimage.jpg", badge: "data:image/png;base64,iVBORw0KGgoAAA...", vibrate: [100, 50, 100], data: data, tag: data.url, actions: [ { action: "Read now", title: "Open" }, { action: "close", title: "Close" }, ], }; self.registration.showNotification(title, options); If assets take too long to load they get ignored. The most important icon is the badge icon since it’s the one which gets put into the status. It’s also very small so is ideal to be URL encoded and is kept in a constant in the Service Worker file, to ensure it is loaded reliably. For the icon we use the app icon so it’s extra clear where the notification is from. This is a locally loaded PNG to be sure it loads quickly. The image is loaded from the third party site the being loaded from the RSS feed we don’t need to have it store local it’s okay for these to be from somewhere else. It adds good context but it isn’t essential so if it does not load in time then it’s not an absolute problem. These examples of action buttons I’ve done here are probably not totally necessary since notifications can be closed by some other means and we can just listen for notification clicks. Better examples would be something like “Open” and “Remind me Later”, defaulting to “Open” if neither button is clicked. Detailing the different parts of the notification Combining notifications You can’t guarantee a user will check their device in between notifications. New notifications by default do not replace the the old ones so this can result in an overwhelming flood of notifications if they arrive in short succession. If you set the tag property then notifications which share the same tag can overwrite each other. In this example the tag is set to the RSS feed’s URL, so that notifications from the same RSS feed overwrite each other. This is better since we don’t get flooded but now if a second notification comes through we lose the first one. It’s probably a good idea to check to see if you are replacing a notification and if you are concatenate them together. const existingNotifications = await self.registration.getNotifications({ tag: data.url, }); if (existingNotifications.length) { const oldNotification = existingNotifications[0]; options.body = oldNotification.body + '\n' + options.body; } There is a limited amount of text that can be fit into a notification body. An alternative solution would be to replace the notification with one that just says ‘You have N notificaitons’ then when the user taps on it open your Web App’s notification interface. Updating Notifications This can also be a good way to update the user in notification only interfaces. Once they have click on the notification to perform an action make, the request to the server to perform that action. Once the request completes then show a new notification acknowledging it’s completion. self.addEventListener("notificationclick", async function (e) { const notification = e.notification; const action = e.action; if (action === "close") { notification.close(); } if (action === "respond") { // close the old notification notification.close(); const response = await fetch('/api/respond.json') .then(r => r.json()); // Let the user know if it succeeded or not if (response.ok) { self.registration.showNotification("Success", options); } else { self.registration.showNotification(response.error, options); } } }); By having the user interact only through push notifications the user can complete their task and have a positive interaction with your app without needing to dedicate much mental energy to it giving a positive experience. Together we can use push notifications to enrich people’s lives and make users have a positive association to push notifications. View the full blog at its source

Supporting the Sustainable Development Goals with the wide reach of the Web Not long ago, Samsung introduced its Global Goals partnership with the UN as a way to help fight inequality, plan to eliminate hunger and clean up the planet. The initiative, developed by a team in Samsung Research America, was a great way to discover each of the 17 goals agreed by the world leaders at the United Nations General Assembly in 2015. The app (linked below), is a great way to put your device to work for the greater good, features interesting wallpapers, information, and allows you to display ads on the lock screen to earn revenue for donations. This app is available for every Android device so you can start earning donations now (see link below). At Samsung Internet, we believe that the web is a powerful place to share information and use it for good, therefore we’ve decided to bring Global Goals to the web, making it a cross-platform web app and available for everybody. Even further, we believe that users deserve a good experience regardless of the platform they are using or the connection available, say hello to Samsung Global Goals PWA! Global Goals in desktop This is our first soft launch and we hope that more users can be updated with the latest news about Global Goals regardless of the device that they are using. During this first approach, the idea is to make available the latest content of global goals: Meet the 17 goals: Learn about each goal, check which projects are related to it, and choose the one that you want to support. Learn the facts: View the facts and figures related to each goal and the different areas they’re trying to improve. Track worldwide donations: Monitor the donations of each goal worldwide so you are able to see the progress of each project. Samsung and Goals: Learn how Samsung supports each goal and how the company applies its principles related to its products and work environment. Keep up to the latest news: Whether it’s a podcast, a video, or help with a survey, users can follow up on the latest content of each goal and give direct feedback to the United Nations. Technology: As we mentioned before we decided to create a Progressive Web App that allows users to keep the same native experience, with the ability to install their app and have direct access to it within an icon. We’ve also added the capability to work offline, using caching strategies and service workers to make the most important content available and provide a more friendly interaction. We are going to explain further details about the architecture in coming posts but let’s have a quick review of the technology that we’ve used: Vanilla JS: Simple Javascript, no frameworks, to manage the front end and create a fast and light web application. One UI Web: It’s a library inspired in the One UI design pattern created by Samsung which allows us to have smooth responsive user interaction. Node JS: In order to communicate with external APIs and manage the information received in the back end, we’ve decided to keep it under Javascript and choose Node. Firebase Hosting: Firebase helped us to have an easier way to host our web app and provide a nice URL for free! Our milestone As a very first soft launch we are looking to receive feedback from the developer community, so please don’t hesitate to contact us using our twitter. For our beta launch, the next steps would be looking to add web ads and web payment within donations to keep it closer to the native app and have a real impact within each Global Goal. Thanks to Samsung SRA Team and our colleague Diego González that made such a wonderful effort during this adventure. Looking forward to hearing your thoughts! Samsung Global Goals View the full blog at its source

Game performance can vary between different Android devices, because they use different chipsets, and GPUs based on different Mali architectures. Your game may render at 60fps on a Galaxy S20+, but how will it perform on the Galaxy A51 5G? The A51 5G has good specs, but you may want to consider runtime changes based on the underlying hardware if your game is pushing the limits on flagship hardware. Similarly, you may need to optimize your game to run at lower frame rates on the Galaxy J and Galaxy M models, which are often found in emerging markets. Players quickly lose interest in a game if they experience drops in frame rate, or slow load times. They won’t play your game on long journeys if it drains battery or overheats the device. To reliably deploy a game globally, and ensure a great user experience, you need to performance test on a wide range of Android devices. The Arm Mobile Studio family of performance analysis tools provide games studios with a comprehensive game analysis workflow for Android, giving information and advice at appropriate levels of detail, for technical artists, graphics developers, performance analysts and project leaders. Monitor CPU and GPU activity Arm Streamline captures a comprehensive profile of your game running on an unrooted Android device, and visualizes the CPU and GPU performance counter activity as you run your test scenario. You can see exactly how the CPU and GPU workloads are handled by the device, which helps you locate problem areas that might explain frame rate drops or thermal problems. However, spotting performance issues using Streamline can be time-consuming, unless you know exactly what you’re looking for. Your team may have varying levels of experience or expertise, so interpreting this data can be difficult. Introducing Performance Advisor Arm Performance Advisor is a lightweight reporting tool that transforms a Streamline capture into a simple report that describes how your game performed on the device, and alerts you to problem areas that you should consider optimizing. It can be used by your whole team on a regular basis, to spot trends and diagnose problems early in the development cycle, when you’re best placed to do something about it. Performance Advisor reports the application frame rate, CPU load and GPU load, as well as content metrics about the workload running on the Mali GPU. If it detects problematic areas, Performance Advisor tells you whether it’s the CPU or GPU that is struggling to process your application, and links to optimization advice to help you rectify it. A frame rate analysis chart shows how the application performed over time. The background color of the chart indicates how the game performed. When you’re hitting your target frame rate, the chart background is green. In this example, most of the chart is blue, telling us the GPU in the device is struggling to process fragment workloads. Performance Advisor can capture screenshots of your game, at the point that FPS drops below a given threshold. This helps you to identify which content might be causing the problem. This provides valuable context when debugging and can allow some common elements to be spotted if repeated slowdowns occur. You can then investigate these frames more closely with Graphics Analyzer, to see exactly which graphics API calls were executing at that point. If you want to separately evaluate how different parts of the game performed, for example, loading screens, menu selection, and different levels or gameplay scenarios, you can annotate these regions in your game so that Performance Advisor can report data for them independently. Performance budgeting Because they have different performance expectations, it’s a good idea to set your own performance budgets for each device. For example, if you know the top frequency for the GPU in the device, and you have a target frame rate, you can calculate the absolute limit of GPU cost per frame. GPU cost per frame = GPU top frequency / Target frame rate When you generate a report with Performance Advisor, you can pass in your performance budgets, which are then shown in the charts, so you can easily see if you’ve broken one. In the example below, we can see correlation between high numbers of execution engine cycles and drops in FPS. Performance Advisor tells us that the GPU is busy with arithmetic operations, and that the shaders could be too complex. The report provides a link to an advice page on the Arm Developer website, that explains how to reduce arithmetic load in shaders. More charts include key performance metrics such as CPU cycles per frame and GPU bandwidth per frame, reported for read and write access. There are also charts showing the content workload , draw calls, primitives and pixels per frame, and the level of overdraw per pixel. Download an example Performance Advisor report Automated performance analysis It’s far easier to fix problems as they arise than is it to patch problems later on. Performance Advisor’s key application performance metrics are useful to monitor over daily runs, to see how changes to your application affect performance during development. Arm Mobile Studio Professional includes headless CI support - so you can easily deploy large-scale automated performance testing across multiple devices. Using a device farm with a CI workflow, you can generate performance data and optimization advice automatically, every night, for several Android devices. As you check in code, you can easily monitor how your content performs against your performance budgets over time, and raise alerts when you start to approach or break those budgets. The Professional Edition also enables you to build bespoke data dashboards from the data that been collected. Performance Advisor's machine-readable JSON reports can be imported into any JSON-compatible database and visualization platform, such as the ELK stack. Compare metrics between test runs to quickly determine which changes impacted performance, and which type of workload is the likely cause for a regression. Query the data and compare performance against specific targets to identify optimization next steps. Read more about how to integrate Arm Mobile Studio into a CI workflow on the Arm Developer website. Resources Arm publishes various resources on their developer website, to help you optimize performance: Optimization advice – quick reference to help you avoid common problems. Mali best practices guide – comprehensive guide describing in detail how to ensure your content runs well on Mali GPUs. Developer guides such as those for Technical Artists, covering best practises for geometry, textures, materials and shaders. Download the Mali GPU datasheet to see the different features and capabilities of Arm Mali GPUs from the Midgard-based Mali-T720, to the latest Valhall-based Mali-G78. For detailed descriptions of all the performance counters you can analyze in each Mali GPU refer to the Mali GPU counter reference. Get Arm Mobile Studio Arm Mobile Studio is free to use for interactive performance analysis. To use it headlessly in your CI workflow, you need an Arm Mobile Studio Professional license. Download Arm Mobile Studio View the full blog at its source

Did you miss out on the latest Samsung Developers newsletter? Catch up now. If you don't currently receive the newsletter, you can subscribe here. View the full blog at its source

As more and more consumers gravitate towards streaming services, TVs are evolving into the device of choice for those who desire larger, higher-quality screens, more immersive gaming experiences and at-home exercise functionalities, among other features. These days, Smart TVs are particularly in the spotlight given that users can enjoy a whole array of different content on them with just an Internet connection. Samsung Electronics unveiled its first Samsung Smart TV in 2011. In 2015, the company introduced its Tizen OS and has continued making progress in this field with a view to provide users with differentiated services. But how exactly has Samsung adapted to recent changes in the way people are consuming content? What efforts have been made to advance Samsung Smart TVs into becoming better platforms? Samsung Newsroom spoke to Seline Sangsook Han, Vice President of Service Business Team, Visual Display Business at Samsung Electronics, to learn more. Q. Recently, a growing number of consumers have been putting more value on user experience instead of TV price or design when purchasing TVs. What is driving this change in purchase trends? In the past, a user’s media experience came just from watching the broadcast programs provided by their set-top box or TV tuner. Under these conditions, the resolution of the TV’s screen and the way it matched the space it was placed in was the top priority for those purchasing TVs. However nowadays, the way we consume media content is diversifying and the content itself is becoming richer and more varied. As such, users are now prioritizing their own unique experiences and considering how their devices fit into their own individual tastes and environments. On top of this, TVs are evolving into smart devices, meaning that the scope of their experience offering is expanding. All of these factors are driving the current change in trends. Q. Are industry insiders noting an experience-centric user trend? Samsung Electronics started to provide smart TVs in 2011 and emerged as the industry leader. However, back then, users were less involved with the smart TV trend and there were few partners active in the market. These days, smart TVs are becoming increasingly important, and Samsung’s Smart TV has become a pivotal partner. Trend analysis shows us that, today, people are enjoying binge-watching shows more than they are watching shows in real-time. According to our internal research, people are spending more time watching Over-the-top (OTT) content on Samsung Smart TVs than they are watching live content. U.S. users subscribe to an average of three OTT services, demonstrating that smart TV markets are on the rise globally. Q. How is the Samsung Smart TV adapting to these changing trends? Samsung is committed to keeping up with changing trends and the Samsung Smart TV has gone through extensive research for better user experiences. One of our top priorities has been figuring out how to provide users with the best possible experience of finding and enjoying the content they want to consume. Samsung offers a content forwarding discovery service called Universal Guide to help consumers make choices easily by recommending content tailored to individual user preferences. In addition, Samsung TV Plus is available for users to enjoy a variety of channels on – news, entertainment, movies, TV shows and more. This is a free TV service, with no strings attached. On top of this, users can also appreciate leading art works on their TV via the Art Store of lifestyle TV The Frame and enjoy indoor workouts through Samsung Health, a functionality that was released this year. These services particularly benefit those who have experienced unexpected changes in their day-to-day lives this year and are thus finding themselves staying at home more. Q. What does it take to make a great TV platform? Nobody can make a great platform while working alone. When we appreciate what an ecosystem means, a great platform can emerge. From the perspective of partners, high quality technologies and user convenience should be ensured. Furthermore, for the sake of a platform’s users, enriching and useful content and user convenience are essential features, as these factors are what drive an engaging user experience. Samsung, as a platform provider, needs to create a viable marketplace with which to build a mutually beneficial business model in order to drive continued investment and partner growth and ultimately improve user satisfaction. At the end of the day, relentless efforts driving strategies tailored to one’s platform is what can bear fruit. Q. What makes the Samsung Smart TV unique in terms of its platform? The Samsung Smart TV was created as a television device. Over the past 14 years, Samsung has been ranked number one in the TV industry, and during these years, Samsung has continued to build its leadership across the markets as well as cultivated a robust user base. As a service platform, the Samsung Smart TV was not a leader at all in the beginning. Thanks to Samsung’s market leadership and product offering as a TV manufacturer, we have been able to reach users around the world, and this user base helped the company attract partners. Considering that TVs are a home necessity and play a pivotal role in consumers’ media consumption, the Samsung Smart TV has an unbeatable position and capabilities in terms of product manufacturing and supply, user experience design and ecosystem operation based on its own platform. These days, fewer people are watching TV in programs real-time, but are still tending to consume other types of media content on their TVs. Many consumers choose bigger and higher quality TVs in order to enjoy more immersive watching experiences. Today, TVs are more than just viewing screens. TVs have seen their uses expanded into the fields of workout, productivity, entertainment and home Internet of Things (IoT). Samsung’s Smart TVs are becoming an integral part of their users’ daily lives, displaying the product’s boundless potential as a platform. Q. The 2018 Samsung Smart TV was presented as a device capable of supporting various activities, while the 2019 Samsung Smart TV was defined as a provider of customized services for any and all user preferences. How would you define the 2020 Samsung Smart TV? The 2020 Samsung Smart TV prioritizes delivering a next-generation screen experience to users. This year’s Samsung Smart TV enables users to harness new services, a range of partner applications and Samsung TV Plus in order to bring the content they want right in front of them easily and quickly. What defines the 2020 Samsung Smart TV is the facilitation of services like Bixby, Alexa and Google Assistant for easy access to such areas as art, fitness and gaming features across such applications as Samsung Health and Art Store. Q. Can you share one useful tip for Samsung Smart TV users? I prefer to pick the content I want to watch and enjoy it whenever I find it convenient to. I make good use of both Korean and international OTT services, as well as Samsung TV Plus, from Friday night through to the following morning and have developed my own TV guide packed full of exactly the content I want to enjoy. While streaming, I am also able to get my laundry done, as my Smart TV will let me know when my machine’s cycle is complete so that I don’t forget to take my laundry out of the machine. I also want to recommend the Art Store of The Frame, one of Samsung’s lifestyle TVs, as this lets you curate artworks that not only match your tastes, but also your mood or even the weather – a small luxury I very much appreciate in my home. Q. With the advancement of technologies, things we have previously only imagined are increasingly becoming a reality. Would you share how you think the Samsung Smart TV will evolve in the long term? The Smart TV I dream of is one with a constraint-free experience, whatever and whenever you want to do. This means a literally seamless experience when watching, playing or working with screens, controlling your devices and connecting to the world, for each and every consumer, regardless of their situation. I believe that this is the beauty of the technologies and innovations that Samsung can do better than any other. View the full article

In this episode of POW, we interview Swalé Nunez, Head of B2B Developer Relations for Samsung. Swalé is part of the team that just launched AppStack, the cloud software marketplace for businesses. Not only do we talk about the benefits for small and medium business being able to manage their workplace apps, but the advantages for partners that are bringing their software solutions to AppStack. Topics Covered: What is AppStack SMB (Small and Medium Business) Benefits SaaS Partners AppStack Industries COVID-19 Impact AppStack Partner Advice Getting Started View the full blog at its source

Foldable devices Although new to the industry, the concept of folding devices already has plenty of iterations. Samsung and other OEMs have presented devices with folding capabilities, that allow them to expand into small tablets, compress into smaller footprints, or enable more productive multi-tasking. Consensus is now, that a “foldable” is a device that folds. While this might seem trivial, the details of how many screens, where/how they fold, and what size and shape the device should be, etc, were all up for discussion. Let’s agree for now that indeed, a foldable is a device that folds. Independent of whether it’s a vertical or horizontal fold, or if it is one big flexible screen or two adjacent ones, how many logical regions the folding translates to, or if it is the size of a phone or a laptop. different types of “foldables” a foldable is a device that folds Some time ago I wrote about how to make sure websites looked good on the original Samsung Galaxy Fold. All that information, which summarizes into “make your websites responsive”, is very valid and I’d assume already a common practice. This was a good initial approach at making sure that the Web would continue to flow into different screen sizes, but these new devices were more than just expanded screen real estate. Treating them as just more space for Web content was against the intrinsic nature of the hardware itself, and against the full capabilities that could be enabled for the developer and end user. I knew that in the future I would be sharing information regarding more organic layouts for these types of devices. Current Web on Galaxy Fold How to make sure your website looks great on the Galaxy Fold on medium.com We realized it made sense to embrace the physicality of the state of the device to provide a seamless (pun intended) experience for the user, by giving the developer access to more information regarding this aforementioned physicality. Foldable Related APIs Several lines of work started in parallel to address these challenges at Samsung, Microsoft and Intel. The CSS spanning media query and Window Segments Enum API allow developers to detect where the fold occurs, so that they can avoid positioning content on it. This is very handy especially in scenarios where you have dual screen devices with a physical separation between the screens. Microsoft have written an excellent post about these APIs. With the CSS spanning media query it is possible to know the layout of the foldable device and make sure there’s no content cut in half. I want to introduce the work that we’ve been doing to address other use cases related to foldable devices here at Samsung with collaboration of our lovely friends at Intel. Screen Fold API Screen Fold API logo We envision the need to adapt content to the physical way a device is being used. I mentioned earlier that foldables are more than just extra on-screen space for content. To embrace them we need to take into account the angle in which the screen(s) is folded. We can abstract this into a concept called the “posture” of the device. Considering posture, we can immediately see the benefits of making our content react to these changes. This is the basic concept behind the Screen Fold API. Disclaimer: All the things I’m writing about at the moment are drafts that are subject to change, evolution or may never even see the light of day, nonetheless I believe it can be exciting to get an early glimpse into the future of Web design and to hear feedback from anyone interested. The Screen Fold API is an extension to the Screen interface that exposes an angle value, a posture attribute and a change event. It allows developers to identify which posture a device is in and rearrange content accordingly. Working in conjunction with the CSS spanning media queries, one could achieve very interesting layouts. The API identifies a set of predefined postures for common use cases as seen in the image below. (Do note that names or states are not final and we are already considering adding a ‘peek’ state and changing the ‘laptop’ moniker that doesn’t bode well for phones for example.) diagram of the postures available in the Screen Fold API (laptop, flat, book, tablet, tent, no fold) Use Cases These postures respond to different use cases, as detailed in the explainer linked below, you might recognize some of this functionality already shipped in some native apps under the names of ‘flex mode’. SamsungInternet/Explainers See the latest draft of the specification here New types of mobile devices are appearing that have some sort of folding… github.com These postures are not always what a developer might need so the API also allows us to directly query the angle values. The image below shows the proposed mapping between postures and angles. Mapping between postures and angles Examples There is a way to query these attributes both from JS and CSS. The former is through the screen object, the latter through handy CSS media queries. You can refer to an example below. @media (screen-fold-posture: laptop) and (spanning: single-fold-horizontal){ body { display: flex; flex-flow: column nowrap; } .videocall-area, .videocall-controls { flex: 1 1 env(fold-bottom); } } State of the API If you’ve read up to here, it is very likely you find this interesting and are wondering what is the current state of the API? As I mentioned before, these are all early concepts. Fortunately, there is a specification draft and work under way at W3C. The Screen Fold API is expected to officially be a part of the Devices and Sensors Working Group and is already listed in the DAS WG roadmap. Devices and Sensors Working Group The Screen Fold API This document specifies an API that allows web applications to request the angular value to which a device with a… w3c.github.io Samsung Internet Beta Furthermore, at Samsung we have been experimenting internally with implementations for the Screen Fold API. We are committed to the Screen Fold API and hope to share an update and more news in the future. This is how a basic example for the Screen Fold API looks running on a Galaxy Z Fold2 device on a custom Samsung Internet build. Screen Fold API behind a flag in Samsung Internet custom build html { background-color: blue; } @media (max-screen-fold-angle: 120deg) { html { background-color: red; } } Finally, to enable you to jump into the fun and experimentation with the Screen Fold API, we have a very early version of a Polyfill and a settings widget for browsers that don’t support the specification draft or that do not fold. Screen Fold Settings widget Screen Fold Polyfill demo The Screen Fold API allows you to know the angle and posture that the screen(s) of a device is in. The polyfill allows… w3c.github.io Yes, I am aware there are compatibility issues in the settings widget at the moment in some browsers and I’m more than happy to welcome help . The Road Ahead The journey to properly supporting the Web on foldable devices is just getting started. There are various efforts from different fronts and discussions in standards groups and among the community are under way. At Samsung, we are committed to continue the conversation and advance the implementation. We are looking into ways to bring experimental support for the API in the future and we are in talks with other vendors to make sure we have more implementations. As technical co-editor of the specification, I am very interested in knowing what you think of the Screen Fold API and if you have any considerations of things we might have left out. Feel free to contact myself (@diekus) or Daniel Appelquist for any questions. In the meantime, play with the polyfill and let us know your thoughts and designs, as they will help us better shape the folding future of the Web. Acknowledgements I’d like to finish this post with a huge thank you to Jo Franchetti. She has lent her support and her CSS expertize from the beginning with every weird idea that comes into my head. Additionally, even though in it’s infancy, this work is possible due to the great advice from my co-editor, Kenneth, and to the internal support from Daniel Appelquist, Heejin Chung and the amazing engineering team in Suwon, Baul and Kangil. View the full blog at its source

Want to test your app on the Galaxy Z Fold2? It's now available in the Remote Test Lab. Verify your app is ready for Flex mode, check out Multi-Active Window, and ensure App Continuity when the device is folded and unfolded. If you're using the Android Emulator, the emulator skin is now available as well. View the full blog at its source

Over the last few years, the global console gaming market has rapidly expanded. Now, consumers are beginning to view their TVs as gaming devices, and they’re witnessing firsthand how factors like high image and audio quality and low input lag can combine to take their gaming experience to the next level. Check out our gamer’s guide below to learn more about how Samsung optimized its newest QLED TVs to offer users more immersive and responsive gaming sessions. View the full article

Start Date Sep 18, 2020 Location South Korea [Eng] Greetings from the Samsung Blockchain OPS team! We are pleased to be co-hosting the 2020 JEJU Blockchain Hackathon alongside JEJU Creative Economy Innovation Center, GroundX, and KaKao. The Hackathon challenges students, new graduates, startups (or pre-startups) to develop blockchain-based services. The event is a platform for participants to turn their ideas into reality through developing a prototype, enhancing their problem solving skills, and networking with and learning about blockchain-based platform services. The Business Camp program also enables participants to receive mentoring and support to launch their blockchain-based services. Note: The event is open to participants in Korea only. Title: 2020 JEJU Blockchain Hackathon Date: 31 August - 25 October, 2020 Theme: Developing blockchain-based services and applications, with special consideration for those implementing the Klaytn API Service (KAS) or the Samsung Blockchain SDKs (Keystore/Platform) Program Highlights: Online Hackathon (18-20, September), Business Camp (23 - 25 October, in-person) Hosts: JEJU Creative Economy Innovation Center, GroundX, Samsung, KaKao Join us! For more information: links [국문] 안녕하세요. 삼성 블록체인 운영 팀입니다. 이번에 저희가 제주창조경제혁신센터, 그라운드X, 카카오와 함께 주최하는 제 3회 제주 블록체인 해커톤 행사를 전할 수 있게 되어 기쁩니다. 블록체인 기술 기반 서비스 개발에 관심있는 누구나 참여가 가능하며, 2020 제주 블록체인 해커톤 공식사이트에서 신청할 수 있으니 많은 분들의 신청 부탁드립니다. 심사를 거쳐 선발된 팀은 2020년 9월 18일부터 20일까지 3일간 온라인으로 해커톤에 참여하게 되며, 심사위원 평가를 통해 최종 4개의 팀이 선발되어 총 400만원의 상금과 제주에서 예정된 비즈니스 캠프 참여 기회가 주어집니다. 행사명 : 2020 제주 블록체인 해커톤 행사기간 : 8월 31일부터 10월 25일까지 주제 : 블록체인 기술과 토큰 이코노미를 적용한 블록체인 어플리케이션 개발 (그라운드X Klaytn API Service(KAS) 또는 삼성 블록체인 SDKs 사용시 가산점 부여) 주요 프로그램 : 온라인 해커톤 (9월 18일~20일), 비즈니스 캠프 (10월 23일~25일, 오프라인 진행) 주관/주최 : 제주창조경제혁신센터, GroundX, 삼성전자, 카카오 더 자세한 사항 확인 및 지원 하러 가기 links View the full blog at its source

Blockchain, an emerging technology, is a distributed database for storing and managing records of transactions. It has already created a huge impact in the financial sector. The transaction is the main feature in any blockchain-based system. In Ethereum, one of the better-known blockchain systems, every transaction is executed by either an account or a smart contract. When an account tries to execute a transaction, it creates one and publishes it in the Ethereum blockchain. Every transaction needs to pass the consensus process. Some nodes in the Ethereum blockchain, known as miners, validate and authenticate the transaction. “Gas” is an incentive that is paid out for executing transactions. On the Ethereum platform, gas is paid to miners for completing the consensus process. The Samsung Blockchain Platform SDK enables Android developers to develop applications that interact with the Etherum blockchain platform. In addition to transactions, the Samsung Blockchain Platform SDK also supports operations related to smart contracts and tokens. Through a sample application, this blog describes how to use the Samsung Blockchain Platform SDK to transfer Ether, which is the base coin for the Ethereum platform. Prerequisites Before the application can make a transaction, it must first perform the following actions in order: Initialize and create the instance Connect to the hardware wallet Get the account Let’s associate each of these actions with a button in our sample application. 1. Initialize and create the instance In the Android project, integrate the Samsung Blockchain Platform SDK with the application and mention all the dependencies in build.gradle. Next, create an instance of the Sblockchain class. 2. Connect to the hardware wallet The Samsung Blockchain Platform provides an interface to connect to hardware wallets, which are special devices that securely store private keys. Samsung mobile devices have an integrated hardware wallet, the Samsung Blockchain Keystore. Besides the Samsung Blockchain Keystore, the Samsung Blockchain Platform also supports USB-connected Ledger devices and BLE-connected Nano X devices. The sample application connects to the Samsung Blockchain Keystore hardware wallet. Before you run the sample application on your device, check that the device is supported. You can also modify the sample application and test it with other supported hardware wallets. 3. Get the account An account is a gateway for interacting with the Ethereum blockchain. Each account consists of a private and public key pair, for which the shortened public key is the account address. Every initial action in the Ethereum blockchain must be initiated by an account. The Samsung Blockchain Platform SDK enables the user to create a new account or to restore their accounts from the Ethereum network. Account management features in the Samsung Blockchain Platform SDK include generating, restoring and fetching accounts. Because they are network operations, the create account and restore accounts operations must perform asynchronously. After creating a new account, the user must utilize the account to receive or send Ether before the Samsung Blockchain Platform SDK allows them to create another account. If you do not have any Ether to use with the sample application, you can use test Ether. Performing Ether Transactions The sendTransaction API of the Samsung Blockchain Platform SDK initiates a transaction between two accounts. It requires the following information in its parameters: wallet: connected hardware wallet fromAccount: sender’s Ethereum account address gasPrice: price of each gas unit, which defines how quickly someone wants to execute the transaction gasLimit: maximum number of gas units to spend on the transaction toAddress: recipient’s Ethereum account address value: amount of Ethereum to transfer, in wei (1 eth = 10^18 wei). nonce: transaction counter for the account. The CoinService class named EthereumService provides methods needed to create transactions on the Ethereum platform. For example, the getFeeInfo() and estimateGasLimit() methods can retrieve the values for use with the gasPrice and gasLimit parameters, respectively. To communicate with the Ethereum node, RPC is also needed. In the sample application, the Infura node is used to access the Ethereum blockchain. Learn about integrating the Infura API with the JSON RPC. CoinType coinType = CoinType.ETH; NetworkType networkType = (NetworkType) EthereumNetworkType.ROPSTEN; //might use your own rpc String rpc = "https://ropsten.infura.io/v3/71cf9f88c5b54962a394d80890e41d5b"; // creating coinNetworkInfo CoinNetworkInfo mCoinNetworkInfo = new CoinNetworkInfo(coinType, networkType, rpc); //Creating CoinService CoinService mCoinService = CoinServiceFactory.getCoinService (getApplicationContext(), mCoinNetworkInfo); //Creating EthereumService EthereumService ethereumService = (EthereumService) mCoinService; //Access TextView and EditTexts on UI private RadioGroup transactionSpeedGroup = findViewById(R.id.transaction_speed_radio_group); private TextView gasLimitText = findViewById(R.id.gas_limit_text_view); private EditText toAddressEditText = findViewById(R.id.to_address); private EditText sendAmountEditText = findViewById(R.id.send_amount); Retrieve the gas price Gas price retrieval is an asynchronous task. Use the getFeeInfo API to retrieve the gas price. The getFeeInfo API returns three gas prices which depend on the speed of the transaction: fast, normal, and slow. To give full control over the gas price for advanced users, you can also enable numerical price input. In the sample application, when the user selects Gas Price, an asynchronous task retrieves the three gas prices, and assigns them to radio buttons. The user can select the transaction speed they want based on the gas price. public void OnClickGasPrice(View view) { ethereumService = (EthereumService) mCoinService; ethereumService.getFeeInfo().setCallback(new ListenableFutureTask.Callback<EthereumFeeInfo>() { @Override public void onSuccess(EthereumFeeInfo ethereumFeeInfo) { convertedAmount = EthereumUtils.convertWeiToGwei(ethereumFeeInfo.getNormal()); Log.i(LOG_TAG, "Fee info is fetched successfully."); mEthereumFeeInfo = ethereumFeeInfo; runOnUiThread(() -> { gasLimitButton.setEnabled(true); Toast.makeText(getApplicationContext(), "Fee info is fetched successfully.", Toast.LENGTH_SHORT).show(); } ); } @Override public void onFailure(@NotNull ExecutionException e) { Log.e(LOG_TAG, "Fetching Fee info is failed."); Log.e(LOG_TAG, "" + e.getMessage()); } @Override public void onCancelled(@NotNull InterruptedException e) { Log.e(LOG_TAG, "Fetching Fee info is canceled."); } }); } Fetching the gas limit Fetching the gas limit is also an asynchronous task. Use the estimateGasLimit API to calculate the gas limit. The input parameters are the account addresses of the sender and the receiver, the amount of Ether (in wei units), and the data to be sent. The sample application sends only Ether, so the data field is null. When the user selects Gas Limit, the gas limit is determined and shown on the screen. public void onClickGasLimit(View view) { String toAddress = toAddressEditText.getText().toString(); String amount = sendAmountEditText.getText().toString(); if (toAddress.isEmpty() || amount.isEmpty()) { Toast.makeText(getApplicationContext(), "Fill Send Address and Amount Field", Toast.LENGTH_SHORT).show(); } else if(!ethereumService.isValidAddress(toAddress)){ Toast.makeText(getApplicationContext(), "Invalid Address.", Toast.LENGTH_SHORT).show(); } else { BigDecimal sendAmount = new BigDecimal(amount); BigInteger convertedSendAmount = EthereumUtils.convertEthToWei(sendAmount); ethereumService.estimateGasLimit((EthereumAccount) mFirstAccount, toAddress, convertedSendAmount, null).setCallback(new ListenableFutureTask.Callback<BigInteger>() { @Override public void onSuccess(BigInteger bigInteger) { mGasLimit = bigInteger; Log.i(LOG_TAG, "Gas limit is fetched successfully."); Log.i(LOG_TAG, "Gas limit is:" + bigInteger.toString()); runOnUiThread(() -> { sendButton.setEnabled(true); gasLimitText.setText(bigInteger.toString()); }); } @Override public void onFailure(@NotNull ExecutionException e) { Log.e(LOG_TAG, "Fetching Gas limit is failed."); Log.e(LOG_TAG, "" + e.getMessage()); } @Override public void onCancelled(@NotNull InterruptedException e) { Log.e(LOG_TAG, "Fetching Gas limit is canceled."); } }); } } Send the Ether All the parameter values needed to send the Ether are now known. Use the sendTransaction API to initiate the transaction. In the sample application, the value of the nonce parameter has not been set manually. By leaving the value null, the platform handles the nonce value itself. If the transaction is successful, the onSuccess() event handler returns the transaction hash. A record of every Ethereum transaction is viewable in Etherscan, a blockchain explorer. It allows anyone to explore addresses, transactions, and tokens in the Ethereum blockchain. public void onClickSend(View view) { String toAddress = toAddressEditText.getText().toString(); BigDecimal sendAmount = new BigDecimal(sendAmountEditText.getText().toString()); BigInteger convertedSendAmount = EthereumUtils.convertEthToWei(sendAmount); //Getting Gas Price int transactionSpeedID = transactionSpeedGroup.getCheckedRadioButtonId(); if (transactionSpeedID == -1) { Toast.makeText(getApplicationContext(), "Select a Transaction Speed.", Toast.LENGTH_SHORT).show(); } else { switch (transactionSpeedID) { case R.id.transaction_speed_slow: mGasPrice = mEthereumFeeInfo.getSlow(); Log.d(LOG_TAG, "GasPrice: " + mGasPrice); break; case R.id.transaction_speed_normal: mGasPrice = mEthereumFeeInfo.getNormal(); Log.d(LOG_TAG, "GasPrice: " + mGasPrice); break; case R.id.transaction_speed_fast: mGasPrice = mEthereumFeeInfo.getFast(); Log.d(LOG_TAG, "GasPrice: " + mGasPrice); break; } } if(transactionSpeedID != -1) { try { ethereumService.sendTransaction(mHardwareWallet, (EthereumAccount) mFirstAccount, mGasPrice , mGasLimit, toAddress, convertedSendAmount, null).setCallback(new ListenableFutureTask.Callback<TransactionResult>() { @Override public void onSuccess(TransactionResult transactionResult) { Log.d(LOG_TAG, "Transaction Hash: " + transactionResult.getHash()); runOnUiThread(() -> Toast.makeText(getApplicationContext(), "Transaction Hash: " + transactionResult.getHash(), Toast.LENGTH_SHORT).show() ); } @Override public void onFailure(@NotNull ExecutionException e) { Log.e(LOG_TAG, "Transaction failed."); Log.e(LOG_TAG, "" + e.getMessage()); } @Override public void onCancelled(@NotNull InterruptedException e) { Log.e(LOG_TAG, "Transaction canceled."); } }); } catch (AvailabilityException e) { Log.e(LOG_TAG, "Error in sending: " + e); } } } Conclusion This blog has demonstrated how you can send Ether to another account, an example of a feature you can implement in a wallet application using the Samsung Blockchain Platform SDK. Check the Samsung Developers site periodically for updates as Samsung Blockchain Platform SDK keeps expanding support for new platforms. Additional Resources: Samsung Blockchain Platform SDK Transaction Sample Application Samsung Blockchain Platform SDK documentation View the full blog at its source

En este video del Programa para desarrolladores de Samsung, aprenda cómo integrar el SDK de compras en la aplicación (IAP) de Samsung en sus juegos de Unity. Puede obtener más información en https://developer.samsung.com/iap El proceso general para publicar su juego, cuando incluye pagos y microtransacciones por medio del Samsung IAP SDK es el siguiente: 1- Registro en el Portal Para crear su cuenta y publicar en la Galaxy Store puede ir a http://seller.samsungapps.com Haga clic en la esquina superior para crear su cuenta. Si ya tiene una cuenta de Samsung, puede ingresar con ella. 2- Solicitar el Status de Vendedor Una vez que haya creado su cuenta en el portal de desarrollo, puede solicitar su estatus de vendedor haciendo clic en el botón indicado en la imagen. Esto es necesario para poder vender diferentes artículos desde su aplicación. 3- Registrar su Aplicación/Juego Para ver todo el detalle de cómo registrar su aplicación en el portal de ventas, puede ver el video que se encuentra en https://youtu.be/fil7DmD1v3g En general, se le va a solicitar que ingrese la información de su juego, como el nombre, descripción e imágenes promocionales. 4- Registro de los Artículos en Venta Cuando su cuenta ha sido aprobada como una cuenta de vendedores, podrá tener acceso a la sección de “In App Purchase”. Aquí podrá registrar los diferentes artículos que va a vender, como vidas ilimitadas, poderes especiales, u opciones de personalización para los personajes de su juego. En el video podrá ver un poco más de detalle de cómo registrar cada uno de los artículos. Plugin para Unity Para poder usar el kit de desarrollo de la Samsung IAP, debe seguir los siguientes pasos: 1- Descargar desde https://developer.samsung.com/iap/samsung-iap-unity-plugin.html 2- Instalar el Plugin a. En Unity haga clic en Assets -> Import Package -> Custom Package 3- Arrastrar el Script en un objeto del juego a. Este puede ser cualquier objeto de la UI, o como se ve en el video, un personaje de su juego. Una vez que haya incluido el Script, puede revisar la documentación (https://developer.samsung.com/iap/samsung-iap-unity-plugin.html) para ver en detalle cómo llamar la SDK desde el código de su juego, pero aquí tiene los conceptos básicos: Modo de operación Para que la Galaxy Store sepa si su juego está realizando pruebas, o si ya està en modo de producción, debe usar el método SetOperationMode. SamsungIAP.Instance.SetOperationMode(OperationMode.OPERATION_MODE_TEST); Los posibles valores para el parámetro son OperationMode.OPERATION_MODE_TEST, OperationMode.OPERATION_MODE_TEST_FAILURE, y OperationMode.OPERATION_MODE_PRODUCTION. Solicitar información de los artículos disponibles en venta Para saber qué artículos se pueden ofrecer desde el juego, debe invocar el método GetProductDetails. SamsungIAP.Instance.GetProductDetails("com.mygame.product1, com.mygame.product2,com.mygame.product3", OnGetProductsDetails); En este ejemplo se está solicitando la información de los productos 1, 2, y 3, ya que se está enviando los identificadores de esos productos, separados por comas. SamsungIAP.Instance.GetProductDetails("", OnGetProductsDetails); En este ejemplo se esta pidiendo la información de todos los productos disponibles, ya que no se está enviando ningún identificador de productos. Iniciar un pago Para poder empezar la compra de un producto se debe invocar el método StartPayment. SamsungIAP.Instance.StartPayment("com.mygame.product1", "pass_through_value", OnPayment); En este ejemplo se está iniciando la transacción para el “com.mygame.product1”. Usted puede especificar el valor del segundo parámetro y utilizarlo para verificar el éxito de la compra. Y por último se especifica el “callback”, que es el método que se va a invocar cuando se finalice la transacción, sin importar si esta fue exitosa o no. Artículos Consumibles Usted puede usar el método ConsumePurchasedItems para reaprovisionar productos consumibles. Así el jugador puede comprar energía en su juego cuantas veces quiera, por ejemplo. El primer parámetro es el identificador de la compra del artículo. SamsungIAP.Instance.ConsumePurchasedItems(purchase_id, OnConsume); Y el segundo parámetro es el método OnConsume que se activa cuando el proceso ha terminado, y este contiene información sobre el artículo consumido y el procesamiento de llamadas a la API. Consultar productos adquiridos anteriormente Para obtener la lista de todos los productos que un jugador ha comprado, puede usar el método GetOwnedList. SamsungIAP.Instance.GetOwnedList(ItemType.all, OnGetOwnedList); El primer parámetro puede ser ItemType.all, ItemType.item, o ItemType.subscription. Con ItemType.all el método devuelve todos los artículos no consumibles comprados, los artículos consumibles que no se han consumido y los artículos de suscripción con suscripciones activas. Con ItemType.item el método devuelve todos los artículos no consumibles comprados y los artículos consumibles que no se han consumido. Y por último, con ItemType.subscription el método devuelve todos los artículos de suscripción comprados con suscripciones activas. El segundo parámetro, es el método que se activará cuando el proceso ha finalizado. Para obtener más tutoriales, visite Samsung Developers. (http://developer.samsung.com/) View the full blog at its source