Understanding Supply Chain Attacks

Supply chain attacks involve compromising a third-party service or library to inject malicious code into websites that rely on it. A recent example is the Polyfill.io incident, where thousands of websites were potentially compromised.

How Could This Be Prevented?

One effective way to mitigate such risks is by using the Subresource Integrity (SRI) attribute in your HTML scripts and link tags. SRI allows browsers to verify that the fetched resources (like scripts or stylesheets) are delivered without unexpected manipulation.

Demonstration

#script.js
console.log("Hello World - Secured!");

#index.html



  
  
  
  


  Hello World

#app.js - to serve above files
const express = require('express');
const app = express();

app.use(express.static("./"));

app.listen(80, () => {
  console.log('Server is running on http://localhost');
});

Generating the Integrity Hash

openssl dgst -sha384 -binary script.js | openssl base64 -A


Now if we perform all the above steps correctly then the following working output should appear:

Now Let’s try to modify script.js

#script.js - modified
console.log("Hello World - Modified!");

Now try to open http://localhost/index.html, you should see following error:

None of the sha384 hashes in the integrity attribute match the content of the resource.

SO THE MODIFIEFD SCRIPT WON’T RUN AT ALL!!

Resources:

• https://x.com/FranklinThaker/status/1806553934175277275
• List of sites that have been compromised: https://t.co/LDqOSONvNr
• Attack details: https://t.co/DOABrBcYD3
• Cloudflare solution: https://t.co/vEMO0QLxBt
• https://github.com/FranklinThaker/Subresource-integrity-attribute-example

The post How everyone could have prevented the polyfill dot io supply chain attacks ? appeared first on ProdSens.live.

*Myntra-Product-Info-As-JSON
*
Tired of sifting through product pages? Unveiling the secrets with Myntra-Product-Info-As-JSON!

Ever find yourself on Myntra.com, wanting to quickly analyze product details for comparison or analysis? Wish there was a way to see all the key information neatly organized and easy to understand. Look no further than JSONify, the Chrome extension that unlocks the hidden data of any product page and presents it in stunning JSON format!

What is Myntra-Product-Info-As-JSON?

Myntra-Product-Info-As-JSON is your new best friend for online shopping and research. It effortlessly scans product page on Myntra and extracts essential information about the product, like:

Title and description
Price and availability
Product specifications and other info
Images and other media
Shipping details and reviews

But just presenting the data isn’t enough. Myntra-Product-Info-As-JSON goes the extra mile by formatting it all in beautiful, color-coded JSON, making it easy to read and understand, even for those unfamiliar with the format.

Why Myntra-Product-Info-As-JSON?

Supercharge your research: Quickly compare products side-by-side by analyzing their JSON data in a single glance.
Effortless data extraction: Copy and paste any part of the JSON for further analysis or integration with other tools.
Uncover hidden details: Go beyond what’s readily displayed on the page and glean valuable insights not easily accessible otherwise.
Stay organized: Export product data as JSON files for future reference or analysis, keeping your research organized and accessible.
Beautiful and modern: Enjoy a visually appealing experience with a clean and elegant JSON presentation.
More than just data:

Myntra-Product-Info-As-JSON is constantly evolving, with plans to include:

Support for more websites: Expanding its reach to cover more e-commerce platforms and product categories.
Customization options: Tailoring the extracted data to your specific needs and interests.
Advanced filtering and search: Easily find specific information within the JSON data.
Ready to see the magic?

Head over to the Myntra-Product-Info-As-JSON and download Myntra-Product-Info-As-JSON today! It’s completely free and easy to use. Start shopping smarter, researching faster, and unlocking the power of product data with Myntra-Product-Info-As-JSON!

P.S. Share your experience with Myntra-Product-Info-As-JSON in the comments below and let us know what features you’d love to see next!

The post Myntra Product Info As JSON appeared first on ProdSens.live.

Posted by Gina Biernacki, Product Manager

Chrome is phasing out support for third-party cookies this year, subject to addressing any remaining concerns of the CMA. A relatively new web API, Federated Credential Management (FedCM), will enable sign-in for the Google Identity Services (GIS) library after the phase out of third-party cookies. Starting in April, GIS developers will be automatically migrated to the FedCM API. For most developers, this migration will occur seamlessly through backwards-compatible updates to the GIS library. However, some websites with custom integrations may require minor changes. We encourage all developers to experiment with FedCM, as previously announced through the beta program, to ensure flows will not be interrupted. Developers have the ability to temporarily exempt traffic from using FedCM until Chrome enforces the restriction of third-party cookies.

Audience

This update is for all GIS web developers who rely on the Chrome browser and use:

One Tap, or

Automatic Sign-In

Context

As part of the Privacy Sandbox initiative to keep people’s activity private and support free experiences for everyone, Chrome is phasing out support for third-party cookies, subject to addressing any remaining concerns of the CMA. Scaled testing began at 1% in January and will continue throughout the year.

GIS currently uses third-party cookies to allow users to sign up and sign in to websites easily and securely by reducing reliance on passwords. The FedCM API is a new privacy-preserving alternative to third-party cookies for federated identity providers. It allows Google to continue providing a secure, streamlined experience for signing up and signing in to websites. Last August, the Google Identity team announced a beta program for developers to test the Chrome browser’s new FedCM API supporting GIS.

What to Expect in the Migration

Partners who offer GIS’s One Tap and Automatic Sign-In features will automatically be migrated to FedCM in April. For most developers, this migration will occur seamlessly through backwards-compatible updates to the GIS JavaScript library; the GIS library will call the FedCM APIs behind the scenes, without requiring any developer changes. The new FedCM APIs have minimal impact to existing user flows.

Some Developers May be Required to Make Changes

Some websites with custom integrations may require minor changes, such as updates to custom layouts or positioning of sign-in prompts. Websites using embedded iframes for sign-in or a non-compliant Content Security Policy may need to be updated. To learn if your website will require changes, please review the migration guide. We encourage you to enable and experiment with FedCM, as previously announced through the beta program, to ensure flows will not be interrupted.

Migration Timeline

If you are using GIS One Tap or Automatic Sign-in on your website, please be aware of the following timelines:

January 2024: Chrome began scaled testing of third-party cookie restrictions at 1%.

April 2024: GIS begins a migration of all websites to FedCM on the Chrome browser.

Q3 2024: Chrome begins ramp-up of third-party cookie restrictions, reaching 100% of Chrome clients by the end of Q4, subject to adddressing any remaining concerns of the CMA.

Once the Chrome browser restricts third-party cookies by default for all Chrome clients, the use of FedCM will be required for partners who use GIS One Tap and Automatic Sign-In features.

Checklist for Developers to Prepare

  Be aware of migration plans and timelines that will affect your traffic. Determine your migration approach. Developers will be migrated by default starting in April.

  All developers should verify that their website will be unaffected by the migration. Opt-in to FedCM to test and make any necessary changes to ensure a smooth transition. For developers with implementations that require changes, make changes ahead of the migration deadline.

  For developers that use Automatic Sign-In, review the FedCM changes to the user gesture requirement. We recommend all automatic sign-in developers migrate to FedCM as soon as possible, to reduce disruption to automatic sign-in conversion rates.

  If you need more time to verify FedCM functionality on your site and make changes to your code, you can temporarily exempt your traffic from using FedCM until the enforcement of third-party cookie restrictions by Chrome.

To get started and learn more about FedCM, visit our developer site and check out the google-signin tag on Stack Overflow for technical assistance. We invite developers to share their feedback with us at gis-fedcm-feedback@google.com.

The post Federated Credential Management (FedCM) Migration for Google Identity Services appeared first on ProdSens.live.

Have you ever found yourself frustrated with the time-consuming task of highlighting and copying large sets of data from HTML tables?

It’s a common scenario where you painstakingly select rows and columns, only for a slight slip of the mouse to ruin your progress, forcing you to start over. This not only eats into your valuable time but can also lead to fatigue-driven errors.

Enter the Table Data Selector, a Chrome extension that elegantly solves this problem. With just a simple right-click, this tool enables you to copy the entire table contents effortlessly, eliminating the risk of mistakes and saving you from the tediousness of manual selection.

For more detailed insights, visit the GitHub repository of Table Data Selector.

Follow GBTI for more

Thanks for reading! If you like our content, please consider following us!

Twitter/X | GitHub | YouTube | Dev.to | Daily.dev | Hashnode | Discord

The post How to copy table data easily with this Chrome Extension appeared first on ProdSens.live.

Posted by Vikrant Rana, Product Manager

OAuth 2.0 Custom URI schemes are known to be vulnerable to app impersonation attacks. As part of Google’s continuous commitment to user safety and finding ways to make it safer to use third-party applications that access Google user data, we will be restricting the use of custom URI scheme methods. They’ll be disallowed for new Chrome extensions and will no longer be supported for Android apps by default.

Disallowing Custom URI scheme redirect method for new Chrome Extensions

To protect users from malicious actors who might impersonate Chrome extensions and steal their credentials, we no longer allow new extensions to use OAuth custom URI scheme methods. Instead, implement OAuth using Chrome Identity API, a more secure way to deliver OAuth 2.0 response to your app.

What do developers need to do?

New Chrome extensions will be required to use the Chrome Identity API method for authorization. While existing OAuth client configurations are not affected by this change, we strongly encourage you to migrate them to the Chrome Identity API method. In the future, we may disallow Custom URI scheme methods and require all extensions to use the Chrome Identity API method.

Disabling Custom URI scheme redirect method for Android clients by default

By default, new Android apps will no longer be allowed to use Custom URI schemes to make authorization requests. Instead, consider using Google Identity Services for Android SDK to deliver the OAuth 2.0 response directly to your app.

What do developers need to do?

We strongly recommend switching existing apps to use the Google Identity Services for Android SDK. If you’re creating a new app and the recommended alternative doesn’t work for your needs, you can enable the Custom URI scheme method for your app in the “Advanced Settings” section of the client configuration page on the Google API Console.

User-facing error message

Users may see an “invalid request” error message if they try to use an app that is making unauthorized requests using the Custom URI scheme method. They can learn more about this error by clicking on the “Learn more” link in the error message.

Developer-facing error message

Developers will be able to see additional error information when testing user flows for their applications. They can get more information about the error by clicking on the “see error details” link, including its root cause and links to instructions on how to resolve the error.

Related content

https://developers.googleblog.com/2022/02/making-oauth-flows-safer.html

The post Improving user safety in OAuth flows through new OAuth Custom URI scheme restrictions appeared first on ProdSens.live.

Posted by Court Jacinic, Senior UX Writer, Mitchell Galavan, Interaction Designer, and Silvia Convento, User Experience Researcher

This article also appears on web.dev

Passkeys are a simple and secure cross-device authentication technology that enables creating online accounts and signing in to them without entering a password. To log in to an account, users are simply shown a prompt to to use the screen lock on their device, such as touching the fingerprint sensor.

Google has been working with the FIDO Alliance for years, alongside Apple and Microsoft, to bring passkeys to the world. In 2022 we rolled out platform support for passkeys so that Android and Chrome users can seamlessly sign in to apps and websites across all their devices. In May 2023, we enabled signing in to Google Accounts with passkeys, bringing the security and convenience of passkeys to our users.

Google is in a unique position, as we are both working on the infrastructure for passkeys and are one of the largest services using them. We are rolling out passkeys for Google Accounts carefully and deliberately, so we can measure the results and use that feedback to continue to improve the passkey infrastructure and the Google account experience.

Transitioning users to passkeys

Passwords have been the standard sign-in method since the advent of personalized online experiences. How do we introduce the passwordless experience of passkeys?

Research indicates that when it comes to authentication, users value the convenience the most. They want a smooth and fast transition to the real experience, which only comes after signing in.

Still, the transition to passkeys requires changing muscle memory and users need to be convinced it’s worth making a switch.

The user experience of passkeys for Google.com has been strategically designed to emphasize two principles at every step of the authentication process: ease of use and security.

Leading with convenience

For most users, this will be the first time they see passkeys

The first passkey screen users see is light and easy-to-digest. The header is focusing on the user benefit, saying “Simplify your sign in.”

The body copy explains “With passkeys you can now use your fingerprint, face or screen lock to verify it’s really you“.

The illustration is intended to ground the message in the value proposition made by the page. The large blue primary action invites the user to proceed. “Not now” is included as a secondary action to allow users to choose whether or not to opt in at this time, leaving the user in control. And “Learn more” is offered for the most curious users who would like to understand passkeys better before proceeding.

We explored many iterations of the pages used to introduce users to passkeys during sign in. This included trying content that emphasized the security, technology, and other aspects of passkeys – yet convenience was really what resonated most. Google’s content strategy, illustration, and interaction design demonstrates this core principle for our implementation of passkeys.

Associating the term “passkeys” with familiar security experiences

Passkeys are a new term for most users so we are intentionally gently exposing the users to the term to build familiarity. Guided by internal research, we are strategically associating passkeys with security.

The word “passkey” is included throughout the sign-in flow in the less-prominent body copy position. It’s consistently nestled amongst the familiar security experiences that enable passkey use: fingerprint, face scan, or other device screen lock.

Our research has shown that many users associate biometrics with security. While passkeys don’t require biometrics (a passkey can be used with a device PIN, for example), we are leaning into the association of passkeys with biometrics to boost user perception of passkeys’ security benefits.

The additional content behind the “Learn more” has lots of valuable information for users, including reassurance for users that their sensitive, biometric data stays on their personal device and is never stored or shared when creating or using passkeys. We took this approach because most users found the convenience aspect of passkeys appealing, but only a few took into account the biometric element during testing.

Introducing passkeys when it’s relevant to the user

Google’s heuristics carefully determine who will see the introductory screen. Some of the factors are whether a user has two-step verification enabled and whether they access that account regularly from the same device.

Users who are most likely to succeed with passkeys are selected first, and over time more users will be introduced (though, anyone can get started at g.co/passkeys today).

Select users are prompted to create a passkey after signing in with a username and password. There are a few reasons we chose this point in the user journey:

The user has just signed in, they’re aware of their credentials and second step.

We are confident that the user is on their device–they just signed in, so it’s unlikely they walked away or put their device down.

Statistically, signing in isn’t always successful the first time–so a message around making it easier next time has tangible value.

Positioning passkeys as an alternative to passwords and not yet a replacement

Initial user research shows that many users still want passwords as a backup sign-in method. And not all users will have the technology necessary to adopt passkeys.

So while the industry, Google included, is moving towards a “passwordless future”, Google is intentionally positioning passkeys as a simple and secure alternative to passwords. Google’s UI focuses on the benefits of passkeys and avoids language that implies getting rid of passwords.

The creation moment

When users choose to enroll, they’ll see a browser-specific UI modal that enables them to create a passkey.

The passkey itself is shown with the industry-aligned icon and the information used to create it. This includes the display name (a friendly name for your passkey, like your user’s real name) and the username (a unique name on your service–an email address can work great here). When it comes to working with the passkeys icon, the FIDO alliance recommends using the proven passkeys icon–and encourages making it your own with customizations.

Passkeys icon is shown consistently across the user journey to create a familiarity with what the user will see when using or managing the passkey. The passkey icon is never presented without context or supporting material.

When users create their passkey, they’ll see this page

Above, we outlined how the user and the platform work together to create a passkey. When the user clicks “Continue” they’ll be presented with a unique UI depending on the platform.

With that in mind, we learned through internal research that a confirmation screen once the passkey is created can be very helpful in terms of comprehension and closure at this step of the process.

Once the passkey has been created, users will see this page

The confirmation screen is a deliberate ‘pause’ to bookend the journey of introducing a user to passkeys and going through the process of creating one of their own. As it is (likely) the first time a user has engaged with passkeys, this page aims to provide clear closure to the journey. We chose a standalone page after trying some other tools like smaller notifications, and even a post-creation email–simply to provide a structured, stable end to end experience.

Once the user clicks “Continue” here, they’re brought to their destination.

When users sign in again, they’ll likely see this page

Signing in

Next time a user tries to sign in, they’ll be greeted with this page. This uses the same layout, illustration, and primary call to action to evoke the first ‘creation’ experience outlined above. Once the user has made a choice to enroll in passkeys, this page should feel familiar and they will recognize what steps they need to take to sign in.

The user will use this WebAuthn UI to sign in

The same principle of familiarity applies here. Intentionally, this uses the same iconography, illustration, layout and text. The text within the WebAuthn UI is kept brief, broad, and re-usable–so everyone can use this both for authentication and reauthentication.

Passkeys management

Introducing a whole new page within the Google Account settings pages required careful consideration to ensure a cohesive, intuitive, and consistent user experience.

To achieve this, we analyzed the patterns regarding navigation, content, hierarchy, structure, and established expectations that existed across the Google Account.

Passkeys management page in the Google Account

Describe passkeys by ecosystem

To create a high level category system that would be logical to understand we settled on describing passkeys by ecosystem. This way, a user could recognize where a passkey was created and where it is used. Each identity provider (Google, Apple, and Microsoft) has a name for their ecosystem, so we chose to use those (Google Password Manager, iCloud keychain, and Windows Hello respectively).

To support this, we added additional metadata, such as when it was created, when it was last used, and the specific OS that it was used on. In terms of user management actions, the API only supports renaming, revoking, and creating.

Renaming allows users to assign personally meaningful names to passkeys, which could help particular cohorts of users keep track and understand them more easily.

Revoking a passkey doesn’t delete it from the user’s personal credential manager (like Google Password Manager), but renders it unusable until it is set up again. That’s why we chose a cross, instead of a trash or delete icon, to represent the action of revoking a passkey.

When describing the action of adding a passkey to their account, the phrase “Create passkey” resonated better with users compared to “Add a passkey.” This is a subtle language choice to distinguish passkeys from tangible, hardware security keys (though it should be noted that passkeys can be stored on some hardware security keys).

Providing additional content

Internal research showed that using passkeys is a relatively seamless and familiar experience. However as with any new technology, there are lingering questions and concerns that will come up for some users.

How the technology works behind the screen lock, what makes it more secure, and the most common “what if” scenarios Google came across in testing are addressed in Google’s passkey Help Center content. Having support content ready with launch of passkeys is critical for an easy transition for users on any site.

Falling back from passkeys

Reverting to the old system is as simple as clicking “try another way” when a user is asked to authenticate with a passkey. Additionally, exiting the WebAuthn UI will start users on a path to try their passkey again, or sign into their Google Account in traditional ways.

Conclusion

We are still in the early days of passkeys, so when designing the user experience keep a few principles in mind:

Introduce passkeys when it’s relevant to the user

Highlight the benefits of passkeys

Use opportunities to build familiarity the concept of passkeys

Position passkeys as an alternative to passwords and not a replacement

The choices we made for passkeys for Google Accounts were informed by best practices and internal research, and we’ll continue to evolve the user experience as we gain new insights from users in the real world.

The post Designing the user experience of passkeys on Google accounts appeared first on ProdSens.live.

Are you an avid online shopper? Do you often find yourself browsing through various products on Amazon, wondering if they fit within your budget? Wouldn’t it be great to have a tool that could show you the estimated cost of the items right on the Amazon product page? Well, you’re in luck!

In this blog, I will guide you through the process of creating a Google Chrome extension that can help you make informed purchasing decisions by displaying the budget for products on Amazon.

Online shopping has become a popular way to purchase products conveniently. However, it can be challenging to keep track of your budget, especially when shopping on platforms like Amazon that offer a wide range of items. With a Google Chrome extension that shows the budget for products on Amazon, you can have a better understanding of the affordability of the items you’re interested in.

Understanding Google Chrome Extensions

Before we dive into creating the extension, let’s understand what Google Chrome extensions are. Extensions are small software programs that enhance the functionality of the Google Chrome browser. They can modify and enhance the browsing experience by adding new features, customizing websites, or providing useful information.

Planning the Extension

To create a Google Chrome extension that shows the budget for products on Amazon, we need to plan our approach. Here’s an outline of the steps involved:

Setting up the development environment

• Retrieving product information from Amazon
• Calculating the budget based on user-defined criteria
• Displaying the budget on the Amazon product page
• Testing and debugging the extension
• Publishing the extension to the Chrome Web Store

Setting up the Development Environment

To develop the extension, we need a development environment that allows us to write and test our code. Here’s what you’ll need to set up:

• Install Google Chrome: Make sure you have the latest version of Google Chrome installed on your computer.
• Set up a text editor: Choose a text editor that you’re comfortable with, such as Visual Studio Code or Sublime Text.
• Enable developer mode in Chrome: Open the Chrome browser and go to the Extensions page by entering “chrome://extensions” in the address bar. Enable the developer mode by toggling the switch at the top right corner of the page.

Retrieving Product Information from Amazon

To display the budget for products on Amazon, we need to retrieve relevant information about the product. We can achieve this by leveraging web scraping techniques. Here’s how you can do it:

• Identify the HTML elements: Inspect the Amazon product page and identify the HTML elements that contain the product title, price, and any other relevant information.
• Use JavaScript and DOM manipulation: Write JavaScript code to access and extract the required information from the HTML elements. You can use libraries like jQuery to simplify the process.
• Implement error handling: Account for any potential errors that may occur during the scraping process, such as missing or inconsistent data.

Calculating the Budget

Now that we have the product information, we can calculate the budget based on user-defined criteria. Here’s how you can do it:

• Define the budget criteria: Determine the factors that contribute to the budget calculation, such as the user’s income, expenses, and savings goals.
• Write the budget calculation algorithm: Implement an algorithm that takes into account the user-defined criteria and calculates the budget accordingly. Consider factors like affordability, savings targets, and financial constraints.
• Format and display the budget: Present the calculated budget in a user-friendly format, such as a dollar amount or a percentage of the user’s total budget.

Displaying the Budget on the Amazon Product Page

To provide a seamless user experience, we need to display the budget information directly on the Amazon product page. Here’s how you can achieve this:

• Modify the product page layout: Use CSS to customize the layout of the Amazon product page and create space for displaying the budget information.
• Inject the budget into the page: Use JavaScript to insert the budget information into the modified layout. You can dynamically update the displayed budget whenever the user interacts with the page.

Testing and Debugging the Extension

Testing is a crucial step to ensure that the extension functions as intended and provides accurate budget information. Here’s what you can do to test and debug the extension:

• Test with different products: Try the extension with various products on Amazon to verify the accuracy of the budget calculations.
• Handle edge cases: Test the extension with products that have different price ranges, discounts, or special offers to ensure that the budget calculation remains reliable.
• Debug and fix issues: Use the Chrome Developer Tools to debug any issues that may arise during the testing phase. Fix any bugs or errors to improve the extension’s performance and stability.

Publishing the Extension to the Chrome Web Store

Once you have thoroughly tested and refined the extension, it’s time to share it with others by publishing it to the Chrome Web Store. Here’s how you can do it:

• Package the extension: Create a compressed file containing all the necessary files and assets required by the extension.
• Register as a developer: Sign up for a developer account on the Chrome Web Store and complete the necessary registration process.
• Upload and submit the extension: Fill in the required information about your extension, upload the packaged file, and submit it for review.
• Compliance and review: The Chrome Web Store will review your extension for compliance with their guidelines and policies. Make any necessary changes based on their feedback.
• Publish the extension: Once your extension passes the review process, it will be published on the Chrome Web Store, where users can find and install it.

Conclusion

Creating a Google Chrome extension that shows the budget for products on Amazon can greatly assist online shoppers in making informed purchasing decisions.

By following the steps outlined in this blog, you can develop an extension that retrieves product information, calculates the budget, and displays it directly on the Amazon product page. With this tool at your disposal, you can shop confidently while staying within your budget.

Well, in this blog, I haven’t covered every detail and steps with codes. Want to know step by step? You can comment so I can make a detailed one.

Also, there is a sea of uses of such extension and can be made with rich features. You can reach me to develop one.

FAQs

1. Can I use the extension on other e-commerce platforms?

The extension is specifically designed for Amazon. However, you can modify the code to adapt it to other e-commerce platforms with similar product information structures.

2. Is the budget calculation customizable?

Yes, the budget calculation algorithm can be customized to fit your personal financial goals and criteria. You can adjust factors like savings targets and income allocation.

3. Will the extension work on mobile devices?

The extension is designed for the Google Chrome browser on desktop devices. However, you can explore options like Chrome for Android or Firefox for Android to adapt it to mobile platforms.

4. Can I share the extension with others?

Once your extension is published on the Chrome Web Store, anyone can find and install it. You can share the extension’s Chrome Web Store link with others to make it easily accessible.

5. Is the extension free to use?

The pricing and availability of the extension are determined by the developer. Some extensions may be free, while others may require a one-time purchase or offer additional premium features.

The post A Step-by-Step Guide to Building a Google Chrome Extension for Amazon Budgeting appeared first on ProdSens.live.

Posted by Vivek Sekhar, Product Manager

This post describes early experimental work from JetBrains and Google. You can learn more in the session on WebAssembly at Google I/O 2023.

Application developers want to reach as many users on as many platforms as they can. Until now, that goal has meant building an app on each of Android, iOS and the Web, as well as building the backend servers and infrastructure to power them.

To reduce effort, some developers use multiplatform languages and frameworks to develop their app’s business logic and UI. Bringing these multiplatform apps to the Web has previously meant “compiling” shared application code to a slower JavaScript version that can run in the browser. Instead, developers often rewrite their apps in JavaScript, or simply direct Web users to download their native mobile apps.

The Web community is developing a better alternative: direct Web support for modern languages thanks to a new technology called WebAssembly GC. This new Web feature allows cross-platform code written in supported languages to run with near-native performance inside all major browsers.

We’re excited to roll-out experimental support for this new capability on the Web for Kotlin, unlocking new code sharing opportunities with faster performance for Android and Web developers.

Kotlin Multiplatform Development on the Web

Kotlin is a productive and powerful language used in 95% of the top 1,000 Android apps. Developers say they are more productive and produce fewer bugs after switching to Kotlin.

The Kotlin Multiplatform Mobile and Compose Multiplatform frameworks from JetBrains help developers share code between their Android and iOS apps. These frameworks now offer experimental support for Kotlin compilation to WebAssembly. Early experiments indicate Kotlin code runs up to 2x faster on the Web using WebAssembly instead of JavaScript.

JetBrains shares more details in the release notes for version 1.18.20 of their K2 compiler, as well as documentation on how you can try Kotlin/Wasm with your app.

Pulling it off

Bringing modern mobile languages like Kotlin to the Web required solving challenging technical problems like multi-language garbage collection and JavaScript interoperability. You can learn more in the session on new WebAssembly languages from this year’s Google I/O conference.

This work wouldn’t have been possible without an open collaboration between browser vendors, academics, and service providers across the Web as part of the W3C WebAssembly Community Group. In the coming weeks, we’ll share technical details about this innovative work on the V8 Blog.

Looking ahead: Web and Native Development

For decades, developers have dreamed of the Web as a kind of “universal runtime,” while at the same time acknowledging certain feature or performance gaps relative to native platforms. Developers have long had to switch between working on the Web or their native mobile apps.

However, we want to make it possible for you to work on the Web and your native experiences together, not only to help you reduce effort, but also to help you tap into the Web’s unique superpowers.

On the open web, your app is just a click away from new users, who can discover it and share it just as easily as they share a web page, with no app stores getting in the way and no revenue split affecting your profitability.

The productivity of cross-platform development, the performance of native mobile apps and the openness of the web. That’s why we love WebAssembly.

We can’t wait to see what you build next!

“The productivity of cross-platform development, the performance of native mobile apps, and the openness of the Web.”

The post Bringing Kotlin to the Web appeared first on ProdSens.live.

Posted by Komal Sandhu – Global Program Manager, Google Developer Groups

“The pace of technology is changing so quickly that it’s impossible sometimes to know where to start and how. What are the things I need to focus on? It’s just too hard to work out. I’m motivated to give developers a clear direction that cuts through a lot of this challenge.”

Learn Chrome tools and tips from Chrome Lead, Paul Kinlan, and hear from him first-hand on how to get involved.

Tell us about yourself:

“My name is Paul Kinlan, and I lead the Chrome & Web Platform Developer Relations team. I’m in a very lucky position, in that I get to work with a huge range of people who are passionate about the web and put their whole careers into continuing to help the web thrive for decades to come. If you are interested, you can follow my site: paul.kinlan.me”

What is your origin story?

“I grew up on the Wirral in the UK, a peninsula located in North West England and part of Wales. I’ve been surrounded by computers since my earliest childhood memories, like watching my dad fix computers in the house (it’s hard to count how many warnings I got to not touch the capacitor at the back of the monitor… but it looked fun).

I also was going to computer clubs and watching the demo and cracking scenes (I might have “loaned” some games from people) and was keen on finding friends in school who were just like me and liked games & computers.”

How did you get started in this space? Why did you get into Web technology specifically?

“When I was a kid, my dad tried to get me to program, but I just didn’t get it. Then, when I was about 12 years old and first saw the Street Fighter arcade game, it clicked. I got the concept of loops, reading joysticks, and getting things on the screen.

At the same time, my grandad was struggling to pick his lottery numbers, and I thought I could help him with some software. I fired up QBasic, read the manual and got started. I almost quit though, when I didn’t realize the US had a different spelling for colour… (I do wonder how life would have been different if I’d stopped there).

Jump forward a couple of years, and the web came about, and I was just tinkering, and I realized that I could build simple sites and applications with a bit of Perl and HTML. I was hooked, started a business, and went from there. Now I’m here, on the Chrome team, hoping that I can offer the same opportunities to developers that I had.”

What are some challenges that you have observed developers being faced with?

“Information overload. The pace of technology is changing so quickly that it’s impossible sometimes to know where to start and how. What are the things I need to focus on? It’s just too hard to work out. I’m motivated to give developers a clear direction that cuts through a lot of this challenge.”

What do you think is the most interesting or useful learning resource for learning more about Chrome & Web? Is there a particular library or codelab that everyone should learn?

“I’m biased, but https://web.dev/learn is a great resource that covers some core fundamentals of web development, and we’re always improving it with the latest guidance on how to do good web development.

I know most people aren’t like me, but I found engrossing myself in programming reference materials (combined with a lot of tinkering) was a great way to start, and if you combine MDN (Mozilla Developer Network) with sites like glitch.com or GitHub, you have the ability to quickly learn and test ideas without having to have any installed software. It’s a really incredible time to be a developer.”

What are some most surprising or inspiring ways developers and technologists are building together using Chrome and Web?

“Oh – amazing question! 

Right now, the intersection of Web and ML is incredibly exciting. People are building sites and apps that do things that we never thought were possible and are then able to give people access to it via a simple URL.” 

“I was watching the folks over at Corridor Crew (Visual effects technologists), and they had this challenge to rotoscope a person out of a video, replace the background with a different video, and then put the person back on top – the fastest solution was built in the browser using ML.

At the same time, I also love that people are bringing Apps to the web that we never thought would be possible on the web, such as Photoshop and Audacity. People are now building full blown video editors on the web, enabling anyone with a browser to become a video producer. It’s amazing.

The web enables so much, and so much that I never thought possible, just at the click of a link. Every day, I see something that excites me, and that’s why I love it.”

What’s a specific use case of Chrome / Web technology that excites you?

“I’m personally very passionate about the Fugu (deep hardware) set of APIs because they enable entire classes of businesses to come to the web for the first time.

I’m also very excited about the new range of CSS and UI related APIs because they make once complex things incredibly simple. The Web is primarily a visual medium; however, the perception of quality has lagged what people get on other platforms (such as Android and iOS apps), and these new primitives and concepts will enable richer and more fluid user interfaces, with less work needed from the developer or designer.”

How can developers be successful building on Chrome & Web?

“It all depends on the stage you’re at – if you’re an established site, then I would look to improve the user experience with things like Core Web Vitals.

If you are just starting, just start – there are so many tools that now let you start to prototype in the browser and get something that people can use incredibly quickly. In the past, you used to have to worry about the full-stack (Hosting -> Front-end), now that is getting less of an issue.”

What’s next for Chrome & Web Community? What might the future look like?

“Whatever I say will be wrong – But I like these questions, so I hope people will humor me…. It looks like it takes about 3-5 years for a feature launched in one browser to become available across Blink, WebKit and Gecko, so with that in mind, the near future probably looks a lot like right now, but more evenly spread (in terms of compatibility) – projects like Interop 202X are making it easier to build sites that work everywhere.

The further future though….? I made a talk years ago about the concept of “The Headless Web” – where I see a lot of opportunities for services or assistants like Siri or Google Assistant to make more sense of a web page and let you interact with it (and not just read it back).

At the same time, there are heaps of other platforms that are changing the definition of what the Web means. Facebook, WeChat, and others – are browsers and platforms in their own right, with hooks back into their own platforms. When I look at the billions of people that have come online in the last couple of years, as the world went mobile (and the billions more still to come online) – will they use the browser as we know it? Or will they use these ‘alternative browser’ platforms…

All I know is that we need to keep making the experience of the web better for everyone.”

What is the focus for Web & Chrome currently and why?

“Chrome is still focused on the principles that it set out at its launch: “a web that is Speedy, Simple and Secure.” – when you look at that lensing, so much of our work has been in service of these. Take, for example, “Core Web Vitals” – we worked out a set of metrics that could be used to determine if your site had a great user experience, and I believe it’s fundamentally changed the web. Or, on another axis, you look at technologies like WASM, which are enabling native code (e.g C/C++) to run safely in a sandbox in the browser, at speeds that are getting close to what you would expect an installed application to reach.”

How do Web & Chrome help expand the impact of developers?

“Universal access. The link enables this, and we need to fight to keep it open and accessible to all.’

Anything else you would like to share with the community of Google developers around the world?

“There is a lot of turmoil right now in the world; spend time listening to people, supporting them, and raising them up. When I got started, the community around me was so supportive and helped me more than I could help it – I use my time now to give people from all backgrounds the opportunities that I was fortunate to have access to. I hope that others can do the same.”

Find a Google Developer Group hosting a DevFest near you.

Want to learn more about Google Web Technologies and Google Chrome? Hoping to attend a DevFest or Google Developer Groups (GDG)? Find a GDG hosting a DevFest near you here.

The post Paul Kinlan shares his passion for web development and how to get involved at DevFest appeared first on ProdSens.live.

Google Chrome offers a range of extensions that you didn’t know existed but definitely need.

These extensions will help you in your coding journey.

1. Colorzilla

2. Lighthouse

3. React Dev Tools

4. Daily.dev

5. Wappalyzer

6. WhatFont

Happy Coding!

The post Must have Chrome Extensions for developers appeared first on ProdSens.live.