<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.0">Jekyll</generator><link href="https://vicyang.com/feed.xml" rel="self" type="application/atom+xml" /><link href="https://vicyang.com/" rel="alternate" type="text/html" /><updated>2021-09-12T07:34:02+00:00</updated><id>https://vicyang.com/feed.xml</id><title type="html">Vic Yang</title><subtitle>A blog about technology and stuff related</subtitle><entry><title type="html">Python Crawler Example (1)</title><link href="https://vicyang.com/python-crawler-example-1/" rel="alternate" type="text/html" title="Python Crawler Example (1)" /><published>2017-07-28T10:00:00+00:00</published><updated>2017-07-28T10:00:00+00:00</updated><id>https://vicyang.com/python-crawler-example-1</id><content type="html" xml:base="https://vicyang.com/python-crawler-example-1/">&lt;p&gt;I found &lt;strong&gt;clicking on job posting website&lt;/strong&gt; could be automized, so I wrote a script for crawling. Here I used Python, beautifulsoup, requests and generators tricks for practicing.&lt;/p&gt;

&lt;p&gt;I used Salesforce Career Page for example.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-28-python-crawler-example-1/1.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Salesforce Career Website&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;where-should-i-get-started&quot;&gt;Where should I get started?&lt;/h2&gt;

&lt;p&gt;I knew Google Chrome has tool to see each request sent from browser, so I used that to see the request I sent from browser. By seeing that, I could know what kind of information I can wrap in code and issue a query.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-28-python-crawler-example-1/2.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Chrome Browser Developer Tool&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-28-python-crawler-example-1/3.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Curl Example&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;I pasted on editor and saw there was a &lt;strong&gt;GET request&lt;/strong&gt; sent to Salesforce server. So, all I need is use requests to send a GET request to that and I can get the result.&lt;/p&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/3144895face87e21f9616ff797c25f6b.js&quot;&gt; &lt;/script&gt;

&lt;p&gt;Apply this code would receive 403. (HTTP Code 403 - Forbidden)&lt;/p&gt;

&lt;h2 id=&quot;what-happened-then&quot;&gt;What happened then?&lt;/h2&gt;

&lt;p&gt;Apparently, it’s not enough for this request, so I guessed it required header information to send it.&lt;/p&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/2e5dca03fed4787dea71bb29c7387554.js&quot;&gt; &lt;/script&gt;

&lt;p&gt;And I received 200. (HTTP Code 200 - OK)&lt;/p&gt;

&lt;h2 id=&quot;start-analyzing-html&quot;&gt;Start analyzing HTML&lt;/h2&gt;

&lt;p&gt;I put the response in BeautifulSoup and got parsed HTML. What I really need is the list of jobs. I observed that page from Chrome Developer Tool and found some important CSS tag.&lt;/p&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/627dddeab82ae6b4617cff301c4638ea.js&quot;&gt; &lt;/script&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-28-python-crawler-example-1/4.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Result Example&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;From this code, I got only 10 jobs listed on my terminal. There must be something wrong, and then I realized I only parsed &lt;strong&gt;one page&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Next part, I would use generator to generate different url.&lt;/p&gt;

&lt;h2 id=&quot;generate-url-by-leveraging-generators&quot;&gt;Generate URL by leveraging generators&lt;/h2&gt;

&lt;p&gt;I composed a &lt;i&gt;get_total_pages&lt;/i&gt; function to get total pages. I found it’s only 10 jobs listed on one page, so I used the &lt;i&gt;jobnumbers&lt;/i&gt; divided by 10 and got the result.&lt;/p&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/c7b0579e960de9092a0265e7d6fe5e7a.js&quot;&gt; &lt;/script&gt;

&lt;p&gt;The function is the logic of generator.&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;def url_cat(total_pages, url):
	yield url
	page = 1
	while page &amp;lt;= total_pages:
    	yield url + str(page)
    	page += 1
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;I used 2 &lt;strong&gt;yield&lt;/strong&gt; statements because the first url has no number concatenated afterward, and then I used the second &lt;strong&gt;yield&lt;/strong&gt; to generate urls.&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;url_gen = url_cat(total_pages, url)

for url in url_gen:
    soup = get_soup(url, headers, payload)
    list_jobs(soup)
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;I applied for-loop to iterate the generator.&lt;/p&gt;

&lt;p&gt;Now, I can get a list of information that I really wanted.&lt;/p&gt;

&lt;p&gt;===&lt;/p&gt;

&lt;p&gt;What’s inside?&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Python&lt;/li&gt;
  &lt;li&gt;Generators&lt;/li&gt;
  &lt;li&gt;Requests&lt;/li&gt;
  &lt;li&gt;BeautifulSoup&lt;/li&gt;
&lt;/ul&gt;</content><author><name>vicyang</name></author><category term="blog" /><category term="python" /><category term="requests" /><category term="beautifulsoup" /><category term="generator" /><summary type="html">I found clicking on job posting website could be automized, so I wrote a script for crawling. Here I used Python, beautifulsoup, requests and generators tricks for practicing.</summary></entry><entry><title type="html">Python Functions with some tricks</title><link href="https://vicyang.com/python-functions-with-some-tricks/" rel="alternate" type="text/html" title="Python Functions with some tricks" /><published>2017-07-25T10:00:00+00:00</published><updated>2017-07-25T10:00:00+00:00</updated><id>https://vicyang.com/python-functions-with-some-tricks</id><content type="html" xml:base="https://vicyang.com/python-functions-with-some-tricks/">&lt;p&gt;Define functions is one of basic Python skills. I would like to focus on closure and its tricks.&lt;/p&gt;

&lt;h2 id=&quot;metadata&quot;&gt;Metadata&lt;/h2&gt;

&lt;p&gt;We can add some annotations on function in order to let programmers know how this function should be used.&lt;/p&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/7bfd08c3ee72b954a687c827ce8b2ba9.js&quot;&gt; &lt;/script&gt;

&lt;p&gt;Python interpreter wouldn’t give any semantic meaning on these statement. They are not type checks mechanism. However, they still give other maintainers enough clues to track code.&lt;/p&gt;

&lt;h2 id=&quot;if-functions-have-multiple-values-to-return-they-are-packed-in-tuple-and-returned&quot;&gt;If functions have multiple values to return, they are packed in tuple and returned.&lt;/h2&gt;

&lt;h2 id=&quot;default-value-in-parameters&quot;&gt;Default value in parameters&lt;/h2&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/07d976384d4310879c6967a1ee42c29f.js&quot;&gt; &lt;/script&gt;

&lt;p&gt;&lt;strong&gt;Indicated default values should always be immutable objects&lt;/strong&gt;
Like None, True, False, number or string&lt;/p&gt;

&lt;h2 id=&quot;capture-variable-in-lambda&quot;&gt;Capture variable in lambda&lt;/h2&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/6b0c50430df61776627ec669d2ff5247.js&quot;&gt; &lt;/script&gt;

&lt;h2 id=&quot;using-functoolspartial&quot;&gt;Using functools.partial&lt;/h2&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/c445cf3afffb1b74f4f65e8a88d6f5cc.js&quot;&gt; &lt;/script&gt;

&lt;h2 id=&quot;closure&quot;&gt;Closure&lt;/h2&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/6b33ec2f0f55eacd4dfe3e9c747ab288.js&quot;&gt; &lt;/script&gt;

&lt;h3 id=&quot;when-do-we-have-a-closure&quot;&gt;When do we have a closure?&lt;/h3&gt;

&lt;ul&gt;
  &lt;li&gt;We must have a nested function (function inside a function).&lt;/li&gt;
  &lt;li&gt;The nested function must refer to a value defined in the enclosing function.&lt;/li&gt;
  &lt;li&gt;The enclosing function must return the nested function.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;when-to-use-closures&quot;&gt;When to use closures?&lt;/h3&gt;

&lt;p&gt;Closures can avoid the use of global values and provides some form of data hiding. It can also provide an object oriented solution to the problem.&lt;/p&gt;

&lt;p&gt;We may want to replace single-method class with closure.&lt;/p&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/2b7aff3d95f782069f169c9a3f2bb200.js&quot;&gt; &lt;/script&gt;

&lt;p&gt;We may also want our callback functions to bring additional information&lt;/p&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/7d1e0902683bff9d05aa9bf5edd6aac1.js&quot;&gt; &lt;/script&gt;

&lt;h2 id=&quot;reference&quot;&gt;Reference&lt;/h2&gt;

&lt;p&gt;[1] &lt;a href=&quot;https://www.programiz.com/python-programming/closure&quot;&gt;Python Closures&lt;/a&gt;
[2] Python cookbook 3rd version&lt;/p&gt;</content><author><name>vicyang</name></author><category term="blog" /><category term="python" /><summary type="html">Define functions is one of basic Python skills. I would like to focus on closure and its tricks.</summary></entry><entry><title type="html">Django with AJAX update</title><link href="https://vicyang.com/django-with-ajax-update/" rel="alternate" type="text/html" title="Django with AJAX update" /><published>2017-07-24T10:00:00+00:00</published><updated>2017-07-24T10:00:00+00:00</updated><id>https://vicyang.com/django-with-ajax-update</id><content type="html" xml:base="https://vicyang.com/django-with-ajax-update/">&lt;p&gt;When I was developing Django application, I need a feature that doesn’t require browser to refresh. Therefore, one way to achieve this feature is to use AJAX. When developing Django application, I think I wrote a sample code here for future reference.&lt;/p&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/35bd17fc67e22592a2b6eeb50f5bd5b4.js&quot;&gt; &lt;/script&gt;

&lt;h3 id=&quot;reference&quot;&gt;Reference&lt;/h3&gt;

&lt;p&gt;&lt;a href=&quot;https://simpleisbetterthancomplex.com/tutorial/2016/08/29/how-to-work-with-ajax-request-with-django.html&quot;&gt;How to work with AJAX request with Django&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://code.djangoproject.com/wiki/AJAX&quot;&gt;AJAX - Django&lt;/a&gt;&lt;/p&gt;</content><author><name>vicyang</name></author><category term="blog" /><category term="django" /><category term="javascript" /><category term="ajax" /><summary type="html">When I was developing Django application, I need a feature that doesn’t require browser to refresh. Therefore, one way to achieve this feature is to use AJAX. When developing Django application, I think I wrote a sample code here for future reference.</summary></entry><entry><title type="html">Matplotlib Introduction and Using</title><link href="https://vicyang.com/matplotlib-introduction-and-using/" rel="alternate" type="text/html" title="Matplotlib Introduction and Using" /><published>2017-07-24T09:00:00+00:00</published><updated>2017-07-24T09:00:00+00:00</updated><id>https://vicyang.com/matplotlib-introduction-and-using</id><content type="html" xml:base="https://vicyang.com/matplotlib-introduction-and-using/">&lt;p&gt;This slides is made for Taipei.py meetup. In this talk, I gave base knowledge how to use Matplotlib and gave some exercises in order to let readers understand what and why they need to know this knowledge before applying it.&lt;/p&gt;

&lt;h3 id=&quot;what-is-matplotlib&quot;&gt;What is Matplotlib?&lt;/h3&gt;

&lt;p&gt;Matplotlib is a tool that implemented in Python. The primary target of this tool is another replacement of Matlab. Matplotlib has a convenient command-line interface. You can also trigger IPython to fast plot. You can use OO interface to compose complex figures.&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;p&gt;Pros&lt;/p&gt;

    &lt;ul&gt;
      &lt;li&gt;You can directly use Python to manipulate data and tweak.&lt;/li&gt;
      &lt;li&gt;Multiplot is better in Matplotlib.&lt;/li&gt;
      &lt;li&gt;You can apply LaTex to render plot.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Cons&lt;/p&gt;

    &lt;ul&gt;
      &lt;li&gt;
        &lt;p&gt;Because of the two interfaces (OO and GUI) exist, API is more complicated. You would see there are two or more methods to compose the same figures.&lt;/p&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;p&gt;Official document is hard to read.&lt;/p&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-24-matplotlib-introduction-and-using/1.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Practice 1&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/2ad8365e6f24f4e9f9bd0368075d558d.js&quot;&gt; &lt;/script&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-24-matplotlib-introduction-and-using/2.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Practice 2&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/f963a9b2db614eeed18cf15f2d4bcfe3.js&quot;&gt; &lt;/script&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-24-matplotlib-introduction-and-using/3.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Practice 3&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;script src=&quot;https://gist.github.com/vrootic/f53669058e69124ac14e94e6bbe16e97.js&quot;&gt; &lt;/script&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-24-matplotlib-introduction-and-using/4.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Compare Between Shell and Jupyter&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h3 id=&quot;summary&quot;&gt;Summary&lt;/h3&gt;

&lt;p&gt;In Matplotlib, class is following the rule &lt;strong&gt;Figure -&amp;gt; Axes -&amp;gt; (Line2D, Text, etc)&lt;/strong&gt;.
One Figure can contain several Axes. Use Axes in Matplotlib indicates a plotting area.&lt;/p&gt;

&lt;p&gt;For more details, you can check my slides.&lt;/p&gt;

&lt;iframe src=&quot;//www.slideshare.net/slideshow/embed_code/key/xM90AmtXEilGEb&quot; width=&quot;595&quot; height=&quot;485&quot; frameborder=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; scrolling=&quot;no&quot; style=&quot;border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;&quot; allowfullscreen=&quot;&quot;&gt; &lt;/iframe&gt;
&lt;div style=&quot;margin-bottom:5px&quot;&gt; &lt;strong&gt; &lt;a href=&quot;//www.slideshare.net/vrootic/matplotlib-64469117&quot; title=&quot;Matplotlib 簡介與使用&quot; target=&quot;_blank&quot;&gt;Matplotlib 簡介與使用&lt;/a&gt; &lt;/strong&gt; from &lt;strong&gt;&lt;a target=&quot;_blank&quot; href=&quot;https://www.slideshare.net/vrootic&quot;&gt;Vic Yang&lt;/a&gt;&lt;/strong&gt; &lt;/div&gt;</content><author><name>vicyang</name></author><category term="blog" /><category term="python" /><category term="matplotlib" /><category term="ipython" /><summary type="html">This slides is made for Taipei.py meetup. In this talk, I gave base knowledge how to use Matplotlib and gave some exercises in order to let readers understand what and why they need to know this knowledge before applying it.</summary></entry><entry><title type="html">Login/Logout System with Django</title><link href="https://vicyang.com/login-logout-system-with-django/" rel="alternate" type="text/html" title="Login/Logout System with Django" /><published>2017-07-23T11:20:00+00:00</published><updated>2017-07-23T11:20:00+00:00</updated><id>https://vicyang.com/login-logout-system-with-django</id><content type="html" xml:base="https://vicyang.com/login-logout-system-with-django/">&lt;h2 id=&quot;summary&quot;&gt;Summary&lt;/h2&gt;

&lt;p&gt;Just a simple demo for login/logout system with Email verification.&lt;/p&gt;

&lt;p&gt;Also, deploy for &lt;a href=&quot;https://i2x-challenge-demo.herokuapp.com/&quot;&gt;Live Demo on Heroku&lt;/a&gt;&lt;/p&gt;

&lt;h2 id=&quot;prerequisites&quot;&gt;Prerequisites&lt;/h2&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Python3
PostgreSQL&amp;gt;=9.4
Mac/Linux
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;use-virtualenv&quot;&gt;Use virtualenv&lt;/h2&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;python -m venv ENV
source ENV/bin/activate
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;clone-this-repository&quot;&gt;Clone this repository&lt;/h2&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;git clone https://github.com/vrootic/i2x_challenge.git
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;install-packages&quot;&gt;Install packages&lt;/h2&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;cd i2x_challenge
pip install -r requirements
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;initialize-db&quot;&gt;Initialize DB&lt;/h2&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;createdb i2x_challenge
python manage.py migrate
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;create-superuser&quot;&gt;Create Superuser&lt;/h2&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;python manage.py createsuperuser
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;start-dev-server&quot;&gt;Start Dev Server&lt;/h2&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;python manage.py runserver
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h1 id=&quot;deployment-instructions&quot;&gt;Deployment instructions&lt;/h1&gt;
&lt;h2 id=&quot;install-heroku-toolbelt&quot;&gt;Install Heroku Toolbelt&lt;/h2&gt;
&lt;p&gt;First, &lt;a href=&quot;https://signup.heroku.com/&quot;&gt;sign up to Heroku&lt;/a&gt;
Then, install &lt;a href=&quot;https://toolbelt.heroku.com/&quot;&gt;Heroku toolbelt&lt;/a&gt;&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;heroku login
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;create-heroku-app&quot;&gt;Create Heroku app&lt;/h2&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;heroku create [your_app_name]
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;set-environment-variables&quot;&gt;Set environment variables&lt;/h2&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;heroku addons:create heroku-postgresql:hobby-dev
heroku config:set DJANGO_SECRET_KEY='[your secret key]'
heroku config:set DJANGO_SETTINGS_MODULE='config.settings.production'
heroku config:set DJANGO_ALLOWED_HOSTS='.herokuapp.com'
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;push-to-deploy&quot;&gt;Push to deploy&lt;/h2&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;git push heroku master
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;h2 id=&quot;migrate-the-db&quot;&gt;Migrate the DB&lt;/h2&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;heroku run python manage.py migrate
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Finish!&lt;/p&gt;

&lt;h1 id=&quot;link-to-live-demo-on-heroku&quot;&gt;Link to live demo on Heroku&lt;/h1&gt;

&lt;p&gt;&lt;a href=&quot;https://i2x-challenge-demo.herokuapp.com/&quot;&gt;Live Demo on Heroku&lt;/a&gt;&lt;/p&gt;</content><author><name>vicyang</name></author><category term="project" /><category term="django" /><category term="bootstrap" /><category term="cookiecutter-django" /><summary type="html">Summary</summary></entry><entry><title type="html">RDSS Audit System</title><link href="https://vicyang.com/rdss-audit-system/" rel="alternate" type="text/html" title="RDSS Audit System" /><published>2017-07-23T10:20:00+00:00</published><updated>2017-07-23T10:20:00+00:00</updated><id>https://vicyang.com/rdss-audit-system</id><content type="html" xml:base="https://vicyang.com/rdss-audit-system/">&lt;h2 id=&quot;rdss-audit-system&quot;&gt;RDSS Audit System&lt;/h2&gt;

&lt;p&gt;This project is when I was serving in Alternative Military Service in Taiwan.&lt;/p&gt;

&lt;p&gt;The project accelerated my daily tasks and brought benefits to accounting room.&lt;/p&gt;

&lt;p&gt;This project has several goody features including,&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;Registration searching with part of information(names, ID, or echelon)&lt;/li&gt;
  &lt;li&gt;Calculate the salary for the next month&lt;/li&gt;
  &lt;li&gt;Record the base salary and automatically store records&lt;/li&gt;
  &lt;li&gt;Categorize in service/out of service people&lt;/li&gt;
  &lt;li&gt;Upload excel file from other department and audit those records&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-23-rdss-audit-system/1.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Screenshot 1&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-23-rdss-audit-system/2.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Screenshot 2&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-23-rdss-audit-system/3.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Screenshot 3&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;–&lt;/p&gt;

&lt;p&gt;What has inside?&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Django&lt;/li&gt;
  &lt;li&gt;JavaScript&lt;/li&gt;
  &lt;li&gt;Bootstrap&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;–&lt;/p&gt;</content><author><name>vicyang</name></author><category term="project" /><category term="django" /><category term="bootstrap" /><category term="excel" /><summary type="html">RDSS Audit System</summary></entry><entry><title type="html">File Compare with ReactJS</title><link href="https://vicyang.com/file-compare-with-reactjs/" rel="alternate" type="text/html" title="File Compare with ReactJS" /><published>2017-07-23T10:10:00+00:00</published><updated>2017-07-23T10:10:00+00:00</updated><id>https://vicyang.com/file-compare-with-reactjs</id><content type="html" xml:base="https://vicyang.com/file-compare-with-reactjs/">&lt;h2 id=&quot;file-compare-with-reactjs&quot;&gt;File Compare with ReactJS&lt;/h2&gt;

&lt;p&gt;Summary: A simple file compare tool with ReactJS&lt;/p&gt;

&lt;h3 id=&quot;filecompare&quot;&gt;FileCompare&lt;/h3&gt;
&lt;p&gt;Compare two Excel files&lt;/p&gt;

&lt;h3 id=&quot;what-can-it-do-for-us&quot;&gt;What can it do for us?&lt;/h3&gt;
&lt;ol&gt;
  &lt;li&gt;Compare two Excel file (.xls or .xlsx) by selecting common attributes. If there are some different rows or duplicate rows, this program will show them for you.&lt;/li&gt;
  &lt;li&gt;The different rows can be exported as .csv file.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;how-does-the-comparing-process-take-action&quot;&gt;How does the comparing process take action?&lt;/h3&gt;
&lt;ol&gt;
  &lt;li&gt;In the beginning, we preselect the “authentication ID” as the primary field, 
  and the program would check whether the given fields are the same based on the primary field.&lt;/li&gt;
  &lt;li&gt;In the next version, the program will choose which field can be the primary field.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;how-can-we-use-the-program&quot;&gt;How can we use the program?&lt;/h3&gt;
&lt;ol&gt;
  &lt;li&gt;Install Electron http://electron.atom.io&lt;/li&gt;
  &lt;li&gt;Clone this respository to local machine&lt;/li&gt;
&lt;/ol&gt;
&lt;pre&gt;&lt;code&gt;git clone https://github.com/vrootic/FileCompare.git&lt;/code&gt;&lt;/pre&gt;
&lt;ol&gt;
  &lt;li&gt;Execute it.&lt;/li&gt;
&lt;/ol&gt;
&lt;pre&gt;&lt;code&gt;electron FileCompare&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-23-file-compare-with-reactjs/1.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Screenshot 1&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://vicyang.com/assets/images/2017-07-23-file-compare-with-reactjs/2.png&quot; /&gt;&lt;/p&gt;
&lt;figcaption class=&quot;caption&quot;&gt;Screenshot 2&lt;/figcaption&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;–&lt;/p&gt;

&lt;p&gt;What has inside?&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Electron&lt;/li&gt;
  &lt;li&gt;ReactJS&lt;/li&gt;
  &lt;li&gt;Bootstrap&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;–&lt;/p&gt;

&lt;p&gt;Check it out &lt;a href=&quot;https://github.com/vrootic/FileCompare&quot;&gt;here&lt;/a&gt;&lt;/p&gt;</content><author><name>vicyang</name></author><category term="project" /><category term="javascript" /><category term="reactjs" /><category term="bootstrap" /><category term="electron" /><summary type="html">File Compare with ReactJS</summary></entry><entry><title type="html">Bane - A simple calculator</title><link href="https://vicyang.com/bane-a-simple-calculator/" rel="alternate" type="text/html" title="Bane - A simple calculator" /><published>2017-07-23T09:20:00+00:00</published><updated>2017-07-23T09:20:00+00:00</updated><id>https://vicyang.com/bane-a-simple-calculator</id><content type="html" xml:base="https://vicyang.com/bane-a-simple-calculator/">&lt;h2 id=&quot;bane&quot;&gt;Bane&lt;/h2&gt;
&lt;p&gt;A simple calculator for internal use.&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;The simple program would calculate the base number multiplied by a propotion.&lt;/li&gt;
  &lt;li&gt;For example, we are going to pay someone, and we want to pay them according to the proportion of their workdays in this month.&lt;/li&gt;
  &lt;li&gt;There are other use cases.&lt;/li&gt;
  &lt;li&gt;It will show abbreviation of month which acrossed the date range if the date range is over two months.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;img src=&quot;https://raw.githubusercontent.com/vrootic/Bane/master/img/1.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;installation&quot;&gt;Installation&lt;/h1&gt;
&lt;p&gt;The project is based on Qt4, Python 2.7, and PySide.
It was only tested on Mac.&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;brew install qt
pip install pyside
pyside_postinstall.py -install
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Check it out &lt;a href=&quot;https://github.com/vrootic/Bane&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;</content><author><name>vicyang</name></author><category term="project" /><category term="python" /><category term="pyqt" /><summary type="html">Bane A simple calculator for internal use.</summary></entry><entry><title type="html">Mac Show Hidden Files</title><link href="https://vicyang.com/mac-show-hidden-files/" rel="alternate" type="text/html" title="Mac Show Hidden Files" /><published>2017-07-22T23:10:00+00:00</published><updated>2017-07-22T23:10:00+00:00</updated><id>https://vicyang.com/mac-show-hidden-files</id><content type="html" xml:base="https://vicyang.com/mac-show-hidden-files/">&lt;p&gt;Just found some tricks to show/hide Mac files&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;defaults write com.apple.finder AppleShowAllFiles YES

alt + right click on Finder ==&amp;gt; Relaunch

defaults write com.apple.finder AppleShowAllFiles NO

alt + right click on Finder ==&amp;gt; Relaunch
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;</content><author><name>vicyang</name></author><category term="blog" /><category term="mac" /><category term="terminal" /><summary type="html">Just found some tricks to show/hide Mac files</summary></entry><entry><title type="html">CSS Triangle</title><link href="https://vicyang.com/css-triangle/" rel="alternate" type="text/html" title="CSS Triangle" /><published>2017-07-22T23:00:00+00:00</published><updated>2017-07-22T23:00:00+00:00</updated><id>https://vicyang.com/css-triangle</id><content type="html" xml:base="https://vicyang.com/css-triangle/">&lt;p&gt;I saw a blog which talked about how to make a css triangle.
Through simple box model, we could build css triangle.&lt;/p&gt;

&lt;p&gt;Here is my note.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span class=&quot;nc&quot;&gt;.css-initial-box&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;100px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;100px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;16px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;12px&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;solid&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;transparent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border-top-color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;red&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border-right-color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;green&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border-bottom-color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;blue&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border-left-color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;purple&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;nc&quot;&gt;.css-square&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;0px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;0px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;112px&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;solid&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;transparent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border-top-color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;red&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border-right-color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;green&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border-bottom-color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;blue&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border-left-color&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;purple&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;  
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;

&lt;span class=&quot;nc&quot;&gt;.css-bottom-triangle&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;0px&lt;/span&gt;
  &lt;span class=&quot;n&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;0px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border-bottom&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;112px&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;solid&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;blue&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border-left&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;112px&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;solid&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;transparent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;nl&quot;&gt;border-right&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;m&quot;&gt;112px&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;solid&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;transparent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;</content><author><name>vicyang</name></author><category term="blog" /><category term="css" /><summary type="html">I saw a blog which talked about how to make a css triangle. Through simple box model, we could build css triangle.</summary></entry></feed>