关注IMWeb前端社区公众号

  • 第一时间获得最新、最火的技术干货
  • 定期推送您所关注的专题文章
  • 和大牛们一起讨论前端技术
  • 获取IMWeb社区、前端相关的最新活动
热文 更多

  • 腾讯IMWeb团队2019暑期实习生招骋啦~

    腾讯IMWEB团队2019暑期实习生招骋啦~ 岗位描述 负责腾讯课堂、企鹅辅导、ABCmouse等在线教育业务的Web前端开发; 岗位要求 * 2020届,计算机相关专业本科及以上学历,或者非计算机相关专业、但是业余自修过计算机专业的所有必修课; * 丰富的编码实战经验,热爱编程,有激情,有创造力,也有强悍的逻辑性,喜欢研究新技术、新标准; * 熟悉HTML5/ES6/CSS3等前端开发技术; * 理解web标准和兼容性,对可用性/响应式相关知识有实际的了解; * 能够运用至少一款主流的JS框架,具有良好的代码风格、接口设计与程序架构; * 至少掌握至少一门服务器端编程语言,对前后端联合开发的技术原理有全面认识; * 对DNS/HTTP和相关的其他底层网络协议有比较全面的了解; * 思路清晰,积极主动,具备良好的沟通能力和团队协作精神。 工作地点:深圳 有兴趣的童鞋,可以把简历 发送至:fredwu@tencent.com 抄送至:28626518@qq.com

  • 判断元素是否在视窗之内

    作为一名前端工程师我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值(例如 100 px),从而实现一些常用的功能,例如: * 图片的懒加载 * 列表的无限滚动 * 计算广告元素的曝光情况 * 可点击链接的预加载 说明: 可点击链接的预加载 这个功能目前使用的网站还比较少,其实就是“预先获取页面可视区域内的链接,加快后续加载速度”,能极大提升用户在站内跳转时的体验,由 Google 在 2018 年年底通过 quicklink 项目 [https://github.com/GoogleChromeLabs/quicklink] 进行开源。 目前流行的方式是通过 Element.getBoundingClientRect() [https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect] 拿到元素的相关位置信息后进行手动的判断,但是这种方法由于运行在 JavaScript的主进程上,所以当需要监听的元素较多时,可能会造成性能问题。

  • 该用什么姿势来使用 PWA

    注:本文需要有一定的 PWA 基础 1. 什么是 PWA? 要知道一个东西是什么,我们通常可以从它的名字入手 因此我们看下 PWA 的全称是: Progressive Web App 回答 what 这种问题,重点在于名词,因此 PWA 是一个 APP,一个独立的、增强的、Web 实现的 APP 要达到这样的目的,PWA 提供了一系列的技术 > 标准,如下图所示: [http://imweb-io-1251594266.cos.ap-guangzhou.myqcloud.com/c697846a327246b321e4d04c88a4c106.png] 具体每一项技术是什么就不再赘述了,感兴趣的同学自行网上搜索! 下面有一个简单的 demo 可以简单体会一下: [http://p.qpic.cn/qqconadmin/0/df89097fb8d445219538475f2e438eb5/0] 以后我们的 web 站点可以像 app 一样,这难道不是一个令人兴奋的事情吗? 所以 PWA 是值得我们前端开发者一直关注的技术!

  • 浏览器中玩人脸识别

    背景 其实浏览器中的人脸识别 API 已经发布有一段时间了,从Chrome 70 版本以上就有了。其中包括了人脸,文本或 QR 码的识别,基本上覆盖了当前互联网应用的大部分场景。 随着云服务的发展,现在很多跟图像识别相关的服务基本都集成在了 云服务 之中,前端的使用场景其实还是相对来说比较偏弱,但是对于各种爱折腾的前端er来说,玩玩还是可以的,不然怎么能满足内心那盛开的好奇心呢。 SHAPE DETECTION API [HTTPS://WICG.GITHUB.IO/SHAPE-DETECTION-API/] 图形识别这种对系统资源和设备的计算能力要求颇高的功能,通常只有底层的原生 API 能驾驭,流行的框架主要是开源的Open CV和各大移动平台的图形识别服务,浏览器层面主要有三个 API: 在 Console 控制台输入以下 JavaScript代码,就能验证你的浏览器是否支持相应的 API 了: * window.BarcodeDetector * window.FaceDetector * window.TextDetector

  • react hook的初步研究

    前言 一开始react团队对外宣布hook 的时候,一眼看上去,觉得肯定proxy或者getter实现的,然后在函数组件外面包一层class extend React.Component。读setState钩子的第一个return结果就返回state,第二个结果就是封装了setState。后来发布了,看了一下代码,原来是维护一个队列(可以说很像数组,也可以说维护一个链表)。 RENDERWITHHOOKS的整个过程 在源码里面,renderWithHooks函数是渲染一个组件会调用的,跟hook相关的操作都在这里之后。 比如这段代码: exportdefault () => { const [n, setn] = useState(1); const [age, setAge] = useState(10); const [man, setSex] = useState(true); return ( <div>

热问 更多