ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

view port

%e7%84%a1%e9%a1%8c

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

initial-scale indicate relationship between device independent pixel and css pixel.

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

prevent image overflow content

img, embed, object, video {
  max-width: 100%
}

example

<img id="owl">
#owl {
 width: 640px;
 max-width: 100%;
}

CSS/Properties
https://www.w3.org/community/webed/wiki/CSS/Properties

nav a, button {
min-width: 48px;
max-height: 48px;
}

device pixel ratio:デバイス・ピクセルとCSSピクセルの比率のこと
The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution.

device pixel / hardware pixel: デバイス・端末がサポートする物理的な最小単位のピクセル。ハードウェア・ピクセルともいう。

CSS pixel:CSSで使う論理上のピクセル。デバイス・ピクセルが物理的なピクセルの数であるのに対し、CSSピクセルは論理上のピクセルの数です。
CSS properties take “length” values, such as width, margin, padding, font-size, border-width, etc.Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.For some CSS properties, negative lengths are allowed.
There are two types of length units: relative and absolute.

User agent：利用者があるプロトコルに基づいてデータを利用する際に用いるソフトウェアまたはハードウェアのこと。特にHTTPを用いてWorld Wide Webにアクセスする、ウェブブラウザなどのソフトウェアのこと。
In computing, a user agent is software (a software agent) that is acting on behalf of a user. One common use of the term refers to a web browser telling a web site information about the browser and operating system.

Example:Mozilla/5.0 (Linux; Android 5.0; Nexus 6 Build/XXX00x) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.59 Mobile Safari/537.36

Google dev tool remote debugging
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Hardware Pixel and Device Independent Pixel

With font boosting and without font boosting

ViewPortとは：「表示領域」
スケールは1、等倍で表示される
ポートレート表示時の幅は320px
ランドスケープ表示時の幅は480px以上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="...">
<title>title here</title>
...
</head>
<body>
...

1920 x 1980 px
DPR = 2
maximum width of a viewport is 960px

function

var amy = {loc:1};
move(amy);
var ben = {loc:9};
move(ven);

var move = function(car){
	car.loc++;
};

object create

var gold = {a:1};
var blue = extend({}, gold);
var rose = Object.create(gold);
gold.z = 3
log(blue.z); //undefined
log(rose.z); //3

var = {}
this indicate in memory variable.

google map api

https://developers.google.com/maps/documentation/geocoding/get-api-key

import httplib2
import json

def getGeocodeLocation(inputString):
	google_api_key = "your_key"
	locationString = inputString.replace(" ", "+")
	url = ('https://maps.googleapis.com/maps/api/geocode/json?address=%s&key=%s'% (
		locationString, google_api_key))
	h = httplib2.Http()
	response, content = h.request(url, 'GET')
	result = json.loads(content)

	latitude = result['result'][0]['geometry']['location']['lat']
	longitude = result['result'][0]['geometry']['location']['lng']
	return(latitude,longitude)

flask

from flask import Flask
app = Flask(__name__)

def puppyFunction():
	return "Yes, puppies!"

def puppiesFunction(id)
	return "This method will act on the puppy with id %s" % id

if __name__ == '__main__':
	app.debug = True
	app.run(host='0.0.0.0', port=5000)

from sqlalchemy import Column, Integer, String
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import relationship, sessionmaker
from sqlalchemy import create_engine
from passlib.apps import custom_app_context as pwd_context

Base = declarative_base()

class User(Base):
	__tablename__ = 'user'
	id = Column(Integer, primary_key=True)
	username = Column(String(32), index=True)
	password_hash = Column(String(64))

engine = create_engine('sqlite:///users.db')

port:5000 python server

#THIS IS A WEBSERVER FOR DEMONSTRATING THE TYPES OF RESPONSES WE SEE FROM AN API ENDPOINT
from flask import Flask
app = Flask(__name__)

#GET REQUEST

@app.route('/readHello')
def getRequestHello():
	return "Hi, I got your GET Request!"

#POST REQUEST
@app.route('/createHello', methods = ['POST'])
def postRequestHello():
	return "I see you sent a POST message :-)"
#UPDATE REQUEST
@app.route('/updateHello', methods = ['PUT'])
def updateRequestHello():
	return "Sending Hello on an PUT request!"

#DELETE REQUEST
@app.route('/deleteHello', methods = ['DELETE'])
def deleteRequestHello():
	return "Deleting your hard drive.....haha just kidding! I received a DELETE request!"

if __name__ == '__main__':
    app.debug = True
    app.run(host='0.0.0.0', port=5000)

cashe is a hashtable
basic cache algorithm is below

import time

def complex_computation(a, b):
    time.sleep(.5)
    return a + b

cache = {}
def cached_computation(a, b):
    key = (a, b)
    if key in cache:
        r = cache[key]
    else:
        r = complex_computation(a, b)
        cache[key] = r
    return r

start_time = time.time()
print cached_computation(5, 3)
print "the first computation took %f second" % (time.time() - start_time)

when db query can be cashed in serverside as dictionary like below.

CACHE = {}
def top_arts();
        key = 'top'
        if key in CACHE:
            arts = CHACHE[key]
        else:
            loggin.error("DB QUERY")
            art = db.GqlQuery("SELECT * From Art "
                            "WHERE ancestor is :1"
                            "ORDER BY DESC")

        arts = list(arts)
        CACHE[key] = arts
    return arts

when posted, cache cleared.

CACHE = {}
def top_arts(update = False);
        key = 'top'
        if not update and key in CACHE:
            arts = CHACHE[key]
        else:
            loggin.error("DB QUERY")
            art = db.GqlQuery("SELECT * From Art "
                            "WHERE ancestor is :1"
                            "ORDER BY DESC")

        arts = list(arts)
        CACHE[key] = arts
    return arts

DB read should be only submission.
loadbalancer also can handle large traffic.

load balancere

n = -1
def get_server():
    global n
    n += 1
    return SERVERS[n % len(SERVERS)]

handler, url mapping DBmodel

parsing

>>> import urllib2
>>> import urllib
>>> p = urllib2.urlopen("http://www.google.com")
>>> p
>
>>> c = p.read()
>>> dir(p)
['__doc__', '__init__', '__iter__', '__module__', '__repr__', 'close', 'code', 'fileno', 'fp', 'getcode', 'geturl', 'headers', 'info', 'msg', 'next', 'read', 'readline', 'readlines', 'url']
>>> p.url
'http://www.google.co.jp/?gfe_rd=cr&ei=MtZkWNDXDYSL8QeD46cY'
>>> p.headers

>>> p.headers.items()
[('x-xss-protection', '1; mode=block'), ('set-cookie', 'NID=93=O65u9flBWzM92U9MzcezfIXaeG9itO-ala3ogt6T7fipovY5ily4QBNUxbUbsVga_hYeJEKWDq891mFaPgZm2Ya_1gvUZm37K2pNfFpOUVxCptVtOSAn3OXvUHCzKBaC; expires=Fri, 30-Jun-2017 09:24:02 GMT; path=/; domain=.google.co.jp; HttpOnly'), ('accept-ranges', 'none'), ('expires', '-1'), ('vary', 'Accept-Encoding'), ('server', 'gws'), ('connection', 'close'), ('cache-control', 'private, max-age=0'), ('date', 'Thu, 29 Dec 2016 09:24:02 GMT'), ('p3p', 'CP="This is not a P3P policy! See https://www.google.com/support/accounts/answer/151657?hl=en for more info."'), ('content-type', 'text/html; charset=Shift_JIS'), ('x-frame-options', 'SAMEORIGIN')]
>>> p.headers['content-type']
'text/html; charset=Shift_JIS'

>>> s = = urllib2.urlopen("http://www.example.com")
SyntaxError: invalid syntax
>>> s = urllib2.urlopen("http://www.example.com")
>>> s.url
'http://www.example.com'
>>> s.headers.items()
[('content-length', '1270'), ('x-ec-custom-error', '1'), ('x-cache', 'HIT'), ('expires', 'Thu, 05 Jan 2017 09:28:12 GMT'), ('vary', 'Accept-Encoding'), ('server', 'ECS (rhv/818F)'), ('last-modified', 'Fri, 09 Aug 2013 23:54:35 GMT'), ('connection', 'close'), ('etag', '"359670651+gzip+ident"'), ('cache-control', 'max-age=604800'), ('date', 'Thu, 29 Dec 2016 09:28:12 GMT'), ('content-type', 'text/html')]

parsing xml
from xml.com import minidom

json

>>> import json
>>> j = '{"one": 1, "numbers": [1,2,3.5]}'
>>> json.loads(j)
{u'numbers': [1, 2, 3.5], u'one': 1}

def total_ups():
    j = json.loads(reddit_front)
    sum(c['data']['ups'] for c in j['data']['children'])

host ip info
host ip info

IP_URL = "http://api.hostip.info/?ip="
def get_coords(ip):
    url = IP_URL + ip
    content = None
    content = urllib2.urlopen(url).read()
    except URLError:
        return
    if content:
        d = minidom.parseString(content)
        coords = d.getElementByTagName("gml:coordinates")
        if coords and coords[0].childNodes[0].nodeValue:
            lon, lat = coords[0].childNodes[0].nodeValue.split(',')
            return db.GetPt(lat, lon)

Gmap

GMAPS_URL = ""

def gmap_img(points):
    markers = '&'.join('makers=%s,%s' % (p.lat, p.lon)
        for p in points)
    return GMAPS_URL + markers

print gmaps_img([Point])

view port

Device Pixel Ratio

function

object create

google map api

port:5000 python server

foursquare

oauth

Caching

parsing