about 3 years ago

R的安装还是很简单的,在cran上找到下载连接,然后下载安装包就好了。同样,安装后续的Rstudio也是如此。将两个软件都安装好后,试着在Rstudio里安装第三方的Library时,命令行里总是报错:

Solving R error "tar: Failed to set default locale" in Mac OS X
write the following in terminal

有高人给出了解决方法,打开Mac的Terminal,然后输入下面这个命令就好了:

defaults write org.R-project.R force.LANG en_US.UTF-8
 
about 3 years ago

Sublime的大名已经无需我介绍了,首先先介绍如何启用插件安装功能:

  1. 打开Sublime 3,然后按 ctrl+` 或者在View → Show Console
  2. 在打开的窗口里黏贴这个网站上的代码(注意: Sublime 2和3所黏贴的代码不一样,注意选择):https://packagecontrol.io/installation
  3. 安装完成后,按 Ctrl+Shift+p (Windows) / Command+Shift+p (Mac), 输入'Install Packages',之后Sublime会自动下载插件列表,然后弹出一个小的下拉菜单让你填写想要下载的插件名称。

注:

  • 第二步中的网站如果打开困难请翻墙,这年头不翻墙连个程序都没法好好写。
  • 第三步在选择完 Install Packages后,会出现卡住的情况,Sublime最底端的状态栏里会有一个 '=' 符号在来回移动。这个的意思是正在下载插件列表中,请稍后。 插件列表的下载跟墙也有关系,总之不会很快就是了。

接下来是本文重点,前端开发的几个必备插件(越靠后的几个越实用):

CSS3

链接: https://github.com/y0ssar1an/CSS3
简介: 支持CSS3里的语法高亮。(Sublime3里自带的CSS高亮不够用)。安装后, 打开一个CSS文件,然后按照下面GIF操作,将CSS3高亮作为CSS文件的默认高亮:


安装: Ctrl+Shift+P → Package Control: Install Package → CSS3

Sidebar Enhancement

链接: https://github.com/titoBouzout/SideBarEnhancements
简介: 让Sublime的侧边栏多出许多必备功能,如在浏览器中打开,改名,复制文件链接等等


安装: Ctrl+Shift+P → Package Control: Install Package → SideBarEnhancements

Git Gutter

链接: https://github.com/jisaacks/GitGutter
简介: 如果你使用Git做版本控制的话,这个插件可以在行号前标记处哪些行是新加的,删除的和修改过的。


安装: Ctrl+Shift+P → Package Control: Install Package → GitGutter

Bracket Highlighter

链接: https://github.com/facelessuser/BracketHighlighter
简介: 高亮各种括号的起始和结尾


安装: Ctrl+Shift+P → Package Control: Install Package → BracketHighlighter

HTML-CSS-JS Prettify

链接: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
简介: 编辑HTML, CSS, JS时,经常会出现缩进不对,代码行不对其的情况。装了这个插件之后,只要按下Ctrl+Shift+h (Windows), Command+Shift+h (Mac), 你的文档就会被整理干净。
安装: Ctrl+Shift+P → Package Control: Install Package → HTML-CSS-JS Prettify

livestyle

链接: http://livestyle.emmet.io/

简介: 这货太神奇了。在调试页面的样式时,经常会打开Chrome自带的开发者工具,然后编辑CSS,等满意了再把CSS代码黏贴回Sublime里。这货允许你在Chrome里修改CSS,然后相对应的在Sublime里的CSS文件就自动更新了!(你更新Sublime里的CSS并保存,打开的网页也会自动更新)

安装: 需要安装两个插件,一个是Sublime的插件,一个是Chrome的插件。
Sublime插件: Ctrl+Shift+P → Package Control: Install Package → LiveStyle
Chrome插件: https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg

用法: 先重启你的Sublime,然后打开一个CSS文件。然后在Chrome里打开包含这个CSS的HTML页面 → 打开Chrome的开发者工具,工具栏的最后会多出一个 LiveStyle选项:


看下方File mapping里被HTML页面引用的CSS文件会自动和Sublime里打开的同名CSS文件关联起来。如果名字都对的话你就可以在Elements里开始编辑CSS了。编辑好后看下Sublime,该CSS文件会被自动更新。

livereload

链接: http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions

简介: 该软件需要付费($9.99). 这款软件不算是Sublime的插件,但是开发的时候非常必要。功能和上面介绍的livestyle类似,就是源码文件有所改动的话,打开的网页页面也会自动刷新。(但是不支持在网页里直接改源码,然后反向刷新源码文件)软件源码其实是开源的,但是Mac客户端要收费。其实就60块RMB,但是在开发的时候真是省了不少力气。Windows版是测试版,免费。

安装: 需要安装两个部件,一个是Mac客户端,一个是Chrome插件。

Mac客户端:http://itunes.apple.com/us/app/livereload/id482898991?mt=12
Chrome插件: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
如果你使用Safari或者火狐,请到这个页面上找相应的插件:http://livereload.com/extensions/

用法: 先将客户端打开,然后在这个窗口里点 '+' 添加你源文件所在的文件夹。然后在Chrome里打开相应的HTML文件,并点击Livereload插件的图标,如果图标里的圆点变成实心,则表明已经和客户端链接完成,可以开始同步修改了。

Emmet

链接: http://docs.emmet.io/abbreviations/syntax/
简介: 通过一套简单的语法让你快速生成大量的HTML代码,比如输入:

div.row>ul>li

然后按TAB会生成:

<div class="row">
    <ul>
        <li></li>
    </ul>
</div>

虽然要背一下语法,但是只需要记忆最常用的几个就好。效率提升杠杠的。

安装:Ctrl+Shift+P → Package Control: Install Package → Emmet

其它:

以下插件要看你的个人需求,视情况而定:

Advanced New File

链接: https://packagecontrol.io/packages/AdvancedNewFile
简介: 通过Sublime里的输入框来新建一个文件。Windows上按Ctrl+alt+n激活,Mac上按Command+alt+n激活。感觉有了SidebarEnhancement后,这个就没啥大用了。
安装: Ctrl+Shift+P → Package Control: Install Package → AdvancedNewFile

Djaneiro

链接: https://github.com/squ1b3r/Djaneiro
简介: 如果你使用Django框架开发,这个插件会添加以下常用的Snippet,帮助你编辑模板的时候少打些字。如果你有Pycharm的专业版,那就不需要这个了。
安装: Ctrl+Shift+P → Package Control: Install Package → Djaneiro
用法: 安装好后会多出一种文件类型 'Djaneiro → HTML (Django)'。输入'if'然后按Tab的话会自动转换为

{% if  %}
    
{% endif %}

请打开它的网站链接,上面有所有支持的命令列表。

Bootstrap 3 Snippets

链接: https://github.com/JasonMortonNZ/bs3-sublime-plugin
简介: 在Sublime里添加了很多常用的Bootstrap 3的快捷。但前提是需要记住这些快捷的名字。。。
安装: Ctrl+Shift+P → Package Control: Install Package → Bootstrap 3 Snippets

Package Sync

链接: https://packagecontrol.io/packages/Package%20Syncing
简介: 可以同步你多台机器上Sublime的配置和安装包。目前还没测试过,但应该能用。


References:

https://www.youtube.com/watch?v=NrYzJz1P4fE
http://limestrap.blogspot.in/2013/09/12-first-bootstrap-3-page-with-sublime.html

 
about 3 years ago

Be yourself. Everyone else is already taken.

From Momentum

 
about 3 years ago
<img src='image.png'>

The Markdown syntax won't work in this case, you have to use raw html like above.

Reference:
http://stackoverflow.com/questions/10628262/inserting-image-into-ipython-notebook-markdown

 
about 3 years ago

To my suprise, it is actually super easy to install MongoDB if you have brew installed:

brew install mongodb

Then, you have to set a path for MongoDB to store its data:

mkdir -p ~/data/db          # <- create a folder at any location
mongod --dbpath ~/data/db   # <- let mongodb know where you created the folder
mongod                      # <- run MongoDB server, use Ctrl + C to terminate it

To connect to the MongoDB server, open another terminal window:

mongo

That's it!

To import a JSON file into MongoDB:

mongoimport --db *database_name* --collection *collection_name* --type json --file *file.json*

For example:

mongoimport --db test --collection beijing --type json --file beijing_map.json
 
about 3 years ago

Mike Bostock (the author of D3.js) gave a talk about 'Design is a Search Problem'. Here is the distill of the talk:

Prototypes should emphasize speed over polish

It needn't look good, or even have labels. Make just enough to evaluate the idea. Then decide whether to go straight or turn. Identify the intent of the prototype. What hypothesis are you testing?

Transition from exploring to refining near deadline.

Reduce the amount of explorations as deadline approaches and start to focus on what's working.

Delete code as you go. Be ruthless.

Delete branches as you go (Mike uses git branches to manage his work).

Make your process reproducible.

A build system provides machine-readable documentation. Accelerate the reuse of parts from past projects. Here is the blog link he is refering to.

Try bad ideas deliberately.

You can't evaluate a visualization absent the data.Don't get too attached to your current favorite. Don't get stuck at local maximum; go down to go up. Design is chaotic.

 
about 3 years ago

I am using uikit for a web app that I am creating for my team. I really like the Stage demo's search field and want to mimic it. I extracted the CSS from the demo:

.uk-search:before {
  content: "\f002";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  line-height: 40px;
  text-align: center;
  font-family: FontAwesome;
  font-size: 14px;
  color: #444;
}

.uk-search-field {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  font: inherit;
  color: #777;
  -webkit-appearance: none;
  width: 30px;
  height: 40px;
  padding: 0 0 0 30px;
  border: 1px solid rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0);
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
  vertical-align: middle;
  position: relative;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}

.uk-search-field:focus{
    outline:0;
    width:140px;
    padding: 0 30px;
    cursor: text;
}

That's it. Now the search field's textbox can be hidden when it is not focused and slide out when it is focused.

 
about 3 years ago

Linking to the original post

Summary

  1. I don't know anything
    Don't limit your thinking to dogma's and the conventional thinking. Judge yourself if other people's opinion is a valuable experience to learn from or simply a view limited by his/her own experience. Quotes directly from Paul:

    If you believe yourself to be a rational person, then you're in the trap.

    Things didn't work in the past doesn't mean it won't work in the future. Likewise, what worked before may not work again.

  2. Kill all daemon process
    Computers run faster after restart (because the elimination of long running daemon processes in the background), so does human mind. Purposely creating silent moments everyday to eliminate the voices of "doubt, anger and others' opinions" that drag down our spirite.

  3. Yes, and thank you.
    When dealing with setbacks, either setbacks from life or negative feedbacks from others, say "Yes, and thank you." It maintains the "forward flow of life". (Don't be stalled for long)

  4. Choose the more interesting path
    This resonates with "The joy is in creating, not maintaining". For things that you can already see the outcome is not interesting. For things that are completely random is not interesting. Interesting things have to be genuinely interesting to you and by doing it you can discover something new.

  5. Love what you do
    Real work usually comes with unpleasant or dull moments. Love what you do allows you to sustain and work with them.

  6. Maintain a healthy disregard for the impossible
    Encourage feel thinking and doing the impossible.

 
about 3 years ago

In this part of the post, I would like to document the steps needed to run an existing Django project on gunicorn as the backend server and nginx as the reverse proxy server. (Please refer to Part 1 of this post)

Disclaimer: this post is based on this site but I added a lot of details that wasn't explained.

Setup nginx

Before starting the nginx server, we want modify its config file. I installed nginx via brew on my machine, and the conf file is located here:

/usr/local/etc/nginx/nginx.conf

We can modify this file directly to add configurations for our site, but this is not a good idea. Because you may have multiple web apps running behind this nginx server. Each web app may need its own configuration. To do this, let's create another folder for storing these site-wise configuration files first:

cd /usr/local/etc/nginx
mkdir sites-enabled

We can store our site specific config here but wouldn't it be better if we store the config file along with our project files together? Now, let's navigate to our project folder. (I named my project testproject and stored it under /Users/webapp/Apps/testproject)

cd /Users/webapp/Apps/testproject
touch nginx.conf

Here is my config file:

server {
    listen 80;
    server_name your_server_ip;

    access_log /Users/webapp/logs/access.log;     # <- make sure to create the logs directory 
    error_log /Users/webapp/logs/error.log;       # <- you will need this file for debugging

    location / {
        proxy_pass http://127.0.0.1:9000;         # <- let nginx pass traffic to the gunicorn server
    }
    
    location /static {
        root /Users/webapp/Apps/testproject/vis;  # <- let nginx serves the static contents
    }
}

Let me elaborate on the '/static' part. This part means that any traffic to 'your_server_ip/static' will be forwarded to '/Users/webapp/Apps/testproject/vis/static'. You might ask why doesn't it forward to '/Users/webapp/Apps/testproject/vis'?(without '/static' in the end) Because when using 'root' in the config, it will append the '/static' part after it. So be aware! You can fix this by using alias instead of root and append /static to the end of the path:

location /static {
    alias /Users/webapp/Apps/testproject/vis/static; 
}

Here is the folder structure of my project :

/Users/webapp/Apps/testproject/
    manage.py           <- the manage.py file generated by Django
    nginx.conf          <- the nginx config file for your project
    gunicorn.conf.py    <- the gunicorn config file that we will create later, just keep on reading
    testproject/        <- automatically generated by Django
        settings.py
        urls.py
        wsgi.py         <- automatically generated by Django and used by gunicorn later
    vis/                <- the webapp that I wrote
        admin.py
        models.py
        test.py
        urls.py
        template/
            vis/
                index.html
        static/        <- the place where I stored all of the static files for my project
            vis/
                css/
                images/
                js/

All of the static files are in the /testproject/vis/static folder, so that's where nginx should be looking. You might ask that the static files live in their own folders rather than right under the /static/ path. How does nginx know where to fetch them? Well, this is not nginx's problem to solve. It is your responsibility to code the right path in your template. This is what I wrote in my template/vis/index.html page:

href="{% static 'vis/css/general.css' %}

It is likely that you won't get the path right the first time. But that's ok. Just open up Chrome's developer tools and look at the error messages in the console to see which part of the path is messed up. Then, either fix your nginx config file or your template.

To let nginx read our newly create config file:

cd /usr/local/etc/nginx/
nano nginx.conf

Find the ' http { ' header, add this line under it:

http{
    include /usr/local/etc/nginx/sites-enabled/*;

This line tells nginx to look for config files under the 'sites-enabled' folder. Instead of copy our project's nginx.conf into the 'sites-enabled' folder, we can simply create a soft link instead:

cd /usr/local/etc/nginx/site-enabled
ln -s /full_path/to/your/django_project a_name

# in my case, this is what my link command looks like:
# ln -s /Users/webapp/Apps/testproject/nginx.conf testproject
# this would create a soft link named testproject which points to the real config file

Once this is done, you can finally start up the nginx server:

To start nginx, use

sudo nginx

To stop it, use

sudo nginx -s stop

To reload the config file without shutting down the server:

sudo nginx -s reload

Please refer to this page for a quick overview of the commands.

Setup gunicorn

Setting up gunicorn is more straight forward (without considering optimization). First, let's write a config file for gunicorn. Navigate to the directory which contains your manage.py file, for me, this is what I did:

cd /Users/webapp/Apps/testproject
touch gunicorn.conf.py  # yep, the config file is a python script 

This is what I put in the config file:

bind = "127.0.0.1:9000"                   # Don't use port 80 becaue nginx occupied it already. 
errorlog = '/Users/webapp/logs/gunicorn-error.log'  # Make sure you have the log folder create
accesslog = '/Users/webapp/logs/gunicorn-access.log'
loglevel = 'debug'
workers = 1     # the number of recommended workers is '2 * number of CPUs + 1' 

Save the file and to start gunicorn, make sure you are at the same directory level as where the manage.py file is and do:

gunicorn -c gunicorn.conf.py testproject.wsgi

The ' -c ' option means read from a config file. The testproject.wsgi part is actually referring to the wsgi.py file in a child folder. (Please refer to my directory structure above)

Just in case if you need to shutdown gunicorn, you can either use Ctrl + c at the console or if you lost connection to the console, use [1]:

kill -9 `ps aux | grep gunicorn | awk '{print $2}'`

Actually, a better way to run and shutdown gunicorn is to make it a daemon process so that the server will still run even if you log out of the machine. To do that, use the following command:

gunicorn -c gunicorn.conf.py testproject.wsgi --pid ~/logs/gunicorn.pid --daemon

This command will do three things:

  1. run gunicorn with the configuration file named gunicorn.conf.py
  2. save the process id of the gunicorn process to a specific file ('~/logs/gunicorn.pid' in this case)
  3. run gunicorn in daemon mode so that it won't die even if we log off

To shutdown this daemon process, open '~/logs/gunicorn.pid' to find the pid and use (assuming 12345 is what stored in '~/logs/gunicorn.pid'):

kill -9 12345 

to kill the server.

This is it! Enter 127.0.0.1 in your browser and see if your page loads up. It is likely that it won't load up due to errors that you are not aware of. That's ok. Just look at the error logs:

tail -f error.log

Determine if it is an nginx, gunicorn or your Django project issue. It is very likely that you don't have proper access permission or had a typo in the config files. Just going through the logs and you will find out which part is causing the issue. Depending on how you setup your Django's logging config, you can either read debug messages in the same console which you started gunicorn, or read it form a file. Here is what I have in my Django's settings.py file:

LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'formatters': {
        'verbose': {
            'format' : "[%(asctime)s] %(levelname)s [%(name)s:%(lineno)s] %(message)s",
            'datefmt' : "%d/%b/%Y %H:%M:%S"
        },
        'simple': {
            'format': '%(levelname)s %(message)s'
        },
    },
    'handlers': {
        'null': {
            'level': 'DEBUG',
            'class': 'logging.NullHandler',
        },
        'console': {
            'level': 'DEBUG',
            'class': 'logging.StreamHandler',
            'formatter': 'verbose'
        },
        'logfile':{
            'level':'DEBUG',
            'class':'logging.handlers.WatchedFileHandler',
            'filename': "/Users/webapp/gunicorn_log/vis.log",
            'formatter': 'verbose',
        },
    },
    'loggers': {
        'django.request': {
            'handlers': ['logfile'],
            'level': 'DEBUG',
            'propagate': True,
        },
        'django': {
            'handlers': ['logfile'],
            'propagate': True,
            'level': 'DEBUG',
        },
        'vis': {
            'handlers': ['console', 'logfile'],
            'level': 'DEBUG',
            'propagate': False,
        },
    }
}

Bad Request 400

Just when you thought everything is ready, and you want the world to see what you have built...BAM! Bad Request 400. Why??? Because when you turn DEBUG = False in the settings.py file, you have to specify the ALLOWED_HOSTS attribute:

DEBUG = False
ALLOWED_HOSTS = [
    '127.0.0.1',
]

Just don't put your port number here, only the ip part. Read more about this issue here: http://stackoverflow.com/questions/19875789/django-gives-bad-request-400-when-debug-false

Conclusion

Setting up nginx, gunicorn and your Django project can be a very tedious process if you are not familiar with any of them like me. I document my approach here to hopefully help anybody who has encountered the same issue.

 
about 3 years ago

The goal of this post is to summarize the steps needed to deploy a Django project running on nginx and gunicorn on Mac OSX. I am going to document a list of problems encountered and provide solutions below. (If you are running on Linux, I imagine the process will be very similar)

My setup (the installation order of the following packages matters, just keep on reading. But you don't have to have the exact same versions listed below):

 Python             2.7.9
 pip                6.0.6
 Virtualenv         12.0.4
 VirtualenvWrapper  4.3.1
 Postgres.app       9.4.0.1
 psycopg2           2.5.4
 Django             1.7.3
 gunicorn           19.1.1
 brew               0.9.5
 nginx              1.6.2

First thing first, install Python and pip. This should be the easiest part as the official website provides a installer. So I am not going to elaborate on this part.

Once Python and pip are installed, I recommend to install virtualenv and virtualenvwrapper next.

pip install virtualenv 
pip install virtualenvwrapper

Upon completion, let's create a virtual environment for our later setups:

cd ~                    <- cd to your user directory
mkdir .virtualenvs      <- create an empty folder called .virtualenvs
nano .bash_profile      <- open the .bash_profile file

Copy the following lines into your .bash_profile and save.

export WORKON_HOME=$HOME/.virtualenvs
source /usr/local/bin/virtualenvwrapper.sh

Once the file is saved, make sure to reload it:

. .bash_profile         <- Note the space between the two dots

Now we can create a virtual environment to install the rest by:

mkvirtualenv webapp

Now your bash prompt should have (webapp) in front of it, meaning you are currently in the 'webapp' environment.

Next, you should install the Postgres.app. The Postgres.app encapsulate PostgreSQL into a nice installer and makes the installation process extremely easy. Once completed, install psycopg2 (Note: you have to install Postgres.app first before installing psycopg2 otherwise you will (run into an error)[http://cheng.logdown.com/posts/2015/01/17/install-postgresql-and-psycopg2-on-mac-osx])

pip install psycopg2

Then, we can install Django and gunicorn:

pip install django
pip install gunicorn

In the end, we need to rely on brew to install nginx. To install brew, copy and paste this line into your terminal:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Once completed, install nginx:

brew install nginx

Summary of Installation

Let me explain how each aforementioned package fits within the big picture. To make everything easier to understand for novice users like myself, I simplified the functionalities of the pieces below, so please go to their websites for a more accurate description.

1. Virtualenv and Virtualenvwrapper
Virtualenv allows you to create a 'sandbox' that contains all of the Python packages you need for deployment without messing up the system's python environment. Virtualenvwrapper as its name suggests, wraps around virtualenv to provide a list of 'shortcut' commands to reduce the amount of efforts needed to create/switch between/delete virtual environments. The sole purpose of these two pieces is to isolate your deployment environment from other Python environments on the same machine.

To illustrate this issue with an example, I develop and deploy Django projects on the same machine for learning purpose. When I work on a Django project, I use the latest version of Django. But when I deploy it, I use an older version. Without virtualenv, I have to install the latest Django for development and delete it and install an older version for deployment. They can never co-exist at the same time. Virtualenv allows me to create two separate environments with different Django version in each and co-exist nicely.

2. Postgres.app and Psycopg2
The Postgres.app installs the PostgreSQL server on your machine with one click. It also provides a shortcut for you to open up a Terminal as a client that connects to the database server. Psycopg2 is used by Django or any Python program to access the PostgreSQL database programmatically.

3. nginx and gunicorn
Why do we need two servers instead of one?Well, by using gunicorn alone, it is enough to get your Django project up and running. The purpose of adding nginx in front of it is for:

  1. Load Balancing - The more servers you have the more users you can serve concurrently. But who should be the one that directs traffic to different servers? Well, the nginx server in this case. (I am aware that I have everything running on a single Mac...)
  2. Acceleration - Not all of the contents on your web page are dynamically generated. For instance, CSS style sheets, the logo of your website, javascript libraries like jQuery. We can have a server dedicated for serving these static contents so that our gunicorn server can focus on serving dynamic contents.
  3. Security - Users never see the gunicorn server. The only server exposed to the outside world is the nginx server. The gunicorn server will never accept traffics other than the ones forwarded by nginx.

Please read this link to learn more.

The choice of which server to use is arbitrary in this case. You can replace nginx with Apache and gunicorn with (uWSGI)[https://uwsgi-docs.readthedocs.org/en/latest/]. You should Google to find out more about them and see which one fits better with you.


This concludes the first part of this post. Here is the second part but I suggest you taking a break as the second portion is rather long.