• 2018 年 2 月 15 个有意思的 JavaScript 和 CSS 库

    Posted by : lon.y@qq.com on 2018年2月28日

    我们在Tutorialzine上的任务就是让你了解最新最酷的Web发展趋势。这就是为什么我们每个月都会发布一些我们偶然发现并认为值得你关注的最佳资源的缘由。 Direction Reveal (方向展示) 该插件检测光标进入或离开块时的方向,允许你使用各种酷炫特效和过渡。它提供了一些开箱即用的CSS动画,让你可以轻松创建自己的CSS动画。 Carbon Carbon允许你创建并分享代码组成的美丽图像。你所需要做的就是将你的代码粘贴到编辑器中,或直接自己编写

    阅读全文...

  • webpack 4正式发布,速度最高可提升98%

    Posted by : lon.y@qq.com on 2018年2月28日

    代号: _Legato 今天我们愉快的宣布 webpack 4(Legato)正式发布了!你可以使用 yarn 或者 npm 获得它: $> yarn add webpack --dev 或者 $> npm i webpack --save-dev 为什么叫 Legato? 首先我们会开始一个新传统:为我们以后的每个大版本设定代号!因此,我们决定将命名这个特权给予我们最大的 OpenCollective 捐赠者:trivago! 当我们向其发出请求后他们是

    阅读全文...

  • 年度最佳 JavaScript 和 CSS 开源库推荐!

    Posted by : lon.y@qq.com on 2018年2月23日

    Tutorialzine 每个月都会公布一次当月新增的 JS 和 CSS 库。2018 新年之际,该网站整理出了 2017 年最受用户欢迎和喜爱的一些 JS 和 CSS 库,供大家学习和参考。 JavaScript 本地存储库 localForage localForage 是一个 JavaScript 库,提升了应用程序的离线体验,通过使用异步的数据存储,提供简单的类似 localStorage 的 API,允许开发者存储多种类型数据。 CSS3 驱动的

    阅读全文...

  • 现代 CSS 进化史

    Posted by : lon.y@qq.com on 2018年2月13日

    CSS一直被web开发者认为是最简单也是最难的一门奇葩语言。它的入门确实非常简单——你只需为元素定义好样式属性和值,看起来似乎需要做的工作也就这样嘛!然而在一些大型工程中CSS的组织是一件复杂和凌乱的事情,你更改页面上任意一个元素的一行CSS样式都有可能影响到其他页面上的元素。 为了解决CSS错综复杂的继承问题,开发者建立了各种不同的最佳实践,问题是哪一个最佳实践是最好的目前尚无定论,而且有些实践相互之间是完全矛盾的。如果你第一次尝试学习CSS,这对于你来

    阅读全文...

  • CSS3 动画卡顿性能优化解决方案

    Posted by : lon.y@qq.com on 2018年2月7日

      最近在开发小程序,与vue类似,它们都有生命周期这回事。 onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区,不过项目在磕磕绊绊中完成的差不多了,但是遇到了CSS3动画渲染的性能问题,所以我也是被逼的,再回过头来从浏览器渲染网页的流程出发,去找动画卡顿的症结。 浏览器渲染网页的流程如下: 使用 HTML 创建文档对象模型(DOM) 使用 CSS 创建 CSS 对象

    阅读全文...

  • 使用 CSS 追踪用户

    Posted by : lon.y@qq.com on 2018年1月21日

    除了使用 JS 追踪用户,现在有人提出了还可以使用 CSS 进行网页追踪和分析,译者认为,这种方式更为 优雅,更为 简洁,且 不好屏蔽,值得尝试一波,了解更多,可查看 仓库地址 和 demo 我们可以用它来做什么 我们可以收集关于用户的一些基本信息,例如 屏幕分辨率(当浏览器最大化时)以及用户使用的什么浏览器(引擎) 此外,我们可以监测用户是否点击某个链接或鼠标悬停在某个元素上,用来 追踪用户悬停的链接,甚至可以 追踪用户如何移动鼠标(在页面使用不可见的字

    阅读全文...

  • display 的 32 种写法

    Posted by : lon.y@qq.com on 2018年1月18日

    你知道『回』字有四种写法,但你知道display有32种写法吗?今天我们一一道来,让你一次性完全掌握display,从此再也不用对它发愁。 从大的分类来讲,display的32种写法可以分为6个大类,再加上1个全局类,一共是7大类: 外部值 内部值 列表值 属性值 显示值 混合值 全局值 外部值 所谓外部值,就是说这些值只会直接影响一个元素的外部表现,而不影响元素里面的儿子级孙子级元素的表现。 display: block; 这个值大家不陌生,我们最熟悉的

    阅读全文...

  • 前端小知识:为什么你写的 height:100% 不起作用

    Posted by : lon.y@qq.com on 2018年1月9日

    为什么你写的height:100%不起作用? 这个知识不算冷门的,但是用的时候可能还是会有些懵逼,不能生效时搜一搜就能找到答案了,但是你真的懂了吗?为什么想要设置一个全屏元素的时候,高度不受%的控制? 1.百分比宽高的设定 按照w3c中的width和height属性,可以明确%设定宽高是根据父元素的宽高来的: http://www.w3school.com.cn/cs… http://www.w3school.com.cn/cs… 2.width:100%

    阅读全文...

  • 8 个帮助你编写可维护、精简化前端代码的 CSS 策略

    Posted by : lon.y@qq.com on 2018年1月5日

    写基本的 CSS 和 HTML 是入门 Web 开发首先需要学习的事情之一。然而我遇到的很多程序显然没有真正的花时间去考虑前端开发的长期性和可维护性。 我认为这主要是因为很多开发者在组织他们的 CSS/HTML 和 JavaScript 时没有深入地理解相关的策略。 对于我和我们团队来说,最重要的事情写可维护的前端代码。虽然我们有好几个客户一直合作多年,但一定要记住,你永远不会是在某个应用程序的唯一开发者。你的一次性代码和配置仅仅对你有意义,这并不意味着它

    阅读全文...

  • 欲练JS,必先攻CSS——前端修行之路

    Posted by : lon.y@qq.com on 2018年1月5日

      今天我讲的主题是css,具体聊一下我大概的css学习历史,分享一些干货,希望这次分享对大家有所启发和帮助。 个人的css历史: 说说自己的css学习的历史,12年,当时是老师手把手1对1教我div+float的固定布局,所有元素全部用float,做了学生会网站的全部前端页面,因为有段时间学PS比较多,也是自己做的UI,很丑,老师说第一次做成这样很不错了,那时老师就觉得我有做前端的天赋,我就是从这个时候开始接触前端的。毕业设计自己一个人做了一个全栈的we

    阅读全文...