Becoming a Google Certified Mobile Web Specialist

Here are the notes I made while while preparing for google certification of mobile web specialist. These are mostly high level pointers which serves as a quick revision of in-depth concepts.

Study Guide was extremely useful as well as the Codelab exercises and MDN docs.

Basic Website Layout and Styling

1. Set the visual viewport, width property controls the size of the viewport, initial-scale controls the zoom level on first load.
   It instructs the page to match the screen's width in device-independent pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.

<meta name="viewport" content="width=device-width, initial-scale=1" />

2. Forcing the user to scroll horizontally or to zoom out in order to see the whole page results in a poor user experience.
3. Do not use large fixed width elements.
4. Use CSS media queries to apply different styling for small and large screens.
5. Use <picture> and <source> while dealing with responsive images.
6. Use :hover, :focus, :active to give some interaction to users.
7. Use outline CSS property to display a ring around an element when an element is focussed.
8. Example of a proper <video> tag.

<video controls width="400" height="400" autoplay loop muted poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" />
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

9. Specify start and end times for a video

<source src="video/chrome.webm#t=5,10" type="video/webm" />

10. Restarting media playback by calling the element's load() method.

const mediaElem = document.getElementById("my-media-element")}}
mediaElem.load();

11. Classic readability theory suggests that an ideal column should contain 70 to 80 characters per line (about 8 to 10 words in English).

Front End Networking

Fetch api

1. Basic syntax is as follows

fetch(url)
  .then((r) => r.json())
  .then((data) => console.log(data))
  .catch((e) => console.log('Booo'))

;(async () => {
  try {
    const response = await fetch(url)
    const data = await response.json()
    console.log(data)
  } catch (e) {
    console.log('Booo')
  }
})()

2. No CORS mode

fetch('//google.com', {
  mode: 'no-cors',
}).then((response) => console.log(response.type))

3. Response.body is a readable stream which can be read by these readers. These are true stream readers which drains the stream. Hence response.clone() is used to avoid draining the original stream.

   1. json()
   2. blob()
   3. arrayBuffer()
   4. formData()
   5. text()

Simple POST request is as follows

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'Title of post',
    body: 'Post Body',
  }),
})
  .then((res) => {
    if (!response.ok) throw Error(response.statusText)
    return response.json()
  })
  .then((data) => console.log(data))
  .catch((error) => console.log(error))

4. Adding Credentials to our request.
   • credentials: 'include' will always add credentials even if it is a cross origin request.
   • credentials: 'same-origin' will add credentials only if it is same origin.
   • credentials: 'omit' will ensure browser do not include credentials in request.

fetch('https://example.com', {
  credentials: 'include',
})

5. Uploading single file.

const formData = new FormData()
const fileField = document.querySelector("input[type='file']")
formData.append('avatar', fileField.files[0])

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData,
}).then((response) => response.json())

6. Uploading multiple files

const formData = new FormData()
const photos = document.querySelector("input[type='file'][multiple]")

formData.append('title', 'My Vegas Vacation')
for (var i = 0; i < photos.files.length; i++) {
  formData.append('photos', photos.files[i])
}

fetch('https://example.com/posts', {
  method: 'POST',
  body: formData,
}).then((response) => response.json())

Accessibility

General accessibility guidelines

• Add alt text for images.
• Add <tracks> inside <video>.
• Ensure your page is accessible by not disabling user scaling.
• Use title attribute for icon buttons with no text.

Use of skip links to bypass navbar and asides

When there are blocks of content which is repeated across all the pages. For eg.