Web应用的组件化（一） 基本思路 1. 为什么要做组件化？ 无论前端也好，后端也好，都是整个软件体系的一部分。软件产品也是产品，它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润的，在产品目标确定的情况下，成本有两个途径来优化：减少部署成本，提高开发效率。 减少部署成本的方面，业界研究得非常多，比如近几年很流行的“去IOE”，就是很典型的，从一些费用较高的高性能产品迁移到开源的易替换的产品集...
近日对谷歌扩展以及应用很感兴趣，于是研究了下官方文档，特写此文记录一下，若有错误，敬请指教，如需转载，请说明出处。 1.技术需求 怎么用html css javascript这些前端技术来编写一个桌面应用，说到这，不得不说谷歌浏览器这款伟大的产品，其自行开发的V8引擎大大提升了javascript在chrome中的执行效率，甚至可以将谷歌浏览器想象成一个操作系统，而chrome app则是运行在其上的应用。chrome app开发十分迅速，是一个非常好玩...
说起桌面应用，想必大家使用过的就已经海了去了。什么暴风影音、QQ、skype之类的，早已不是新鲜事！不过大家有没有了解过如何编写一个桌面应用？历史上，我们都有哪些方式去编写桌面应用呢？ 实际上，桌面应用的历史并不算久远，不去查找各种资料，仅凭记忆，我能想到的曾经出现过的桌面应用编写语言就有： C++、 Delphi、 VB、 winForm、 WPF、 swing、 awt、 QT、 flash、 Objective-C、 Swift...或许还有更多。 学习成本...
一、用的少并不代表没有用 至少，在我接触的这么多项目里，没有见到使用过CSS direction属性做实际开发的。 为什么呢？是因为 direction 长得丑吗？ 虽然说 direction 确实其貌不扬，但是CSS并不是一个看脸卖萌的世界。 那是因为兼容性吗？ 那更不是了，在那个“美女”确实是美女的年代，包括IE6在内的浏览器，CSS direction 就已经被支持。 Chrome Safari Firefox ...
当我们考虑一些单页应用的时候（SPAs），一般考虑浏览器，JavaScript和速度，对搜索引擎是不可见的。由于单页应用使用JavaScript来渲染页面中的内容，同时web网络爬虫不通过浏览器来查看整个网页，这样就不能看到和索引页面中所有的内容。或者，更好的说，其中大部分是不能。一些开发人员试图以各种方式来解决这个问题。 在服务器端使用Node.js在客户端使用React，我们可以构建通用的JavaScript应用程序。这可以从服务器端和浏览...
最近对一些css很感兴趣。样式表的知识原理很容易被忽视，而且因为看似简单，所以更容易忘记。所以写下来咯~ box-shadow 这个东东，看起来好像很简单，就是阴影嘛！但是到底怎么用？是个神马规律？来来来，跟本猿一起学习一下。先看一个有意思的应用~ 这个月亮里面的阴影，是用box-shadow画的，很神奇吧。 box-shadow画圆.png 中间的一个圆，是靠下面两件事画的 绝对定位一个div (.moon:after)...
分类：WEB前端时间： 2015年8月19日 heX项目由有道团队发起，使用HTML5与Node.js构建桌面应用解决方案。heX跟node-webkit 基本是差不多的，提供了一种全新的构建桌面应用的方式，可以使用web技术快速构建跨平台的桌面应用。heX 基于CEF并且融合了 Chromium 与 Node.js，所以我们可以在 web页面中使用各种Node.js原生模块及第三方扩展，同时在这些模块及扩展中还可以访问到HTML中的DOM元素。 1. 下载 heX 二进制包...
ae做侧边栏菜单 今天要说的是ae表达式中的index，index应用在文字的动画中，请看下图： index在css中是用来表示元素在z轴上的层级的， 在ae中是用来表示图层编号的，如下图： 用好index可以帮助我们提高效率，并且能帮助我们精确的控制每一层动画。 由于是说index的应用，所以其他方面这里不做说明，有兴趣的可以下载源文件。 下面是简单的步骤： 1、输入文字 “我的作品”，将其居中对齐， 把锚点左...
在这个系列文章中，我们将演示如何手工渗透测试web应用程序而不使用自动化工具。世界上大多数公司都非常关注对web应用程序的手工测试，而不是运行web应用程序扫描器——因为它会限制你的知识和技能，影响在测试中寻找漏洞的视野。 在整个系列文章中，我将使用下面的程序： NOWASP Mutiliadae BURP Proxy NOWASP Mutiliadae NOWASP Mutiliadae是一个包含了40多个漏洞的web应用程序。它包括OWASP的to...
盒子模型的应用 *{ margin: 0px; padding: 0px;}.top{ width: 100%; height: 50px; background-color: black;}.top_content{ width: 75%; height: 50px; margin: 0px auto; background-color: blue;}.body{ margin: 20px auto; width: 75%; height: 1500px; background-color: blanchedalm...
微软已经发布了面向Windows 10 PC / Mobile双平台的HTML编辑器应用，尽管目前仍处于Alpha阶段，但它已支持编写HTML、CSS、PHP、JavaScript代码，并有许多辅助工具来帮助你提升效率。如果你曾经想过边走边不停地调试优化代码，现在微软已经帮你提供了一个实现的方法。你可以打开现有文件或新建一个，通过OneDrive加载或保存——意味着你可以从任何支持的设备上这么做。 该编辑器有如下几项重要特性： ...
原文： Packaging for Performance 杰微刊 兼职译者缪晨翻译， 杰微刊 审校及发布。 最近有个很有趣的主题，是关于web应用的静态资源（JS/CSS）打包的。 在当今前端界Craig Silverstein’s 和 Rebecca Murphey’s 在这个主题上的几篇文章表现出了对打包本质的深刻理解。现在面对的主要问题是：JavaScript与CSS的打包策略（基于现有最佳性能的实践）在迁移到HTTP/2的时候是否需要做一些改变？虽然在HTTP/2中打...
这篇文章发布于 2016年05月18日，星期三，01:07，归类于css相关。 阅读 65 次, 今日 65 次 byzhangxinxu from http://www.zhangxinxu.com 本文地址： http://www.zhangxinxu.com/wordpress/?p=5380 要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的 box-shadow , 第二个就是使用CSS3的 filter 阴影滤镜 drop-shadow ，那这两个阴影实现有什么具体的差异呢？ 一、兼容性不...
发表于 2016-05-18 10:22:15 阅读量(0) 发表于 2013 年 12 月 12 日 由 sisiyu an aria-label属性 正常情况下，会在表单里给input组件指定对应的label，当用户tab到输入框时，读屏软件就会读出相应label里的文本。 如：用户名： 当没有给输入框设计对应的label文本的位置时，aria-label属性为组件指定内置的文本标签。它不在视觉上呈现。 如：<input type=”text” aria-label=”用户名” /> ...
上一篇介绍了flex弹性盒子的语法，本篇用flex来实际布局一下。例如我们以前会用inline-block或float配合%百分比来实现自适应的三列等高布局。但margin / padding计算起来比较复杂，加加减减维护起来很麻烦。用flex弹性盒模型就简单多了。 首先弄出原始的HTML结构，左右侧边栏定宽220px * { margin: 0; padding: 0; }#header, #footer { width: 100%; }#left, #right { width: 220px; }header main left...