做有态度的前端团队

网易FEG前端团队

  • 移动端视频转序列图片播放

    页面使用视频嵌入的问题: 1.微信支持视频内嵌播放,支持自动播放 2.IOS 10以下safari不支持视频内嵌及自动播放 3.IOS 10及以上safari支持视频内嵌及无音轨视频的自动播放 4.安卓下原生浏览器播放控制栏规范不统一,部分机型无法隐藏,内嵌播放及自动播放规范不统一 5.安卓和IOS的第三方浏览器会弹出小窗口播放视频,无法内嵌显示 解决方案 将视频转化成序列帧,用JS控制img的src进行切换,视觉上达到和播放视频一样的效果。这种方式也是有局限性的,视频不能太大,建议控制在5s以内,本次项目就是5s的视频导出的base64 js达到了3.5M,勉强可以用。所以3s视......

    其他

  • 滚动视差效果的实现及优化方案

    前言 相信大家对页面滚动视差效果都有一定的了解,滚动视差就是利用多层背景加上利用鼠标拖动滚动条来形成一些像动画一样的视觉效果。 项目地址:http://nostos.163.com/ 使用background-attachment:fixed及改变background-position去实现视差效果 接到要做一个视差滚动的效果需求时,脑海中立刻浮现了一个解决方案,通过background-attachment:fixed把背景固定,然后计算滚动条的拖动位置去改变不同背景图的background-position来实现。 然而,事情往往没那么简单,由于这次项目要兼容到2560px宽度......

    其他

  • 关于使用Koa2的点点滴滴

    Koa是基于Nodejs的一个后端框架,算是比较常用的,核心思想就是中间件,Koa实现底层逻辑,其余的就需要自己实现,包括:session、数据库操作、文件上传、路由、模板、静态资源访问等 前言 一直以来都是使用thinkjs这个框架,集成很多功能,基本上就只需要负责写逻辑就OK了,所以想尝试一下Koa这种需要动手逐个实现功能的,类似也有express 这里并不打算写新手教程,可自行百度,只是写使用过程中遇到的一些疑惑 下面代码基于ES6、7 1、安装 官网推荐使用Nodejs >= 7.6的版本,小于这个版本需要采用babel方式曲线救国 实际使用发现,用了babe......

    JavaScript总结其他

  • 有关http缓存的一些请求头的探索

    你是否遇到过请求返回statu code:304,你是否注意过状态码为200(from memory cache),那么让我们好好探索一下它们是怎么出现的吧。 最近在研究http请求的时候接触到一些http与缓存相关的请求头部信息: eTag/if-not-match expires/cache-control:max-age last-modified/ if-modified-since 缓存策略 当浏览器请求资源时,会默认将资源存入缓存中,有两种读取缓存的方式from disk cache 和 from memory cache,当第一请求的时候会在内存和硬盘中同时备......

    其他

  • 使用chrome extension解决gitlab在线编辑时输入中文出现错乱的问题

    先上一张gif效果图: 我们团队内部搭建了gitlab作为代码托管,目前的版本是GitLab Community Edition 8.17.5 9a564a8,在升级到这个版本时,发现在chrome下,在线编辑无法正常输入中文了,出现如上动图的错乱效果,而在firefox是正常的。 一开始怀疑是chrome更新版本后的问题,但是github的在线编辑是正常的,后来通过chrome开发者工具debug,发现是gitlab使用的在线编辑器有问题。无论gitlab还是github,这种在线编辑代码都是借助于一些web编辑器实现的,比如aceeditor,而这里gitlab用的正是ace......

    工具

  • 整理国外分享和登录方式

    facebook分享代码(直接拼接分享地址的方式) var fbHref = '分享地址'; $("#Jfacebook").on("click", function() { var _uri = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(fbHref) +"&display=popup&ref=plugin&src=share_button"; window.op......

    总结

  • Fiddler调试总结

    前言 Fiddler无疑是一个很强大的工具,日常工作中着实帮了不少忙,这里总结下它的用处。 请求重定向至本地文件 由于我们早期的一些老旧页面,没有托管在我们的Gitlab上,而是直接存放在FTP,所以修改就没那么方便。有时修改这些页面的js或者css,就用了Fiddler的这个线上调试功能,挺实用的。 打开你要调试的页面,如图左侧,你会看到有各种请求,然后右侧工具栏切换到AutoResponder选项。 选中你要调试的文件(一般是JS,CSS),然后拖拽到如图位置 找到 Find a file选项,选择你要用于线上调试的本地文件,然后点save保存,就可以在本地调试线上......

    总结

  • 如何更好地对hexo博客管理

    很久没搞点事情了,最近一时兴起用Hexo+Github搭建了个人博客。本文就不详细介绍这个搭建的过程了,主要写下如何对Hexo博客做版本控制与持续集成。 Hexo 安装好hexo之后,hexo init得到如下文件,这些就是博客最原始的源文件。 --- |--node_modules |--scaffolds |--source |--themes |--.gitignore |--_config.yml |--package.json source文件夹存放的是md文件,也就是平时我们用markdown语法写的文章。themes文件夹存放的是主题相关的文件,默认的hexo主......

    总结

  • Babel插件在fis项目中遇到的问题

    博客断了几个月了,抽空整理下Babel使用遇到的问题~ 随着ES6/7的发展和普及,越来越多的项目开始使用它们的新语法,但考虑到兼容问题,目前主流方法是在开发是时候使用新语法,然后通过Babel编译转换成ES5执行。 而我们小组使用的fis3自动化构建工具,而对应的babel编译插件是使用fis3-parser-babel,下面简单说下安装流程: 如果你本地还没安装有该插件,可以直接npm全局安装 npm install -g fis3-parser-babel 安装成功后,在fis配置文件配置使用: //直接在通用配置上配置即可 fis.match('**.js', { ......

    工具

  • 一个简单的移动端视频组件的实现

    一个简单的移动端视频组件的实现 据说移动端需要个视频组件,然后自己尝试了一下,不知道能不能用上,有问题希望大家提出来,(>=<) 这里还是采用了标签video的方式来实现的视频播放。 当然video存在一些问题 视频在最顶层的问题,这里需要区分不同的系统和系统版本, ios系统 在ios8以下,video处于最顶层 在ios8以上ios10以下的iphone上视频在不播放时,不会处于最顶层,如果播放,视频就会自动全屏,处于最顶层, 在ios10以上的iphone系统上视频不播放和播放时,都不会自动全屏,并处于最顶层。 android系统 在安卓系统下,video处于最顶......

    JavaScript其他

  • ECMAScript 2016 Language Specification (5)

    语义 ##5.1 句法和语法 5.1.1 上下文无关语法 一个上下文无关的语法包含一系列产生式productions。每个产生式都有一个叫做非终端符的抽象符号作为左位,然后一系列零个或者多个非终端符或者终端符作为右位。对于每个语法来说,每个终端符都来源于一张特殊的符号表。 一个链式生产式的右位有切仅有一个非终端符加上另个或多个终端符。(2016单独加的) 当从一个叫做 目标符goal symbol 的特殊非终端符组成的句子起始,那么给出的上下文无关文法就表示 语言 language,即,将产生式右边序列的非终结符当作左边,进行反复替换的结果就成为可能的终结符序列集合可能无限。 5.......

    其他

  • 移动端的Developer Tools

    20171013更新 vConsole官方更新到了v3.0.0。需要手动初始化才能启动(之前是直接引入vconsole的js就会自动初始化)。 // 初始化vConsole window.vConsole = new window.VConsole(); (以下是正文。。。) 移动端的调试一直很头疼,目前的一些主要调试手段有如下: 1、直接更新到测试地址 这种算不上什么调试手段,只是最原始的方式,每次修改都要更新到测试地址,然后手机访问测试地址看效果。因为手机没有像chrome那样的控制台,所以js调试基本都是通过alert打断点。 优点: 对手机连接网络没限制,随便一台真机都可......

    工具

  • CSS3的content属性1

    CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入。 1、插入纯文字 html: <h1>这是h1</h1> <h2>这是h2</h2> css: h1::after{ content:"h1后插入内容" } h2::after{ content:none } 效果图: 2、嵌入文字符号 可以使用content属性的 open-quote 属性值和 c......

    CSS

  • 基于NodeJs的自定义命令行图片压缩工具制作

    前言 目前,我们小组用的fis已经集成了图片压缩这个功能,通过一行简单的命令,就可以完成对图片的批处理,非常方便。我这里把核心代码抽出来,做了一些修改和扩展,制作成一个独立的工具。 较小组使用的压缩工具,新增了压缩单个或多个文件功能,由于我经常给官网换版头,有时一次就是替换1张,或者2张图而已,所以感觉没必要把所有图片压缩一遍。另外还新增了图片等比缩放功能,这也是源自一次需求,虽然少见。有一次,需求方丢来了20张大概是4000*3000这种尺寸的图片,最大的达到了10M,就算压缩后仍然很大,所以有必要缩小一下图片尺寸。虽然PS可以做批处理缩放,大概就是新建一个“动作”,然后让它重复......

    工具

  • 在游戏内嵌项目中体验Vue2.0全家桶

    前言 最近在做率土之滨海外版的内嵌项目,其实之前已经做过一版,但是需求不是很满意,然后又改了设计,改了功能,最终变成一个小论坛:有发帖、回帖、发帖和回帖都能上传图片、点赞、帖子列表、我的帖子、我的点赞、我的回帖等等功能。来组动态预览图: 相比第一版,增加了几个接口功能。而本次开发使用了Vue2.0 + Vue-router + Vue-resource + Vuex + ES6的组合,原因如下: 之前做过一版,二次开发如果在旧版的基础改会缺少点挑战性,相反正因为熟悉,意味着在项目计划排期内有更多尝试新技术的可能性 vue在社区很火,而其在单页面据说有不错的体验,看起来很适合内嵌......

    JavaScript总结