资讯专栏INFORMATION COLUMN

参加第三届Css conf of China后的个人回顾

tinylcy / 2400人阅读

摘要:是一维布局,是二维布局,经常在实际应用场景中会结合应用,而且的灵活性高,在年已经提案给裕波说,大概在明年的月份,已经可以大面积使用了。

时间:2016.12.17

地点:广州 天虹宾馆会议中心

主持人:裕波

主办方:W3C、w3ctech、前端圈

演讲嘉宾:
1、Mathias Bynens
2、大漠
3、勾三股四
4、廖洧杰
5、罗正烨
6、方潇仪
7、倪栩生
8、陈剑鑫
9、Wenting Zhang

内容:

一、第一场,前Opera 开发者 Mathias Bynens带来的《3.14 Things I Didn"t Know About CSS》,全程飙英语,怪我英语太差,仅仅能够吸收零星点点,我所听到的大概就是一些css不为人所知的小技巧,让我印象最深的就是:用.class.class代替!important看我demo:

html

感谢W3C、w3ctech、前端圈组织的第三届Css conf of China!

css

.pre .bar{
    color:red;
}
.bar{
    color: blue;
}

结果是:

想让.bar字体显示蓝色,其实有很多种方法,例如加个id,或者important,提高css解析的优先级就可以,今天 Mathias Bynens提出了用.class.class代替!important的方式,如图:

css改为:

.pre .bar{
    color:red;
}
.bar.bar{
    color: blue;
}

结果为:

接下来Mathias Bynens还介绍了一些关于font-family 字体名之间空格的注意,css without html,以及CSS Expressions in IE<=7 或 IE<=10,IE"s legacy documet modes,How to aviod CSS expression vulnerabilities,还讲到了xss攻击的一些手段,好吧~后面内容我已经搜尽我的英语词库,没怎么听明白了~sorry

附上css without html的截图:

Mathias Bynens个人博客:https://mathiasbynens.be/

二、第二场是淘宝的CSS专家大漠带来的《CSS Grid Layout》,刚开始大漠就自黑了自己一下,说自己说着一口流利的胡建话,又说自己的不会JS的CSS专家(不管你信不信,反正我不信哈哈哈哈~),大漠介绍了布局的发展历史,从初始table布局,随后的浮动布局,再到现在flexbox,还有即将普及的Grid Layout。
期间介绍了Grid Layout的功能和用法,以及和flexbox的区别,以及,如何和flexbox的结合应用。flexbox是一维布局,Grid Layout是二维布局,经常在实际应用场景中会结合应用,而且Grid Layout的灵活性高,在2010年已经提案给W3C,裕波说,大概在明年的9月份,已经可以大面积使用了。看来我们是时候学习Grid Layout了~

三、第三场是勾股的闪电分享,我还想问为何叫闪电分享,原来是勾股要在短时间速度分享。勾股带来的是weex的框架中css in native,以及一些特性(如支持 PostCSS),还有就是weex将来还会支持某些特性,以及现场展示了weex做出来的native端的demo,最后勾股也特别说明了最近 Weex 加入 Apache 基金会的事,说现在是进入孵化阶段,然后...我也不知道忘记说了什么了,实在太闪电了。
个人附上weex的介绍:
用vue写的Native框架,用来写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。(类似react-native)

四、第四场是台湾友人廖洧杰带来的《Sass & CSS Design Pattern》,一口流利的台湾腔口音,讲的是:CSS工程化和设计模式,以及sass的趋势与局限,表达了一些自己团队平时所遇到的问题,以及自己常用的解决工具和方案,还有命名规则和对大家平时写代码的规范性和意识的统计。重点是领导者从整个项目的高度去考量,不同角色和团队,眼里的职能和能力范围,团队协作需要注意的东西。

五、第五场是三位来自微信前端的工程师,分别是罗正烨、方潇仪、倪栩生,第一位罗正烨大神主要介绍了svg是什么,相比png的灵活性,以及实用性,svg的优点有:颜色靓,质量高,尺寸小,可以动。缺点是:渲染有点迟缓(但是在实际测试中,所需时间还是可以接受的)。并介绍了基于插件模式构建,基本上所有的优化都是一个分离的插件--svgo。第二位方潇仪大神简直是一位女中豪杰,分享了svg的动画实现,对了我这种不懂svg动画的孩子,收获很大的,大致明白了svg的动画渲染经过。介绍了一个前端开发工作流工具:webflow,一个svg的js框架:snap.svg.js,还有svg的滤镜等等,干货满满!最后一位倪栩生主要介绍的是微信网页重构实践,以及网页中信息的一些实现方案。

六、第六场是来自UC的陈剑鑫 ,介绍了从矩阵走入 WebGL 世界,解析了具体的图形效果,是由底层矩阵算法如何实现的,例如transform ,rotateXYZ,rotate3D,解释一把计算机图形学,如何用算法实现,让我仿佛回到了上大学的线性代数+计算机图形学+上机课,大概就是关键词是:坐标,着色,视角移动。并且现场展示了VR/AR技术。

七、最后一位,来自Adobe Typekit的用户体验设计师Wenting Zhang,同时也是CSS ICON 和 underline.js的作者。不得不说,国外的女程序员,太全能了,技术实在屌屌的。全程掌声不断,一开始就现场演示了,如何画一个小胡子的icon,仅仅只用了十分钟,仅用一个element就把icon画出来,思路清晰流畅到飞起,先向我们普及了一个标签元素具有的两个伪类:before和:after,和一个box-shadow的属性,总结一下,就是一个元素总共有三个矩形可用,以及用box-shadow可做多个矩形用。不到10分钟效果如下:

随后还现场继续展示如何将这个小胡子动起来,变成一个小胡子的动画效果。
随后介绍了自己的画的icon,并免费开源给大家,以及icon相关的animation效果,链接为:http://cssicon.space/

最后附上大会重要嘉宾,以及举办方的合照:

以上谨代表个人见解,有不当之处,或若涉及图片隐私或者其它问题,烦请指正。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115427.html

相关文章

  • PyCon China 深圳站精彩回顾(附PPT及视频)

    摘要:月日,第六届大会在深圳召开。这是这次大会的第二站活动,第一站已在上海成功举办。深圳站视频及,请在公众号后台回复,获取分享链接。据介绍,目前支持多种开发库,如内置和等。该协议的推出,是为了统一标准,提高效率。 本文为 PyChina 和「编程派」联合首发,作者为 EarlGrey。「编程派」是一个专注 Python 学习交流的微信公众号。 9 月 25 日,第六届 PyCon China...

    lykops 评论0 收藏0
  • 深js, jsconf China 回顾

    摘要:参与情况第一天赶上了时间晚上聚餐没去第二天赶飞机提前退场关于的几个分项没有在场微信群几乎全程参与并且大部分时间在维护气氛阴差阳错两天都没上错过了推广机会公司展位准备不充分连续两年的问题需要注意印象深的演讲百度上的很赞而且在上对付鼠标事件我很 参与情况 第一天赶上了时间, 晚上聚餐没去 Nodebot 第二天赶飞机提前退场, 关于 React 的几个分项没有在场 微信群几乎全程参与, ...

    csRyan 评论0 收藏0
  • Laravel Conf China 2019 之 安正超

    摘要:安正超,后,网络,开源爱好者,发布了多个开源项目,代表作有及多款实用的拓展,曾就职于微博,先后从事微博运动,手机微博接口开发,目前就职于腾讯。大会早鸟票已经开始出售更多大会报道,请前往 showImg(https://segmentfault.com/img/bVbsJyC?w=1680&h=2520); 安正超,90 后,网络ID overtrue,开源爱好者,发布了 80 多个开源...

    GT 评论0 收藏0
  • NingJS - JSConf China 2016个人与会总结&感想

    摘要:之所以预先调研还是因为英文水平不好,怕到时现场听不懂一下就懵逼了。在场参会最小的还是一名高中生。英语流利说这是硬伤。因此我下载了英语流利说这款应用来练习,然后刚好有几个外国朋友,可以作为实践对象。 NingJS - JSConf China 2016 为期两天的NingJS - JSconf 2016,聚焦点自然是JavaScript和Node.js,当然还有不少来打广告和混脸熟的。本...

    xiaoqibTn 评论0 收藏0
  • EnvoyCon回顾

    摘要:上周一,我们举办了第一届,这是致力于的会议,在以同场活动的方式举办。会议门票几周前售罄,约有人参加。那天最后进行了简短的路线图讨论,随后与所有维护人员进行了问答。该活动的反馈非常积极,我们已经期待第二次迭代将与圣地亚哥的北美同场举办。 showImg(https://segmentfault.com/img/bVblpmz?w=1600&h=411); 上周一,我们举办了第一届Envo...

    kbyyd24 评论0 收藏0

发表评论

0条评论

tinylcy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<