Mobile Web Development Notes from Google Udacity

1.Chrome Developer Tools:

DOM Inspector

CSS/JavaScript Live update

Network: HTTP requests and responses

Profiles: Record JavaScript object allocations to detect memory leaks

Mobile devices emulator

 2.Mobile UI and Viewport

Mobile First Design

Fixed width problem set viewport: width=device-width

Mobile app specific meta data

font-size: vw/vh

3.Fluid Design


Bootstrap CSS

Responsive Design:adapting to different devices use media queries

 4. Media Queries

@media  CSS3


@media only screen and (min-device-width:768px) and (max-device-width:1024px)

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape)

 5.Responsive Images

Image rendering in different screens: as beautiful as it is using minimal  bandwidth


Use Icon Font

Use Canvas

CSS gradient, borders, etc

Cheat: Use high quality but highly compressed image

 Server side to sniff client side to send correct definition image

Client side to request correct definition image

Use device-pixel-ratio


background-image: image-set();

 Helper tool Picturefill:

 7.Optimizing Web Performance

See Yahoo YSLOW.

 8.Touch event

Both mobile and desktop

Don’t :hover

Don’t disable mouse support

Do use large hit target

Don’t detect ontouchstart

Fix click delay, i.e. quick twice click for zoom: -user-scalable=no, but can’t scale view

Support touch directly

Two touches spontaneously: add id

IE: Pointer Events



color, date, datetime, datetime-local,email,month,number,range,search,tel,time,url,week

This will trigger different keyboard in mobile device.

pattern = “regex” for simple client side validation, all input in form must validate in server side.

10.Device Access


Sensors in mobile







 11.Offline and Storage detection is not stable

Client cache

Server cache

AppCache vs HTTP cache

Cache manifest




Razor Syntax Samples

Implicit Code Expression

Code expressions are evaluated and written to the response. This is typically how you display a value in a view:


Code expressions in Razor are always HTML encoded.

Explicit Code Expression

Code expressions are evaluated and written to the response. This is typically how you display a value in a view:

<span>1 + 2 = @(1 + 2)</span>

Unencoded Code Expression

In some cases, you need to explicitly render some value that should not be HTML encoded. You can use the Html.Raw method to ensure that the value is not encoded.


Code Block

Unlike code expressions, which are evaluated and outputted to the response, blocks of code are simply sections of code that are executed. They are useful for declaring variables that you might need to use later.


int x = 123;

string y = “because.”;


Combining Text and Markup

This example shows what intermixing text and markup looks like using Razor.

@foreach (var item in items) {

<span>Item @item.Name.</span>


Mixing Code and Plain Text

Razor looks for the beginning of a tag to determine when to transition from code to markup.

However, sometimes you want to output plain text immediately after a code block. For example, the following sample displays some plain text within a conditional block.

@if (showMessage) {

<text>This is plain text</text>



@if (showMessage) { @:This is plain text.


Note that two different ways exist for doing this with Razor. The first case uses the special <text> tag. The tag

itself is a special tag and is not written to the response; only its contents are written out. I personally like this approach because it makes logical sense to me. If I want to transition from code to markup, I use a tag.

Others prefer the second approach, which is a special syntax for switching from code back to plain text, though this approach works only for a single line of text at a time.

Escaping the Code Delimiter

As you saw earlier in this chapter, you can display @ by encoding it using @@. Alternatively, you always have the option to use HTML encoding:


The ASP.NET Twitter Handle is @aspnet


The ASP.NET Twitter Handle is @@aspnet

Server-Side Comment

Razor includes a nice syntax for commenting out a block of markup and code.


This is a multiline server side comment.

@if (showMessage) {



All of this is commented out.


Calling a Generic Method

Calling a generic method is really no different from calling an explicit code expression. Even so, many folks get tripped up when trying to call a generic method. The confusion comes from the fact that the code to call a generic method includes angle brackets. And as you’ve learned, angle brackets cause Razor to transition back to markup unless you wrap the whole expression in parentheses.



Layouts in Razor help maintain a consistent look and feel across multiple views in your application.

If you’re familiar with Web Forms, layouts serve the same purpose as master pages, but offer both a simpler syntax and greater flexibility.





GIT Workflow Basics

  1. Simplest Centralized Workflow
     Not preferred

    1. One origin master, all members clone from the remote master
    2. All members work on the local master
    3. All members need to first pull the remote master, and then rebase to push to the master
    4. Members manage conflicts in the 3rd step case by case
  2. Feature Branch Workflow

    1. One origin master, all members clone for the remote master
    2. All members create a new branch to work on locally, if necessary, push only one branch for each member to the remote server
    3. All members must merge the new branch with master to push
    4. Members manage conflicts in the 3rd step case by case


TODO task for learning ASP.NET MVC 5:

1. Consume ArcGIS REST API service in server side, i.e. generate token service for login

2. Customize login page and redirect, aka. routing issue

3. User registration module for application with SQL Express

4. Port ePlanner 2.0 to MVC and make it run

5. Write more using C#

Finish the book Professional ASP.NET MVC 5.


1. Make Yahoo! Web Service Rest API Call using C#

2. Using Secured Web Services and Tokens

string url = tokenServiceUrl + "?request=getToken&username=
myuser&password=secret"; System.Net.WebRequest request = System.Net.WebRequest.Create(url);

string myToken, errorMsg;
try {
   System.Net.WebResponse response = request.GetResponse();
   System.IO.Stream responseStream = response.GetResponseStream();
   System.IO.StreamReader readStream = new System.IO.StreamReader(responseStream);

   myToken = readStream.ReadToEnd();
catch (WebException we) {
   if (we.Message.Contains("403")
      errorMsg = "Server returned forbidden (403) code."

3. How to Customize ASP.NET MVC Authentication

4.ASP.NET MVC Authentication – Customizing Authentication and Authorization The Right Way

5.Sesseion Hijacking

6. Read Web.config data
in Web.config add:

<add key="customsetting1" value="Some text here"/>


			System.Configuration.Configuration rootWebConfig1 =
			if (rootWebConfig1.AppSettings.Settings.Count > 0)
				System.Configuration.KeyValueConfigurationElement customSetting = 
				if (customSetting != null)
					Console.WriteLine("customsetting1 application string = \"{0}\"", 
					Console.WriteLine("No customsetting1 application string");