mac下网页中文字体优化
最近某人吐槽某门户网站在mac下chrome字体超丑,然后发现虽然现在mac用户越来越多,但是大家依然无视mac下的字体差异,于是研究了下mac下网页中的中文字体,和大家分享。 mac和windows自带的字体非常不一样,所以,针对windows的font-family设置一般不适用…
构建现代化网站的 20 个技巧
在过去几年中,我们与web开发者花了很多时间交流,听得最多的一件事情就是创建一个能很好的跨越各种类型浏览器版本与各种设备的网站有多么难。我们为jQuery项目写代码的时候一直有这个问题。因此我们整理了20条编码模式与经验,它们是从出席无休止的会议和…
给网页设计师和前端开发者看的前端性能优化
如果不是不可能,你也很难拒绝承认性能目前已是任何正规网站项目的最关键方面之一,无论它是一个小型的网站组合,一个移动优先的web应用,一直到一个大规模的商业项目。研究,论文和个人体验都告诉我们快速是最好的。 性能不仅仅是非常重要,它也相当的有…
模块化高扩展性的前端框架 KISSY
介绍 伴随着淘宝的快速发展,诞生已三年多的 KISSY 也取得了巨大的成长。 目前应用于阿里集团的多个业务团队,特别是淘宝,天猫,一淘的绝大多数业务都采用了 KISSY, 满足了从前台的 web page 到后台的 web app 再到移动端应用(起步阶段)的广泛需求。 …
CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲…
自定义Twitter Bootstrap 样式
自从一年前Twitter推出Bootstrap以来,它的推广程度就像火箭发射一样节节攀升。这个广受欢迎的CSS框架为众多网站提供了响应式网格系统,预定义样式的组件与JavaScript插件。 Bootstrap的设计初衷之一就是实用。当你要新建网站时,Bootstrap绝对是一个节约…
可缺省的CSS布局
一、技术不难、意识很难 有些东西的东西的实现,难的不是原料、技术;而是想不到,或者说意识不到。 例如下面这个简单而又神奇的魔术: 是吧。搞通了,才发现,哦~原来这么回事,很简单的嘛,我也可以实现的!其实,简单吗?不简单,很难,难在你想不到…
10个步骤让你成为高效的Web开发者
要成为高产、高效的 Web 开发者,这需要我们做很多工作,来提高我们的工作方式,以及改善我们的劳动成果。 下面是 10 个提高效率的步骤,虽然不能保证解决你在开发中的所有问题,但至少是非常实用的,可以简化你的 Web 开发流程,使开发的每一个环节快速、…
CSS 中的分离、抽象和层叠
摘要:LESS和Sass(或者类似方案)从三个方面解决了css存在的问题:分离,抽象和层叠。当我在接受他们时,我发现css还有一些其他问题需要解决。在这里我提出些解决方案。 介绍 有很多充分的理由说明LESS和Sass的用途。css很难做到可维护性。LESS和Sass(类似…
构建现代化网站的20个技巧
在过去几年中,我们与web开发者花了很多时间交流,听得最多的一件事情就是创建一个能很好的跨越各种类型浏览器版本与各种设备的网站有多么难。我们为jQuery项目写代码的时候一直有这个问题。因此我们整理了20条编码模式与经验,它们是从出席无休止的会议和…
hasLayout IE的问题总结
这篇文章是一个总结haslayout的文章。 更新:haslayout在ie8的标准模式下已经被废弃了,但是在ie7的兼容版本以及以下的版本是仍然存在的。 什么是haslayout? MSIE 有一个很早很早,过时的渲染引擎 Mosaic . 在表格布局的时代。几乎是所有的元素(除了内…
网易财经前端开发经验总结
作为门户网站的前端,有许多说不出的苦楚: 有些代码虽然自己也看不下去,但还是不得不硬着头皮把页面给拼上去,比如跟其他频道公用的部分: 因为是公用,js、css必须写在该部分,调用的js库(网易的很多频道头部都调用了两个大同小异的js库)等都身不由己。…
使用Continuous painting mode来分析页面的绘制状态
查看页面的渲染时间 我们采用Things We Left On The Moon by Dan Cederholm的页面来作为我们的例子页面。 打开Chrome的Web Inspector(即按F12),选择Timeline页卡,并且上下滚动页面(页面滚动,浏览器发生重绘)。你会看到一堆垂直的时间线,鼠标点击每…
渐进式jpeg(progressive jpeg)图片及其相关知识
一、基本JPEG(baseline jpeg)和渐进JPEG 网络上那些色色的照片都是.jpg格式的(“色色”指的是色彩斑斓的意思)。 不知诸位有没有注意到,这些jpg格式的图片在呈现的时候,有两种方式,一种是自上而下扫描式的,还有一种就是先是全部的模糊图片,然后逐渐清…
如何构建你第一个Javascript 框架
对JQuery的技巧感到好奇?想知道Dojo是如何实现的?觉得Mootools不可思议?在这篇教程里,我们将探寻框架背后的秘密,然后试着自己动手建立一个你所喜爱的框架的简易版本。 我们几乎每天都在使用各种各样的JavaScript框架。当你刚入门的时候,方便的DOM(…