preface

origin

In the gold Digging Project translator group, I saw someone sharing a link to sign up. So I spent five minutes filling out the online application form and forgot about it. On August 21, I saw several group friends sharing the good news of winning the lottery. Thought the development conference “and I have no melon”, the second day after work received a text message! I actually also in 😆!

instructions

I’m not personally interested in waiting in line to experience Google’s dark tech, and I didn’t take my camera with me on this trip. If you want to get a better sense of the new and interesting conference experience, I recommend you close this article and check out the Vlog on Bilibili, like this video; However, if you’re a new front end engineer like me, you don’t have a lot of background and hands-on skills on the Web front end. I’ll share with you some of my own.

Due to my limited level, if there are omissions and mistakes, please forgive me, very welcome questions and suggestions!

Anterior dao and surgery

Web: Standards and apis are evolving iteratively

What is a Web API

There are two broad categories of Web apis: browser apis and third-party apis. We are only talking about the browser API here. Here is an introduction from MDN:

The browser API is built into the Web browser and can extract data from the browser and computer environment and use it to do complex things that are useful. For example, the Geolocation API provides some simple JavaScript structures to get location data, so you can tag your location on Google Maps. Behind the scenes, the browser does use some complex low-level code (such as C++) to communicate with the device’s GPS hardware (or whatever it is that can determine location data) to retrieve location data and return it to your code using the browser environment; However, this complexity is abstracted through the API and therefore irrelevant to you.

It’s a complicated explanation, right? So for a simple example, if you know anything about the front end, you’re familiar with the console.log() method, which is a Web API that outputs content to the browser console.

Baidu called this API in their home page code

By the way, the vast majority of documentation on MDN is very helpful to front-end engineers, although occasionally cumbersome. If you’re stuck using a search engine and still don’t know what to do, try MDN’s documentation. You might be surprised.

You can see more information about the console.log API on MDN

At the conference, Thomas Steiner gave a talk on “Implementing New Features for the Web”, which mentioned a number of apis that Google is pushing and implementing: Examples include file system access, contact information selectors (which allow users to selectively share contact information), idle state detection, serial and HID device access, and so on.

New Web standards and new Web APIs

As I listened to the talk, I thought about a question I often neglect: how do new apis come about? How to make sure that Chrome is compatible with other browsers?

This brings us to two organizations: W3C and WHATWG. The W3C, the World Wide Web Consortium, is the group that sets Internet standards. If you’re interested in the news that the WHATWG, an open source community composed mainly of employees from browser manufacturers (Google, Opera, Mozilla, Apple), has recently become the de facto standard setters for HTML and DOM, read this article.

xkcd #927

Most people, like me, might have a misconception: the W3C and WHATWG create new standards, and then the major browser vendors implement apis. In fact, however, the W3C and WHATWG don’t work that way; Lea Verou’s CSS Unmasked introduces W3C (and if you’re interested in the W3C workflow, you can also listen to Lea Verou’s talk) :

The W3C does not “produce” standards. In effect, it acts as a forum: the W3C works as a working group to bring together the various parties involved in a particular technology to produce standards. Of course, the W3C isn’t just an observer: it sets the rules for the entire platform and oversees the process. But these technical specifications are (mostly) not written by W3C staff.

In short, each specific standard is completed by a specific working Group; Working groups set the standards; Most members of the Working Group are from W3C member companies (such as Google). In addition to working groups, there are Interest groups and Community groups, which I won’t cover here

Inside Google, the Project to develop new features for the Web is called Project Fugu, and mentioned in the talk are things like Web Bluetooth and the native file system API, as well as the tiny Badging API. These non-standardized apis have been implemented in Chrome, and reports have been produced through the W3C’s Web Platform Incubator Community Group (WICG). The Developer conference itself is a good time to promote apis, and only when more developers learn about and use them will these apis mature faster and lead to new Web standards.

Chances are you’ve never used any of these apis, since you’re unlikely to use them at work. But that doesn’t stop us from installing the latest version of Chrome ourselves, looking for a Demo on Github or building a toy project to try out the latest apis. Even better, if you can explore an API in depth. In the near future, when the new API is widely implemented in browsers and widely used in production environments, who knows if developers will use your NPM package 😊?

API implementation and compatibility

With Web standards and browser apis constantly being updated, the average Web developer is concerned with knowing what API support is and whether an API can be used in a production environment. I generally use MDN and caniuse.com. Recent good news: Caniuse references MDN data. Caniuse + MDN, front-end engineer double happiness 😒!

In addition, if you find that an API is not implemented in a browser; You can also make Feature requests to the browser maintainer. Like this one submitted at bugs.webkit.org about implementing the clipboard API.

The real cause of this Feature Request: I asked the Google engineers why Webkit Safari doesn’t support the clipboard API 😂

Speaking with Paul Kinlan at the Web Booth, he mentioned Web-platform-tests, a w3C-led push for cross-browser tests that make browser projects implement standards more reliably based on tests. You can see the current statistics on wpt.fyi, which do not accurately reflect browser API support due to the unfinished test suite. What is certain, however, is that with these standardized tests, browser Web standards implementations are no longer unquantifiable black boxes, and CROSS-browser API compatibility issues will be a thing of the past.

Chrome Devtools: A great tool for front-end engineers

Kayce Basques gave a talk on “Building Great Websites Faster with Chrome DevTools”, which I personally felt was the most practical for daily development at the conference. As a front-end engineer, as if by the guidance of a superior person, further master the secret of martial arts, Chrome developer tools this magic tool to play a greater power.

Reading more documents is a better tool to use

There were a lot of features I already knew about; But there are a lot of features that I’m hearing for the first time, and the slide screenshots from the talk below are just a few examples. Don’t be surprised if you already know some of them, or even use them regularly, because that’s my personal blind spot. The presentation is very informative, possibly covering dozens of feature points and tips, and it is highly recommended to watch the entire presentation once.

It doesn’t matter if you forget the name of the CSS property, as long as you remember the property itself, you can automatically complete the CSS.

Not only can you take screenshots with your browser, but you can also take screenshots of specific DOM nodes.

You can also call these methods in addition to console.log.

Speaking of debuggers; I started with console.log(), but as I learned about debugger interruption points, my use of console.log decreased dramatically. A Debugger breakpoint is just a way of breaking points. There are seven different breakpoints described in Google’s official notes, which can be summarized and shared by the Chinese developer community.

Next, I’ll use an example to show one of these seven ways to debug breakpoints. It’s pretty obscure, it’s not even covered in detail in Google’s documentation (it’s listed in the shortcut list), but it does a lot of work this time.

Debug CSS with Devtools with Google engineers

At the Web booth, a programming girl asked Kayce a question, and I watched for a while and joined the discussion. After some research, we still couldn’t solve it; Kayce even left her email address to study later. We were talking about something else when Kayce suddenly changed the subject and said, “I just got an idea.” She easily solved the problem with a breakpoint.

Now let’s take a look at the problem: this is a Javascript drop-down selection box that is highlighted blue as the mouse moves over the option.

Using Devtools to examine the element, it is shown that the color is highlighted by adding the highlighted class

Now we want to change the highlighted color, so we are going to add a class selector.highlighted; Configure a background-color property to ensure priority. The important modifier looks something like this:

However, the color of the float option has not changed!

If you’re familiar with CSS background properties, you’ve probably guessed why the background color doesn’t change; However, at that time, we all missed a detail, did not think of the problem here.

Before it’s time for the magic breakpoint to appear, let’s use a GIF to illustrate why we can’t use highlighted class directly in the properties pane to change highlighted class, instead of adding a primary class with the same name manually for CSS overriding.

Click away, highlighted class disappears; Specifying element state is just specifying CSS pseudo-classes, which doesn’t work here either.

In the Sources TAB, there is a row of debug buttons, and we will use the first button to pause the script execution.

Moving the mouse over the first pause button will prompt its shortcut keys F8 / Command + B (MacOS)

Because the mouse is turned away on highlighted message disappears, we must use the shortcut key. After opening the drop-down box and pressing the pause shortcut, we can easily switch back to the Elements TAB for further debugging. Click on the corresponding element to see why background-color doesn’t work: highlighted class uses the background-image attribute.

After unchecking the other affected properties, the background-color: red we set earlier takes effect!

I don’t think the problem itself is complicated, CSS background knowledge is not difficult, it’s all in the documentation; However, the whole debugging idea and the use of shortcut keys to pause the script operation, requires a certain amount of experience and inspiration to complete. I think this is an interesting example of debugging CSS. If you want to try it out for yourself, you can visit its online address here.

conclusion

There’s a lot more going on at the front of the conference, including several presentations on Flutter, Google’s recent initiative, and PWA. When I conceived this article, I intended to go through it all; But I found that the content has been a little too much, all join instead of the United States. Besides, I’ve never used any of these techniques, so I’d rather downsize them than make a fool of myself. I hope I can use these technologies in the future. Maybe next year we’ll be able to introduce the technology with more confidence! (Flag++ 🤣)

Hope you found this article helpful and thank you for reading!