add: some post
This commit is contained in:
parent
779ccc2ed7
commit
959fb721c4
|
|
@ -85,7 +85,7 @@ sidebar-avatar: /img/image.jpeg # use absolute URL, seeing it's used in bot
|
|||
|
||||
# Featured Tags
|
||||
featured-tags: true # whether or not using Feature-Tags
|
||||
featured-condition-size: 0 # A tag will be featured if the size of it is more than this condition value
|
||||
featured-condition-size: 1 # A tag will be featured if the size of it is more than this condition value
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
<h1>{{ page.title }}</h1>
|
||||
{% comment %} always create a h2 for keeping the margin {% endcomment %}
|
||||
<h2 class="subheading">{{ page.subtitle }}</h2>
|
||||
<span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %} on {{ page.date | date: "%B %-d, %Y" }}</span>
|
||||
<span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %} on {{ page.date | date: "%Y-%m-%d %H:%M" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
{% comment %} always create a h2 for keeping the margin {% endcomment %}
|
||||
<h2 class="subheading">{{ page.subtitle }}</h2>
|
||||
<span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %}
|
||||
on {{ page.date | date: "%B %-d, %Y" }}</span>
|
||||
on {{ page.date | date: "%Y-%m-%d %H:%M" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,150 @@
|
|||
---
|
||||
layout: post
|
||||
title: "「知乎」你们觉得响应式好呢，还是手机和PC端分开来写？"
|
||||
date: 2014-11-20 12:00:00
|
||||
author: "Hux"
|
||||
header-img: "img/post-bg-rwd.jpg"
|
||||
tags:
|
||||
- 知乎
|
||||
- Web
|
||||
---
|
||||
|
||||
> 这篇文章转载自[我在知乎上的回答](http://www.zhihu.com/question/25836425/answer/31564174)
|
||||
|
||||
|
||||
<div>
|
||||
<p>
|
||||
<b>根据你的产品特点，进行两种不同的设计，</b>
|
||||
<br><b>根据你的设计需求，选择合适的技术方案</b>。
|
||||
</p>
|
||||
<br><b>A与B不是硬币的正反面，它们为了解决同一个问题而生，它们是同一种思想的延伸。</b>
|
||||
<br>
|
||||
<br>
|
||||
<blockquote>移动和桌面设计的差别远不止是布局问题。只要有足够的编程量，这些差别是可以通过响应式设计来解决的。事实上，你可以认为如果一种设计不能兼顾两种平台的主要差别，就不能算是合格的响应式设计。但是，如果确实想要处理好平台间的所有差异，我们就回到了原点：进行两种不同的设计。
|
||||
<br>
|
||||
<br>——《Mobile Usability》（《贴心设计 打造高可用性的移动产品》）</blockquote>
|
||||
<br>
|
||||
<br>其实无论是什么解决方案，我们先来看看我们想要解决的问题：
|
||||
<br>
|
||||
<br><b>“屏幕尺寸越来越多，不同设备的交互特质也有着巨大的差别，我们希望我们的网站能够在移动手机、平板、桌面电脑，在键鼠、触摸、无障碍设备上都有优秀的用户体验。所以，我们需要网站的用户界面在不同的平台上有所不同。”</b>
|
||||
<br>
|
||||
<br>
|
||||
<br>那怎么做呢，一个解决方案应运而生：
|
||||
<br>
|
||||
<br>
|
||||
<ul>
|
||||
<li><b>响应式设计 (Responsive Web design)</b>
|
||||
</li>
|
||||
</ul><b>狭义上</b>，我们把<b>主要依靠前端 CSS</b> （包括 Media Query 媒体查询，百分比流式布局，网格与Typography系统……）来对各种屏幕尺寸进行响应的做法，称之为响应式布局，又称作自适应网页设计，或者弹性设计。
|
||||
<br>
|
||||
<br>这种主要依靠CSS的方案有很多优点，比如：
|
||||
<br>
|
||||
<ul>
|
||||
<ul>
|
||||
<li>设计元素很容易被复用，设计成本低</li>
|
||||
<li>前端只需要维护一套CSS代码，<b>维护成本</b>低</li>
|
||||
<li>桌面端与移动端的设计十分接近，令用户感到“熟悉”</li>
|
||||
<li>不需要任何服务器端的支持</li>
|
||||
<li>与业务耦合程度低，复用程度高（ 以至于 Bootstrap、Foundation 等一干框架都跟进了这个解决方案 ）</li>
|
||||
</ul>
|
||||
</ul>但问题也很明显，比如：
|
||||
<br>
|
||||
<ul>
|
||||
<ul>
|
||||
<li>设计需求复杂时，前端的<b>开发成本</b>没有任何减轻</li>
|
||||
<li>无论是针对桌面还是移动的CSS代码（甚至图片资源文件）都会被同等的下载到客户端（<b>没有考虑移动端的网络优化</b>）</li>
|
||||
<li>如果JS不写两套，桌面端的交互和移动端的交互很难针对平台作出差异</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<br>
|
||||
<br>如果<b>你的</b><b>移动用户对网站所有的功能和内容有着与桌面用户同等的需求</b>，比如 新闻、报纸（媒体类）网站，或者活动、专题页等 <b>偏重信息传达而轻交互 </b>的网站，那么这个解决方案其实恰到好处：
|
||||
<br><b>触摸屏优化（胖手指）、减少次要信息…… 这些通过 CSS 解决就够了。</b>
|
||||
<br>
|
||||
<br>
|
||||
<br><b>但是，如果我想要做更多的 「移动化设计」，比如 减少信息层级、增强手势操作、让网页更接近一个Native App ？</b>
|
||||
<br>
|
||||
<br>好吧，为了更复杂的需求，为了我们的网站能更牛逼的 <b>「响应」</b> 各个平台，
|
||||
<br>又有了这些解决方案：
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<ul>
|
||||
<li><b>服务器端（后端）：</b>
|
||||
<br>
|
||||
</li>
|
||||
<ul>
|
||||
<li>RESS （Responsive Web Design with Server Side Components）通过服务器端组件的响应式网页设计</li>
|
||||
</ul>
|
||||
</ul>提倡 RESS 的人认为：基于前端 CSS 的响应式方案只是一种妥协：
|
||||
<br><b>“ UI 只是在很被动的进行「调整」，而不能真正达到各个平台的最优。好的设计应该达到「这个设备该有的体验」（Device Experiences）。 ”</b>
|
||||
<br>
|
||||
<blockquote><b>Device Experiences ：</b>A device experience is defined by how a device is most commonly used and the technical capabilities or limitations it possesses.</blockquote>RESS 的本质还是服务器端动态的生成，返回 HTML、JS、CSS、图像等资源文件，但是只使用同一个 URL 就可以提供给移动端定制化更强的网页，同时还大大节省了网络资源。
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<ul>
|
||||
<li><b>前端</b>（主要是JS），比如：
|
||||
<br>
|
||||
</li>
|
||||
<ul>
|
||||
<li>在 JavaScript 中实现两套逻辑，分别兼容键鼠、触摸设备</li>
|
||||
<li>通过 UA、特性检测 在前端做设备判断，对资源进行异步加载，渲染不同模版</li>
|
||||
<li>通过 特性检测 在前端做设备判断，使用不同的业务逻辑</li>
|
||||
<li>前端的模块化也可以帮助解决这个问题，比如针对不同的平台加载不同的模块</li>
|
||||
<li>……</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<br>
|
||||
<br>这下，我们的网站可以更牛逼的 <b>“响应”</b> 各个平台了。
|
||||
<br>（对，我还是称之为响应：这的确还是在<b>“响应”</b>啊 ，不是吗？）
|
||||
<br>
|
||||
<br>
|
||||
<br><b>但是等下……</b>
|
||||
<br>后端开发成本上去了，前端开发成本也上去了，配合着估计产品、设计资源也都上去了，<b>那我们为什么不干脆把 移动设备网站 和 桌面设备网站 分开呢！？</b>
|
||||
<br>
|
||||
<br>
|
||||
<br>是啊，如果你的需求真的都到这一步了，你的移动网站也应该可以被称作 WebApp 了。<b>这种时候，把移动设备网站彻底分开或许真的是更好的选择。</b>
|
||||
<br>
|
||||
<br>开发资源如此充足，你还可以让专门的团队来维护移动端的网站。
|
||||
<br>（嗯，BAT 就是这么干的）
|
||||
<br>
|
||||
<br>于是又一个概念来了：
|
||||
<br>
|
||||
<br>
|
||||
<ul>
|
||||
<li><b>独立的移动版网站</b> （按题主的话来说：手机和PC端分开来写）</li>
|
||||
</ul>不过，它有那么独立么？
|
||||
<br>我们知道，我们访问网站是通过 URL 来访问的。
|
||||
<br>将移动网站 和 桌面网站 分开，如果不使用 RESS 技术，往往也就意味着要维护两个URL（不同的二级域名）
|
||||
<br>难道我们要让所有桌面用户自觉访问 <a href="http://taobao.com" class=" external" target="_blank" rel="nofollow noreferrer"><span class="invisible">http://</span><span class="visible">taobao.com</span><span class="invisible"></span><i class="icon-external"></i></a> ，所有 移动用户 都自觉访问 <a href="http://m.taobao.com" class=" external" target="_blank" rel="nofollow noreferrer"><span class="invisible">http://</span><span class="visible">m.taobao.com</span><span class="invisible"></span><i class="icon-external"></i></a> ？
|
||||
<br>
|
||||
<br>不可能吧 ＝ ＝。
|
||||
<br>
|
||||
<br>于是，我们还是得依靠前端或服务器端的一次 <b>“响应”</b>（设备检测），做 URL 重定向，才能将不同设备的用户带到那个为他们准备的网站。
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br><b>所以其实在我看来，手机和PC端分开来写，只是 狭义响应式设计 的一种发展和延伸罢了。他们的界限没有，也并不需要那么清晰。</b>
|
||||
<br>
|
||||
<br>就如开题所引用的：
|
||||
<br>
|
||||
<blockquote><b>事实上，你可以认为如果一种设计不能兼顾两种平台的主要差别，就不能算是合格的响应式设计。</b>
|
||||
</blockquote><b>“而无论是用什么解决方案。” —— 这句是我补的。</b>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>故我的结论是：
|
||||
<br>
|
||||
<br><b>这不是一个二选一的问题，而是选择一个合适的度</b>（你的桌面版本代码与移动版本代码分离、耦合的程度）
|
||||
<br>
|
||||
<br>而这个度，则是由你的设计需求决定的。
|
||||
<br>而我们的需求原点其实也很简单：
|
||||
<br>
|
||||
<br> “<b>根据你的产品特点，进行两种不同的设计</b>”。
|
||||
<br>
|
||||
<br>
|
||||
<br>以上。
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
---
|
||||
layout: post
|
||||
title: "Ruby On Rails中gem Devise的使用"
|
||||
date: 2018-03-07 10:28:00
|
||||
author: "Viletyy"
|
||||
header-style: text
|
||||
tags:
|
||||
- Ruby
|
||||
- Rails
|
||||
- Gem
|
||||
---
|
||||
|
||||
[Devise](https://github.com/heartcombo/devise)是一套使用者认证(Authentication)套件，是Rails社群中最广为使用的一套。
|
||||
|
||||
#### Usage
|
||||
> 在gemfile中加入
|
||||
|
||||
```ruby
|
||||
gem 'devise'
|
||||
```
|
||||
|
||||
> 在终端输入
|
||||
|
||||
```shell
|
||||
$ bunlde install
|
||||
$ rails generate devise:install
|
||||
```
|
||||
|
||||
- 注：确保登陆能正常跳转。在config/route.rb中加入root地址
|
||||
|
||||
> 在layouts加入提示信息
|
||||
|
||||
```html
|
||||
<p class="notice"><%= notice %></p>
|
||||
<p class="alert"><%= alert %></p>
|
||||
```
|
||||
|
||||
> 生成views页面文件
|
||||
|
||||
```shell
|
||||
$ rails g devise:views
|
||||
```
|
||||
|
||||
> 生成使用devise的model
|
||||
|
||||
```shell
|
||||
$ rails g devise user
|
||||
$ rails db:migrate
|
||||
```
|
||||
|
||||
#### 定义多个authentication_keys
|
||||
|
||||
> 在model加入以下代码
|
||||
|
||||
```ruby
|
||||
attr_accessor :signin
|
||||
|
||||
def self.find_for_database_authentication(warden_conditions)
|
||||
conditions = warden_conditions.dup
|
||||
if signin = conditions.delete(:signin)
|
||||
where(conditions.to_h).where(["lower(username) = :value OR lower(mobile) = :value", { :value => signin.downcase }]).first
|
||||
elsif conditions.has_key?(:username)|| conditions.has_key?(:mobile)
|
||||
where(conditions.to_h).first
|
||||
end
|
||||
end
|
||||
```
|
||||
|
||||
> 在application_controller.rb中加入
|
||||
|
||||
```ruby
|
||||
before_action :configure_permitted_parametersod_name, if: :devise_controller?
|
||||
|
||||
def configure_permitted_parametersod_name
|
||||
devise_parameter_sanitizer.permit(:sign_in) {|u| u.permit(:signin,:username, :mobile, :password, :remember_me)}
|
||||
devise_parameter_sanitizer.permit(:sign_up) {|u|
|
||||
u.permit(:signin,:username, :mobile, :password, :password_confirmation)}
|
||||
end
|
||||
```
|
||||
|
||||
> 最后更改initialize/devise.rb
|
||||
|
||||
```ruby
|
||||
config.authentication_keys = [:signin]
|
||||
```
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
---
|
||||
layout: post
|
||||
title: "git常用命令"
|
||||
date: 2018-03-08 10:32:00
|
||||
author: "Viletyy"
|
||||
header-style: text
|
||||
tags:
|
||||
- Shell
|
||||
---
|
||||
|
||||
git是一个很强大的分布式版本控制系统。它不但适用于管理大型开源软件的源代码，管理私人的文档和源代码也有很多优势。
|
||||
|
||||
### Git常用操作命令
|
||||
|
||||
#### 远程仓库相关命令
|
||||
|
||||
检出仓库：$ git clone git://github.com/jquery/jquery.git
|
||||
|
||||
查看远程仓库：$ git remote -v
|
||||
|
||||
添加远程仓库：$ git remote add `name` `url`
|
||||
|
||||
删除远程仓库：$ git remote rm `name`
|
||||
|
||||
修改远程仓库：$ git remote set-url --push `name` `newUrl`
|
||||
|
||||
拉取远程仓库：$ git pull `remoteName` `localBranchName`
|
||||
|
||||
推送远程仓库：$ git push `remoteName` `localBranchName`
|
||||
|
||||
|
||||
> 如果想把本地的某个分支test提交到远程仓库，并作为远程仓库的master分支，或者作为另外一个名叫test的分支，如下：
|
||||
|
||||
```shell
|
||||
$ git push origin test:master // 提交本地test分支作为远程的master分支
|
||||
$ git push origin test:test // 提交本地test分支作为远程的test分支
|
||||
```
|
||||
|
||||
#### 分支(branch)操作相关命令
|
||||
|
||||
查看本地分支：$ git branch
|
||||
|
||||
查看远程分支：$ git branch -r
|
||||
|
||||
创建本地分支：$ git branch `name` ----注意新分支创建后不会自动切换为当前分支
|
||||
|
||||
切换分支：$ git checkout `name`
|
||||
|
||||
创建新分支并立即切换到新分支：$ git checkout -b `name`
|
||||
|
||||
删除分支：$ git branch -d `name` ---- -d选项只能删除已经参与了合并的分支，对于未有合并的分支是无法删除的。如果想强制删除一个分支，可以使用-D选项
|
||||
|
||||
合并分支：$ git merge `name` ----将名称为`name`的分支与当前分支合并
|
||||
|
||||
创建远程分支(本地分支push到远程)：$ git push origin `name`
|
||||
|
||||
删除远程分支：$ git push origin :heads/`name` 或 $ git push origin :`name`
|
||||
|
||||
> 创建空的分支：(执行命令之前记得先提交你当前分支的修改，否则会被强制删干净没得后悔)
|
||||
|
||||
```shell
|
||||
$ git symbolic-ref HEAD refs/heads/[name]
|
||||
$ rm .git/index
|
||||
$ git clean -fdx
|
||||
```
|
||||
|
||||
#### 版本(tag)操作相关命令
|
||||
|
||||
查看版本：$ git tag
|
||||
|
||||
创建版本：$ git tag `name`
|
||||
|
||||
删除版本：$ git tag -d `name`
|
||||
|
||||
查看远程版本：$ git tag -r
|
||||
|
||||
创建远程版本(本地版本push到远程)：$ git push origin `name`
|
||||
|
||||
删除远程版本：$ git push origin :refs/tags/`name`
|
||||
|
||||
合并远程仓库的tag到本地：$ git pull origin --tags
|
||||
|
||||
上传本地tag到远程仓库：$ git push origin --tags
|
||||
|
||||
创建带注释的tag：$ git tag -a `name` -m 'yourMessage'
|
||||
|
||||
#### 子模块(submodule)相关操作命令
|
||||
|
||||
添加子模块：$ git submodule add [url] [path]
|
||||
|
||||
> 如：$git submodule add git://github.com/soberh/ui-libs.git src/main/webapp/ui-libs
|
||||
|
||||
初始化子模块：$ git submodule init ----只在首次检出仓库时运行一次就行
|
||||
|
||||
更新子模块：$ git submodule update ----每次更新或切换分支后都需要运行一下
|
||||
|
||||
删除子模块：（分4步走哦）
|
||||
- $ git rm --cached [path]
|
||||
- 编辑“.gitmodules”文件，将子模块的相关配置节点删除掉
|
||||
- 编辑“ .git/config”文件，将子模块的相关配置节点删除掉
|
||||
- 手动删除子模块残留的目录
|
||||
|
||||
#### 忽略一些文件、文件夹不提交
|
||||
在仓库根目录下创建名称为“.gitignore”的文件，写入不需要的文件夹名或文件，每个元素占一行即可，如
|
||||
|
||||
target
|
||||
bin
|
||||
*.db
|
||||
|
||||
|
||||
#### Git 常用命令
|
||||
git branch 查看本地所有分支
|
||||
|
||||
git status 查看当前状态
|
||||
|
||||
git commit 提交
|
||||
|
||||
git branch -a 查看所有的分支
|
||||
|
||||
git branch -r 查看本地所有分支
|
||||
|
||||
git commit -am "init" 提交并且加注释
|
||||
|
||||
git remote add origin git@192.168.1.119:ndshow
|
||||
|
||||
git push origin master 将文件给推到服务器上
|
||||
|
||||
git remote show origin 显示远程库origin里的资源
|
||||
|
||||
git push origin master:develop
|
||||
|
||||
git push origin master:hb-dev 将本地库与服务器上的库进行关联
|
||||
|
||||
git checkout --track origin/dev 切换到远程dev分支
|
||||
|
||||
git branch -D master develop 删除本地库develop
|
||||
|
||||
git checkout -b dev 建立一个新的本地分支dev
|
||||
|
||||
git merge origin/dev 将分支dev与当前分支进行合并
|
||||
|
||||
git checkout dev 切换到本地dev分支
|
||||
|
||||
git remote show 查看远程库
|
||||
|
||||
git add .
|
||||
|
||||
git rm 文件名(包括路径) 从git中删除指定文件
|
||||
|
||||
git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来
|
||||
|
||||
git config --list 看所有用户
|
||||
|
||||
git ls-files 看已经被提交的
|
||||
|
||||
git rm [file name] 删除一个文件
|
||||
|
||||
git commit -a 提交当前repos的所有的改变
|
||||
|
||||
git add [file name] 添加一个文件到git index
|
||||
|
||||
git commit -v 当你用－v参数的时候可以看commit的差异
|
||||
|
||||
git commit -m "This is the message describing the commit" 添加commit信息
|
||||
|
||||
git commit -a -a是代表add，把所有的change加到git index里然后再commit
|
||||
|
||||
git commit -a -v 一般提交命令
|
||||
|
||||
git log 看你commit的日志
|
||||
|
||||
git diff 查看尚未暂存的更新
|
||||
|
||||
git rm a.a 移除文件(从暂存区和工作区中删除)
|
||||
|
||||
git rm --cached a.a 移除文件(只从暂存区中删除)
|
||||
|
||||
git commit -m "remove" 移除文件(从Git中删除)
|
||||
|
||||
git rm -f a.a 强行移除修改后文件(从暂存区和工作区中删除)
|
||||
|
||||
git diff --cached 或 $ git diff --staged 查看尚未提交的更新
|
||||
|
||||
git stash push 将文件给push到一个临时空间中
|
||||
|
||||
git stash pop 将文件从临时空间pop下来
|
||||
|
||||
---------------------------------------------------------
|
||||
git remote add origin git@github.com:username/Hello-World.git
|
||||
|
||||
git push origin master 将本地项目给提交到服务器中
|
||||
|
||||
-----------------------------------------------------------
|
||||
git pull 本地与服务器端同步
|
||||
|
||||
-----------------------------------------------------------------
|
||||
git push (远程仓库名) (分支名) 将本地分支推送到服务器上去。
|
||||
|
||||
git push origin serverfix:awesomebranch
|
||||
|
||||
------------------------------------------------------------------
|
||||
git fetch 相当于是从远程获取最新版本到本地，不会自动merge
|
||||
|
||||
git commit -a -m "log_message" (-a是提交所有改动，-m是加入log信息) 本地修改同步至服务器端 ：
|
||||
|
||||
git branch branch_0.1 master 从主分支master创建branch_0.1分支
|
||||
|
||||
git branch -m branch_0.1 branch_1.0 将branch_0.1重命名为branch_1.0
|
||||
|
||||
git checkout branch_1.0/master 切换到branch_1.0/master分支
|
||||
|
||||
du -hs
|
||||
|
||||
#### 创建git仓库并同步到github
|
||||
----------------------------------------------------------
|
||||
```shell
|
||||
mkdir WebApp
|
||||
cd WebApp
|
||||
git init
|
||||
touch README
|
||||
git add README
|
||||
git commit -m 'first commit'
|
||||
git remote add origin git@github.com:virus1996/WebApp.git
|
||||
git push -u origin master
|
||||
```
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: "My Spacemacs Workflow"
|
||||
date: 2019-09-08 12:00:00
|
||||
subtitle: 'From Vim to Spacemacs'
|
||||
author: "Hux"
|
||||
header-style: text
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ description: "「离开世界之前 一切都是过程」"
|
|||
</div>
|
||||
</a>
|
||||
<p class="post-meta">
|
||||
Posted by {% if post.author %}{{ post.author }}{% else %}{{ site.title }}{% endif %} on {{ post.date | date: "%B %-d, %Y" }}
|
||||
Posted by {% if post.author %}{{ post.author }}{% else %}{{ site.title }}{% endif %} on {{ post.date | date: "%Y-%m-%d %H:%M" }}
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
|
|
|
|||
Loading…
Reference in New Issue