A guide to Google's web tools

[Rss Bot 1]

Big G, aka Google, provides developers a plethora of tools intended to make web design easy. In this article, we go through some of the best Google tools out there, and show you how to use them in your web design and development workflow.

We're covering a range of different web design tools here, so we've split the content into pages to make it easier to navigate. Use the dropdown menu above to jump to the section you're interested in.

As long as websites are unminified, their content can be viewed by anyone. Chrome’s DevTools make this simple – on this page, we show you how to view and change HTML, CSS and JavaScript. On page 2, we take a closer look at how to use Google's debugger to fix coding errors quickly and easily. Page 3 puts the spotlight on Google's Device Mode, which you can use to test the mobile versions of your pages via your desktop machine. On page 4 we introduce the basics you need to be aware to start implementing Material Design principles in your designs. Finally, page 5 looks at Progressive Web Apps, the latest big thing in the web design industry. 

View and change HTML, CSS & JS

As long as a website's code hasn't been minified, it can be viewed by anyone using Chrome’s developer tools. First of all, check the version of Chrome – the following steps work on version 70.0.3538.67 running on a 64-bit Ubuntu workstation. Next, open the hamburger menu and click More Tools > Developer Tools. 

Launch the Developer Tools and you should see a screen similar to this [click the icon in the top right to enlarge]

The browser responds by opening a pane on the left-hand side of your screen. It should be resized in the first step – by default, the browser doesn’t assign enough screen real estate. When done, the screen looks similar to the one shown in the image above.

By default, Developer Tools starts up with the Console tab loaded. It contains the output emitted by invocations of the console-logging function. Rendering errors also show up there – if you find red lines, something is amiss in the markup or the code of your page. A click on the little ‘URL’ on the right-hand side brings you to the line, which caused the message to show up.

Inspect the markup

If your interest focuses on markup, use the Elements tab shown in the figure. It shows the markup the browser currently renders. You can expand and compact it in a fashion similar to a tree view – hide unneeded elements to prevent sensory overload.

The raison d’etre of the tab is the display of the CSS structure. Widgets ‘collect’ CSS from various sources, which are displayed neatly and next to one another. In the case of the example shown in the figure, we see that styles were provided from both the ‘div’ tag and the ‘main’ markup of the page.

Chrome lets you edit most attributes on the fly. Double-click any of the black texts to transform the label into an editor, then enter the newly desired value and press the Return key. The renderer picks up these changes and applies them to the DOM on the fly. This is especially useful when trying to optimise colours or placement issues; having to reload a page to preview changes becomes tiresome.

A yellow background indicates the window's contents is subject to filtering [click the icon in the top right to enlarge]

Finally, take a look at the text box on top of the pane. It enables you to filter the markup items shown: for example, enter ‘mdc’ to limit the view to all styles inherited from the Material Design library used later in this article. When a filter is active, a yellow background shows up in a fashion similar to the one shown above.

Perform a detailed analysis

In modern web browsers, the DOM is not limited to ‘statical’ presentation issues. It also governs event flow and placement. Switch to the Computed tab to reveal a list of ‘dimensional’ properties. This is incredibly useful when arranging widgets on the screen in an exact fashion.

Moving to the Event Listeners tab provides an overview of event flows. Use this feature to quickly weed out problems related to user interaction: if an event does not trigger, start out by checking the event handler connections.

Finally, the Properties window lets you take a look at the attributes stored inside the individual DOM nodes. If you’ve ever spent a lot of time hunting down DOM-manipulating code, the value is clear.

Next page: How to use Google's Debugger

In the good old days, developers debugged by emitting messages to the command line. The introduction of dedicated debuggers accelerated the error-finding process.

Debugger work centres around breakpoints. They act as an entry point into the debugging session – if code hits them, its execution pauses. The easiest way to add a breakpoint involves the Sources tab, where you click the margin to add a blue rhomboid.

This breakpoint takes a conditional string – Chrome will evaluate it before deciding whether to pause program execution [click the icon in the top right to enlarge]

When the relevant line is hit, a yellow insert pops up over the rendered view. Furthermore, the debugger window populates with various bits of information about the current ‘context’. Moving your mouse over any variable opens a pop-up window similar to the one shown in the figure. If the element in question is an object, a tree view will appear instead. It enables you to drill down into the individual variables.

Global variables show up in the Scope node. Click it and be prepared to wait for a second or two. Its population cannot be accomplished instantaneously due to the number of elements, using the Filter textbox at the top of the screen is highly recommended for usability.

As populating the entire state tree is slow, some fields get shown as (…) instead. Double-click any one of these attributes to load its value on the fly. Finally, use the call tree to find out where you are. It lists the methods called to arrive at the execution position.

Advanced execution

Placing breakpoints all over the place is inefficient. Analyse the flow of a variable by clicking the three step-over buttons next to the blue Play button. They enable you to run a single line or return from a function while keeping the debugger active during the process. This is helpful when hunting down value changes as an algorithm does its work.

Another neat trick involves the use of conditional breakpoints. Chrome supports half a dozen of them, the table below describes them.

Chrome’s debugger provides ‘thinking’ breakpoints [click the icon in the top right to enlarge]

Setting these is done outside of the debugger. In the case of the DOM tree, for example, a node must be selected in the Element view. You can then specify that a debugging session must launch whenever the content of this node changes.

Letting your mouse pointer rest over a variable reveals its contents in a small pop-up window [click the icon in the top right to enlarge]

Just like with modern oscilloscopes, providing an overview of all trigger modes would require a book of its own. Let us, thus, end this little trip with a reference to developers.google.com/web/tools/chrome-devtools/javascript/breakpoints – it provides an excellent overview of the possibilities.

Resources

14 JavaScript debugging tips you probably didn't know
Finding errors in code is both an art and a science. The folks at RayGun have compiled a set of methods, tools and approaches intended to help you find hard-to-track issues in JavaScript applications. Create scrollable elements which have defined regions that should snap into view. Those larger than the viewport are handled automatically.

Debugging javascript cheat card
Like most other scientific endeavours, a few ‘best practices’ have arisen over time. The reference card from dzone.com might have an extremely annoying layout, but it does provide an overview of interesting aspects.

Chrome DevTools reference
Chrome’s debugger contains dozens of additional features that we don’t have room to cover in this tutorial. Seasoned web developers are advised to take a look at Google’s official documentation – some of the functionality tends to be a real timesaver.

WebStorm
Sometimes, Chrome’s developer tools simply don’t offer what you might be looking for. If that is the case, you can give a dedicated product like WebStorm a chance. Its debuggers tend to analyse the entire project structure, leading to even more advanced analytical capabilities.

Next page: Working with Device Mode

While complete emulation of mobile devices on Chrome is impossible, Device Mode does make your life easier. First of all, click the little smartphone pictogram shown in the top-left corner of the Developer Tools screen. Chrome will adapt the view in a fashion similar to the one shown in the figure.

The combo boxes at the top of the screen enable you to pick various commonly used devices ranging from the old Samsung Galaxy S5 to more recent products such as the iPhone X. Bear in mind that this feature does not switch the actual rendering engine. The browser does its magic purely by adjusting viewport co-ordinates. This limitation also applies to screen rotation, which you enable via the Rotate pictogram in the toolbar.

Mobile apps usually use sensor data. Chrome can emulate these – open the Developer Tools hamburger menu. Next, select More Tools > Sensors. The Console window takes up an additional pane with sensor settings. They provide access to geolocation, accelerometer and advanced touch input. 

For completeness sake, let us reiterate that desktop tests can’t replace ‘acceptance runs’ on a handset. Mobile applications live and die by their haptics, which are completely different from those found on a PC.

As of this writing, Google has not ‘unified’ the various aspects of device mode. The various functions (described in detail here) might get a new user interface in the future – stay tuned for small changes in this regard.

What is console?

Simply sending out logging information via console.log reeks of the 1990s. Why not use some advanced features instead? One of the defining features of Android is LogCat – developers can emit logging messages with various levels of severity. Chrome also supports this feature. Simply use one of the following methods:

Chrome’s console is not limited to displaying information. You can also interact with the content of your website in a fashion not dissimilar to PowerShell or BASH. When working on code, be careful to look at the combo box at the top of the screen.

It let’s you select where JavaScript will run – many types of content live in their own iframe. They cannot be reached by code entered into the top execution context. Once the right execution area is selected, changing the content of elements is as easy as entering a single command:

Chrome’s console tends to flood once projects get complex. This is addressed by collating similar messages. Click a button five times, and emit the same message each time – it will show up once. Disable this by opening Settings > General. Then, check the Show Timestamps option. Alternatively, introduce tags and use the Filter feature.

Advanced analysis

Finding coding errors is but part of the game. As applications become more complex, memory, performance and network consumption problems arise. Chrome assists you in addressing these problems, thanks to a complete set of advanced analysis features for tracking down performance problems. 

The browser provides analysers not dissimilar to profilers found in embedded operating systems. For example, the memory analyser provides an overview of which part of your code allocates memory. This information enables targeted optimisations; ‘hacking away’ at code tends to be unproductive. 

Opening the Performance tab lets you slow down both Network and CPU – this way, your workstation simulates slower computers. Combine this with the time-consumption analysis shown in the figure accompanying this step to get a 360-degree view of application performance. There's plenty more to learn about this subject, and this overview provides an excellent introduction to advanced debugging functionalities.

Next page: Get started with Material Design

Google’s Material Design was initially seen as another tiresome redesign of the GUI stack. But, as time went by, users started to embrace the typography-centric design approach. Technologies like Progressive Web Apps required the presence of a JavaScript version. 

Given that JavaScript GUI stacks are pretty common, Google did not face a difficult task. The favourite way to include Material Design components involves npm. It’s not easy, though, which is why we’re starting out with a simple example.

01. Get started

Test framework functionality by adding a button to the body of the page:

Material Design components behave like most other JavaScript GUI stacks. Developers add widgets to the page, CSS classes ensure the decoration gets deployed. Finally, a JavaScript invocation enforces the attachment of event handlers.

02. Go full frame

Experienced developers only need one look at mdc.ripple.MDCRipple to see the source of the problem. The JavaScript and CSS files we included come out of a complex project. The sanest way involves loading the entire framework to your machine. 

First of all, obtain the toolchain and deploy it into a Node project:

The actual deployment of our modules takes place via WebPack. Open Package.json and add the following markup to set up the workflow:

WebPack controls itself via a file called webpack.config.js. Create it in the folder containing package.json – a full installation managing all features looks like this:

WebPack compile processes fail if missing input resources are detected [click the icon in the top right to enlarge]

WebPack transforms code by chasing it through a sequence of processors, each of which can take one or more parameters. In our case, both CSS and JavaScript items are to be processed. In theory, the WebPack stack is ready to run at this point – sadly, the compile process will fail due to missing input resources, as shown in the image above.

03. Add components

Now  the main workflow is set up, we can add the individual components needed to create our app. We want to build a small resistor calculator, which requires the loading of a group of widgets:

Google ‘beautifies’ the situation by breaking the framework into hundreds of packages. In the case of our text box, for example, multiple sub-elements need to be present. Sadly, the documentation does not tell you about this (see image below).

Click the icon in the top right to enlarge

In the next step, create the two ‘containers’, which act as inputs to the WebPack stack outlined above:

Finally, a dry run can take place. WebPack should now report that the compile process worked out:

04. Add widgets

WebPack eliminates ‘unneeded’ parts from the compiled output. Adding widgets starts out in app.scss, which must now look like this:

In principle, we need one include for each component our program plans to load. As both textbox and button come with a few colleagues, we need a total of four lines worth of includes. The ripple effect used before is even more complex – we will omit it for now.

Next, touch a file named index.html. It acts as the main entry point and must load the various script files emitted by the WebPack process:

Finally, create a file called app.js. At this point, re-enter npm run to verify that the configuration still works. WebPack emits an URL similar to http://localhost:8080. The packaged results can be downloaded via a server living in npm. Don’t forget, though, to restart the server after changing files, since WebPack does not pick up changes.

05. Create widgets

Now the server is running, return to index.html and replace the Hello World message with a bit of markup:

Just like in the case of our button, a text box also consists of a group of attributes. One of them displays a hint with information about what to enter, while the other one supports animation.

However, getting animations to work requires a change in app.js:

This snippet of code is interesting since it targets all three text boxes in one swipe – Google designed the API to sweep over entire CSS selectors in one go.

At this point, our program is ready to run – it will present itself like the figure. Finalising our little resistor calculator requires you to add JavaScript event listeners. After all, MDC components are but fancy HTML5 ones…

Our widgets are ready to receive input [click the icon in the top right to enlarge]

Integrating Material Design widgets into your application definitely takes a bit of work. But, the rewards are substantial and definitely worth the time. This is only the beginning. Be sure to check out the Material Design site for more tutorials, repos and information on what is available, as well as what can be done.

Material Design tools and resources

Material Theme Editor
Should you find yourself working on a Mac, take Theme Editor for a spin. This small but nifty program creates customised colour palettes, which you can use to change the look and feel of various Material Design-based systems. 

Icons 
Material Design differs from Metro in that it also allows for the use of small symbols. Google provides developers with ample choice – simply visit the URL to pick icons until your heart’s content. 

Color Tool 
This tool allows users to create, share, and apply colour palettes to a UI. Plus, it measures the accessibility level of any colour combination that you decide to put together. 

Next page: Get to grips with Progressive Web Apps

The web design industry moves in cycles. Progressive Web Apps (PWAs) are big news. Here are a few resources to guide you through them.

The PWA checklist

Load ‘smoothly’
Native apps were lauded for their swift and nimble response to user input. Use single-page applications and status bars to replicate this experience on your PWA.

Provide metadata
Users can (and should) add PWAs to their devices’ start screens. This requires the presence of a metadata file, whose contents regulate the presentation of content.

Allow deep links
PWAs differ from native apps due to their more expanded ‘social’ features. One neat aspect involves ‘deep links’, which enable users to share parts of the application with friends and colleagues.

Analyse with LightHouse

Space constraints prevent us from providing a complete list of all PWA to-do items. LightHouse automates the checklists for you. It happily runs from the shell, from Node.js or from the Chrome Developer Tools.

Use HTTPs
Ideally pwas must be served over HTTPS. This prevents annoying man-in-the- middle attacks, which happen frequently on public Wi-Fi networks.

What about AMP?

AMPs – short for Accelerated Mobile Pages – is a completely different technology with a similar set of goals. While PWAs create rich user experiences, an AMP is a snippet of JavaScript-based content intended to show up in search results.

In principle, AMPs live off a subset of HTML, which contains expansions intended to accelerate rendering. For example, an AMP image contains additional properties. They let the rendering process complete before the actual image file is available. JavaScript is run by a dedicated library enforcing multithreading in a fashion not dissimilar to the one seen on the Metro platform. Finally, an optional CDN caching system by Google ensures that content gets delivered with minimal delay.

Implementing AMPs does bring benefits in mobile search rankings – if your site is SEO-dependant, investing some effort might pay off.

What is Firebase?

While providing storage, initially, is not a problem, fast website growth usually leads to scaling problems. Fortunately, deploying Google’s Firebase storage service is a quick way to work around the problem. In addition, Google also provides market-leading authentication, cloud messaging and real-time data management solutions.

Deploying Google’s authentication service is beneficial in that it unburdens end users: instead of having to remember multiple user accounts for each site, a Google or Facebook account can be used in a cross-service fashion. Google can also take care of phone number verification and similar problems for a modest fee. 

The well-known cloud messaging feature should not be new to Android-experienced developers: the API can also be accessed from the web, thereby providing a degree of feature parity to PWAs. Getting started with Firebase in JavaScript is not difficult – this article shows you how to add Firebase to your JS project.

This article was originally published in creative web design magazine Web Designer. Buy issue 281 or subscribe.

Read more:

• Google launches free drawing app
• 17 top tools in Google Analytics
• Build cross-platform mobile apps with Google's Flutter

View the full article