GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - phodal/fe: 《我的职业是前端工程师》 - Ebook:I'm a FrontEnd Developer

BranchesTags
Open more actions menu

Latest commit

 

History

267 Commits
267 Commits

Folders and files

NameName
Last commit message
Last commit date
.github
.github
 
 
api
api
 
 
arts
arts
 
 
build
build
 
 
chapters
chapters
 
 
code
code
 
 
css
css
 
 
extends
extends
 
 
images
images
 
 
img
img
 
 
template
template
 
 
.gitignore
.gitignore
 
 
.nojekyll
.nojekyll
 
 
CNAME
CNAME
 
 
LICENSE
LICENSE
 
 
Makefile
Makefile
 
 
README.md
README.md
 
 
ebook.md
ebook.md
 
 
epub.css
epub.css
 
 
index.html
index.html
 
 
listings-setup.tex
listings-setup.tex
 
 
style.css
style.css
 
 

Repository files navigation

我的职业是前端工程师

2017 年 1 月份,看完村上春树的新书《我的职业是一个小说家》,我便萌发了写一个《我的职业是前端工程师》系列文章的想法——以个人视角来看前端领域的各种技术。整个系列的文章大概有 15 篇左右,从我是如何成为一个前端工程师,到各种前端框架的知识。

在线阅读地址:http://ued.party/

关注我的微信公众号(扫描下面的二维码或搜索 Phodal),回复书籍,可下载电子书版本

QRCode

目录

  • 关于作者
  • 序
    • 为什么不应该写一本前端书籍?
    • 本书在讲些什么
    • 关于《我的职业是前端工程师》
  • 我要成为一个前端设计师
    • 漂亮的前台
    • 我要成为一个前端设计师
  • 入门不是应该很简单吗?
    • 前端之路
    • 我的前端入门
      • 我的第一个网站
      • Copy/Paste from Cookbook
      • 开发工具
      • jQuery 是最好用的
  • 如何选择合适的前端语言
    • JavaScript 语言的变化
      • JavaScript
      • ES6+
      • TypeScript
    • 小结
  • 如何选择合适的前端框架
    • 前端的选择恐惧症
      • 技术选型:不仅仅受技术影响
      • 上线时间影响框架
      • 锤子定律:你需要更大的视野
    • 前端框架一览
      • jQuery, 使用生态解决问题
      • Backbone.js,脊椎连接框架
      • Angular,一站式提高生产力
      • React,组件化提高复用
      • Vue.js,简单也是提高效率
      • 小结
    • 总结
  • 必会的六个调试技能
    • 我的调试入门
    • 基本调试技巧:实时调试
      • 实时调试样式
      • 实时调试代码
    • 移动设备调试
      • 模拟真机:设备模拟器
      • 真机调试:Device Inspect
    • 网络调试
      • 网络调试
      • 使用插件
    • 小结
  • 如何以正确的姿势练习
    • 前端项目的练习过程
      • Output is Input
      • 练习框架、技术的时机
    • 练习的过程
    • 练习框架、技术的技巧
      • 使用模板
      • 做点什么应用
      • 编写一个博客应用
      • 输入和总结
    • 其它
      • 关于练手项目
  • 前后端分离,你应该知道的八件事
    • 前后端分离
      • 什么是前后端分离?
      • 真的需要前后端分离吗?
      • 前后端分离将遇到的那些挑战
    • 前后端分离的核心:后台提供数据,前端负责显示
      • 输出逻辑:数据显示
      • 不可避免的前端逻辑:表单
  • SEO 优化技巧
    • 搜索引擎优化都是前端的活
    • 如何设计一个高质量的 URL
      • 受 RESTful API 影响 的 URL 设计
      • 手动自定义 URL
      • 详情页 :简单的 URL 生成规则
      • 自动化 URL:分类与多级目录
      • 搜索结果页:将参数融入 URL
    • 自动生成高质量的站点标题
      • 什么是站点标题?
      • 什么才算一个高质量的站点标题?
  • 单页面应用的核心知识
    • 单页面应用的演进
    • 路由:页面跳转与模块关系
    • 数据:获取与鉴权
    • 数据展示:模板引擎
    • 交互:事件与状态管理
      • 组件交互:状态管理
      • 用户交互:事件
  • 客户端存储与模型的艺术
    • 模型与存储
    • 存储
    • 模型的变化
  • 如何优化前端应用性能
    • 博客优化经验:速度优化
      • TTFB 优化
      • 服务器优化
    • 项目优化经验:缓存优化
    • 移动优化经验:用户体验优化
      • 缓存 API 结果
      • 生命周期优化
    • 优化中的反最佳实践
  • 移动应用选型指南
    • Web 应用与混合应用
      • 性能
      • 选型指南
    • React Native
      • 选型指南
    • NativeScript
    • Weex及其他
  • 如何处理好前后端分离的 API 问题
    • 前后端分离 API 的演进史
    • 瀑布式开发的 API 设计
    • API 的协作设计
      • 使用文档规范 API
      • 契约测试:基于持续集成与自动化测试
      • 前端测试与 API 适配器
    • 小结
  • 如何从头开发一个前端应用
    • 前端应用的生命周期
    • 项目准备
      • 技术选型
      • 构建系统
      • 前后端分离设计
    • 实现功能
      • 分析设计图
      • 实现功能
      • 编写测试
    • 上线

前端技能

来源:https://github.com/phodal/awesome-growth

  • 基础
    • HTML / CSS
    • JavaScript
    • DOM
  • 中级篇
    • 数据格式(如JSON、XML)
    • RESTful API交互(如jQuery Ajax,Fetch API,ReactiveX)
    • 正则表达式
    • HTML语义化
    • 命令行
    • Node.js
    • DIV / CSS
    • SCSS / SASS
    • 矢量图形 / 矢量图形动画(如SVG)
    • 单页面应用
  • 高级篇
    • ES6 / TypeScript
    • CSS3
    • 面向对象编程
    • 函数式编程
    • MVC / MVVM / MV*
    • 安全性(如跨域)
    • 授权(如HTTP Basic、JWT等等)
  • 工程化
    • 代码质量(如JSLint / ESLint / TSLint / CSLint)
    • 代码分析(如Code Climate)
    • 测试覆盖率
    • 构建系统(gulp、grunt、webpack等等)
    • 自动构建(脚本)
  • 兼容性
    • 跨浏览器测试 (Chrome,IE,Firefox,Safari等等)
    • 跨平台测试(Windows、GNU/Linux,Mac OS等等)
    • 跨设备测试(Desktop,Android,iOS,Windows Phone)
    • 跨版本测试(同一个浏览器的不同版本)
  • 前端特定
    • CSS / CSS3 动画
    • JavaScript 动画
    • Web字体嵌入
    • Icon 字体
    • 图形和图表
    • CSS Sprite(如glue)
    • DOM操作(如jQuery、React等等)
    • 模板引擎(如JSX、Handlebars、JSP、Mustache等等)
  • 软件工程
    • 版本管理(如git、svn)
    • 包管理(如npm、bower)
    • 依赖管理
    • 模块化(如CommonJS、WebPack)
  • 调试
    • 浏览器调试
    • Debug工具
    • Wireshark / Charles抓包
    • 远程设备调试(如Chrome Inspect Devices)
  • 测试
    • 单元测试
    • 服务测试
    • UI测试
    • 集成测试
  • 性能与优化
    • PageSpeed / Yslow 优化
    • 加载优化(如gzip压缩、缓存等等)
    • 性能测试(特别是移动Web)
    • 可用性
    • 压缩(如Minify、Uglify、CleanCSS等等)
  • 设计
    • 切页面
    • 线框图(Wireframe)
    • 响应式设计
    • 网格布局(Grid Layout)
    • Flexbox布局
  • SEO
    • Sitemap(站点地图)
    • 内部链接建设
    • MicroData / MicroFormat
    • 页面静态内容生成
    • H1、H2、H3和strong使用
    • Title、Description优化
    • 页面静态内容生成

LICENSE

Phodal's Article Phodal's Book

© 2017 Phodal Huang. This code is distributed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License. See LICENSE in this directory.

待我代码编成,娶你为妻可好

About

《我的职业是前端工程师》 - Ebook:I'm a FrontEnd Developer

ued.party/

Topics

ebookfefrontendfrontend-webdevelopmentgithub-booksguidephodalued

Resources

Readme
License
Activity

Stars

2.0k stars

Watchers

115 watching

Forks

246 forks
Report repository

Releases

Sponsor this project

Packages

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.