diff --git a/source/_data/sidebar.yml b/source/_data/sidebar.yml index cf4a8bf..e77b5e3 100644 --- a/source/_data/sidebar.yml +++ b/source/_data/sidebar.yml @@ -15,13 +15,15 @@ docs: markdown: common/markdown.html misc: dev-common/misc.html dev_fd: - sublime_text: dev-fd/sublime-text.html + editor: dev-fd/editor.html nodejs: dev-fd/nodejs.html network_analysis: dev-fd/network.html + chrome_plugins: dev-fd/chrome_plugins.html dev_rd: nginx: dev-rd/nginx.html mongodb: dev-rd/mongodb.html strongloop: dev-rd/strongloop.html + python: dev-rd/python.html dev_ios: alcatraz: dev-ios/alcatraz.html crash_logs: dev-ios/crash-logs.html diff --git a/source/docs/dev-common/homebrew.md b/source/docs/dev-common/homebrew.md index a36e481..cc739b9 100644 --- a/source/docs/dev-common/homebrew.md +++ b/source/docs/dev-common/homebrew.md @@ -1,8 +1,8 @@ title: Homebrew --- -拿到一台新的MAC，首先推荐安装`HomeBrew`。 -HomeBrew是Mac下面的一个包管理器，方便我们安装一些Mac OS没有的UNIX工具、软件。 +拿到一台新的Mac，首先推荐安装`Homebrew`。 +Homebrew是Mac下面的一个包管理器，方便我们安装一些macOS没有的UNIX工具、软件。 ## 安装HomeBrew diff --git a/source/docs/dev-common/misc.md b/source/docs/dev-common/misc.md index 1f33a61..1eafff6 100644 --- a/source/docs/dev-common/misc.md +++ b/source/docs/dev-common/misc.md @@ -1,10 +1,10 @@ title: 通用开发杂项配置 --- -## XCode Command Line Tools +## Xcode Command Line Tools -在Mac下面的很多软件安装都会涉及到`编译`，依赖于`XCode Command Line Tools`这个工具，Mac下面的Xcode自带了这个工具，我们可以在`Terminal`输入`gcc`或者`make`,然后弹出一个选项会让你安装。 -装了`Xcode`的同学就没有必要单独安装它了，因为`XCode` 自带此工具。 +在Mac下面的很多软件安装都会涉及到`编译`，依赖于`Xcode Command Line Tools`这个工具，Mac下面的Xcode自带了这个工具，我们可以在`Terminal`输入`gcc`或者`make`,然后弹出一个选项会让你安装。 +装了`Xcode`的同学就没有必要单独安装它了，因为`Xcode` 自带此工具。 ## 终端里临时设置代理 @@ -48,3 +48,15 @@ export EDITOR=atom sudo discoveryutil mdnsflushcache sudo discoveryutil udnsflushcaches ``` + +## QuickTime +是的，你没有看错，**Apple** 官方提供的视频播放器可以实现iOS设备的屏幕串流/录制功能，你不需要购买高价的 **Lighting** 视频转接口，这对需要iOS屏幕分享，做Demo演示的你再合适不过。操作很简单： + +1. 将iOS设备插入Mac的USB口 +2. 打开 **QuickTime** +3. 菜单栏新建影片录制 +4. 切换摄像头至你的iOS移动设备 + +![QuickTime](../../img/quicktime.png) + +太棒了！开箱即用 \ No newline at end of file diff --git a/source/docs/dev-common/shell-and-terminal.md b/source/docs/dev-common/shell-and-terminal.md index 3667fd0..7241962 100644 --- a/source/docs/dev-common/shell-and-terminal.md +++ b/source/docs/dev-common/shell-and-terminal.md @@ -3,7 +3,7 @@ title: Shell以及终端软件 全栈开发在Mac下面会经常使用终端，在`OS X El Capitan‎`之前，恐怕系统默认的`Terminal+bash+screen`是无法跟`iTerms+zsh+tmux`进行匹敌。 -普通MAC用户大可不必安装这三个软件，但是作为`开发者`，装上这三个软件会让你爱不释手。 +普通Mac用户大可不必安装这三个软件，但是作为 **开发者** ，装上这三个软件会让你爱不释手。 ## iTerm2 @@ -182,6 +182,10 @@ Prefix-Command前置操作：所有下面介绍的快捷键，都必须以前置 了解更多`tmux`可以点击[这里](http://foocoder.com/blog/zhong-duan-huan-jing-zhi-tmux.html/) +## A bonus! --- [Go2Shell](http://zipzapmac.com/Go2Shell) +**Go2Shell** 是一个便捷小工具，它可以实现一次点击，即可在当前目录中打开终端，这比打开终端->`cd`到当前目录直观快捷的多，就像下面这样: + +![Go2Shell](../../img/go2shell.png) ## 其他常见问题 diff --git a/source/docs/dev-fd/chrome_plugins.md b/source/docs/dev-fd/chrome_plugins.md new file mode 100644 index 0000000..7cbeefb --- /dev/null +++ b/source/docs/dev-fd/chrome_plugins.md @@ -0,0 +1,34 @@ +title: Chrome插件 +--- + +作为前端的你不可避免的会使用 **Chrome** 调试程序，别忘了 **Google** 是一种信仰！ + +## 插件推荐 + +## [Wappalyzer](https://www.wappalyzer.com/) + +![Wappalyzer](../../img/wappalyzer.jpg) + + +这是一个分析当前浏览站点使用的技术框架的插件，想看看这么炫酷的站点背后用了什么技术吗，安装 **Wappalyzer** 给你答案！ + +## [EditThisCookie](http://www.editthiscookie.com/) + +![EditThisCookie](../../img/editthiscookie.png) + +**EditThisCookie** 是一个cookie管理器。你可以添加，删除，编辑，搜索，锁定和屏蔽cookies！ +太棒了！有了这个插件，在和后端联调时，一切都变得轻松起来;) + +## [Whatfont](http://www.chengyinliu.com/whatfont.html) + +![Whatfont](../../img/whatfont.png) + +优秀的网页离不开漂亮的字体，这个插件可以检测网页中使用的是什么字体，信息非常详尽，如果你是设计师，结合诸如 [**Google Fonts**](https://fonts.google.com/)这类开源字体网站，就可以从别人的优秀设计中汲取灵感并产出自己的作品。 + +## [ColorZilla](http://www.colorzilla.com/chrome/) + +![ColorZilla](../../img/colorzilla.png) + +轻便快捷的页面取色工具。你不会想要每次都启动 **Photoshop** 或 **Sketch** 的取色器取色吧？试试这个，轻轻一点颜色便知，它还贴心地自动帮你把取到的色值放进了剪贴板，下一步你只需要 `command+v` 了！ + + diff --git a/source/docs/dev-fd/sublime-text.md b/source/docs/dev-fd/editor.md similarity index 87% rename from source/docs/dev-fd/sublime-text.md rename to source/docs/dev-fd/editor.md index 5efe3b5..4a0884f 100644 --- a/source/docs/dev-fd/sublime-text.md +++ b/source/docs/dev-fd/editor.md @@ -1,6 +1,10 @@ -title: Sublime Text +title: 编辑器 --- +> 选择一个好的编辑器能够极大的提高前端开发效率 + +# Sublime Text + ## `subl` Shell命令设置 为了方便在终端直接用`SublimeText`打开我们的项目，为此可以设置一下`Subl`来软链接到实际的路径。 @@ -96,3 +100,10 @@ SublimeText所有插件都依赖于`Package Control`，默认情况下`Package C - markdownPerview（写markdown可以`command+b`直接生成html预览） - evernote（配合markdownPerview就可以写markdown同步到evernote去了） +# Visual Studio Code + +这或许是最好的当代编辑器，它和 [**Atom**](https://atom.io/) 一样都基于 [**Electron**](https://electronjs.org/)，但是效能更好，加载大文件时尤为明显。 + +![VSCode](../../img/vscode.png) + +**Visual Studio Code** 简洁的设计，高亮区全局显示，集成的控制台、版本控制，丰富的插件系统，便捷的分栏显示和"禅"模式等等功能都是以往编辑器特性的集大成者，墙裂推荐。 \ No newline at end of file diff --git a/source/docs/dev-rd/python.md b/source/docs/dev-rd/python.md new file mode 100644 index 0000000..8ea0ee6 --- /dev/null +++ b/source/docs/dev-rd/python.md @@ -0,0 +1,47 @@ +title: Python +--- +当今最火的语言几乎胜任了所有领域，em...除了前端;）**Mac** 全栈怎么能少了 **Python**？ + +没错，你的 **Mac** 自带 **Python**，这简直是世界上最好的开发工具！ + +## [pip](https://pip.pypa.io/en/stable/installing/) + +**pip** 是 **Python** 的包管理工具 + +要安装它，你只需要在终端键入： + +``` +sudo easy_install pip +``` + +你将会使用 `pip install` 安装依赖包，使用 `pip uninstall` 卸载依赖，所有可用的依赖包都会在[这个网站](https://pypi.org/)注册，去看看吧，想要的应有尽有。 + +你还可以通过 `pip freeze` 命令将当前安装的依赖列表“冻结”，像下面这样： + +``` +pip freeze > requirements.txt +``` +如果项目中只需版本控制这个 `requirements.txt` 文件，其他协作者执行 `pip install -r requirements.txt` 便可复制你当前安装的依赖环境，是不是有点像 **Node** 的 **package.json**？ + +## [Virtualenv](https://virtualenv.pypa.io/en/stable/) + +相信我，你不会想忽视这个工具，先执行 `pip install virtualenv` 安装它吧！ + +`virtualenv` 会给当前目录创立一个与系统环境 **隔离** 的 “虚拟” **Python** 环境，正如其名。 + +- 运行 `virtualenv venv` 在当前目录创建一个以 `venv` 命名的文件夹，这代表了你本地的虚拟环境 + +- 运行 `source venv/bin/activate` 来激活虚拟环境 + +如果命令行开头出现了 `(venv)` 字样，恭喜你，你成功进入了虚拟环境！现在你可以随意安装依赖而不影响系统环境了。 + +- 使用 `deactivate` 命令退出虚拟环境 + +想想 **Python 2.x** 和 **Python 3.x** 的兼容问题就头大，现在有了 `virtualenv`, 你可以在需要 **Python 3.x** 环境的项目中使用 **Python 3.x**，同时不会干扰系统默认的 **Python** 环境，也避免了影响其他项目，就是这么干净利落！ + +## [PyCharm](https://www.jetbrains.com/pycharm/) + +![PyCharm](../../img/pycharm.png) + +**PyCharm** 是大名鼎鼎的 **JetBrains** 公司开发的 **Python** IDE，它对整个 **Python** 的开发流做了良好的支持，而且社区版是免费使用的，不能更赞~ + diff --git a/source/img/colorzilla.png b/source/img/colorzilla.png new file mode 100644 index 0000000..50deeaf Binary files /dev/null and b/source/img/colorzilla.png differ diff --git a/source/img/editthiscookie.png b/source/img/editthiscookie.png new file mode 100644 index 0000000..a1d0cfe Binary files /dev/null and b/source/img/editthiscookie.png differ diff --git a/source/img/go2shell.png b/source/img/go2shell.png new file mode 100644 index 0000000..8804838 Binary files /dev/null and b/source/img/go2shell.png differ diff --git a/source/img/pycharm.png b/source/img/pycharm.png new file mode 100644 index 0000000..ae552f8 Binary files /dev/null and b/source/img/pycharm.png differ diff --git a/source/img/quicktime.png b/source/img/quicktime.png new file mode 100644 index 0000000..f1f2f3f Binary files /dev/null and b/source/img/quicktime.png differ diff --git a/source/img/vscode.png b/source/img/vscode.png new file mode 100644 index 0000000..e88b413 Binary files /dev/null and b/source/img/vscode.png differ diff --git a/source/img/wappalyzer.jpg b/source/img/wappalyzer.jpg new file mode 100644 index 0000000..064c952 Binary files /dev/null and b/source/img/wappalyzer.jpg differ diff --git a/source/img/whatfont.png b/source/img/whatfont.png new file mode 100644 index 0000000..607ed7e Binary files /dev/null and b/source/img/whatfont.png differ diff --git a/themes/navy/languages/en.yml b/themes/navy/languages/en.yml index 6ba93de..e4d1afb 100644 --- a/themes/navy/languages/en.yml +++ b/themes/navy/languages/en.yml @@ -36,14 +36,16 @@ sidebar: markdown: Markdown Cheatsheet misc: Miscellaneous dev_fd: Front-End Development - sublime_text: Sublime Text + editor: Editor nodejs: NodeJS network_analysis: Network Analysis + chrome_plugins: Chrome Plugins dev_rd: Logic Development - nginx: NGinx + nginx: Nginx mongodb: MongoDB strongloop: Strongloop - dev_ios: IOS Development + python: Python + dev_ios: iOS Development alcatraz: Alcatraz crash_logs: Crash Logs dev_android: Android Development diff --git a/themes/navy/languages/zh-cn.yml b/themes/navy/languages/zh-cn.yml index a1f2ab6..3f141f1 100644 --- a/themes/navy/languages/zh-cn.yml +++ b/themes/navy/languages/zh-cn.yml @@ -36,13 +36,15 @@ sidebar: markdown: Markdown手册 misc: 其他设置 dev_fd: 前端开发 - sublime_text: Sublime Text + editor: 编辑器 nodejs: NodeJS network_analysis: 网络抓包 dev_rd: 后台开发 - nginx: NGinx + nginx: Nginx mongodb: MongoDB strongloop: Strongloop + chrome_plugins: Chrome插件 + python: Python dev_ios: IOS开发 alcatraz: Alcatraz crash_logs: 崩溃日志