my blog my blog

Category: 网络杂记
网络杂记
namecheap给力，域名转移$3.98

 

如题，仅限近日，namecheap域名转移，价格法3.98刀

地址：http://www.namecheap.com

优惠码：NCMYDD

有paypal就可以了，信用卡也木有问题，没太多限制，很棒。

奶牛 | 2014年02月5日
Android 网络杂记
分享下最近使用的Android应用

 

1.谷歌拼音输入法

不得不承认，google的拼音输入法现在做得很棒，特别是有了滑词输入，记得以前都是英文输入法才有的功能，现在谷歌拼音输入法也有了，很方便，输入效率也挺高的感觉，多熟悉下很好用。

2.pushbullet

文件传送，Android IOS还有desktop browser都可以支持，firefox和chrome都有插件，很方便，可以互通文件。

3.solo Launcher + solo weather

启动器和天气，比较喜欢solo launcher的滑动效果，很方便，性能也挺不错的，比较流畅。

4.滑动短信

原生短信的替代品，滑动效果，很棒

5.fuubo

@碎星iKe 的微博客户端作品，很棒，滑动的手感很方便，而且极简风格让人非常喜欢。

6.绿色守护

休眠软件，对于很多后台运行的程序都可以很好的休眠掉，避免后台占用。

奶牛 | 2014年01月26日
Linux Windows 网络杂记
steam客户端启动选项

 

就是steam启动时候的一些启动项啦，没太多内容，记录下。

  • -login – Bypass the Steam login window by entering your login information
  • -tcp – Launches Steam with the TCP protocol rather than the UDP protocol
  • -clearbeta – If you have opted into a Steam client public beta, opts out and returns Steam to the current official release.
  • -silent – Launches Steam to the system tray only. Normal Steam windows will only appear after clicking the system tray icon. If a password is not stored, the normal login window will still be displayed.
  • -login – 登录方式，可以用 -login username password 方式登录
  • -tcp – 使用tcp协议启动替代默认的udp协议
  • -clearbeta -清除测试信息
  • -silent – 静默启动，不会弹出窗口，直接启动到最小化的图标。

 

奶牛 | 2014年01月4日
Windows 网络杂记
使用Razer Game Booster加速你的CS GO等FPS游戏

 

很久没更新blog了，前两个月都在外地学习，没拿电脑，也就过了两个月没有电脑的日子，还行，没多少念想。

今天说的Razer Game Booster是windows下的程序，razer做的，主要功能就是关闭多余的进程和服务从而提升fps游戏的性能，特别是帧数的提升还是比较明显的。

下载地址：http://cn.razerzone.com/gaming-software/gamebooster

奶牛 | 2013年12月11日
网络杂记
顺丰快递的桌面版软件用户体验那叫差劲儿

 

先说密码，竟然注册密码还没登录就提示必须更换密码，简直就是一坑。

登录之后下单完成后，订单也取货了，结果查询的时候竟然没了，还要手动输入订单号。

界面啥的就不多说了，烦人的是每次都提示完善个人信息，没用过这么烂的桌面软件，顺丰的印象哇，大打折扣。

奶牛 | 2013年10月5日
建站心得 网络杂记
流式网格布局宽度控制的处理到响应式布局

 

最近写了个小企业站，使用的是BootStrap的fluid layout流式布局，自己的笔记本分辨率是1333×768的，所以页面设计在本机测试没什么问题，但是交付的时候发现人家说在小分辨率上太难看了，然后就得解决，其实说来也简单，就直接用min-width来作控制即可。最简单的方案就是在css中这样子设置

     
  1. html,body{ 
    2.  
  2.     min-width:1333px; 
    3.  
  3. } 
    4.

这样子处理完成后，可以保证页面的最小宽度为1333px，理论上页面就不会走形了，而这个min-width是css2的，所以兼容性肯定也可以保证。但是，从这里，可以引申联想到一些设计时候需要注意的问题。

1.低分辨率的设备访问时候，是否可以根据分辨率自适而不是单纯的用最小宽度来控制。

2.对于移动设备的访问时候，是否可以根据不同的分辨率有不同的排版甚至部分内容的显示隐藏控制。

好吧，响应式，对响应式设计。

默认的BootStrap是没有加入响应式的css的，需要手动引用，官方doc中是这样子描述的

     
  1. Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. 
    2.  
  2. If you've compiled Bootstrap from the Customize page, you need only include the meta tag. 
    3.  
  3.  
    4.  
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    5.  
  5.     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 
    6.  
  6.  
    7.  
  7. Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. 
    8.  
  8. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed. 
    9.

就是说，需要手动引用两行代码到head标签中。第二行引用就不说了，是引用的响应式的css文件，第一行引用需要说下，这是对viewport的说明。宽度与设备的宽度相适应，缩放默认比例为1。当然content还可以有其它内容

     
  1. width：viewport 的宽度，可以指定为一个像素值，如：600，或者为特殊的值，如：device-width （设备的宽度）。 
    2.  
  2. height：viewport的高度。 
    3.  
  3. initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。 
    4.  
  4. maximum-scale：允许浏览者缩放到的最大比例，一般设为1.0。 
    5.  
  5. minimum-scale：允许浏览者缩放到的最小比例，一般设为1.0。 
    6.  
  6. user-scalable：浏览者是否可以手动缩放，yes或no。  
    7.

这样子就引入了BootStrap的响应式css了。到了这里还没有完，我们应该去关注下这个响应式的css是怎么具体实现的响应式功能。打开css文件后你会发现最大的不同是该css文件中引用了很多@media，对，这就是Media Queries啦，Media Queries也是css3的一个重要功能，它提供了对不同的设备分辨率进行适配的功能。

Media Queries的格式如下：

     
  1. @media 设备类型 and (设备特性) { 样式代码 } 
    2.

其中的设备类型有：

     
  1. 1、all：所有设备 
    2.  
  2. 2、screen ：电脑显示器 
    3.  
  3. 3、print：打印用纸或打印预览视图 
    4.  
  4. 4、handheld：便携设备 
    5.  
  5. 5、tv：电视机类型的设备 
    6.  
  6. 6、speech：语意和音频盒成器 
    7.  
  7. 7、braille：盲人用点字法触觉回馈设备 
    8.  
  8. 8、embossed：盲文打印机 
    9.  
  9. 9、projection：各种投影设备 
    10.  
  10. 10、tty：使用固定密度字母栅格的媒介，比如电传打字机和终端 
    11.

然后就是设备特性了，这个设备特性跟viewport很相似

     
  1. 1、width：浏览器宽度 
    2.  
  2. 2、height：浏览器高度 
    3.  
  3. 3、device-width：设备屏幕分辨率的宽度值 
    4.  
  4. 4、device-height：设备屏幕分辨率的高度值 
    5.  
  5. 5、orientation：浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape。 
    6.  
  6. 6、aspect-ratio：比例值，浏览器的纵横比. 
    7.  
  7. 7、device-aspect-ratio：比例值，屏幕的纵横比. 
    8.  
  8. 8、color：设备使用多少位的颜色值，如果不是彩色设备，值为0 
    9.  
  9. 9、color-index：色彩表的色彩数 
    10.  
  10. 10、monochrome：单色帧缓冲器每个像素的字节 
    11.  
  11. 11、resolution：分辨率值，设备分辨率值 
    12.  
  12. 12、scan：电视机类型设备扫描方式，progressive或interlace 
    13.  
  13. 13、grid：只能指定两个值0或1 
    14.

其中呢，设备类型是可以忽略掉不必须写的，默认应该是all。像BootStrap的响应式css中就是用如下的格式来进行css定义的

 

     
  1. /* Large desktop */ 
    2.  
  2. @media (min-width: 1200px) { ... } 
    3.  
  3.   
    4.  
  4. /* Portrait tablet to landscape and desktop */ 
    5.  
  5. @media (min-width: 768px) and (max-width: 979px) { ... } 
    6.  
  6.   
    7.  
  7. /* Landscape phone to portrait tablet */ 
    8.  
  8. @media (max-width: 767px) { ... } 
    9.  
  9.   
    10.  
  10. /* Landscape phones and down */ 
    11.  
  11. @media (max-width: 480px) { ... } 
    12.

如果需要对范围进行一个界定的话可以使用and关键词。这样子就可以完成对不同的分辨率的设备进行单独的布局设置调整了。在BootStrap中还有一点是比较不错的，它支持.visible-phone、.visible-tablet、.visible-desktop、.hidden-phone、.hidden-tablet、.hidden-desktop这几个属性来对不同的设备进行定义是否显示某些模块。

最近要是有空就写个小响应式的demo玩儿玩儿~~~酱说我的文章分类有点儿乱，其实，我也是这么觉得的，很多事儿都该条理下了~

奶牛 | 2013年08月17日
建站心得 网络杂记
用七牛云储存作CDN提升网站加载速度

 

最近写了一个小型静态企业站，为了测试方便就直接用了七牛云储存，因为是静态页面，所以所有的页面文件素材都放七牛上就可以了，页面的载入速度还是比较理想的，比直接用国内主机应该要好一些，至少不会宕机吧。今天咱就说说这两年开始流行的CDN。

以前也用过cloudflare、CDNZZ的产品，对于国外主机的站点还是有一定效果的。CDN通过抓取全站的静态资源，当访问者发出DNS请求的时候，cdn的dns服务器就对请求的资源进行相应的线路选择，线路优化后加载速度就会得到一定的提升。作为静态页面来说，除去.html文件的加载，剩下的就是加载css、js以及图片资源了。其实，如果直接不使用CDN的话，将css、js以及图片资源都放在譬如七牛云储存这样的地方也是可以的，只要将这些资源设置为外链的方式即可，同样可以起到很好的作用。

引用外部资源必然就需要引用外部的域名，这个可能会增加一个域名的解析时间，奶牛以前的做法是把所有的js资源都置在本地，好处是不用害怕网络不连通造成的网站页面走形。现在随着云储存的发展，完全可以把这些资源置于外部储存来解决。而且浏览器的并发现在也都蛮不错的，基本上并发出去对小型的静态页面就可以很快的抓取回所有内容。

再说说七牛，七牛的云储存在路径方面还是挺新颖的，因为貌似就没有路径的概念，只是把资源作为整体，用key value的方式进行储存，使用命名中带有/来作为分割目录。感兴趣的朋友可以测试下，并且七牛有同步的程序，配置好conf就直接用同步来放置静态页面即可。七牛每月送10G的流量，这个对于普通的静态资源来说，流量也不算小了，所以今天推荐下。

点此免费注册七牛云储存

 

奶牛 | 2013年07月28日
建站心得 网络杂记
JavaScript操作浏览器Cookie

 

最近在构思一个企业站建设的中英文页面问题，想到双语，我觉得两种方法实现起来比较好，一种是ajax直接把数据调用过来，但是对于有很多个div块儿的像首页这种的页面的话，可能要有几个ajax请求，所以，我觉得还是使用预先在页面的html中填写后通过cookie来控制比较方便。

使用cookie定义一个language的项，使用cn/en来区分语言，在页面的class中添加cn/en作为区分中文英文的标志，这样子，需要中文英文切换的时候，直接调用jQuery就可以方便的搞定了。

     
  1. $('.cn').hide(); //关闭中文 
    2.  
  2. $('.en').show(); //开启英文 
    3.  
  3. $('.en').hide(); //关闭英文 
    4.  
  4. $('.cn').show(); //开启中文 
    5.

默认情况下显示中文，在页面载入完成后对页面进行cookie的判断，判断是否有定义，如果没有定义就不管了，如果有定义language项，那么就通过js控制启用cookie记录的语言。当页面浏览的时候，监视页面的语言选择按钮，这样子，在切换语言的同时将对应的cookie记录下来，并设置一个较为长久的过期时限即可。对于cookie的操作呢，使用js的document.cookie也可，也可以使用轻量级封装的类库jquery.cookie，当然咯，还是类库方便一些，通过api直接查直接用，但是对于cookie的理解还需要知道两点的：

  1. cookie默认是以session为周期的，会话结束，cookie亦失效。 
  2. cookie可以设置过期日期的（常用的记住密码就是用这个实现） 
  3. cookie的删除操作其实就是将cookie的过期日期设置在过去，然后cookie就自动失效删除了 

剩下的就不多说了，直接去https://github.com/nenew/jquery-cookie 拿类库来用吧，要不复杂结构的cookie手动拆析分离太麻烦了。

奶牛 | 2013年07月22日
网络杂记
暑假快结束的节奏哇

 

首先我得承认，我老大不小了。虽然才刚大学毕业。

第二个，工作已经基本落实。不要问我在哪儿工作，干什么工作，我自己都不知道是什么工作呢，反正估计跟我的老本行计算机或者网络相关的行业距离较远吧，不过也没啥不好的，至少现阶段看着比较稳定，可以有正常的作息了，可以不用每天对着电脑，可以调节一下自己的身体了，让自己健康一些，现在很明显的亚健康状态。

第三，最近还不算太忙，只是得看驾照考试的科目1，然后最近估计就会通知什么时候上班，本来还打算自己接点儿活儿什么的充实一下暑假的，现在看来算了吧。PHP又是只看了个开头，又没看下去，《Android应用开发攻略》连头都没开好就扔那儿了。说好的做个设计师的项目也没落实，现在酱的节奏跟我有些不一致哇，然后我的geekrss.com也是一直没做，好吧，我都在干什么哇这几天。

最近很喜欢steam平台，特别是那个market，可以搞一搞，搞好了以后买游戏都可以不用花钱了，可以通过market倒卖赚钱，不过steam的税太高了，15%呢，有点儿纠结，前阵子上的东西都因为summer holiday促销给挤压上了，各种被压价。今天入了个Portal2 （传送门2），感觉游戏设计确实很有新意，而且自己还是比较喜欢这种解密类型的游戏的，至少可以益智下，总玩儿竞技游戏太疲惫了，遇到坑的队友就被坑死，很伤感。Dota2今天卸了，没硬盘空间了。

计划：

1.先把科目1搞定，之后的科目23都应该不会太成问题，毕竟是男孩子嘛，学个车能有多难去。

2.该升级下自己的电脑装备了，显示器因为报驾校花了小4k有点儿心疼了，一直没舍得从家里拿钱去买，看看要不要等工作了再买。还想自己组一个台式机，但是，好吧，工作之后。

3.人脉，该维护的得维护起来了，该建立的把握好机会建立起来，社会就应该是这样子，要融入更多的圈子，结实更多的人才行哇。

4.暑假快结束了，让我在这样放肆地无忧无虑地睡几天吧。

奶牛 | 2013年07月17日
网络杂记
没状态

 

没状态，什么东西都看不进去，是不是得再睡几天啊？

奶牛 | 2013年07月6日