分类目录归档:前端技术

Designer & Developer Frontend — Web前端技术

MAC OS中安装最新的node的express框架,不能用命令行问题解决

正常情况是通过如下命令来安装express

sudo npm install express -g

但是发现安装完后输入如下命令,不能执行

Ben@Ben-Macbook:~$ express -v
-bash: express: command not found

经查询才发现,express4.0以后没有bin文件了,所以可以有如下两个办法解决:

1. 更换express版本为低版本,如下命令:

sudo npm install express@3.0.6 -g

2.安装express-generator,如下

sudo npm install express-generator
#不过要注意,安装成功后要把用户目录的node_modules/.bin/路径添加到PATH,才可以使用

 

amcharts 3 破解

1. 下载后,将amcharts.js通过JS解压工具解压缩

2. 要破解的地方在 大约1750行

	brrr: function() {
		var a = this.product,
			b = a + ".com",
			c = window.location.hostname.split("."),
			d;
		2 <= c.length && (d = c[c.length - 2] + "." + c[c.length - 1]);
		AmCharts.remove(this.bbset);
		if (d == b) {
			var b = b + "/?utm_source=swf&utm_medium=demo&utm_campaign=jsDemo" + a,
				e = "chart by ",
				c = 145;
			"ammap" == a && (e = "tool by ", c = 125);
			d = AmCharts.rect(this.container, c, 20, "#FFFFFF", 1);
			e = AmCharts.text(this.container, e + a + ".com", "#000000", "Verdana", 11, "start");
			e.translate(7, 9);
			d = this.container.set([d, e]);
			"ammap" == a && d.translate(this.realWidth - c, 0);
			this.bbset = d;
			this.linkSet.push(d);
			d.setAttr("cursor", "pointer");
			d.click(function() {
				window.location.href = "http://" + b
			});
			for (a = 0; a < d.length; a++) d[a].attr({
				cursor: "pointer"
			})
		}
	},

【转】值得收藏的14款响应式前端开发框架

前端开发并不是一个容易的工作,不仅需要掌握HTML、CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站。如今随着响应式设计的流行,前端开发变得越来越困难,且花费的时间更长。

本文收集了14个响应式前端开发框架,可以帮助前端开发人员大大简化开发过程。针对每个框架,文中均指出了它所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系统。

使用这些前端框架,有如下好处:

 

  • 跨浏览器。这一点已被证实。
  • 一致性。UI组件,如导航、按钮、标签、表单、下拉框、表格……,在设计上保持风格一致。
  • 快速开发。你可以快速、容易地构建布局。这些框架都配有详细的说明文档。
  • 响应式。所有CSS组件及JavaScript插件可以很好地从桌面过渡到移动设备上。

 

InK


Ink为一个界面工具包,用于快速开发Web界面,具有易于使用、易于扩展特点。它可以为构建布局提供解决方案,可以展示普通的界面元素,可以实现以内容为中心、对用户友好的交互方式。

 

  • HTML&CSS:布局、导航、排版、图标、表单、提示框、表格
  • JS:Gallery、表格、树视图、排序列表、日期选择插件、制表符、表单验证及一些行为(停靠、折叠、关闭)
  • 其他:Sass Mixins

 

GroundworkCSS Beta


GroundworkCSS是一个基于Sass预处理器的开源项目 ,主要用于快速构建响应式Web应用程序。拥有一个灵活的、可嵌套的网格系统,可以创建适应多种浏览设备的布局。GroundworkCSS还提供多种UI 组件,如导航、按钮、图标、表单、Tabs、对话框、工具提示等等。

 

  • HTML&CSS:网格、布局、排版、按键、标题、表单、图标、社交图标、响应式文本、对话框、工具提示
  • JS:导航、制表符(Tab)、提示框、Cycle2
  • 其他:Sass Mixins

 

Ivory


这是一个灵活、强大的响应式Web框架,使Web开发更快速、更简单。

 

  • HTML&CSS:网格、排版、表单、按钮、提示框、页码、面包屑导航(breadcrumb)、列表、表格
  • JS:提示框、制表符(Tab)、切换开关(Toggle switch)、折叠

 

ZURB


Foundation由ZURB公司设计,ZURB是一家产品设计公司,位于加州坎贝尔。Foundation为最先进的响应式前端开发框架,它拥有很多布局模板、CSS样式表及自己开发的优秀JavaScript插件。

 

  • HTML&CSS:网格、布局模板、图标字体、响应式表格、SVG格式的社交图标、页码、面包屑导航(breadcrumbs)、侧导航、按键、排版、标签、提示框、面板、价格表、进度栏、表格、缩略图
  • JS:下拉按钮、拆分按钮、转换开关、Flex视频、灯箱、下拉、响应式布局(通过转换图片大小来实现)、旅游导航、麦哲伦全局导航(Magellan Sticky Nav)、Orbit图片滑动幻灯片插件等
  • 其他:可定制皮肤表单(Custom Skinned Forms)、SCSS Mixin

 

Grumby


Gumby 2基于Sass开发。Sass为功能强大的CSS预处理器,利用它可以快速开发Gumby。

 

  • HTML&CSS:网格、表单、按钮、导航、标签、Entypo图标
  • JS:下拉、浮窗、制表符(Tab)、开关与转换(Toggles & Switches)
  • 其他:可定制皮肤表单(Custom Skinned Forms)、SASS和Compass

 

HTML KickStart


该框架集合了HTML5、CSS和JavaScript,帮助开发人员快速开发Web产品。它覆盖了所有UI组件,同时也包含一些有用的JavaScript插件。

 

  • HTML&CSS:网格、排版按钮、列表、表格、图标、面包屑导航、图片、表单
  • JS:菜单、代码高亮插件、制表符(Tab)、幻灯片播放、表单验证
  • 其他:CSS帮助文档

 

Maxmertkit


Maxmertkit拥有完整的文档,包含大量实例,并且提供了拖拽生成代码的功能。

 

  • HTML&CSS:网格、布局、徽章、按钮、表单、图标、标签、菜单、进度栏、表格、下拉、工具提示
  • JS:按钮、旋转木马、通知、弹出框、滚动条、制表符(Tab)
  • 其他: Sass、Coffee脚本语言

 

Twitter Bootstrap


大家对Twitter Bootstrap已十分熟悉了。凭借全面的UI组件、易用的网格和组件,Bootstrap已成为众多设计者和开发者最喜欢的快速开发工具。现在已经有很多第三方Bootstrap程序和JavaScript插件可供使用。

 

  • HTML&CSS:网格、布局、排版、编码、表格、表单、按键、图片、图标、按钮组、导航、面包屑导航、页码、标签、徽章、缩略图、提示框、进度栏
  • JS:模态窗口(Modals)、提示效果(Tool Tips)、“泡芙”效果(Popovers)、滚动监控(Scrollspy)、旋转木马(Carousel)、输入提示(Typeahead)等等。
  • 其他:定制器(Customizer)、 LESS CSS

 

Skeleton


Skeleton 是一个小的JS和CSS文件集合,可帮你快速开发漂亮的网站,适合各种屏幕设备,包括手机。Skeleton基于960 Grid开发,是一个UI框架。

 

  • HTML&CSS:GRid、排版、按钮、表单、媒体查询(Media Queries)

 

Kube


Kube是一款最小化的,支持响应式的前端框架,包括一个简洁的CSS文件,用于方便地创建响应式布局,包括了两个JS文件来完成Tab以及页面的按钮操作。

 

  • HTML&CSS:排版、网格、表单、表格、按钮、导航、图标
  • JS:按钮、制表符(Tab)
  • 其他: LESS CSS

 

Helium


Helium是一个前端响应式Web框架,使用HTML5、CSS3快速制作原型以及开发产品。Helium很像Twitter Bootstrap和ZURB Foundation,事实上,Helium使用了两者不少的代码。但与这两个框架不同的是,Helium设计更加轻量级,而且更容易修改。Helium只有30KB左右,而Bootstrap有100KB,ZURB有200多KB。

 

  • HTML&CSS:网格、按钮、排版、表单
  • JS:下拉、表单验证
  • 其他:Sass、Compass

 

The Markup Framework


Markup是一套集布局、小组件、UI组件和字体排版样式为一体的框架。它可以作为你设计自己网站的起点。

 

  • HTML&CSS:布局、网格、排版、表单、按钮、面包屑导航、导航列表、导航菜单
  • JS:没有JavaScripts,只有单纯的CSS

 

Topcoat


TopCoat是一套免费的开源UI元素类库,整套类库不使用任何JavaScript,而是使用CSS和HTML来生成。

 

  • HTML&CSS:图标、字体、按键、面包屑导航、表单、下拉、滑动开关、选择、滚动条、切换按钮
  • JS:没有JavaScripts,只有单纯的CSS

 

PureCSS


Pure是一个相当小的框架,压缩及最小化后仅有5.7KB。它没有使用任何JavaScript,只是HTML和CSS。该CSS框架为响应式布局,采用模块化结构,每个模块的样式可以单独使用。

 

  • HTML&CSS:网格、排版、表单、按键、表格、菜单
  • JS:没有JavaScripts,只有单纯的CSS
  • 其他:程序皮肤制作工具(Skin Builder)、YU 库。

 

结论

根据你的需要,选择可以与设计相匹配的框架。我们不应该根据框架来构建网站,因为它会很大程度上限制设计者的思维。

如果前端设计/布局不是那么重要,那么我们可以选择使用某一框架。

原文来自:queness.com

[转]40 个实用的 Mac OS X Shell 脚本和终端命令

这里有一堆的 Mac OS X 下的终端命令,我将这些命令进行了简单的分类,这里很多命令在其他系统(Windows、Linux)一样有效,特别是 Linux/Unix。希望这些命令对你有帮助。

系统

重启 Mac OS X:

shutdown - r now

关闭 Mac OS X:

shutdown now

电源管理/省电

获取当前电源管理设置的信息

pmset -g

设置显示器无活动15分钟后关闭

sudo pmset displaysleep 15

让计算机在无活动30分钟后休眠

sudo pmset sleep 30

OS X 外观

禁用仪表盘(别忘了将仪表盘 Dock 图标拖动出来)

defaults write com.apple.dashboard mcx-disabled -boolean YES
killall Dock
启用仪表盘
defaults write com.apple.dashboard mcx-disabled -boolean NO
killall Dock

强制 Finder 程序显示隐藏文件

defaults write com.apple.finder AppleShowAllFiles TRUE

强制 Finder 程序不显示隐藏文件

defaults write com.apple.finder AppleShowAllFiles FALSE

网络

ping 某个主机

ping -o oschina.net

使用 traceroute 诊断到某个主机的路由节点

traceroute oschina.net

检查某个主机是否运行 HTTP 服务,或者检查某网站是否可用

curl -I www.oschina.net | head -n 1

管理 Windows 网络(相当于 Windows 下的 NET 命令),该命令有很多选项,运行下面命令来查看这些选项

man net

使用 dig 来诊断域名信息

dig www.oschina.net A
dig www.oschina.net MX

查看谁正在登录到你的 Mac 机器

w

显示系统路由表

netstat -r

显示活动网络连接

netstat -an

显示网络统计

netstat -s

故障诊断

列表所有打开的文件

lsof

重启 Bonjour – 当网络中没有 Mac 时很有用

sudo launchctl unload /System/Library/LaunchDaemons/com.apple.mDNSResponder.plist
sudo launchctl load /System/Library/LaunchDaemons/com.apple.mDNSResponder.plist

弹出 CD (注意不一定是 disk1)

diskutil eject disk1

文本操作命令

经常你需要从剪切板或者文件中获取某些文本,并对这些文本进行转换和使用,这里列举的命令都是跟文本处理相关的

统计剪贴板中文本的行数

pbpaste | wc -l

统计剪贴板中文本的单词数

pbpaste | wc -w

对剪贴板中的文本行进行排序后重新写回剪贴板

pbpaste | sort | pbcopy

对剪贴板中的文本行进行倒序后放回剪贴板

pbpaste | rev | pbcopy

移除剪贴板中重复的文本行,然后写回剪贴板

pbpaste | sort | uniq | pbcopy

找出剪贴板中文本中存在的重复行,并复制后写回剪贴板(包含重复行的一行)

pbpaste | sort | uniq -d | pbcopy

找出剪贴板中文本中存在的重复行,并复制后写回剪贴板(不包含重复行)

pbpaste | sort | uniq -u | pbcopy

对剪贴板中的 HTML 文本进行清理后写回剪贴板

pbpaste | tidy | pbcopy

显示剪贴板中文本的前 5 行

pbpaste | head -n 5

显示剪贴板中文本的最后 5 行

pbpaste | tail -n 5

将剪贴板中文本里存在的 Tab 跳格符号转成空格

pbpaste | expand | pbcopy

其他有用的命令

A:

htpasswd -nb username password

B:

AuthType Basic
AuthName "restricted area"
AuthUserFile /path/to/your/site/.htpasswd
require valid-user

显示终端窗口中之前输入的命令

history

将文件转成 HTML,支持格式包括 Text, .RTF, .DOC.

textutil -convert html file.extension

Nano 是一个很简单易用的文本编辑器,可用于快速更改文本文件,比 vim 功能弱很多,但很方便

nano [file_to_edit]

在 nano 编辑器中,可使用 ctrl+o 来保持,ctrl+x 来退出。

清理终端显示的内容

clear

iTunes 相关

更改 iTunes 链接行为为本机 iTunes 库,而不是 iTunes Store

defaults write com.apple.iTunes invertStoreLinks -bool YES

更改 iTunes 链接行为为 iTunes Store,而不是本机 iTunes 库

defaults write com.apple.iTunes invertStoreLinks -bool NO

div、p、td 的强制不换行及强制换行

关于强制不换行、强制换行的话题在网上已经被讨论了无数次,但都不够全面,没有充分考虑各种浏览器、各种标签等情况,以致不兼容,所以再来说说。由于 div 和 p 在本文的讨论中,效果相同,所以省略 p。

文中“没有指定宽度的 td”是指:为 table 指定了宽度,但没有给 td 指定宽度。

强制不换行

div, td { white-space:nowrap; }

这点在 Firefox 的 div 和 td 中,以及 IE 的 div 中,均没有问题。在 IE 的 td 中却很复杂:

如果没有为 td 指定宽度,则上述代码仍然有效。
如果为 td 指定了宽度,并且文字中无标点、无空格,上述代码不再有效。可以加 word-break:keep-all; 解决,这是 CSS3 的内容,不过是 IE 最先提出的,所以 IE6 中也支持。
如果为 td 指定了宽度,并且文字中有标点或空格。可以在文字与 td 之间套一层 div 加以解决。

综合起来,为了简单,使用:

div { white-space:nowrap; }

只是为了兼容 IE 的 td 的不同情况,在文字与 td 之间套一层 div。

强制换行

强制换行是为了遇到一些超长的连续字符串(比如 aaaaaaaaaaaaa)时不撑大布局。

div, td { word-break:break-all; }

word-wrap:break-word; 兼容性不够广,所以我们使用的是 word-break:break-all;。上述代码兼容于 IE、Chrome 的 div、指定宽度的 td、没有指定宽度的 td,非常不错,遗憾的是 Firefox 中不支持这个属性,所以无效果,为了不让其挤乱表格,可以加 overflow:hidden 来凑合着解决。

知其然知其所以然

上面介绍了三种属性:

white-space : normal | nowrap word-wrap : normal | break-word word-break : normal | break-all | keep-all

white-space

空白的处理方式,不止两个属性值,但在 IE6 中只支持这两个,所以不介绍其他的。

normal 多个连续英文空格压缩为一个英文空格显示,在空白处可换行。
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。

word-wrap

内容超过容器边界时是否断开转行。

normal 允许(只是允许,不是必须)内容顶开指定的容器边界。
break-word 内容将在边界内换行。

word-break

换行的方式。

normal 英文在标点和空白处换行,中文在任何地方换行。
break-all 英文和中文都在任何地方换行,比如从一个英文单词的中间拆开换行。
keep-all 英文和中文都在标点和空白处换行。兼容多浏览器的 div、p、td 强制不换行及强制换行

查看chrome插件源码的方法【转】

最终效果如图:

Chrome扩展的开发新手常常苦于没有合适的源代码作参考,偶尔找到一个扩展拥有自己想实现的功能,但作者却没提供任何开发信息,只好埋头在官方文档和少有的开源扩展里慢慢寻觅。

但现在有一个当即破解crx,查看扩展源代码材料的扩展出现了:Extension Gallery Inspector

Chrome为扩展开发者提供的API正变得越来越丰富,前些天还刚新添了右键菜单API

但伴随而来的除了更多的创意解放更多的神奇功能外,还有愈发严重的用户隐私问题:现在通过浏览器的API,扩展可以深入了解你的历史记录、cookies甚至文件系统的信息。因此,在安装前用这工具瞄一眼扩展权限,对保护自己隐私也有很大帮助。Chrome扩展安装以后可以直接在User Data内查看源代码,不过当然还是直接用这个扩展观看顺手:D

如何让 Firefox,Chrome,Safari 浏览器模拟 iPad User Agent

在给 iPad 做的网页进行测试的时候,有时候需要在 PC 上模拟 iPad User Agent 去访问网页,今天就介绍下如何让 Firefox,Chrome,Safari 浏览器模拟 iPad User Agent。

iPad User Agent

首先 iPad 的 User Agent:

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

Safari 浏览器

首先到 偏好设置 > 高级选项,确保“在菜单栏中显示开发菜单”选中。
然后到 开发 > 用户代理,选择 Mobile Safari 3.2.2 — iPad

Chrome 浏览器

打开 cmd,然后进入 Chrome 安装目录(C:\Users\xxxx\AppData\Local\Google\Chrome SxS\Application\chrome.exe)。
然后在 cmd 输入命令:

chrome.exe -user-agent="Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10"

Firefox 浏览器

下载一个 User Agent Switch 的插件
安装之后,点击 工具 > Default User Agent > Edit User Agent,添加一个 iPad 的 User Agent。

User Agent 上面有了。
App Code Name 输入:iPad。
App Name 输入:Mobile Safari
App Version 输入:5.0 (Macintosh; en-US)

IE 浏览器

哈哈,没有可能,即使有可能,你也不会傻到用 IE 浏览器来测试了。

Console详解

console.log(object[, object, ...])

在控制台输出一条消息。如果有多个参数,输出时会用空格隔开这些参数。

第一个参数可以是一个包含格式化占位符输出的字符串,例如:

console.log("The %s jumped over %d tall buildings", animal, count);

上面的例子可以用下面的无格式化占位符输出的代码替换:

console.log( " The " , animal,  " jumped over " , count,  " tall buildings " );

并且,这两种方式是可以组合使用的。如果使用了格式化占位符,而提供的参数的个数多于占位符的个数,那么,多余的参数会以空格分隔的方式附加在字符串后面,就像:

console.log( " I am %s and I have: " , myName, thing1, thing2, thing3);

如果参数是一个Javascript对象,那么在控制台输出的就不是静态文字,而是一个可交互的超链接,点击超链接可以查看该对象的HTML, CSS, Script, DOM窗口,可用格式化字符串%o代替Javascript对象。

console.log( " Body tag is %o " , document.body);

格式化字符串列表:

格式化字符串 类型
%s 字符串
%d, %i 整型(暂不支持数字型)
%f 浮点型 (暂不支持数字型)
%o 链接对象

console.debug(object[, object, ...])
在控制台输出一条消息,包含一个指向代码调用位置的超链接。假如是直接在控制台输入该命令,就不会出现超链接(和console.log()一样)。

console.info(object[, object, ...])
在控制台输出一条带有“信息”图标的消息和一个指向代码调用位置的超链接。

console.warn(object[, object, ...])
在控制台输出一条带有“警告”图标的消息和一个指向代码调用位置的超链接。

console.error(object[, object, ...])
在控制台输出一条带有“错误”图标的消息和一个指向代码调用位置的超链接。

console.assert(expression[, object, ...])
测试表达式expression是否为真。如果不是真,会在控制台写一条消息并抛出异常

console.dir(object)
以列表形式输出一个对象的所有属性,有点和你查看DOM窗口相类似。

console.dirxml(node)
输出一个HTML或者XML元素的XML源代码。和你在HTML窗口看到的相似。

console.trace()
Prints an interactive stack trace of JavaScript execution at the point where it is called.

The stack trace details the functions on the stack, as well as the values that were passed as arguments to each function. You can click each function to take you to its source in the Script tab, and click each argument value to inspect it in the DOM or HTML tabs.

console.group(object[, object, ...])
输出一条消息,并打开一个嵌套块,块中的内容都会缩进。调用console.groupEnd()关闭块。该命令可以嵌套使用。

console.groupEnd()
关闭最近一个由console.group打开的块。

console.time(name)
创建一个名字为name的计时器,调用console.timeEnd(name)停止计时器并输出所耗时间(毫秒)。

console.timeEnd(name)
停止同名的计时器并输出所耗时间(毫秒)。

console.profile([title])
打开Javascript性能测试开关。可选参数title会在打印性能测试报告时在报告的开头输出。

console.profileEnd()
关闭Javascript性能测试开关并输出报告。

console.count([title])

Writes the number of times that the line of code where count was called was executed. The optional argument title will print a message in addition to the number of the count.