江源 ,非常让人头疼…… 于 4个月前发表 2996 2 1
原文 [http://jiangyuan.me/blog/2016/09/24/vscode/] 这是《小江品评编辑器》系列的开篇,当然想开个好头。 我 2012 年开始接触前端,从最开始的记事本,到 Dreamweaver ,到 notepad++ ,到风头一时无两的 Sublime Text ,到现在社区庞大的 Atom ,都使用过很长一段时间。 期间也抽空玩耍过 Vim 、 Emac 和 Brackets 等等,觉得智商不够浅尝辄止。 当然也不会放过 IDE , Eclispe 、 NetBeans 、 Aptana 都试过,现在专注 jetbrains 三十年、 Webstorm 脑残粉……别胡思乱想了,我买了 license 。 扯这么多就是为了证明, 品评编辑器 ,我还真有这个资格。 今天要说的编辑器不是 Sublime ,她很棒,但更新太缓慢,在这个各种技术井喷的时代,再不奋起直追,只会被淘汰。 也不是 Atom ,他一样棒,意外的是启动时间要一个世纪。 Webstorm 当然是压轴登场。 今天聊聊 VS Code ,上镇楼图!
4个月前
工具建设
结一 于 4个月前发表 2352 0 0
一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。 活动宣传页面分析 以imweb conf的第一屏为例,如下图: imweb conf [http://7tszky.com1.z0.glb.clouddn.com/FkJN6E_oX78eQ80tFFcIFqvD9u4Z] 现在对里面的元素布局进行一个分析: * 一个全屏的背景图 * ”往届回顾“定位在左上(left, top),IMWeb.io 文字及向上箭头定位为中下(center bottom) * 发光的地球水平铺满,垂直方向定位为bottom * 中间的其他内容定位参考就是中间了 * 内容一屏显示,不论手机的宽高如何变化
4个月前
移动开发
陈映平 于 3个月前发表 1797 3 1
写在前面 作为一个互联网前端老鸟,这么些年下来,做过的项目也不少。从最初的 我的QQ中心 、 QQ圈子 ,到后面的 QQ群项目 、 腾讯课堂 。从几个人的项目,到近百号人的项目都经历过。 这期间,实现了很多的产品需求,也积累了一些经验。这里稍作总结,希望能给新入行的前端小伙伴们一些参考。 做好需求的关键点 要说如何做好一个需求,展开来讲,可以写好几篇文章,这里只挑重点来讲。 最基本的,就是把握好 3W :what、when、how。 * what :做什么? * when :完成时间? * how :如何完成? 需求场景假设 为了下文不至于太过枯燥,这里进行需求场景的模拟,下文主要围绕这个“需求”,从what、when、how 三个点展开来讲。 假设现在有个论坛的项目,产品经理小C提了个需求 “给论坛增加评论功能” 。作为 前端工程师 的小A接到需求后,该如何高质量的完成这个需求。 * 项目名称:兴趣论坛。 * 项目组主要成员:前端工程师小A,后台工程师小B,产品经理小C。 * 产品需求:给论坛增加评论功能。 备注:此时我们脑海里浮现的应该是下面这张图。
3个月前
开发模式
helondeng 于 2年前发表 15041 4 0
Vue.js 是一个基于 MVVM 模型的 web 库。通过双向数据绑定连接View和Model层。实际的 DOM 操作被封装成 Directives 和 Filters 。 基本定义 每个Vue对象的实例是一个ViewModel。创建方式: var vue = new Vue({ el: view, data: model }); 其中 vue.$el 用于管理 View 层上的 DOM 。而 vue.$data 用于管理 Model 层的数据,可以通过 vue.$data.property 访问 Model 层数据,也可以直接 vue.property 访问。 HELLO WORLD 入门 <div id="example" <h1{{ title }}</h1 <ul <li v-repeat='todo:todoList'{{ todo | uppercase }}</li </ul </div// 对应 jsvar demo = new Vue({ el: '#example', data: {
2年前
HTTP网络
yangchunwen 于 1年前发表 12184 12 3
首先要解释一下为什么叫浏览器自动化测试,因为本文只关注发布后页面功能的自动化测试,也就是UI层面的自动化。 浏览器测试有别于js代码的单元测试,后者一般是发布前的代码功能逻辑测试,在这方面已经有很多比较成熟的方案,如 jasmine [http://jasmine.github.io/2.3/introduction.html] mocha [https://github.com/mochajs/mocha] Qunit [http://qunitjs.com/] ... 为什么要做自动化 个人认为自动化测试的主要出发点有两点: * 减少重复的工作。让机器自动帮我们完成需要的交互操作,验证我们的页面功能。 * 自动监控。通过自动回归我们的页面功能,可以在功能出错的时候提供报警,为我们手动排除问题提供参考。 开胃菜
1年前
工具建设
helondeng 于 1年前发表 11346 1 0
随着React-Native的火爆,以及Native和Web开发本身的一些痛点,近期团队考虑将iOS App中部分界面迁移到React-Native上,本文主要谈谈开发过程中遇到的一些问题及解决方案。 图片路径 图片来源有2种:local 和 remote。 remote 图片remote图片是通过http请求来处理的。 <Image source={{url:'http://10.url.cn/xx.jpg'}} 这种方式的优势: * 引入方式简单 * 更新方便,只需要替换server上的图片即可,不需要修改源代码 缺点很明显: * 即初次请求图片时,需要请求server,图片过大的,请求的延时会很大 local 图片local图片的引入方式有好几种: * 以 iOS App资源的方式引入。将图片以资源方式加入 OC 工程中,最终会将资源编译到安装包,更新需要依赖客户端发版本。 * 图片 base64 引入,更新需要修改代码。 * 绝对路径,将图片放在App某个目录下,在项目中引用。 // iOS App资源方式
1年前
移动开发
结一 于 1年前发表 10689 2 8
本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。 动画库 到现在来说css3动画也不是什么新技术,既然是要搞定它,好歹我们也得先看下别人做的一些东西吧,所以在此先向各位推荐几个比较好用的动画库: * animate.css [https://github.com/daneden/animate.css/] * effeckt [http://h5bp.github.io/Effeckt.css/] * hover.css [http://ianlunn.github.io/Hover/] * animatable [http://leaverou.github.io/animatable/] 关于CSS3动画不得不说的几个属性 看完上面那些动画库,心痒就不如行动了。 说起css3动画,有一个属性我们绝对避不开了,那就是 transform 这个属性,而如果要搞点高级的3d特效,那还有两个比较容易混淆的东西 perspective 和 preserve-3d ,下面我们简单说明关于这些的一些疑难点。
1年前
CSS/重构
coverguo 于 1年前发表 9853 18 6
创世纪第一章 首卷原文 起初我创造了canvas 。 我说,要有雨,就有了雨; 我说,要有雪,就有了雪。 而对于前端来说,canvas即是天地 在canvas这个天地上,前端可以呼风唤雨,无所不能。 ------------------------------------华丽的分割线------------------------------------------------- ##文章起因 其实就是最近在做一个需求,需要有下雨下雪的动画特效, 故在这里做了一个drop的组件,来展现这种canvas常见的下落物体的效果。那么,=。= ,就让我们先看看效果吧。 [github地址] 之后贴出来哈。。。。 ##效果展示 调用代码 <!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>#canvas{ width:100%; height:100%;
1年前
HTML&HTML5
张颖 ,认真认真 于 1年前发表 9653 5 1
关于微信公众号开发的文章到处都是,基于nodejs的代码也不少,但是微信公众号给出的开发者文档接口虽然全却不细致,难免需要花费一些时间去测试确认,这里总结下最近基于nodejs的微信公众号后台服务开发的过程,采取的是简洁流程图的表达形式,希望能帮助没有接触过此类业务的小伙伴节约时间,快速上手。 1、如何获得一个微信公众号 首先要说明的是,微信公众号分服务号和订阅号两种,具体差别: 这里写图片描述 [http://img.blog.csdn.net/20151028233421627] 可以获得的接口权限,即可以提供的功能差异如下: 这里写图片描述 [http://img.blog.csdn.net/20151028233720502] 显然,服务号看上去功能更多,但是也需要根据业务场景考虑,要做到频繁给用户推送消息,还非订阅号不可。申请到公众号后,即可前往微信公众平台管理你的公众号。 2、简单的交互 如果你的微信公众号大致只需要以下功能: * 手动给用户推送图文消息 * 利用底部菜单引导用户进入运营站点 * 根据用户发送的关键字自动回复用户 * 对用户发送的消息进行客服回复等
1年前
nodeJS全栈
结一 于 1年前发表 9319 8 6
相信写css的人都会遇到下面的问题: * 糟糕,怎么命名这个class,好像不太贴切,要是冲突了怎么办,要不要设计成通用一点... * 而改别人css代码的时候则会一直有个疑问:这个class到底是只在这个地方用了,还是其他地方都用了? 于是就有了下面的做法: * 最后终于被逼出了个class,简洁也好,中英混搭也罢,看着一头雾水也没关系,反正最后页面显示出来的。 * 这个class应该是只有这个地方用到,我可以放心写。上线之后。如果没问题,则暗自自我欣赏,看吧问题就这么简单,分分钟搞定呀;如果冲突了,则无限感慨,哎,改的时候我就隐隐不安啊,妈蛋,深坑,这是谁写的,谁写的!!! * 不好,这个class说不定其他地方也用到了,我得加个限制范围,加个父元素?要不重新再命名个class吧,比较保险。最后如果没问题则表示还好比较机智,怎么说哥也是混过的,还是有几斤几两的;如果有问题则表示防不慎防啊,这也太太太坑了吧。 由此可见,class的命名真不是一件简单的事,尤其还要兼顾可辨别性与可读性。 CLASS命名到底有多难
1年前
CSS/重构
henryguo ,郭亨厮混在腾讯 于 1年前发表 7915 3 1
[http://7tszky.com1.z0.glb.clouddn.com/FoHJ73Q2GpQ3n4fkeR2Wd80Dn6fD] 背景 2015年9月,nginx宣布支持类JavaScript语言。这意味着开发者可以更轻松、自由的控制全球最优秀的HTTP及反向代理服务器,并在此之上可以衍生出更多有用、好玩的创意。Nginx也更开发的走向了动态配置化的下一个阶段。大家可以点击查看 官方介绍链接 [https://www.nginx.com/resources/wiki/nginScript/] 。 先简单说说NGINX Nginx [engine x]是全球最受欢迎,也是最优秀的web服务器、反向代理服务器。通过第三方公司的统计,目前全球至少有23%的服务器采用了nginx,当然这个数字还在不断的扩大。目前也是国内BAT首选,所以这也是为什么我们第一时间关注到它的原因。 Nginx主要可以做以下几点: * 1、工作在TCP第七层,可以对HTTP协议的所有内容进行分析和处理。 * 2、支持lua,perl,JavaScript动态语言 * 3、支持第三方插件
1年前
HTTP网络
ouven ,https://ouvens.github.io/ 于 1年前发表 7791 0 0
ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大家仍很疑惑,使用ES6会有哪些兼容性问题。 一、兼容性问题现状 针对ES6的新特性兼容性问题,目前解决的方案是使用语法解析转换工具将es6语法转化为大部分浏览器识别的es5语法,通用的转化方案有babel,traceur,jsx,typescript,es6-shim。当然es6在服务器端也存在兼容性问题,这里由于只考虑到浏览器端的开发,暂不讨论。下面有一些常用的解决方案和兼容es6的兼容性比较~ https://github.com/babel/babel/issues/596 [https://github.com/babel/babel/issues/596] (es6的兼容解决方案很多,这里只讨论最常用的几种) http://kangax.github.io/compat-table/es6/ [http://kangax.github.io/compat-table/es6/]
1年前
javascript技术