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.
Understanding Vue.js's <Suspense> and Async Components
In this blog post, we will delve into how and async components work, their benefits, and practical implementation strategies to make your Vue.js applications more efficient and user-friendly...
Apr 24, 2024
6 mins
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....
Feb 14, 2024
6 mins
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...
Feb 9, 2024
5 mins
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....
Jan 14, 2022
6 mins
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....
Nov 10, 2021
3 mins
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....
May 22, 2020
5 mins
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....
May 6, 2020
4 mins
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....
Mar 2, 2020
4 mins
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/...
Feb 7, 2020
3 mins
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....
Jan 28, 2020
5 mins
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....
Jan 27, 2020
6 mins
Make it accessible: Navigation in Angular
Make the navigation of your Angular applications more natural AND accessible by following this guide....
Jan 20, 2020
6 mins