#100DaysCode for Python Web Apps: Flask, Django, and More Course

Hello and welcome to 100 Days of Web in Python, written by Bob Belderbos, Julian Sequeira and myself, Michael Kennedy.
Maybe you're wondering what this #100DaysofCode you've seen all over social media is all about.
It's really really taken off, and people are finding this concept of 100 Days of Code really powerful for getting them over the hump, and to become capable developers, or maybe learn a new language like, say, Python.
Here's an example of what you might see on Twitter.
Horne Sanchez says, "Day 11, #100DaysOfCode progress." "Today I worked more on byte 18." "Find the most common word from codechalleng.es/bytes." This code challenge platform they're referring to is actually from your coauthors, Bob and Julian.
We'll talk more about that later.
Here's another tweet.
"Day five of 100." "Did some short exercises about modules." "Imported modules, did a couple of my own." "Tomorrow, I/O." "#100DaysOfCode #Python." Way to go, Briggs.
Here we have "Round one, day 101." "Had to do an extra day due to one day off sick" "earlier in the 100 Days of Code." "Today's more of Python debugging." "Tomorrow starts round two." And Jeff says, "Round one, day 19 #100DaysOfCode." "Did three exercises in the book, basically my average." "Been taking it a bit slow these last few days." "#CodeNewbie #Python #IndieDev indie game dev." And finally, let's look at one more.
Amit Kumar says, "#Day32, another autowebcompat PR" "that is, pull request, just got merged." "Way to go." "Python tkinter #100DaysOfCode." So he added some new feature or bug fix to autowebcompat.
Very very cool.
So you've seen this stuff probably all over social media, Facebook, Twitter, and so on.
What's it all about?
Well, this is actually a very structured project put together by this guy, Alexander Calloway.
So Alexander, he was studying in business school he also wanted to learn programming.
He was having a hard time making progress so he came up with this idea of 100 Days of Code.
Here's a quote from him.
"The idea of 100 Days of Code originally came from" "my personal frustration with my inability to" "consistently learn to code after work." "I'd find other, less involved activities" "to spend my time on, like binge watching a TV series." "One of those days, I was just sitting in a restaurant" "with my wife, sharing my frustrations with her." "I suggested, maybe I should make some kind" "of public commitment to learn for at least" "an hour every day." "I thought it would go for maybe three months" "but it turned out 100 days was just the right length." How about that?
Well, thank you for creating this project, Alexander.
This is really really great for many many people getting started.
That's what this course is all about we're going to give you lessons and exercises for every one of these 100 days.

There are a lot of things that people do to support each other and encourage themselves to stay focused and keep going on 100 Days of Code.
But, there's really just two main rules and they're really, really simple.
The first rule is to code a minimum of an hour a day every day for the next 100 days.
And I would say taking a coding course like learning the lessons in this course and then coding a little bit counts, right?
You're immersing yourself in code for at least an hour a day every single day for 100 days.
And if you get sick, like you saw the person before had gotten sick and had to take a day off that's okay, just add a couple days on the end to make them up.
The second rule is a public commitment to making progress and keeping with it.
And the way that works is to tweet or put something on Facebook like #100DaysOfCode with an update every day.
The PyBites platform is actually going to help you a lot with this, but however you want to do it it's code an hour every day and share your progress every day.
Super simple rules and we hope this course really makes 100 Days of Code project work for you.

We are going to cover so much material in this course that we simply can't go through it all in any reasonable way.
But, I do want to give you a sampling a couple of the highlights that stand out to me.
We're going to cover the three major frameworks as we see them, Django, Flask, and Pyramid and we're going to do a lot with each one of these frameworks tons of different things we're going to add and use cases and scenarios we're going to put them through.
We're also going to cover some of the foundations of the web like HTML 5, CSS, and JavaScript.
So, maybe you know HTML, maybe you're not super good at it maybe you have always kind of avoided CSS.
We're going to spend a certain amount of time really digging into that so you know it really, really, well as we go through this course.
We'll do a quick primer on JavaScript if you haven't used that language for awhile or it's totally new to you.
No worries, we got you covered there.
We're also going to cover some of the single page application frameworks for JavaScript like React and Vue.js.
We're going to talk about how to write data and query data from SQLite.
This is an embedded database that comes with Python and it's super simple to use but it's a good stand-in for your favorite database be that Postgres, MySQL, Microsoft SQL Server, whatever.
When we talk to databases we can do direct queries against it but, most of the time, we're going to use some kind of ORM.
We're going to use SQLAlchemy a lot.
We're also going to use the Django ORM during the Django sections.
We're going to see how to create REST APIs in a whole bunch of different frameworks.
So, you're going to do all sorts of cool stuff with things like API Star, Responder using Pyramid and Flask and just tons and tons of different APIs we're going to build.
Then, we're going to call those services sometimes testing it with Postman sometimes calling it from JavaScript or even directly from within our Python code with something like Requests.
We're going to write async code.
The web server and web applications are ideal candidates for using Python's async and await keywords.
The reason is, most of the time web apps are waiting on something else on the network, on external APIs, on databases, and so on.
So, they could go do productive work while they're waiting on these other systems.
And, we're going to talk about a couple of frameworks and async and await itself to make this super easy and super powerful in Python.
We're going to talk about web scraping.
Sometimes, it's great to call an API but if the API doesn't exist, and the data's on the web guess what, you can use Python and get at that data anyway.
So, we're going to talk about web scraping and how to get data off of websites that don't have an API or, maybe, we don't know about their API.
Of course, once we write all our web apps we don't want to ship a busted version to production and take the website offline.
We want to make sure it works and it continues to work automatically so we're going to write unit tests against our web application mocking out the database and API calls and all sorts of cool stuff like that.
We're going to take our application and deploy them to Linux using uWSGI and Nginx and we're also going to deploy them to Heroku so you'll see a couple of deployment scenarios which are pretty awesome, and you'll learn the basics of operating Python web applications in production on Linux.
We're also going to talk about Docker.
Containers are super important these days.
There's a lot of use cases for them and we're going to follow on our Linux deployment stuff with Docker because Docker is really a special way to create very small, lightweight customized Linux deployment, right?
So, everything you learn about deploying to Linux is going to be super useful for when we get to Docker.
You'll just have to use the Docker commands rather than, say, the Shell commands directly.
We'll see how to do containers and even orchestrate multi-container systems with Docker Compose.
This is just a tiny sampling of what we're going to cover.
We're going to go through so many amazing topics and little libraries, and different things that you can do on the web with Python.
You're going to have a hard time choosing what to use at the end of this course, I'm sure.

So you've chosen Python for your 100 Days of Code project in this 100 Days of Web.
Well I'm here to tell you that you've chosen wisely.
Look at this picture.
One of these languages is unlike the other.
Can you pick it out?
Of course, Python is growing super super fast and this graph is not just some random thing I found on the internet.
This is a report done by Stack Overflow which has some of the better insights into the developer space.
Here you can see the red graph is the actual usage up to 2018 this report was done a little while ago but I think it's still totally relevant.
And the gray part is the projecting out.
So if you look at Python it is just set to dominate the industry in terms of programming languages.
JavaScript has been really really popular as well but guess what?
It's topping off, you know it's not quite going down but it's not really growing that much.
You look at Java, Flat, the rest of 'em are going down.
So if you had to pick somewhere to build your skills and to jump into this technology space would you rather be in a growing space or shrinking space?
You know, my rule of thumb is I like to bet my career on things that have positive derivatives are going up, they're not going down.
Okay so, this is cool it's really popular amongst the old school traditional languages if you will the ones that have been around 10, 20 or more years.
You might be thinking well Rust and Go, I heard they're hot.
And Swift is pretty cool and all those things so how does Python compare to those?
I bet they're even more awesome and they're probably going up even faster.
Well, I have a graph for that too.
Here's how it compares to things like Swift and TypeScript and Go and so on.
Yes all of these languages are generally going up but even so they're nothing like Python.
The usage is not like Python nor is the rate of increase like Python.
So Python's pretty special and I think this is a really great framework for building web applications and other types of apps and I think it's a super super good skill to have in your skillset.

Let's talk a little bit about the course organization and how you're going to go through it during your 100 Days of Code.
We don't have 100 separate little projects nor do we have one huge project you work on for 100 days.
Instead, we've broken the course into four day segments where you work on one project, one idea you learn one thing and you work on it during those four days.
Typically, the way it goes is on the first day you're going to watch the lessons.
They're usually 45 minutes to an hour or maybe you do a little bit of coding we'll tell you what to do and help you along the way there but mostly the first day of any major topic Django, Pyramid, Async, whatever is going to be watching these videos.
Then then next day we're going to have some project for you.
And on GitHub, each section has its own read me that says on day one or day N you do this on day two you do that, on day three, day four and it just walks you through.
It's pretty open-ended and you get to explore and play with the ideas but it is guided so you're not just left all alone.
Next day, probably a little bit more code and then you might finalize what you're working on and finish up that project as you go.
And that's typically a given topic in this course.
So you can think of this course as 25 four day segments.
Except, we've actually left one open where we have four little independent ideas that weren't big enough to fit into this format.
Also, some of the topics are longer the way I've laid it out here.
For example, Docker is an hour and a half.
So on the first day, you watch maybe 50 minutes of Docker, something like that.
Day two, you work on applying what you learned there.
Day three, you come back and watch some more videos and build on that with, say, Docker Compose in this example.
And then finally, on day N plus three or day four you're going to finish up working with those new ideas.
So the basic workflow is these four day segments on any given topic.
If you want to skip around, that's fine that's totally okay they don't have huge dependencies between them but we do assume that you know what came before.
So, for example, if you jumped to the end into some Flask section, we've assumed that you have the knowledge that we covered in the first part where we just introduced Flask and things like that.
But as long as you're willing to fill in those gaps or you feel like you have the prerequisite knowledge you can jump around and that's okay long as you think of this format as being kind of the atomic unit there.

Hello and welcome to the course.
My name is Bob Belderbos and I'm a software developer at Oracle and co-founder of PyBites, a blog, community and platform that teaches Python via practical real world code challenges.
I'm honored and excited to teach you Python and web development in this course.
My programming journey started 12 years ago learning HTML, CSS, JavaScript and PHP to build websites.
I've been hooked ever since.
Programming for the web is awesome because the browser gives you instant feedback as you can easily get users to run your code.
My more recent work includes building our PyBites platform using Django, AWS Lambda and Heroku all technologies you will learn in this course.
Good day everyone this is Julian Sequeira.
As with Bob I am the co-founder of PyBites and Code Challenges.
And currently I'm a new Python developer at Amazon Web Services, very exciting.
And last but not least I am a trainer here on Talk Python Training.
I'm absolutely stoked to be sharing your 100 days journey with you.
Please don't get sick of me but I'm here to help.
So if you need anything you always feel free to reach out.
Hey welcome to the course.
I'm Michael Kennedy, nice to meet you.
A little background on me, I'm primarily a web developer as well as the founder of the Talk Python To Me podcast and Talk Python Training.
I've been a professional developer for 20 years and I'm really excited to share that experience that I've gained with you throughout this course.
Welcome to the 100 Days of Web in Python.

You inevitably will learn a ton of Python during this course.
But, it is not a beginner course.
This course is supposed to teach you web development in Python assuming that you basically know Python.
Now, you're going to be able to follow along if you don't know absolutely everything like, if you couldn't bust out Metaclasses just off the top of your head no problem, don't worry about it.
We'll talk a little bit about the features as we use them and of course repetition you'll learn a bunch from that as well.
But, when you think about the Python language when you look at it if it's a little unclear it's a little hazy, maybe you don't remember all the details of exactly how it goes maybe you don't know much about it you just played with it a bit don't worry, we've got something to clear things up for you.
At the end of the course we've added a Python primer.
So here's 46 minutes of little concepts that show you how each of these core ideas in Python works.
Two minutes on classes Two and a half minutes on slicing one and a half minute on if else statements and things like that.
So if you're a little rusty or a little blurry on the Python language you know, be sure to jump to this appendix at the end get a little refresher and then jump into the main course content.

It's really important that you get the source code for this course.
A lot of the projects start with existing code or existing data and you're going to need to build on top of it.
And of course, where do we put the code?
We put it on GitHub.
You can find it over at github.com/talkPython/100daysofweb-with-Python-course.
So let's go over there and see what you'll find when you get there.
Here's the GitHub repo for our project.
First thing you need to do is go and star this and fork it.
So you're going to want to fork this repository so that you have it with you and you can make changes to yours and also star it just so you have a quick reference.
Then you're going to want to download it somehow.
Either click here and copy the clone URL and just clone it with Git, if you're familiar with that.
If for some reason you don't want to mess with Git that's fine, just grab that gear and just download the ZIP file.
Git's a little better 'cause you can do a Git pull and then update it if we make any changes.
Of course, a ZIP file's probably just fine.
You can always update that as well.
Now the most important part is the days.
So here you can see these are the four day projects that we've talked about.
So here we're going to talk about Flask and then HTML5, and then CSS basics and things like that.
Let's jump into the CSS one to see what's there.
Told you it's important to start with this because there's existing code to work with and one of the things you do is work with this thing called Selectorville to play with CSS selectors.
It's like a little app that lets you type CSS selectors into it and it'll generate changes in the page, basically.
Then, the most important part is your turn.
As you know, you're going to be writing some code in this course.
Here's where you go.
So you come in here and it just talks about the various stuff that you've done kind of like the flow we discussed in the beginning.
Day one you just watch the videos day two you play with Selectorville that's the thing you just saw next to this folder.
So you're going to go play with that.
It talks a little bit how to do that.
On day three, one of the things we did in these videos is build out a custom navigation.
So it says, "Hey, why don't you try to recreate "the talkpython.fm, the podcast navigation bar up here?" Like this, just this top black box.
So it talks about here's how you do it and here's some of the tools for it and then finally, the fourth day for this one is to play with Bootstrap Themes and finally share what you've learned.
So make sure you get the code because each four day project will be something like this.

When you dedicate yourself to taking a course and carefully working the way that the instructor the author is working, you are effectively gaining much of the experience that that particular author that developer, has gained throughout their career.
This course is special because it's taught by three people.
That means you get three experiences in one and this is super valuable.
Imagine that you have a job in this place.
You get to work with cool VR gear, on hardware and IoT things, you'll gain one set of experiences but if you took a different job say you're starting a fashion startup with your friend, this woman from college and you're working out of this coffee shop being scrappy, working and trying to get venture capital and launch your application, you'll have a totally different experience than that dude in a VR headset.
Or maybe you go the corporate route work at Microsoft like this guy here.
He's working on some new programming language tooling around Python.
These are all super different experiences and these experiences are all really positive.
They'll give you different perspectives on programming, and that's awesome.
How is that relevant to this course?
Well, with three instructors, we each have a slightly different set of tools and a slightly different way of working.
We're going to show you next how each of us gets set up what you need to follow along with each of us Julie and Bob and myself, during our particular segments.
You don't have to work like us but if you want to follow along and do exactly what we're doing we'll show you how to set up the tools to do that.
You'll have not just one experience but three experiences bundled up into one.
So on the other side of this course, you're going to have a broader perspective on Python development and that's pretty awesome.

G'day guys, this is Julian Sequeira.
Just running you through my setup for the next 100 days.
I use Windows 10.
Don't judge me, but I do, and I absolutely love it.
So you'll see in all of my videos I'll be running Commander as the terminal equivalent on Windows, and that's simply installed.
You can follow the videos to get that done.
For anything web, I use Chrome.
That's pretty much all you need from me to follow along with my videos.
There will be some other services that we'll set up but those will come on the specific days.
So let's get cracking.

In this course, I use Python 3.7 on a Mac which you can get from Python.org and I use Vim as my default editor.
For external Python dependencies I create virtual environments using the built in Vim module then pip installing the requirements or external dependencies into them to not clutter up the global Python name space.
For my JavaScript and React lessons I use Node, NPM, the JavaScript Package Manager and the Chrome DevTools.
Lastly, I will introduce you to our platform where we developed 100 days progress tracker you can use to share your progress and stay on course.

Let's talk just a moment about my setup so you can most easily follow along.
If you want to work the way I'm working when you're following my examples of course you're welcome to work the way Julian is the way Bob is, but if you're going to follow along like me, here's what I'm doing.
So I'm running macOS Mojave.
I'm using PyCharm Professional for my editor and I'm using Python 3.7 installed from Homebrew.
So if you're on your Mac you probably should know about Homebrew.
Homebrew's pretty awesome.
It's easy to install, you run that little command right there, then you can type things like brew install Python.
So you're going to definitely want to check and see if you have Python because if you just type Python on your Mac, mmm.
Not good 2.7, look and see Python and we don't want that.
Type Python3 to make sure that you have a modern version.
I think some of the projects are going to require Python 3.6 or higher, so aim for 3.7 or higher than that.
If a new one comes out since we've recorded this or at least Python 3.6.
You don't want an old one, okay?
Do some of the async stuff and f-Strings and things like that and you're going to need at least 3.6 for that to even work.
What you get this is brew install Python.
Python 3 is just straight Python.
That's the way they treat it.
Modern Python is Python in Homebrew which is really really great.
I've already done that so I don't need to but that's how I got Python on here.
If you're on Windows instead, I recommend you check out this relatively new thing Python 3.7 in the Windows store.
So this will put Windows in your path it'll give you the Python3 command.
All the important stuff you want on Windows and it'll even auto-update itself.
Totally free, you can check that out on Windows 10.
If you're on a Linux, it probably already comes with Python 3.
Use your package manager to install that and update it and just do that check Python3 -V to see what you get.
Finally, PyCharm.
I'm going to be using PyCharm as my IDE.
And now there's the full fledged Professional Edition and the Community Edition.
If you click on features, it shows you what features are in the Pro Edition and what are also available in the Community.
If you're doing standard Python stuff you could use the Community Edition, it's fine.
But, you know what this course is about?
Web development, and Python Web Frameworks, and Databases.
All three of those things are only in PyCharm Pro.
So either also get PyCharm Pro.
It has a free trial, it's like eight dollars a month if you want to pay for it or if you're not going to use PyCharm my second best recommendation would be Visual Studio Code with a Python plug-in.
So those are probably the two closest things of course, PyCharm is what I'm going to be using.
There's a little bit where I use WebStorm but that's kind of the same product, more or less.
You can use PyCharm Pro in that situation.
We talk about it then anyway.
All right, here's my set up and what I'm working with.
You don't have to match this exactly but here's what I'm doing in case you want to try to get as close as you can.

In this video I want to introduce you to the PyBites Code Challenges Platform.
If you head over to codechalleng.es you're presented with this home page.
We designed our Code Challenges platform because we are strong believers in learning by doing and the best way to learn Python is to write a lot of code.
First, let's log in with GitHub.
When you log in you're redirected to the dashboard.
You have a leaderboard the bites you have earned but what's relevant for this course is that we have 100 Days Of Python section.
If you go there, there are a couple of grids and to follow along with this course we made a talkPython_web template.
And here you see all the course materials spread out over a 100 days.
You can start the 100 days by clicking start button.
This will create a project or as we like to call it, grid and every day you can Tweet out your progress and mark items complete.
The Tweet is already formatted to show the work you are going to do today #Python, the day number and copy in @pybites and @talkPython so that we are notified on Twitter.
Then you can mark the items complete.
This way you're working towards 100% completion of the course.
This is totally optional but we noticed that having a tracker can be very efficient to persist and the Tweeting part is a nice way to share your work and to work with accountability partners.
A great way to share your progress is to join our Slack community.
There are some great Pythonistas there sharing the work and you can always ask questions if you get stuck with the course.
To join our community, just head over to settings, confirm your email and use the join PyBites Slack button.
By default you will join the code challeng.es and the general channel but we also have 100 Days of Code channel which is a dedicated channel for people taking a challenge.
Well, that's that.
We hope you enjoy the course and use our platform to stay on track.
Have fun and learn a lot of Python and web.
Keep calm and code in Python.

Welcome to your course i want to take just a quick moment to take you on a tour, the video player in all of its features so that you get the most out of this entire course and all the courses you take with us so you'll start your course page of course, and you can see that it graze out and collapses the work they've already done so let's, go to the next video here opens up this separate player and you could see it a standard video player stuff you can pause for play you can actually skip back a few seconds or skip forward a few more you can jump to the next or previous lecture things like that shows you which chapter in which lecture topic you're learning right now and as other cool stuff like take me to the course page, show me the full transcript dialogue for this lecture take me to get home repo where the source code for this course lives and even do full text search and when we have transcripts that's searching every spoken word in the entire video not just titles and description that things like that also some social media stuff up there as well.
For those of you who have a hard time hearing or don't speak english is your first language we have subtitles from the transcripts, so if you turn on subtitles right here, you'll be able to follow along as this words are spoken on the screen.
I know that could be a big help to some of you just cause this is a web app doesn't mean you can't use your keyboard.
You want a pause and play?
Use your space bar to top of that, you want to skip ahead or backwards left arrow, right?
Our next lecture shift left shift, right went to toggle subtitles just hit s and if you wonder what all the hockey star and click this little thing right here, it'll bring up a dialogue with all the hockey options.
Finally, you may be watching this on a tablet or even a phone, hopefully a big phone, but you might be watching this in some sort of touch screen device.
If that's true, you're probably holding with your thumb, so you click right here.
Seek back ten seconds right there to seek ahead thirty and, of course, click in the middle to toggle play or pause now on ios because the way i was works, they don't let you auto start playing videos, so you may have to click right in the middle here.
Start each lecture on iowa's that's a player now go enjoy that core.

G'day everyone, and welcome to the 100 Days of Web in Python course.
Thank you for giving it a crack.
I'm Julian Sequeira.
I'm going to be taking you through the very first section of four days, and we're going to be looking at the Flask web framework.
It's going to be an introduction to Flask specifically around setting up a Flask package of your own that you can run and then we're going to look at templates and not just templates as a page but as a recurring theme throughout your website or your web tool, okay?
Very simple, but very, very powerful stuff and very useful, okay?
And that's what we're all about here with this Hundred Days of Web and Hundred Days of Code thing so I hope you have a lot of fun.
Stick with it.
Get through the full 100 days, and you will be so impressed with how far you come.
But enough talking.
Let's get cracking on Flask.

Alrighty, before we get started let's have a quick look at what we're going to be doing over the next four days.
The first day is going to be watching videos.
How lucky are you guys?
This is all about setting up your first Flask app.
In the package format go through the videos starting at the initial setup video and work your way through to creating your app and then configuring your Flask end file.
That's where I'd like you to draw the line.
Try not to do too much.
The reason I say this is this is the 100 days of code challenge.
You do not want to get burnt out by doing four or five hours of straight code in your first day.
The idea behind the challenge, again, 30 to 60 minutes.
Limit yourself, maintain that motivation and focus.
So watch the videos have a little bit of a play but don't do too much.
You don't want to get burnt out.
Day two, watch the second half of the videos.
Now these videos from day two will actually continue what you did in day one and this time we'll extend on the application and then create a standard template that will flow across all the pages on your website or in your Flask app.
That's actually a really important concept of Flask.
Very useful, so make sure you master that one and then when you are done, again try not to do too much because you've got days three and four to play.
That's going to be a lot of fun for you.
It's free form.
I don't want to make it too difficult.
I don't want you to burn yourself out again.
Just have a play.
This time for three and four I would like you to actually create your own app.
So start from scratch.
Get rid of everything that we've done just push it to the side.
Try not to look at it.
See if you can create your app.
Obviously, reference it where you have to but create everything yourself.
Create your own base HTML file get some basic CSS in there make it pretty, and just have some fun with it.
And that's it!
So, move onto the next video.
Get cracking on day one and work your way through these days referencing this Read Me file if you need to.

Righty-o, quick video here.
Just on the setup for this application.
We have here Commander, I'm on Windows.
It's going to look similar regardless of whatever you're environment is that you're using or your OS.
I've created a directory called 1-flask just 'cause we're on Chapter One and we're building a Flask app, go figure!
What I would like you to do is create a directory something like that, whatever you want to call it.
This is going to be your parent directory.
We're going to build our very first Flask application within this directory.
The first thing we have to do after doing that is arguably the most important thing you have to do and that is create your virtual environment.
That will make sure everything we do here all the packages we install, it's all self contained in this awesome little virtual environment.
So because we're using Python 3 I would not be using Python 2.7 or whatever for this course.
We're doing it all in Python 3.
You can check your version with python --version.
I'm using 3.6.
Haven't installed 3.7 yet.
Doesn't really matter for this.
Just make sure you're using Python 3.
Run the command, Python -m venv venv and what this will do is create it will create a virtual environment called venv, okay?
Do an LS and you can see I've got this venv folder there.
Now, if you are using Windows, I hope you're using Commander or some sort of Linux shell 'cause it is a bit of a pain to do this on the default command line.
But that's completely up to you.
So what we're going to do is we're going to go in to the venv.
You'll see there is an include, lib and scripts directory.
This is different on macOS or Linux.
In those ones, you'll probably see a bin folder, okay?
A binary folder.
This one, because this is Windows we're going to go into scripts and you'll see there is an activate batch file, okay?
All we have to do is activate it.
And there you can see we have this virtual environment little bracket thing in front of our command line.
That means that we have now activated the virtual environment and everything we do is going to be self contained in there.
If you are using Mac or Linux from your parent directory here, where you see the venv directory you're going to do source venv/bin/activate.
Running that command will initiate your virtual environment.
And that's it.
Next, and next most important you are going to install Flask.
All we really need to know for this specific chapter is that we're installing Flask with pip.
So pip install flask.
And we'll let that install that we'll install Flask and all of its dependencies.
You can see them flying up the screen there.
We don't need to install anything else.
Just ignore this if you see that.
I mean, you can always upgrade pip yourself, that's fine.
For me, I'm okay.
And now, we can do a pip list and this will show you all of your installed packages.
And that's it!
So, we have our environment installed.
We have Flask installed and we're now ready to start creating the directory hierarchy here for Flask and get cracking on our first app.

Now that we have our virtual environment created right there we need to actually create our application directory hierarchy setup, okay?
What we're going to do, which is the more Pythonic way of doing this, I suppose, is actually package our Flask application.
This package is going to host our application.
The reason we're doing this is just to allow the app to be imported at a later date.
It's more about scalability and growth and everything like that.
You can actually just create a Flask app as we did in one our previous courses just with a single file but this is the better way of doing it and, as I said, it's more scalable.
So, with that said take a look at this.
This is what our hierarchy, or what our folder directory structure is going to look like.
We have here our parent directory.
That's the Flask folder.
And we have our virtual environment here.
What we are going to create is our Python file that defines our Flask application.
It's nothing crazy.
It's just one line of code, so we'll see that going forward.
I just wanted to point that out.
The meat of our application is going to live within our folder here, which we're creating our program in so, I've decided to name it "program".
We have our parent directory.
We have the program directory which is going to house the meat of our application.
This is the package.
Inside that, we have the dunder named file so it's a __init__.py file.
That is what denotes that this is a package that this is a Python package, that can be imported.
It has the rules in there, in that __init__.py file.
And the bulk of our application is then run out of the routes.py file, as you can see down there.
The routes file is going to create all the routes all the webpages, all the links for our application.
It's going to have all the Python code in it.
There will be other folders going forward but this is what we're creating now.
So, go ahead, create a folder called "program".
That is going to be your application directory.
Create a demo.py file.
It's just going to be blank.
Create, within your program directory, an init file __init__.py, spelled exactly like that and a routes.py file.
So, give that a go, and when you're done it will look something like this.
Okay, so we have our demo.py.
We have the program directory.
We have have __init__.py and we have routes.py.
Leave it there.
Let's move on to the next video.

Okay, we're going to set up each of these files, one at a time.
Let's start with the __init__.py file cause that's arguably the most important file here.
To begin, let's start our virtual environment.
If you don't already have it, activate it.
Okay, in the folder we have demo.py program and virtual environment.
Let's head into our program directory and there is the __init__.py file we created.
So use whatever editor you want to just pop into that and what we need to do is we need to first import flask.
So if you've ever done a single file flask app before you keep the actual importing of flask and the configuration of your app object, your Flask object.
That all happens in the one file where your routes is stored and everything.
Not so here.
Your __init__.py file is going to actually configure flask for you and tell the package what's what.
Alright.
What we want to do is insert.
So, I forgot for second there I was using Vim.
So we're going to do from flask.
So from flask import Flask.
And then we're going to create.
This is where we create our application our flask application instance.
Now this is going to create the flask instance using the name of __name__.
Now, here's where the magic is.
We're going to do another import here from our program directory that we're already in.
Alright, we're already in it.
We're going to import the routes file.
Now this has to happen below where we create the app instance because we need that app instance to be created first before we can import any of this.
So, the order of our file is to import flask it's to create our Flask app instance then once it's created, import the routes file from the program directory that we're in.
Alright, that's it.
Lets write that.
Lets cut it.
And there it is.
All right, next video, next file.

Alright, welcome back.
In our last video we looked at the __init__.py file and we now move on to the routes.py file.
You can see the relationship here.
At the end of __init__.py where we're setting up our Flask app instance, the last thing we do is we then say, from our program package, import routes which is going to be our routes.py file.
Let's edit that file now so we actually have something to import.
Something to work with.
Now, traditionally, if this was a single file Flask app we would import Flask here but we've already done that in the __init__.py file so we can pretty much get straight to the code.
The only thing that we need to import here is the Flask app.
Okay, that app object that we created in our __init__.py file.
To do that, we just simply go, from program from program import app.
And the whole __init__.py thing handles that, alright?
That's all we need for the absolute basic Flask app here using our packaged app scenario.
Alright, so pretty much we can get straight into the Flask code.
What we're going to do here is we're going to create an app route.
Now, this is going to be our URL.
So the first URL we want to create is the root or the index path.
In this instance, we can actually specify both 'cause they are practically the same thing, okay?
So, we have this decorator here and it is creating our URL.
What is it creating that against?
What is the code that is going to run against this URL?
That's what the decorator works against.
In this case, we're going to run it against this function and we're going to call the function index().
General rule of thumb, I wouldn't say all the time but one of the good practices with Flask is to try and name your functions similar to your actual URL.
So, this is the index() function for the index or root path to our website.
Alright.
For the simplest of simple all we're going to do is return something which is just plain text.
We're just going to return plain text.
We go "Hello Pythonistas" and that's it.
That's all we're returning.
And would you believe it, that is our app.
That's all we need to do, to make this very simple initial Flash app work.
So we can save that and we can pretty much run our app now.
We just have to do one last thing so move on to the next video we're going to configure that demo.py file and you'll see why I've left that 'till the end in the next video.

Okay, time to work on that demo.py file so just head up one directory back to our one Python Flask directory and there's your demo.py file that you created.
Let's just Vim into that and all we really have to do in this file, is we're telling Flask what to do so when you run the Flask command to launch your app which I'll show you straight after editing this this is the file you point at because this is what kicks it all off.
This is what tells it what package to use and so on.
So, all we have to do is go, whoops from program, import app.
Now the reason this sounds confusing is because we're importing app and we've referenced that before in other places so let me just walk you through it really quickly.
Save that.
Let's just verify it.
Okay, so from program import app.
Now, this is talking to the __init__.py file.
So we have app in here.
What we're saying is, from our program package import the app instance, or the app object of Flask and then, from there, it's going to do this one from program import routes and reference the routes.py file.
Alright?
It just sort of goes through that tiered approach.
Now, we head back up.
One last thing we need to do before we actually run this program is tell Flask, the Flask command, to use demo.py and we do that through an environment variable.
Now, this environment variable is set differently in Windows from macOS or Linux.
If you're using any sort of Unix environment you'd be used to using this method.
So, export Flask underscore app and then we want to talk to the demo.py file and that works.
Now, in Windows, we can't do that because you can't set environment variables using export.
We have you use the actual set command.
So, set FLASK_APP=demo.py and then we go.
So, if you're using Mac, use export or if you're using macOS or Unix, whatever and if you're using Windows, use the set command.
Now, all we have to do, is flask run.
Okay, and you can see we are running our website on 127.0.0.1.
That's localhost, port 5000.
So, let's bring up a web browser and check that out.
So, I've just opened up a web browser here.
This is Google Chrome in incognito mode and I've just punched in the URL or the IP address 127.0.0.1:5000, and that's it.
We see the returned string that we had in our routes.py file, okay?
In the background, we see the actual timestamp.
We see the address that we're talking to.
We see the URLs that were requested.
Just ignore this one.
This is a remnant from a bookmark I had in there and that's it.
There's our very first Flask app.
What I'd like you to do now is just have a play around with the routes.py file.
Add in some other return values.
Do whatever you want to play with but this should be long enough to get you through today and possibly a second day depending on how much time this took you.
Just have a play, have some fun and let's move on to the next video.

So there's one little gutcher that I wanted to discuss here.
And that was that environment variable that we created, that flask_app.
To view it, we can just quickly some up windows we'll do it this way.
We can see it their, flask app equals our demo.pie file.
Now unfortunately, what happens is when I close this terminal window when I can cancel this session or exit out we lose that data.
So let me show you that, one second.
Let's deactivate and let's exit out.
And now with the new terminal launched, let's just get into our folder 1-flask.
All right so there we're back in here.
Now, let's activate our virtual environment.
Right, and now if we run that same command...
Flask app its gone.
Okay, so if we were to run flask run, we're going to have issues.
It doesn't know what it's doing.
It doesn't know what file to talk to.
It's just running nothing, all right.
So it's even say's it here "you did not provide the flask app environment variable".
So, the problem there is, every time you close your environment for the day if you happen to shut off your computer and you come back, you're not going to be able to do this.
You're going to have to reset that variable.
And it's really frustrating.
So, one work around for this, is to install a new package into our virtual environment here.
Called Python-dotenv, it's this one here let's pick install it now.
If I can type pip install Python-dotenv Now, what this module allows to do, it will allow us to specify that environment variable in a environment file, in this parent directory here.
And what we do is, we create that file that's actually going to be called .flaskenv So let's go Vim okay because we're in an environment file.
We'll be titled in Linux and everything is classified as a dot file, so Vim .flaskenv and we throw that line in there.
FLASK_APP=demo.py Save that, oops.
All right, and now flask, run, there we have it.
So, what this does is it now refers to that .flaskenv file.
So if we close out terminal session and we cancel it out and we come back into another week, we don't have to remember signing that environment variable again.
It's just taken care of by the .flaskenv file and the dotenv package.
So, install that, get that cracking and save yourself a bit of heartache.
Just remember to put it in all of your projects from here on in.

You're probably wondering when we're getting to the more interesting stuff because at the moment, your webpage looks like it was made by a 15 year old in 1996, right.
It's nothing flash.
To get that, let's create what's called a template.
A template in Flask is pretty much the file, the HTML file that you will write, that links to each one of those URLs.
So at the moment in your code, your URL for index simply returns plain text, whereas the HTML.
Well, rather than code HTML into that routes.py file we're actually going to create an index.html file as you would with a traditional website.
And then you can throw all the flashy HTML and CSS you want in there but for now, let's just go ahead and set everything up.
Within our program directory, we're going to create a directly called templates, pretty obvious.
And in our templates folder we have nothing in there obviously let's create an index.html file.
And, in this file let's just give it something basic let's say.
So we have our head and then we'll have our body, okay.
Right, and in that body this would be where we usually punch in all of our information all of our HTML code, all of the text that goes on your page, all of those things right.
Let's actually just put in some test information here.
Alright, one thing at a time, right so let's make this say something like this is text, we've included in our HTML file.
That way we don't want to make it the same as the other one because then we won't know, right.
So, let's go body and let's close this off, come on.
Alright, so there is our file.
It's nothing special.
Let's just write that, okay and we'll head back to our routes.py file to relate the two.
So, right there we have our return value of "Hello Pythonistas." Now, what we want to do is we want to return that HTML file instead.
And we do that using another feature of Flask.
So, that means we're going to have to actually import something here.
So let's, delete that, let's head up to the top.
And, let's throw in, actually we'll put it down here from flask import render_template.
So, what this going to do, this is allowing you to render a template, render an HTML template file.
Now for the traditional term template you would assume it's a template that is carried across all of your other files.
We'll get to that in a minute.
Let's just work through this one at a time, okay.
All we're doing now is we're returning that template so let's go return render template.
And in here, we specify the name of that template file that we're using.
In our case, we called it index.html and that's it.
So, now what we've done is we've replaced that text return of "Hello Pythonistas." We've replaced that with the index.html file.
So, let's run the app and see if that works.
We've got our environment variable set.
We do flask run.
Alright, so there's the actual URL we're going off with the IP.
Let's bring the browser across.
There's our site from before.
We refresh it now and we get the title, this is our site.
And, there is the paragraph tag that we've put in our HTML code that says this is text we've included in our HTML file.
That's how we create our webpages using an actual template and we don't have to include all of that HTML code in that simple routes.py file.
So, now that you know where you can put your HTML in you can imagine, this is where you set up your CSS and your divs and all those sorts of things which we're not going to go to in too much detail in this course but now you know, so that's a template.
That's a very basic template.
Let's move on.

Our site is pretty plain.
There's nothing special about it.
It's just simple text and there's nothing really much else to it.
What we need to do is create some sort of template around it, some sort of common theme that flows across the entire site no matter what page you go to.
So looking at PyBites here, the common element that flows between every page regardless of which page you're on is this left-hand bar, okay?
It's almost like your nav bar.
It's almost your menu bar along the top of the page.
Whatever you're used to seeing on your favorite websites.
To do that we actually need to create a base template file, something that our webpage can call on.
So as an example here with PyBites this stuff on the left here stays the same.
All that changes is the content on the right.
Imagine if you will two files, a file called base that contains all the code for this and then the unique file to the page in which case this is an about.html page.
That is what we're going to create with Flask and that's what's awesome about Flask is that you can create a template.
You can create that left-hand column.
So let's head over to here.
You've got your templates folder.
Let's create a base.html file.
Now, in this file we're going to keep it really simple.
What on our page stays the same?
We have a title, we have a header we have the HTML code, and we have the body, right?
The only thing that really differs is potentially the title in the title bar along the top but that doesn't have to change and the thing that definitely changes is what's in the body.
It's that unique text to that page.
Now, we're just going to keep it really simple.
Let's put our HTML header, let's throw in the head tag, and let's throw in a title.
Now, this title will stay static across all of our pages so this is our site.
Whoops.
Getting ahead of myself there.
And we close off the head.
And what else did I say?
We said body, so the body tag is now static across every page but nothing within the body tag is static so let's leave that blank just for a second.
And we close off our HTML.
So this is our template.
This template is going to be static across every webpage on our site.
But what differs?
The stuff in between.
So without explanation let's just throw in some Jinja template code, block content.
I'll explain in just a minute.
And we'll close that with end block.
Now, what this means is in this template we have HTML, we have head, we have title, we have body.
That is static across every page.
What differs is everything within the body tag and Jinja calls on that using block content the block content code.
This is something we will refer to we will link to in our other files.
Everything that calls on this base HTML template is going to have this block content tag.
And you end it with endblock.
So you will see in just a minute.
Let's leave this up here.
Let's head on in another window here to our templates.
And we'll open up index.html.
Now I have prepared this already so just roll with it.
In here see the block content?
Block content here will be inserted into here on the template.
This is where it's going to fall.
So anything that we put within the block content and end block Jinja tags is going to appear here.
Now, I know that's a lengthy explanation but I need to drill it in.
This is how it works.
In this block content we now have our H one text saying, "Hello," and we have a paragraph tag that says, "This is text we've included in our HTML file." The one thing I haven't explained here is extends base HTML.
This is pretty much our import.
This is pretty much the Jinja code that says to this when you render this index file it says Hey, go and grab my base.html from here.
Go and grab my core template, my core formatting from this file." We are extending the base HTML file into our index.html file.
Then we're going to put everything that is within the block content Jinja tags into our base HTML file here and this is what we're throwing in there.
We're throwing in a H one header, we're throwing in a paragraph tag, and that's that.
You can see the relationship between the files.
Here's the core file, here is what extends it here is what is unique about every page.
And we're just going to work on an index.html file for just a second.
So let's write that.
Let's write that.
Just go back and look at routes.py.
You can see we don't need to reference base.html.
We just need to try and render index.html.
That's it because by rendering index.html that template we have that Jinja code in the top that will then pull in the data from the base HTML file.
So let's launch that.
Here we have our browser.
Let's launch the file here.
And you can see there's, "Hello" from our actual index.html file.
This is the text we've included in our HTML file.
That came from index.html.
What didn't come from index.html is this is our site.
That title was not in that code.
It was not in that file.
If we open up base.html this is where the title came from.
There's the proof if I may that this base HTML file is being used by this index.html.
Same thing, we call the index route and we get the same thing there.
This is our site.
So on the next video we're going to create another file called 100Days.html and that's also going to pull from the same base HTML file but it's going to change a few things and you can see how the same template is being pulled over every time.

Let's create another page.
As I said, it's going to be called 100Days.html.
To do that let's create it here, 100Days.html.
We're going to speed this up a little bit.
Now that I've explained it there's no need for us to type it all out one by one.
There is our Jinja code to create this template.
Again, we are extending base.html.
We're going to take that code, that template that format from the base.html file and we're going to import it.
We're going to extend it into this 100Days.html.
Essentially at the moment all we're taking in is that unique title code.
That's the only real valuable stuff that we're taking in.
Let's throw in another H1 tag here.
And let's throw in some unique text here.
This is text from 100Days.html, not base.
Again, a little bit more proof to show that we are taking the code from this file not from the base file.
And the one thing we didn't do previously was edit the routes.py file because we already had an index.html route created.
So let's edit this now.
We need to create a route for our new page.
We need to tell our Flask app where it needs to go if someone says, "I want to load 100Days.html." So let's do that here, app.route.
And the URL end point that we're going to be using is 100Days.html.
That's the file.
I will show you something here.
This won't work.
We can't actually use a number to start our function name.
We have to use a letter.
That's just a rule in Python.
Notice the color change difference.
It knows, it knows too much.
So let's put an arbitrary p there and continue.
And all we need to do here is return, just like the other one, return the render_template that we're going to be using for this.
So in this case it is return render_template 100Days.html.
That's all.
Just to recap, if you browse to 100Days.html that's the route that the app hits.
We then load this HTML file.
That's what this function does.
It returns that.
That's all we need to do.
Let's head over to our app and run it.
Open up the browser again.
Okay, we're in our browser.
Hit enter.
You can see that it ran and we see our same site.
Let's go to index, same thing.
And now let's change that to 100 days.
And that hasn't worked obviously.
Look at that and let's leave this area in because this is a really good point.
What I've done wrong here is in the routes.py I've actually left in the route here .html.
That's not going to work.
Let's get rid of that.
Let's restart the Flask app.
Bring up the browser again.
Okay, we have the browser up.
Let's reload the page and there we go.
So you can see there's just a little bit of an error there.
Congrats on starting your 100 Days of Code challenge.
That is text that came from the actual 100Days.html.
Again, this is text from 100Days.html, not base.
But this is our site.
This came from our base.html template.
Now you can see how you can create as many web pages as you want within your templates folder for whatever your website might have and they can all call on that one base.html file for the overall architecture of your page.

As a bonus, I thought I'd throw in a bit of CSS some cascading style sheets to make the site look a little bit nicer, specifically with a menu bar.
I'm going to be using something called MUI CSS it's just some pre-established CSS I can link to it saves me writing all the code manually.
Now we are going to head over to our base.html file.
We're going to throw in quite a bit of code here so I'm going to paste it in and I will explain it line by line, just a minute and here we have all of the extra code I've just thrown in these are the meta tags up here that are required to load MUI CSS, you can pretty much just ignore all of those for now, this is all static stuff that they will show on their web page to actually get MUI CSS imported into your script, so all of those need to be thrown between the head tags and the key stuff here I want you to look at is within this body tag we're creating a div all right, in HTML, just a little section there called menu bar, this is using their MUI panel CSS class, just ignore that for now most importantly within our menu bar div that we're creating, we're creating a button with these characteristics, again ignore that this button that links to our index.html file our index route and says home.
So we're creating a home button that takes us back to the home page, the index page, there is a second button here which has the same characteristics but this time it's called a 100 Days button and it links to our 100Days route, all right.
So there's not much to it there, it's pretty simple and that is within our base.html file, so that menu that we are creating is going to be across every page and be extended and all we're going to have unique is our block content, all right, so we'll save that file.
Let's move this to the right, and all we have to do here we don't actually have to do anything else to our routes.py file 'cause that all stays the same we just run the app, let's bring up our browser all right here is our browser, let's get rid of 100 days hit enter, and it again, it's not styled perfectly just roll with it, this is pretty simple stuff but there is our menu bar and we have two buttons, home and 100 days.
If we hit 100 Days that takes us to 100Days page.
Remember the div that we created for their menu bar is static, so that will stay on every page, it's in our base.html file, that will never change, just the content in the body tag will.
Click on home again, this is just that custom content in the body tag that's changing, menu bar staying the same.
Nice and simple, you can see this is the framework of your web page, your web page is starting to come together, so this is really exciting, you've learned quite a few concepts here, move on to the next video for a little bit of a wrap up.

Congratulations you made it to the end of your first two days of the course.
This was the introduction to the Flask Web Framework.
I hope you enjoyed it, I hope you got a lot out of it.
Let's do a quick recap of everything that we learned.
What we're looking at here is the Flask package hierarchy this is pretty much how our entire application was laid out.
If you remember we started out with our project folder we created the virtual environment, we have our demo.py file which tells the flask app what to run and we also have the flask n file there which was the actual environment variable for the flask app.
We then had the program folder, that's where our actual application lived, it was packaged within that and that's denoted by the __init__.py file that tells the package what to run, what to import and so on and it imports the routes.py file which contains all of the information for routing out applications so all of your routes, the app.route decorator and what each one of those web pages actually does.
We then have the templates folder which contains all of those HTML templates including the base template which was the one that carried across all of our pages and then we have our two unique pages, index.html and 100Days.html.
Just looking at our __init__.py file quickly, we begin by importing flask, that's the very first thing you have to do for this file, you have to tell it to import the flask module from the flask package, and then we create our very own flask app object.
So we get this app object and that's what's used throughout all of our application.
We then from our program folder we import the routes.py file, so thinking back to that hierarchy, from the program folder we're importing routes.py.
Looking into the routes.py file, we import app so again from that program folder we know because of the __init__.py file that we can import our flask object called app, from flask itself we then import render_template and looking down a little bit further, we then have our decorators, these are the decorators that sit on top of our function, and these tell our function what path is going to work with that function and at the end of the function we then return the actual HTML file or the template that is going to be used when that page is called.
Looking to the base.html file now, this one's quite simple nothing much to it, it was just some base HTML code with some Jinja code injected right into the middle of the body tag, this again was the place holder of all of the content that we're going to be injecting into this base HTML file, and that code that we're injecting in is our unique HTML files and looking at those unique HTML files, those other pages we then have the extends Jinja code and that tells us what file we're extending from, in our instance we're extending from base.html, taking that base HTML code that template, and using it for this other page.
The block content as we saw in the base.html file this is the code that's going to be injected, this is the code that fits within that block content on the template and last but not least we then played with a little bit of MUI CSS, this is just a screenshot of the website there's the URL down on the bottom, if you want to have a closer look, have a bit of a play.
So now it is your turn, have a quick look at the video again on the read me, or go and read the read me yourself on the actual GitHub repo but now it's up to you.
In your last two days you are going to make your own web application, the idea is to be completely free form there is no rule around this, all I'd like you to do is take everything you've learned and make your own website, make your own page, it doesn't have to be functional just as long as you are using a base HTML type file to have a template that flows across all of your pages, do whatever you want come up with anything, make it as simple as possible it doesn't matter, just remember it's all about the consistent learning, so day three and day four dedicate at least 30 to 60 minutes to just playing around with your own website and remember keep calm and code in Python.

It's time to lay the groundwork for so much of this course.
When we talk about Django when we talk about Pyramid when we talk about Flask and all these other frameworks we're going to be using HTML through and through.
Sometimes JSON, but a lot of the time we're going to be using HTML templates and we're going to talk about that foundation right now.
Now, you may be thinking, oh, what is there to HTML?
I know this.
We've got paragraphs, we got BRs for line breaks header, body, done.
Well, even if you know HTML pretty well I encourage you to watch this chapter.
It's going to be pretty short.
We're going to build two interesting applications and we're going to show you a couple of cool editor tricks and other techniques to be really effective with HTML.
We're also going to talk about HTML forums some of the client side validation and good stuff like that.
So if you're really familiar with HTML go ahead and just watch the video and maybe skip the hands-on section but if you're not, if you're a little unsure your HTML skills are not quite up to par well, we're here to strengthen them up and get you ready for the rest of the course.
Now let's get to it.

You may be thinking, what is there to HTML?
It's pretty easy, right?
I mean, here's Yahoo.
We could write that up in some really simple HTML.
In fact, here it is in 1996.
If you go to the Wayback Machine this is the front page of Yahoo and basically it's like a Yellow Pages of websites.
It wasn't really a search engine.
It was like a bunch of people just going around the internet going "That's interesting.
"We'll add it to Yahoo." Totally crazy.
One of the demos we're going to do during this chapter is we're going to rebuild this site almost exactly like this with no CSS.
Very, very little styles, just pure HTML.
So yeah, pretty simple.
Kind of blows my mind that's a $100 billion company at their peak, but there it is.
That's Yahoo.
So, the web is simple, right?
Well, it was, it was simple.
It's getting a lot more interesting, a lot more complex.
As people go from building documents on the web that are linked to building applications that are on the web that are responsive that are progressive, that do interactive things like this Turo site here.
So, Turo is a place, kind of like Airbnb for cars.
And these are private car listings that you can rent.
Get a Ferrari, a 2007 Ferrari, for just $695 a day.
Pretty awesome.
So this is a really cool site, very nicely done.
It's beautiful, but it's also highly interactive with the map, with the progressive infinite scroll stuff going on and whatnot.
So I would bet that this HTML is not quite that simple.
We're going to focus on building a good foundation talking about some of the modern features like HTML5 and so on.
So that you can build apps more like this, less like that.

Before we start writing some HTML let's just talk briefly about its timeline when it was introduced, and what features were added when.
HTML starts way back in 1990, 91, with Tim Berners-Lee where he invented HTML back at CERN.
And it was really meant to just be linking documents.
All right, so that's kind of how it started.
Hyperlinks, basic non interactive documents.
In 1995 to five years later HTML 2 was released and that added form elements such as text boxes and option buttons.
Ability to change the background and better tables and things like that.
We quickly get to HTML 3.2.
There was, you know HTML is very standards driven and they tried to do some stuff for HTML 3 and apparently that failed or didn't go anywhere.
So they rebooted that effort as HTML 3.2.
And here we have better supports for tables still.
Applets, text floating around images, things like that.
Superscripts, subscripts.
So still working on this document in this non interactive like document world.
Moving ahead quickly now.
In 1999, remember this is the Dot Com boom.
Pets.com and all that craziness.
We get HTML4 and finally we get style sheets.
So until then, you wanted to style something you would have to put the styles on the elements.
Think how tedious that must have been, right?
That was horrible if you wanted to have a common design across your whole site.
So here we have style sheets that allows us to style all of our site not just embedded in each individual page and scripting ability for multimedia elements.
Sort of a competitor to HTML4 is XHTML.
So HTML4 is a little bit more loose.
It doesn't have to be an exact super set of XML.
And remember around the 2000's this is like the height of XML on a text base.
We have XML SOAP web services, all sorts of stuff like that.
We have style sheets, XSSLT, transforms all those kinds of things for XML.
So there was a push to take HTML and make it proper parsable XML, all right?
Everything is properly closed.
You know that got some traction but really modern day HTML is not nearly that strict and it's probably a good thing.
However, we've been moving pretty quick up til here.
In 1999, 2000, we get these two competing standards and then there's a long waiting period.
As time goes on and on all the way out to 2014.
In 2014, HTML5 comes along.
That was a long period there of not too many things being released.
This release of HTML is meant to replace things like Flash.
Remember Flash, you had to have Flash to watch this video.
Well replace those types of things with built-in video elements and audio elements and so on.
Also allowed for web applications to be much more like well, applications and not documents, right?
They can access local storage, the little databases they can run in offline mode, all those kinds of things.
They have location based services, mapping and whatnot.
And also changing the syntax a little bit to separate content from presentation.
When you look at some of the features especially around validation and stuff of HTML5 you will see it's decidedly not an XML document, all right.
You might have attributes that don't have values and things like that.
So this is more of a carrying on of HTML4 heritage than the XHTML.
So basically 15 years between major new versions here.
But now we have HTML5 we're kind of moving along to building real applications on the web properly.

A quick comment about editors before we start writing some code.
In this chapter, you're going to see me using an editor WebStorm.
This is from JetBrains.
Now, I really like the JetBrains set of IDEs.
You'll see they do great work around working on HTML and CSS and JavaScript and all the stuff have to do with the web.
Noe, if you don't want to use WebStorm, that's totally fine.
Here I'm going to use WebStorm.
I'm also later when we get to the Python framework use PyCharm, which basically has most of WebStorm in it plus also, it has Python capabilities.
If you don't want to use WebStorm but you want to have some of the cool editor tricks that we're going to do, probably your best bet is Visual Studio Code.
So you can try that, as well but I'm a big fan of Web Storm and PyCharm.
So I'm going to be using those.
And just want to give you a heads up of what's sort of compatible out there that's also free.

You want to see what Yahoo was like back in 1996?
Here we are in the Wayback Machine.
You can see all the different versions of Yahoo that have been saved and we come down here about a week after the launch and let's just click on that and see what we get.
Well, there we have it.
The little image at the top didn't come through.
That's okay, we're not going to model that.
Anyway, so here's our Yahoo we have a new, and a cool, and the brand at the top and the news, and more Yahoo and then we just have a listing like, here's all the arts and humanities and here's education, or if you want K12, you go in here.
And this is basically a Yellow Page of the internet put together by actual humans going around and looking for stuff that's cool and categorizing it.
And this literally predates search engines and Google, and things like that, it's pretty wild.
But notice the HTML is really quite simple.
So what we're going to do is we're going to go and reproduce this pretty well actually with almost no styles no style sheets for sure 'cause that didn't exist back then.
So we're going to get this and we're going to built this it'll be quite a bit of fun.
So you can go find it in the Wayback Machine if you want to try this we'll talk about your turn chef when we get to it later.
We're going to build this cool little website and learn a little bit of HTML 5 while we're doing it.

So, if you were going to rebuild the home page of a $100 billion tech company you would think that might take a little while, right?
Well, give it five to 10 minutes and we're going to build Yahoo.
Well, at least its homepage right?
So, this is the sites that we're going to build.
Here we are over in our repo.
I open this in WebStorm.
I'm going to drag and drop this folder onto the icon in the Dock and this only works on macOS, unfortunately it doesn't work on the other ones.
On Windows and Linux you just say file, open directory.
Never mind this for now.
You can see there's nothing in here we have our Yahoo clone directory we have some images, these are images that we're going to use across the top they're red because they're not yet committed to GitHub, I'll do that in just a moment.
So let's go and add a new H I don't want to add a new HTML file normally you would but I want to add a new plain file and just call it index.html.
The reason I didn't add the HTML one is that it already has some of the structure.
So, what do we have to have here for our document?
Well, if it's going to be treated as HTML5 it has to have a doctype of HTML.
So, doctype HTML, that used to be really complicated for other older versions of HTML and now like no, just HTML.
This is great for HTML5.
Then we have two main parts, we have the head and we have the body.
Now, notice in WebStorm I can hit Tab and it'll autocomplete stuff so if I hit p, hit Tab.
Not all editors do that but be sure to take advantage of that.
Up here we're going to have title, it's Yahoo and we're going to not create the exact one because hey, they own Yahoo, we're creating Yaaahooo.
Anyway, it'll be silly but that's what we're going to create.
So we can put this up here and we can put all sorts of stuff, like style sheets and meta information, and whatnot but in our simple little version we're just going to have that.
Over here, we're going to need to have these little bits here, these images.
Now, when we start to design elements on a page one of the most important things that you have to think about is what is the, they call it display what is the flow layout style?
Is something treated as a new line or is it treated as an inline element that flows around other ones?
So the most important thing we're going to work with or the most common, at least is div.
It's the most flexible, it has no semantic meaning it's just containers of things and this can act as a paragraph but it's just going to hold the stuff at the top.
Now, we want to have some images.
So, the way that we're okay, image is img and you have to set the source and you're supposed to set the alt like, for some reason if you're visually impaired or something you can't see the image a screen reader could read the alt and make sense of it.
So what we're going to do is we're going to have and then start grabbing some of those simple images.
So, we come in here and we can get how to go, start with new and then we come in here and, I like this one what's the next one, it's going to be cool.
Yahoo.
News, and the last one was more.
All right, so, now if we go and just go back here and just double click this.
Well, that's super looking isn't it?
Oh my goodness, there's a few little things that we need to do so these are the images but right now they're huge.
We have two choices.
One, we could size them to exactly match the size we're using them as long as we're only using the one size or in old style here we could set the style to have the height of the element to be, you know something fun like 42 pixels.
We'll just put that on all of them.
Of course when we use style sheets later but we're not there yet.
There you go, that looks better.
That looks more like Yahoo not exact we have this stuff in the center so let's go over here and put a style on this.
Say text align in WebStorm and PyCharm have these little shortcuts so you'll have to hit Tab and then type c.
So, now it's getting there.
All right, not quite the same images 'cause I recreated them.
Not sure what the copyright's on those are and they're pretty cut down on quality in The Wayback Machine.
Here we have our Yahoo with our little image so what's next?
We need to have a couple of things here that are not super easy to see so let's do another div.
Again, that's going to be aligned in the center.
So, now we're going to have some hyperlinks you probably know hyperlinks but just going to have 'a' inside the href that's where it's going to go to the hyperlink reference.
Now, I'm just going to put hash because we don't really have more of the site to go to but, what do we have?
We have Yahoo Finance, Yahoo Finance.
We have Net Radio and we have the World Series.
We hit Command + D to duplicate that so we have Net Radio and World Series.
All right that's looking pretty good.
A little bit of spacing but we're not going to stress too much about the layout and stuff this is just the HTML.
Now we need to put a form that we can submit a search into.
I've no idea what would happen if I tried to search this surely some kind of error.
But, we're going to have another section it's going to be similar to this so let's just grab that.
Now, in order to submit data at least using traditional web stuff not like, JavaScript binding with front-end frameworks like we'll cover at the end of the course but to submit stuff back to the server we have to have the form and the form typically has an action actually we can just leave it like this so it'll go back to the page and often it has a method which is GET or POST, we'll say POST.
So, here we have our elements.
We're going to have, first thing is the textbox, and a textbox in HTML are input and the default is text.
If this was cool and modern we would go in here and see things like, placeholder and all sorts of stuff but remember what we're trying to recreate looks like this.
So, we're just going to leave it alone.
The next thing we have is a button and it says, Submit, I believe.
And, we have a hyperlink that says Options.
Let's see how we've done.
Coming along pretty well I out of do a little back and forth.
Now, we have some spacing maybe we could set some margins.
And, let's just go and copy these real quick.
So, the final thing for that little top part before we get into the main directory listing.
I'm going to try to put those into a bunch of hyperlinks.
Let me just zoom ahead and do that for us.
All right, there we have it I've typed those all out and let's see how we're doing now.
Those are looking pretty good, again, font size maybe a little margin, other than that we're pretty much, we're like, halfway there with the Yahoo.
So, what have we got left?
We've got these Arts and Humanities and Architecture sub-listings.
So, for that, we're going to have another div.
Now, this one does not align in the center so we don't have to do anything in terms of styles for it and over here we have our little unordered list.
So, the way we do that in HTML is we say, 'ul'.
Now, here's a really cool editor trick.
How many of these do we want?
We have one, two, three, four, five, six.
Let's just say want four 'cause I'm going to just, do some copying in a bit.
But, if we wanted four.
You knew you wanted an unordered list and in there you wanted four list items.
The way you do that is you'd say Angle Bracket + li like this.
We can leverage this cool feature called Zen Coding where you do an < this is a CSS type of language, so you say 'ul' immediately contains li times four and if I hit Tab.
Check that out, even automatically moves you from the things as you hit Enter and fill out the values.
That is pretty awesome, although I'm not going to use it here because we have a whole bunch of stuff that goes in there I'd like to copy.
So, we have a bold element and then a bunch of sub elements.
Let's just copy this one for starters.
Turn this into a hyperlink.
Then wrap this round and make each one of these little ones also a hyperlink.
This one we want to be bold and the proper way to do that these days is to put it inside of a Strong element or to use CSS and we're just not doing CSS yet.
How have we done?
Looks pretty good right?
It's not that hard to build Yahoo.
Okay, I'm going to zoom ahead and just duplicate this part over here over and over and over again fill out the details and we'll resume the video.
Okay, I've done a whole bunch of typing in that text and formatted it so now we just have a bunch of hyperlinks going to these locations, again, we don't actually have Yahoo we don't have that underlying data so we can't do much more than that here.
I'm just going to throw in a couple of these other bits so that visually these two sites line up.
All right, so now got something like this and we got something like that.
Now, let's do just a little bit more work to make this look you know, legit.
On these, we need a little more spacing.
So, on each one at the top, let's just go and have a margin-bottom 10 pixels.
On those, a little more space and then these have a lot of distance between the lines and the way set that is we want to set the line height and just do that here.
I'll make it 1.75em.
Now, em is a measurement that means however big this thing is now multiply it by 1.75.
So, if the line-height is, I dunno, 20 now it's going to be, you know, 30-something.
We run that again and it looks like it maybe needs even more, let's say 2.25.
2.5.
There we go.
I'll make this little top part go away again.
Yeah, those are looking pretty good.
They're not exactly identical one I got to scroll to the top, there we go but, feel like we're building Yahoo.
Now, the last thing to do let's just put this little divider and that little bit on the bottom and I'll just say, actually.
Move this down here at the bottom.
Another div, whoops.
A div, now then we want to horizontal line looks like that.
Notice, this is not closed.
This is one of the parts where HTML5 differs from XHTML.
In here, we're just going to put these in hyperlinks.
Now, if we just wanted a new line we could use a little br tag not always the best way to do it but let's just bring it in the mix here.
All right, there we have it.
We've added our hr, we've added the links a couple of line breaks, let's see how we're doing?
Pull down, close those down there were definitely centered so let's go and throw that on here again.
Remember, style sheets, we'll get to them.
There we go, so, not a perfect replica but it pretty close to Yahoo what we've built over here.
So, this is a quick little introduction to basic HTML.
We're going to do another demo where we talk about working with forms and some of the HTML features but we wanted to kick it off with rebuilding Yahoo.
Just, thinking back on this, here's a site where basically you could have done it through really static files, maybe it had a database behind some of it, I'm sure it did but it's super easy to create.
Hundred billion dollar company I guess it was good to create a company in 1996 on the internet.
Well, it's still good to create companies on the internet but it's not as easy as oh, well let's rebuild this thing in a few minutes and try to go with that.
All right, hopefully that was enlightening for you and we'll move onto the next one.
Remember, all the cool editor tricks that you can take advantage of.
It really helps you get HTML correct because it auto-closes the tags and even if you wanted to change them from say a div to a span you'd notice it's changing the bottom as well.
Super nice.

Let's review what we built here and talk about some of the important tags that we used.
We always start an HTML5 document with DOCTYPE HTML Don't say HTML5, but just basic, clean HTML.
That's what that means.
And then we're going to wrap the entire doc in an HTML tag.
At the top we put the head the head has a title but it also has things like style sheets, metadata and so on other stuff to configure the page or tell consumers of the page like mobile browsers or search engines about the page.
And then we get to our body which has the main content over here and there close those tags of course as we said the most common and flexible element for layout is the div it has no semantic meaning other than it sort of acts like a paragraph.
It has what's called block layout.
Block layout is important because it means basically that element goes on a new line and things that come after also go on a new lines shift doesn't flow around it inside there we put some images.
Now images have inline layout.
So that means they'll flow next to each other.
And we didn't have to do anything to get them to span across the top.
That was great.
We wanted to have some input.
So we have a form.
And we have input elements like input type equals text, and other types.
We'll talk more about that shortly.
And if you want to submit that we're going to have a button.
And we going to submit that button you can even say type equals submit on the button to make it super obvious.
Now these both have either inline or inline-block layout.
They seem like the kind of the same thing at first but inline, those elements do not respect margin, padding, stuff like that.
Whereas inline-block, do you could put a padding on a button you could put margins on the button.
So you may choose one or the other for that.
Now, these are just the default values so we going to choose them in there we are kind of acknowledging how they work.
When we get to the design then we going to talk about how we control that how we use that to our advantage.
Of course we have our form that we put these elements into and we going to submit them back.
Often the action is just empty which means submitted back to the same page.
Typically post is what we want here.
Then we want to an ordered list.
It's layout style is block, by the list items.
These are the elements of the list.
And then we can put things in them here we put a bunch of hyperlinks.
Speaking of which, those a tags are hyperlinks and their layout, of course, is inline as well.
So those are most of the elements that were used to rebuild Yahoo.
I mean, a lot of stuff on this page but it's not that much considering what we built.
Right Well those are the basic HTML tags and some of the key concepts around them.

We've seen the basics of all the HTML tags and we even talked a little bit about forms but let's build something quite a bit better around accepting user input and giving validation and those sorts of things.
So over in our GitHub repo, we now have a signup folder.
Let's open that in WebStorm.
Anyhow, you can see we have a really simple site.
It has just a little bit of styles already set up.
So here if you see if I refresh it we have this big blue screen.
Let's see what that's for in a minute.
So we've got a few styles sheets because earlier we recreated Yahoo from 1996 and that was cool but if you build something that looks like it's from 1996 today?
Not cool.
Don't do that.
So I threw a few basic styles in here to style some forms and stuff.
It doesn't change anything about what we're doing but at least it makes it look and feel better.
Also I threw in a little bit of JavaScript here that will capture the form input that we type and show it back to us as if we had submitted to the server.
All we have here is an index.html file.
There's no server.
We haven't got to the server side frameworks yet.
This is going to simulate submitting it back to the server.
Now our goal here is to define some basic HTML forms that allow users to input data or interact with the data from our website.
So as we saw before what we're going to do is we're going to have a form element here and often an empty action is fine.
That means post back to the same page.
The request method is going to be post.
And in here, we want to have something to sign up.
So let's actually put a little header here so it's a little more obvious.
We're creating this fake startup that we're calling Foxrem.
So you're going to be able to sign into our cool site at Foxrem.
If we come over here and refresh it we now have a form and we have our ability to sign up for Foxrem.
There's no input elements in our form.
It just had a white background.
So what we need to do is accept a full name an email address, and have a button that they can click.
So let's have an input of type equals text.
And we'll have another input type equals text, and I'll have a button.
We'll set the type equal to submit and we'll call this register.
Let's see how we're doing now.
Better.
Here I guess that's full name.
And I guess, what is it?
This is email that we can register.
And if I click this notice what we're sending to the server is empty.
Why is that?
Well, in order to send this data we actually have to give it a name.
Not an id, not a class, but just a straight up name.
So this is going to be full name, something like that.
And this one's going to have a name of email.
Now if we go back and restore oh it must have remembered this is who I am.
Sure, let's go and try to submit that.
Registering, see now the full name is Michael Kennedy.
The email is michael@talkpython.fm.
Super.
So this is already working.
It's already coming along.
So if I refresh it though, I got to make it forget somehow.
If it looks like this as we really get to it in the beginning it's not at all easy to tell what this is for.
Well, sign up and this says register.
This probably has something to do with like a username or an email or maybe a first name.
Maybe this is password.
I don't know, but we can't tell, right?
So we're going to do a little bit more work to make it look nice.
And speaking of which we also do want to have a password section here.
All right, so which one of those is the password?
I don't know.
So we're going to go and add a couple of extra features to our form to make it really clear what we want to put in and also to do some validation.

Here's our signup form.
Fill it out.
What goes where?
Obviously, we have no idea what goes where.
One option would be to put a little label left of these things like full name and email and password and stuff like that.
We could even style those to be fixed sizes.
Ah, that works.
Is it clever?
Is it beautiful?
Is it smooth?
Does it beg me to type in my stuff and register and give away my personal information.
No, not so much.
So let's go here and do a little better job.
So we can add a place holder.
Here we can type full name, maybe lower case or something like that.
Here we have a place holder for email.
Here we have a place holder for password.
If we put a little space at the beginning it kind of centers it a little bit more.
Ah, that's better.
Now if you go here and you type your name obviously it goes away but if there's nothing in there comes back, right?
So, nice little place holder.
Put a very secure password.
Maybe not the best type here.
We might want to hide that away but you can see we're now passing that information along.
Little bit nicer.
Okay, well that was good.
Having those place holders there was good.
The other thing that we probably care about is maybe we want to hear about how and where they heard about our company.
Like, "Hey I heard about you through search or through a friend" or "Oh, that newsletter you guys gave out that's how I heard about your new product." So, what we want to do is go in here and put some kind of a drop down.
And the way drop downs work in HTML is these are called select boxes and the name, let's heard of, heard of like that.
An id doesn't actually matter.
And inside here, we're going to put options.
These are options you can pick and the value of nothing from it.
We'll say please select an option.
And then we can say something like podcast.
And this will be your podcast.
And down here, what else are we going to have?
We're going to have search, search engine something like that.
Notice the tech doesn't have to be the same.
Friends recommendation and this can just be friend for the value.
Let's say that, it's you know actually spelled okay.
So this is all good.
This one we want to leave empty so it'll indicate nothing has been selected.
And this one we could also just say selected like that.
So if we refresh again, just now we have please select an option and those are our other ones we've picked.
'Kay so if we click it now, you can see heard of is now a podcast.
If we change it to friend, it's now friend and son.
Okay well this is pretty good.
Looks like we have a nice little self-describing forum that looks really slick.
When we refresh it, it's going to come out looking like this.
Looks nice to me.

Well our form, it's looking good.
It has this nice little options down here that we can pick.
We can come down here and it has our email but if you type a real email of course the placeholders drop away.
Super nice but notice it will let us submit right away.
Oh and by the way this isn't too secure, right?
So we want to do a couple of things.
One, oh actually let's add one more column here one more thing that we're asking for.
Let's ask for age and that's just be age in years, something like that.
Here we go.
So there's a couple things we want to do.
Like it would be nice to only allow email addresses here, to make sure that they type in a full name, to make sure they select an option, to make sure that the age is actually a number like 27 and so on.
So we can use client-side validation that's part of HTML5 really easy.
We want to make sure they've selected an option you can say that is required.
You don't have to set a value, nothing like that just required.
We can do that for all these if that's the way we want it.
We don't have to make them all required but it seems reasonable here.
So now we should go and try to submit it it says, "Whoa, whoa, whoa, you're going to have to have some stuff in here." And soon as I type it gives immediate feedback.
Take it away again, warning.
Type it in, good.
Of course if we reload it those warnings are gone.
It doesn't start that way but soon as you try to submit it, it starts telling you about what's missing.
So let's put this in here.
Let's go and select, actually, let's leave that one off.
Let's say if it was 10.
Notice it won't let us go.
It won't let us submit that when data is required.
One quick comment on all of this client-side validation.
It's a convenience.
It's here to help the experience be quicker and smoother for the user.
So as I type stuff it immediately, you know removes that little light of red around it.
Let's do another, no, this part's good now.
That does not mean you can skip the validation on the server.
We could entirely disable this validation.
We could change the HTML or we could just submit form posts directly to the server, entirely skipping this HTML.
So this is not enough but it is a really nice thing for our users.
So this is nice but what if I put this?
Well, it still thinks the email's okay.
So let's go and change that as well.
We just said we want a bunch of text boxes but with HTML five we can do better.
We can say, "This is an email, a date, a file "a range, a check box," you pick it.
So that's an email.
This is a password.
That's been around for a while.
This is a number.
And with a number we can set cool things like the minimum must be 18.
So you have to be 18 in order to do this.
And this one we could say min length is going to be six.
So you have to have at least six characters and so on.
Well, let's try that again.
Okay, so we come down here.
Okay, this name is required.
Cool.
We'll just put Michael for a moment.
When we say register and it says, "No, no, no." It's not just required, it requires an email address.
Oh, well, that's good.
Okay, ABC, how about the letter a?
Just love the letter a.
But even right away it tells us like "That's not going to work.
Please fill out with at least six characters and you're using 1, 2." Yep, now using 2.
Register no, it takes the letter a six times right, or more.
So that's pretty cool.
Down here I could put 16.
It's like, "No, no, this is a number." Okay, 5.
Nope, it has to be no less than 18.
All right, how about 45?
Now it's happy, right?
If you all the scroller down it stops at 18.
And if it were empty and I come in here and hit the up arrow to run the scroller it starts at 18.
So that's pretty cool.
And finally over here we can select an item from the list which we'll gladly do.
Finally our form is all valid.
We fill it out correctly and none of that happened doing a bunch of round trips to the server.
It's all client-side.
It's not even JavaScript.
It's just HTML in HTML five.
All right, let's hit it.
We better save that password.
Here we have it.
So we fill it out, Michael Kennedy michael@talkpython.fm.
I told you, the letter a six times, so secure.
He's 18 and we heard of this on search.
Pretty cool, right?
And so all we had to do was go down here and fill out the types and we could pick the extra types.
We saw there are many options here.
Text obviously is the default but there's a bunch.
Add some nice placeholders, some required values some minimum length for characters, minimum values for numbers, and even that there was a required selection from our list.
Well, that feels like we covered a lot.
And this, these little, tiny attention to detail this little, tiny attention to detail is really nice.
I think it makes the experience from a user perspective feel much more professional and polished than, you know, just something went wrong with your form post.
Go scroll down and find it, right which is a very common behavior on the Internet.
And now that you see how easy this is it's even more frustrating, right?
Be like, "Oh, come on, just put a required in there.
"Just do it, please." Anyway, here's the HTML forms.
I think just a little attention to detail and you'll make them super, super-nice.
When we get to the server-side frameworks you'll actually see how to submit those and process them and store 'em at a database and whatnot but, you know, here's half the story.
The HTML half.

This wouldn't be a 100 Days of Code course if you didn't get a chance to write a decent amount of code yourself.
Now, we may be stretching the definition of code here a little bit when we talk about HTML but in this context I think it kind of counts.
We're going to talk about what you get to do for the next three days after watching the videos.
So, how do we get started?
Well, you start out by watching the videos and since this one comes last you probably have done that.
Maybe you're skipping ahead.
So go back, watch the videos if you haven't already done that.
This should take you, occupy you for a day, about.
Now, we're going to do something really fun.
You saw us recreate Yahoo before.
Now, we're going to create another early version of one of these tech giants, Google.
So you can see here, we've got the Google home page circa 1998.
Yeah, it's built with tables and center tags and all that badness.
It's really quite simple.
So, what your job is going to be is to recreate something that looks roughly like this.
So, I would say go back here to this link and go to the 1998 version and download this picture here.
But the rest of it you can just do with straight HTML and tables.
Yeah, that's right, tables.
We didn't talk about tables, so here's a little quick example of how you do tables.
You just need a table with three columns.
One here, here and here.
Actually, the Google page, that's a table row with column span three.
You can do that or you just put it out there as a div.
That might be a little bit better.
So, this will be great.
You can rebuild this over days two and three.
And then for day four, you're going to add a registration and sign in, log in page, if you will.
However detailed you want to get there.
Basically, imagine Google not like it was but like it is, where you have to create an account.
So, you're going to create a login form with the right validation and all of that kind of stuff just like we did.
That's it!
You've got three days of playing with HTML and maybe some really rudimentary styles.
Hopefully, you have fun on this retro tech tour and playing with this older HTML with of course, HTML5.

Hey, Michael here.
There's a change of plans.
Originally, this section was all about a hot web framework called API star.
However, over time in 2022, that web framework officially retired.
So we have a replacement that is the hottest API framework with a ton of traction, FastAPI.
FastAPI is currently the second most popular web framework in Python today.
And it's just behind Django with its trajectory having it surpassing Django very soon as well, making it the most popular web framework for Python.
FastAPI, unlike API star, is very unlikely to be a flash in the pan and learning about it will be a boost for you for a long time.
The following content is taken out of our modern APIs with FastAPI course as the first chapter on FastAPI.
I think it'll serve you very well here too.
Now, be sure to do the final exercises in the repo for day nine and onward, just like you did for the prior three days.
I have a fun project in there for you.
Enjoy learning about FastAPI.

It's time to write our first FastAPI API, we're going to create a simple application that will actually show us a ton of the moving parts of FastAPI.
Now, because I want to just focus on getting everything set up, I'm going to first have us build a simple little calculator API, you'll be able to submit a couple of numbers, it'll do some simple math, the programming will be as basic as it gets.
But what will not be basic will be all the things around FastAPI, we're doing the types being passed in the validation, the required fields, the error reporting, all of those types of things, we're going to focus on that.
And then we're going to come back for a second iteration and build a much more interesting and complicated API that would be well more realistic.
But let's start by building a really cool calculator app.

Now, for us to build our application, we need to create a new web project.
Now almost every web project that I know of depends on external libraries.
And anytime you have a Python library or Python application that depends on external libraries, you're going to want to start by creating a virtual environment.
And of course, this is no different.
So that's what we're going to do.
Here we have the demos.
And right now we only have chapter three, of course, all the chapters will be here by the time you're watching the course.
Let's go over here.
We just pop open a terminal right there.
And what we're going to do is we're going to create a virtual environment.
So we're going to say Python 3-m venv venv.
And now we're going to activate it.
So on Windows, you would activate it just by saying venv scripts slash activate.
But on Mac and Linux, you say dot to apply it to this shell, then venv bin.
Why is it been in scripts?
Pick that up with someone else.
I have no idea.
But we're going to activate it like this.
And you'll see our prompt change either way where it says now you're in this virtual environment, we can ask things like, which Python?
Yep, it is the one that we're working with.
Another thing we want to look at is by default, whenever we create a new virtual environment, there's a 95% chance that pip itself will be out of date.
So let's just go ahead and upgrade that real quick as well.
I'll just go ahead and do these things next time and not run you through it.
But first time through, I want to talk about it.
All right, everything looks like it is good.
And we have our virtual environment.
Let's go ahead and just come over here and open this in PyCharm.
Now on macOS, you can drag it onto the icon on the other S's, you just go to PyCharm, say file, open directory, or Visual Studio Code, and open that directory as well.
Alright, so notice down here, it says no interpreter, there's a chance that it might pick the right one.
Let's go and see which one is after it.
It seems to always change, it's super frustrating.
And the way it works, like sometimes it works and finds the local one we created, sometimes it doesn't.
This time it didn't.
So we're going to say go to our home directory, go to vnv, bin our scripts, pick Python.
Okay, now it looks like everything's working.
It's got a read through Python real quick just to make sure it understands all the types.
And then we'll be ready to get going.
Next up, let's go and create a main.py.
That's pretty common in FastAPI to have a main that we're going to run.
And I'm just going to right click and say run to make sure everything's working.
Okay, the last thing we need to do is we're going to need to be able to use FastAPI.
And if I go and run this again, it's not so happy about it.
The last thing we have to do is install FastAPI.
And we're going to keep track of our dependencies by having a requirements.txt.
And in here, we're going to put FastAPI.
For now, we're going to have a bunch more later.
And of course, it's suggesting it could install it for us.
But I'm just going to go to the terminal and show you what we would run.
More generally, we'd say pip install -r requirement with the virtual environment active.
We get all the dependencies of FastAPI at this time.
All right, it looks like everything's good.
I think it believes it's misspelled, which is unfortunate, but you can tell it to stop showing you that.
And let's just do a print, ""Hello, FastAPI,"" and run this.
All right, perfect.
So it looks like we've got our system set up, ready to run Python or running Python 3.9 at the moment.
If you're unsure which version you got, you can come down here.
We have 3.9.0 at the moment.
But again, anything from 3.6 or beyond should be fine for what we're doing.
And we're able to install and import FastAPI.
So I think our app is ready to, well, begin writing it actually.

Well, this was fun, but hello, FastAPI is not exactly what we were hoping.
We're hoping to build a web application that our programs and other services could talk to.
So let's go and build that.
Now, if you've ever worked with flask, FastAPI is sort of a flask derivative style of API.
It's not the same, but a lot of your intuition will work for it there.
So what we're gonna do is we're gonna create, we can either call it app, or I've also seen it called API.
Let's go with API.
We'll come over and say FastAPI and want to create a instance of FastAPI like that.
And we'll drop that magic there.
And then we're going to define some function.
This is going to be an API endpoint.
So we're going to have a calculator and we'll just say calculate like that.
And let's say it's going to do something incredible, like return two plus two.
And then in flask, you would go over here and say run, but that's not what happens here.
What we need to do is provide an external server.
And there's a really awesome production level high performance one recommended here.
And we're going to use uvicorn.
Now notice there's an error here because uvicorn is not necessarily included when we install FastAPI.
So that's the next thing to go over here.
Again, it's not misspelled.
This time I'll just press the button, let it do the install.
You'll see it happen down the bottom.
And we're good.
So now that's up there.
And so then we just say uvicorn run and we pass it the API.
That's it.
Except how does it know that calculate has anything to do with this and what URL should we use anyway.
So the last thing we're going to do is come over here and say API dot.
Now be careful, you've been doing flask, you might type route.
And that's fine.
But what you really want to probably say is I want to only respond to get requests HTTP get requests.
And then we'll pass over, you can see there's a few options here, a lot of stuff going on, but our initial usage is simple.
I'm going to do a get against API slash calculate like this.
All right, now let's try to run it and see what happens.
So let's just open this up and see what we get.
Now this is not the most encouraging response here.
What is the response not found?
Well, that's because nothing is listening on just the forward slash like the basic URL.
So we're gonna have to go to API slash calculate, we can fix this like opens as a crash sort of thing in a minute, but calculate spelling is hard.
But once you get it, right?
Yes, look at that for the answer is four.
And maybe we want to respond with some sort of JSON, right?
That's how API is are.
So we can come over here and we could say, result equals.
Let's just say, we're going to calculate the value, then we're going to store it into this thing that we're going to turn and actually, let's go ahead and inline that right there.
So we'll just straight up return that value, that dictionary out of there.
So we'll do our work, and then we're going to return the dictionary.
And again, and now, you can see if we go look at the raw data, we have proper JSON.
So when you're talking to API's, it probably makes sense to have some kind of schema, some kind of data structure rather than returning just the number four or some string.
Not always true, but generally, it's a good idea.
So we'll just start doing that here.
And we'll build on that, of course, as we go along throughout this course.
So that's it.
Let's just review real quick what we got to do.
We import FastAPI, we create an instance of the API.
And on there, we use that to decorate the functions.
In this case, we say we have a calculate function, and it's going to handle request to slash API slash calculate.
And right now, it doesn't take any arguments, we're going to work on that.
But right now, it just says, well, okay, you want some calculations?
How about two plus two?
That's cool.
And we'll pass that back.
We're going to return this dictionary, which is automatically confirmed to JSON.
And also, if you look over here, and we go to the network, we do this request.
I look at this one, you can see that the response content type assumes that it's application slash JSON.
So it says this is JSON, which is all the more reason that the actual thing that we get over here should be JSON, not just the number four.
So it automatically returns this as JSON if we pass the dictionary there by default.
And then in order for our application to start, we're going to come down here and say, you vehicle run this application.
And we could also add in here port, I'll be explicitly call out what what is the default value.
So you can see if you want to adjust them.
Here we go.
That way, if you saw if we put like a one here to listen on, or one and so on, or 8000.
Cool.
All right.
So this is this is simple, right?
This is incredibly simple to build a high performance API and get started, we just have to have a project, set up the dependencies FastAPI, new vehicle, create a simple method, and call UV corn run done, you've built an API.
Pretty awesome, right?

Now that we built our first FastAPI endpoint, let's just review what it takes to get a minimal API endpoint up and running in an application.
Pretty simple.
So we're gonna import FastAPI to use FastAPI, and then we have to have a server to run it.
So we're gonna use uveicorn.
And we create an instance of the FastAPI object, calling it API, create a function, some kind of method that we're gonna call, and we're gonna decorate it with HTTP verbs and their configuration.
So an HTTP get against API/calculate, we'll run this right here.
And then we just say uveicorn.run, we pass it the API object, we say the host and we say the port, and that's it.
We're off to the races.
We have our app up and running.

You can see that working with HTTP verbs, get, post, put, and so on, all of those things are right up in front when we work with building APIs with FastAPI.
And understanding what verbs are out there and when they should be used is really important when you're building RESTful APIs.
So let's just take a moment and talk about the four most common HTTP verbs.
There are others that we're not going to mention here.
You can go look at this link at the bottom to see them all.
The one that everyone who has interacted with a computer on the web is familiar with is get.
So get is just give me the information on this resource.
Like any time you're using a browser, most things you're doing are just click a link, do a get.
So the get requests a representation of a specified resource, in our case the result of that calculation, and it should only be used to retrieve data.
One of the really important ideas around get is that it's supposed to be potentially cacheable, whether or not you access it multiple times or whatever.
It shouldn't change the state of the system.
There was a really interesting bug in Wikipedia way, way, way back in the early days when there was a delete button, actually had a just a get request to delete a resource.
And then the web spiders like Google went through and started trying to index Wikipedia and started following those links and started deleting the pages.
So yeah, don't do that kind of stuff.
Get to just return things.
Think of get as read only.
If you want to change something, if you want to modify something, use HTTP post.
This is to submit some new object, some new data, which is going to cause a change in the server potentially.
So if you're going to log in, you're going to create an account, you might submit your username and your password that you want to create the account with.
And of course, the state that's being changed on the server as well.
Now there's a new account with that username and password that you can log in.
Delete similar to post in that it modifies things, but if I want to remove a resource, so if I had like a bookstore and I had slash books slash book seven, and we decide, you know, we don't want book seven anymore.
And the API could set it up.
So I do a delete request against that URL against book slash seven, and the server could respond by deleting book seven, no longer there.
Also similar to post is we have put now with post you say I have some data, I want you to create it on the server.
Basically what comes back is great, I recreated this and here is where it lives.
But if you already know where you want it to be in terms of the URL, think of like a blog post, blog posts, you might already know the URL where you want your blog post to live, but it doesn't yet exist, you could do an HTTP put and say, I would like to make this location have this blog post, right?
You don't let the server control where the thing gets created.
You you say explicitly server put it here.
This is not nearly as common as post but sometimes you'll see it used in these are the four most common HTTP verbs as far as writing APIs and you know, explicitly making them part of your API.
There are a bunch of others like I said at the bottom you can check out but get for read only posts for making changes, delete to delete put if you know where it's going.

HTTP verbs are what the client is instructing the server to do and telling what the server to do.
But the server has an ability to talk back to the client and say, yes, that worked, or no, that wasn't okay, because of this, or you don't have permission.
So the way the server communicates that is with HTTP status codes.
So if you are not super up on your HTTP status codes, you're going to need to really get those a few of those figured out to see exactly what you should tell all of your clients.
So a really good place to go is HTTP statuses.com.
Status is not status, there we go.
It should be status codes.
Now this is a really cool site because it doesn't just have them grouped and categorized, but it has details.
So before you saw we got a 200 okay, when we did a request for our calculate, if you click on this, you get all sorts of information about when you should do that, how you should do it.
Okay, so get represents, it's a good thing to return for a get if here's a proper representation, the payload sends a 200 response.
And it depends on the request method.
The meaning is basically that worked, or this is the same as get but no data and so on.
Now if you come down here, you can even see like some of the places you might use it.
There's like constants in Python, like HTTP.httpstatus.okay.
And you can use those if you like.
You can also come down here and we can see created.
This is much more common for HTTP post.
You know, once you've done a post like, hey, that worked, I created it.
And then you're going to say where it was.
All the 200s, these are good.
Over in the 400 section is another place where you definitely want to look so bad request about request is awesome, because it means you pass some data like invalid data or some other thing that's not good.
So we're not going to process that.
We come around here and say you don't have permission to do it.
Or this data wasn't acceptable.
So on.
And then finally, the ones we hope we don't see too much of are the 500 internal server errors.
So this is like the server crashed or some part of our infrastructure couldn't get to another part.
Nginx couldn't talk to unicorn, one of those types of things.
Definitely look through here when you're thinking about what should I send back to answer this request, especially if there's something that went wrong.
What should I send back?
HTTP statuses is a great place to go look.

So our calculator API is working.
We open it up down here, let's see what we got.
Remember we have a not found, but if we go to API/calculate, we're getting this data back and it's four.
Well how exciting and how generally useful is this calculator?
Not at all, right?
All we're ever going to get is four, so the answer is always four.
Maybe it should have been 42, but four it is.
So let's go and change this so we can pass some data in.
Now let's say we take an X, a Y, and a Z.
Those are three things we could pass in.
And the value is going to be X plus Y, like this.
For now we'll do times.
Maybe we'll do divide, it'll let us do something slightly more interesting in just a moment.
So we can go over here and if we run this again, we come up and say question mark, X equals two, Y equals three, and Z equals ten.
What are we going to get here?
Are we going to get, what did we say, X plus Y is five, and then times ten, this should be 50.
Are we going to get 50?
Let's find out.
No, we got nothing.
So we cannot multiply a sequence by a string.
Wait a minute, what's going on here?
Let's take away the Z for a minute, try that again.
Two, three, 23, as a string.
If you look at it real careful, notice right here there are quotes.
That is not an integer in JSON, that is a string.
So what's the problem?
The problem is everything passed around on the web is strings by default.
But something needs to say, no, no, no, we expect this to be an integer.
So if I go over here and I change this, and I use type hints, we say this is an integer, and this is an integer, and we say this is an integer.
Let's do this again.
Also notice it didn't say anything about any of these values being required.
But now, let's try it again.
Check it out, we got the value five.
If we look at the raw data, it doesn't have quotes, it's really a five.
Let's go back here and put R times Z, run it again.
Yes, we got 50.
Okay, this is working pretty well.
What happens if I omit the Z?
Look at that, we got an error message.
And if we actually look at exactly what we got, it says there's something wrong with the query string, and there's a Z that's supposed to be in there, but there's no Z in the query string, but we expected one.
And the problem is the Z is required, and the type of error is that it's missing.
So let's put our Z back.
Okay, so you're going to see when we pass these over, if there's no default value and there's no optional value, things like that, these become required.
But we could say over here that this is a 10.
There we go.
Now we don't have to specify the Z because there's a default value for it, but if we do for the, omit the Y, where there is no default value, then hey, guess what?
Y is missing, we've got to pass it over.
Alright, cool.
So this is how we pass data, at least from the query string, as well as you would see the path, like we could do like X, Y, like this, and make that part of the URL.
Doesn't have to be the query string, and you'd be doing this exactly the same way.
Okay, so this is how we pass data over to our API method.

We saw that if we want to pass data, especially from the query string or part of the URL path definition, where we can put variables in there, what we have to do is create the same variables or arguments in our function.
So here our calculate function now takes an x, y, and a z.
Now we're going to specify these to have concrete types.
So over here, these concrete types that have no default value, these are required.
We can also specify an optional integer and set it to be none.
That way we know for sure that no value was passed for z over here.
This value is optional.
We could pass none or just completely omit it, and it's going to come through with its default value of none.
But if we do pass some value for z, just like x and y, it has to be a valid integer.
I don't think we saw that in the example, but if we pass like abc for x, it would say, No, no, no, the type is wrong.
X has to be an integer, and we can't get an integer out of the string abc.
So we get this automatically converted to integers, and the types are validated that what we pass over are either completely missing, or if they are there, they can be converted to the types that we said they should be, including z, which is optional.
It either has to be missing or it can be an integer.

We saw that by default, our API method is going to return 200.
That was great.
And you can actually control it up here by setting the status code to say like 201 for some kind of post or something along those lines.
But what if we change this a little bit and we put a divide here and let's go ahead and change this to an optional.
Import that.
Oops, not like that.
Import it like this.
An optional integer.
And by default, there's nothing there.
If we're going to return, we're going to compute this.
How well do you think dividing, say, the number five by none is going to turn out?
Not so well.
And let's go a little step farther.
And let's actually kind of echo back the arguments as we saw them, right?
They pass something we want to say, this is what we got from what you sent us.
We'll put our X, Y and Z here.
So we're going to need to do some sort of test, right?
Value is going to be X plus Y.
And then we'll say if Z is not none, you might say if not Z, but yeah, if it's none, if not Z and if it's equal to zero, maybe we want to respond some other way.
So if it's not none, we're going to say value slash equals, you know, divide value by Z.
And we're going to return it.
Let's try this.
All right, we do a request right now.
Let's put a Z back first.
Z equals 10, like it was before.
Perfect.
So we got two plus three is five, divided by 10 is 0.5.
Everything's great.
Now that Z is in there, what if we say we omit Z?
That's okay, it doesn't crash.
It just doesn't do the calculation.
But what if we put in Z equals zero?
That explicitly is not good.
It's not that the Z was required.
It's just that this value of Z is bad data.
So how are we going to communicate that back to them?
So let's go over here and right at the beginning, we'll do a test.
We'll say, look, if you passed in a Z and it's exactly the number zero, well, this value is just not going to work for us, right?
How do we communicate that?
Could you come over here and say error zero Z, right?
Return that.
We return that.
Well, yes, we technically could return it, but what status code is it going to send?
What message is it going to communicate to the client?
200, everything's okay.
So yeah, not really.
We could do this, but it's not going to communicate well with the API endpoints.
Especially think of a program trying to talk to this API.
How is it going to know which is which, right?
So what we want to do is return a FastAPI dot response, and then we can just set two things.
We can set the content to error Z cannot be zero.
And then the status code, here's our HTTP statuses.
And let's just say 400 bad request, right?
So we're going to come in here and we'll say, look, if you give us zero, this is totally bad.
We cannot continue.
It's going to crash, but we don't want our server to crash.
We want to say the reason this has gone wrong is the data you supplied, not 500 server error, which we saw up here, internal server error.
This looks like the service broke, not like they gave us bad data.
Okay.
It's also very unhelpful to them.
So if we just rerun this, now we get an error.
And more importantly, more importantly, if we look at the network, 400 bad request, right?
400 bad requests.
But if we put like one, now we get a 200 A okay, and we get our value back.
And if we put no Z, that's fine.
Here are 200, just a different calculation.
So when we want to communicate one of these non-standard responses, not everything's okay, and here's your data, we're going to create a FastAPI response, set its status code, potentially set its message.
Now one of the thing you might want to do, might want to consider here, I'm not going to do it in this simple example.
Maybe we'll do it later.
Is if you look at this over here, our Z equals zero back.
So what came back is 400, but the type it came back is plain text.
Whereas the normal response like this, this comes back as JSON.
Let me just do it up here so you can see it actually in the network tools, right?
This is coming back as content application slash JSON.
So what you might consider doing is creating a dictionary in here like this.
I said I wasn't going to do this, let's just do this.
Like that.
It's a string, not some JSON.
And then we come over here and we could say media type equals application slash JSON, like so.
And put the commas in the right place.
There we go.
And that went a little wonky, didn't it?
Okay, a weird indentation got in there, but let's go try this again.
Here we got back this application is JSON, everything was okay.
If we got an error, notice the data we get back is still JSON.
This we can look at that.
The response is still JSON.
So that way the clients consuming it can always just get the document and look at what they got back.
It's not like sometimes it's text, sometimes it's JSON.
I don't know, I think that's kind of nicer.
It's up to you guys whether or not you want to follow up on that and do this.
But by default, FastAPI returns errors that are not controlled by you as JSON.
Like remember, if we click here, we get a 404, but the 404 is actually a JSON document plus the 404.
So maybe it makes sense for us to factor that into our error message as well and pass over this application in JSON.

We saw we could create a response and return it with some content that was JSON with a status code.
However, FastAPI actually has some shortcut ways to improve upon this.
So if we can go over here and say FastAPI.responses, and you look in here, notice we have a JSON response, a file response, an HTML response, plain text, redirect, et cetera, et cetera, et cetera.
So that's cool.
Let's go into the JSON one, which is up here.
And how is this different?
Well, it's going to automatically set this to the media type.
So we don't have to specify that.
And also the content is going to be set to be a string, which would parse as JSON, but some kind of dictionary, just a straight dictionary there.
And then the status code, well, we're still going to need to set that because that's kind of error condition like that.
Okay, let's wrap that so you all can read it.
This should do exactly the same thing as we had before.
Go over here and we refresh, everything is good.
But now if we make it error out, notice again, we get some JSON passed back here.
And if we look at the type, it's application JSON.
So same basic idea, but we just have to write a little less code.
We don't have to set the content type and all those things.
Also, if this content you wanted to pass back had come from some other location or included other data, you'd have to use the JSON library to turn into a string, which should be a hassle.
So this is This is much better.
If you're going to return JSON response, do it like this.

If you've received some input, some data from the user that you just can't process because it's not in the right format or something's missing, some of that is actually handled already by FastAPI.
So for example, if an X is passed over and the X is a string that can be converted to an integer, FastAPI will just handle that.
It'll return a JSON response with a dictionary that has some details about the error message.
But there's other times where just certain values are required.
Like for example, you have to have a non-zero Z if a Z is specified in this calculation, because you'll get a divide by zero.
So in this case, we got Z from the user and it's zero, so we need to tell them, ""No, no, no, this is bad.
If we just try to do the division, it's going to crash our server.
They'll get a 500 response.
They'll think our service is unreliable when really they sent us bad data.
But we want to communicate that back.
We're going to create some kind of error dictionary not shown here that we're going to return like error is the message, you know, Z has to be non-zero for division and so on.
We're going to do that as a FastAPI JSON response.
We're going to set the status code to 400 or whatever status code you think is the best fit.
And then the content to a dictionary, which will be converted to JSON and sent back along with the status code.
And that's it.
Super easy to return errors in this controlled way back to the clients.

There is one more thing I think we should check out and fix before we move on from this simple calculator API.
Recall, when we run it, we can go over and we can go to whatever this URL port is here, slash API slash calculate and pass x and y.
And that works great.
But if we just go to the server, something bad happens, we get a 404 not found, right?
See this?
And if we actually pulled up the dev tools, you would see the response code is 404 not found.
So it's not ideal for just the homepage or the domain name of your API.
So let's take the smallest measures here.
And we'll take bigger measures later to improve upon this.
Let's just do a little bit of tiny work here so that we can have something.
So let's go API, I want to do a get to forward slash, whatever we write next is what's going to happen when you just request the server by itself.
So I'm going to create a call index.
And I'm going to paste some text here, I'm going to have a body which has some HTML, the body, then the head, and then a div.
And maybe it even needs a HTML slash HTML to be proper, even though it would have worked before.
And we can just use what we knew before we can just return a FastAPI dot responses dot HTML response.
And what do we want to set the content is this body.
All right, that's it.
And we had a little continuation character there.
Now, now that's it.
Nothing else got messed up.
Okay, good.
So let me just rerun this.
I'm gonna click here now.
Yes, welcome to the super fancy API.
And now if we click on that, it takes us over to our actual API, because it just seemed wrong that you opened up the server and it just says crash, this is not working.
So here's a little tiny bit of work that we can do stuff we've already discussed of just passing back some alternative response besides JSON and hooking this.
Actually, this is the gateway to having a whole bunch of pages and stuff on our site.
If we wanted, we're going to talk more about using things like Jinja templates, and maybe even better templates later.
But for now, this will at least let our site work in a way so it doesn't look broken.
And then we can go on and work with our API here.
So that's a quick introduction to FastAPI.
You can see it's super clean, super easy.
And there's tons of neat stuff that we haven't even gotten to yet.

In our previous section together we built some really cool webpages we used some HTML5 techniques to build some really nice forums that work doing client-side validation and accepting just the right kind of input, giving lots of feedback.
But what we did not do is make those sites look good.
One of them looked straight out of 1996, on purpose and all the other ones we were going to build if we built them, they would look that way too because we hadn't talked about CSS and design and that sort of thing.
That's what this chapter is all about.
Taking just client-side HTML, whether that's generated through some kind of server-side framework a frontend JavaScript framework or however you get it, and making it look really nice and learning just enough about web design to be comfortable and getting our sites to work the way we want.
Often, web design can be something super frustrating for people who are like I would love to write a website but I don't know web design and I'm not a designer, I'm not a graphic artist I'm not artistic or creative or whatever you don't need any of that stuff.
You'll see there's a bunch of clear little steps and clear little topics that you need to learn and then you'll be quite capable with web design.
Then you go and find some assets, other places we'll talk more about that as we get into the chapter.
I think everyone can do web design and I'm going to show you what I consider to be the foundational core elements things you have to know to be successful here.

Let's start this chapter by asking a question about a beautiful website, airbnb.com.
Could you design the site if somebody threw a pile of images at you and said here's the type of content and copy we want on our site and the kind of behaviors?
Could you build this just without references and, you know, type it up?
If you can, feel free to skip this chapter and go on to the next one.
You probably are some kind of expert 'cause that is a pretty seriously cool page right there but if you'd like to learn how to build sites like this and you're like thinking Well, I'm not a designer.
When I see something that looks like this completely unstyled I don't know what to do with it.
It's just like ahhh, it's horrifying.
Right, maybe if you had a beautiful site you could adapt it.
Right, but if you start from truly from scratch and you want to turn that into something that looks like that Airbnb site you feel like there's no way.
Don't worry.
This is not a problem.
You can definitely learn enough design.
So what are some of the goals?
Well, first of all my goal is to help you not fear web design.
As I said in the opening a lot of people I believe consider themselves not to be designers and they're bad, quote bad at web design and they hold themselves back from building really cool things on the internet because they feel like it's going to look like crap and they can't deal with it.
So I want to teach you just enough to make web design your advantage.
If something like this is hard it's probably hard for many people and if you can master it well then that gives you an edge on most folks.
That's great.
So how are we going to do that?
Well, we're going to learn the CSS basics because once you learn the basics you can go learn another technique.
Oh, how do they get that huge image in there to scale like that for the banner?
Well if you know all the CSS basics you know you're pretty close to understanding that as well.
So that means we're going to study the CSS selector model.
We're going to study the box model.
This is how the size around elements can change padding, margin, borders, things like that.
Layout, or what in CSS is called a display mode.
This is really important for understanding how the elements fit together and flow together on the page.
Speaking of flow how do we get items to flow around other items?
So we'll talk about floating items and getting them to stick, like, to the corner of the page stuff like that.
And finally, your web browser comes with an insane amount of tooling to help you understand websites.
Not just the view page source but as you interact with them as they're being mixed together with JavaScript and multiple CSS files and things like that.
Now all of this is really a precursor to what are called frontend frameworks.
You've probably heard of Bootstrap but there's other ones like Symantic UI and whatnot.
So there's a ton of these front end frameworks and understanding CSS basics is of course an important part of working with them.
To build real sites I would absolutely recommend choosing one of the front end frameworks.
We'll talk a little bit about that at the end of the chapter.
So I just want to leave you with the idea that you can learn enough web design.
If you had to start with this thing on the right that would be tricky.
But thankfully, it's 2019 or later.
It's 1996, so we have all sorts of assets.
Today we have front end frameworks, we have font sets like things like Font Awesome for really cool graphics as well as a bunch of on demand nice fonts we can use.
Theme aggregators, graphic arts on demand you know, Fiver, 99 Designs, that kind of stuff.
So we have a ton to work with and I think you'll find you learn a little bit of CSS basics you'll be able to do some really cool stuff.

If you've not done a lot of CSS I think you'll be surprised at the power and flexibility of CSS.
The primary idea is that we have our HTML markup that has the content and CSS is supposed to style it so it controls how it looks and feels on the page.
So the look and feel is separated from the content.
A nice programming concept, right?
This place called CSS Zen Garden takes this idea and really puts it on display in a powerful way.
So, let's jump over here and check out a couple of sites.
Here we are at CSS Zen Garden.
You can click on 'view all designs'.
The idea is that we're going to go through an example that says CSS Zen Garden, The Beauty of CSS Design a demonstration of what can be accomplished.
A road to enlightenment, so what's this all about?
You can see there is a style on this page it's not super impressive or whatever.
Here you can see little logos you can see who are the contributors and so on.
However, basically, this was a challenge and the design challenge was to take this HTML and do something interesting and different with it.
I want to take you through five different designs here that take the same HTML but put different CSS styles and also, through CSS you can set things like background images.
So, in a sense, maybe some different images as well.
All right, the first one, is this one.
It's like this cool, old book.
Let me make it a little skinnier.
Right, so we've got this cool, old book and this is actually the same contents.
CSS Zen Garden, The Beauty of CSS Design a demonstration of what can be accomplished here's your road to enlightenment.
Look how cool this looks!
Here's the different contributors, versus let's say this section right here.
So, we had that before now we have it looking like a table of contents.
Really cool, right?
You can go and view all designs.
So, so nice.
And really creative I think.
You flip through those two sites here you don't feel like those are the same thing.
But they are, they definitely are.
Let's try another one.
Check this out, here's a cool little robot and, depending on the size, that thing either goes alongside the text or over the text.
So, here we have this robot here and as we move him around they do different things.
We can go in and check out notice how the robot gets scrolled over.
The road to enlightenment what's this all about, participation.
Go down and find those there's our folks again that we just talked about.
Notice they're in different places in the page.
The thing looks totally unique and different and has cool little animations.
Let's try another.
Here's another one.
It looks kind of like something out of a dystopian type of movie.
I don't know if it's good or not but it's definitely different.
Right, here's CSS Zen Garden, Beauty of Design demonstration of what can be accomplished.
So what's this all about, right?
There's all the pieces and whatnot.
Here's the people.
Okay, so quite cool, quite cool.
What about another one.
The Beauty of CSS Designs let's make this one a little wider.
I see some cool stuff happens as you change the size there make it a little skinnier.
This part becomes top most, there you go.
Pretty cool right?
Again, this is the same page.
The Beauty of CSS Design, demonstration, etc, etc.
Road to enlightenment.
Look how cool and different this looks.
Did they change the HTML?
No, not at all.
The design challenge was that you cannot change the HTML.
They just changed the CSS.
All right, last bit.
It's like this retro, Mackintosh type thing from way back in the day here.
Again, demonstrating what can be accomplished getting started, same thing.
Right, there's those little icons, very cool.
So, if you think of all these different sites being completely controlled, starting from this to be just, you know, specify the CSS and accompanying images that the CSS sticks into various places.
I think that's pretty remarkable.
Hopefully this inspires you to learn a little CSS because it's truly powerful and once you master it it's definitely a power that will help you on the web, everyday.

Let's talk about the structure of a CSS file.
Here we have a file, /data/site.css in our relative web path, and if we want to include this, we're going to put a link to the href is /data/site.css.
Don't confuse that with the javascript one where you have src for source, and then you say rel equals style sheet.
And, of course, you can have comments, you can see the top is sort of these old school C style comments.
If we want to style something, there's a whole language for how we do that.
So we're going to talk about a few of the core ideas.
If we want to style something like just the body the body tag, we just type body.
If you want to style all the hyperlinks, just type a.
If you want to style the divs, you type div, and so on.
So you can target a node by name, by HTML name.
So here we can set the background color to some hexadecimal kind of grayish, light gray, and the color itself to almost black, just short of black.
So we can just use bare HTML names to target nodes across the board.
Often, though, we don't want to target every hyperlink or every body, or every div we want to target some special thing.
So maybe we want to just focus on the main content of the page.
We want to give it a higher line height, 1.5 EM's is like 125% of what the default is.
And then the padding is padding all around you have 20 pixels of space on each side.
The way we're going to do this is we're going to specify a CSS class.
So when we say .
something, the .
means we're talking about class names.
So there's some element in the page with class equals content.
And we want all this to apply.
So you can see on the left here, it says anything like .name means the element class equals whatever that name is.
We can also express hierarchies.
So, for example, here we're saying .nav ul.dropdown contain within something, # profile image.
And this actually targets things that only live within this hierarchy.
There can be stuff in between, so we're saying something contained in an element with class nav inside that nav there's an unordered list, so the ul.
That unordered list has to have the class dropdown so applying the .
like that means it has both the node name UL and the class dropdown.
The arrow means directly contained in there is a profile image, and the # means id.
Whew.
So you can get these very precise targets of I want to go to the nav, and wherever there's a UL in there target it, and within the ul with the dropdown exactly the next thing has to be a profile image.
Make its width 64.
So when we have #, that means we're talking about a id.
So #name would be something with id equals name.
Finally, we can also express not just hierarchies, but and.
So here if we have no spaces, we have content.lead which means that we're both taking the class content and the class lead.
So it would be element class equals content lead.
So you can put multiple classes in there like that.
And this would some form of inheritance and overriding.
So we already have a content tag, now we're saying the content that has, also, the lead class, we're going to do other stuff in addition to what we did before.
All right, so there's a lot more to learn.
We're going to talk about it throughout this chapter but here are some of the core concepts.
Target by tag, target by class name, target by id, and combining these into hierarchies and and type statements.

Let's talk about the demo application that we're going to use throughout this chapter that lets us explore the CSS selectors and properties and so on.
So I call this Selectorville and now this is, of course, in the GitHub repo under Days 13 to 16, CSS Basics and Demos.
You can check it out.
It doesn't actually require anything special to run.
It's just a bunch of static HTML files and whatnot but let's go ahead and have a look.
Now there's this index.html page and the only thing this does is really provide navigation to the other parts that are relevant.
So let's go ahead and open this up.
So here you can see this is our design foundations CSS idea app.
We have things like CSS selectors, the box model layout, that's like display modes, and floating items.
Now notice, when I went over here and ran this in WebStorm it popped this up.
Let's just call this something a little cleaner like run site, or something like that.
So now I can see we can click run site, great!
So here's our app.
Like I said, you don't have to run it in WebStorm.
You just double click the index.html and it'll open up and go and we're going to go through all of these different elements and build up this app as we go.
Some of it's going to be pre-built, like the CSS selectors we just get to play with.
Others, like the layout and floating items we're going to built that up more from scratch.

Now that you're familiar with our CSS selector app.
Lets go click around, and see what we got.
Let's start by exploring the idea of selectors.
That's what we've spoken about so far.
So, here we have a static page, selectors.html.
And it kind of looks like my podcast, right?
Talk Python to Me.
So, you can see if we were to go to Talk Python and we were going to go to the episodes you'd see it looks very much like this.
However, what I've done is I've added this little section at the top that lets us type in CSS selectors.
And so, for example each one of these little blocks here is going to be a td, right?
A table data element.
If we hit that notice how they're all lighting up.
We can come down here and see that we have a whole bunch of little boxes lit up.
And we can do, show me all the table rows.
There are the table rows.
I could show me all the images.
Then it goes to the images on the page.
So the idea of this site is going to let us explore and let you experiment with creating selectors that will do interesting things.
Now, there's a bunch of HTML here you can go and open it up and look at it but its not super relevant to know what's going on.
Instead, I made this dialog using Bootstrap to let us ask questions like "I would like to see all the elements that are episodes released this month." So, they're going to have a class, this-month and it's worth pointing out the meaning of having a class is you know, there's a bunch of things potentially with that class but the meaning of an id is that it's supposed to be unique within the page.
So as you think about designing HTML if there's going to be exactly one thing like one latest episode, than maybe its an id but if there's multiple things like say, this-month or course-images or whatever then, of course you need that to be a class.
So, lets go over here.
I want to find all the stuff that has the latest-episode.
If I run that, nothing happens because this is an id not an HTML tag, right?
So, remember, in CSS, how do we say id?
Hash, so hash latest-episode there.
That's cool.
What if we want to know about the ones that were this-month?
Remember, that was a class.
So, to specify a class you say, dot.
That little tiny dot right there.
So, those are the ones that have run or released in March 2019.
See one on the 9th and one on the 13th.
That's pretty awesome right?
What else can we do?
We could ask for the body.
We could ask for the table head, th and because that's an HTML element we just put, th, and that selects that.
If you want tbody, for the table body there's the table body.
If you want all the things with class, button that would be this one, this one and this one that I can see.
This is a Bootstrap design style, click that and now all three of those change.
So, it's kind of better this thing can even change itself, right?
Let's clean that up.
Let's do one more thing, let's say we are interested in all the things that are course-images but ultimately we're only going to be interested in the one that has a certain id.
So, we come down here and say course-image and it's like that.
What if we wanted to select just the hyperlinks within there?
Well, the way we have containment is we put a space, so we put a little space right there and we put, a, for hyperlinks now the image itself is a hyperlink and that's a hyperlink.
Okay?
So, we're selecting that.
We could also say the ones that are only directly contained within there and it turns out that's how it is so it doesn't really make any difference.
We could also come over here and say that we want the course-images that are also have the name Pythonic.
So, that selects the element that is contained within the course-image that has id, Pythonic, and that's just the hyperlink there.
Okay, so hopefully this gives you a sense of what you can do with CSS and I really like the visual aspect so you want to see all the td's, the tr's the, this-month, things like that it lets you quickly, quickly get feedback on experimenting with CSS selectors visually.

We saw that we can target CSS classes using the dot character.
So, if we want to apply some kind of styling to something with a class content we just say .content, and within curly braces we set all the CSS properties.
This can apply to one or more items on the page or across the site.
However, sometimes you want to set some base styles that all content has but you might also want to say this little bit of content here, this is a lead element.
It should stand out above and beyond the other content.
So, we can do that by saying .content.lead.
So, this element would have both the content class and the lead class.
It says right in the name how this is going to work.
Cascading style sheets, so the styles cascade or you can create more specialized versions.
So, here we have content, and we have content.lead, and the more specific you are those are the styles that will override the other ones.
So, if we have some kind of element down here with both the class content and lead it's going to first get all the content properties and then anything in content lead is going to override them.
So, notice content says padding 20 but content.lead says padding 30 and if you look at the bottom, the little note says the applied style's actually padding 30 but the line height of 1.25 vm that is actually only set in the base and it still applies to content lead and we have the font size only set in the specialization that also applies.
So, you can see that all of the blue elements are being applied to content and lead and that's because they either come only in the base, or they're overridden or only appear in the more specialized version.
This is a super powerful technique to let you factor your styles, and to base elements and specialized elements and avoid repeating yourself within your style sheets.

Jump back to our design app play ground thing and look at the box model.
So the idea of the box model is this controls how elements fit together.
So if I jump over here first it's going to tell you you know how much space around maybe this hyperlink there should be how much padding, or even the table row you see the Grey thing.
You know what is the padding?
What are the margins?
So padding includes the background color.
Margins of course excluded but they keep other stuff you know pushed away and so on.
So let's go back here to our box model.
And here we've some content.
Right this black box is the content and it's contained within a container that has a gray background.
Neither of them have any padding border, or margin.
Let's go and play with that a little bit.
The padding and the border and margin both have colors so you'll be able to see.
So if I set this to something super big like 10px.
You can see the border width is now 10 pixels.
And that's the red part.
It's you know made the container that contained it get a little bit bigger because now the content within it itself is also bigger.
We can also set the padding let's put that down to like one maybe it's still hard to see still.
Say three, there we go.
Let's set the padding to 10.
And there we have the background color of this thing that we're setting the padding on.
It's not quite gray, it's like a blueish it's a little pink here.
Contains element we're not actually setting the border on this we're setting the border on the thing that contains it.
And we look at also like this in the dev tools.
So we've contained which is the black thing.
Notice the design tool are really really helpful.
Other thing we're setting with has the background color of light blue is the inside and the outside is this black thing.
Okay, so we're going to go and set the margin also set the margin be 20.
Here you can see, we got the overall thing that contains element with these property set has some space around it and then it has a border and then it has the padding and then any other content in here.
Typically you wouldn't do this we have the light blue and then the content.
Maybe it's an image or just something that's transparent.
So you don't really see the padding up here so much but I am going to make it super obvious.
When your playing around with this what it is.
So there's not a whole lot more to it other than if we go and inspect element.
We have this nice design tool that actually let's us see the box model right here.
And if we go click on the inside bit you can see right here the margin is 20 all the way around, and the padding is 10 all the way around.
The internal element is 300x200, and the border right there is 3.
And as you move around notice as I scroll it up a little for you as I interact with it over here it actual highlights those elements.
Additionally, like if you do it over here.
So you can do some really cool stuff to help understand the box model over here.
And if this is being inherited you can go to the computer tab and see you know where it's coming from and stuff like that.
So definitely leverage the dev tools to help understand this.
Come over here I've built this little web-page for you also to play around and visual see it as well.
And, of, one final thing.
We can go over here and set the values here.
So I can turn off the padding that's being set by the page.
I can change it to be 2 things like that.
So you can both visualize as well as play and enable all these little features, both.
You know this let's you play with regular web pages that don't have like giant input boxes to let you set these properties, right?
Alright, there is not a lot to the box model but understanding it is really important for designing how your page fits together, and how it looks, and make sure everything is spaced just right.
One final note on the CSS box model it does not apply to elements that have inline as their display.
So if we go over here to this thing.
We change it, display, to inline.
All of a sudden, look all the stuff falls apart.
It looks totally weird, there's I guess I probably maybe set that on the outside.
I don't know.
There's all kinds of stuff going wrong with this now that it's inline.
It has to be in my block or blocks something like that.
Talk more about that in a minute.

Let's review how we control the box layout in CSS.
So we have our CSS file over here.
site.css, and we're going to apply this to the lead.
Now this has to be something like block or inline-block for display, otherwise it doesn't work.
And then we just set things like the padding.
I'm going to say padding all the way around is 5.
Oh except for the left, make that 10.
Now we say the margin all the way around is 5 as well.
Then we can set a border by saying the width the style, it could be dashed or solid things like that, and then the color.
Right, so that could be hexadecimal or something written out that CSS and web browsers understand, like white, gray, black, so on.
On the padding one here, there is a way to specify I want, and one line padding is like 5, 5, 5, zero, sorry, 5, 5, 5, 10 something like that.
And I always forget, is it top and bottom left and right, left, top, bottom, right.
Whatever it happens to be.
So I'd like to be more explicit and you know, explicitly call out when I'm doing something funky like setting the left to be different.
But other people like to mix it all together.
Right, whatever works for you.
Feel free to roll with that.

Let's look at applying this box model and controlling the layout or display style of a couple of elements to do something kind of mind blowing if you haven't seen it before.
So I want to focus on the layout.html page and it has this thing in here so this is an ordered list so like 1, 2, 3 and then a bunch of list items and each list item is a hyperlink.
What I'd like to do is turn that thing into a navigational structure stuck at the top of the page and we're not going to touch the HTML at all we're going to do this purely with CSS.
And then there's this page content stuff at the bottom and that's just there to take up some space and make it look legit.
So over here we have our page loaded up let's click on layout.
Well, that's no surprise, right?
It's an ordered list, 1, 2, 3, four of these items and it's kind of like a little navigation and you can navigate around and go back home and so on.
By the way, here's a bunch of Lorem Ipsum that's like fake text put out there but it's Hipster Ipsum, which is kind of fun.
So we have sustainable twee slow-carb whatever iPhone kale chips, things like that.
That's a little bit of a humor there but the idea is we're just going to focus on this, right?
This just lives here as, theoretically the content of the page with some important message for everyone.
So we're probably going to do more CSS here than anywhere else.
Let's start with going over to our layout.css file and if you look, back here you can see at the top we're including this extra CSS file.
So it's going to apply all the styles we put there automatically.
So I made a couple of notes things I would like to do.
So let's actually work on this one first I'll put it at the top.
So I would like these list items displayed horizontally, okay?
So we look over here, they look like vertical they have the numbers, their display style is technically the list item which gives them their number and so on.
So let's just go over here, and I want to say actually, let's give this an id of a class of nav.
I'll call it custom nav.
So it doesn't clash with anything that might be in somewhere.
So we're going to go over here and say I would like all the things contained within custom nav that are list items I want them to display horizontally.
So I can say display as inline and it can be either inline or inline block.
I want to set padding and margin and stuff like that so we're going to go for inline block and with that minor change, let's see what we get.
Well it kind of could be like a nav thing up at the top, right?
Doesn't look like a nav, but it could be.
We also want to set the padding on them.
I'll stick this is here just so we remember I won't do that just yet.
The next thing I want to do well let's change this over here let's put this 1 up that's where I want to change the background of the nav, so we could just target ol but let's do custom nav its background color oh my goodness, cool thing lets us pick all the colors that it's seen us use elsewhere and then also, you can come over here and get a little wheel to change it but we're happy with that so let's see how that looks.
Looking pretty good, yeah, looking good.
Don't really like the color, the blue and the fact it gets darker and get underlines so let's keep rolling with this.
Let's make the navs, the hyperlinks bold so that's easy.
Come down here and say I want to target all the hyperlinks contained within the custom nav.
I want to just say font weight is bold there we go, good and bold.
Not sure we really want it to look that way but, oh no, sorry, this is supposed to be within the page, so that would be within page content.
So let's go down here and change that to hyperlinks contained within the page see if that worked.
So notice down here this is not bold.
We refresh.
Now it is.
Okay, great.
What else do we want to do?
We want the hyperlinks to have that color the hyperlinks in the custom nav to have the color #AAA So color, #AAA, just like that and it's pretty good, but if you have visited them but we also want to make sure if you visit them for some reason I think it's not really recording when we visited it we can apply what's called a pseudostyle, I believe come down here and say visited so put the colon saying, not just this item but when it has the additional property it's visited also make it that way and we want the items here to not have an underline.
So if you over here you can see underlines and maybe that's good if you want it, I decided I don't, so we want text decoration.
It's going to be n1.
Come down here now, notice you still get the pointer but nome of those.
What else do we want to do?
It says we want the hyperlinks visited when they're actually being visited like when you click on it, if you watch it's kind of hard to see maybe if I click on the layout when I can get it to work.
No, not easily.
But when it gets into this active mode we want it to have a yellow.
So let's go ahead and set that style.
I'm going to try and get it to work.
So we have active as 1 of its pseudostyles and then we just set its color we'll just take a quick way out and say yellow.
Now, see really quickly as I click on it it's yellow?
That indicates, or it tells people hey, you just clicked that.
Super!
Are we out of items?
I think we are out of little descriptions.
We also want to give a little spacing like it's hard to see home, CSS selector, CSS box this is all just going together, that's not super good.
So let's set the padding to be 5 px but the padding right to be 10 px.
Let's try that.
There we go, that looks like a navigation, doesn't it?
I really like it.
Maybe even a little more space, but it's okay.
I can see our little navigation is working quite well.
Did we touch the HTML?
No, not at all.
Remember what it started out as.
Like, let's do this.
It started out looking like that, right?
It looked like just a ordered list 1, 2, 3, four.
We added, you know, pretty small amount of styles and now we have a cool navigation right at the top of our page.
So that's how you can control layout.
We change this from list item to inline block to turn it into this horizontal strip and then we set a bunch of its box properties the padding and whatnot, to make it look good and then did a few other cool little tricks around pseudo classes and things like that with the hyperlinks and so when we click this it turns yellow.
Pretty cool huh?

The final thing I want to look at here are floating elements.
So let's go over and look at this page.
Now right now no items are floating but what I'd like is I would like this thing to be over here on the right and this message and any other content in there to flow around it.
How do we do that?
Use a table?
No.
The answer's almost never use a table.
So what we're going to do is we're going to change the style of this dune cat image here and we're going to float it to the right and then the message is going to go around it.
So let's go here and look at the HTML.
This is the part that we're interested in.
So we have this top

A quick review of floating elements.
Here we're saying, all images on our HTML page, they float to the right.
Now, that's a little broad, obviously, but in this tiny HTML fragment, it makes sense.
There's a couple rules to keep in mind.
One, that thing that is going to float to the right has to precede the stuff that floats around it, that is on its left.
So, we want the message to be on the left, and the image to be on the right.
The image has to come first.
If it was the other order, there'd be one line with the message, and then another line with the image.
Also, we saw that this floating is perpetual; it goes to the rest of the page unless you say, until here.
So, when you want to say, no more items float here, then you add this clear equals both for the style, and that says, Dune Cat, you're not floatin' around anything else after this, and it keeps it contained within the top div as well.
For some reason it's bigger, it will actually change the size of the top div, as opposed to shooting out of it as we saw before.

Well, that's about it for what we're going to cover in this chapter.
But I do want to highlight some things that I think if you really want to get into web design further that you should go research and explore.
So, grid layout: Grid layout is so important.
Websites are intended to be mobile-friendly if not mobile first.
At least, they should work on a phone.
And so, these responsive grid layouts are really important.
They're kind of like, table-like feels and you say, and it has three columns except for if it gets too small, it's going to actually flip, and just put them one after another.
So they work really well on small screens.
You'll find this in things like Bootstrap but also many other places as well.
Flexbox: Flexbox is so cool.
Imagine you want to have a little part of the page at the top, just stays there.
A little part of the page at the bottom that stays there and in the middle, you want something to just take up the space.
This is a new-ish, somewhat new CSS property that allows you to do that docking style of layout.
It's really, really cool.
Typography and fonts; having the right fonts on your page actually makes it look much, much better.
But it goes beyond just selecting the font face.
There's things like, how much space between each line?
Probably shouldn't be 1.0, maybe it's 1.2 or something like that.
How much space between the actual characters?
There's a lot of these settings that get set behind the scenes without you really realizing it when you use things like Bootstrap, and whatnot.
But, knowing about them will help you make your page look much, much better.
Table styles; you shouldn't use tables for design but if you have tabular data you absolutely should put it into a table that's what it's for, and there's some really cool stuff you can do to style the tables.
Themes; these are Bootstrap themes and other UI framework themes, you go out there.
Search for StartBootstrap, WrapBootstrap, stuff like that.
So if you're using something like Bootstrap grabbing one of these themes and dropping it in there is a really nice way to make it look much, much better.
Start from some design and just tweak it with your actual data.
We talked about CSS, but we haven't talked about higher-level languages that let you write better CSS like Less and Sass.
I'm a fan of Less, and what it lets you do is define variables, and also, write in hierarchy.
So you could define, say, a top div section and you want to style it.
If you put another style inside of there that applies to things that are hierarchically contained within that top div.
So, there's some really nice features.
Also, lets you include a bunch of smaller, individual Less files, and compile into one giant CSS in the end.
So, that's a nice way to write more maintainable and understandable CSS.
I don't know you necessarily need it but it's not bad to know about and work with.
Finally, definitely, definitely look at Bootstrap or some of the other Front-end Frameworks, like Semantic UI.
They allow you to use a bunch of pre-built styles and the themes I mentioned before are not to be discounted.
The ability to go and find oh, here's a really cool admin theme with graphs and charts and layout that I already want, I just need to put my data in there.
That will super-speed up your projects.
So, check out Bootstrap and the associate themes or if you want, other UI Frameworks as well.
Finally, there's more to CSS itself.
I really like this book, "CSS: The Missing Manual." I felt like, once I learned the stuff I'm talking about in this chapter, and some of the other items covered in this CSS book, the web was no longer a scary place that I felt like I had to bumble around in.
Like, well, I'm not a web designer, but here's a webpage it has some stuff, there's a box here, you can work with it.
But no, I can really build professional, beautiful websites even if I'm not an artist, or super creative or have any ability to work with Photoshop.
You can build really nice stuff if you understand CSS.
So again if you want to dig in further, check out this book.
There's probably a newer edition but I really like this one, and I found it to cover the right stuff without being too deep and too much, you know, getting buried in all the details that you're never going to use.

Now you're a CSS expert, it's time to get your hands dirty and do a little bit of writing in CSS and styling some webpages.
So you've already done day one if you've made it this far, you've watched the videos.
That's really all we had on store for you on that first day.
Now, for day two of this four day segment we're going to be playing with CSS selectors.
So, you remember that selectors page where it had the episodes from Talk Python listed there and you could type in stuff?
So basically, the idea is to go open up that page play with the selectors and open the dialogue, see what's there and just see what you can find.
Try out different things, what happens if you have a space?
What happens if you don't have a space?
What happens if you have a .
or #?
Things like that.
So, experiment, play around, and then go a little further, look at the HTML source and figure out some elements and say, well, what selector would I have to use to get just this item or just that item?
All right, so you can play around and come up with a little challenge for yourself.
I'd like to select these three things, how do I do it?
So on.
All right, so that's day two, play with and understand CSS selectors.

Day three of this four day chapter.
Again, this a hands-on day for you.
So the idea is to rebuild a navigation out of an unordered list.
So here you have a graphic, this is the top banner of talkpython.fm, one of my podcasts.
So, what you're going to do is you're going to take an unordered list like this one you have down here of course, actually put it in HTML source don't just copy it over and your goal will be to apply CSS styles to it until it looks more like what's up here.
Each one of those are hyperlinks that's also a hyperlink from Font Awesome more about that in a minute.
You could try to style this thing out that's one hyperlink but it has a different styles and it has hover behaviors and all sorts of cool stuff like that so try that out for real and pop over here and I'll show you what it means.
So if you hover over it and notice how the little quotes glow, all right?
They do their thing, that just takes you home.
Feel free to download this image or just hotlink it, whatever you want to get that image in there as well.
And then finally, there's this little search thing here and this is actually a font from Font Awesome Font Awesome's a great resource and basically lets you include just HTML elements that come in as styled fonts and what's awesome about that is they scale perfectly to all sizes and you can make them any color you want with CSS.
If that was an image, you couldn't style it, right?
But because it's actually a font, that looks like an image there's thousands of these at Font Awesome super good resource to know about.
So rebuild this top section don't worry about the little node bit.
You can just take an image in there or just leave it blank, whatever it's not really the point it's just that top nav bar you're supposed to work on today.
So your goal for today will be to build a navigational unit out of an unordered list.
Now should you really do this?
No.
Not for a real site, this is actually using bootstraps so, for example, notice if I make it smaller some of them go away make it smaller still, becomes this pop-out menu and there's all sorts of advantages to using these web front-end frameworks which we'll talk more about on day four.
So probably this is not the best use of actually creating a nav but it's not about I'm teaching you how to build a nav for your site it's more the idea of learning how to style these things to control them and here's a pretty cool application of that.

On day four, it's basically a fun little research project.
So we didn't get a chance to talk about Bootstrap even though I mentioned it several times.
It turns out to be a really important front end framework in my mind, as a stand in for all the choices you could have of various front end frameworks.
So I'd like you to just take a little bit of time and imagine something, some product or service, or something that a company you work for is creating, and you would like to have a cool website for it.
So there's a site called WrapBootstrap, and the idea is I want you to go over here and look through the themes and see what's out here, and find three themes that you would be able to start from for building your site.
So imagine, I'm over here, and these are always really impressive, and these.
You can download it and play with it, and have all these cool little live animations and so on.
Anyway, go through, maybe use the categories, or just click through the popular ones and find three that you might want to use.
And the idea is, you come over here and pay $39 or come over here and pay 15, and have access to a professional looking website immediately, before you spend hours and hours laying around trying to get something to look like you want.
Much much more productive to start from one of these and then tweak it, put in the live elements that we're going to talk about when we get to server side code things like that.
For day four, just do a little bit of experimenting go look through the themes section, find a couple that might match up with this imaginary idea that I asked you to come up with.
All right, that's it.
Hopefully you enjoyed the web design section and you feel much more confident and comfortable with CSS.

G'day, and welcome back to 100 Days of Web in Python.
This section we are going to talk about calling APIs in Flask.
That is, we're going to do simple API calls off two random APIs that we'll discuss later and we're going to present that data in Flask.
So it's all going to be wrapped within a Flask app.
It's quite simple but there are quite a few concepts that we need to cover so these will be pretty dense days.
So get ready, click Next, and let's dive straight in.

All righty, so here's the plan for the next couple of days.
We're going to be dealing with a couple of APIs, we're going to specifically use one around Chuck Norris jokes and then a second one around Pokemon.
For Day 1, you'll just be watching videos 3 till 6; that involves setting up your environment learning about sending objects and variables to your Flask template, and this is all to do with the Chuck Norris API.
It's pretty simple.
Follow along as well as you can.
If you can't do the coding at the same time because you run out of time, and that's okay then let that flow into your Day 2.
Your Day 2 is going to be just coding.
You're not going to watch any videos unless you're just referring back to Videos 3 to 6.
In Day 2, you will be catching up with the code that you may have missed on Day 1 otherwise I'd actually like you to expand on the app.
Nice and simple, just go and create yourself a menu bar.
It's not really Flask related other than just editing that base HTML file which you'll learn about shortly.
If you have time on Day 2, go and check out the list of APIs that I've got here.
It's pretty cool, there are some pretty fun ones in there.
Choose something other than Chuck Norris or Pokemon; please don't touch those.
That's what we're using for the course and see if you can just get some static data from there and print it to your web page just practicing everything you've learned.
Day 3 we're going to move on to Videos 7 through 12.
There's quite a lot of content so don't worry if you don't get a chance to code unless you can keep up with the coding.
The important thing is that you just watch the videos and learn as you go.
Day 4, continue building on Day 3.
Do the actual code now, so follow along build the app, and this is all to do with the Pokemon API.
I won't spill the beans yet, so you can wait till you get to the data actually figure out what it is you're doing and as for the remainder of Day 4, just go ahead and follow these instructions here put in some error checking, check out the rest of the API Endpoints, and if you're really brave have a go at returning more data to the app that we created than just the Pokemon name.
See if you can get their nature their form, their habitat, whatever else is associated with the Pokemon.
And that's it, that's Days 1, 2, 3, and 4 of Calling APIs in Flask.
So head on over to Video 3, set up your environment and get coding.

So to begin, we are going to set up our environment just like we did in our previous Flask work.
What I am going to do, just to make things a little bit simpler, and you're welcome to simply copy the code right out of the GitHud repo but what I'm going to do here and show you is I'm going to actually just copy our entire Flask project from day one and we're going to actually extend onto that.
So all of these API calls that we're going to do is going to be within the same Flask app that we created at the start of this entire series.
So let's hop into that first.
One thing we haven't done here is actually created a requirements.txt file so let's do that quickly.
Okay, and when we do that, that takes all of the packages and modules that we've installed into this virtual environment here dumps it into requirements.txt file and then we're able to just simply pip-install from that requirements file.
So we'll deactivate the virtual environment now.
Head back.
Let's simply do a recursive copy of this directory.
We'll delete the virtual environment after we copy and created as new just in case.
Let's create a directory called 2-flaskapicalls.
Now with that copied, we can hop into it now.
There's our venv directory, let's delete that.
Just for good measure, let's also get rid of pycache just in case it is referencing anything from the previous app.
All right, do an ls and this is what we're left with.
That's perfect, we can go into program we should have our __init__.py files let's get rid of this pycache as well.
Then we have our templates folder.
That's everything we wanted, so that's perfect.
All right, now that we're in this folder let's create our virtual environment.
We'll call that venv, and with that created let's activate it again.
Venv scripts activate, remembering that if you are on a Mac or something Unix-based you'll have to type in source venv/bin/activate and that will get you your virtual environment activated.
All right, now that that's activated, let's just see yes, we have our requirements.txt file.
We should also have our .flaskenv file which we created as well, that was for the Flask environment variable, if you remember.
Let's install all of our packages from requirements.txt We do that with pip install minus R requirements.txt Of course I have a typo there.
Let's try that again and there we have it.
It'll just install all of the packages that we wanted Flask_env, Python.env, and requests and everything.
So we'll let that happen and then we can do a pip freeze and that will just print it all out for us.
We have Flask, Python.env but we don't actually have requests and that's because we didn't use requests in the last module of introductory Flask so let's install that now.
So pip install requests.
Now we can actually pipe that into our requirements.txt file so let's, just to be sure, pip freeze.
There we go, and now we are ready to go.
This is everything we need to get started so make sure your environment is set up just like this and let's get crackin

Before we get started in actually playing with APIs we just need to quickly, quickly cover off how to pass variables from our Flask app the actual Python code, through to that Jinja template to display it on the webpage.
So right now we've just been passing off standard text through print commands.
This time we are actually going to pass off a variable that can change.
So in this example we're going to use the date.
So using a date time string we're going to pass that off to the webpage and then display that.
And that's a great example because the date time string will change every time the page is loaded because the time keeps ticking, right?
So to do that let's edit first our routes dot PY file.
That's where we're actually going to do the number crunching or the code so to speak.
Once we're in this file because we are going to actually put the date time returning on our index page that's where we want to display it.
We need to put our code within our index function.
As this is just a simple date time though if you really think about it we just need to return that string so there's not much that we need to do in here.
All we really have to do to keep it super-simple is import date time and then assign the time to a variable.
So let's import datetime.now from datetime import datetime.
And then let's just create a little time object called time_now because we'll take the time_now.
And then we will just quickly do datetime.today.
And what that will do is it'll get date time dot today, it assign it, it convert it to a string and then assign it to the time_now variable.
And then all we have to do is return that.
So if you think about it we are returning with our render template index.html.
We are also going to pass off a variable.
So that will go in these brackets here just after this one.
Now, just let me type this out before I explain it.
Now, this looks a bit confusing but what we're doing is we're actually sending our time now variable, this one here, to our Jinja template as a variable called time, as an object called time, okay?
You might see in other Flask apps where these are named the same thing.
In other words, time_now equals time_now would be a traditional way of doing it but just for demonstrative purposes I'm going to name them differently and that is so that you can see which variable is which.
So this one here, time_now, is the one that we're specifying up here in our Python script.
And time is what we are going to call in our Jinja template.
All right, so that's all we have to do to update our routes dot PY file to send the date time object over to our Jinja template.
So let's save that.
Let's head over to our templates folder.
And let's have a look in index.html.
As you can see from our previous Flask section we have our index, everything that's unique to our index.html page, in between these block content tags.
And all we want to do is have a message that says that we are printing the time.
So we can do that underneath here.
Let's just throw another p tag in or how about we throw a h1 tag here.
The current date is, and as we learned from the previous videos, anything that is Python code is going to be within these types of brackets and then we close it off here.
Now as I mentioned in the previous file the variable that we are sending off to our Jinja template is the word time, okay?
So we actually put in two of these brackets to indicate that we're playing with a variable here.
I know it's hard to see with the highlighting there so let's just space that out.
And we throw in the word time.
That's our variable.
So because this is an actual object or a variable that we are calling from our Python script it goes between these double curly brackets.
And that's it.
So the current date is, and then we can throw in that time, and we save that, and we run our Flask app.
And with that running let's bring up the browser and take a look.
All right, and here's our website running.
We are on the 100 days page up here so let's click the home tab and this will initiate the index.html route.
And there we go, the current date is 2018 October the 11th, and there's our timestamp.
Now, one thing you will notice is if we move back to the 100 days page and then move back to our home tab, the actual time is not changing.
And the reason this won't change is because of where we've specified that assignment variable.
If we just cancel our script we go into routes dot PY and this is being specified at this level.
It's being specified outside the route outside the index function.
And what that means is it is only being assigned when the Flask app is run.
So if we cancel the Flask app and then rerun it this will update with the time.
All right, so that is why that won't change until you close your app and relaunch it.
If we actually want this to run every time that page is loaded, we have to put that within the index route, the index function here.
That way every time this is called it activates down here.
So let's just copy and paste that.
All right, there we go.
And right quick, Flask run, bring up our web browser.
All right, back to the home tab.
There's the time, 9:57 p.m.
23 seconds.
Launch it again, it's gone to 27 seconds.
And that's how we can redo that every single time.
And that is how we pass a variable off to our Jinja template.
Just remember we have the render template that we're returning and we're just specifying the variable there.
We put the actual Python variable on the right and we assign it to a variable that we want to call within the Jinja template.

Now that we know how to pass variables over to our Flask Jinja template we're ready to start pulling data from an API.
The API that I've picked for this first attempt is kind of nonstandard, but let's take a quick look.
There we have it, the Chuck Norris API.
This is a pretty simple and cool API.
Just for printing out Chuck Norris facts or jokes, or however you want to look at it.
And it's as simple as, pointing to that URL there to that endpoint.
All we have to do is do a request of that.
api.chucknorris.io/jokes/random and that will return us a random json outputted joke.
So we'll have the icon URL, we'll have the id the direct URL, and then the value.
And you can see by digging into all of this the only thing that matters to us is to return the value.
At this end of this, we are going to have a webpage called "Chuck" that when you load it will simply return a joke, a random joke from this Chuck Norris API.
So back to our terminal here we really need to do a little bit of planning, okay?
You need to visualize what you're going to do before you just start writing code because it helps you get a full understanding of the picture that you're trying to paint.
In this instance, as I said, we're going to be using the Chuck Norris API to get a joke but in order to do that, we actually have to split our code into two sections.
Remember, we have the part where Flask takes your joke will take our joke, and pass it off to the Jinja template, but then we also have to pull the joke down as well.
So that's going to be two separate functions there.
One is going to be our decorated app dot route function and the other one is going to be our get the joke function.
Alright, so to do that, let's jump into routes.py and I think a great place to start would be to actually get our joke first.
Now I've written this up in advance in the Python shell so I've tested it and it works.
You can just trust that when you write this in it's going to be okay.
If not, feel free to actually open up Python shell and punch these commands in.
You can get them from the Github repo and follow along that way.
As I said, we're calling it "Git Chuck Joke," and we're just going to do a standard requests dot git and we're going to punch in that Chuck Norris end point there.
That's the one there, and that's it and that will return that json app that we saw on the webpage into the variable "r" or the object "r", and then we just do I dot json and we know that we're going to return the data value.
And what we've done there is we're returning the data that belongs to the value tag in that json app so we'll bring that back up and we can see we have the value there.
So what we're doing is we're getting this we're converting it to json, and then we're decoding the json I should say and then we are getting that data there that is signed to the value key.

After we've created that little function called get chuck joke, we need to actually create the app.route for the chuck route.
And to do that, we go into routes.py as we have many times before and we're going to create yet another route here in our list.
But before we get started, because we have done requests down here, we do need to actually import that so import requests.
And following on from that, we can create our route.
So, app.route.
We're going to call the URL that we access this page on Chuck, and we'll do the same for the function so def chuck.
And all we are doing is returning a joke and that joke is called using the get chuck joke function.
So when this page is loaded or every time you load this page you are going to run get chuck joke.
That will run the code we ran in the last video to pull the joke down, it will assign that to the joke object here and we are then going to return that joke object to our template, using the same thing we've done before which is render template.
So, we are going to create this page shortly so chuck.html is a file we will be talking to.
And let's go across and joke=joke.
So, the joke=joke is similar to what we have up here in our date time, where we have the time now and then we're parsing that off to their jinja template as time.
In this instance, we are using the joke object here that we've just created here and we're parsing it off, also using the exact same name to the Jinja template as joke.
And that is all.
So now that we have that, we can let's just give ourselves an extra space here now that we have that, we can actually create the template so let's do that.
Right.
Go into our templates folder.
And we'll copy index.html, because it's pretty similar to what we want to do here with chuck.
So, copy index.html to chuck.
Let's vim up chuck.
And let's get rid of all of this.
So we have our block content this is the content unique to this page and we're extending again from base.html.
Give ourselves a h1 tag, just as a nice little title and we're going to call the page Chuck Norris Jokes.
Right, and now what we have to do we have to take that joke object the one that we just parsed off using the render template to this template.
We are going to take that joke object and simply print it within a paragraph tag.
So we can put the P there for paragraph open our bracket there, throw a second bracket in and notice again, the double left-hand brackets means we are about to reference a variable or an object and we closed it off there, we're referencing the joke that we're parsing to our Jinja template and then we close it off.
And that's it.
So we can save that now.
So assuming I've actually done this right and that's a pretty big assumption no I'm just kidding, let's run the code.
And that's always a good sign that means nothing died yet.
I say yet on purpose.
So let's bring up the website and here is our 100 days page, still up.
Let's get rid of that.
Let's open up Chuck and we have an error.
And of course it's a nice little typo.
Instead of running chuck, I've written check.
So let's get rid of that.
And quickly replace that, make sure it all checks out.
Get chuck joke, yes.
Let's cross our fingers and try again, Flask run.
Let's go back to our page reload the page.
And there we go.
So Check, Chuck Norris Jokes, geez, now I'm saying check.
Chuck Norris can finish Mario Brothers without using the jump button.
So incredibly lame, I did not promise that these were going to be good jokes, so please don't hold it against me.
Now you can see, hopefully this next joke is okay.
I'll leave that to you to read I'm not going to bother reading it.
But again, pretty silly, but you get the hang of it now.
So the idea is every time we reload this page we are running that code that was in our app.route decorator function for this page and that is to simply talk to the API get a random joke, print it to the page.
You can do this as many times as you want.
And that is the general approach to hitting an API using a Flask app.

Welcome back.
This time we are going to work with the Pokemon API.
This one's actually pretty exciting because it's a lot of fun.
There's a lot of data for you to play with it's not just pulling some random joke from the Chuck Norris API.
That was a simple response, right?
With this API, we actually get to choose what kind of data we pull out from the database and that's probably the more common scenario you're going to face when you're using API's in your Flask cap.
This is really cool because you get to choose Pokemon names you get to choose anything you want that they have.
So we'll go into the documentation's into V2 I'll show you what we're going to pull down.
We're looking at Pokemon colors and what we're going to do here is we're going to allow the user on our website to enter a certain color and it is going to send a request, a get request after this API with that color substituted in here as the ideal name, and then it's going to return us a list of all the Pokemon that have that color as an attribute and then it will print that on our page.
So it's a simple submit something from the user so collect that from the user, submit it to the API return result, print it on the page.
There's a couple of little steps there in Flask that we haven't covered yet and I will spend a little bit more time on that Because we've covered the API aspect and we sort of get that.
So head onto the next video and let's get cracking.

Next thing we're going to do here is we're going to work on the actual template file.
We're going to work backwards.
And the reason behind that is it's a bit easier to teach because we're going to start with the flow that the user will use.
And that is they will enter that color into our template, into the webpage.
And they will enter that in what's called a form.
Now, in HTML they have the form tags and if anytime you have been to a website and you've typed in something and then clicked in submit that is a form.
Now, there are methods that work in the background and I'm not going to go too much into this but these methods define how the user interacts with your page.
So for example, when a user enters a color and hits submit they are posting, so post is the method, they are posting that data through our page into our app, into the backend that Flask app.
And then when they're pulling the data back from our Flask app to the webpage that's called a get.
So anytime you present data to a webpage from your backend that's simply the webpage getting data.
So there's not too much about that.
That's like a default method.
But what isn't default is posting.
So we have to specify that somewhere.
But before we get too far into it let's create the template.
We're just going to copy Chuck into pokemon.html and then we can Vim that up.
Let's get rid of h1 and the p tags and we're left with our usual block content tags.
Now, what I would like you to do here is just instead of writing this in yourself just get it from the code but follow along and try to understand how this form is made from a HTML standpoint.
So let's throw in our h1 tag for the header.
We're just going to call it Pokemon color list.
Yes, there is a u in there.
Yes, I'm Australian.
Then we're going to throw in another tag.
Enter a color to see which Pokemon are a match.
Okay, and now we open up our div that is going to house our form, okay?
We are using muay CSS so this is just to make it look pretty.
You don't really have to do this yourself.
Just copy it in.
It'll help, all right?
And the method, as I discussed just before, is post.
We are posting, this form is allowing us to post information through to our backend.
Action is the tag that actually tells you when you post that data what happens to your site.
Do you stay on the same page?
Do you go to another page?
That's pretty much it.
So we're going to stay on the same page.
We're just going to stay on the Pokemon page.
It's not going to do too much.
Next we're going to create a label for our form and that label is going to be called Pokemon color.
But let's just give it a label here called Pokecolor.
This is how we can reference it.
We know what it's labeling in the background.
So Pokemon color, close off the label and now we have to choose the input type.
So this is all creating that form.
This is just simply to create a little input field that someone can type the color in, right?
So the input type is going to be text.
Class form control.
Just go with this one.
This is again, part of the muay CSS stuff.
Now, we have an id.
Now, this id is so that we can reference this input field at any time.
We're not actually going to do that at the moment.
So just put it in there.
It's a good practice to put this stuff in there.
And then we have the name.
So the name of this input field is we're going to call it Pokecolor.
And then the placeholder text.
So placeholder equals, we'll just put example blue.
Yeah, let's just go with that, blue.
Now, this input placeholder, this is what you'll see in sort of a light shaded gray in the input field so that you know what sort of format, right?
And let's just throw in a line break there.
Next we actually have the submit button.
So we're going to create a button.
Type equals submit.
And now we're going to give it some formatting so we'll call it muay button.
And we'll make it a special button, button raised.
Again, these values you can find on the muay CSS site.
If you want to format and style this differently go for it.
And the value is submit, okay?
Don't worry too much about what these all mean.
This is more just the formatting around it all.
All right, and we give it everything within this button tag, this word here in the white where it says, "Submit" that is actually what's going to be written on the button.
All right, and we close that off with a /form.
And then we can close the div.
All right, let's just save that for now.
And let's try and run the app and load that page.
In order to load that page what do we have to do?
We have to create a route for it.
So let's go back to our program vim routes.py.
And let's quickly throw one in here.
We're not going to do anything special other than just returning the render template.
So app.route('/pokemon').
Because we're going to call the page Pokemon we reference that in our form with that action.
So we have to keep that the same.
And we'll just create a function called Pokemon.
Now, we're not going to do anything special in here.
All we are going to do is return the template because we don't want to pass any data just yet.
So let's go return render template pokemon.html.
That's all we're going to do.
We are going to populate way more into this function.
But let's just leave it there so we can see that what we've created in the HTML template actually works.
So we'll write that.
Then we can do Flask run.
And we bring up the browser.
All right, and we are on our 100 days page still.
Let's go back to Pokemon.
And there is our page.
So we have that h1 header called Pokemon color list.
We have that little h3 tag, which is enter the color.
We have our Pokemon color label here.
We have the input field with that little text inside that says, "Example blue." And then we have our submit button.
We can obviously change these colors and do whatever we want but we're not going to go too complex now.
So the idea is any data we throw into here will be passed back.
But we haven't actually set up any of that code to receive that information.
So watch what happens if I throw a color in here.
Method not allowed because we haven't allowed the post request to hit our Flask code.
All we've done is we've put that into our template but we have not told the Flask code to expect anything from our webpage.
It's a nice security feature, right?
You don't want people to just be able to put code or text or anything to your backend unless it's allowed.
So in this instance, method not allowed that's because we haven't done anything with the routes.py file yet.
So let's move on to that in the next video.

For the fun part, now we get to actually play with the data that we're going to be calling from the API.
One of the fun things to do and probably the better thing to do is to play around with all of this API call stuff in the Python shell before you put it into an application, that will you know what works, you get to play around with it, see test things out and you know, just have a bit of fun.
So let's bring up the shell here.
And what we're going to do, we're still in our virtual environment, that way all of the modules that we imported or pip installed, are accessible to this Python shell.
And we're just going to run a couple of the commands that we're going to put into our routes.py file, but we can test them here first, without having to keep editing that file, saving it running it we just do it live.
Right?
Thinking ahead, we are going to have a list of Pokemon.
Right?
So let's create an empty list I've already done this testing before, obviously, this I'm just saving a bit of time.
Next up we need to still import everything, so we import requests because we going to do a request we will import json because we going to work with JSON.
And just for demonstrative purposes, we're going to import pprint So from pprint and this is pretty print, it'll just make our return JSON output look nicer, but I'll show you that in a minute.
So from pprint, import pprint as pp just so I don't have to type that pprint every time I only have to type in pp now to call that.
All right, next we need to do our request, so we'll do r = requests.getget.
And based on this Pokemon API page over here, we have our API call Alright, so we have the actual endpoint we going to talk to and that is going to be https://pokeapi.co/api/v2/pokemon-color And we're talking to Pokemon color end point.
All right, and we'll hit enter on that.
That should work yes we have it.
And now we're going to actually format it nicely.
With we're going to decode it nicely with JSON.
So pokedata we going to call this object pokedata = r.json() Right?
And now we can pretty print this out to actually format it nicely.
Because look at this if we just print this out normally we get this it's a bit ugly, right?
We want it to format nicely So we can go pprint sorry of pokedata.
Right and we have these endpoints here for the different colors so we can we now know that people can specify black, blue, brown and blah, blah, blah, down the list to yellow.
Anything else will fail.
But that's a catch That's an exception for another day.
For now, let's just work on these.
What we can do now is let's change our request to include one of these colors on the end, we're just hard coding it.
Remember, the user will be able to specify this for now let's hard code it.
And the color we shall choose let's go with yellow.
That will work.
And now we can reassign pokedata.
Right?
And we can do pprint of pokedata.
And what we've done is we've sent a request off to the Pokemon API, and we've said return all the Pokemon that are of the color yellow are tagged as the color yellow.
And now what we're doing is we're just printing all of those Pokemon out.
Now mind you, you're not just going to get the name at this point, you're going to get that Pokemon and all their attributes.
So just be prepared we've got quite a lot here, look at that list there's heaps there.
Let's just focus on the bottom one here.
And it says whatever they whatever that is, I've never heard of that one.
So we've got that Pokemon And now they had that Pokemon itself has an endpoint.
So this URL if we were to pop that into the browser, we get the return value of that Pokemon, all this stats, right?
But all we want is their name.
So we want to call on this name object here, this name key here I should say.
So what we can do is, we can go for i in pokedata, that means each one of these, each one of these entries here is an individual entry that we're going to iterate over using i, so for i in pokedata.
Now if we scroll to the top of this output, you'll see that these all come underneath one object here one key sorry called Pokemon species.
So we have to so these are all individual line items within Pokemon species, right So we need to specify that Pokemon species.
Now this is all pretty much JSON decoding stuff, and I'm just sort of skimming over it because that could be a whole chapter in itself.
It was in our previous course so check that out if you haven't, I go into way more detail on that one.
So for i in pokedata and we're going to specify Pokemon species.
And what are we going to do every time we hit one of these we are going to append the name of that Pokemon to our Pokemon list remember we created that Pokemon that empty Pokemon list at the start, so we are going to go i name.
And we close that off.
That's done and now we can do for i in Pokemon.
Print i and then we have a list of names and this is the data that will be returned to our page.
So all of that code we just used will actually work and we can pop that into a function in R dot pie.
And I'll show you that in the next video.
Once that's in there, we can take this pokemon list that we've just specified here this one there, and we can return that to our template our Flask template.
So let's move on to the next video.

Here's the routes.py file and I've created a get pokecolours function for us that's this one here.
And what it takes in is the color that the user enters.
So this is an object that we are passing into this function.
And you can see straight away we have our requests dot get I've added in color dot lower here, what this is doing is whatever color the user enters we are going to change it to all lowercase.
And the reason is, with that endpoint of the Pokemon API for colors it only takes lowercase letters, it actually matters.
If you were to enter in the word black with a capital B, this would fail.
Right, so to protect us against that little tiny thing we are going to manually say that every color that is entered, every word is going to be changed to lowercase.
And that is simply going to be tacked on or appended with the little plus sign there onto the end of our endpoint there, all right?
That gets returned and assigned to the object we decode it with JSON, assign it to the poker data as you saw in the previous video and we create our empty list of Pokemon.
We then iterate through poker data looking for the Pokemon species key, there was only one.
And with all of the little mini dictionaries that were attached under this one as values we are going to take the name key from those dictionaries and append them to this Pokemon list.
So every Pokemon in there that matches that certain color is going to be thrown into this list here.
And then we return the Pokemon list.
And that's it.
So now the next question is where are we going to call this function?
Where in our app dot route for the Pokemon page are we going to do this?
All right, here is our Pokemon function here for the app route for the Pokemon webpage.
What we need to do is we need to actually start referencing that form that we created in our template.
So we're going to say, all right if that form sends us data then what are we going to do with it?
So let's enter that in here.
This may seem a little confusing so just go with it for a second.
We also need to create an empty list of those Pokemon explain why in just a sec.
So we'll go if request.method so remember, we got that method is not allowed thing, right?
So if the request dot method is POST and pokecolour is in the request form so that request form that we created we gave it a label, we gave it an id of pokecolour and we're referencing that here, we're saying so if we are getting a POST method from our webpage and it's coming from a request form that is the id pokecolour then we're going to do something.
So if request dot method is POST and pokecolour is in request.form then what are we going to do we're going to take the color here's request.form.get('pokecolour').
So when people entered a color we designated that color the id of pokecolour.
And we're taking that and we're going to assign it to the color object in our Python script.
So this is the link between our front end and back end.
So we've just taken the data from the user and we're assigning that to the color object here.
Now there is something I want to show you and you've probably picked up on it.
It's this here, I'll explain that just a second.
But let's continue down.
Now what we want to do is we're going to take this list we'll throw one in here an empty list just like we did below Pokemon equals empty list.
And what we're going to do is we are going to assign that the list that is generated by our pokecolours function.
Okay, so this line is taking our function get pokecolour it's passing it the color that the user has specified.
And then it's spitting out that list of Pokemon names and assigning it to this Pokemon list here.
And then we can return this list.
Now that we have this list we've built it and we have this list we can return it with our render template.
If you remember from our Chuck Norris joke thing all we really have to do is specify the name of the object we are passing to the form and what name it's going to have in that form, all right?
So we can go down here Pokemon equals Pokemon.
And just to reiterate, this here on the right of the assignment operator there is our Pokemon list here.
And it's going to be called in our Flask template it's going to be called Pokemon.
Now, before we continue on, we do have to do a couple of little extra additions to our code here.
First and foremost, at the very top we need to actually allow ourselves to import the request functionality of Flask.
Let's just save everything we've done.
All right, and we have here from Flask import render template.
Well, now we want to import the ability to have a request, to have a form so import requests.
So from Flask import render template comma request that will allow us to actually use that functionality.
And going down, we actually need to tell our app route for Pokemon that it has that POST method there.
So let's just add it in here.
Methods equals GET and POST.
So we can both pull and push data from this page.
And that is going to allow us to actually work with our template.
And this should work.
So now all of this code is there.
We are now pulling the color from the user.
We're talking to the API and then we're going to return that list of Pokemon back to our page.

Before we get too ahead of ourselves we need to actually test everything we've done.
And if you've tested exactly what I've typed in you probably would have found a few errors.
So I hope you resolved those before watching this video.
If not, let's take a look at them.
What I've actually done here is in routes.py there are a couple of little issues here.
One, I had failed to title this function correctly.
I called it get Pokecolor and it's actually get Pokecolors because that's the name of the function here.
I'd left out the s, and just down here in Pokeman.append, I had a square bracket here in front of the i, instead of a curve bracket.
Really small typos.
Things that happen.
Love it.
You would have caught it when you ran Flask run but is you copy the code directly from the repo you wouldn't have seen that.
So getting out of that let's do Flask run.
There is our site.
We have it here.
Let's just refresh.
Let's make sure it works.
Yes, it works.
All right.
Now if we punch in a color here what's going to happen is it's going to take the color back to our...
It's going to post the color back to our backend.
It's then going to hit the API get all the Pokemon that match that color from the API and then return it back to this page as a list.
So let's through in black.
And what happens, absolutely nothing.
And the reason that is is because we haven't done anything with the template.
With this page itself to say well what am I doing with that list.
So this is the easy part.
This is right at the end.
We're almost there.
It's very exciting.
So let's move into that.
So we'll close off our script here.
Right move into templates.
Bring up Pokemon.html and what we want to do is we want to create another div.
Now this div is going to be a bit of a special one.
One of the tricky things with this is that if we don't have data to present what's going to show up on the page?
So when a person gets to our page for the first time here they don't see a list of Pokemon down here because they haven't entered anything.
So what we need to do is have a div that is essentially empty and only shows data when there is data there to be shown.
All right, and we're going to specify that using some cool code.
And what we can do.
Let's just throw a line break in.
I always do that.
Let's throw in two just to give ourselves a lot of space.
All right.
Starting off with our new div.
This is where our interesting code comes in.
We're going to say that this div will only exist or show anything really if that Pokemon list has been passed back to our page.
That is, after someone's entered it its generated all the information and then returned it through that return function of our route for Pokemon where it says, return rendered template Pokemon=Pokemon.
So, only if that has been returned is this div going to show something.
And we can do that using this code tag so % if Pokemon.
Right, this is one of Python's truthiness things.
If pokemon exist.
If Pokemon is true.
You don't even have to say, is true you can just say, if pokemon.
That's how it works in Python.
So, if Pokemon has been passed back then we can generate ourselves a table.
So lets throw this code in really quick.
All right, so this is the code for our table.
So again, if Pokemon exists we are creating a table with the class the Mui CSS stuff of Mui table and Mui table bordered.
That'll give us a nicer looking table, I should say.
Now we have our table header and there are rows for that.
So, we only have one column, one row which is just going to be Pokemon.
And the header for that is Pokemon and we can close that table header off.
Now we have the body so that is what is the body of our table.
Everything that's going to go in it is going to be the Pokemon.
So we can enter in some special code here.
Right, so Python code in there for i in pokemon we're simply doing a loop for i in pokemon.
We're going to generate table rows and the table data for each one of those rows is going to contain the Pokemon name which is i in this list.
So, replacement fields there for i table data.
Close that off.
Close off the table row.
For every object within our Pokemon loop our Pokemon list we are going to print out that name as table data.
For every name in that list and then we can close off our for loop.
And then we can close off the rest of our table.
And after closing off the table we then need to close off this if statement up here.
Otherwise, we will get some errors.
So, and if And then finally we can close off that div.
Don't worry too much about the lining up.
This isn't Python code so this is HTML doesn't have to be perfectly square.
All right.
And that should be it.
Let's quit out of that and let's try running our app and see what happens.
All right, we have our page.
Let's make sure there are things working.
Yes it is.
Go back to our Pokemon list.
Fingers crossed.
Let's see what happens.
We throw in black.
And there we go.
Every Pokemon that was in that black list now appears in this table.
Two line breaks below our original form at the top.
And we have Snorlax, Murkrow and going through that list.
So you can do all sorts of funky things with that.
You can, you know, sort them.
You could potentially follow that end point URL that each one of these has and start printing out maybe the image, or more data on them, you know.
Go nuts right and this is cool.
So we can go yellow this will actually refresh this page and get rid of this information here and put the yellow ones in.
So, there's Santru.
There's all the ones that we saw before, right.
We can go red.
Get the next one, and so on.
So that's it.
This is the rest of the app.
This is it.
It's done.
Have some fun with it, and in the next video we're going to talk about how you can expand on this for the ne-

And that was calling APIs in Flask.
Congratulations on making it to the end of the four days.
If you are just starting your fourth day or just finished the videos on that go ahead, check out the README file to see what you have to do on this day otherwise, let's run through some of the key stuff that we've learnt.
So these were the two APIs that we touched on.
We used the Chuck Norris API and we used the Pokemon API.
Now, with the Chuck Norris one we actually learnt how to parse objects from our app.route, from our Flask application over through to our template.
Now, the first thing we had to do was create the route for our Chuck webpage.
Then we took the actual joke that we pulled from the API and we assigned it to a joke object.
And then what we did, was we took that joke object and returned it to the Flask template as an object named joke.
That's why you can see the two colors there the yellow and the blue.
The joke in blue was the object that came from the API from that function, again, Chuck joke.
And the yellow joke object was the one that was sent across to our Flask template.
It is important to note that the object returned to the template can have a different name it's just this format here of having it named the same is something you'll see more often than not.
Next we wanted to look at handling post methods.
This was within our Pokemon API's chapter and what we did was, we had to specify right at the start of our app.route for the Pokemon webpage we actually had to specify that it could handle post request and if you remember from the video we actually got an error because we didn't tell it we could post.
Now, given we are allowing post requests we don't want anything to just be able to come back to our application, to our backend.
So what we have there, is we have a request method that will only respond or do something if it's a post-request and the idea of pokecolour is in the request form.
That is, the post request that comes through has the ID of pokecolour.
And that way we know that that is the only data we are going to take, if there is data that is sent through as a post.
We then took that data that was sent through assigned it to the color object and then we used that color object to query the API using the get poke colors function.
And finally, after getting all of the data back that we need, we parse it off back to the Flask template just like we did in the Chuck Norris API with pokemon equals pokemon.
Now, within that get pokecolours function we parsed through the color that someone enters when they use the website.
Now we did this so we could customize the request that went off to the website that went off to the API because we wanted users to be able to request a specific color.
So you can't hard-code every color into the request; you simply just take that variable, that object that people enter in and append it onto the end.
And that's what we did that with color.lower we made sure that it was lowercase so that it actually works with the API.
If there is any capitals in there, it was going to fail.
And finally, we take that data back we convert it to JSON and we assign it to the poke data object.
And that was it, that was pretty much everything that we did in the course.
It doesn't seem like there's a lot there but as you know, there was quite a bit that we covered so feel free to go back over the videos again.
If you're on Day 4, look at the README file and see what it is that you have to do.
Once you are done, head on over to the next chapter and keep calm and code in Python

Welcome to your next four days and oh my gosh, this is an amazing topic.
We're going to talk about bringing asynchronous programming to the web to web servers, and these web frameworks like Flask.
So why do we care about async programming?
Well it lets us take the same amount of hardware and the same amount of processing power and CPUs and memory and all of that kind of stuff and massively scale it up.
You'll see we're going to take a simple API that we're going to create and we're going to first write it in Flask and then we're going to convert it to this other framework called Quart which allows us to do async programming effectively in the Flask API.
When we do that we'll see that the performance should be quite a bit better.
Asynchronous programming is fairly advanced but it's an interesting topic in that modern Python and by modern I mean Python 3.5 or higher makes writing this type of asynchronous programs ridiculously easy.
It's almost exactly the same as writing regular programs.
The synchronized kind that just happen in order.
The language will really help us out.
So actually programming the async version of our website, no problem.
You're going to see it's quite easy, actually.
However, actually understanding what's happening understanding the power and what's going on with all of this asynchronous stuff well that is much harder.
So we're going to take this topic in layers.
We're going to start out by just talking about regular asynchronous programming.
Forget the web.
What does asynchronous programming look like in Python?
Why does it matter?
Once we understand that we're going to create our website in Flask.
Something you've already studied and already have experience with.
Finally, we're then going to convert to this framework called Quart, apply our asynchronous ideas and get better performance for exactly the same hardware.
So I hope you're excited, I'm thrilled about this topic and I'm looking forward to sharing it with you.
So let's get to it.

Before we start writing some code let's just think about what synchronous execution means and most importantly, what this looks like and where the actual problem is in the first place.
Because, until you run into a problem you should probably stick with synchronous code and Flask or one of the other frameworks that we're talking about in this course, because asynchrony does add complexity.
Let's understand the value of it so you'll know when to use it and when not to use it.
So, here we have particular web server and I'm trying to visualize the processing time for various requests.
Now, I said our first example was going to be straight async code, but let's motivate this with a web example.
So, here we have three requests coming to our server requests, one, two, and three.
Request one, takes as long as that green box.
Label that.
Request two takes about the same amount of time another big, fat green box.
And request three is really quick, but because the way the processing works, this just gets queued up our server just takes them in order.
Let's do one, okay, now we're done with that.
Let's do two, now we're done with that.
Let's do three, and so on.
This is not so good.
Look how short three is.
Wouldn't it be better if we could just get that answer to them right away?
If we look at the actual response time.
So, when the request comes in, when it they actually, as far as the external client sees it when it's done, we can map that out as well.
So, the response gets sent back right away.
So, for request one it's, they did the request same amount of time that it actually took us to do it they get the response.
But request two, well, their request came in right at that beginning of one so they had to wait for one to be done, and then two.
And three, this tiny little thing, actually was the worst.
So, it had to wait for one and two and then its little bit that it had to do.
This is not ideal, but if you can make the size of those green boxes small enough if they can outrun your traffic you don't need asynchronous programming.
You're golden, right.
Let's suppose you are getting a request every 200 milliseconds to your server and it takes 20 milliseconds to process a request.
You're fine, just synchronized programming.
But when things start to back up like this example here, well, that's a problem.
So, how are we going to deal with that?
Let's look at one more thing before we actually get to code side of things.
We take one of those green boxes let's say request one, and we zoom into it.
We look at actually what's happening.
There's a bunch of different things operating here.
Probably right at the top, Flask, the framework is doing some processing, is running the routing figuring out what to call, it's creating and initializing the request object, things like that.
All that stuff's getting set up and then it comes and runs our code.
The first thing our code does let's say this is a purchase, for example.
Somebody's going to come in.
They're going to go and say, I'm user such and such.
So, our first time to do is say well, we're going to go to the database with their cookie, or their session, or something like that query for their user object, and pull that back.
So, that first part, that first read database that's us getting the user back.
Then we'd write a little code to say well, if we have this user and they're requesting this thing, let's find out if they own this object, or maybe we want to show them a list of things, or whatever.
So, we go back to the database with maybe one or more, queries, and that runs and then we get a response.
Maybe should be a little another blue box where we turn our response into something we're sending back, but then we just send that back.
The framework creates the response out of a template or something like that, or JSON and returns it to the request.
This is totally normal database code and there's not a problem with it per say however, look at this part here.
What is our code actually doing?
It's just blocked on some database query just waiting, waiting on the network.
If we send a request over the network to the database server, it's got it, queued it up.
Eventually it's going to compute the answer and send it back.
So, our code is just kind of sitting there not really doing anything except for waiting.
So, the idea of the asynchronous programming is these red sections, we can give up our execution time and hand that off to other requests like request two or three while we're waiting on the database.
We don't care.
We're just waiting.
So, if we could just wait and then be re-run when the response comes back from the database it would be the same to us.
So, that's the idea of this asynchronous of programming is.
We want to take these dead zones these waiting zones where we're waiting on external services, file system database, web services, things like that and make them productive times for our code to do other stuff.

All right, enough talk, let's write some code.
So over here in our demo repository we can see the days, and this is the quart-async section.
So what we're going to do is we're going to create a simple project that we can work with and we're going to write some regular synchronous code and then we're going to convert to async and see how things get better.
All, right so first, let me just make a folder here.
And I'll just call this Python_async.
Now this part's not technically necessary but I do want to use one external package and because of that, I'm going to create a virtual environment that we can use here.
So we're just going to use Python3 to create a virtual environment.
And then I want to go and open this in PyCharm.
Use whatever editor you want, I'm going to use PyCharm.
All right, with that open, let's create a file that we're going to run.
We're going to have a synchronous version and a asynchronous version.
I'll just call that synch_program not super exciting, but here we go.
Now, for this one, I'm going to start with some code that I'm going to paste in here and we're just going to talk through it because it's a synchronous program, you guys already know how to write this stuff.
I want to have a really clear foundation to make an asynchronous version but it'll still be interesting to explore.
Okay, so you can see I've pasted some code here and we're going to use this external package called Colorama.
So I'm going to create a requirements file just so you can clearly see that you need to have this.
We'll come down here, pip install -r requirements.txt into our virtual environment that we created.
All right, everything is looking good.
Now, let's talk about our program here.
So we have this main method.
And the main method is going to do sort of this orchestration thing.
So it's going to print out that it's started and we're using Colorama to make sure that is white.
And I'm also flushing it so that you immediately see the output, we're flushing everything so that you immediately see the output.
This is important because the interweaving of behaviors from the different parts of our program are really important to detect.
Okay, so what we're going to do is, we're going to implement this pattern called the producer-consumer pattern.
Now, the idea is that there's some part of our system, maybe it's even a web service that's receiving an external request.
It's going to generate stuff to be processed and basically put into a queue or a list this data thing here, in this case.
And then another part, once the data's been generated is going to take that data and process it.
So if we look down here, you can see here's the generated data and it's super basic it just goes and creates a square of a bunch of numbers and throws them into this list.
And it prints out yellow, the generator is yellow.
And then the processing part says we're going to go down here and loop over this and pull this data out.
And in cyan, a blueish, it's going to say we processed this value.
It also computes how long from a request to generate or the generation of data to the actual processing of data this takes.
Let's go over here and run this in PyCharm.
You can see the app has started the white's kind of gray in this little terminal thing, but it's okay.
Then we're generating items notice all of the work is being generated all the generation is happening, and then the processing.
That's not surprising, we call generate_data and then we call process_data, totally reasonable.
So we're going to do 20 items, and now they're processing one, four, nine, these are the order they came in.
And notice, the first one took almost 20 seconds until it got to be processed.
And if you go down, it gets a little bit less drawn out.
But the generation takes some time the processing takes some time.
So you can see the best case scenario the one that was closest, because processing is slightly quicker than generating it still took 10 seconds to get to that request.
And notice, it all happened, all the generation, all the processing.
Let's just look really quickly at what we're calling it up at the top that's totally reasonable, right?
We called generate_data 20 times and we did 20, and then we called process_data and we processed 20 at a time.
But if we look at either of these there's a part where we're waiting.
And this simulates requests coming in or we're waiting on an external system without adding the complexity of something like that which we could build, but would be way overkill in terms of trying to demonstrate this.
This is just simulating, it takes some time to do some work and that time probably depends on an external system, right?
We're waiting on something, right?
Waiting on a database, waiting on a web service.
We're not really doing that so we're just calling, time.sleep which puts our thread to sleep.
But it means that it takes half a second at least half a second, up to 1.5 seconds to generate an item.
Same thing, we're processing the data we're pulling out just basically holding onto it and talking about processing it and then it takes us half a second to process it.
Okay, so this is this program.
This is the synchronous version of what we're doing.
And we've introduced via time these sort of arbitrary wait periods, but they're very much modeling real world things like databases and web services and so on.
How can we fix this?
How can we make this better with asynchronous programming?
Well, if we could say, after we've generated a few items while we're not generating, we're just waiting maybe the processing could kick in and process the few we've already generated.
But if we're not processing any because we're waiting down here, we could generate some more.
These could work as a team, but they don't.
They don't because we wrote this very straightforward program.
Grab the time, print out some colored stuff but really that's not so interesting.
This, this is all there is to it.
We said, generate_data, and then process_data.
So we're going to generate it and wait, and then process it.
And that's the way synchronous works.
But we can do better if we write a different version.

We've seen our synchronous version running.
Now, let's improve it so we can have our code running during these downtimes and we're going to create an asynchronous version.
So we'll just duplicate that file in PyCharm and we'll look over here.
So the first thing that we need to do in order to make our code async in Python is to do what's called an event loop.
So there's going to be little bit more stuff to orchestrate these things like, main is going to set slightly more complicated.
Let's not necessarily focus on main right away let's look at the other two pieces here and see how this works.
So in order to use the asynchronous programming model in Python we really need to use some of these asynchronous data structures and for that reason, we're going to import asyncio.
Now, over here, we have a list and getting items out of the list and putting items into the list there's no way to sort of coordinate that and say I would like, for example, to wait until there's an item in this list and then get it out.
But you're welcome to go do other work while I'm waiting.
Lists don't work that way, they're not built for that.
So what we're going to use is going to convert this to a queue that comes with asyncio, like that.
And notice, PyCharm is saying you said this was a list, it's no longer a list.
So where can I go next change our little annotation here and let's look at this one, this generator this producer bit, in order for us to make our functions operate.
In this asynchronous mode, we have to make them as async.
We have to say, this method participates in a different way in fact, the way it's implemented when it runs is really different.
So we come over here and we say this is an async method, async def rather than say, this one which is a synchronous one.
Once we've said it's an async method then we find all the places that we are waiting.
So there's going to be actually two places.
This doesn't have an append, but it has a put.
And what we're putting into it is this tuple.
So really, one thing is going to it even though it may look like two.
Now, PyCharm say, whoa, whoa, something is wrong here.
We hover over it, it say, you're not waiting on this.
So this is one of these async methods itself and it may take some time to put this in here because thread coordination and whatnot.
So we come over here, and say we would like to pause our thread until this operation is done potentially giving it up for some other bit of our code to run.
We don't have to really do anything special we just have to say, we're willing to wait we're willing to let Python interrupt our execution here.
And then, this time.sleep well, we want a different kind of sleep we want asyncio because this one is awaitable.
Again, this is signaling to Python I would like you to run through this loop until you get here then you can let my thread run or if you have data, just give it to me and we'll do a little print, and then we're going give up our thread's time and let other stuff work.
This one is really the important one.
We're going to let other code run while we're waiting.
That's what that await's just done and when it's done, then we go back and go to the next thing through the loop.
Python handles it beautifully for us.
Let's do the same thing here.
So async def, and then notice there's a get on our queue.
Now, for some reason, PyCharm doesn't detect this but if you go to the definition for get you can see it's an async method.
That means we have to await it within our async method.
So we do this, and this is going to be asyncio await Actually, we don't even need this anymore.
This didn't used to be a blocking call, but now it is.
And then, down here, asyncio I have to await it, PyCharm tells us, there we go.
So, when this one's processing, it's busy and then it says, hey, while I'm waiting you can go back and do other work like say, for example, generate_data.
That is what we need to do to make our methods async.
Really, you just put the async word and everywhere you might be waiting you just throw in the keyword await.
So I told you, this programming model is straight forward.
Understanding all the nuances of it how it's implemented, different story.
We're actually going to only touch a little bit on that.
Now, in order to run these async methods there is a little bit of ceremony that we have to go through.
Not all languages work this way Python does for whatever it's worth.
So what you have to do is create this thing called an async loop and basically, things within that given loop share execution time so they're all trying to run and when one of them says, hey, I'm awaiting something the others get a chance to run so it's like this shared cooperative multi-threading.
So I'm going to create a thing called called a loop and we just call get_event_loop here.
Now, we have our data.
Now, instead of directly calling these we're going to do something different.
We're going to go over here and say loop, create a task.
The reason we need to create the task is we want to wait until these two operations are done and then, our program is going to be done.
So I'll call this task1 and same thing for this async method but of course, task2.
That's pretty straight-forward.
And then, finally, we would like to create something that lets us say we're done, our program is done when all of these tasks are done so when all the generation is done and all the data processing is done.
So what we can do is create a third task from the first two.
The way we do that is we can so what what's called gathering the task.
So we'll say gather, and we just give all the tasks become star args there and then, we can tell our loop to run.
So up to here, nothing has happened nothing has executed, so down here, we say loop.run_until_complete(final_task).
So it's a little bit more ceremony to sort of coordinate all this stuff, but it's not too bad.
However, once you get the start-up stuff done everything is golden.
So, you're ready to run it?
Are you excited to see what happens?
Well, first of all, hopefully, I didn't screw this up.
We're going to find out.
So we're going to run this one and now, look at this we're processing an item, are generating an item processing, generating, processing generating, processing.
Now notice, it's one and then the other because they don't take very long for them to do this work.
As soon as one goes into the queue, we're processing it and because we're processing faster than they're being generated, we can keep up.
But what's really interesting here we can actually generate more and more data and just have the one processor.
So let's go task3, I'm going to generate more data and task4, I'm going to generate more data and then, we'll just wait on those two.
So were generating 60 pieces of data and just because the way we wrote this so it exits right at the end we need to tell how much data to process it.
It would be easy enough to write this in a way that can be canceled, by we're not doing that we're just adding them up.
Now, let's run it, and this see this cooperative bit here.
We're generating a bunch of items and notice, let's go back up to the top here we've generated three, and we process one and we process two, and then we started to process three but then, it turned out, we ran out of time and this one sort of kicked in again and these other three are running at parallel.
Processed a couple, these others got to go.
Process one more, one got to go.
And you can seem sorting starting to interleave here until they're all done.
We generated data faster than we could process it so we had a few backed up here in the end.
Well, let's go back and tone this down a little.
Let's just put one extra, let's just put 40 two producers for every consumer.
Run this again.
The other thing I want you to notice.
The first time when we ran the synchronous version remember that, the synchronous version the very quickest response we could get was 10.5 seconds, that was the best.
The worst one was like 30 seconds.
Look at these numbers.
Because we processing them when we're waiting we can get to them right away.
A request comes in, we can get to it because the other one's waiting on the next request to be generated, and so on.
So these are extremely small numbers because we don't have to wait for all the work to be done to start the processing.
We're doing this cooperative multi-tasking.
Also, if you notice here we have 20 seconds completion time.
I think it's 30 seconds in the other but if we had actually generated this much work it'll be as we did double it'll actually be even quite a bit more.
So it's much faster and the response time is insanely faster.
This is the behavior we want to add to our web application and with Quart and async programming, it's pretty easy.

Let's look at the order and timing of operations.
Imagine we have asynchronous execution like we just saw.
So again, we have request one, two and three coming in on exactly the same timing.
They take exactly the same amount of time to run.
But when we dug into the requests we saw most of the time we're waiting on a database or something else right like a web service.
So during those times, maybe our requests actually could just run almost truly in parallel.
Notice, for example, when request three comes in we couldn't quite run it exactly when that request came in but it's pretty close because soon request one and two went back to waiting on the database.
So again, let's look at the timing here.
So, we have our request one come in.
And, of course, just like before it got done right when it did in fact maybe just took a hair longer cause it gave up its time and couldn't quite get it back from two right when it was ready to run, somethin like that.
But we have our response time roughly the length of request one.
But now, when request two comes in we saw that request one was waiting on the database so it could immediately start running.
And it got done more or less in the same amount of time it took.
And request three was, actually its response was moved up ahead of request two.
So from a response perspective, it went one, three, two because three was really short and one and two were waiting on the database.
So, boom one, two, three and it could just get that out of the way.
So the response time per request from the outside one, two, and three, looked much more like what they would be if there was just one user to the site even though it was theoretically really busy.
Now if we dig in again like we did before we'll see that yes, we're still doing framework database code, maybe web services which I haven't highlighted here.
But now the database section is green because during those times, we're telling Python via our async and await programming you know what?
I'm just waiting here.
If you've got other stuff to do other requests or processes feel free to go work on them until they start to wait.
And then let me come back and run my code.
That's the beauty of async programming.
This is a really powerful concept in Python in general.
And it happens to be really useful on the web because a lot of time, what you're doing on the website is waiting on a database, waiting on an external service something like that.
You can make that productive waiting time.
So that's an overview of asynchronous programming in Python.

This wouldn't be 100 Days of Code course if you didn't write some code.
So now, it's your turn.
Let's go over to the Quart section of our GitHub repo and notice that there's a code that we wrote and then there's a your_turn section so that's where it gets interesting for you.
We have something for you to do on day two and something for you to do on day four.
So let's talk through, really quickly what we're going to do in the first section here.
Well, the first part is to watch the videos and I'm guessing if you got this far well, then, you've watched the videos, awesome!
So you're kind of done with day one play around with some of these ideas and just make sure you kind of understand what's going on in the videos.
So on day two what you're going to do is play with a pre-existing app that we've already built.
This one is called web_crawl, and it's just a terminal-based app, and what it does is it goes and downloads like, 20 webpages off of talkpython.fm, and just prints out the title.
It's kind of not really valuable, but it's a really good chance to leverage async programming.
So what you're going to do is you're going to create a virtual environment and activate it and there's a set of requirements to make this work so you got to make sure that you install those after you activate the environment.
Then when you run it, you'll see that it does a few things it says get me the HTML, and then from the HTML it gets the title and then it prints out the title for episode 150, then it does it for 151 then it does it for 152.
Well, what do you think your app is doing most of the time?
It's waiting for talkpython.fm to stream that HTML back to you.
Now that happens pretty quick on the site but there's things like latency on the internet and all sorts of stuff, so you could really ramp up the speed in which this happens if you leveraged async, so that's your job.
What you're going to do is you're going to go to the get_HTML method, you'll see that in the code that's provided for you, you're going to convert that method to be async, and we're going to use this thing called aiohttp Client.
So this lets you do, as a client, kind of like requests the requests library that lets you make http requests, but this one supports async so you can do async type of stuff like get a URL or read the text stream, things like that.
So in this part, this is day two, your job is to go through and convert this thing we're calling web_crawl, up here convert that from a synchronous program to an asynchronous program.
There's a final little trick here at the end that you actually have to leverage to make things truly go faster and truly happen in parallel and I'll just leave that for you to discover as you go through this whole project.
All right, hope you have fun on this day there's a lot of sort of step-by-step instructions but it's not meant to be hand-holding you're supposed to explore these ideas so hopefully that balance is there.
And most importantly, have a great time.

You've seen this async/await programming models, pretty awesome and really opens up some cool possibilities and the application to the web, really important.
However, Flask will not operate in a async world.
Neither does Django, neither does Pyramid or many of the other frameworks.
Now that might change after this is recorded.
I know Django now has at least a road map towards this async world.
But generally, these popular frameworks are built on what are call WSGI, W-S-G-I Web Service Gateway Interface.
And that API cannot be made async.
So, part of the magic of all these frameworks is they are based on this common standard the common standard doesn't allow for async.
Moreover though, for Flask, at least at the time of the recording, you check out their design decisions and they say, Flask is just not designed this is from their documentation Flask is just not designed for large applications or asynchronous server.
Flask wants to make it quick and easy to write a traditional web application, period.
Well, it's cool I guess we cover this async stuff but Flask does not get support it, so forget it we're out of here.
That's one possible outcome, the other is enter this thing called Quart.
So, Quart was designed by Philip Jones who I actually interviewed him on the Talk Python To Me Podcast and Quart is a Python web micro-framework based on asyncio.
That's the same asyncio we just did magic with our producer and consumer world.
It is intended to provide the easiest way to use asyncio in a web context, especially with existing Flask applications.
You'll see that converting a Flask app, into a Quart app is actually super, super easy.
We're going to use Quart to add this, basically the leverage this async programming model on the web but use everything we know about Flask and even Flask extensions in that application that we build that is async.
Even though Flask itself, claims it will not support it.
So, very, very cool project here and we're going to use that to level up our API.

We have two more directories in our GitHub repository under the Quart section.
So, we have cityscape_api and we have async's cityscape_api.
So, what is this about?
Let's open up this project and see what's goin' on.
So, again, we're going to have a lot of requirements to install this.
We're going to create a virtual directory virtual environment here, rather.
So, go over here and we'll just do our virtual environment thing that we did before, and then open this in PyCharm.
In macOS you can drop and drop this here and it'll open.
On Windows and Linux you have to say file, open, directory.
Now, of course, to run our application we need to install the requirements.
So, we're going to use Flask.
We're going to use Requests.
Now and later we're going to use something called aiohttp so we can make our web service calls asynchronously.
Basically, these three replace are the asynchronous equivalent of those.
So, we got to install Flask and all of its friends, as well as Requests.
Okay, so let's just really quickly look and see what this web app is about.
And I mean, mark this is as excluded and this one as resource root.
So, if we go down here let's just look at our app from the top.
So, we have these services.
These services we need to figure but these are the things that call our web APIs.
I'll introduce you to a couple of services that we're going to do, but basically we need to know the latitude and longitude given a city.
We're going to give you the sunrise and sunset information for the city you ask and we're also going to give you the weather for that city.
And we need our location service to help drive that service so we don't have to ask people for weird things like what's your latitude and longitude.
Okay, so we're going to create our Flask app.
This is standard Flask.
We're actually decomposing it into various pieces using what's called blueprints.
So, instead of writing all of our view code here we're putting it into these pieces we'll see them in just a minute but this register blueprint let's us sort of still hook in those routes.
We're reading out some config files that we put in here a development and a production one and we're going to set it to I think, what is it set on right now?
Let's set it onto debug true.
So, it's going to set up things about how it runs.
We're also going to tell the services to use cached data.
We're going to set that to be false initially but later we want to do some performance testing.
And it turns out that these services cannot take the amount of traffic or at least they refuse to take.
They may, like detect it, and say go away, you're doing this too often.
But they have a limiting, that either limiting or failed performance that will not let it work well enough for our asynchronous version when we try to push it to the max.
So, I had to set up this caching mechanism so that we could actually truly compare the performance of Flask versus Quart.
Okay, we'll see how that works in a minute and then just standard, just run our Flash app which is app.run, and this one running on port 5001.
All well and good.
Let's look at our service.
Home is super boring.
It just has an error handler and it just says welcome, use api/city for your API calls.
Really, 'cause this is an API primarily not a website, but it could be.
All right, works, Quart and Flask just as well for websites.
Okay, so we're going to go over here and import our services and we have two services you can call.
api/weather/zipcode/country and that will give you weather data.
So, let's try that real quick here.
Okay, notice it running, and here we got our view.
It says that we can go to this API weather.
Let's put zip code in there at 70002, and let's put that in US.
This'll be somewhere, Oregon, near Portland.
Goes in, makes a call.
Look at this.
This is the weather right now.
Here's our longitude and latitude actually coming back.
Here's the temperature.
That seems kind of intense, right?
The max and the min for the day.
We have our wind and so on.
This actually is a little bit bizarre.
This is in Kelvin, yes, Kelvin.
So, you come over here and that's 23.6 Celsius, or 75 degrees.
It's in the evening in the summer.
It's kind of a nice summer night so yeah, that looks totally correct and I guess I got Salem for the city which is also in Oregon, but a little bit away from here.
So, here's our weather API, and we could also do sun, I think it's just called sun.
Here we go, and we got the sun.
The sunrise is at 6:00 a.m.
The sunset is at 8:30 p.m.
Pretty much, pretty accurate, sounds like to me.
So, here we can get sun data we can get the weather, things like this.
Of course, we could add more and more services to it, but this is our service.
Let's really quickly see how they look and how they work.
So, let's just take the sun one, for example.
This one is the most complicated, 'cause it has to use a location and then the sun service.
So, we go here to this location one.
It's going to come in here and create an URL to this data science tool kit, street to coordinates.
So, this is a free API you can call given some kind of expression for an address and it'll return you the latitude and longitude.
Now, I've hard-coded some near my location if we decide to use that, but right now I turn that off, so we're using the real data here, as you saw.
We got Salem, not this other place there.
It goes and it uses requests to download that JSON and then it pulls that data out of the JSON document and shoots it back to us.
So, that's the location service and then if we look at the sun service it's very, very similar.
Get a URL, we're using api.sunrise-sunset.org.
We're going to pass that along.
And then we can, again, use requests get our JSON result back, and process it.
Well, this is all good, but are we getting somewhere?
Yes.
We are massively, massively waiting right there and even this part, a little bit, could be, if there's a lot of data waiting for it to stream down.
Okay, so this just is the beginning of the request, and this is kind of the end.
Same thing over in the location one.
We have to wait.
So, if we could do other work online while white line 21 is waiting on sunrise-sunset.org that would be really awesome.
That would let us go do tons of stuff.
Here's our app.
We're going to focus on primarily on this.
We're going to go use the service, location service which we looked at using requests to get the latitude and longitude, given a zip code.
And then, we're going to use the sun service given a lat and long, to tell us when does the sun come up when does it go down, things like that.
Then, we just return that data.
That data is what you saw right here sunrise, and sunset, and so on.
Pretty awesome.
See if I refresh it, it takes about half a second for it to do its processing.
That's almost entirely waiting.
I think we need some async code.

Are you ready to convert our Flask app to a Quart app?
Well, that actual transformation is super easy.
Well see, most of the time we have to spend on actually rewriting our web API calls or work consuming services with requests but lets just convert this to Quart real quick.
So, we go over here and we going to comment that out and put Quart.
Let's just rerun this pip install -r requirements.txt.
Download the Quart stuff.
Okay, that went great.
And let's while were here go ahead and uncomment these bits.
aiohttp has a client like requests which lets you make calls to web services but it does it in an async friendly version.
Our dependencies are switched, of course we're still using Flask up here.
Let me just give you the quick overview what we're going to do.
Where you see Flask, we put the word Quart.
If you see a lower case flask, you put lower case quart.
If you see upper case Flask, you put upper case Quart.
Let's try this.
I know, we can all do it, it's no big deal.
That was good.
And we got to go to our other views these should be the only other two places where Flask appears.
So we go Flask is now Quart we're going to do a response we do it like this we have one more place with Flask with this blue print and then we're also using abort and jsonify.
That's it.
We've converted from one web framework to the other.
We converted from Flask to Quart.
Let's run it and see what we get.
Oh, yeah.
Over here we have the way this is running it set this up as a Flask server.
Let's just run it directly.
There we go.
Now, we're running on here again let's see if it still works.
Still does.
Let's see if our API still works.
Oh, 'cause it's 5,000, let's put 5,001.
There we go.
'Cause I changed that.
Okay, so our API still works.
Everything is good.
Are we getting all the benefits the magic of asyncs that I've already shown you?
No.
Let's go look.
The only part that really much matters is over here.
This method, is that method an async method?
Right there.
Sun, is sun an async method?
Well, no.
'Cause it doesn't say async.
So in order to actually take advantage of Quart we can run on it but this stuff still behaves basically identically to Flask.
But what we have now is Quart would be able to process this if we wrote an async method.
Whereas Flask couldn't do anything with this.
It wouldn't work.
That is all you could do.
But in Quart we can now start writing this.
So if we just put an async here and make those async and we await them, magic.
Let's do that next.

So let's make this async and we'll begin by starting at the lowest level so, in order to make this useful, we have to make this an async method, and that an async method so we can await it here.
So let's go here well, there's nothing we can await here, right.
This is regular request, we can't await that.
So, instead we have to switch to using a new API.
Now, it's going to look a little bit funky but it's it's not too bad.
So we're going to get rid of this and we're going to say aiohttp and instead of this part coming out I'm going to delete it in a second we're going to come over here and use a with block a with block to manage the life cycle of our request and that with block itself is async so the syntax is a little wild, let's say.
So, we create an async with block for an aiohttp client session, add session.
Cool, right?
Now, we're going to use that session to make a call.
Get that URL and we're going to store the response well, as a response.
Then we're going to go like this.
Now, this should get begins the request this one finishes it and that also is an async method so we need to go over here and add an await there.
Now, for any of this to work we need this to be an async an async method up here.
Okay, so, we could also do response.raise_for_status like that.
Intellisense autocomplete thing doesn't come up but it's good.
The other thing to do is if we switch this caching on for this to work this has to be awaiting an asyncio.sleep otherwise it's not it doesn't simulate the right kind of thing.
Okay, so we had that now we have this it's slightly more complicated but well, honestly what we have is that right there, right?
It's a little bit more complicated but honestly not so much.
Let's do the same for the sun.
Async the method.
Await asyncio for that one that's not really what we're doing but here these are aiohttp and we'll just do it like that.
Once we've turned this into a Python dictionary we no longer need to be in here like this and this of course, we have to await that right there.
Let's call that data and then, let's say sun.
Perfect.
So, that's going to give us our items back we can go do the processing all the stuff right here is happening outside the concurrency.
In fact, we could move that back, I suppose.
Like that.
Okay, we've now made this async.
Let's run it see if it's working, still.
Oh, got to tell this to run single instance.
So if we start calling this on one port well that part still works but we didn't change anything there.
This one, though this one we've made some changes actually, I think it's going into that one, let's see.
Yes, bad bad trouble.
What is wrong here?
Well, I'll show you what's wrong.
We didn't finish.
We've made those async methods but we have not made this actual method use them correctly.
Because they're async they have to be called from async methods and we have to await them to get their response.
Now, let's try.
Golden.
Golden.
Look at that.
Now, it looks the same.
Any individual request will take about the same amount of time but instead over here, let's just jump to this one.
Instead of blocking and just going, well we're awaiting on this until we can do anything else we're now going and saying we're awaiting all of these things.
We're awaiting getting the session the URL reading the stream to get the JSON all that kind of stuff.
So that means that all of these steps through here other processes other requests can come along and do the processing just like I showed you with the more obvious producer consumer version same thing with the web here.
So we're sharing basically giving up our wait time to go do other work let other requests be processed.
That's awesome.
And how hard was this?
Well, you find and replace the word Flask with Quart and then you write async in this programming code here.
For web services, you have this.
For time, you have this.
I don't know why you'd ever do this in a real web app but this simulates some load balancing or some load testing we needed because this eventually gives up if we pound it too hard.
Pretty straightforward.
And then you have to do it all the way up and down the stack so the most important part is the outer side outer, outer piece we have async methods and we await the results when we call them.
Basically, that's it.
That's how you get going with Quart

We saw that we were using Requests.
That was great, except it did not have any async integration.
It had no way to await it which means we couldn't unlock this powerful shared, cooperative multi-threading that asyncio provides and Quart is based on.
What we had to do is go find aiohttp's client.
We needed to find a replacement for requests.
I want to give you a few other examples so you kind of know where to look.
Every place where you're waiting think, database call, web service call cache server call, things like that.
To get true, full advantage of what we're talking about here you have to use an async version of that code.
Many of the most popular libraries don't have an async option so they're kind of useless or almost even harmful to you.
So let's look at a few others.
So we saw requests and aiohttp client.
If you're using Postgres, there's this thing called asyncpg for Postgres for Python and this is a fast Postgres database client for Python and asyncio.
If you look down here, often you'll see, like "Oh, it's super fast.","Awesome, awesome graphs" but the idea is, that with this one you can await your calls.
So, for example, we're going to run, and await connecting to the database and then, we're going to await running a SQL query and await closing the connection.
Alright, standard stuff, like you might expect.
What if we're using MongoDB and not Postgres?
Then you can look at Micromongo.
Synchronous and asynchronous MongoDB.
Very cool.
And this actually has the cool capability to be based on synchronous MongoDB on Motor asyncio, which is an asynchronous version or even a mocking foundation.
So there's all sorts of cool stuff you can do there and if you're doing like, Redis, well, aioredis.
Again, very, very similar.
Await connecting to it.
Awaiting executes some GET operation on a key things like that.
Standard Redis caching stuff.
You have to go get one of these asyncio-based libraries if you're going to take advantage of it in Quart.
It doesn't mean you have to have it.
You could make a synchronous Redis call but it means that that portion of your waiting time of the request, you're not giving up to do other processing.
You're hurting your, sort of, scalability there.
I guess the take away is, if it's available use an asyncio-based one and await it.
If not, you know, what are you going to do?
You still got to write your code and run it, right?
So use what you've got.

So you now know async and await we spend a little bit of time on the first day in the first set of lectures talking about that.
How we can take regular code and make it async.
Here we have a function and we're converting it to an asynchronous function by adding the async keyword in front of def.
Any time that we're in a waiting state, any time we're waiting for a response on calling a database or web search or even getting something from a queue, cause maybe the queue is empty or we're waiting until something goes into in, who know how long that's going to take?
We need to await that so we're going to await any other other calls to other asynchronous methods like this asyncio queue.get.
It's async so we basically have to do this.
If you don't know whether it's async just go to the definition of get, it says async def get, well you should await it.
If it doesn't then you can't await it, I noticed also that we're using data structures like the asyncio queue to make this possible.
Right, so you know async and await now that we talked about it in the first bit you already knew Flask, what do we do to make Flask work?
Well, we add a route, we write our controller logic and once we've come up with the data, we can either return it as a JSON response or we can return it as a template using that data, but we're going to return some response back to the server by passing it as a model data.
You've already learned Flask, so you know asyncio as of a day ago, you know Flask so putting that together to make Quart, that's crazy easy right.
Now we convert our view method or our controller method into async contoller method by adding async.
We implement our controller logic, but now awaiting any chance that we can get the more asynchronous we can make this, the better chance we have for scalability here.
And then we return our response, and notice anywhere we have the word Flask we put Quart.
So this is really simple path forward, to go from a Flask API to a asnycio friendly API, very cool.

We've done all this work and converted our web app to be asynchronous friendly and we've converted it to use Quart which will actually execute the stuff in parallel.
So here's the moment of truth did we actually get anything out of that?
Was it any better at all?
The truth is it depends a lot on a lot of different conditions.
Much of, under certain circumstances, absolutely so let's find out.
We're going to use this tool called wrk which as a modern HTTP benchmarking tool let's you on the command line sort of hit a URL or set or URLs and say, test them with this many clients and this many connections and see how fast you can do requests and see if there are any errors, things like that.
So this is kind of hard to get if you're on macOS like I am, it's pretty easy.
You can brew install it.
You can see the bottom initial link on how to install it at these various locations.
So on macOS, brew install is pretty easy if you're familiar with Homebrew.
On Linux, you have to compile it from source.
You check it out from GitHub and you compile it.
It's not too hard in Linux.
And on Windows 10, you can also install it but the way you install it in Windows 10 is you install the Ubuntu subsystem for Windows 10 and then follow the Ubuntu Instructions.
So pretty much, that is probably the most work.
You don't have to install us you can use any load testing tool.
I'm just going to show you some results.
So here is what we got when we run wrk against our Flask version of the sun API call.
So we're saying here, run with 20 threads 20 concurrent connections and pound the heck out of this URL for 15 seconds.
Run it for 15 seconds, 20 threads, 20 connections and see what you get.
Well it turns out we got not such great response.
We got 4.72 requests per second.
That sounds okay, but if you look over here actually we got 71 requests per second, but see that red?
We got 65 timeouts.
That's bad, that's not really amazing at all to me actually.
If I had a site, and half of the time it was timing out it would be basically considered to be down.
Why is it timing out?
We talked about as many, many requests come in if you can't keep up, they backup, and backup, and backup until eventually we got to the point where those requests actually timed out.
So this is the straight Flask version of that code and remember these calls take pretty long.
It's like a half a second per request to do the API interaction and stuff.
How about switching to Quart and running the exact same thing?
Here it is with Quart.
First of all, notice the red line is gone.
The red line is gone, timeouts are gone, that's awesome.
We also, instead of having 71 requests per second we have, sorry, 71 total requests, we have 311 which is instead of four requests a second 20 requests a second so actually it's about four times better in terms of performance, so that is pretty awesome.
One word of warning if you go and do this.
This is basically a deployment for Quart in general.
If you want to do this testing and you run Quart under a standard WSGI based web server uWSGI, gunicorn, something like that without configuring gunicorn in a certain way it's still going to just act exactly like Flask.
You have to run it in a different kind of web server that understands a different asynchronous API.
The guy who made Quart created a variant of Gunicorn called Hypercorn so if you wanted to take advantage of this asynchronous bit and if you're using Quart, of course you do otherwise why would you not just use Flask?
If you want to take advantage of that you need to run with Hypercorn which we got when we installed Quart itself.
So just be really careful around doing this testing that you actually run your app in Hypercorn and not just run it like we did out of PyCharm because then you'll get Flask performance for both of them.
This isn't change the world levels of performance but all those errors are going away and much better response time.
I would say that that's actually a really big deal.
Thumbs up to Quart.
I definitely improved the performance here.

Here we are in the Quart section of our GitHub repo and it's time for day four.
So let's scroll through, we're already done some of the stuff.
You should be familiar with day two cause you did that.
Day three was to watch all the videos and now that you're here if you watched them in order you're done with day three.
You're welcome to play around with the demos and things like that.
For day four, your job is to take one of the existing web applications based on Flask.
So we'll take one of our existing web apps you could use the one that you built when we introduced Flask and just make it a little bit slower.
We talk a little bit about how you might slow down your app so there's actually some reason to make it async.
You'd never really do that but it simulates database calls, web service calls, things like that.
So then it walks you through the steps of converting from Flask to Quart and making everything async.
If for some reason you don't have a Flask web app to use, and you're like "Well I don't have an app, what am I supposed to use now?" Just take this one.
You're welcome to take this one and make it async.
This is the one that we actually created during the videos, so you've already kind of seen it.
Maybe that's a good thing maybe it's not a good thing I don't know.
So either take an existing Flask app that you built in a previous part of this course or somewhere else or take this one and follow the steps here to make it slow, convert it to Quart and you should be able to see that it scales better.
It won't be any faster, but it will scale better.
When you're done, be sure to share what you accomplished.
Put some sort of message out on Twitter, Facebook that's the whole idea of this 100 Days of Code is the social accountability.
So be sure to share what you're up to.
And if anything's unclear you're welcome to submit an issue or even a PR to just make it better.

Hello and welcome back to A 100 Days of Web in Python.
It's day 25 now.
I'm going to give you an introduction to JavaScript.
And, of course, a whole new language.
That's a big topic.
So we're going to keep it pretty focused and simple give you the basics to become dangerous in JavaScript.
And I want it to be really hands on so after introducing the history of JavaScript and the basic syntax of the language I have exercises lined up for you to practice.
And then we're going to look at manipulating the DOM basically using JavaScript in the browser and we make a simple calculator.
We learn a bit more leading to a full-blown JavaScript app to track your calories.
There's a lot to learn.
So let's dive straight in.

Let's look at the plan for the coming four days.
In the first nine videos, you're going to see me explain the history of JavaScript, how to run it and some fundamental building blocks of the language.
Then in video ten, I will present you with four optional exercises to help the concepts sink in.
Then for day three we dive into a very fundamental aspect of working with JavaScript which is the DOM or Document Object Model.
I have a simple website with a bunch of quotes which we're going to manipulate using JavaScript.
Then for day four, I got two projects for you that you should be able to code with the concepts you have been learning throughout the lesson.
It's a simple calculator and a calorie counter.
In the checkout go to Days, Day 25.
And in the demo folder, you have all the materials.
So you got the language building blocks including the four exercises that will point you to on day two.
You have the demo you're going to use for the DOM lesson and the two projects.
Let me show them to you.
First of all, simple calculator which drives home what you will learn about the Document Object Model.
Because it's going to grab the values you need to input fields and a operator that's going to handle a button click, calculator result and bounce that back to a div.
It will handle some edge cases and change the styling accordingly.
And the final project is the calorie tracker.
I have some artyom complete code that will be provided from the start.
and it will work like this.
I loaded in some foods from McDonald's and I should add them.
It counts up to calories.
You're consuming.
You can also remove them by clicking on the X.
And the total count adjusts accordingly.
When there's nothing left the whole diff will hide.
So apart from the exercise there's two fun projects you should be able to work on day four: a simple calculator and a calorie tracker using McDonald's calorie data.

Sure Python is hot but look at JavaScript.
It's the number one language used right alongside HTML,CSS not a coincidence because those are the three languages used for the web.
Python has risen in the ranks and it's has a solid claim to being the fastest growing major programming language.
And this course is all about Python and that's great.
But for this sixth year in a row JavaScript is the most commonly used programming language.
And I got this from Stack Overflow.
So you're really wants to learn JavaScript.
A bit of history.
I found this nice infographic from checkmarks.com.
And we see that JavaScript was invented in 95 at Netscape.
It was not until 2005 that we saw a big boom And that was because there was a new invention and it was called Ajax.
You probably have heard of Ajax it made it possible to do stuff interactively on the web without refreshing the page.
We also saw frameworks popping up like jQuery.
That's actually how I used most of my JavaScript.
Since then JavaScript is booming.
And you see in 2016 92% of all websites use JavaScript.
And of course you all use JavaScript taking your Facebook feed, Gmail, Twitter and all the major websites you use all those nice UI effects that's all JavaScript.
So again, why JavaScript?
Well, it's the language of the web.
If you aspire to become full stack developer and doing any web development you cannot escape JavaScript.
And yes it definitely has some design flaws but being adopted by all major web browsers it definitely its something right.
JavaScript is also labeled lightweight its high level, weakly tight and it's considered relatively easy to write programs in.
And actually it's getting a lot better.
Since the ES6 or ECMAScript 6 the JavaScript standard the language has made major improvements introducing more concise syntax.
And we'll see some of them later on in this lesson.
And again it's really cool and useful.
So looking at the docs at developer.mozilla.org I found this quote saying that all these cool effects you see in your browser like animations, graphics you name it it all has JavaScript behind it.
One important distinction is what is called Vanilla JavaScript.
And it's the JavaScript that's not extended by any frameworks or additional libraries.
And that's what we're going to focus on in the coming four days pure JavaScript.
But don't worry you will also get to play with two frameworks in this course.
later chapters will introduce you to react and Vue js.
Okay now it's time to start introducing you to the basic syntax of the language so you can start writing your own JavaScript programs.

First let's actually look at how to run JavaScript.
And I will show you three methods you can do it.
And the first method is to just run it in a browser.
So let's first write out Hello World and to make a file called hello.js.
And I'm going to write small function and we will deal with language syntax starting the next video.
Just bare with me.
And we're going to return a string, 'Hello '' + name.
And to call this lets log a message to the console.
So I'm going to do a console.log, which would be the equivalent of Pythons print.
And I'm going to call the function passing in a name.
So we have a script, saved to hello.js and how do we run this in a browser?
Well we can write a little bit of HTML.
So here's a simple HTML5 template and the script tag allows you to import JavaScript as well as just write it inside script tags.
So here I imported my script hello.js as living in the same directory.
And here I can call it, so I don't need this for now.
And what I now can do, is open this index file in the browser and nothing happens.
So what you first want to do is to click inspect and we'll open the Chrome dev tools and you head over to console, end of string must print it.
And here you have this function now available so here's the source code.
You can call it with and that is to the finer variable, we will see that in the next video and now I can call that function with another name.
That's nice.
Now to complete.
And there you go.
So here you have the console in the Chrome browser you can imbed your script in Index@HTML and run it interactively.
The second way to run it is to use server side JavaScript or Node.js but you would have to install Node and then you can run it at the terminal.
So you would come down to Node.js, download the starter of yours and install it from the package.
I've already done that so then the work flow would be you don't need this HTML, you can write your function you can write the console log here, go to background and now I can just run it, node hello.js.
So if you like to work with a terminal then that's a second way you can run JavaScript.
Install Node.js write your code and run it from the command line.
A third way is to use an IDE.
So here I have my VS Code editor open, I can put in the JavaScript I just wrote and by default there is not a run code option here so you would want to install VS Code runner you can get that from the Visual Studio marketplace install it, open it in Visual Studio Code, you can install it here, install, now it's installed and here I've got a new option under my right click called runcode.
Here it opened a pain running the code and the output.
So that would be the third way to run JavaScript using IDE and probably with an extension and this is VS Code.
I've actually just discovered this IDE.
You will still see me use VIM throughout this lesson though but yeah I know a lot of you use IDE so this is worth exploring and the process will probably be very similar for your IDE of choice.
In the next video we are going to dive into the language syntax.

In this video, we're going to look at JavaScript basics.
Let's open a console and write some JavaScript.
So the first way to do a Hello World to the console is to use console.log.
Second way, we can do it in the browser is to use the built in alert.
And that gives us a nice pop up.
To define a variable you can use var.
But var is a bit outdated and these days it's best practice to use let.
This creates it's own scope and we'll see that in a bit.
Let's rename it something else.
The advantage is that I can not redefine my variable.
Where var was more permissive.
JavaScript has a reserved word to define constant and it's const.
I'm using camel case as is best practiced in JavaScript supposed to hyphen which would use underscores.
Okay, for example set an min age for driving at 18 and now I can not set this to another value.
Because it's defined as a constant.
So just play a string.
Use alert or console.log.
And especially when you start to write your JavaScript code print it to the console is one way to debug your programs.
But I will show you more tricks in a later video.
Define variables, already JavaScript used var but now best practice is to use let and constants are defined with const.
And we saw that one advantage of let is that you can not redefine a variable and a constant can not be assigned another value.
Var vs let.
Let was introduced with ECMAScript 2015 let variables are Blocked Scope.
As we know from the Zen of Python name spaces are a good idea and that's exactly what's going on here because if you give a variable scope then it's more difficult that variables take on values that you wouldn't expect.
And here we see a practical example where with the old style, var the variable will still be available outside of the block.
And block I define as whatever goes into curvy braces.
However with let the variables scoped inside of this block and if you try to reference it outside of that block you get a reference error and that's way safer you can read more about that on Mozilla's developer documentation.
I want to introduce this early on in the lesson because it's often that you define a variable so it's good to know best practice.
JavaScript has primitives and objects.
Primitives are boolean, null undefined, number string and symbol.
It works pretty much as you would expect.
We're all familiar with boolean from Python the only thing that like cause confusion is null and undefined, where Python generally has None.
The more options you have the more likely it's that you'll make a mistake.
Another tricky thing is one type for numbers which is number.
And Python has ins and close which usually leads to less mistakes.
String you already know from Python str.
And symbol is a new data type I have not found a use case yet so it's the youngest cub of this chapter.
Objects are very important in JavaScript at the most basic level you can use them as ticks of key value mappings and I will have an example latter in this lesson.
But there's much more to it you can actually use them to add methods and behavior.
Making them what in Python would be fully flat classes.
More info on data types here's the link.
Be warned that JavaScript is extremely permissive when you add different types together and that puts the responsibility on developer.
A nice example is summing an int and a string.
In Python it will lead to a type error which probably is a good thing because Python doesn't really understand what you want to do.
However JavaScript makes that decision implicitly for you in this case it adds it to as if there were strings.
So in this case you need to do a parseInt on the 37th string to get an integer result.
So just keep that in mind that often times where Python crashes Java Script does something implicit and it might not be what you want.
Towards the end of this lesson I have a whole slide on JavaScript contrast and it's important to become familiar with how the language is designed.
In the next video we're going to look at JavaScript erase.

Let's look at JavaScript arrays which will be the equivalent of Python lists.
Defining one is very easy, and similar to Python.
An array has a bunch of methods we can call on it and see, by the way, the nice console feature of autocomplete and showing the output already before typing till the end.
I can sort the array.
I can reverse it and notice that those operations are in place so the list is now reversed.
The slicing syntax is not as powerful as Python.
You can do it for the first item but not so for the last let alone taking a slice.
So you have to use methods to accomplish the same.
Sorry, it's not itertools.
To add items to the array you can use names.push..
It prints to new length.
You can get the last item using pop, just like Python.
And to get the first item, you can use shift.
And again, those operations are in place.
Those cover the main use cases of working with arrays in Javascript.
And to recap, defining an array, very simple same syntax as Python.
You can then get the first item you cannot get the last item like this let alone slicing.
But you can use the slice method on the array object.
We can reverse an array in place sort it, get the last item, get the first item add a new item or name and get the length.
So we still got names.
Let's add one more.
And another one.
So we got four names.
And the classic way to loop through an array is very C-like by doing a classic for loop.
And a local variable of i, the index, we set to zero.
We go till i reaches the length of the list.
Really like this autocomplete.
And let's say we just print them out, right?
And we have to index in the list.
And make it small for and by the way when I was talking about indexing I only showed how to get the first item.
But you can of course get the second item the third item up until the fourth item.
And there's not a fifth item.
And that's interesting because Python would actually crash here and Javascript again is very permissive.
It's not raising an exception, so be careful.
So this is the classic for loop I showed.
It's quite a lot of code so starting ECMAScript 2015 there's a shorter, more concise way to do this.
So you can do for { console.log ; } so for { console.log ; } and it gives them all four.
And that's a bit less code to type and it's more elegant.
So again we have the C-style for loop with indexing into the array but starting ECMAScript 2015 you can actually write it more eloquently and both for loops print the names in the order that they're in array.
In the next video we're going to look at conditionals.

This is a quick video on conditionals and a break in continue statements.
First, let's demo a very simple if else.
Let's use our constant from the previous lesson of mean age close to 18.
And that set my age to 17.
Now what if you want to determine if at my age, I can drive being the driving age, the mean age of 18?
Well, it's very simple to write an if statement.
So if my age, is greater than or equal than mean age I can drive.
And that doesn't return anything, because I'm not 18 yet.
So we can add an else block, to print a different message.
And now, that gets me, cannot drive as expected.
Now there's a shorter way to write this in JavaScript using a ternary statement.
So in that case I'm doing the if condition in parentheses.
And look again at the nice auto complete of the Chrome DevTools console.
So the ternary, I put my conditions in parentheses then to question mark then you put the code in that hits when it's true.
Then you do a colon, and you put a code that hits when it's false.
So instead of five lines of code I can do this just on one line.
That looks pretty nice.
Next, let's do something a bit more advanced.
So we're going to make a list of names.
We're going to print the names ignoring the ones that start with B and stopping when we hit a name that starts with Q.
So here is an array of names.
Let me use what I had before but add a few names starting with B one that starts with Q, where we want to stop and two names at the end.
So an array of seven names I'm going to look over with a new syntax.
Right, that gets them all seven.
And next I'm going to ignore the ones that start with B.
So we can write an if statement.
If name starts with then we should recognize that from Python.
We only get the ones with B.
One in this case.
I want to continue.
So I can use the continue statement.
So now I got five names because the one starting with B are omitted.
Lastly we said, if we hit a name with Q we stopped a loop, and we can use a break.
So if you have a second condition we can use else if.
And that condition will be the name starts with Q.
I'm going to break out of the loop.
And now we have only two names because Bob was ignored, Tuni and Mike were printed Berta was ignored.
Then we found Quintin and we broke out of the loop.
So again, as simple as else.
If my age is greater and equals and mean age they can drive.
Otherwise I cannot drive.
And as my age is less than mean age cannot drive was printed.
I can write the shorter using ternary.
A nice construct in JavaScript puts condition in parentheses, followed by a question mark.
Then you have your true code.
Colon decoded hits when it's false.
An example of using if else and for loop.
I got a bunch of names.
I'm going to ignore names that start with B and stop when we hit a name starting with Q.
First we have our loop.
Then we have an if else if else.
And actually my console lock defaulted after here.
But here I put it in an else.
Should have the same effect.
If the name starts with B I will have to continue to look without doing anything.
Else if, the name starts with Q I'm going to break out to look and effectively stops this program.
If it's neither of those I have to print a name.
And we saw that Mike and Jillian are the only ones left.
It's just an example to show you how you can combine four if else with continue upgrade to manage, to control flow.
Now there are two major building blocks left when it comes down to JavaScript basics which are functions and object.
And I will cover those in the next two videos.

This video is about functions.
Like in Python, functions are first-class citizens.
They can be assigned to variables, passed around, et cetera with one or more expressions, also called side effects and can optionally return a value.
It's not required though.
Each function creates a new scope.
Localizing the find parameters and bindings not visible from the outside.
Functions can be nested also called Closures, and call themselves recursion just like in other languages and they can have one or more parameters or arguments.
And here's some more information.
So that's stacks trading.
A function is defined with a function reserved word, a name optionally you can give it arguments and a block is defined within curly braces.
So in this case I am just going to bounce 'Hello' + name and we close off the function.
To call it, I can give it a name and we see "Hello Mike" just as we would expect.
If we omit the argument we get "Hello undefined".
And here again we see JavaScript's more permissive because Python would raise an exception for example.
Type Error and expects one argument and it doesn't allow you call it without that argument.
Not so in JavaScript, and we'll see later how we can set default arguments.
Let's return the value Next.
So I'm going to do a function Calculation2Celcuis that takes a Fahrenheit temperature does the calculation And returns the value.
So now I can call this with say 100 Fahrenheit and I see that's 37.7 Degrees.
Great.
Now let's talk about arguments.
JavaScript functions keep an internal array like object with the arguments passed in.
So to Demo let's just write a function called PrintArguments that's going to print them out.
So we can do For let arg of arguments Console Log of arg close up the for loop and close up the function.
So calling it without anything I don't get anything Calling it with 1,2,3 I get 1,2,3.
Arguments is only accessible within the function because it's called to the block inside the function.
Okay, calling it with a bit more.
So next, how would you handle default arguments.
For example we want to do another hello function and if name is not provided we want to bounce a "Hello stranger" message for example.
So one way to do it is to check name against undefined and we will come to this with JavaScript gotchas with our two comparison operators 2 equal signs and 3 equal signs and you usually want to use the 3 equal signs because it not only checks for equality but also the same type.
So here it will exactly match undefined.
And that's just more specific and you probably make less mistakes.
So if name is undefined and doing this in the same line I can omit the curly braces I can set name to "Stranger" and then do the printing.
Let me close those off with semi colons as is best practice.
So now if I call it without anything I get "Hello Stranger" If I call it with a name I get "Hello Name." So that's one way to handle default arguments.
But there's a nicer way and it's similar to Python.
So as you know you can set a default argument in Python like this.
And now if I call it without anything I get "Stranger" and when I call it with a name I get "Hello Name." And starting ECMAScript 2015 JavaScript now has the same syntax So we can write function Hello Name = default "Stranger" I don't think there's an Fstring.
No there's something similar actually.
You can do backticks and embed the very role like this.
I call it without anything I get "Stranger" I call it with Mike, I get "Hello Mike".
So JavaScript is gaining a lot of nice improvements lately.
Another one I want to show you introduced in ES6 is Arrow Functions.
And to use the same example you can write it even shorter.
We can omit the function reserved word.
And instead of a block we can just use the Equal Greater Than or Fat Arrow I think it's called and print the string.
Let's assign it to a variable.
And now I can call it like this or passing a name.
So a bit more concise syntax.
Arrow Functions are pretty exciting and again JavaScript syntax is getting a lot better.
So to recap a simple function Function, Reserved Word, name of the function Parameters, in the body inside curly braces which defines a new scope.
And you can do some work and optionally return a value.
And when we print it to the console it will return the value as a string.
So function takes input parameters and returns one or more values.
You read it a typical calculation from Fahrenheit to Celsius and calling it with 100 Fahrenheit, you get 37.7 Celsius.
Arguments.
Internally JavaScript functions keep an array like arguments object.
And here we print all the arguments passed in.
When we call this function with 1,2,3 it prints 1,2,3.
So how would we then handle default arguments.
The old way is to look explicitly for undefined and set the name to a default value.
But lately with ECMAScript 2015 we got the new Python like syntax of sending a default value in the parenthesis and that's way nicer.
Lastly ES6 introduced Arrow Functions which introduces a more concise way to write functions.
You can use it on one line like this send to variable and call it.
Because functions are passed around as first class objects.
That's definitely not all there is to functions but it's enough to get you started.
Functions are an important building block when your programs grow and when you have to interface with other parts of the program.
Next up are Objects.

In this video, we will look at objects.
They are fundamental building block in JavaScript.
Like Python, everything in JavaScript is an object.
You can say person is Bob.
You can method on that object.
As a data type and at the most basic level objects can be seen as dictionaries in Python and they can in find one using an object literal.
If you're familiar with the platform you know that our exercises are called bytes.
Let's define a byte.
A nice thing is that in JavaScript you can access the properties with a dot notation but also like a dictionary in Python.
Now objects in JavaScript are way more than just dictionaries.
They're fully fledged classes under the hood so we can also add methods.
For example, if we will do something like the Dunder STR in Python you can do that straight on the object.
And I forgot to mention in the last lesson that anonymous functions are defined like this.
Now I'm just starting to print the info of the object to the console and to actually access the properties I need to use this, a bit like self in Python.
So then I can call that method and I get a nice output.
So the recap, like Python and JavaScript almost everything is an object.
You can define a variable and we can call methods on that object.
All JavaScript objects inherit properties and methods from a prototype.
Now a prototypes are beyond of this beginner lesson but I encourage you to look into it further because it supports powerful object-oriented program features.
To create a simple object we can use an object literal which seems like a dictionary in Python.
We can access the attributes or properties by the dolt notation or putting the keys in square brackets.
We can add methods to our objects using the anonymous function notation and here it just bounced the object information to the console and to reference object attributes I need to this keyword which is similar to the self keyword in Python classes.
Here I call the method and again an output.
To inspect objects you can use console lock and when you click on the arrow you get a nice representation of the object.
You can also use Jason string a pie to serialize it to a string.
One important notice that objects are copied by reference by default so I would assign byte to a new variable called by two and I changed one of their properties that change is reflected in both objects.
Some something to keep in mind.
This concludes the basic JavaScript construct of day one and tomorrow on day two I got four exercises lined up to make you practice the materials that you've learned so far.
See you tomorrow.

Welcome back to JavaScript Introduction.
It's day two now and today it's all about practicing what you have learned so far.
So now it's time to see into the Demo folder of your checkout.
And there you will find a couple of directories and see into the language.
Now, run JS and debugging are for my lesson but the exercises are in control, flow, functions looping and objects.
As you see, every exercise has an HTML file that will embed the JavaScript, so you can run it in a browser and you will start with the exercise.html and if you're stuck or if you just want to work from the solution, you can use the dash solution files.
So let me quickly show them.
I have a multi-line command showing what's required and some startup code has been provided.
So here we make a simple number guessing game asking the user for an input partial to an int and check if the number is a secret number.
If it's lower, we print to low; if it's higher, we print to high.
And if we assert a number, we print, you guessed it.
Again, if you get stuck you can always look at the solution.
The second exercise is about using functions.
So here, we're going to write a function to some numbers.
You might have seen this one on the platform, actually it was one of our first bites and here you have the sum the numbers provided to the function but if numbers is not defined you sum a default range of 1-100.
Now, already you can say that JavaScript is not having built-in range so you probably have to write a second function to generate a range from 1-100.
But that's awesome, because you should be practicing writing functions.
Then I got a looping exercise where you're provided with two arrays of names and ages and you write a small program to loop over both.
For each person, you print a name, the age and if they're allowed to drive, based on their mean age.
And it's closely related to what we've seen in the previous videos.
Now the last exercise is about objects and it's kind of pre-work for the final project but to kind of recounter.
And here we can just create a list, or array of simple food objects that contain a description and a count of the calories.
Then you print that to the console.
So, some exercises to really get you practicing what you've learnt so far, because as I always say the learning's in the practice.
And with that done, tomorrow I have some more video lessons lined up, to start looking at the document object model a fundamental piece of working with JavaScript.
See you tomorrow.

Welcome back to day three of JavaScript Introduction.
I hope you liked the exercises of yesterday.
I hope you learned a lot.
I hope you had fun guessing a number.
I hope it was straightforward to sum some numbers and define a range function as well.
And some food objects looping through the array of those objects.
Today, I'm excited to teach you about the Document Object Model, or DOM.
So what is the DOM?
The Document Object Model is a platform and language neutral interface that will allow programs and scripts to dynamically access and update the content structure and style of documents.
Basically, it's how JavaScript can manipulate content on a website.
And it's important to note that browsers may extend the standard so there may be differences across browser.
Think of it as a tree of objects.
So, you have your webpage, and that's a root you have the HTML element which is further broken down into head and body.
The head then typically has title and metatags.
And the body is the actual content of your page.
So you got links, a tags headers, h1, paragraphs, divs, etc.
So with the object model, JavaScript gets all the power it needs to create dynamic HTML.
JavaScript can change all the elements attributes, CSS styles can remove elements, add new elements react to all existing events and that's really exciting because all those modern apps we use today there are a lot of handlers listening and as you click on things, scroll or do anything on those websites JavaScript listens and does things on the fly.
And it's all JavaScript that's responsible for those nice effects and animations in the apps that we use every day.
Now, let's get practical and do a demo.
I'll retrieve some of Richard Branson's favorite quotes I put them in a website where I edit some paragraphs and the quotes in an unordered list of list items.
We're going to manipulate the DOM of this simple page learning how to target elements using elements by tag name, class name, and by id write new content using inner HTML and then remove elements with append and remove child taking the CSS using element style color and a click event using add event listener so we can share a quote on Twitter.
So let's go to my demo folder in the checkout that's seeding into DOM.
Here I got my website, which is a simple HTML tree of head containing a title body containing a div paragraph, an unordered list with id quote and a ten quotes in reversed order.
And I did that on purpose so we can write them back to the DOM in order as part of this demo.
One quote has a class of Churchill and at the bottom, there is a p tag with an id of more and we're going to write some content into that.
Then I got my Javascript tags and inside it, I got the tasks I want to accomplish.
Let me open this website.
And here it renders in the browser.
First of all, let's get the p tag with an ID of more.
To work with the DOM, we have to document object and we can call methods on it.
So, in this case I want to call cap element by id.
It's very similar how you target elements in Selenium which you also learn about in this course.
So here's the paragraph and an ID of more and I can get the element by ID specifying more in parenthesis and let's just bounce this to unordered.
I get an object of HTML paragraph element that's got its content and I can say inner HTML.
And that's just a dash.
So let's put something more excited in there.
I can target the inner HTML and just write a string into it.
Now if we refresh that content gets written into that element.
Great!
So how can I get all the p tags?
Let me define a variable.
From here, I can use get elements line tag name then target the paragraphs.
And let's just bounce 'em to the console.
Let me open the console.
Refresh, and here I get my p tags.
So this is the first one and the second one.
The first one didn't have an id the second one had the id of more.
Great!
Let's get all the li tags, or list items which are effectively the quotes.
It's the same as the paragraph, but we just target li.
And I'm going to store them in quotes.
You can bounce the length of the quotes and as it's an array, I can index into the quotes and get the first element and its inner HTML.
Let's try that out.
Awesome, I get ten quotes and the first element is number 10 "The beautiful thing about learning...," etc.
Great, we're getting somewhere.
Now what if we want to get the Churchill tag which happens to have a class of Churchill?
Well, I can also target elements by class name so let's do that next.
But you're not going to really use it I'm just going to straight log it to the console.
Document get elements by class name.
And notice it's plural so I can index into the results which is an array and get the content with inner HTML.
Let's refresh again, and there you go: I get quote number three, which had that class set.
Now in the next video we're going to do some more manipulation of the DOM writing the quotes back in order, add a new quote remove the last quote, adding color to quotes and work with an event listener.

All right, continue with the demo.
As we've seen the quotes are listed in descending order and I did that on purpose.
So the next task is to extract them and write them back to the DOM but now in numerical order.
So we have quotes already stored in a variable the only problem is that I can just reverse them let's see what happens.
Oops, reverse not a function.
That doesn't say that much let's just bounce it within that art.
Ah, it's an object of HTML collection which doesn't have a reverse method.
So I need to cast it to an array we can do that like this.
If I bounce this to alert I should get what I want a proper array.
And erase after reverse method so if I do this I should get what I want and of course I see only the parent note name I've already resolved at church, it was this one which now shows as the third item.
So this seems okay.
So lets write 'em back to the DOM we start them in quotes learn how you could get the quotes id remember that the unhonored list had an id of quotes.
So let's target that, I'm going to define a quote eval variable and use a get element by id of quotes.
To verify that I get the right element let's just override, what's in that tag.
And that didn't work because I made a typo well that was a silent error because I had to use enter HTML and that's something you have to get use to when writing JavaScript that some errors are not shown and unexpected behavior might happen.
So be prepared for that, now it worked.
So I got the list items overridden by some text, so let's populate the unhonored list with the quotes of now in numerical order.
And I can use appendChild, with the quote.
Let's get rid of some text and look at that, awesome.
Now they're in the right order and it's writing them actually overriding them back to the DOM.
Let's add a new quote.
I had this already in my bathroom because it's a lot of typing.
So I define with everyone new quote which is from Douglas Crockford who wrote "JS The Good Parts" so let's add that one as well.
Notice that I cannot just add the new quote with appendChild, like we did before because this merely created the TextNode.
Actually I can but it's not a list item so the proper way to do it is to first create a new list item with createElement use the appendChild on that new element and implant that new list item instead.
So here it gets me to write HTML a list item and inside it this text and then it shows up as a list item.
To remove that last quote, it's very simple you can target the same quote ul and use the removeChild method.
And it's gone again.
Let's do a little of CSS.
What if you'd color the quotes given the even and uneven quotes a different color?
The module index is 0.
And set the quotes style, the color to say red else we set up to blue.
And there you go, now the uneven quotes are red and the even quotes are blue.
And that was pretty easy to do Finally let's add a behavior to the quotes I'm going to add an EventListener that's going to watch if the user clicks on the quote.
So I'm going to use the same file.
Add each quote, is going to get an add EventListener and it's going to listen to click events.
And we have to give it a callable which gets the event and know we can do something when a user clicks.
I'm going to get the target element which is target work not set.
I get this source element.
I'm going to define a tweet URL which is the standard intel link.
And then to add the argument element in our HTML.
Now if we send anything in a URL which we are basically doing here I need to make sure that I URIencode the content And JavaScript comes with a handy encode URI, for example, my quotes contain spaces and what encoding does is converting spaces to percentage 20 to make it compatible to share in a URL.
Now we are going to open a new tab which is to tweak your URL.
And to do this in a new tab, I can specify blank.
We are going to get to use a bit more information, what they can do so I'm going to target again that more paragraph and append.
Lets see if it works.
I've got a typo, right I did not close off the parenthesis.
And hear I see click on the cross to share them out to Twitter.
Awesome, and notice that this is the URI encoding in action, so all the spaces are converted to percentage 20.
Let's click on another one so if I click on another quote this handler fires, grabs the quote and turns it into a Twitter share link and goes to that link opening a new tab.
Pretty cool.
The click event is just one example there are many, many more.
For example we can add mouse over mouse out, resize of the window, etc.
And to all these user behaviors we can add an EventListener and a function to do something based on this user behavior.
In the final two projects you will work a lot with the DOM and it's elements with the demo shown you should have all the basics to give that a try.
In the next video we are going to look at debugging in JavaScript.

In this video we're going to look at how to debug in JavaScript.
CD-ing into my language folder I got a debugging folder and a simple HTML page and it's actually the calculator you're going to build.
The only problem is that it has a bug.
This as well is not correct because one plus zero is one and not 10.
So let's see what's going on.
I can go to inspect, which will open the the Chrome dev tools.
We've used console a lot throughout this lesson but now I want you to go over to the sources tab.
Here we can access the source code of this page and in this case, I have the JavaScript inline.
Let's make this a little bit bigger and let's set a breakpoint right after the calculation.
Then we're going to enter one and zero, and take the sum and now it breaks into the debugger.
I opened the console below, and I can access the variables as they're set at this point in time.
So this is actually the bug and to fix it you can use parse int on both variables and that works so I can apply the fix in the source take away the breakpoint refresh the page, and that now works.
I do want an A, I got a NAN, not a number which is what I expect.
There is a lot of options you can: step into a function call step out of the current function just do a step, for example, if this would be a for loop you can step through every loop with step can pause, resume, etc.
But here, I just wanted to show the very very basics: how you can look at your code in realtime by setting a breakpoint.
When you write JavaScript, I highly encourage you to become familiar with the dev tools in the browser of your choice because it will speed up your web development.
Talking about bugs and potential issues.
In the next video, I will show you some common JavaScript gotchas.

JavaScript gotchas.
It's important to acknowledge that JavaScript was designed in 10 days.
Gary Bernhardt, in his inspiring talk The Birth and Death of JavaScript, shows this in relation to the time it took to design Closure and you see it was very fast.
And that led to some weird decisions in the design and here he shows some examples.
Go watch this talk.
It's not only highly entertaining, and inspiring but also visionary 'cause a lot of what he said five years ago is actually very relevant today.
So what are some common JavaScript gotchas?
Well, the most important thing are global variables.
As per best programming practices the less isolated something is the less reliable.
Make something global and it can change in multiple locations.
We've already seen that if you use the var keyword to initialize variables those variables can easily be clobbered in outer namespaces.
So you should use let and const.
JavaScript has C-style block syntax but not its block scope.
No information hiding.
In the same vein, the flexibility of JavaScript allows you to omit semi-colons at the end of your statements.
Which usually is not a problem unless you space your code in a certain way then errors again pass silently.
So make sure you use semi-colons to not run that risk.
And there are two equality operators.
If you use double equals sign to compare number one and string one it would say that they were equal.
But that might not be what you want because although they look the same they're not from the same data type.
So it's recommended to use triple quotes which not only compares the values but also the types.
So in that case number one and string one would not be the same.
And, similarly there are two ways to say that something is null, or undefined.
Where Python for example only has none and it still confuses me which one is used in which scenario.
Remember, errors should never pass silently according to Python, unless explicitly silenced.
There should be one, and preferably only one obvious way to do things.
And namespaces are one honking great idea.
And of course this is a lesson on JavaScript.
It's not Python.
But looking at the inner works of JavaScript, I both appreciate Python a lot for its design, but I can also see how JavaScript is dynamic and easy to get started with.
It's just that you have to keep these kinds of gotchas in mind when you're programming JavaScript to rule out any unnecessary risks.
And this is a very high level overview of JavaScript.
And in the last video, I'm going to point you to some resources so you can keep studying JavaScript.
Because again, it's used everywhere and the web is running on JavaScript.
So any time you can invest learning this language is time well spent.

Further study.
If you're still feeling very new, there's this link where you have a nice interactive page to learn JavaScript in 14 minutes.
It's nice to go through, even if it's just a refresher.
The W3Schools JS tutorial is very easy to follow and there are a lot of practical examples that you can try in a browser.
As I always recommend, you learn by example that's the reason I really like t try in a browser.
Examples.
The Mozilla developer documentation is a great way to read through and learn more JavaScript.
Then for books, I can recommend three.
There's this series, You Don't Know JavaScript by Kyle Simpson.
He has seven or six editions and they're pretty small each and explain the concepts very well.
As JavaScript has some amazing parts but also those we discussed in our last video JavaScript: The Good Parts by Douglas Crockford is a great book to further familiarize with the good, the bad and the ugly and it's pretty small I think around 100 pages.
To go more in depth, not only JavaScript but programming overall I can really recommend Eloquent JavaScript.
It explains concepts very well and goes beyond the basics and teaches you how you order functions acing programming, a lot about the DOM and web programming and has a lot of exercises with hints and solutions and fully-Flash projects you can code alone.
Now next you probably want to look into one or more specializations, so you've got node.js for to server-side, you've got typescript if you want to learn how to write JavaScript using static typing.
Then the next logical step will be to look into one or more frameworks.
You've got, of course, jQuery which has been around forever.
I mean, I used it quite a lot, like eight years ago.
But since then, we have Angular, React, and Vue.JS.
Later in the course, you will learn about React and Vue.JS, so we've got you covered.
Lastly, it's important to see if your browser supports the newer features, like arrow functions and default arguments I touched upon in this lesson.
And you can go to caniuse.com and enter the feature that you want to use and you get a nice matrix of browsers and versions that support that feature.
So make sure you check out that website when you implement more modern JavaScript.
And this concludes the JavaScript lessons of Day 3.
For tomorrow, Day 4, I've got two exciting projects lined up for you, so you can put into practice what you learned throughout this lesson.
See you tomorrow.

Welcome back to the hundred days of web and day four of the JavaScript introduction.
You've gone through all the videos of this lesson congratulations.
And now it's time to practice as I showed at the beginning of the lesson there are two projects you can build.
A simple calculator and a calorie counter.
And all the materials is here in the demo folder of the 2528 JavaScript folder.
So the calculator again just a simple form.
It can perform calculations multiple operations.
And it has a bit of error handling in the sense that if you divide by zero or you give it a different type, a string it gives infinity and none and it's colored red.
By over riding the styles in the DOM.
I have provided you starter templates so we have the HTML, some CSS and even the form actually and the function you have to write.
And here we do an inline event handler.
So when the user clicks the calculate button, do calculation fires and that's the function you're going to write.
The second app is the calorie counter.
And its under calories, and again open index and this should work like this.
I can, there's some McDonald's foods loaded in with their calories.
I can add the foods some nuggets and it's all calculated on the fly.
Of course, this seems way more involved and that's why I got you some boiler plate code.
So if you go to the starter template that nice auto complete that you say that's actually a vanilla JS auto complete plugin.
And included all that code that's already written.
Then I made function stops and some of them are filled in, and some are empty and have some commands what you need to do.
And the foods are actually loaded in also.
So, in scripts I actually made a Python script to scrape menu into JSON.
So here's the data.
So a bunch of foods from McDonald's with their quantities and calories.
And I made a script that loads in that csv and just dumps it to JSON to food_json which is food.json and that gets loaded into the page.
Again, also the auto complete and the script.js is where you actually going to write the code and that was again the starter template.
So this links to script-template.js and if you're stuck you can actually just go to script.js and here you see the solution.
So don't worry you can also just work from the solution type it over, copy it over, read it but the main thing is to work with the code.
Because that's how you really learn.
So again, also link to the solutions here.
Also, these two projects are totally optional I designed them not too easy but maybe also not too hard but really tailored to what you've learned in this lesson.
Now, if you have your own projects in JavaScript you can work on today, that's awesome and you should definitely do that.
The thing is to really dedicate this day to practice as much JavaScript as you can.
Because as I always say, the learning is in the practice.
Finally, we encourage you to share what you've learned using #100daysofweb and include @talkpython and @PyBites in your tweets.
Then we see your work and we're just very excited to see what you come up with and see how you progress your hundred days.
So good luck, have fun and see you in the next lesson.

G'day Julian here again and welcome to Static Site Generators.
For the next four days we are going to focus on building our very own static website and I actually mean a site that's going to exist on the internet so you can keep it iterate over it, and use it by all means.
We are going to build this using Pelican which is a framework based around Python and then we're going to deploy it onto the internet for us to use and play with on the Netlify platform.
So click next and let's get started.

A quick overview of what we are going to be doing over the next four days on static site generators.
Firstly, we're going to be playing with Pelican which is a Python-based static site generator.
Going through the next few videos, we will explain what a static site generator is and I will go through all of the detail you need to be able to install it locally and then get your site up and running.
Now, what's different about these four days compared to the other chapters in the course is for the first two days I actually want you to watch all the videos.
So actually go through the entire chapter of content don't stop and play.
Days three and four are for playing.
And the reason is, is because when I created the content, it was probably a bit too staggered and haphazard to cut you off after one day and then make you wait another day to get cracking on some more content.
What made more sense, because of the nature of this chapter with static site generators was to just show you the start-to-finish.
So, create your website, make changes do things with it, add more content and then deploy it.
Do all of that upfront, learn how to do it and then days three and four is when you can actually do it yourself.
So feel free to follow along in the first two days but really, just try and understand.
Do the basics if you must.
Days three and four, go nuts.
So, add posts to your site, have fun with a theme go into Pelican themes, get all that stuff going.
Play with the HTML, create static pages really flesh out your site, make it your own.
So that's days three and four and I think that actually will work better for you because once you get sucked into this with Pelican and how easy this static site generator stuff is you're not going to want to stop, to then watch more videos.
So, have a go, have a crack and enjoy the next couple of days.

I figured a good place to start would be to cover what a static site is what is a static website and what is a static website generator?
We'll start off by covering what a static website is and forgive me for showing you the PyBytes website.
It is a shameless plug, but I'm proud of it so you're going to have to look at it while I talk.
A static website is PyBytes.
That's a perfect example of what a static website is.
A static website is essentially a series of web pages with fixed content.
It's static content.
It's content that does not change unless myself or Bob as the admins of the website go and make an intentional change.
So, taking a look at PyBytes if you would have browsed to PyBytes now I strongly recommend it, it's a great website you would have the same experience browsing this website that I do.
Clicking on the About page would bring up the exact same About page here.
Same with clicking on Articles.
You would see all of our articles here.
The entire website is static.
It stays the same no matter what.
You can't do anything to it.
I have to make a change for something to change on this website.
Now you might wonder what's different compared to other websites.
Well, think about your favorite news website lik, you know, news.com or news.com.au.
That's a dynamic website.
There is a database in the back end.
There's all sorts of funky stuff going on and every time you go back to that page changes are happening.
You're doing stuff to it.
You can log in.
You can do all sorts of crazy things on these other websites.
They're not static.
It's not a simple as one of these websites.
That's why static websites are actually fantastic for blogs because blogs don't potentially change other than the admin or the blogger creating an article and that's why we have static website for PyBytes.
Now, what is a static website generator?
A static website generator is something that takes the back end code, so to speak takes some markdown content takes some schematics, if I might and converts that to the HTML that renders in your browser.
I figured the best way to show you this is to show you physically.
This here is the GitHub repo that houses all of the back end schematics or source files that make up PyBytes.
If you look in our content folder you will see every article that we've written on this website.
There are code challenges, there are Twitter digests everything is here.
But notice it is the markdown format md.
This is our source file.
This allows us to do things like adding double hashes, like markdown format so you can get headers and manually putting things like bold and italics.
Now, you can't really see it here because GitHub is interpreting that so we can edit this quickly and you can see here is more of what it actually looks like in the markdown format.
So we've got the four tildes here to allow for a code block, and so on.
So this is a source file.
This is obviously not what it's going to show up like on the website.
What happens is we use a static site generator called Pelican which is what we are actually going to use in this chapter and we use Pelican to take this source file in these md files in our instance and we use it to convert these into HTML files.
So it goes through.
Pelican converts these.
It generates a website, which you can see here.
Now, this is our output folder.
It takes everything that was in that content folder converts it to HTML.
It literally generates our website.
And in here, taking a look let's choose one of our code challenges you can see everything is now HTML.
It has converted everything from that markdown format into a nice HTML page for us.
And as you can see, it's all quite static.
There's nothing special about it.
This is raw HTML.
Very similar to, you know what you would have used back in the '90s or when you were first starting out learning HTML.
And therein lies the beauty of static sites and static website generators.
These sites are very simple.
They're very simple.
They're lightweight.
They're very quick and they're easy to maintain.
So this is why we're teaching you that in this chapter.
Let's get cracking.

All right, let's go old school and kick off a repository in GitHub.
If you haven't used GitHub, please go on and sign on.
You probably would have by now.
I just have to say that.
But, as you can see here, this is my homepage on GitHub.
This is a dummy account I've just created for this to keep it simple.
Click on Create a Repository or whatever screen you're on, just and let's throw in a name.
So, I'm just going to name this pretty simply 100 Days Website.
Done.
Nothing crazy.
You come up with your repo and do the same.
I'm not bothering with the description.
I'm just going to make this Public, don't really care.
And, you know what, don't even need a README, so.
Really simple, nothing crazy.
We just want a repo we can push and pull code from.
So that's it.
We've got everything done.
Now, all we need to do is clone the repo.
So, I'm taking this here.
I'm going to do it by https and I'm just going to bring up my site here my folder here, I should say.
I've created a folder under 100 Days a web folder we've been working in called static sites.
I've got nothing in here.
I'm just simply going to git clone and that url.
So, let's let it clone.
Obviously, there's nothing in there.
We also got that warning saying You appeared to have clone an empty repository.
That is fine and that's it.
So for this video, all I want you to do is go on GitHub, create your repository and set it all up on the command line, clone it in and we'll start doing some installations in the next video.

Next up, we are in our folder.
We now have to install Pelican which is the static site generator we are using for this chapter.
To do that, the very first thing is, what?
Yes, that's right, we are going to create our virtual environment.
So, I'm creating one as usual called venv.
So, Python -m venv venv.
Once that is installed, we simply pip install pelican and pip install markdown because we are going to be using Markdown for all of our documentation here for all of our source files.
Let's do that now.
We should have the venv folder.
So, activate your virtual environment.
Remember, using Mac, that will be source venv/bin/activate but on Windows, we can just use the batch file.
With the venv there, let's do pip install pelican markdown.
All right, with that done we can then do a pip list, make sure we have it all there.
That all looks good.
Let's do a pip freeze into requirements.txt just to make sure we have all that backed up.
All right.
And that's all we have in our repo.
Now, what we are going to do is create a skeleton project.
This is pretty much installing Pelican.
This is pretty much setting up our static website for Pelican, for Pelican to use it take all the source files and convert it to HTML and we're using the Pelican framework to do that.
So, we'll do pelican-quickstart and this will actually take us through a bit of a guided website.
So, where do you want to create your new website?
Anyone who's familiar with the command line will know dot means present directory or current working directory so we'll continue leaving that as the default.
We're just going to create the website here in this folder.
What will be the title of the website?
Look, you know what?
Just use whatever you used for the repo.
I'm just going to call it 100 Days of Web site.
Who will be the author of the website?
Throw in whatever name you want, it doesn't matter.
What will be the default language?
Mine is English.
Do you want to specify a URL?
Now, I don't have a URL prefix for this website because I haven't bought a domain so I'm just going to hit No for now.
And just bear with me, we will deploy this later so we don't necessarily need that just now.
Do you want to enable article pagination?
Now, what that means is when you have a certain amount of articles on one page it will then create a second sort of index page so you don't have an infinite scrolling index page with every article you've ever made.
It will say, okay, here are the first here are the latest five or 10 articles hit number two to move on to previous articles written.
So, we're going to say yes, we do want that.
How many articles a page do you want?
So, the default is 10.
As I said, it will display the latest 10 and everything that was made prior to that will be on a different page.
So, let's just go by the default, to 10.
What is your time zone?
Enter in your time zone here.
Mine is Australia, Sydney.
Do you want to generate a tasks.py/Makefile to automate generation and publishing?
For this, just say yes.
Do you want to upload your website using FTP?
No.
SSH?
No.
Dropbox.
No.
S3.
No.
They're pretty thorough, aren't they?
Rackspace.
No.
GitHub Pages.
No.
The reason I'm selecting no for all those is we want to control everything.
Let's just get rid of all that config we don't want that there.
Now, super exciting.
We do an ls.
Look at that.
Look at that lovely stuff there for our Pelican to eat.
Now, what we have here is a very basic framework.
There is nothing here for us to generate.
Pelican, what it does is it actually takes everything that's in our content folder and generate it into a site.
There is nothing there.
So, we're going to limit this to this video get your environment set up pip install Pelican and Markdown and then go through the pelican-quickstart.
We'll start creating files in the next video.

Okay, it's time to create our very first post or page.
Again, looking at our folder here we have our virtual environment activated and we have the Skeleton bare bones framework.
Let's pop into that content folder.
Remember, content folder is where all of the source files or the schematics for your site live.
And once Pelican has its way with it with the content folder it then dumps all of that outputted HTML into the output folder that you also see there.
So, let's hop into content.
We have nothing in there.
Let's create our first post.md file.
We're going to go with an .md file, a Markdown file so we can use that format.
Alright.
Now, to get started we actually don't just start writing.
What Pelican needs to be able to generate this page is it needs a series of little markers, I'll call them at the top of our file, alright and it takes these markers and that's how it generates the HTML that's how it knows what it needs to do.
You'll see what I mean in just a second when you see what these markers denote.
So, the first one is title.
It needs a title.
I'm going to just go really, really generic here.
Let's get this party started.
Right, so we've got our title little flag here.
Next up, we need a date.
Alright, this is a date that's going to show up on our articles and help place this article on our page on our website.
And the format, let's go with 2019, month and day.
Let's go with 31st of March and the time let's just call it 22:00 not that it's 10:00 pm or anything.
Now we need a category because all of that articles can be searched by category.
They are stored based on the category on our site.
And this category, I'm throwing in Python.
Super creative there.
Now, we have tags.
These are the tags that you know, I suppose would have to do with your content.
What is this article going to be about?
Think of these like your hashtags and your tweets and whatever.
We're going to say a tag for this one is 100 days of web.
It's separated by comma.
We can then say it's also about Python and we're going to say it's about awesomeness because this is totally awesome.
Now, slug, slug.
If you haven't heard the term slug that is just a really gross way of saying URL.
Because no one likes slugs.
Pretty sure, no one likes slugs.
And the URL of this post is going to come up as your domain.
So if we're going to use the PyBites example it'd be PyBites forward slash and then this whatever you type here.
I'm just going to go, again, really generic and call this first post but you could call this whatever you want.
This is just going to be this page's URL.
The slug, whoa, for this page.
Authors.
As it's just me, we're going to say the author is Julian.
And finally, we're going to have a summary.
So I'm going to write this is a summary of the first post written for our Pelican block.
We're using this for the 100 days of web course.
Done.
Alright.
One other thing I will throw in here but I'm going to delete it in a second is the term draft.
Alright, if you have draft here, with true this essentially tells Pelican this is a draft post and it should not show up on the main website under our default slug.
It will actually show up on the website as using PyBites as an example, PyBites/draft/slug.
Alright, so when you're drafting a post you can put that there and then when you're done, delete it and save it and then it will show up on the normal website.
Right, let's add some more content in here.
Now, we can actually start writing.
So, let's go with a big heading for a big day and we have double hashes there.
That's Markdown format.
That's a certain size of a header.
This is the first paragraph of our article.
If I can spell.
Hoo-zah!
And we want this, the reason I'm putting this all in is because when we render the website shortly we want some content there, okay?
And I'm teaching you a bit of Markdown here so we can use two stars symbols to indicate a bold.
So if we use two stars around a word or a term or anything that indicates it's going to be bold formatted block of text.
Now, let's change the header size a slightly smaller header and we can also use, here's some more Markdown for you a single star around a block of text to indicate an, and here's a special word for you an italicized word.
Get that star in with a shift.
Alright.
And that's it.
Let's go with the end, cool story bro.
And that is our first webpage.
So right-click, we can cap that out just to see how it looks.
We have our first post we have the slug, we have all that stuff there big heading, so on and so forth, that's it.
Finish completing your first post.
Go through and make it as big and lengthy as you want and in the next video we will now actually use Pelican and launch it into the browser.

So, in our content folder we should only have our firstpost.md We head back one folder make sure we're in the parent folder Venturion environments activated so we Pelican that we could use.
And now, all we have to do is tell Pelican that we want to generate our website.
The way we do that, is we use Pelican and we point it at the folder we we want it to actually generate.
So Pelican content, and you'll see it simply takes our file it processes it and it dumps it in the Apple folder.
So let's head to Apple list that out, and there we go.
Straight away, we have firstpost.html Now, these here, these other files we have in here, this is all stuff that's generated by Pelican based on what we had in that first post.
So, notice there's now an Office file with nothing in it at all.
We have a categories file that is simply going to contain the categories that we used in our first post and that was simply Python.
If we actually head into the Tag folder you can see the tags that we had.
Hundred Days of Web, Awesomeness, and Python.
As your blog or site grows and you use more and more tags and you use them more multiple times you will see when you start looking up by tags, all the articles that use that tag will show up.
The same goes, the same goes for category.
And, same thing, we have an index page that will run the website and we have archives.
But most importantly, we have firstpost.html.
We can go through that really quickly.
I won't actually show too much because there's a lot of .html there.
You can look through your own, I won't waste your time.
Now, now that has been created now that we have that juicy .html file let's actually run the site.
We're going to use Python's in-built web server Python http.server We're on local host, we're on Port 8000.
Let's bring up the site.
There is our beautiful website, 100 Days website.
We have our category.
Now remember, there's, that's the difference between categories and tags.
We could use a hundred, we could use a thousand tags for all that post.
We don't want a thousand hitters showing up.
We just want our categories showing up.
And, straight away, we see our first post.
Let's get this party started.
There is our main hitting, smaller hitter.
There's that bold format from using two stars.
And, there's the italic word for using single star around it.
We have the details here, we have the publish date we have by who, they're our tags.
This is a default theme that ships with Pelican.
You could go through the Pelican website.
There are lots of different themes you could have for Pelican blogs.
I'll let you dig through that.
They're pretty simple to install.
But here's a nice, simple theme and that is our site.
How easy is that?
This is why static sites are very simple to use and just a lot of fun to use.
We have the power to make this right.
We don't have to rely on anyone else.
This is just there and we did it through purely typing markdown and running Pelican.
So, that's that.
Let's move on.

Alrighty, now that you have your code all sorted go ahead and push that to your github repo of choice the one we set up before.
I've pushed it to my 100 days web-site repo and you can see that here.
Next up, I'd like you to head to netlify.com so www.netlify.com.
This website is actually a platform that allows you to deploy your static sites.
So right now, we've been playing with our static site locally, right, but we want it out on the internet.
So while the files are hosted on github where can we get this hosted so that it actually appears on the internet with its our URL?
Enter Netlify.
Really simple.
You'll see that in just a minute.
What I'd like you to do is sign up.
Go through the sign-up process.
I'm simply clicking on login and logging in with my github account.
Once you are logged in you will be asked to essentially connect Netlify with your github account.
And what Netlify will do, is it will talk to your github repo, so that's the repo that our static site is stored in and it will take that, it will process Pelican our static site generator and it will then populate our website onto the internet.
Okay.
First things first, let's create a new site.
So it wants to connect to which git provider so in our case we're using github, so we'll click on that.
It will then ask you a series of authorization questions: do you want to authorize Netlify to talk to your github account?
Say yes.
Go through that.
Scroll down here, it wants us to choose a repository.
Now, my one only had one repository so I kind of only had one choice here.
But you go through and choose whatever repository had your 100 days website in it.
So you go ahead and select that.
Click on that and once you have the repo selected you will then have some build settings here.
Now, I am going to deploy to our branch of master but that's the only branch I have, so I had no choice.
Basic build settings.
Now, if you think back to when we launched our website when we used Pelican to generate our website, I should say we ran the Pelican content command.
Now, we are not going to run that every time on a live setup, on a production setup.
We can run it on our local setup but we don't want to have to run that on the web.
This site, Netlify, this tool will actually take care of that for us, so we want to tell it what that build command is.
And the build command is Pelican content.
Now, content is the folder, remember that.
So this is all relative to our repo.
Now, if our repo started with a folder here in the parent folder, and then content was one hierarchical directory below we would have to specify that here.
So you might say, folder then content, okay?
But in our instance, content is actually in the parent directory so we can just write Pelican content.
Now the published directory is where we are going to actually store the files once they're generated.
So again, Pelican generates the static files, the md files converts them to HTML and puts them in our output folder.
So we need to specify that here output.
Just click on Show Advanced; there's nothing here for us.
We can click on deploy site.
And that will bring you to a page that looks something similar like this.
You will first see a line here mine actually went really quickly but you will see a line here that says this site is deploying and if everything was done correctly, as we have you should actually see this go green and you will get this URL here.
That's your actual website.
And you'll see that the site was successfully published.
This is literally how quickly this things works and how easy it was to deploy this onto the internet.
So I've right-clicked, opened our URL into a new tab and we have here our Pelican website.
Check that out!
Everything we did locally has just suddenly been deployed on the internet, you can share the URL with your friends and there's your website, nice and live.
So, now you can see, as we make changes to our github repo here, it will automatically be picked up and deployed by Netlify and changes pushed to this website here.
And we'll do that in the next video but it's pretty awesome, so stay tuned.

We have our brilliant web page How good is that?
Next, we probably want to do something special with the website.
So far, we pretty much just have text, right?
There's nothing else on this page.
How about we add an image?
To do that, we need to create a new folder.
Let's take a look in our website right now.
We have our content folder.
Now, you would sort of assume based on the fact that all of our content goes in that content folder that we would simply just copy an image such as this pb-logo.png file.
Now, that's not actually how Pelican works.
Pelican requires you to have an images folder inside the content folder for any images you want to use.
So let's create one.
Make the images, check that it's there.
Yep!
And let's move our PowerBytes logo into that images folder.
There we go!
Now, if we want to link to that obviously if you think about folder hierarchy we are going to need to link it from the images folder /pb-logo.png.
And we can do that from directly within our Markdown file.
So let's throw this image into our Markdown file now.
We'll head right down to the bottom where are, and let's throw it in here.
Alright.
Give ourselves a little bit of a header we use the same size there.
Let's throw an image in here.
Now, the syntax in Markdown that we need to use is we start with an exclamation mark.
That indicates some sort of image, or static file.
So we can go PowerBytes logo, this is our alternate text.
So again, web stuff, really good practice to have alt text.
Okay?
Now we link to the actual file.
We have to use this flag here, Static.
This tells Pelican that we're about to link to static content.
Therefore, it knows to look within the contents folder for that static content.
And we're going images, we're telling it to point at images we then go to logo.png.
And that's it.
That's seriously it.
There's nothing else to it.
We can write quit let's just cap the file, make sure it's there.
There we go.
And that is it.
Now, if you'll remember, what do we do to generate our site?
Because obviously we have put that into our content folder but it has yet to have been generated into our output folder, has it?
So, if we were to launch the site now we wouldn't see the picture.
In fact, let's do that just so I can demonstrate really quick.
Python -m httpserver Alright, let's bring up localhost.
There is our site, and we actually don't have anything there.
Right?
So, let's go back here and then control + c out of that.
And when that returns, it does take some time, sometimes depending on your OS.
It will take a little bit of time to cancel out.
Alright, with this finally, control + c'd out let's see where we are, we are in our output folder.
Let's do a pelican ./content from the parent directory.
And when that's completed we'll just move the mouse out of the way.
We have a web page!
So let's head to output.
Let's do Python -m httpserver We're back to our page.
And there is our wonderful PowerBytes logo hopefully you recognize that special and that's static content.
Now, you can play around with that.
You can get any image you want and you can throw it in there you can make your own image repository do whatever you wish but that's how you link to static content.

Now looking back at this site that we've just created with our static content remember I said that with Netlify if you push content to your GitHub repo it will automatically sync that over to your live website.
While refreshing our live website here we don't have the image.
But on our local host, we do.
And the reason is, we haven't pushed the code, obviously.
So we need to push our code to our GitHub repo.
So let's get that done.
We can then go back here we can simply do a git add .
and git commit -m pushing the images directory and git push origin master that will push this logo file plus the images directory and all the content we generated in our output folder up to our GitHub repo.
And we can then see pretty much instantly we'll be able to see Netlify do an automatic build.
So we go back to our deploys.
And straightaway look here, today at 9:32pm.
It's still 9:32, building it's automatically building and pushing doing our latest commit.
So you can see the name of the commit there pushing the images directory once it has finished building we'll be able to see that reflected on the live website.
So this is one of the key things about Netlify that makes it really awesome, right?
Once you have committed that code it'll automatically update your website.
Now that could be a Catch-22 situation for you if you've made a mistake but you can always roll back, right?
That's the beauty of GitHub in the back end.
So let's wait for that to finish building.
Once it's done, we'll be able to see that in the website.
And with that published finally showed up there published probably took about 40 seconds to finish building.
We can then go back to our website reload the page, and there is our image.
So see how easy that is.
If you had your own blog you could literally write it locally on your computer test it, push the code, and bang, it's live.
You don't actually have to do a thing.
This is the beauty of static site generators and Netlify.

By now you're probably getting antsy to continue working on your site so let's just hammer out one last thing and that is creating static pages.
So, you had static content which was like your images now we have a static page.
What I mean by that is this one page that will stay the same on your site every time people view it.
And I don't mean one of your posts.
Because that post will sort of move down the page and whatnot.
What I mean by that, is if we go to our live site here we have our categories at the top.
But what about something like, your About page?
Your terms and conditions?
Or, something like that, you know one of those pages that you never edit never change, it's not a post, but it's a dedicated page.
You can do that in Pelican and it's quite easy.
Similar to the way we created our images folder hidden to content, we actually create a pages folder.
So, we make the pages pop into there.
Nothing in there.
And now we create our file.
So, I'm going to create an md file called about.
And this is just going to be the stock standard about page.
All it's going to say, is something about me at the bare minimum.
The requirement for Pelican, is that we have a title.
Remember all those headers we had before?
We don't need too much, let's just call it about and that's it.
We'll start with, About page.
And then we will say, this is a page about me.
I made this site to demonstrate static site.
Generators, that's it.
Let's get rid of these, we don't need them.
And let, ooh, I merged this site.
There we go, nice and good, looks good and let's right-click that page.
Let's follow the whole process here through the proper production.
Okay, we'll go back one folder, back again Pelican content to generate the page now that we've created it.
Okay, head into our output folder.
Always a good idea to test, of course Python -m httpserver.
That's running.
Let's bring that up, refresh the page.
And we now have an about page.
So let's click on that.
There's our master header.
This is a page about me.
I made this site to demonstrate static site generators.
Looks good.
Now, let's pop back into here.
Now that we're out of there, let's push the content and get commit about page creation.
Get push urgent master.
Pushes it to github for us.
And then we can quickly flick to Netlify and see this become a reality.
Yup, that's done.
Pop back up to Netlify.
Go to deploys, straight away, look how quick that was.
It was like, it was a matter of seconds, pretty much.
Now, we wait for this to go to published and that's now published to roughly about a minute.
And we can head over to our website, reload the page and there we go.
There's our About page.
The whole turnaround of making that was roughly three minutes away from when we created the page.
When started this video and then we had it completed.
How good is that?
All right, one more thing I want to show you really quickly, we'll move on to the next video.

Now last but not least, the last thing I want to show you is our URL.
Look at that, romantic bends, hopefully you've got something slightly better than that.
It's actually not fantastic, is it?
You probably don't want to be sharing that with people saying hey, this is my blog, or this is my website.
So what I'd encourage you to do just for simplicity's sake, and do not think we are affiliated with Netlify in any way 'cause we're not, it's just for simplicity's sake.
On your overview tab for your site, for your page you can see that our site is deployed.
Okay?
But, we haven't set up a custom domain.
If you click on that you can actually bring your own domain.
So you can bring a domain name that you already own or buy a new one.
So when you buy the domain with them they automatically configure your DNS settings and provision a wildcard certificate for your domain.
So they do a lot of the work for you.
If you really want to make this a real, proper website with a proper URL, follow these steps, and that's it.
I added this video in purely because I'm sure a few of you will probably wonder how you get your current domain or how you find a domain.
If you've probably created a nice little website for yourself who knows how much a domain might cost?
It might cost you a couple of bucks right, and you might want to show this off.
So this is where you do it.
Go through those steps and follow the prompts and you'll be able to set up your own domain and have a nice little website running.
That's it.

And that was our chapter on static site generators specifically using Pelican and Netlify.
Let's have a quick look through what we learned.
Again this was a really fun chapter because it was really easy right?
So to start with we had our Pelican work flow.
Let's just run through that really quick nothing crazy.
After installing Pelican itself we ran the Pelican quick start script and this script pretty much creates a bare bones skeleton project and that project looked like what you see below.
The makefile, the pycase the content output and so on.
And what we did was we learned that our content folder was where all of out source files went.
So all of our markdown formatted files, static pages and everything going to that content directory.
And then after we create those source files we run our Pelican content command That pretty much processes those source files and generates the site and that site is then generated in the output folder and to then see our site locally to demo it we cd'd into the output directory we ran the inbuilt Python web server and we tested our site on local host.
Next we had static content.
Now our static content specifically images is what we tested with the pie byte server.
They go inside the content folder in the images directory.
Simple as that.
Then we used static pages which was to create our back page and terms and conditions and whatever else They went in the content pages directory So they didn't just go in the content directory.
They had their own subdirectories inside that.
And finally in our markdown file to reference this static content we have to use the word static inside those braces there and then out the path to our file which was our logo.
Next we wanted to deploy our website onto Netlify and we did that by pushing all of our content on Github and then having Netlify monitor our Github repo and deploy that code live onto the internet and I was lucky enough to have a really dodgy URL.
Romantic Bends don't know what that's about but let's just roll with it.
And that just made the site live and they monitor our Github repo and by monitoring it what happens is every single time we created a change and pushed it up to the Github repo Netlify took that within seconds and updated the website and that was the beauty of Netlify.
And that was it we ran through Pelican.
We used Netlify.
We used Github.
Everything worked thogether and we have our own website.
So hopefully you had fun with this chapter.
It is one of the most satisfying things to create your own website have it live on the internet.
Especially have it in such a nice flowing format where you work it locally you push the code it automatically becomes the website really cool stuff.
Hope you enjoyed it.
Keep calm and code in Python.

One of the absolute pillars of web applications are their data access and database systems.
So we're going to talk about something called SQLAlchemy and in many many relational based web applications this is your programming layer to talk to your database.
SQLAlchemy allows you to simply change the connection string and it will adapt itself to entirely different databases.
I want to use a local file in SQLite for development maybe MySQL for testing and Postgres for production.
Not really sure why you would mix those last two but if you wanted to you could with SQLAlchemy and not change your code at all.
just simply change the connection string.
So SQLAlchemy is one of the most well known, most popular and most powerful data access layers in Python.
SQLAlchemy of course is open source you'll find it over at sqlalchemy.org.
it was created by Mike Bayer.
and his site is really good, it has tutorials and walkthroughs for the various ways in which you can work with SQLAlchemy.
One for the Object Relational Mapper one for more direct data access, things like that.
So why might you want to use SQLAlchemy?
Well, there's a bunch of reasons.
First of all it does provide an ORM or Object Relational Mapper, but it's not required.
Sometimes you want to program in classes and model your data that way but other times you want to just do more set based operations in direct SQL.
So SQLAlchemy lets you work in lower level programming data language that is not truly Raw SQL so it can still adapt to the various different types of databases.
It's mature and it's very fast it's been around for over 10 years some of the really hot spots are written in C so it's not some brand new thing.
It's been truly tested and is highly tuned.
It's DBA approved, who wouldn't want that?
What they mean is by default SQLAlchemy will generate SQL statements based on the way you interact with the classes but you can actually swap out those with hand optimized statements.
So if the DBA says whoa there's no way we're going to run this all the time you can actually change how some of the SQL is generated and run.
Well the ORM is not required I recommend it for about 80% 90% of the cases it makes programming much simpler more straightforward and it much better matches the way you think about data in your Python application rather than how it's normalized in the database.
So it has a really really nice ORM with lots of features and this is what we're going to be focusing on in the next course.
It also uses the unit of work design pattern.
So that concept is, I create a unit of work I make insert, updates, deletes, etc.
All those within a transaction basically then at the end I can either commit or not commit all of those changes at once.
This is in opposition to the other style which is called active record where you work with every individual piece of data separately and it doesn't commit all at once.
There's a lot of different databases supported so SQLite, Postgres, MySQL, Microsoft SQL Server, etc.
There's lots of different database support.
And finally one of the problems that we can hit with ORMs is through relationships.
Maybe I have a package, and the package has releases So I do one query to a list of packages and I also want to know about the releases so every one of those package when I touch their releases relationship, it'll actually go back to the database and do another query.
So if I get 20 packages back I might do 21 overall database operations separately.
That's super bad for performance.
So you can do eagerr loading and have SQLAlchemy do just one single operation in the database that is effectively a join or something like that that brings all that data back so if you know that you're going to work with the relationships ahead of time you can tell SQLAlchemy I'm going to be going back to get these so also load that relationship.
And these are just some of the reasons you want to use SQLAlchemy.

Let's talk about the demo app that we're going to build to explore SQLAlchemy.
And we'll even use this a little bit for your turn when you get to write some code.
So, you're probably familiar with these scooter rental things that are popping up everywhere.
Maybe you're seeing Lime scooters, or the Bird scooters.
These are both really popular here in my town I could open an app and I can rent them and scoot around town.
Probably no helmet in traffic, things like that.
Probably not great, but there it is.
I could rent these things and they're really, really popular and getting a lot of VC funding.
We're going to create another scooter share start up.
Now, when you create a start up obviously you have to have a reason to exist.
Like you have to have your main differentiating factor.
We have that.
So we're the latest scooter start up we're going to call it Hover Share.
And we've identified a key weakness in the existing scooter rental and sharing market.
There's no seat.
You can't go very far on those things without a seat that's not comfortable.
So we're going to get some of these Hover 1 scooter, electric bike things and we're going to outfit them with IoT devices and GPS.
We're going to make them the backbone of our new scooter sharing start up.
Good news is we've already closed our angel round of investing and secured $1.7 million to buy this fleet of Hover 1 e-bike scooter things.
We even have all the IoT specs solved.
We've got GPS thing working, we've got the locking we've got the communication to unlock the scooter.
Everything's working, but we don't have a database to really manage the user interaction with these scooters.
So that's our job.
During this chapter we're going to build the database that is going to be the backend the very simple backend albeit of our hover share start up.

When you choose a framework whether that's for a database or a web framework it's good to know that you're in good company.
That other companies and products have already tested this and looked around and decided yep SQLAlchemy is a great choice.
So let's look at some of the popular deployments.
Dropbox is a user SQLAlchemy.
And Dropbox is one of the most significant Python shops out there.
Guido van Rossum and some of the other core developers work there and almost everything they do is in Python.
So the fact that they use SQLAlchemy that's a very high vote of confidence.
Uber.
Uber uses SQLAlchemy.
Reddit.
Reddit's interesting in that they don't use the ORM.
In fact, they use only the core.
At least, awhile ago they were using only the core aspect of SQLAlchemy.
That's pretty cool.
Firefox.
Mozilla, more properly is using SQLAlchemy.
OpenStack makes heavy use of SQLAlchemy.
FreshBooks, the accounting software based on, you guessed it, SQLAlchemy.
We've got Hulu, Yelp, TriMet.
That's the public transit authority for all of Portland, Oregon the trains, the buses, and things like that.
So they use it as well.
So here are just a couple of the companies and products that use SQLAlchemy.
There's some really high pressure some of these are under.
You know if it's working for them it's going to work well for you, especially Reddit.
Reddit gets a crazy amount of traffic.
So pretty interesting that they're all using it and we'll see why in a little bit.

Before we actually start writing code for SQLAlchemy let's get a quick 50 thousand foot view by looking at the overall architecture.
So when we think of SQLAlchemy there's really three layers.
First of all, it's built upon Python's DB API.
So this is a standard API.
Actually, it's DB API 2 these days but we don't have the version here.
This is defined by PEP 249, and it defines a way that Python can talk to different types of databases using the same API.
So, SQLAlchemy doesn't try to reinvent that they just build upon this.
But there's two layers to SQLAlchemy.
There's a SQLAlchemy Core which defines schemas and types a SQL expression language, that is a generic query language that can be transformed into a dialect that the different databases speak.
There's an engine which manages things like the connection, and connection pooling and actually which dialect to use.
You may not be aware, but the SQL query language that you use to talk to Microsoft SQL Server is not the same that you use to talk to Oracle it's not the same you use to talk to Postgres.
They all have slight little variations that make them different, and that can make it hard to change between database engines.
But, SQLAlchemy does that adaptation for us using it's core layer.
So if you want to do SQL-like programming and work mainly in set operations well, here you go, you can just use the core and that's a little bit faster and a little bit closer to the metal.
You'll find most people though when they're working with SQLAlchemy it will be using what's called an Object Relational Mapper.
Object being classes, relational, database and going between them.
So what you do, is you define classes and you define fields and properties on them and those are mapped, transformed into the database using SQLAlchemy and its mapper here.
So what we're going to do, is we're going to define a bunch of classes that model our database in SQLAlchemy, and then SQLAlchemy will actually create the database, the database schema everything, and we're just going to talk to SQLAlchemy.
It'll be a thing of beauty.

Let's talk about how we might model our data even what things we're storing about our scooter start-up.
Here's my proposed model for this particular adventure we're on here.
We're going to have four main items that we're going to store in our database.
We're going to have scooters and we're going to have users.
Those are the two primary things, I guess.
And then we're going to have rentals which is really the user getting that scooter for a period of time and then returning it.
And then we have locations where the scooters can be parked.
And the users can either pick them up or drop them off.
And that's it.
You can see the relationships here.
The user creates a rental the rental links over to the scooter.
The scooter may be parked at a location.
So we're going to have foreign key relationships in our database to link these things.
That's the relational part of the relational database.
And then the rentals could also be picked up at a particular location.
Pretty simple data model.
I tried to keep it not overly complex.
Obviously in the real world we'd probably have 20 or 30 tables, you know, with ecommerce history and auditing and all kinds of stuff.
For what we're doing, I think this is going to be complex enough to give you a real world feel of what we're building but not so complicated that you get lost in all the details.

Here we are in our GitHub repository for this chapter.
Let's get our app set up.
We're going to start from just a little bit of code so we stay focused on the database sides of things instead of all the user interaction stuff that I'm going to write.
Let's go over here to the starter.
It's empty right now.
I'm going to set up a little bit of this for you and then make a snapshot so if you want to pick up from there and keep going, that'd be great.
So we're going to go over to that folder and as always create a virtual environment for installing third-party packages let's stay focused on just the ones we need.
Should be good.
Now we're going to need a couple of utility libraries to get started, so I'm just going to put those in here.
So over here we have this switch statement thing that I'm going to use and this thing for parsing numbers a little more nicely and the ability to locate our database folder, we're going to use SQLite which means we're just going to have a file living here, we're not using what you might call a proper database server.
What we're doing here will exactly work on things like Postgres and MySQL and so on.
It just so happens it's easier for you to pick up this project and use SQLite 'cause I don't have to give you lots of instructions on how to set up the database how to set it up so it's at the right location so it has the right permissions.
You can just run it.
So we're going to use SQLite 'cause it's simple but what you learn here will apply to all the databases.
And finally, because we're using SQLite we added that as a requirement, so let's go ahead and install that.
Okay, looks like it's all good for the foundations and then the last thing I want to do is add the actual program that we're going to write and I'll call it program just so it's clear what we're going to run and go ahead and run it to create a run configuration up here.
Obviously it does nothing.
But, I do want to get the structure in place.
Let's talk about that really quick.
So, over here, we're going to have a main method it's going to set up the database and then it's going to go through this loop over and over asking for a command and then using my little switch statement that I created.
Get this in GitHub if you care.
Or you obviously have it here as well.
It'll say if they typed in r, run the method.
Rent a scooter.
If they typed in a, run the method.
Find available scooters.
If they hit x or nothing, exit the app, things like that.
And it's just going to go along and run these various methods, none of which have any implementation other than just a little bit of printout and even a cool little misspelling there.
So, we're going to run this.
And I'll just show you the interaction.
There's zero database stuff going on right?
This is just a little user interaction here so we could say I'd like to locate my scooters.
It says, here's your scooters.
I'd like to see my personal history.
It says here's your rental history.
I could say boo it says I don't know what to do with Boo I could hit X and we're done.
So this is where we're starting from.
We have this structure of the sort of interactive command line interface.
And then we have these methods that are going to do the database thing.
Now, one thing you might notice is this is not a web app.
We're talking about databases because databases are the foundation of web applications.
However, I wanted to start just from the pure data access side of things.
So we're going to do it in a command line interface that has nothing to do with HTML and CSS and views and forms and all of that.
We're just going to do the simple command line interface here and then part of your project may be to adapt it to the web, but once you learn how to use SQLAlchemy, it doesn't matter if it's a web app or not.
Right, now you just write the same code.
So this lets us focus on just the data access side of things.

We have our app in place now what we want to do is create some classes that map into our database.
In Python we work in classes and objects and in the database we work in relational normalized data in the tables.
So, in order to do that I'm going to create a couple files in a folder here let's create a folder called data.
And, in there I'm going to put another folder called models.
So these are going to be all the SQLAchemy models that map to the database.
Create sub-folder because there'll be other stuff we'll end up with in this data section.
What's the primary thing we're going to work with?
How about scooters?
So let's start by defining this class and you're going to see there's one other thing we have to do to sort of set the foundation in terms of classes.
So let's say import sqlalchemy as sa this is a pretty common practice.
You don't have to do it, but I'll do it just to keep things a little bit shorter.
We'll create a class called Scooter singular 'cause this represents a single scooter it's going to be an object we create.
One scooter that can go in the database.
Now there's going to be a base class we'll talk about that in a moment.
Now, in order to define this class, we just put what would be columns in the database as fields here, at the class level.
So, we're going to have an id, and this is going to be a SQLAlchemy column, and then you need to say the type.
It's *args, **kwargs.
To me that's just like "well too bad we're not going to help you learn how to use this class." I really don't like this design pattern I think it's really a cop-out.
There's certainly other techniques that are more helpful you could put in here.
Anyway, let's not get me on a rant you have to kind of know what goes here but honestly it's pretty simple.
So we're going to have the type which is going to be an integer.
Every table needs a primary key, and when it's an integer if you just want the database to figure out what the next number should be?
That's pretty easy, so here we can say primary_key=True and we can say autoincrement=True.
Great, so that's our id.
What else do we want to know about the scooter?
Almost every database record that I ever work with I often want to know "well, when was that actually inserted when was it saved?" So let's just go ahead and add that really quick.
Create a date, and it's going to be SQLAlchemy column of SQLAlchemy DateTime, like that.
There's going to be more stuff we add to these columns but let's do the basic pass first.
Our scooter's are going to have VIN Numbers we want to be able to look them up and a VIN number a Vehicle Identification Number, seems pretty decent.
This is going to be a string, so it's going to be SA column, SA string, like this.
We have a model, this is like a descriptor, so it's the same thing.
We want to know what the battery level of our scooter is.
Our scooter is going to be an electric scooter it's going to cruise around, we need to know "is there enough charge so that we can rent it to this person?
Or is it going to run out in five minutes and then they're going to be dissapointed?" So let's say "integer as a percent" %20, %23, things like that.
so we're going to add some relationships here in a little bit as well, but we don't have the other pieces built.
So, we'll sort of put a placeholder for that.
Now finally, if I were to go and store the scooter in the database, SQLAlchemy will create the table with all of these columns here.
With the right types and everything.
What is it going to call that table?
Well, exactly that, Capital S "Scooter".
Now, it's great that the class represents one scooter but the table holds many scooters.
So let's go into this, and the capitalization isn't great either.
So in SQLAlchemy say "table name" __tablename__ = 'scooters' what you really want it to be called let's say "scooters", lower-case.
Pycharm thinks that's misspelled, tell it it's not.
Now, this is almost ready to go into the database, it's almost ready.
There's one problem though, we have to put a certain base class here.
So, all the things we store in the database derive from this common base class and that's actually how SQLAlchemy figures out "well what tables do I need to create?" Well, all the classes that derive from my base class that's the tables I'm going to create.
This is not a static type because you might want to put some into one database some other classes in another database, things like this.
So, we have to create this class to use it.
So here's another file, call it sqlalchemybase.
Now, it's going to be pretty simple, we're just going to put one thing in here, but I put it in a separate file so we don't end up with circular dependencies or other weirdness.
So, we're going to import sqlalchemy.ext.declarative, okay?
And then we're going to define a type at runtime SqlAlchemyBase, the name doesn't matter just pick something you like for a class name.
We're going to say sqlalchemy.ext.declarative.declarative_base just like this, if we get out of the way.
So we create this type here, and this is just as if we had typed class SqlAlchemyBase, right?
But it's declared at runtime here.
So now we can use this as our base class here of course we have to import it above.
Now this scooter is ready, this scooter can now be modeled in the database, as long as the database matches that schema.
We could do queries against it, we could do inserts updates, deletes, all those kinds of things.
So this is how we model data in SQLAlchemy.

I told you this is the simple version of the scooter.
What if I would like to say, run a query that says find all of the scooters that have a low battery level so we can go collect them and charge them up or something.
Well, we would do a query based on this, right?
How fast is that going to be?
If we have lots of scooters, it's going to be madly slow.
Why?
Because it has no index.
Indexes are super, super important for high-performance queries.
Literally adding an index if you have a lot of data can make the query run a thousand times faster.
And it's incredibly easy to do, so let's do that here.
That was good, we're done now.
Now, queries about battery level will be way, way faster.
We also might want to ask questions of well, how many model three scooters edition three scooters do we have?
So if we're going to ask that question put an index there and we very likely want to find by VIN number.
So these are all good here.
And we could even say this has to be unique because we can't have different scooters with the same VIN number.
We want to add in these various constraints and indexes and so on.
Kind of like we did for our primary key up here.
On the way primary keys automatically have indexes.
We're not quite ready to do relationships but we'll do that in a second.
What I do want to do, is add the rest of the models and just quickly talk through them.
So let me just drop those in here.
So here we have the location.
And for our location, same thing we have an integer.
We have a created date.
Oh, one thing, let's go back here really quick.
When we insert this it would be nice if it automatically just was the time when we inserted it.
Databases have this concept of a default value if you don't specify one, use a default value.
Zero false true, or like daytime.now.
And SQLAlchemy also has this concept.
So we come over here and say the default is going to be some function that will be called the datetime function.
So import that, datetime.datetime.now it's super, super easy to make a mistake here so double-check yourself.
If I hit Enter, Python says, awesome.
We just called that function and we're assigning the default to be well whenever this line of code was run which is when the app started.
That is not what we want.
We don't want to insert the scooter time as it was created when the app started.
We would like to pass a function now.
Not the result of calling now, but the function now which will be called any time a new record is inserted.
So this, we're going to pass now, not the value of now.
Right, so we have this default value and let's just look through the others.
Our location has a city, street, state.
And a maximum storage.
Talk about relationships later.
Our rental, pretty similar, has a created date but it has a start and end time for when we actually want to rent it.
Has the user that rented it and the scooter that rented it.
And finally for users we just have their name and email and passwords and things like that.
Again we have some relationships.
We'll talk about them later.
In fact, let me comment out, though all the relationships before we get into that.
Great, so besides relationships our four main items that we're going to model are in place.
We have our scooter.
We have our users.
Users can create rentals.
Rentals apply to scooters.
Scooters are parked in locations.
Perfect, and then we have our SQLAlchemyBase here that every one of these has to derive from.
So that rounds out the various data models that we're going to use.

Well we've modeled our data, can we insert it?
Can we do queries?
Actually no, no we can't, not yet because we need to actually establish a connection to the database, as well as create the tables and the database schema that was going to support this particular model.
So let's go over here and create another file here called session_factory.
Why did I name it that?
Well SQLAlchemy follows this concept called a Unit of Work, which means I start the Unit of Work I do a bunch of database things, inserts, updates, deletes and then I commit that session.
I commit that Unit of Work back and the object that actually manages that is called a session.
That's actually the class name the type name in SQLAlchemy and so we have to create this thing that establishes the connection and then creates these sessions that lets us do transactional like operations on the database.
So session_factory, this is going to be the thing that creates the sessions that lets us do queries, and so on.
Now there's actually going to be three parts there's going to be three things going on here.
One, I'll call global_init.
This is going to take a database name and it's going to use that to create the connection and the table schema, and all that.
And we're going to have one that's going to say create_tables.
We may not want to call that every time we call this so we'll have those separated.
And then the last one is going to be create_session and let's put a little type annotation on here.
This is going to be a sqlalchelmy.orm.
Now we got to go over here and import when I need them both so I'll do it like this.
And in the ORM, we have a Session object that's the thing that we're going to be creating.
This is the thing that represents the unit of work.
Now let's go up here.
We're going to have a thing called an engine and we're going to have thing called a factory.
Now I'm putting them in double underscore because I don't want to expose them directly.
They need to call either this function or this function to sort of interact with them.
So this global_init, it's job is to create a connection use that connection to create an engine use that engine to create the factory.
Let's go.
So our connection string for SQLite it's going to be sqlite:/// kind of like the web.
And that tells SQLAlchemy how to talk to it cause talking to the different databases their query syntax is very similar but not identical.
Okay, so we're going to do that and then we're going to come over here and actually use this thing from the db, the db folder.
Okay, so we'll say db folder, and it will give us the full path to this directory appear plus the database name.
So if we just pass the base name like hovershare.SQLite or something it will figure out the full path that we need.
So the actual connection string is SQLite/// the full path name that we're going to use.
And then the next thing we want to do is just create this engine, say sequelalchemy.createengine point just pass at the connection string.
I'll put one more thing in here.
You don't have to do this, but it can be helpful say echo=false, and that's what it is by default but if I flip this to true you'll see the SQL statements the actual database commands printed out to the console as you interact with it.
So this will help you understand what SQLAlchemy is doing.
But I'll put that as false cause we don't need to see it right now.
Final thing, we're going to initialize the factory.
The factory is going to be sqlalchemy.orm.sessionmaker let's say bind=engine.
We also want there to be only one of these so if somebody calls this twice and it's already done we want to bail, so let's say this.
If they've already initialized the factory then we're going to not let them do it again.
Everything is already good.

The next thing we need to do in our little initialization bit.
We have our connection to the database through this engine and we have the ability to create the unit to work through the factory.
What we need to do is actually initialize the database to match exactly what we have in our models.
Now this, actually, there's some non-obvious things that are going to happen here.
So what we want to do is, we're going to go down here and we're going to go to our SQLAlchemyBase.
Of course, we need to import that and it has this thing called a metadata and on there we can say create_all and pass along the engine.
Okay, notice that there was no auto complete on these parts, but that's okay.
This is what we've got to type, metadata.create_all.
Now, we only want to do this once this part has been run.
So we're going to not let them run that if they haven't yet.
So we'll say, if not engine then raise exception you have not called global init.
So this will be totally good.
It seems.
Now there's one little problem here and what is it?
Well, how does SQLAlchemy know what create_all means?
Create_all means, find all the classes that are derived from SQLAlchemyBase.
How do we know what those are?
Well, Python only knows what they are if it's already loaded that module.
So, for example, over here, if nobody has loaded up scooters or rentals those tables will not be created.
So we need a way to ensure that these are all loaded up.
So there's a couple of options: we could, right here, you know, right, we could even do it just here, 'cause it only matters when you call this, we could say, import data.models.locations.
import data.models.rentals.
When you add a new one, it's pretty easy to forget, like, buried deep down in this function here that this thing is supposed to happen.
So let's do a little convention here.
Create one more Python file called, __all_models.
Maybe with the underscore there as well.
And the idea is with this __all_models that is where, whenever we add a new model we do that import, just like I typed.
Import data.models.rentals, locations, scooters, users.
Now PyCharm is trying to be helpful and says Guess what?
You're not using this.
You could delete it.
if I hit Alt + Enter, it deletes it again but, no, I actually want this to happen.
This is the sole purpose of this file is just to do that import.
So we could go over here to tell PyCharm Stop this.
I meant to do this, even though you think it's an issue.
So now, we come over here, and just locally import data.__all_models that way every whenever we add a new model we just put it in all models and everything will work.
There's a chance it'll work if we don't do that but there's a chance that it won't work.
It depends on the order of operations and it's really frustrating and tricky when it doesn't work, so that's why I'm making a big deal of it here.
I guess while we're at it, one more thing we could do: we really only need the SQLAlchemyBase down here if we call this as well, so we're going to do it like that.
And finally, PyCharm is, again, warning us that we're not using this, but we are.
Okay, so our create tables is all ready to go.
We just have to, somewhere at the beginning of our program, called global_init, we have to call create_tables and we're off to the races.

Lets look at our main now.
So heres our main method in our program and this stuff UI loop if you can call it that.
It goes around and around and asks the user what they want but first thing we have to do is setup the DB.
Now I've thrown in a few little to-dos to remind me what this means in the right order.
So what we are going to do is we're actually going to have to initialize the connection by calling global_init.
Make sure the table schema is there call it a second time SQLAlchemy will just verify that things are set up okay.
And then we actually want to import some data eventually and set what's called the default user.
That will basically be whoever is logged in.
So lets go over here and say, session_factory and import that at the top and say global_init and what do we call it hover_share.sqlite called DB SQLite name doesn't actually matter.
This line should actually have the database created right here.
You'll see it appear and that's a folder but it will have no schema.
It'll have, just be an empty database okay?
The next thing we need to do is go to session_factory and say create_tables.
Then I'm going to leave these other two things here because we are not ready for those yet.
Let's run this and see what happens.
Well this is already a good sign the fact that it did that without crashing that's like hurray.
Now if we look over here we now have this thing popping up and it has a little database icon see that blue icon?
That didn't come from the file extension that came from PyCharm looking at and going Ah-ha I understand what's in that file it is a database a SQLite database, Professional Community Edition this doesn't work for so professional we go over here to the database we can drop this here and we can open it up and look at it.
Now notice it didn't really work hmm why didn't it work?
Lets hit this.
It says the driver is SQLite except for there are no drivers for it so you got to download them wait a moment.
Now we can click test success.
Go okay hit the little refresh now we have a schema.
We open up our schema we have a main and look at that locations, rentals, scooters what's in here?
Open it up, oh it has an id which you can see there's a primary key these yellow vertical things mean those have indexes all sorts of good stuff.
And this is an integer and this is a varchar and things like that.
This is the datetime so it looks like SQLAlchemy has properly created our database schema based on our classes.
Yay!
Put that away so that part is pretty much up and running.

Let's come back and address this ToDo I left here about relationships.
We want to set up a foreign key constraint a relationship between the scooter and a location.
A scooter can be out in which case it has no location or it can be parked where it has to be in a location that's specified in one of the locations over here.
So we can model this in SQLAlchemy.
This comes in two parts and its also sort of bidirectional.
So what we want to do is say that it's possible that there's a location id which is in sa.Column integer like this.
So the scooter may have an id set on it and that id will correspond over to one of the primary keys coming from our location.
This would let us model that in the database but it won't actually create that true relationship.
That database integrity that we want to get.
So what we can do over here is we can add a few things.
We can say this is an sa.ForeignKey and the foreign key we speak in terms of the database names.
So over here we said the name of the database is locations and the thing we want to map to is this id.
So we're going to say locations.id.
And they may not always be there so we're going to say noble is true.
So this is going to set up the relationship the foreign key constraint.
But what it does not do is it doesn't let us navigate.
When you think about the scooter or let's look at it form the Location's perspective.
The location is going to have a bunch of scooters parked at it.
And it would be nice to go to any given location to say dot scooters and that's a list of scooters.
Well, we can actually model that over here as well and it'll say scooters equals.
Notice I'm importing sqlalchemy.orm.
So you can say orm.relation.
I'm going to say scooter.
Now it's a little confusing because when you speak in terms of these relations you say the type name.
You say that name, not that name.
Whereas in the foreign key constraints you say the database name.
That's okay.
I'm going to come out right here and say this is going to backpopulates.
Location.
What is this?
As I told you, it's biderectional.
I can go to any given location I got from the database and say show me all of the scooters, a one to many relationship.
From the scooter, it may be located in a location.
So, we're going to go and do the reverse of this as well.
So we're going to have a location and again, like before, we're going to from sqlalchemy import orm I mean orm.relation.
And this is going to go back to location.
And it's this id that actually drives the database, and then this lets us navigate memory.
So there's, for every scooter there's one or zero locations.
For every location, there's potentially many scooters.
So here's our one, sort of models our one side of the one to many.
And then this part just models the many to one here.
Okay, that should totally set up our database and if I run it, you might think things are going to be okay.
They are not.
Notice our scooter is supposed to have a location id.
Does not have it here.
Let's rerun our code.
We can exit out again.
It should have recreated this right?
Hmm, why isn't that showing up?
Well it turns out this create_tables thing that we did here this create_all will create new tables, it will not update or modify existing tables.
We need something totally different for that something called migrations.
Do that in another whole chapter later in the course.
But for now, what you need to understand is it will not apply those changes till either you delete the tables or recreate it or you do this migration thing that we're going to do much later in the course.
Since we have no data we're gong that delete route.
Delete, rerun.
Now if we do the little refresh whoohoo, location is there.
And you can see, it has a little key foreign key on it.
And that's supposed to map over to as you can see right here from location_id to locations.id.
Perfect, our relationships are all set up.

Let's return to our program.
We're making some really good progress here.
In this part, we have some import data.
So, for example, if I come down here and say show me all the available scooters.
It just says there's none, really.
And the reason it says there's none is there's nothing in the database and we haven't written the code to do the queries.
Let's go and talk about inserting data and then I'll show you the little import program that'll pre-populate the database so we all have interesting data to play with and not totally empty things.
And then we'll go from there.
Notice there's a lot of database operations here.
Like importing data, renting a scooter, and so on.
And we got to do things like, get the scooter, or scooters, here.
Find available scooters, and of course find available scooters has no real implementation.
'Cause we haven't written that.
Now, we could write all of that code here and have a thousand line file, that would be terrible.
Or we could create a separate data access layer and write the functions there and if we change our mind about using SQLAlchemy we can switch to something else and probably to change this code.
So I'm going to go over here, and create a new directory called services.
And here I'm going to create a thing I'm going to call data_service.
And the idea is we write some functions here that the rest of our program can call and in this section we do all of our data access.
So again, I'm going to start from some existing code here that we already have, but it's, as you can, see empty.
So what we want to do is let's focus on just this get_default_user.
What's this about?
Well the idea is up here, there's this user object, and we want to populate this user object with kind of your account, you're logged in account.
So the first thing we're going to do is write this function.
We'll just sort of make our way down the line here.
So this will let us see how to insert some data into the database.
So how do we create a new record to insert?
How'd you do this if it was a class?
If it were a class, you would type this: User, and then you would probably set some properties.
Like the email is going to be test@talkpython.fm.
Username, is going to be 'Test user 1'.
What else we have?
Create a password, we don't need to set those things.
The id's auto-incrementing.
So this will create them, and return them.
But it won't put them in the database, right?
What we need to do to put them in a database is to create one of those units of work.
So back we go to our session_factory.
So our session_factory is going to create these sessions.
And we already have this thing defined.
So we can come down here, and we could just say I would like to create a session, and the way we do it is we execute the session_factory we've got here.
And then what we're going to do is we're going to return the session.
Okay, great.
I think this is just PyCharm being a little confused about what the factory is.
It thinks it's none, it's not none.
We've initialized it.
I guess we could check like we did above.
So it's going to create our session, and we'll return it.
Now this will totally work, there's one other thing that's a little annoying.
So I'm going to set this over here and actually say this is a session.
We can say, session.expire_on_commit is false.
So you'll see sometimes if you insert some data, and then you try to work with it some more, it'll not work.
It'll say, it's expired, you have to go get it from the database again.
But we're going to say just let us continue to work with it.
So here's how we do this unit of work.
We say, session = session_factory.create_session.
Then later, we say session.commit.
And here we do database stuff in between those two things.
And in order to do an insert, we say session.add(user).
If we had gotten them back from the database, and did an update, we don't even have to do a line like that.
It's sort of tied to the session.
But because it's brand new, we have to add it here.
So this will work, sort of, it'll work.
If we look over here, our email actually does not have unique equals true but probably should.
So maybe the insert, if that were the case, would fail the second time.
So actually what we want to do is to a test.
We only want to insert this person if they don't exist.
So that let's us do a quick, little test.
Show you how to do a query, we're going to say user equals this, and we're going to go to our session, and create what's called a query.
And you pass the type, we do a filter and then here we say user.email.first.
We're going to use the same email address.
We'll say if user return user.
So we're going to try to get them from the database 'cause only the first time do they need to be inserted from the database, right?
And then afterwards, we're just going to give them back right here.
But the first time we'll create them save them, and then return them.
So let's make sure we're making use of this.
Say, user...
User default user, and we can just print out, found default user with our email or something like that.
We'll delete this in a second but just to see that it's working.
If you go over here to our database we can go to the users, and say jump to the console.
Select star from user, nobody's there.
Let's go run our program.
See we found our user, we re-run our query.
We now have our user inserted.
Alright, it looks like that is working, and that's basically the pattern for the rest of this demo app.
Create a session, we can do queries like this.
We can do inserts like this.
And then if we did make changes, we call commit.
If we don't, we could return the user.
Like in this case, we created the session and then returned the user, and did not call commit in that execution path.
That was pretty straight forward.
Let's go write the rest of these queries.

It probably doesn't feel like we've made tons of progress.
It seems like there's a lot to do.
We have these other queries we have to write.
But in fact, these are pretty simple 'cause they're kind of the same thing.
In fact, so much so that I'm going to copy that line right there.
Any time we're going to do a query, we start with a session and then we make some changes to it.
So we would like to do two things when we book a scooter.
One, we want to remove it from that location and then we want to create a new rental.
Let's do the rental first.
To do the insert, we're going to do this and we'll say session.add_rental and then session.commit.
Okay, we need to set some properties here.
So we'll set the scooter_id to scooter.id set the user_id, well, you guessed it, to the user.id set the rental.start_time to now and we'll set the rental.end_time to be the start_time plus one day.
So the way we do that with time, so we say timedelta and the days equals one.
So this is doing our rental, right?
We now have this rental, but the scooter on the scooter object, it's still actually oh, we want to do start time here.
So the scooter though, is still parked as far as it's concerned.
Remember, if you look at the scooter it's going to have a location id that's set.
So let's go and unset that.
Now, it would be nice if I could just say scooter.location_id = None however, this scooter object was not retrieved from this session.
It's annoying, but that's the way it is.
So if you're going to make changes to the scooter you have to get it from the database again.
So we'll say scooter = session.query(Scooter).filter(Scooter.id == scooter.id) So we want to go to the type, and sort of tell it do the query where the id is actually this particular value.
And then, we want to make sure that we get one and if it's not in the database this is some sort of weird case that went wrong so we'll say one().
And one will either give us the scooter back, or crash.
Now we're going to set the location like this then we call commit.
That's actually going to push that change down 'cause it came from that session, right?
The other thing we want to do is let's change the battery level just so we can see the battery level change, right?
They've got it, it's going to drive it presumably was charged when it was put you know, left there at the scooter location.
Let's say 50 to 100, right?
So the battery level is going to be somewhere between 50 and 100 on our scooter.
I think booking a scooter is all done.
Parking a scooter is going to be very similar.
So let's go, come over here and get our scooter and we're just going to pass the id this time.
And then all we have to do is say the scooter location_id is in this location, maybe set the battery level back and then say session.commit.
Done, we've now parked that scooter in that location.
The final two queries we have to write here are for show us the scooters that are not parked in a location or show us the scooters that are parked in a location.
And these are actually almost identical.
So let's come over here.
We'll do this, say scooters is this.
Of course, we don't want to do one let's say we want them all.
And the query is going to be that the scooter location_id is None.
Now, PyCharm is going to complain, and say "well you're supposed to use is None." In general that's true in Python this is the way you have to write it and you can tell PyCharm to chill a little bit.
It's still going to complain some, that's the way it goes.
Okay, so we're going to create a session get our scooters back, make sure we iterate over them so we can close our session and get that done, and so on.
So where the scooters have no location those are the ones that are out for rental.
Where they do have a location where the location is not None these are the ones that are parked.
Look at this, these are all the queries we have to write for this entire section.
We have our data access layer totally done we just need to use it in our app and also insert some data so we can actually test this out.

So, we think we have our data access layer working but we have no data.
We can't really test it.
So, let's go and add one more file.
And this one I'm going to drop in and just talk you through because it's super tedious to write.
So, what this is going to do is it's going to import data only if those particular tables are empty.
So, it's going to import only the user's table if there's no users, or the scooters if there's no scooters.
So, let's just look at the scooter one.
So, just like before, we create a session and it does this check, this count to see if there are any scooters available.
If they are, it must have pre-populated it.
We don't need to worry about it.
Otherwise, it's going to have some models some random VIN values it can use and get all the locations so that it can then use those to populate with.
Then we're going to go and add 20 scooters here, 21 scooters.
And it just randomly fills out the values randomly generates a VIN number, randomly picks a location and adds it and then commit to all those.
Same for all the others.
Right here you can see it's going to get the default user as well and create a second user so we have more than one.
I'm going to just delete this one more time so we start over.
Now let's go to our program.
And notice this part was still missing.
So, we'll say import data import if empty, and we delete this.
Okay, so everything should be up and running.
Let's try to run this and see if we now have data.
It didn't crash, so that's quite exciting.
So, here you can see we have our scooters.
They all got created with their IDs and their VIN numbers and their versions, and their various battery levels.
Some of them are checked out for rental because you can see their locations are null.
These, the ones that have locations, they are checked in.
Their batteries are charged up and they're waiting to be rented.
Looks like that's working.
And it turns out the other ones are all good as well.
So the final thing to do before our app is entirely done is just implement these little functions.
That might sound hard, but it actually is pretty easy because we already wrote the data access stuff.
We just have to do the reporting.