css/Bootstrap/html Flashcards
Appannie only accepts requests from
https
the appannie api domain is
https://api.appannie.com/
Python: The requests library allows you to
connect to APIs
A site designed for testing API calls is
http://httpbin.org/
requests: r = requests.get(“http://httpbin.org/get”) returns a
response object
requests: To return the status code of a response object, type
r.status_code for the code
or
r.ok for a check on all of them
requests: To return the header of a response object, type
r.headers
or
r.headers.keys()
Python: Most APIs return
JSON data
requests: To return just one value from the header by passing in the key name, type
r.headers[“Key name”]
requests: To see the text of a response object, type
r.text
requests: To return the text of a response object in json format, type
r.json()
requests: To create an object through an API usually requires a
POST request and a payload of data.
requests: payloads are usually
dictionaries
eg,
payload = {“content”: “My string”, “user_id”: 1000}
requests: To create a post request, type
r = requests.post(“http://httpbin.org/”, params=payload)
API: A RESTful API request is fundamentally just
a url with parameters
requests: To send data in a payload where a key represents a list, type
payload = {list_name[]: [1000, 2000]}
requests: To send a delete request, type
r = requests.delete(“http://httpbin.org/delete”, params=payload)
requests: To see if your request was redirected, type
r.history
requests: To disallow redirects for a request, type
r = requests.get(“http://httpbin.org”, allow_redirects=False)
APIs usually do authentication through
public and private keys.
The two main type of authentication for websites (not APIs), use for authentication are
HTTPBasicAuth and HTTPDigestAuth
requests: to create a request with a HTTPBasicAuth, type
from requests.auth import HTTPBasicAuth
r = requests.get(“http://httpbin.org”, auth=HTTPBasicAuth(“username”, “password”))
requests: requests also support authentication through
oauth
json: To parse a list of dicts into a df, type
for x in r.json()["proposals"]:
df = df.append([[
x["costToComplete"],
x["freeShipping"],
x["gradeLevel"]["id"],
x["gradeLevel"]["name"]
]], ignore_index=True)requests: To authenticate with OAuth, type
from requests_oauthlib import OAuth1
auth = OAuth1(“YOUR_APP_KEY”, “YOUR_APP_SECRET”, “USER_OAUTH_TOKEN”, “USER_OAUTH_TOKEN_SECRET”)
r = requests.get(“http://endpoint.com”, auth=auth)
json: When parsing json, if you see a dictionary inside of a value, just
ignore the container key name and make the next column the value from the dictionary by using [“Inner KeyName”]
Python: to concat a string with a var you must
explicitly make the var a string.
API: To send a get request with a Authorization Bearer key, type
headers = {"Authorization":"Bearer MYREALLYLONGTOKENIGOT"}
r = requests.get("endpoint.com", headers=headers, params=payload)
Note: Bearer must be capitalized.
requests: the end point does not
need a trailing question mark or slash
Appannie: The create an app annie category payload is for Games / Strategy, type
“categories”:”Overall > Games > Strategy”
Appannie: When passing in the “date”:”yyyy-mm-dd” parameter with “granularity”:”monthly”
The report generated counts forwards a month from the date inputted
Appannie: Weekly granularity always starts on
sunday
appannie: Granularity means
the time span
A free app mockup site is
ninjamock
twitter ads must have a
link
pandas: to use read_csv there cannot be
any non utf-8 characters in the file.
datetime: the datetime character for the hour of a 24hour clock is
“%H”
python: To import python libraries that are in a different directory, type
import sys
sys.path.insert(0, ‘/users/student/desktop/’)
import file
html: a headline tag is
<h1></h1>
html: To start an html file, type
-!DOCTYPE html>
To make the cursor go directly to the end of the line, type
command right arrow
html: By default, you should set the encoding in the head tags by typing
- head>
- meta charset=”utf-8”>
- /head>
html: first level headlines should be place in the
header element -header> <h1>Home</h1> <h2>Contact</h2> -/header>
html: You should place paragraphs inside
<p></p>
html: The footer of your site should go in
-footer>
Company, LLC
-/footer>
html: Sections of your page should be placed in
-section>-section>
html: Place paragraphs inside
<p></p>
html: the format for an html entity is that they
start with an ampersand and end with a semi colon
flask: if you save two cookies by the same name the second will
overwrite the first one.
json: To parse json into a dict, type
json.loads(my_json)
json: To turn a dict into json, type
json.dumps(my_dict)
json: The json library is used to
turn json into dicts and dicts into json
The format for json is,
Dict surrounded by single quotes
Every key is a string
flask: To import the module for sending messages to the user, type
from flask import flash
app = Flask(\_\_name\_\_) app.secret_key = "bunchofrandomcharacters"
html: To create an bullet point list, type
- ul>
- li>List Item 1-/li>
- li>List Item 2-/li>
- /ul>
html: to create an image, type
-img src=”/imagepath”, alt=””>
css: To import the stylesheet to the html page, type
- head>
- link rel=”stylesheet” href=”css/main.css”>
- /head>
css: To apply styling to anchor tags inside nav tags, type
nav a {
color: blue;
}
css: To remove all underlines from links, type
text-decoration: none;
css: To create a divider for css selection purposes, type
-div>-/div>
To select a large amount of code
place cursor above it, hold shift and then click below it.
To indent a block of text
highlight it and press command, square bracket
css: To select a div with the id=”wrapper”, type
#wrapper {
color: blue;
}css: To change the color of the background, type
background: blue;
css: To set the maximum width of an element, type
max-width:
css: To set how close to the browsers edge an element will reach, type
margin: 0px auto;
css: for “margin: 0px auto;” the first number controls
the top and bottom margins
css: To increase the space around the border from within an element, type
padding: 5% 5%;
css: to center align text, type
text-align: center;
css: to center a wrapper div, type
margin: 0 auto;
css files end in
.css
in html, staying consistent with tabs and spaces
does not matter
to use the “and” operator, type
if my_var == 5 and my_var2 == 10:
print(“yes”)
bootstrap by default is
responsive
you can get bootstrap by simply
including it in the -link rel= through a CDN
bootstrap: to automatically make images responsive, typw
-img src=”my_image.png” class=”img-responsive” alt=””>
bootstrap: To automatically centre a page element, type
- div class=”container”>
- /div>
bootstrap: To make a certain text line look the most important, type
- p class=”lead”>
- /p>
bootstrap: to align text, type
- p class=”text-left”>-/p>
- p class=”text-center”>-/p>
- p class=”text-right”>-/p>
bootstrap: To import bootstrap, type
-link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
css: the css import should be in the order
bootstrap, google font, styles.css
bootstrap: To create a clean pill navigation, type
- ul class=”nav nav-pills”>
- li>-a href=”“>Page 1-/a>-/li>
- li>-a href=”“>Page 2-/a>-/li>
- /ul>
bootstrap: bootstrap places items on the page using a
grid system
bootstrap: the number of columns the grid usually has is
12
bootstrap: To create a new row in the grid with two columns, type
- div class=”row”>
- div class=”col-md-5”> My content
- /div>
- div class=”col-md-7”> My content
- /div>
- /div>
css: To select multiple elements together, type
h1, h2, h3 {
color: blue;
}
css: To lower some text, type
#my_text {
margin-top: 100px;
}css: to set the styling of a class, type
.my_class {
color: blue;
}
css: To apply two classes to one element, type
-div class=”class1 class2”>-/div>
.class1.class2 {
color: blue;
}
css: To create a border on an image, type
border: 8px solid #333333;
css: After you import the google fonts, to set the font on some text, type
into styles.css
h1 {
font-family: “Fontname”, backup-font;
}
The link and the instructions are all provided upon checkout from google.
css: each browsers default styling is stored in what’s called the
user agent stylesheet
css: When there are to selectors on the same element, the one that prevails is the one with
higher specificity
pythonanywhere: To see new changes I have to
both save and reload.
pandas: iterrows is a
generator which yields both index and packed rows
for index, row in df.iterrows():
prin(row[“c1”], row[“c2”])
bootstrap: to create a modal, type
Launch demo modal
Hexadecimal means
base 16
css: colors start with a
#
css: The color white is
ffffff
css: All id attributes must be
unique on the same page
css: To select a class tag that is within an anchor tag that is within a nav tag, type
nav a.myclass {
color: blue;
}
css: a sudo class is
a way to select an element in a specific state
css: to select the color of an anchor tag inside a nav tag on hover, type
nav a:hover {
color: blue;
}
css: The hexidecimal color black is
000000
css: To write a comment, type
/* my comment */
the url for google fonts is
www.google.com/fonts
css: a common backup font for a google font is
sans-serif
css: By default, 1em is
16 pixels
css: To set a font size relative to the default, type
font-size: 1.5em;
css: to unbold a headline, type
h1 {
font-weight: normal;
}
css: to change the amount of space between lines, type
line-height: 0.8em;
css: To pull other elements closer on the top, type
margin: -15px 0 0;
css: To add padding just to the top, type
padding-top: 10px;
Pandas: To make columns with categorical data be stored more efficiently, type
df[“Categorical Column”] = df[“Categorical Column”].astype(“category”)
Pandas: To fill a columns nans with the mean, type
mean = df['column'].mean() df['column'] = df['column'].fillna(mean)
bootstrap: By default, you should centre all the page elements by
putting everything inside the body inside a <div class="container"> </div>
bootstrap: To create a header with a light grey line underneath, type
- header class=”page-header”>
- p>My Header-/p>
- header>
bootstrap: In order for class=”nav nav-tabs” to work, the <ul> must be</ul>
all anchor tags
bootstrap: To pull the navigation to the right, type
class=”nav nav-pills pull-right”
bootstrap: To make a navigation option look active, type
-li class=”active”>
bootstrap: To create a large green button, type
-a href=”” class=”btn btn-success btn-lg”>My Button Text-/a>
bootstrap: To group two buttons together, type
- p class=”btn-group”>
- a href=”” class=”btn btn-success btn-lg”>My Button Text-/a>
- a href=”” class=”btn btn-success btn-lg”>My Button Text-/a>
- /p>
bootstrap: the md in class=”col-md-6” controls
at what device size the elements in a row will switch from stacked to horizontal (when expanding window)
bootstrap: If you want to use columns that total less than 12 you need to
offset the columns to make them look even
bootstrap: To offset columns, type
<div></div>
bootstrap: a nested column must be put inside the
divs of its parent col-md
bootstrap: To create a large text input area, type
- div class=”form-horizontal”>
- div class=”form-group”>
- div class=”col-md-6”>
- textarea class=”form-control” rows=”20” placeholder=”Notes” required>
- /div>
- div class=”col-md-6”>
- /div>
- div class=”form-group”>
- /div>
bootstrap: To make two column trade positions for medium sized browsers, type
- div class=”col-md-6 col-md-push-6”>
- div class=”col-md-6 col-md-pull-6”>
bootstrap: to hide an element for extra small screens, type
class=”hidden-xs”
or
class=”col-md-6 hidden-xs”
bootstrap: To make images rounded, thumbnail of circular, type
class=”img-rounded”
class=”img-circle”
class=”img-thumbnail”
bootstrap: google jquery and bootstraps javascript should be placed
right before body end with the jquery first
bootstrap: to make a collapsing nav bar, type
- div class=”nav navbar-default navbar-fixed-top navbar-header”>
- div class=”container”>
- button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”>
- span class=”icon-bar”>
- span class=”icon-bar”>
- /button>
- div class="collapse navbar-collapse"> - ul class="nav navbar-nav navbar-right"> - li class="active">-a href="">Contact - li>-a href="">FAQ-/a>-/li> - li>-a href="">Buy Now-/a>-/li> - /ul> - /div>
- button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”>
- /div>
- div class=”container”>
- /div>
bootstrap: To add a dropdown menu to one of the navigation options, type
- li class=”dropdown”>-a data-toggle=”dropdown” data-target=””> My Drobdown -b class=”caret”>-/b>-/a>
- ul class=”dropdown-menu”>
- li>-a href=”“>Item 1-/a>-/li>
- li>-a href=”“>Item 2-/a>-/li>
- /ul>
- /li>
bootstrap: To use a glyph icon, type
-b class=”glyphicon glyphicon-name”>-/b>
bootstrap: To create a divider in a dropdown menu, type
-li class=”divider”>-/li>
html5: you can now record audio into
the chrome browser
mysql: To see all the databases from with the sql console, type
SHOW DATABASES
mysql: To see all the tables in a specific database, type
SHOW TABLES IN databasename;
mysql: To create a new table in a specific database, type
CREATE TABLE databasename.New_Table_Name (column VARCHAR(50));
mysql: Column names cannot be
just a number
mysql: To see which user I am signed in as, type
SELECT user(), current_user();
mysql: To enter another database, type
USE databasename;
mysql: To delete a database, type
USE databasename;
DROP DATABASE databasename;
mysql: To close a mysql console, type
EXIT;
python: list(range(0,5)) returns
[0, 1, 2, 3, 4]
