2017前端开发者必学清单

前端生态系统高速发展,我们把时间花费在尝试新技术并在网上讨论它们。我并非指不该如此,但也许我们可以放缓脚步,去多关注下那些变化不大的东西。这些东西能很大程度改善工作质量,提升工作价值,帮我们去理解新的工具。

这篇文章里有我自己过往的经验也有新年的计划,同时也希望能收到你们的反馈。

学习如何编写可读的代码

我们大多数的工作不是写新代码,而是维护既有的代码。这也就意味着你读代码的时间要远多于写码的时间,因而你需要为你下一位维护代码的同事来优化代码,而非为解释器来优化。

我推荐大家阅读这几本很棒的书,由薄到厚,按下面顺序来阅读:

继续阅读

React还是Vue:你该如何选择?

2016年React巩固了它作为前端框架之王的地位,这一年中可以看到它在Web端和移动端的快速成长,同时稳稳领先于它的主要竞争对手Angular。

但是2016对Vue来说也是同样令人印象深刻的一年,它发布了Vue 2.0版本并且在JavaScript社区引起了巨大反响,GitHub上多出的25000颗star就是最好的证明。

React和Vue的适用范围无疑是很相似的:同样是基于组件的轻量级框架,同样专注于用户界面的视图层。同样可以用在简单的项目中,也同样可以使用全家桶扩展为复杂的应用程序。

因为,很多Web开发者想知道他们应该使用哪个框架。是其中一个明显优于另一个?还是他们有各自的优点和坑?或者他们基本就是一个样?

两个框架 两个拥护者

在本文中,我想用一次公平,彻底的对比来回答上面的疑问。但是唯一的问题是我是一个Vue粉丝,完全不够客观。今年我在项目中重度使用Vue,在Medium上大加赞赏,甚至还发布了Udemy课程

为了平衡我的偏见,我叫上了我的朋友Alexis Mangin,他是一个很牛的JavaScript开发者,同时也是一个React铁粉。他同样沉浸于React中,经常在Web端和移动端的项目中使用。 继续阅读

杭州微飞胜科技有限公司招聘前端开发工程师

杭州微飞胜科技有限公司招聘前端开发工程师

职位描述:
1、各产品线Web端功能设计、开发和实现;
2、各产品线易用性改进和Web界面技术优化;
3、Web前沿技术研究和新技术调研。

职位要求:
1、两年以上互联网领域开发经验,掌握良好的前端技能,包括XHTML/XML/CSS/Javascript,了解WEB标准化、性能优化方法,了解可用性、可访问性和安全性。
2、熟悉掌握一种常见JS框架,如jQuery。
3、对前沿技术有浓厚的兴趣,如html5,css3,nodeJs等。
4、热爱前端,热爱设计,对新鲜事物充满好奇心,有折腾的想法和精力,喜欢捣鼓各种互联网应用。
5、会设计优先录用。

薪资:具体数字真的不好说,我透入一个信息,上次蘑菇街全员涨薪50%,第二天我们老板宣布全员涨薪40%(目前我们都已经拿到涨了40%的工资),跟土豪公司比我们稍微逊色了点点。

其他福利:7月份去了海南三亚,分界洲岛,其他我也不好保证什么。

地点:杭州数字娱乐产业园3号楼605

公司网址:http://www.wifisong.com

联系方式:zxb[爱她]wifisong.com(请把”[爱她]”改为”@”)

关于面试:简历上备注,先电话聊一下,再决定是否来面试哦

前端开发工程师优秀开发工具推荐

keyboard-typing-798x310
原文作者 Arnaud Breton 为前端工程师,特别专注于前端和使用者经验,这篇文章出自于mention blog。以下内容由作者以第一人称撰写。

过去几年一直不断地提到 Web 应用新世代的成长,这些 App 内容变得越来越丰富,带动了前端整体的复杂度大幅增加。

像是 Backbone(藉由提供模型)、AngularJS 和 EmberJS 框架都是创造新 App 非常好的框架,增强了所有 Web 的功能;同时,Web 程式语言 Javascript 在普及度和成熟度上已经进步了非常多,而且还能和 NodeJS 在后端协同工作。

但为了能持续面对复杂度的新挑战,开发者已经创造更多工具使整体开发过程更加流畅,从测试框架到分析工具,这些成熟又有用的工具把最棒的体验带给我们的使用者。

继续阅读

Yottaa北京 8K~20K寻优秀前端攻城师

公司名称:Yottaa

Yottaa是一家基于波士顿-北京的互联网云计算创业公司, 我们致力于为用户带来更快、更好的互联网体验!

工作地点:北京海淀区清华科技园

联系方式:syi@yottaa.com

岗位名称:前端攻城师

职位要求:

– 用过各种Web前端技术,HTML、CSS、JavaScript等;

– 理解JavaScript,对javascript框架应用(如prototype/jQuery/YUI/Ext等)有一定的经验;

– 知道怎么做css/JavaScript等前端性能优化、解决多浏览器兼容性问题;

– Doing great work and being driven to improve yourself and everything you touch is what matters.

– 你不一定要师出名门,经验丰富(或大学刚毕业?),但你一定要热爱前端编程,对细节孜孜以求;

– 认同创业公司,这里有很多的问题等待我们去解决,To be a Leader去解决这些问题,我们可以成长,也有很多机会在等着你…

– 到www.yottaa.com逛逛,看看我们在做什么,给我们提些意见?

– 更多Yottaa公司介绍, 职务细节请移步: http://yottaa.blog.163.com/blog/static/190467240201161288479/

待遇:UpTo 人民币8K-20K (depending on skills and experience,特别优秀的可另谈)做自己喜欢做的事,和优秀的人一起进行各种创造性的工作,学习锻炼,以及创业公司的各种长期潜在收益

 

[杭州]StarNavig创业团队招募前端开发

[杭州]StarNavig创业团队招募前端开发

我们是一个创业团队;

我们没有明星队员;

我们没有眩目的履历和光环;

我们没有指点江山的专家和颐指气使的BOSS;

我们有一个明确的目标;

我们富有激情;

我们是一群富有实干精神的偏执狂;

我们有一个不错的机会和相对丰厚的待遇;

我们还缺像你一样肯扎实干的优秀人才;

我们期待你的加入!

[职位说明]

要求:熟练掌握JavaScript、HTML、CSS、Ajax,熟悉HTML5、jQuery框架者优先。

薪资:面议(包吃住)

[联系方式]
Tel:    0571-89053575  或者 15358850983

Email: webmaster[a]starnavig.com (可投递作品)

 

前端开发小工具集合(2011-05-24更新)

收集的一些轻量级非常实用的前端开发小工具:
CSS3相关

  1. CSS3样式生成器:http://www.css88.com/tool/css3Preview/
  2. CSS3渐变样式生成器,类似Photoshop中的渐变界面:http://www.colorzilla.com/gradient-editor/
  3. CSS3动画制作工具Sencha Animator:http://www.sencha.com/products/animator/
  4. 背景色alpha透明工具:http://www.linxz.de/demo/hex_change.html(IE滤镜须是在一个有宽高设置的容器中,或者激活haslayout的属性。具体介绍:http://blog.linxz.de/ie_filter_css3_rgba/)–2011-01-18更新

Data URI

  1. Encode Data URL(舜子开发的)http://www.css88.com/tool/DataURL/

转码工具

  1. unicode转换工具:http://www.css88.com/archives/2093
  2. encode转换工具:http://labs.pufen.net/views/convert_encoding.php http://www.css88.com/tool/encode/convert_encoding.php(2011-05-24更新)
在线代码编辑器
  1. 小可<Little Code />是丸子制作的一个在线代码编辑器,轻松分享代码,用于提问,测试和转发代码等,是一个方便又不错的工具:http://code.wanz.im/
  2. CodeBox:http://box.linxz.cn/

继续阅读

上海翼多(eDoctor)招聘前端工程师

工作职责:

负责医道网及旗下微博、文库、调研等子站的前端代码实现。

工作要求:

  1. 熟练编写结构良好各浏览器兼容的CSS,语义化的符合W3C标准的HTML;
  2. 熟练使用jQuery编写高性能的交互效果;
  3. 注重用户体验,喜欢不断地重构,对可访问性有所了解;
  4. 了解HTML5和CSS3,能够并乐于把它们优雅降级地运用在实际项目中;
  5. 逻辑分析能力强,有良好的团队合作精神。

加分项:

  1. 喜欢微博,并且在 Twitter 或 Weibo.com 上是一个话痨;
  2. 你是一位MAC党,Steve Jobs是你的偶像,因此你能够做iOS开发;
  3. 有后端技术的基础,如Ruby、Python。

公司名称、宣传片:

上海翼多(eDoctor)信息咨询有限公司: http://v.youku.com/v_show/id_XMjY2MjQ3MzM2.html

关于我们:

eDoctor is an innovative healthcare communication agency.We are building a continually improving online community of the top-ranking doctors.We believe that our site has the potential to become the largest sources of high-quality information available anywhere and the best tool for sharing and acquiring medicinal knowledge.eDoctor is revolutionizing the way doctors collaborate across China.

We’re looking for people to help us achieve our vision.We are committed to building a cutting-edge technology company where people love to work and can be as productive as possible.We also have a culture of optimizing for learning and growth as we strive to continually improve as individuals and as a team.

简历投递:job[a]edoctor1.com (请把“[a]”换成“@”)

自己实现的简单的html元素选择器,类似jquery选择器,比jquery选择器还要快!

最近做前端,需要选择元素,虽说有jquery和各大js库已经帮我造好了轮子,但我想试试自己实现一个,正好项目也不忙,正好加入自己的js文件中,下面是实现代码。用$g(“#content .op”)这种格式就可以调用,和jquery $()的参数一样:
function $findChilds(parentNode, text)
{
    //如果不传入父节点的话,默认为body
    if(parentNode == undefined)
        parentNode = document.body;
    var childNodes = parentNode.childNodes;
    var results = [];
    //子节点大于零才循环
    if(childNodes.length > 0)
    {
        var length = childNodes.length;
        //循环查找符合text的节点
        for(var i=0;i<length;++i)
        {
            //三种情况,className,id, tagName
            switch(text.substr(0, 1))
            {
            case '.':
                //这两种:parentNode.getElementsByClassName,parentNode.all
//都是后来加上的,如果浏览器这两种方法都不支持,那就只能暴力递归了
                if(parentNode.getElementsByClassName)
                    return parentNode.getElementsByClassName(text.substr(1));
                else if(parentNode.all)
                {
                    var finded = [];
                    var jlength = parentNode.all.length;
                    for(var j=0;j<jlength;++j)
                        if(parentNode.all[j].className == text.substr(1))
                            finded.push(parentNode.all[j]);
                    return finded;
                }
                //以上两种方法都不支持,直接判断
                if(childNodes[i].className == text.substr(1))
                    results.push(childNodes[i]);
                break;
            case '#':
                return [document.getElementById(text.substr(1))];
            default:
                return parentNode.getElementsByTagName(text);
            }
            //判断完后,把当前子元素的子元素传入$findChilds进行递归查找,返回的结果直接和现在的结果合并
            results = results.concat($findChilds(childNodes[i], text));
        }
    }
    return results;
}  

String.prototype.vtrim = function() {
      return this.replace(/^\s+|\s+$/g, '');
}  

function $g(text)
{
    //按照空格分割参数
    var values = text.vtrim().split(" ");
    var length = values.length;
    //如果只有一个选择参数的话,就直接调用dom方法返回结果。
    if(length == 1)
        switch(values[0].substr(0, 1))
        {
        case "#":
            return document.getElementById(values[0].substr(1));
        case ".":
            if(document.getElementsByClassName)
                return document.getElementsByClassName(values[0].substr(1));
        default:
            return document.getElementsByTagName(values[0]);
        }
    //每次迭代都会产生许多符合参数的结果节点,这里结果节点的名称为parentNodes,第一次循环默认为body
    var parentNodes = [document.body];
    //外层循环为迭代每个传入的参数
    for(var i = 0; i < length; ++i)
    {
        var jlength = parentNodes.length;
        var results = [];
        //这里如果values的长度为零的话,
        //就说明是多出来的空格,
        //例如:$g("      .content");这种情况不执行代码直接跳入下一循环
        var tmpValue = values[i].vtrim();
        if(tmpValue.length <= 0)
            continue;
        //内层循环为迭代每个结果节点,
        //在结果节点中查找符合选择条件的结果。当然第一次为body
        for(var j=0;j<jlength;++j)
        {
            //$findChilds就是上边的那个函数,就是选择某个节点的子节点的
            var result = $findChilds(parentNodes[j], values[i].vtrim());
            var rlength = result.length;
            //因为返回的有时候是html容器,无法直接和数组concat所以倒入数组,这里有优化空间,但暂不考虑性能先这么做
            for (var k = 0; k < rlength; ++k)
                results.push(result[k]);
        }
        //没有结果,立即返回undefined
        if(results == undefined || results.length <= 0)
            return undefined;
        //最后一次循环就直接返回结果数组,但是如果最后一个选择条件是选择id的话,那就不返回数组直接返回dom对象了
        if (i == length - 1)
        {
            if (values[i].substr(0, 1) == "#")
                return results[0];
            return results;
        }
        parentNodes = results;
    }
}

经过在ff ie6下的测试 单纯的选择id比jquery要快很多,
其他的部分选择模式我测试的少数比jquery要快。
当然测试不可能全面,还可能会有bug,而且不支持类似于.content:first-child这样的伪类选择。

前端开发博客搜索

这是一个搜索前端博客的插件,目前全手工收录了150个国内外的前端 开发者博客及相关站点!是方便查找前端资料的好帮手!你可以看到:当你访问这个页面时,你的IE7+或者Firefox2+右 上角的搜索工具栏中多了个前端博客搜索,而在Google chrome4.0+你 可以以chrome自己的方式方便的使用它.是的,通过它你可以直接在浏览器的搜索栏里搜索我已收录的前端博客的文章资料,一切就是这么简单!

地址:http://s.princeb4d.com/