关注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的主进程上,所以当需要监听的元素较多时,可能会造成性能问题。

  • 记一次preact迁移到react16.6.7的经历

    0. 前言 preact作为备胎,但是具有体积小,diff算法优化过的特点,简单活动页用上它是不错的选择。但是考虑到react令人兴奋的新特性,preact并没有按时更新去完全支持它,更严重的是一些babel插件、一些库配合preact会有问题。所以,还是不得不迁移了。 如何迁移?package.json直接修改版本,删掉preact,重装,完事! too young 1. 从ALIAS改起 首先,一般是 这样子 [https://preactjs.com/guide/switching-to-preact] 接入preact的,使得我们代码里面毫无感觉我们用的是preact。在webpack的alias里面配置: alias: { react: 'preact-compat', 'react-dom': 'preact-compat' }, 所以,第一步先把这个去掉 2. 语法上 1. preact的元素数组可以不写key,切换回来必然警告很多,需要把key补上render() { return ( [

  • 该用什么姿势来使用 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

热问 更多