<meta name="viewport" content="width=device-width, initial-scale=1">
##I'm Mobile Friendly##
20 min
Let's go back to last week's lab that we developed on Friday. Using media queries, make the page more mobile friendly by removing fixed widths, and applying appropriate font styling depending on the viewport size.
Attribute | Example |
---|---|
min-width | min-width: 640px |
max-width | max-width: 640px |
###Responsive Web Design Patterns###
Let's spend some time experimenting with all the different responsive web design patterns we have available to us. There are different resources on the web for finding them, but here's a nice list:
https://bradfrost.github.io/this-is-responsive/patterns.html
- Spend a few minutes glancing through some of these and play around with them in the Chrome mobile emulator.
- Choose one you want to work with, and slightly adjust the percentage values to see how it adjusts in the browser now.
- Integrate 2 responsive images within the layout.
Pair exercise - 15 min
Ivan is a postal worker who can travel at the speed of light. He's happy to relay thousands of messages per second between you and a friend. However, he can only transport one message at a time, and it has to fit on an index card.
Unfortunately Ivan is incredibly inattentive, so there are a few minor limitations in his service:
- Integrity: He cannot guarantee that all messages will arrive in their entirety
- Order: He cannot guarantee delivered messages will arrive in the same order that they were sent
IP packets are composed of a header and payload. The IPv4 packet header consists of:
- 4 bits that contain the version, that specifies if it's an IPv4 or IPv6 packet,
- 4 bits that contain the Internet Header Length, which is the length of the header in multiples of 4 bytes (e.g., 5 means 20 bytes).
- 8 bits that contain the Type of Service, also referred to as Quality of Service (QoS), which describes what priority the packet should have,
- 16 bits that contain the length of the packet in bytes,
- 16 bits that contain an identification tag to help reconstruct the packet from several fragments,
- 3 bits. The first contains a zero, followed by a flag that says whether the packet is allowed to be fragmented or not (DF: Don't fragment), and a flag to state whether more fragments of a packet follow (MF: More Fragments)
Search for your some REST API's from some of your favorite websites. Note the kind of access you have to the data and the HTTP methods you use to access that data.
Examples:
Let's practice using some HTTP methods on some public REST API's. When accessing these API's, take note of the request and response headers being sent, as well as the response codes.
Use one of the following:
- https://www.hurl.it
- Download a REST client of your choice (e.g. https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo )