Coder Social home page Coder Social logo

my-roadmap's Introduction

my-roadmap

我的开发者 线路图谱

原版

繁体版

developer-roadmaps-all-in-one-place

REACT

(+) 表示原版没有,但我认为很重要的

基础

ssh

http/https APIs

基本命令行

编辑器(+)

编译原理(+)

学会专研问题

数据结构和算法

字节编码

设计模式

Github

前端

HTML

  • 基础知识 & semantic HTML(语义化HTML)
  • 将页面划分为区段 & 如何正确配置DOM
  • 制作甚少5个HTML页面,主要关注结构
  • 先不用管他是否漂亮

css

  • 基础css
  • 学会使用网格和弹性盒子(Flexbox)
  • 媒体查询(Media Queries)和响应式网页
  • 给上步中你做的网页配一下样式
  • Debug(+)

javascript

基本语法 & 基础结构 操作DOM 基本概念 提升hoisting/事件冒泡event bubbling, 原型prototype AJAX (XHR) ES6+ 新特性及组件化JS

HTML, CSS, and JavaScript JavaScript: Getting Started JavaScript Fundamentals JavaScript Objects and Prototypes Practical Design Patterns in JavaScript Advanced Techniques in JavaScript and jQuery JavaScript Best Practices Rapid ES6 Training

JQuery-可选

设计入门(+)

制作响应式交互网页

在Github找一些项目

  • 改改他们的demo页: 优化UI,改成响应式或是改进设计
  • 看下有什么 issues 你可以解决
  • 学习最佳实践,并重构代码
  • 学习更多的git知识

给自己点个赞,因为你可以接活了

package manager 套件管理 npm yarn, 选一个就可以

试用一些包

在你上面的页面里加入一些包 如: 加个 toast 插件,当用户点一下,给他弹个toast消息 做个登录表单,用户验证插件来验证一下 试一下更新不用的插件版本

css 预处理

预处理给css提供更多功能,看下他都给提供些什么功能 sass(推荐) postcss less sytlus

css框架

bootstrap materialize css bulma

css 架构,了解他们的差异

BEM(推荐) OOCSS SMACSS SUITCSS Atomic

构建工具(build)

npm scripts 任务执行器(task runners) gulp

ESLint JSlint JSHint JSCS

Webpack 应用程序/函数 Rollup 函数库 Parcel

写些东西并在 github 和 npm 上发布

框架

react

react有自己的 roadmap

中文

vue vuex

VUE大型SPA项目管理

angular

rx.js 不用angular也可以别的地方使用

ngrx

设计模式

MVVM最佳解读和实践|done

练习

性能测量及优化 interactivity time page speed index lighthouse分数

测试

Jest Mocha Protractor karma Enzyme

Progressive Web App 渐进式应用

service worker

静态检查

TypeScript Flow

服务端渲染

react next.js after.js angular jniversal vue.js nuxt.js

其它

Canvas HTML5 APIS SVG Sourcemaps 函数式编程 TC39

移动端(+)

原版没有覆盖移动端,很移动端很重要

语言

java/kotlin ooc/ native: react/Wexx

H5

框架/组件

发布

后端

选一个语言

脚本语言 python ruby php node.js/typescript 推荐

Node.js: Getting Started Learning To Program - Part 1: Getting Started NPM Playbook Building a JavaScript Development Environment Introduction to Node.js Building Web Applications with Node.js and Express 4.0 (UPDATE) RESTful Web Services with Node.js and Express Node.js Testing Strategies Node Application Patterns Advanced Node.js

函数式语言 elixir scala erlang clojure haskell 其它 java .net golang rust

设计文档(+)

how-to-write-a-good-software-design-document why A design doc — also known as a technical spec — is a description of how you plan to solve a problem. 设计文档用于描述你解决问题的方案 What Title and People(author) Overview It should be 3 paragraphs max. Context A description of the problem at hand, why this project is necessary, what people need to know to assess this project, and how it fits into the technical strategy, product strategy, or the team’s quarterly goals. Goals and Non-Goals Milestones Current Solution user story Proposed(计划) Solution Alternative Solutions Monitoring and Alerting(监控与报警) Cross-Team Impact How will this increase on call(待命) and dev-ops burden(负担)? How much money will it cost? Does it cause any latency regression to the system? Does it expose any security vulnerabilities? What are some negative consequences and side effects? How might the support team communicate this to the customers? Discussion Detailed Scoping and Timeline How to write it Write as simply as possible Simple words Short sentences Bulleted lists and/or numbered lists Concrete examples, like “User Alice connects her bank account, then …” Add lots of charts and diagrams Pro Tip: remember to add a link to the editable version of the diagram under the screenshot, so you can easily update it later when things inevitably change Include numbers Try to be funny Do the Skeptic(怀疑者) Test Do the Vacation Test(假期测试)

命令行应用

  • ls
  • 爬虫
  • 找个每天都做的任务,自动之

pm 套件管理

node.js npm yarn ruby gems python pip

编码规范和最佳实践

PHP-FIG PSRs 安全相关

制作一些库给别人使用

制作一些库 或帮助开源项目改些issue

测试

unit test integration test

node.js mocha chai sinon mockery ava jasmine

测试实践

覆盖率

Relational Database 关系型数据库

oracle mysql mariadb postgresql mssql

实践

注册/登录 CRUD BLOG

测试 index storage engine analyze the queries

框架

hapi.js express.js

实践

使用框架来写

Nosql

why? 有什么不同 mongodb rethinkDB Cassandra couchbase

缓存

redis memcached

RESTFUL api

认证 authentication 授权 authorization

OAUTH Basic Authentication Token Authentication JWT OpenID

消息中间件 message broker

robbitmq (推荐) kafka

搜索引擎

elasticSearch solr sphinx

docker

web 服务器

apache nginx caddy MS IIS

RPC RMI

Dubbo RMI

(Remote Method Invocation) 远程方法调用

如何快速开发一个 Dubbo 应用

web socket

graphQL

图形数据库 Graph Databse

其它

性能分析 Profiling 静态分析 Static Analysis 领域驱动设计 DDD 简单对象存贮 SOAP

运维

语言

Pyhone ruby node.js go rust c/c++

操作系统

进程 process 线程 thread 套接字 socket I/O 管理 虚拟化 内存/存贮

服务器

ubuntu linux/unix/windows 终端 bash vim/nano/powerShell/Emacs gcc/make 系统性能 nmon iostat sar vmstat 文字处理 awk sed grep sort uniq cat cut echo fmt tr nl egrep fgrep wc 监控 ps top htop atop lsof 网络 nmap tcpdump ping mtr traceroute airmon airodump dig iptables 其它 strace dtrace systemtap uname df history

网络与安全

DNS OSI model HTTP HTTPS FTP SSL/TLS

基础服务

反向代理 缓存服务 正向代理 负载均衡 防火墙 web服务器 IIS Apache Nginx Tomcat caddy

基础构建编程

容器 docker rkt LX 配置管理 Ansible Salt Chef Puppet 基础设施供给 Terraform cloud Formation kubernetes 和我一步步部署 kubernetes 集群

CI/CD 工具

Jenkins Travis CI Teamcit Drone Cirle CI

监控应用和基础组件

基础组件监控 nagios icinga datadog zabbix monit 应用监控 AppDynamics newrelic 日志管理 ELK Stack Graylog splunk patertrail

云服务

google cloud azure digital ocean heroku

my-roadmap's People

Contributors

azhao1981 avatar

Stargazers

Ryan Nixon avatar

Watchers

James Cloos avatar  avatar Ryan Nixon avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.