Posted on 2020-05-17T00:45:41Z by Kevin Foong
This is part 2 of the Git and Github intro. See part 1 here.
If you are contributing to more than one Github account, for example one for work and one for home, you may need to set up SSH keys, one for each Github account to prevent permission denied error's and so that you don't have to keep re-entering your username and password. The below are instructions for Windows users on how you can do this.
- If you downloaded Git for Windows you will probably have “git bash” installed. Start git bash.
- Generate a ssh key
ssh-keygen -t rsa -C email@example.com
- It will ask “Enter file in which to save the key”. Save it to the below location. Ensure that you give the key some unique name (swap your values with the ones in UPPERCASE).
.. more ..
Posted on 2020-05-16T09:26:10Z by Kevin Foong
Here is a quick introduction to Git and Github for beginners. Say you have been developing locally and now want to upload your files to Github, you can follow these steps to create a repository and upload your files.
First create a new local Git repository for your project.
Next show all the files that have been amended since the last commit. If this is your first commit, it will show all files.
At this stage make sure that you have a .gitignore file in your project folder to ensure certain files and folders are ignored by Git and not sent to Github. Some examples may include the below. Once you have a .gitignore file, do git status again and you should see those files/folders omitted.
.. more ..
Posted on 2020-05-14T06:14:20Z by Kevin Foong
So what is requestAnimationFrame?
requestAnimationFrame is a method that provides a callback, typically to the function it is in, to create a recursive loop that can achieve up to 60 frames per second.
I've created a very simple growing box animation in Vue to demonstrate.
Some key points,
.. more ..
Posted on 2020-05-13T09:42:16Z by Kevin Foong
Slugs are great for SEO and humans alike. For example, "/post_detail/vue-spa-and-flask-together" looks much better than "/post_detail/8".
In Python it is very easy to create slugs from the title of your blog post. Just use the excellent python-slugify library. The command is simple.
slugify("Vue Spa and Flask Together")
This will give you the slug "vue-spa-and-flask-together"
Now in order to use the slug you will need to store it in your database. As you will be using the slug to query the database instead of the post id, you will also need to ensure that the slug is unique before saving to your database.
For the full source code of how this can be done view my Github page.
Posted on 2020-05-13T09:26:47Z by Kevin Foong
Sitemaps are handy to let search engines know which pages they should crawl on your website. There is a way to automatically create a sitemap.xml route for your Flask website which will always reflect the latest pages on your site. That is everytime you add a route, it will automatically reflect in your sitemap.xml
You can see this site's dynamic sitemap at https://www.kevin7.net/sitemap.xml
The full code is shown below. The key points are:
- Create a route as per normal and name the route "sitemap.xml"
- To get all the static routes just read in the app's "url_map" method via the "iter_rules" method and include any route that is a HTTP "GET" method.
- For the static routes you can just use an arbitary sitemap last modified date to be 10 days prior to today.
- To get all the dynamic routes (blog postings, etc) you will need to connect to your database, read in each blog posting, and manually build your routes. If your blog post has a timestamp in the database, then use that for the sitemap last modified date.
- Finally render sitemap.xml via a template. Make sure you specify the header to be "application/xml" or else it won't render correctly.
.. more ..
Posted on 2020-05-12T09:06:49Z by Kevin Foong
In this blog post I will provide an overview of how to get Flask to serve a Vue Single Page Application (SPA). I assume you already have the prerequisites installed - namely node.js, Vue and Python.
1. Use Vue to create your project.
vue create myproject
2. In the Vue CLI select "Manually select features"
For a SPA make sure you choose Router. The rest is your preference.
.. more ..