资讯频道 → Web前端
阅读更多

28顶
0踩

Web前端

转载新闻 2013年前端开发者如何提升自己

2012-12-28 16:07 by 副主编 WnouM 评论(18) 有16541人浏览
css javascript 技能 html5
大部分人非常在意个人在技术上的提升。但是保持对新技术的了解是一项不小的挑战， 毕竟我们需要的信息在数量上过于庞大。2012年里，伴随着前端发展的是大量的革命性突破和对前端的重新定义。

我们在实践的路上飞速前进，具体的进步体现在使用抽象化，优秀的代码质量，维护性上的提升以及更好的性能。如果你实在忙到没有时间来跟上最新的技术，不用担心。

随着假日的来临，我们就有了一些空闲的时间可以自己支配，我想，如果我把我收集的前端相关的精品讨论列表分享出来，那一定会对大家有一些帮助。你不需要把所有的都阅读一遍，但是这些相关的建议会让你了解更多相关的知识，为明年成为一名更好的前工程端开发师做准备。

以下是一些关于前端开发的优秀的PPT，你可以通过文中的链接来访问。

一、基础部分

走在技术前沿的方法

PPT：How to Stay Up to Date on Web Stuff, Chris Coyier

即使技术相关的理念会不断变化，我们依然可以做到让自己处于技术的前沿。



确保你的开发模式已经跟上时代

PPT：A New Baseline for Front-End Developers, Rebecca Murphey

曾经在我们编辑文件的时候，本地测试完然后传到ftp上是最常规的做法。我们通过一个前端是否能编写一个兼容ie6的页面来判断他的前端水平。我们在html，css和javascript中的技术都不够强悍。

这样的情况在近几年有了很大的转变，随着工作方式的改进和各类工具的推出。前端开发越来越受到重视，这个主题讲解了前端在开发中的新起点。



二、前端开发工程师的新起点

理解浏览器在屏幕后面的工作原理

PPT：So, You Want to Be a Front-End Engineer, David Mosher (Video)

有些人会说，浏览器是他所知道的开发平台中最不稳定的一个。如果你是一个客户端开发工程师，理解浏览器内部工作原理会帮助你作出更好的决定，并且你也会赞叹那些最佳实践背后的种种辩论。在这个今年最好的主题之一里，david mosher会待你了解浏览器的解析和页面的渲染。



了解web平台现在需要提供什么

PPT：Tooling for the Modern Web App Developer, Addy Osmani

web在不断的进化，了解这个平台中新出的技术不是一件容易的事情。html5的新特性让我们可以构建一个完全崭新的web应用，包含很多以前无法实现的特性（至少，在没有插件的情况下）。

在这个主题中，我的队友eric会带你了解html5的痛苦边缘，关注很多解决现实世界问题的方案。你会了解媒体流，设备输入，现代css设计，媒体捕捉，文件i/o等等。



三、工作方式

web app开发工程师的工作方式

无论你在使用coffeescript还是javascript，less还是sass，构建一个好的web应用在现在需要大量引用外部资源，框架，工具和结合工具来将他们整合到一起。简单地说，你需要一个打屁股用的实用腰带。

在这个主题中，你会了解到当前前端系统的概况，并学习到一个新工具来整合这些系统，叫做yeoman。

你还可以访问这个主题的扩展版本。

PPT：Tooling For The Modern WebApp Developer



web设计师的工作方式

PPT：A Modern Web Designer’s Workflow, Chris Coyier (Video)

今天我们对web构架师的要求很高。如果在以前，这个岗位名称已经表达了它所对应的工作，但是现在不仅仅是视觉设计岗位，甚至涉及到交互的构建。设计师需要考虑不同形状，不同尺寸，不同连接方式的不同设备，并且这些设备下都要能正常工作。

作为一个设计师，你通常需要在团队之间沟通和分享代码，并且需要了解很多不同的技术。在这个主题中，chris coyier会说到很多令人赞叹的工具来帮助手头的工作更加顺利地完成，还会讨论应该做些什么来提供一个高水准的现代工作流。



移动web开发的工作方式

PPT：Mobile Web Developers Toolbelt, Pete Le Page (Video)

移动端开发和PC端开发有很大的不同，这个主题讲述了各种工具来让移动web开发更加方便，让移动web开发更加容易。



如何调试

PPT：Secrets of the Chrome DevTools, Patrick Dubroy (Video)

深度了解谷歌开发者工具



四、面向未来的开发

CSS

PPT：The CSS of Tomorrow, Peter Gasston

这个主题介绍了CSS给你现在的开发带来了什么，作为一个CSS程序员，如何利用CSS3来实现面向未来的开发。



JAVASCRIPT

PPT：The Future of JavaScript, Dave Herman

了解ES6的新特性，以及使用方式



WEB APPLICATIONS

PPT：Web Components and the Future of Web App Development, Eric Bidelman

如何更好地将各种新技术整合到你的web应用中。



五、CSS

CSS领域中的艺术

PPT：All the New CSS Hawtness, Darcy Clarke

这个主题介绍了最新的CSS实现以及相关的标准，并且学习到这些新的CSS技术是如何改变我们的日常开发。



模块化CSS

PPT：Your CSS Is a Mess, Jonathan Snook

大部分人的CSS代码都是一团糟，在这个主题中，你会知道如何解决CSS的模块化问题，方便管理和维护。



CSS的预处理器

PPT：CSS Pre-Processors, Bermon Painter

如果你还没有用过CSS预处理器，那你就OUT了。这个主题会对比较流行的几个CSS预处理器进行概述。



文档

PPT：A Better Future With KSS, Kyle Neath

本主题介绍了Kyle的一个工具，KSS，用于生成CSS文件的文档和代码格式化。



六、JavaScript

代码风格的重要性

PPT：Maintainable JavaScript, Nicholas Zakas

编写有趣的JavaScript代码和编写专业的JavaScript代码是两码事，在Zakas的这个主题中，你会学习到如何做到编写可持续性维护的JavaScript代码



构建大规模的APP

PPT：SoundCloud’s Stack, Nick Fisher

这个主题中，来自SoundCloud的Nick Fisher会介绍他们公司开发一个大规模JavaScript APP的故事，并且分享他们的开发步骤以及如何提高开发效率。



重新思考应用的结构

PPT：Re-Imagining the Browser With AngularJS, Igor Minar

在这个主题中，你会了解如何将未来Web平台的力量使用到当前的Web应用中。



国际化

PPT：Entschuldigen you, parlez vouz JavaScript, Sebastian Golasch (Video)

这个主题中，Sebastian介绍了从如何定位现实世界中的国际化问题，到如何用优雅的方式进行解决。



模式和原则

PPT：The Plight of Pinocchio, Brandon Keepers

我们需要将JavaScript作为一门真正的语言，就需要能在JavaScript上使用真正的语言会使用的各种最佳实践。JavaScript不再是一门玩具语言。



什么时候来延迟(惰性)加载脚本

PPT：How Late Is Later?, Massimiliano Marcon

我们都知道延迟(惰性)加载脚本可以提高Web应用的加载时间，那么什么时候才是正确的时间来加载脚本呢？



七、移动Web开发

PPT：Creating Responsive HTML5 Touch Interfaces, Stephen Woods (Video | Audio)

如何去解决UI和用户间交互的问题，避免这些陷阱是很多应用开发者在未来需要面对的。



来自滚动条的挑战

PPT：Embracing Touch: Cross-Platform Scrolling, Mark Dalgleish (Video)

滚动效果是最流行的移动页面的方式。可惜滑动的效果总是不能与原生滚动条媲美。我们应该如何在移动浏览器上解决这个问题？



原生，HTML5和混合的应用

PPT：Native, HTML5 and Hybrid Mobile Development, Eran Zinman

这个主题中，Eran分享了他在跨平台开发中的经验。



性能，分布和facebook在HTML5上的实践

PPT：On the Future of Mobile Web Apps, Simon Cross

facebook利用HTML5做了什么？还有什么需要改进？



移动开发的调试工具

PPT：Mobile Debugging, Remy Sharp



响应式设计技术

PPT：Responsive Web Design: Clever Tips and Techniques, Vitaly Friedman

这个主题提供了响应式设计实现的概述。



八、Web Apps

离线的web应用

PPT：Offline Rules, Andrew Betts (Video)

如何在Web应用中做到客户端的存储，并且如何将其用在提高网站的体验上。



STATE OF THE ART

PPT：Building Web Apps of the Future: Tomorrow, Today and Yesterday, Paul Kinlan (Audio)

Paul介绍了如何构建面向未来的web app。



客户端存储

PPT：Storage in the Browser, Andrew Betts



应用缓存

PPT：Application Cache: Douchebag, Jake Archibald (Video)

如何利用Application Cache来构建你的网站



九、性能

CSS

PPT：High-Performance CSS, Paul Irish

找出那些影响页面性能的CSS，比如引发浏览器绘制至少多70毫秒的box-shadow，以及解决方案。



PPT：GitHub’s CSS Performance, Jon Rohan



避免JANK

PPT：Jank-Free: In Pursuit of Smooth Web Apps, Tom Wiltzius

JANK是指当动画顿卡，特效执行缓慢，或者页面滚动慢时的一种状态。该主题介绍了如何避免这些状态。



Web

PPT：Building Faster Websites, Ilya Grigorik

如何在网站的角度考虑整体性能的提升。



JavaScript

PPT：Breaking the JavaScript Speed Limit With V8, Daniel Clifford

如何打破V8执行脚本的速度限制。



十、测试

理解代码的不好的原因

PPT：Why Our Code Smells, Brandon Keepers (Video)

这个主题中，Brandon会介绍他日常的代码，寻找那些会引起问题的劣质代码，理解为什么会出现这些代码，并且这些代码意味着什么，最后介绍如何对其进行重构。



CURRENT STATE OF THE ART

PPT：JavaScript Testing: The Holy Grail, Adam Hawkins (Video)

如何利用测试工具，来保证一个应用的体验。



提高代码的可测试性

PPT：Writing Testable JavaScript, Rebecca Murphey (Audio)



十一、总结

花在思考自己技术提升上的时间是非常值得的。磨练的越多，你就更有机会去成为一名优秀的工程师。

这个列表不一定会覆盖今年所有优秀的PPT，不过还是希望能给大家提供一些指引。去阅读一些你感兴趣的。这样的阅读会提高你的能力，也希望能真正为你的日常开发提供帮助。

最后，祝大家享受节日，新的一年有更多的进步和突破。

原文：Talks To Help You Become A Better Front-End Engineer In 2013（译文来自w3ctech）
  • 大小: 25.8 KB
  • 大小: 22.5 KB
  • 大小: 44.2 KB
  • 大小: 13.5 KB
  • 大小: 18.7 KB
  • 大小: 11.8 KB
  • 大小: 15 KB
  • 大小: 24 KB
  • 大小: 69.1 KB
  • 大小: 18.6 KB
  • 大小: 10.5 KB
  • 大小: 36.5 KB
  • 大小: 57.6 KB
  • 大小: 26.7 KB
  • 大小: 32 KB
  • 大小: 31 KB
  • 大小: 16.2 KB
  • 大小: 25.1 KB
  • 大小: 36.3 KB
  • 大小: 56 KB
  • 大小: 40.1 KB
  • 大小: 54.7 KB
  • 大小: 26.3 KB
  • 大小: 16.1 KB
  • 大小: 17.9 KB
  • 大小: 29.3 KB
  • 大小: 66.6 KB
  • 大小: 35.1 KB
  • 大小: 37.1 KB
  • 大小: 27.7 KB
  • 大小: 32.9 KB
  • 大小: 12.3 KB
  • 大小: 10.4 KB
  • 大小: 9.9 KB
  • 大小: 12.8 KB
  • 大小: 17.4 KB
  • 大小: 55.5 KB
  • 大小: 79.1 KB
  • 大小: 48.7 KB
来自: w3ctech
28
顶
0
踩
评论 共 18 条 请登录后发表评论
18 楼 ahead_zhan 2013-01-06 14:52
很实用标记下
17 楼 sukiyuki 2013-01-06 12:38
The web can do that?!的链接好像错了
16 楼 jackra 2013-01-06 09:45
这是嘛啊？
15 楼 ylzyd12345 2013-01-06 09:08
MARK             
14 楼 musicbox95351 2013-01-05 14:00
不得不佩服牛人们的学习能力。
13 楼 dibov 2013-01-05 09:37
还有的学啊！
12 楼 selvemen 2013-01-05 08:55
very good
11 楼 lzq478809869 2013-01-04 17:15
  good
10 楼 vtaminn 2013-01-04 08:49
很好。很强悍！
9 楼 rayzy1991 2013-01-01 16:50
革命尚未成功，同志仍需努力！
8 楼 dianthus 2012-12-31 13:38
mark..
7 楼 caizi12 2012-12-31 10:06
”前端开发工程师的新起点“ 配图里面的人物不是“军团要塞”上的火箭兵吗？
6 楼 sdhery 2012-12-30 09:14
文章很长，很好很强大 
5 楼 geminiyellow 2012-12-29 18:47
nm，好多
4 楼 tianshaojie 2012-12-29 11:20
方向大而全
3 楼 topcss 2012-12-29 09:18
很多打不开呀
2 楼 beeke 2012-12-28 21:01
这篇文章很酷
1 楼 xingkongxieyang 2012-12-28 17:34
很好，很强大！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 论一个前端开发者的自我修养

    从2013年开始从事移动前端开发，主攻 Android 和跨平台开发技术，具有丰富的实战项目经验。国内7项专利共同发明人；图书《Android App Hook and Plug-In Technology》译者（中译英）；自2017年底至2019年，担任天津/...

  • 年度回顾：2013年前端技术盘点

    转这篇文章的目的是想提醒自己原来在年初时自己想到的CSS隔离已经有新技术在实现了（shadow Dom），只不过我当初的解决方案是CSS命名空间（声明了命名空间的话就不受外部CSS 影响，这简直和shadow Dom异曲同工【可见...

  • 前端开发工程师如何在2013年里提升自己——阅读笔记

    我在使用Chrome开发者工具的时候，一直苦于没有一篇文章或者书籍详细地介绍它的使用方法。因此看到这篇文章的时候非常高兴。更高兴的是，视频最后又推荐了一些资源，可以帮助我们更好地了解这一工具： ...

  • 前端开发工程师如何在2013年里提升自己

    发表于10小时前| 336次阅读| 来源w3ctech| 2 条评论| 作者吴天豪 ...大部分人非常在意个人在技术上的提升。但是保持对新技术的了解是一项不小的挑战， 毕竟我们需要的信息在数量上过于庞大。

  • 前端开发工程师如何在2013年提升自己

    2012年里，伴随着前端发展的是大量的革命性突破和对前端的重新定义。 我们在实践的路上飞速前进，具体的进步体现在使用抽象化，优秀的代码质量，维护性上的提升以及更好的性能。如果你实在忙到没有时间来跟上最新的...

  • 20个为前端开发者准备的文档和指南

    小编推荐：Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多...它是一个交互式的站点,演示了如何在Firefox开发者版本里使...

  • 26个开发者常用必备网站汇总推荐

    index/feed 刷题 牛客网 牛客网是互联网求职神器,C++、Java、前端、产品、运营技能学习/备考/求职题库,在线进行百度阿里腾讯网易等互联网名企笔试面试模拟考试练习,和牛人一起讨论经典试题,全面提升自己。...

  • 前端开发者不得不知道的18个常用的网站

    1.npm NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种...允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用 界面如下： 2.Express ...

  • 2019Thinking(上) -- 一个前端开发者的个人思考

    以下内容多为自己平时积累而来，思考和结论正确与否纯个人观点，希望对大家有所感悟和触发~~~ 先写下两个观点和感悟： 每一项技术的诞生都是为了解决现有技术的一些弊端或满足现有发展的诉求；技术的发展会推动...

  • 前端开发者的基本要求

    突然我意识到，若放在几年前，我写作的过程中随口提到的Node，npm，Homebrew，git，测试还有产品构建，会把我魂都吓没了。 曾经有段时间，一个前端开工程师基本的工作流程是：编辑文件，本地测试下

  • 前端开发者，2017 年你应该学习什么

    这样不仅会提升我们的工作质量和我们所创造的价值 —— 还将切实地帮助我们更快理解这些新的工具。 本文融合了我的个人经历以及对新一年的希冀。正如我想热切表达自己想法一样，我也期待能在下方的评论表单中看到...

  • 2020年Top 100开发者工具列表汇总

    StackShare是一个开发者工具及服务分享平台，成立于 2013 年，随着开发者们的不断加入，汇集了大量的优质工具。 该网站汇总了以往 30 多万个技术堆栈中的使用情况，分析了 800 万个数据点，跟踪了 320 万以上的..

  • 前端开发者不得不知道的41个常用的网站，因为这41个网站我成了别人眼中的巨佬

    主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图） 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它 ...

  • 【译】前端开发者的基本要求

    前几天我为一个项目写README文档，我希望其他开发者能够看到这个项目，并从中学到一些东西。突然我意识到，若放在几年前，我写作的过程中随口提到的Node，pnm，Homebrew，git，测试还有产品构建，会把我魂都吓没了。...

  • 2013年前端开发工具最强盘点

    本文盘点了2013年慧都网站所有发布的关于Web和前端开发的文章，全面覆盖了原型设计、界面设计、响应式设计、HTML5&JavaScript开发工具等最新资源。下面小编已将所有内容分类整理，便于大家阅读： 原型设计 用户...

  • 基于YOLOv5工地上安全帽佩戴的检测源码+训练好模型+数据集.zip

    YOLO高分设计资源源码，详情请查看资源内容中使用说明 YOLO高分设计资源源码，详情请查看资源内容中使用说明 YOLO高分设计资源源码，详情请查看资源内容中使用说明 YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明YOLO高分设计资源源码，详情请查看资源内容中使用说明

  • 2011管理类联考199综合能力全国硕士研究生招生考试解析.pdf

    考研管理类联考综合能力答案解析，考研真题，考研历年真题，考研管理类联考历年真题，真题解析。

  • NIUCLOUD-ADMIN 是一款快速开发SaaS通用管理系统后台框架.zip

    springboot框架 一、Spring Boot基础应用 Spring Boot特征 概念： 约定优于配置，简单来说就是你所期待的配置与约定的配置一致，那么就可以不做任何配置，约定不符合期待时才需要对约定进行替换配置。 特征： 1. SpringBoot Starter：他将常用的依赖分组进行了整合，将其合并到一个依赖中，这样就可以一次性添加到项目的Maven或Gradle构建中。 2,使编码变得简单，SpringBoot采用 JavaConfig的方式对Spring进行配置，并且提供了大量的注解，极大的提高了工作效率，比如@Configuration和@bean注解结合，基于@Configuration完成类扫描，基于@bean注解把返回值注入IOC容器。 3.自动配置：SpringBoot的自动配置特性利用了Spring对条件化配置的支持，合理地推测应用所需的bean并自动化配置他们。 4.使部署变得简单，SpringBoot内置了三种Servlet容器，Tomcat，Jetty,undertow.我们只需要一个Java的运行环境就可以跑SpringBoot的项目了

  • 2024-2030全球及中国冷冻有机毛豆行业研究及十五五规划分析报告.docx

    2024-2030全球及中国冷冻有机毛豆行业研究及十五五规划分析报告

Global site tag (gtag.js) - Google Analytics