Wednesday, June 12, 2019

How to Use the Web Share API

#395 — June 12, 2019

Read on the Web

Frontend Focus

How to Use the Web Share API — This API provides a way to trigger the native share dialog of a device when sharing content, such as a link, directly from a website or web app. It's mostly focused on mobile use cases so far but the latest Safari build supports it too.

Ayooluwa Isaiah

Are Long JavaScript Tasks Delaying Your 'Time to Interactive'? — Chrome DevTools can now visualize ‘Long Tasks’ (code that causes the main thread to freeze, breaking the user experience) making it easier to debug and optimize away any problems.

Addy Osmani

Image & Video Management Made for Front-End Developers — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today.

Cloudinary sponsor

The Concept of 'Micro Frontends' — A look at a pattern aroundo splitging up your large, complex, frontend codebases into simple, composable, independently deliverable apps that integrate together.

Cam Jackson (ThoughtWorks)

▶  Using DevTools To Understand Modern CSS Layouts — Explains a variety of modern CSS layout techniques through live demonstrations via DevTools.

Chen Hui Jing

Styling in Modern Web Apps — A dive into the different ways of organizing styling in modern apps, which often have complex interfaces and design patterns.

Ajay NS

Mozilla Will Reportedly Launch a Paid Version of Firefox — A premium version of Firefox, offering a VPN and secure cloud storage, is expected to launch by October.

Ivan Mehta

💻 Jobs

JavaScript / React Performance Optimization Engineer - Exodus (Remote) — Exodus are looking for an obsessive engineer to work on improving the performance of the Exodus desktop application.

Exodus

Land a New Dev Job on Vettery — Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 News, Tutorials & Opinion

Safari Web Inspector Now Includes A New CPU Usage Timeline — ...that lets devs measure a page’s CPU usage, estimate its energy impact, and more easily investigate sources of script execution that may be contributing to poor energy utilization.

Joseph Pecoraro

▶  Hello Subgrid — Rachel Andrew, member of the CSS Working Group, introduces Subgrid — with various use cases, example code and thoughts on where we might see Grid going in the future.

Rachel Andrew

It’s Finally Possible to Code Web Apps on an iPad Pro — ...using Visual Studio Code. (Originally shared in our mobile development newsletter.)

Owen Williams

Exploring Domain-Driven Design at CircleCI — One thing that has helped maintain a sense of consistency has been for us to adopt a different approach to writing software: Domain-Driven Design.

CircleCI sponsor

An Introduction to the MediaRecorder API — Here's how to use the MediaRecorder browser API to record audio and video in the browser.

Phil Nash (Twilio)

'Why We Prefer CSS Custom Properties to SASS Variables' — Some practical examples of how CSS variables can power-up your workflow.

Sebastiano Guerriero

CSS Grid and IE11 — A look at how a little JavaScript "helped us make peace" with CSS Grid and IE11.

Valentina Versari & Tom Rothe

Write HTML Like It's 1999 — A reminder of good semantic best practices to “inspire you to keep things simple”.

Bradley Taunt

💡 Tip of the Week

supported by

Optimizing Google Fonts requests

If you use Google Fonts and know in advance which letters you'll need from a particular typeface (such as if you're rendering a headline or title with an elaborate heading font), there's a technique you can use to significantly reduce load.

Google Fonts lets you specify which letters you need and will only serve those as part of the font. To do this you can append a text= parameter to the end of a font request, like so:

<link href="http://bit.ly/1k4Fhr6&text=Frontedcus" rel="stylesheet">

In the example above, we've requested all the letters needed to type out 'Frontend Focus'.

Google claims that in some cases this technique can reduce the size of your font file request by up to 90% (in the case above, we've worked out it's a 86% drop from a 9.2KB font to a 1.3KB one) so it's a neat little optimization strategy worth looking into.

This week's tip is sponsored by Percy, the all-in-one visual testing platform. Replace manual QA and catch visual UI bugs before your customers do.
Get started for free.

🔧 Code, Tools & Resources

html5-boilerplate: A Professional Front-End Template for Building Fast, Robust, and Adaptable Web Apps/Sites — This project has been around for several years now, but recently saw an update and remains a highly popular templating choice.

H5BP

lightweight-charts: Financial Lightweight Charts Built with HTML5 Canvas — If you want to replace static image charts with interactive ones that are small and fast this HTML5 charts library may be worth a look.

TradingView

The Open Source Conundrum: How Do We Keep the Lights On?

CodeFund sponsor

Cube.js: An Open Source Analytics Framework — Designed to work with large-scale data sets.

Statsbot

Pretty Checkbox: A Pure CSS Library to Beautify Checkbox and Radio Buttons

Lokesh

   ðŸ—“ Upcoming Events

CSSCamp 2019, July 17 — Barcelona, Spain — A one-day, one-track conference for web designers and developers.

An Event Apart, July 29-31 — Washington, D.C. — A popular three-day conference that focuses on all things relating to digital design and user experience.

Front Conference, August 29-30 — Zurich, Switzerland — A two-day double-track conference for everyone involved from concept to implementation.

CSSConf, September 25 — Budapest, Hungary — A community conference dedicated to the designers and developers who love CSS.

❓ Last But Not Least..

Chrome Incognito Mode No Longer Detectable:


by via Frontend Focus

“Not So Common” Twitter Feature Is Working as a Jackpot for Trolls and Spammers

Twitter is one of the most used social media network of recent times. Business outlets and companies are using Twitter to reach out to their audience and this has streamlined the communication between the customers and the brands. Apart from the business point of view, it is one of the most used...

[ This is a content summary only. Visit our website http://bit.ly/1b4YgHQ for full links, other content, and more! ]

by Aabroo Saeed via Digital Information World

Google Earns Billions From News Industry

Part of Google’s business model involves monetizing clicks. Each time a user clicks on a link that they have searched for in Google search, a certain amount of money is paid to Google with the help of its advertising program. About forty percent of all searches have something or the other to do...

[ This is a content summary only. Visit our website http://bit.ly/1b4YgHQ for full links, other content, and more! ]

by Zia Zaidi via Digital Information World

Assumptions Related to Twitter Notifying about Tweets Sent via DM Turned Out to be Fake

Twitter sends notifications to its users when someone starts following, likes or retweets or when the user gets a direct message. One time when Twitter will not send a notification is when someone DM your tweet to someone else. There had been many speculations recently about Twitter's new feature...

[ This is a content summary only. Visit our website http://bit.ly/1b4YgHQ for full links, other content, and more! ]

by Aqsa Rasool via Digital Information World

How to Set Up YouTube TrueView Video Discovery Ads

Want more people to see your videos in YouTube search? Wonder how YouTube advertising can show your videos alongside related content? In this article, you’ll learn how to promote your videos with YouTube TrueView discovery ads. Why Run a YouTube TrueView Discovery Ad Campaign? YouTube TrueView discovery ads appear in the places where users discover content […]

The post How to Set Up YouTube TrueView Video Discovery Ads appeared first on Social Media Marketing | Social Media Examiner.


by Chintan Zalani via Social Media Marketing | Social Media Examiner

The New Google Maps Alert May Make Taxis Safer

Driving in a taxi is a pretty standard way to get around, but the fact of the matter is that a lot of people, women in particular, often feel unsafe in taxis especially if the cab is unregulated which is the case in a lot of countries around the world. The main danger that you would face in a taxi...

[ This is a content summary only. Visit our website http://bit.ly/1b4YgHQ for full links, other content, and more! ]

by Zia Zaidi via Digital Information World

Gmail to roll out ‘dynamic email’ from July 2nd

In less than a month, your Gmail inbox will be flooded with something more than emails. Yes, the company is planning to make its AMP-powered ‘dynamic emails’ accessible to everyone from July 2nd. With AMP available in Gmail, the users will be able to perform web-based tasks right from their...

[ This is a content summary only. Visit our website http://bit.ly/1b4YgHQ for full links, other content, and more! ]

by Saima Salim via Digital Information World