前端开发者接私活儿神器

同一家公司的同事,拿同样的工资,以前他在用肾机,我还在用诺记。吃饭的时候他是买单王,我在想这家伙应该没存什么钱吧。结果前段时间他买了个沃尔沃S60L,可我一套省城小三房的首付都还没凑齐。

他说他经常在外面接了些私活做,我感觉也不太靠谱,我也接过几个私活,不赚多少钱,还有的一个单子钱不多,开发时间很长,累得要死,吃力不讨好。我问他为什么能赚到钱,他告诉我,他的单价不比我的高,只是效率比我高很多,不是因为技术好多少而是他积累了很多前端模版,很多重复的功能就不用开发了,另外服务端直接用类似MashupCloud这样的BaaS平台,数据存储和常用的API服务足够做一个小型的项目。不用开发服务端程序,拼拼凑凑三两一个小单子就完成了。

这点心得让我大受启发,于是我开始使用这类的BaaS平台和一些第三方API接口,果然是私活儿神器。

献上MashupCloud地址希望大家能得到一些启发。

访问地址:http://mashupcloud.cn

主界面

主界面如下图所示,主要分为我的应用、数据模型、API中心: 继续阅读

推荐适合前端开发的十款 Chrome 扩展

对于前端开发者来说,Chrome 浏览器绝对是开发过程中不可缺少的利器:不仅仅是因为 Chrome 自带的功能强大的 devtool,更是因为 Chrome 有着各种好用的前端语言调试工具以及诸如 EnjoyCSS、LiveReload 等这类能够提高你编码效率的强大扩展。我们就整理了十款前端开发相关的 Chrome 插件,在这里推荐给你。

1. 掘金 Chrome 插件

对于开发者来说,比开发过程更重要的,应该要算平时对于开发资源以及技术文章一点一滴的积累了吧。那么,开发者能够在哪里获取需要的技术内容呢?

过去,你可能需要在 GitHub、Dribbble 等许多网站之间不停地跳转来寻找自己需要的内容,现在,有了掘金 Chrome 插件,只需要一个新标签页面,你所需要的内容,它都能够为你聚合呈现出来,绝对算得上是发现干货的利器。 继续阅读

javascript :只执行一次的函数

在日常开发的时候,经常会碰到一种这样的情况:想让某个函数只执行一次,特别是在一些循环或定时执行的时候。

直接上代码:

function runOnce(fn, context) { //控制让函数只触发一次
    return function () {
        try {
            fn.apply(context || this, arguments);
        }
        catch (e) {
            console.error(e);//一般可以注释掉这行
        }
        finally {
            fn = null;
        }
    }
}

// Usage 1:
var a = 0;
var canOnlyFireOnce = runOnce(function () {
    a++;
    console.log(a);
});

canOnlyFireOnce(); //1
canOnlyFireOnce(); // nothing
canOnlyFireOnce(); // nothing

// Usage 2:
var name = "张三";
var canOnlyFireOnce = runOnce(function () {
    console.log("你好" + this.name);
});
canOnlyFireOnce(); //你好张三
canOnlyFireOnce(); // nothing

// Usage 3:
var obj = {name: "天涯孤雁", age: 24};
var canOnlyFireOnce = runOnce(function () {
    console.log("你好" + this.name);
}, obj);
canOnlyFireOnce(); //你好天涯孤雁
canOnlyFireOnce(); // nothing

继续阅读

前端开发中的JS调试技巧

转载自:http://seejs.me/2016/03/27/jsdebugger/

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要。

本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白。 继续阅读

移动前端适配—低级、无趣的老方法

首先请了解一下移动前端中 viewport (视口)http://www.css88.com/archives/5975

这里介绍一下几个移动前端适配—低级、无趣、一堆问题的老方法。早在几年前,移动前端适配有几个很简单使用的方法。那时屏幕尺寸或者说分辨率没如今这么多。一般设计师设计移动端页面统一按照640像素的宽度设计。因为当时的主流是iPhone4,iPhone4s ,iPhone5及iPhone5s,物理像素宽度为 640,分辨率为320。其他安卓机型可以根据这些尺寸做简单粗暴的匹配。

例如下面是适配最简单粗暴的方法,而且根据我平时查看项目的代码的习惯,还有相对一部分项目还是使用这个方法做项目,或者维护项目:

<meta name="eqMobileViewport" content="width=320,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

看起来很简单,也很实用。开发时候一切根据640的设计稿除以2处理,字体也用简单的像素做单位(用rem换算麻烦)似乎是很完美,但是实际情况,特别是一些对齐,背景吻合总是会出现问题。还有就是用现在高分辨率的iPhone6s等手机看,总是会被设计师鄙视,看图就知道了。 继续阅读

用 visibilitychange 事件判断页面可见性 – 使用 PageVisibility API

这里了将介绍一下 页面可见性(PageVisibility)API的简单应用。

visibilitychange事件介绍

简单的说,浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

这个事件可以满足一些用户需求,比如标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询,还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。

这个事件已经得到现代浏览器广泛的支持,不过一些老版本的浏览器需要加相应的前缀。

Chrome (Webkit) Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
13前缀webkit
33无需前缀
10前缀moz
18无需前缀
10前缀ms 12.10 最新的测试已经支持

注:Opera 12.10浏览器在最小化时不触发visibilitychange事件,也不将hidden属性设置为true.

document的可见性属性

Page Visibility (Second Edition)中定义了2个只读的document属性:hiddenvisibilityState。

其中document.hidden是一个布尔值,简单的表示标签页显示或者隐藏。而document.visibilityState属性更为详细,目前有四个可能的值: 继续阅读

[前端日报]推荐一个GitHub/GitLab 代码结构浏览插件-Octotree

Octotree 是一个浏览器扩展(Chrome,Firefox,Opera和Safari),用以显示GitHub/GitLab 代码结构(代码树)。可以非常方便的浏览项目源代码,这样不必把每个项目拉取到你的机器。浏览器浏览时就像使用IDE目录结构,也不必来回的前进后退。

项目地址:https://github.com/buunguyen/octotree
chrome-github 继续阅读

[前端招聘]蚂蚁金服招聘高级H5前端/容器开发工程师/专家

蚂蚁金服招聘高级H5前端/容器开发工程师/专家

薪资范围:15k-30k

工作地点:杭州,上海,北京

岗位要求:经验1-3年  全职

技术要求:javascript / css / html / html5 / node.js

岗位描述:

1、负责支付宝客户端内H5业务开发,包括但不限于支付基础业务、垂直行业应用、社交扩展产品等;

2、建设工具、提炼组件、抽象框架,促进前端工程化、服务化,持续提升研发效率,保障线上产品质量; 继续阅读

[前端日报]阿里的 echarts 来了 – G2 一套图形语法

G2(The Grammar Of Graphics) 是蚂蚁金服-体验技术部-数据图形组的开源项目,是一个由纯 javascript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由得定制图表,是为大数据时代而准备的强大的可视化工具。

74AE98CB-4BED-46AA-B9B0-79A9BEE6950B

类似于百度的echarts ,提供了比echarts更多的扩展。

简单、易用便于扩展

G2 的图形语法为我们提供了一套非常自由简洁的创建图表过程,可以说是一句话画图;并且 G2 提供了更简单的可视化改变形式,对于使用者来说,用户仅仅改变非常少的配置就可以实现不同图表之间的切换。可视化形式的轻松改变可以帮助数据分析人员更佳容易的找到适用于他的数据的形式,进而发现数据中的规律。 继续阅读