本篇文章是一篇Vue.js的教程，目标在于用一种常见的业务场景——分页/无限加载，帮助读者更好的理解Vue.js中的一些设计思想。与许多Todo List类的入门教程相比，更全面的展示使用Vue.js完成一个需求的思考过程；与一些构建大型应用的高阶教程相比，又更专注于一些零碎细节的实现，方便读者快速掌握、致用。 需求分析 当一个页面中信息量过大时（例如一个新闻列表中有200条新闻需要展示），就会产生问题，例如： ...
这是25学堂从haorooms博客转载过来的一篇非常有用的css单位的博文，特别是对于想要学习移动H5开发的小伙伴来说，是一篇很干的干货。 第一部分移动H5开发入门知识：CSS单位介绍和用法 说到css的单位，大家应该首先想到的是px,也就是像素，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单...
产品开发，体验先行。由于软件产品开发的成本比较高，所以在开发之前，往往先由目标用户来验证产品创意的价值，而最高效的方法就是通过高保真交互原型进行测试。 天下武功，唯快不破。在日新月异的互联网市场，产品经理必须迅速评估创意，挑选具有潜力的点子。常规的做法是：各个页面的静态效果图评审通过之后，立即交给开发人员评估高保真交互原型的开发工作量，评估的结果往往是需要两三天，甚至两三周的开发时间。 本文介...
最近我学到了一种很酷的技术，使用CSS3的 steps() 动画属性来生成PNG背景动画。这种技术的主要功能是利用铺贴PNG背景图的方式“重现”GIF图的动画效果。 我的朋友都知道，年轻时候我非常痴迷《街头霸王》游戏，而当我看到了 这个素材 ….你知道我的脑子里想到了什么吗？ 观看演示 让我们来做出第一个CSS动作 首先我们要实现的是直拳(就是下面图案中的第三个)。第一步是打开Photoshop，抠出这几个图，这些图...
总体原则 缩进 对于所有编程语言，我们要求缩进必须是软tab（用空格字符）。在你的文本编辑器里敲 Tab 应该等于 4个空格 。 可读性 vs 压缩 对于维护现有文件，我们认为可读性比节省文件大小更重要。大量空白和适当的ASCII艺术都是受鼓励的。任何开发者都不必故意去压缩HTML或CSS，也不必把Javascript代码最小化得面目全非。 我们会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件，例如CSS和...
字体设置 使用无衬线字体 body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;} iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878)， 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁。 Heiti SC Light 黑体-简 细...
前端开发工程师实际上是负责IT系统工程的，实际上就是负责信息化系统的设计、建设，包括设备、系统、数据库、应用系统的建设的。说白了，你前期就是个做网页的，但是后期会慢慢变得越来越厉害，自己写网站，做各种动画游戏不再话下，喜欢哪个女生，分分钟在网页上给你画出来花。会了这些害怕追不到妹子么?是不是很流弊? 等你进入公司后，一般来说都是这么分工的： 1.产品需求: 由产品经理给出需求文档 2.项目设计: ...
一、记录下几种盒子居中的方法： 1.0、margin固定宽高居中； 2.0、负margin居中； 3.0、绝对定位居中； 4.0、table-cell居中； 5.0、flex居中； 6.0、transform居中； 7.0、不确定宽高居中(绝对定位百分数)； 8.0、button居中。二、代码演示(html使用同一个Demo)： html Demo：<body><div id="container"><div id="box"></div></div> </body>1.0、margin固定宽高居中(演示) 这种定位方法纯粹是靠宽高和margin拼出来的，不是很灵活。...
开篇语 最近接手了一个移动端的项目。个人感觉是自己做得比较快而且比较健壮的一个。。。移动端最主要就是页面要适用不同的手机屏幕，ipad等。下面就分享一些技巧,让你不依赖任何框架高效地搭建自己的项目。 一、样式按组件或板块分文件写再合成 ①设置各种变量 采用scss或者less来写css代码有很多好处。这里就不详细说。 我们拿到设计图的第一步，就是要分析各个页面之间有哪些模块、哪些样式、哪些颜色是一样的。一般情况下，为了...
渲染应该从最开始当页面布局被定义时就进行优化，样式和脚本在页面渲染中扮演着非常重要的角色。专业人员知道一些技巧以避免一些性能问题。 这篇文章不会深入研究浏览器的技术细节，而是提供一些通用的原则。不同浏览器引擎工作原理不同，这就使特定浏览器的学习更加复杂。 浏览器是怎样渲染一个页面的？ 我们从浏览器渲染页面的大概过程开始说起：由从服务器接收到的 HTML 形成 DOM（文档对象模型）。 样式被加载和解析，形成 CSS...
前端开发知识点大纲： HTML&CSS：对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、Flexbox、移动端适应。 JavaScript：数据类型、运算、对象(面向对象)、Function、继承、闭包、作用域、插件、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、跨域、前端MVC、路由、模块化、Canvas、ECMAScript 6、N...
在 Usersnap，我们在能很好的组织网站开发有超过20(总和)年的经验。我们认为这些过去的经验能让我们很好的分辨出什么是好、坏和丑陋的网站开发。如今我们不想把注意力放在消极的部分，但就这一次，我们将把以往不好的地方做一下总结。1.将20个关键点用邮件发出去将20个关键点邮件发给别人，列出所有的bug、功能需求和别人被拒绝的要求，是和商品一样的问题。通常他们会带来指责或者类似“为什么你不解决掉$XY这个问题？我五个周之前...
*:first-child {margin-top: 0 !important; }body>*:last-child {margin-bottom: 0 !important; }/* BLOCKS =============================================================================*/p, blockquote, ul, ol, dl, table, pre {margin: 15px 0; }/* HEADERS =============================================================================*/h1, h2, h3, h4, h5, h6 {margin: 20px 0 10px;padding: 0;font-weight: bold;-...
最近开始学习并且使用，发现使用它写起css来真的是各种爽安装sass，compasssass是依赖于ruby的，必须先安装Ruby，点击下载 下载完ruby之后，使用命令行安装sass gem install sass 使用命令，sass-v compass-v 查看是否安装成功出现上图情况则为安装成功sass的使用及优点sass官网： http://www.w3cplus.com/sassguide/ api文档 http://sass-lang.com/documentation/file.SASS_REFERENCE.html sass功能：定义变量,数值...
对于一份工作，你可能专注于修炼自己的内功，会在不自觉中忽视软技能。硬技能决定你是否能得到工作，而软技能能够表明你是否适合这份工作和适应工作环境等。所有的公司都有属于自己的文化，并努力将这些文化传承下去，所以他们必须确保每一位新员工能够适应这个环境。许多硬技能很容易获得并可很快的提高，而软技能由于和你性格等联系紧密，可想要改变他们是一件很困难和缓慢的事情。这里有七个核心的软技能，适用于大多数的企业，...