Skip to content

This Dot Blog

This Dot provides teams with technical leaders who bring deep knowledge of the web platform. We help teams set new standards, and deliver results predictably.

Newest First
Tags: UX
New Core Web Vitals and How They Work cover image

New Core Web Vitals and How They Work

A guide to INP, the new Core Web Vital coming in March 2024. The what, why and how....

Exploring the Hidden Gems of the Next Image Component: What You Might Be Overlooking cover image

Exploring the Hidden Gems of the Next Image Component: What You Might Be Overlooking

A blog post that explores hidden features that are easy to overlook...

Creating Custom Scrollbars with React cover image

Creating Custom Scrollbars with React

Learn how to develop custom scrollbar in React by implementing your own using DOM elements and provide a smooth and interactive experience to your visitors....

Using Lottie Animations for UI Components in React cover image

Using Lottie Animations for UI Components in React

Lottie can bring the power of Adobe After Effects's animations to the web. Learn how to integrate these animations into your user interface in a React app....

Make it Accessible: Better Layout with HTML cover image

Make it Accessible: Better Layout with HTML

In this article I'm going to teach you how to use the HTML tags , and , and how they can improve your web applications accessibility....

Accessible Tabs in Angular cover image

Accessible Tabs in Angular

This article intention is to guide the reader through the process of building a Tab interface that complies with the WAI-ARIA 1.1 Specification....

Make it Accessible: Dealing with Form Errors in Angular cover image

Make it Accessible: Dealing with Form Errors in Angular

This article's intention is to show you how to handle errors in forms from the a11y angle....

How to do social Media sharing in your PWA cover image

How to do social Media sharing in your PWA

PWA using Web Share API Have you wondered how you can make a use of the "social" sharing API PWA? You know, when you want to share something, and it gives you the option to share via email, Twitter, Instagram, etc? Well, it's actually very easy! Take a look at the demo app to test it on your device. LIVE DEMO https://pwa-share-api.firebaseapp.com/ About the project I have built the sample project that can be found in this repo. In this project, you can see how I added the share functionality to the PWA , but you don't need a service worker or a PWA to add this functionality. I added it to this project because I wanted to show you how to do it specifically in a PWA, but you can add my code to any web app easily! Web Share API The bland definition of what a WSA is: > The Web Share API is meant to help developers implement sharing functionality into their apps or websites, but using the device’s native sharing capabilities instead of having to resort to scripts from the individual social platforms and DIY implementations. The API surface is a simple as it gets.- alligator.io The Web Share API has two share methods: share() and canShare(). The ShareData dictionary of the web share v1 consists of several optional members: text member: Arbitrary text that forms the body of the message being shared. title member : The title of the document being shared. May be ignored by the target. url member : A URL string referring to a resource being shared. The canShare() method contains an extra field which is the files property. files member: A File array referring to files being shared. To read more about it, check out this link So let's have a look at how it actually works. First, let's collect data to make our ShareData dictionary. ` Then, after we have declared what we want to share, we can use it in the .share() method. ` We can put that inside of a function, called onShare(), for example. ` Then pass the onShare() as a click handler to the share button. ` If you want to take it to the next level, you can check to make sure the *web share api* is supported by your browser. Your code will look as follows: ` If you want to use the canShare(), to send files, your code might look like this ` Browser Support If you go to canisue.com, you can see that browser's support for the share() method. Pretty much every major browser supports it. What about the canShare() method? Not as good as the share() method, hopefully it gets to more browsers soon. Resources https://www.w3.org/TR/web-share/#sharedata-dictionary https://alligator.io/js/web-share-api/ https://web.dev/web-share/...

5 tips to make your Angular application more accessible cover image

5 tips to make your Angular application more accessible

This article's intent is to give the reader a few tips to follow when building accessible Angular applications....

Make it Accessible: No More Walls of Text in Angular cover image

Make it Accessible: No More Walls of Text in Angular

Ever wondered how to deal with long texts in Angular? We almost never know how many paragraphs a text has because it comes from a service, learn today how to deal with it in this article....

Make it accessible: Navigation in Angular cover image

Make it accessible: Navigation in Angular

Make the navigation of your Angular applications more natural AND accessible by following this guide....