Skip to content

Instantly share code, notes, and snippets.

@ReticentIris
Last active October 17, 2016 23:21
Show Gist options
  • Save ReticentIris/75ed584b0e09c0997d5ffa138f6c6cf1 to your computer and use it in GitHub Desktop.
Save ReticentIris/75ed584b0e09c0997d5ffa138f6c6cf1 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link href="xxx.css" rel="stylesheet" />
<style>
body {
background: #dddddd /* light gray */
}
</style>
<script src="xxx.js"></script>
<script>
document.write('Hi!');
</script>
</head>
<body>
<header>
<h1>Hi there!</h1>
</header>
<main>
<p>Lorem ipsum dolor...</p>
<p>
<a href="https://example.com">Example link!</a>
</p>
<ul>
<li>This</li>
<li>is</li>
<li>an unordered</li>
<li>list.</li>
<li>Change the "ul" to "ol" for an ordered one.</li>
</ul>
<table>
<thead>
<th>Header 1</th>
<th>Header 2</th>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
</tbody>
</table>
<p>
<img src="xxx.png" />
</p>
<form action="xxx" method="POST">
<input name="test" type="text" />
<input type="submit" value="Submit!" />
</form>
</main>
</body>
</html>
// You should not be using jQuery yet. This is just here so I don't forget to make it.
$(function(){
$('body').css({
background: 'black',
color: 'white'
});
$('body').append(
$('<p>').text('Hello, world!')
.css({
'font-size': '3em'
})
});
});
{
"example_key": "example_value",
"number_key": 1,
"boolean_key": false,
"null_key": null,
"array_key": [
{
"object_key": {
"test": "things"
}
}
]
}

When using SQLAlchemy, you should be utilizing sessions and transactions. The following is some example code for doing that:

from sqlalchemy import create_engine
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker, scoped_session
from contextlib import contextmanager

# secrets is not included with Python and is my own creation. All you need to do is know that it's used
# to fill in the blanks when initializing __eng__.
from secrets import secrets

# Creating the engine performs the actual database connection.
eng = 'mysql://{username}:{password}@{host}:3307/{name}?charset=utf8'.format(**secrets.db.__dict__)
engine = create_engine(
	eng, pool_recycle=600 # pool_recycle is the delay before throwing away old connections and making new ones. Avoids "mysql has gone away"
)

factory = sessionmaker(bind=engine)
Session = scoped_session(factory)
BaseModel = declarative_base()

# Context manager allows for "with". Check out: http://preshing.com/20110920/the-python-with-statement-by-example/
@contextmanager
def session_factory():
	s = Session()

	try:
		yield s
		s.commit()
	except:
		s.rollback()
		raise
	finally:
		s.close()
        
class Player(BaseModel):
    ...

with session_factory() as sess:
    x = sess.query(Player).one()
    x.name = 'abc'
    sess.merge(x)
    sess.execute('SELECT * FROM players WHERE name="abc"')

When you use sessions like this, any errors that occur will cause a transaction to abort and be rollbacked. Sessions are useful because you can make sure everything is ok before actually saving your changes to the database.

Notes For: 10/2/2016

Last Updated: 10/7/2016

Next Meeting: 10/17/2016 5:30 PM (Location TBD)

Ping Pong Tournament Creator

Assignments

  • For 10/17/2016

    • Start learning HTML, CSS, JavaScript, Python, Flask, and SQLAlchemy (no jQuery!)
  • For 11/2/2016 (2:30 PM) College Ave Student Center

    • All of the above + put dummy data into the database and practice querying it.
    • Challenge make a form to put data into the database instead of doing it manually
    • Look into filters
    • Challenge: Joins

Purpose

By the end of this mentorship mentees should be able to demonstrate basic to basic/intermediate knowledge of:

  • Frontend development
  • Backend development
  • Solid design principles
  • Collaborating as a Team

Technologies Used

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Python
  • Flask
  • SQLAlchemy
  • Object Relation Mapping
  • Git
  • SQL

For the database server, you will connect to the following:

Host: reticent.io
Port: 3306
Database Name: usacs
Username: usacs
Password: usacs

You may need to manually specify the database if you are not using Heidi. You can issue the following SQL to specify the usacs database: use usacs;

To insert rows in Heidi, click the table desired, go to the Data tab, and press the insert key.

Requirements

As a user, I want to be able to:

  • Register as a player
  • Register for a tournament as a player
  • See tournaments in their current state
    • Player rankings, score, game wins, etc
  • See player profiles for more detailed information
  • Additional requirements pending completion of the above

Recommended Tools

  • HeidiSQL
  • VIM / Visual Studio Code / Atom / Sublime Text

Learning HTML and CSS

By Tim's suggestion, Codeacademy seems like a good place to start learning HTML and CSS. Remember to apply what you've learned so you don't forget!

Other HTML Resources

Learning JavaScript

I highly recommend learning vanilla JavaScript before jumping into libraries such as jQuery. It will only make your life easier if you do it my way. Below are some links for you to get started:

JavaScript

If you would like a more in-depth look at particular things, you can check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide. I would advise against checking out the advanced section of this page unless you really have time. Likewise, things like the meta programming section, the indexed collections section, and details of the object model should be skipped. Iterators and generators are useful however you will probably not need them.

JavaScript DOM Manipulation

The above links pertain to adding event handlers to specific DOM elements. You will be able to "make things happen" when things are clicked.

You will not be doing any DOM manipulation using vanilla JavaScript as learning the functions takes too much time.

jQuery

jQuery resources will come after the next meeting.

Learning Python

Flask + Jinja

SQLAlchemy

Learning SQL

Examples Flask Applications

https://github.com/WildAndrewLee/Watch-My-Anime

A basic Flask application.

https://github.com/WildAndrewLee/SoMoe

A somewhat more advanced Flask application.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment