-
需求简介 腾讯企鹅辅导在学生上课结束后推送“学习报告”,是课程所提供的一项重要服务。家长在“学习报告”中能查看孩子上课时间及互动情况,答题及掌握知识点,作业考试分数,班级排名等诸多数据,继而让学生家长及时掌握孩子的学习情况。 此次改版升级是针对旧学习报告的的数据和展示进行的一次优化:增加考试模块、知识点采用更简单的表达形式、在视觉交互上更加年轻活泼、并运用了更多数据图表可视化在其数据展示中。 设计稿 考试模块-数据图表可视化的应用 1.数据可视化组件库的选择及应用 在考试模块中,需要展示学生成绩变化趋势的曲线图,而这需要用到第三方的可视化组件库,继而快速回忆起比较知名的几款:国外的HighChart,百度家的Echart,阿里的AntV(移动端F2)等。当然也希望腾讯有一天也能有同样知名好用的的可视化组件库。
-
在需要过去一些网页上的信息的时候,使用 Python 写爬虫来爬取十分方便。 1. 使用 URLLIB.REQUEST 获取网页 urllib 是 Python 內建的 HTTP 库, 使用 urllib 可以只需要很简单的步骤就能高效采集数据; 配合 Beautiful 等 HTML 解析库, 可以编写出用于采集网络数据的大型爬虫; 注: 示例代码使用Python3编写; urllib 是 Python2 中 urllib 和 urllib2 两个库合并而来, Python2 中的 urllib2 对应 Python3中的 urllib.request 简单的示例: import urllib.request # 引入urllib.request response = urllib.request.urlopen('http://www.zhihu.com') # 打开URL html = response.read() # 读取内容
-
0. 前言 作为一个不喜欢写样式的前端,遇到了直接对外的活动页面的需求,一下炸出一堆问题: * 单位乱用,rem、vh、vw、px乱用甚至混在一起用 * html冗余,有时候一个div只是为了取margin * 一个页面用多种布局方案,flex、float、relative+top、absolute+top、margin,自己坑自己 * 各种随意,不严格按照视觉稿 理论倒是熟悉,但用起来还是一塌糊涂。于是,回头自我救赎一波,好好复习基础。flex、grid后面不多作研究,尤其是grid这种一两行就可以搞定很多复杂样式。如果我们不知道新技术是为了什么而来的,解决什么痛点,没有体验一下刀耕火种的时代,又没有一个良好的团队合作能力,做起项目来还真的不一定是“写页面太简单了”这种事情。 1. 一些实践方案深入浅出 1.1 PADDING 看到百度的顶部,你会想到什么方案呢?[https://user-gold-cdn.xitu.io/2018/10/14/16672b154f947885?w=2034&h=208&f=png&s=46954]
-
腾讯IMWEB团队2019暑期实习生招骋啦~ 岗位描述 负责腾讯课堂、企鹅辅导、ABCmouse等在线教育业务的Web前端开发; 岗位要求 * 2020届,计算机相关专业本科及以上学历,或者非计算机相关专业、但是业余自修过计算机专业的所有必修课; * 丰富的编码实战经验,热爱编程,有激情,有创造力,也有强悍的逻辑性,喜欢研究新技术、新标准; * 熟悉HTML5/ES6/CSS3等前端开发技术; * 理解web标准和兼容性,对可用性/响应式相关知识有实际的了解; * 能够运用至少一款主流的JS框架,具有良好的代码风格、接口设计与程序架构; * 至少掌握至少一门服务器端编程语言,对前后端联合开发的技术原理有全面认识; * 对DNS/HTTP和相关的其他底层网络协议有比较全面的了解; * 思路清晰,积极主动,具备良好的沟通能力和团队协作精神。 工作地点:深圳 有兴趣的童鞋,可以把简历 发送至:fredwu@tencent.com 抄送至:28626518@qq.com
-
简介Houdini是一个国际逃脱艺术家,通常使用各种玄幻的方式打破观众的想象,收获到各种惊叹。 而在 W3C 中 Houdini 是 W3C 成立的一个任务小组,Houdini 主要的工作任务是把开放的CSS API 提供给开发者,开发者可以在通过在浏览器渲染的各个阶段控制该时间节点的工作内容来实现对CSS进行编程,也意在提供玄幻、充满着各种无限可能的CSS实现方式。 Houdini 主要由Typed OM、Properties/Values、Worklets、Parser API、Paint API、Layout API组成,下面会进行简单的介绍。 Typed OMTyped OM 全称是 Typed Object Model 类型对象模型。他可以给 我们取到的CSS 值添加一些类型、方法和新的对象模型来进一步扩展CSS值的易用性和可读性。 这时候我们取到的CSS的值不再是字符串了,现在我们取到的值是JavaScript里的一个对象,可以更加符合我们JavaScript编程的习惯,我们也可以对 CSS 进行更加合理的操作。 举个栗子。
-
0. 前言 平时写CSS,感觉有很多多余的代码或者不好实现的方法,于是有了预处理器的解决方案,主旨是write less >do more。其实原生css中,用上css变量也不差,加上bem命名规则只要嵌套不深也能和less、sass的嵌套媲美。在一些动画或者炫酷的特效中,不用js的话可能是用了css动画、svg的animation、过渡,复杂动画实现用了js的话可能用了canvas、直接修改style属性。用js的,然后有没有想过一个问题:“要是canvas那套放在dom上就爽了”。因为复杂的动画频繁操作了dom,违背了倒背如流的“性能优化之一:尽量少操作dom”的规矩,嘴上说着不要,手倒是很诚实地 ele.style.prop = <newProp> ,可是要实现效果这又是无可奈何或者大大减小工作量的方法。 我们都知道,浏览器渲染的流程:解析html和css(parse),样式计算(style
-
9月13日凌晨终于等来了万众瞩目的苹果新品发布会,相信很多小伙伴们都期待新 iphone 可以剪掉刘海胡子,但万万没想到的是等来了三款不同的尺寸的 iphone x ,我的天,等了这么久你给我看这个?码农慌得一批满地找新 iphone 的逻辑像素,然后想着怎么兼容这刘海和胡子。 以往的做法 其实对于 web 前端来说,刘海在绝大多数的场景下是可以不用处理的,因为 safari 或客户端(微信,手Q等)的 statusBar 已经替我们抹平了顶部刘海,我们只需要关心底部的那条黑色的胡子,因为如果页面底部有按钮的话,就会被胡子给挡住,以往我们兼容过 iphone x 的下巴,但现在回想起来不是正确的做法。我们之前是这么处理的: 首先在 <html> 中加入对应的 className: has-bottombar <htmlclass="has-bottombar"><head></head><body></body></html> 再配上对应的 css:
-
原文链接: 腾讯KM 作者:cocoqiao 何为滚动视差 视差滚动 (Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的网站应用了这项技术。 通常而言,滚动视差在前端需要辅助 Javascript才能实现。当然,其实 CSS 在实现滚动视差效果方面,也有着不俗的能力。下面就让我们来见识一二: 认识 BACKGROUND-ATTACHMENT background-attachment 算是一个比较生僻的属性,基本上平时写业务样式都用不到这个属性。但是它本身很有意思。 background-attachment :如果指定了 background-image ,那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。
-
首先,这里说的迁移并不代表这两个技术的优劣,其次也不代表它们是矛盾不相容的,相反它们搭配使用是很棒的。 迁移前提 如果你打算把 Sass 迁移到 PostCSS,那么在迁移之前有些事是必须要考虑的: * 首先,先问下自己为什么要迁移?值不值这么做很重要。 * 其次,你对 PostCSS 的插件机制一定要深入了解,因为整个迁移过程肯定会出现问题。 * 然后如果决定迁移,先调查下自己或团队的 Sass 使用习惯,然后对比 PostCSS 的实现。一种是平稳迁移,保持 Sass 的风格不变(如变量、mixin等);另一种就是全部换成 PostCSS 格式。相对来说老的大项目建议使用平稳迁移,不然时间成本太大。而对于有些 PostCSS 实现不了,就要重新考虑方案了。 * 如果这些都想好了,最后还需要考虑的是哪些项目需要迁移,哪些不需要,再来个试水的看看效果,毕竟跑起来才是最重要的。 迁移步骤 1、确定使用什么构建