做有态度的前端团队

网易FEG前端团队

  • 使用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总结

  • 小程序的一些注意事项

    一、尺寸单位 1. rem   在小程序中规定屏幕宽度为20rem;   如:设计稿为750px宽度,1rem=750/20px= 37.5px , 1px = 1/37.5rem。   在实际的制作过程中,会发现px和rem之前的转化是很累的,因此不推荐使用rem为尺寸单位来制作。 2. rpx(推荐)   这个是微信自己开发的一个尺寸单位。可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。   参考文档   如:在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。 ......

    总结

  • 使用PhantomJS对网页截屏

    PhantomJS 可以看做是一个没有UI界面的webkit浏览器,这个东西用途很广泛,可以用来做网络监控,网页截屏,自动化测试等等,这里抛砖引玉,做个简单的介绍,就主要介绍下它截图的这功能。 1.安装 到官网下载phantomjs.exe,然后复制文件所在路径D:\chrome download\phantomjs-2.1.1-windows\bin(这个是我的路径) ,在环境变量的系统变量中找到path,添加即可,这样就可以在任意地方执行CMD命令操作PhantomJS了。 2.使用 demo.js var page = require('webpage').create(......

    工具

  • 安卓微信下video最顶层

    问题:页面video在安卓微信下最顶层 一般我们做页面视频时,都是点击视频按钮弹出一个遮罩层再播放视频。然而当页面本身有一个视频video时,再点击另外的按钮弹层的时候又是怎样的状况?原先页面如下图: 点击下面的 往期视频按钮 后是弹层播放视频,然而在安卓微信下的打开是这样的。 打开方式错了吧?跟想象不一样哦,页面上的视频在遮罩层上面。。。那么我们第一反应应该是页面上video层级太高了吧,但是发现遮罩层的层级z-index:9999;已经是最高了。what? 但在自带浏览器以及苹果机能够正常显示(页面video在遮罩层下面)。 页面体验链接: https://test.n......

    其他

  • ECMAScript 2016 Language Specification (4)

    自娱自乐系列,求不黑 4.3 术语和定义 以下术语和定义应用于本文档。 4.3.1 类型 在本声明条款6中所定义的一系列数据值。 4.3.2 初始类型 在条款6中定义的未定义(Undefined),空(Null),布尔(Boolean),数字(Number),符号(Symbol),或者字符串(String)。 特别注意 一个初始数据是直接代表在语言实现中国最低级别的数据。 4.3.3 对象 对象数据类型 特别注意 一个对线工时有一个大度的原型对象和一系列原型的集合。原型可以为空值 4.3.4 构造体 一个函数对象用来创建和初始化对象 特别注意 构造体的“原型”原型是一个用来实现......

    其他