├── .github └── workflows │ └── nodejs.yml ├── .gitignore ├── .vuepress ├── config.js ├── dir.header.js ├── k8s.header.js ├── op.header.js ├── post.header.js ├── public │ ├── dom-to-image.svg │ ├── favicon.ico │ ├── pay.jpg │ ├── qrcode.jpg │ ├── robots.txt │ ├── we.jpg │ ├── we.png │ └── wechat.jpeg ├── styles │ └── index.styl └── theme │ ├── LICENSE │ ├── components │ ├── AlgoliaSearchBox.vue │ ├── Archive.vue │ ├── Bar.vue │ ├── DropdownLink.vue │ ├── DropdownTransition.vue │ ├── Home.vue │ ├── NavLink.vue │ ├── NavLinks.vue │ ├── Navbar.vue │ ├── Page.vue │ ├── PageEdit.vue │ ├── PageNav.vue │ ├── QR.vue │ ├── Sidebar.vue │ ├── SidebarButton.vue │ ├── SidebarGroup.vue │ ├── SidebarLink.vue │ └── SidebarLinks.vue │ ├── global-components │ └── Badge.vue │ ├── index.js │ ├── layouts │ ├── 404.vue │ └── Layout.vue │ ├── noopModule.js │ ├── qr.jpg │ ├── qr2.jpg │ ├── styles │ ├── arrow.styl │ ├── code.styl │ ├── config.styl │ ├── custom-blocks.styl │ ├── index.styl │ ├── mobile.styl │ ├── toc.styl │ └── wrapper.styl │ └── util │ └── index.js ├── Readme.md ├── about.md ├── assets ├── fallback.png ├── git.jpeg ├── graphql-logo.jpg ├── http-lm-factor.jpg ├── https-0.png ├── https-1.png ├── https-2.png ├── https-3.png ├── https-4.png ├── https-5.png ├── https-6.png ├── jq-juejin-sort.jpg ├── jq-juejin.jpg ├── lodash-get.png ├── optional-chain.jpg ├── response.jpg ├── run-21.jpeg └── walk.jpeg ├── book └── TCP-IP-Illustrated-Volume-1 │ ├── 2-internet-address.md │ ├── 3-data-link.md │ └── 4-arp.md ├── bug ├── Readme.md ├── assets │ ├── elk-db-low-query.png │ ├── sentry-rate-limit-org.png │ ├── sentry-rate-limit-project.png │ └── sentry-rate-limit.png ├── axios-error-context-miss.md ├── df-hang.md ├── es-failed.md ├── es-index.md ├── form-data-412.md ├── imagemin-pngquant-install-error.md ├── mac-git-ignorecase.md ├── meta.json ├── node-module-turndown.md ├── node-visibility.md ├── npm-error.md ├── perf-orm-pagination.md ├── sentry-429.md ├── tailwindcss-upgrade.md └── upstream-miss.md ├── business ├── C-line.md ├── Readme.md ├── arrange.md ├── assets │ ├── difficulty-q.jpg │ ├── exam-arch.drawio.png │ ├── exam-business.drawio.png │ ├── exam-er.drawio.png │ ├── exam-system.drawio.png │ ├── exam-xmind.png │ ├── exam.drawio │ ├── middle-q.jpg │ ├── save-pdf.png │ ├── score.jpg │ └── simple-q.jpg ├── better-doc.md ├── business-get-started.md ├── demo │ ├── fingerprint.html │ └── pagevisibility.html ├── dev-data-create.md ├── edu.md ├── exam-concurrency.md ├── exam-time.md ├── exam.md ├── learn-in-business.md ├── product-fineness.md ├── question.md └── tl-todo.md ├── c ├── .gitignore ├── Readme.md ├── code │ ├── control.c │ ├── exec.c │ ├── fork.c │ ├── hello.c │ ├── pointer.c │ ├── socket_client.c │ ├── socket_server.c │ ├── thread.c │ ├── thread_basic.c │ ├── type.c │ └── void.c ├── pointer.md ├── process.md ├── socket.md ├── thread.md └── type.md ├── code ├── Promise-race │ ├── Readme.md │ └── demo.js ├── Readme.md ├── apollo-react │ └── index.md ├── clone-deep │ └── index.js ├── graphql-tag │ ├── Readme.md │ └── demo.js ├── jsonp │ ├── Readme.md │ ├── demo.html │ ├── index.js │ └── server.js ├── meta.json ├── promise-all │ ├── Readme.md │ └── demo.js ├── promise-map │ ├── Readme.md │ └── demo.js ├── promise │ ├── Readme.md │ └── demo.js └── qs │ └── index.js ├── db ├── Readme.md ├── explain.md ├── index.md ├── isolate.md ├── multi-db.md ├── nf.md ├── on-demand.md ├── poll.md ├── slow-query.md ├── string.md └── wal.md ├── douyin ├── 2021-company.md ├── Readme.md ├── apifox-echo.md ├── bundle.md ├── caption.md ├── get.md ├── http-cache.md ├── juejin.md ├── kaiduan.md ├── minify.md ├── picture.md ├── promise.md └── weiya.md ├── duanzi ├── bianque.md └── ping-an.md ├── extensions └── api.md ├── flutter-guide ├── Readme.md ├── launch.jpg ├── material1.jpg └── material2.jpg ├── frontend-engineering ├── 2021-fe-predict.md ├── Readme.md ├── assets │ ├── ast.jpg │ ├── ast.png │ ├── cypress.gif │ ├── eslint-tip.jpg │ ├── eslint-vscode.jpg │ ├── eslint.jpg │ ├── http-cache-2.png │ ├── http-cache-control.jpg │ ├── http-cache.png │ ├── http-lm-factor.jpg │ ├── node_modules.jpg │ ├── npm-i.png │ ├── npm-search.png │ ├── npm-trend.png │ ├── npm.svg │ ├── render.jpg │ ├── storybook.gif │ └── uglify-code.png ├── ast.md ├── audit.md ├── bundle-js.md ├── bundle.md ├── cache.md ├── canary.md ├── cdn-and-metrics.md ├── cdn.md ├── chunk-spliting.md ├── cicd.md ├── client-only.md ├── config-in-packagejson.md ├── corejs.md ├── demo.md ├── demo │ ├── config.json │ └── sum.js ├── deploy.md ├── docker-simple.md ├── docker.md ├── eslint-core.md ├── eslint.md ├── esm.md ├── extract-css.md ├── feature-deploy.md ├── githooks.md ├── guide.md ├── html-webpack-plugin.md ├── http-cache.md ├── index-html-and-http-cache.md ├── json.md ├── local-https.md ├── lock.md ├── meta.json ├── monorepo.md ├── node_modules.md ├── npm-build.md ├── npm-ci.md ├── npm-devtool.md ├── npm-install.md ├── npm-outdated.md ├── npm-publish.md ├── package.md ├── patch-package.md ├── pnpm.md ├── quick-find-npm.md ├── react-perf.md ├── require-resolve.md ├── rsync-deploy.md ├── script.md ├── sourcemap.md ├── store.md ├── style.md ├── tech-sensitive.md ├── tree-shaking.md ├── uglify.md ├── webpack-build-time.md └── webpack-runtime.md ├── geo ├── Readme.md ├── assets │ └── 1600px-World_Time_Zones_Map.png └── intro.md ├── go └── hello.md ├── graphql-guide ├── Readme.md ├── apq.md ├── cache.md ├── client-cache.md ├── graphql-and-ssr.md ├── hello-core.md ├── hello.md ├── http.md ├── resolve.md ├── schema.md ├── structed-error.md ├── structed-log.md └── ts.md ├── growth ├── Readme.md ├── assets │ ├── lock.png │ ├── ncov.png │ └── node-schedule.svg ├── blog-to-wechat.md ├── dom-to-image.md ├── meta.json ├── screenprint.md └── wechaty-start.md ├── hutui.md ├── index.html ├── juejin └── tu.md ├── k8s ├── Readme.md ├── assets │ ├── k9s-metrics.jpg │ ├── nginx-https.jpg │ └── nginx.png ├── conf │ ├── letsencrypt-prod.yaml │ ├── local-storage.yaml │ ├── nginx.yaml │ └── pg-pv.yaml ├── deploy-drone.md ├── deploy-fe-with-helm.md ├── dns-based-service-discovery.md ├── elastic-stack.md ├── es.md ├── gitlab.md ├── helm-legacy.md ├── helm.md ├── helm │ ├── es │ │ ├── pv.yaml │ │ └── values.yaml │ ├── gitlab │ │ └── values.yaml │ ├── openvpn │ │ ├── create.sh │ │ └── values.yaml │ └── sentry │ │ └── values.yml ├── https.md ├── ingress.md ├── install-docker.md ├── install-kubeadm.md ├── install-master-node.md ├── install-worker-node.md ├── k8s-cheatsheets.md ├── linux-command.md ├── local-kubectl.md ├── metrics-server.md ├── pod.md ├── prepare.md ├── pvc.md ├── stateful-application.md ├── temp.md └── workload.md ├── life ├── 10000-fans.md ├── 2019-day.md ├── 2019-summary.md ├── 2020-half-year-summary.md ├── 2020-summary.md ├── 20210501.md ├── assets │ ├── bazongbaheng.jpeg │ ├── beiwai.jpg │ ├── chang-tianchi.jpg │ ├── chang-yezi.jpg │ ├── doufunao.jpg │ ├── duanxiu.jpg │ ├── fenghuangling.jpg │ ├── gaotie.jpeg │ ├── geek.png │ ├── git-ncov.png │ ├── graphql.png │ ├── jianli.jpg │ ├── jiaoda.jpg │ ├── logo.png │ ├── mdtu.png │ ├── minda.jpeg │ ├── node.png │ ├── project.drawio.png │ ├── qiong-haixia.jpg │ ├── qiong-yezi.jpg │ ├── star.jpeg │ ├── topo.jpg │ ├── yangtaishan.jpg │ ├── yizhijianli.png │ └── yunmengshan.jpg ├── city.md ├── dog-thief.md ├── flower-in-spring.md ├── free.md ├── geek.md ├── geo-get.md ├── learn.md ├── majiang.md ├── meta.json ├── plan-202007.md ├── side-project.md ├── sunflower.md ├── sunset.md ├── taobao.md ├── taohua.md ├── temp.md ├── tongqin.md ├── yizhijianli.md ├── zhibo.md └── zoo.md ├── mac └── readme.md ├── main.js ├── markdown ├── Readme.md ├── highlight.md └── mermaid.md ├── math └── algebra.md ├── netlify.toml ├── newline.txt ├── no-vps ├── Readme.md ├── api.md ├── assets │ ├── action-result.png │ ├── action-secret.png │ ├── action-select.jpg │ ├── action-setup.jpg │ ├── action-start.png │ ├── action-workflow.png │ ├── ali-price.png │ ├── alioss-cdn.png │ ├── alioss-cname.png │ ├── alioss-domain.png │ ├── alioss-https.png │ ├── alioss-proxy.png │ ├── alioss-rewrite.png │ ├── alioss-rewrites.png │ ├── buy.jpg │ ├── cdn-cache.jpg │ ├── deploy-blog.jpg │ ├── dev-env.png │ ├── lock.png │ ├── netlify-2.jpg │ ├── netlify-build-options.jpg │ ├── netlify-custom-domain.jpg │ ├── netlify-new-site.jpg │ ├── netlify-ok.png │ ├── netlify-repo-access.jpg │ ├── netlify-step2.jpg │ ├── releases-overview.png │ ├── sentry-issue.png │ ├── sentry-memory.png │ ├── sentry-ok.png │ ├── sentry-seen.png │ ├── sls.gif │ ├── tmux-help.jpg │ ├── tmux-split.gif │ └── vercel-import.png ├── deploy-fe-with-alioss.md ├── deploy-fe-with-netlify.md ├── github-action-guide.md ├── if-you-want-a-blog.md ├── if-you-want-a-fe-project.md ├── images-in-blog.md ├── meta.json ├── project.md ├── sentry.md ├── seo.md ├── serverless-fe.md ├── serverless.md ├── sls-koa.md ├── sls-md.md ├── sls-next.md └── sls-view.md ├── node-practise ├── index.md └── temp.md ├── node ├── Readme.md ├── addon.md ├── assets │ ├── alert.png │ ├── cli.png │ ├── cors-simple.drawio.png │ ├── cypress.gif │ ├── htop-pid.png │ ├── koa-module.jpg │ ├── koa.jpg │ ├── log-jq.jpg │ ├── log-requestid.png │ ├── log.jpg │ ├── md-cli.png │ ├── module-koa.png │ ├── module-wrapper.png │ ├── module.png │ ├── prettier-editor.png │ ├── prettier-lang.png │ ├── prettier.png │ ├── require-cache.png │ ├── require.png │ ├── storybook.gif │ ├── svg-encode.png │ └── yangcong.png ├── body-parse.md ├── buffer.md ├── child-process.md ├── ci-release.md ├── cli.md ├── cls.md ├── cors.md ├── debug-case.md ├── debug-node-source.md ├── debug-tips.md ├── demo │ ├── Dockerfile │ ├── a.out │ ├── app-mem │ │ └── index.js │ ├── async.js │ ├── compute.js │ ├── cors │ │ ├── index.html │ │ └── index.js │ ├── debug │ │ ├── index.html │ │ └── index.js │ ├── echo.js │ ├── error.js │ ├── exec.c │ ├── exec.js │ ├── lib │ │ ├── index.js │ │ └── utils.js │ ├── loop.c │ ├── module │ │ ├── a.js │ │ └── b.js │ ├── require │ │ ├── index.js │ │ └── utils.js │ ├── signal.js │ ├── spawn.js │ ├── tick.js │ └── tick2.js ├── docker.md ├── env.md ├── error.md ├── event-loop.md ├── exec.md ├── exit-code.md ├── form.md ├── fs.md ├── gc.md ├── gyp.md ├── http.md ├── joi.md ├── koa.md ├── log-ES.md ├── log-request-id.md ├── log.md ├── mem.md ├── meta.json ├── mq.md ├── napi.md ├── nexttick.md ├── npm-scripts.md ├── oom.md ├── process.md ├── protolbuffer.md ├── relese-error.md ├── require-intern.md ├── require.md ├── route.md ├── sentry.md ├── stream.md ├── stringify.md ├── system-call.md ├── test.md ├── timeout.md ├── ts-and-babel.md ├── v8-compile-cache.md ├── vscode-debug.md └── web │ └── index.md ├── note └── china │ ├── Readme.md │ ├── anhui.md │ ├── chongqing.md │ ├── guizhou.md │ ├── hebei.md │ ├── hubei.md │ ├── hunan.md │ ├── jiangxi.md │ ├── jilin.md │ ├── meta.json │ ├── shanxi.md │ └── xinjiang.md ├── op ├── .gitignore ├── Readme.md ├── ansible-guide.md ├── ansible-problem.md ├── assets │ ├── action-result.png │ ├── action-secret.png │ ├── action-select.jpg │ ├── action-setup.jpg │ ├── action-start.png │ ├── action-workflow.png │ ├── alioss-cdn.png │ ├── alioss-cname.png │ ├── alioss-domain.png │ ├── alioss-https.png │ ├── alioss-proxy.png │ ├── alioss-rewrite.png │ ├── alioss-rewrites.png │ ├── buy.jpg │ ├── cdn-cache.jpg │ ├── ctop-view.png │ ├── ctop.png │ ├── deploy-blog.jpg │ ├── dev-env.png │ ├── dev.drawio.png │ ├── drone.jpg │ ├── git.jpg │ ├── grafana.jpg │ ├── graphql.jpg │ ├── htop.jpg │ ├── htop.png │ ├── linux_perf_tools_full.png │ ├── lock.png │ ├── netlify-2.jpg │ ├── netlify-build-options.jpg │ ├── netlify-custom-domain.jpg │ ├── netlify-new-site.jpg │ ├── netlify-ok.png │ ├── netlify-repo-access.jpg │ ├── netlify-step2.jpg │ ├── node_modules.jpeg │ ├── node_modules.jpg │ ├── sentry-memory.png │ ├── sentry-ok.png │ ├── tmux-help.jpg │ ├── tmux-split.gif │ ├── traefik-dashboard.png │ ├── traefik.jpg │ ├── vim-ag.gif │ ├── vim-ctrlp.gif │ ├── vim-dark.png │ ├── vim-git.gif │ ├── vim-goyo.png │ └── vim-nerdtree.gif ├── blog-to-wechat.md ├── ctop.md ├── deploy-drone.md ├── deploy-fe-with-docker.md ├── deploy-fe.md ├── deploy-postgres.md ├── deploy-redis.md ├── deploy-sentry.md ├── dev-log.md ├── dev.md ├── dnsmasq.md ├── docker-compose-arch.md ├── docker-compose.md ├── docker.md ├── dockerfile-practice.md ├── git.md ├── htop.md ├── init.md ├── iptables.md ├── jq-sed-case.md ├── jq.md ├── linux-awk.md ├── linux-monitor.md ├── linux-sed.md ├── linux-tcpdump.md ├── openvpn.md ├── ssh-setting.md ├── system-info.md ├── tmux-setting.md ├── traefik-https.md ├── traefik-middleware.md ├── traefik.md ├── vim-setting.md ├── wechat-interview.md ├── when-server-2019.md ├── when-server-2022.md └── when-server.md ├── package-lock.json ├── package.json ├── post ├── 10000.md ├── Grid-Guide │ └── Readme.md ├── Grid-Layout-Common-Usage │ ├── Readme.md │ ├── demo.html │ └── images │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ └── 5.png ├── LF-CRLF.md ├── Postman-for-API-Automated-Testing │ └── index.md ├── a-problem-about-http-cache │ ├── http-cache-decision-tree.png │ ├── http-cache-hierarchy.png │ └── index.md ├── a-problem-with-tar-and-curl.md ├── api-design-inspire-by-graphql.md ├── arrayLike-to-array.md ├── assets │ ├── 101.png │ ├── 204-del.png │ ├── 204.png │ ├── 206.png │ ├── 307-shanyue.png │ ├── 307-stack.png │ ├── 401.png │ ├── 422.png │ ├── feedback.png │ ├── feedback2.png │ ├── gatsby-vs.png │ ├── learn-fe-css.png │ ├── learn-fe-devtools.png │ ├── learn-fe-dom.png │ ├── learn-fe-edit.png │ ├── learn-fe-en-plugin.png │ ├── learn-fe-html.png │ ├── learn-fe-js.png │ ├── learn-fe-pwd.png │ ├── learngit.gif │ ├── pkg-search.jpg │ ├── react.png │ ├── stylex-scalability2.png │ ├── tailwind-01.png │ ├── tailwind-ci.png │ ├── tailwind-devtool-computed.png │ ├── tailwind-devtool.png │ ├── tailwind-npm.png │ ├── tailwind02.png │ ├── vimadventure.png │ ├── vimadventure的副本.png │ ├── weekly-juejin.png │ ├── weekly-leibie.png │ ├── weekly-mulu.png │ ├── xianyu.jpg │ └── yarn-home.png ├── async-add.md ├── async-oom.md ├── big-int │ └── demo.js ├── binary-in-frontend │ ├── demo.html │ ├── index.md │ └── transform.jpg ├── browser-extension.md ├── cache-for-sw.md ├── cache-miss-concurrent.md ├── canal-binlog-to-kafka │ └── index.md ├── canvas-and-svg-shapes.md ├── constant-db-to-client.md ├── data-operation.md ├── domain-update-record.md ├── excel-row-column │ ├── Readme.md │ └── demo.js ├── exit-code-node-and-docker.md ├── frontend-ci-quality.md ├── git-tips.md ├── gitee.md ├── graphql-guide.md ├── highlight-in-react │ └── index.md ├── http-etag.md ├── http-last-modified.md ├── http-status.md ├── https.md ├── image-lazy-load.md ├── input-defaultvalue.md ├── interview-2019.md ├── interview.md ├── intro.md ├── js-debug-examples │ ├── demo.js │ └── index.md ├── js-puzzles.md ├── juejin-article.md ├── juejin-fe.md ├── juejin-interview.md ├── jwt-and-verifyCode.md ├── jwt-guide.md ├── learning-kafka │ ├── index.md │ ├── topic.png │ └── write.png ├── learning-scala │ ├── index.md │ └── unified-types-diagram.svg ├── learning-spark │ ├── index.md │ └── streaming-arch.png ├── learning-zookeeper │ └── index.md ├── lodash-get.md ├── lodash-merge.md ├── login-input-style.md ├── markdown-parser │ ├── behead.js │ └── index.md ├── meta.js ├── next-10.md ├── node-cls │ ├── index-2.js │ ├── index.js │ ├── index.md │ └── index2.js ├── node-stream │ ├── a.js │ ├── demo.js │ └── index.md ├── oc.md ├── op │ ├── assets │ │ ├── memory.png │ │ └── ok.png │ └── sentry-install.md ├── package-api.md ├── poem-char-frequent-stat.md ├── postgres-cheatsheet.md ├── postgres-wal-log │ └── index.md ├── process-docker-and-compose.md ├── processon.md ├── random-cat.md ├── rate-limit │ ├── index.md │ ├── leaky-bucket.png │ └── token-bucket.png ├── react-18.md ├── react-component-design.md ├── react-hooks-and-countdown.md ├── redis-case.md ├── redundant-static-resource.md ├── refactor-id-in-pg.md ├── requestId-and-tracing │ ├── index.md │ └── tracing.jpg ├── sbt-get-started │ └── index.md ├── sequelize-op-replacement-and-sed.md ├── sequelize-upgrade.md ├── server-structed-error.md ├── shici-api.md ├── spark-streaming-programming │ └── index.md ├── sql-and-index.md ├── sql-examples.md ├── sql-guide │ └── index.md ├── system-call.md ├── tailwindcss-jsx.md ├── tailwindcss.md ├── tinyimage-recomended.md ├── traefik-https │ ├── index.md │ └── screen.jpeg ├── traefik-start.md ├── try-js-code.md ├── ts-tips.md ├── vim-quick-start.md ├── voice.md ├── watchfile.md ├── web.md ├── weekly.md ├── zero-to-learn-fe.md └── zero-to-learn-node.md ├── record ├── 2015.md ├── 2016.md ├── 2017.md ├── 2018.md ├── 2019.md ├── Readme.md └── pre-2019.md ├── seo └── sitemap.md ├── serverless.yaml ├── snippets.md ├── ssr ├── package.md └── source.md ├── test ├── api-debug-skill.md ├── api-debug.md ├── api-mock.md ├── api.md ├── apifox-api.md ├── apifox-web.md ├── apifox.md ├── fe-test.md ├── json-schema.md ├── meta.js ├── mock.md └── postman.md ├── todo ├── tools ├── base64.md ├── cheat-sheets.md ├── daily-question.md ├── dataurl.md ├── exif.md ├── gallery.md ├── placeholder.md ├── qrcode.md ├── semver-and-tree.md └── tiny-image.md ├── tour ├── Readme.md ├── assets │ ├── banmian1.jpg │ ├── banmian2.jpg │ ├── banmian3.jpg │ ├── bopibaozi.jpg │ ├── cesuo.jpg │ ├── chengduditie.jpg │ ├── danghe.jpg │ ├── danghefuzimao.jpg │ ├── danghejiumoluoshi.jpg │ ├── dangheluwei.jpg │ ├── danghezhangzhi.jpg │ ├── darou.jpg │ ├── dunhuangduilian.jpg │ ├── gaibing.jpg │ ├── gangzirou.jpg │ ├── huoshao.jpg │ ├── huyangmenbing.jpg │ ├── jiaomaji.jpg │ ├── jiasha.jpg │ ├── kaobaozi.jpg │ ├── kaobaozi2.jpg │ ├── liangfang.jpg │ ├── luotuo.jpg │ ├── lvrouhuangmian.jpg │ ├── menbing.jpg │ ├── mianbaoyangtui.jpg │ ├── michangzi.jpg │ ├── mingshashan.jpg │ ├── money.png │ ├── naren.jpg │ ├── pipa.jpg │ ├── putao.jpg │ ├── qiaodaima.jpg │ ├── shamo.jpg │ ├── shenniao1.jpg │ ├── shenniao2.jpg │ ├── shenniao3.jpg │ ├── shiguo.jpg │ ├── suannaizongzi.jpg │ ├── supiyangtui.jpg │ ├── tianshan.jpg │ ├── wangjianlou.jpg │ ├── wangyuanjing.jpg │ ├── wanyitang.jpg │ ├── wuhuaguo.jpg │ ├── wurenji.jpg │ ├── wurenji2.jpg │ ├── xia-changjiang.jpg │ ├── xia-jiaozi.jpg │ ├── xia-jiebei.jpg │ ├── xia-tianranta.jpg │ ├── xia-xianbing.jpg │ ├── xia-yunhe.jpg │ ├── xiangfeiwang.jpg │ ├── xibeihuanxian.jpg │ ├── xingpicha.jpg │ ├── yougao.jpg │ ├── yueyaquan.jpg │ ├── zhangzhi.jpg │ └── zhuafan.jpg ├── baoding.md ├── chengdu-subway.md ├── diming.md ├── dunhuang.md ├── fo.md ├── geo-code.md ├── hang-ali.md ├── hexi.md ├── how-mach-in-west.md ├── jiang-eat.md ├── jiang-wei.md ├── meta.json ├── software.md ├── where.md ├── xia-binjiang.md ├── xia-qingjiang.md ├── yibin.md └── zhuan.md ├── vercel.json ├── wasm ├── code │ └── hello │ │ ├── hello.c │ │ └── index.js └── index.md ├── web-performance ├── Readme.md ├── assets │ ├── hang-exif-sudi.png │ ├── hang-sudi.jpeg │ ├── image-optim.png │ ├── jpeg-metadata-size.avif │ └── jpeg-metadata-size.jpg ├── icon.md ├── image-metadata.md ├── image-optim-with-webpack.md ├── image-optim.md └── meta.json ├── webpack ├── chunk.md ├── hooks.md ├── index.md ├── lazy.md ├── loader.md └── module.md ├── what-happens ├── QA.md ├── Readme.md ├── arp.md ├── assets │ ├── TCP-handshake.jpeg │ ├── TCPsockets.jpg │ └── tcp.png ├── dns.md ├── http.md ├── http2.md ├── ip.md ├── meta.json ├── tcp.md └── tls.md ├── what └── Readme.md ├── words ├── words.md ├── yarn-error.log └── zhihu ├── 4-years-college-plan.md ├── how-to-read-source-code.md ├── interview-fe.md ├── meta.json ├── undefined-or-null.md └── useMemo.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .vscode 4 | a.md 5 | about.md 6 | .DS_Store 7 | -------------------------------------------------------------------------------- /.vuepress/post.header.js: -------------------------------------------------------------------------------- 1 | const _ = require('lodash') 2 | const path = require('path') 3 | const fs = require('fs') 4 | 5 | const posts = require('../post/meta') 6 | const tags = _.uniq(posts.map(x => x.tags[0])) 7 | const postsByTag = _.groupBy(posts, x => x.tags[0]) 8 | 9 | module.exports = tags.map(tag => { 10 | const posts = postsByTag[tag] 11 | return { 12 | title: tag, 13 | children: posts.filter(x => x.path).map(x => { 14 | const isExist = fs.existsSync(path.join(__dirname, '../post', x.path)) 15 | if (isExist) { 16 | console.log(x.path) 17 | } 18 | return [x.path + (isExist ? '/' : ''), x.title] 19 | }) 20 | } 21 | }) 22 | 23 | -------------------------------------------------------------------------------- /.vuepress/public/dom-to-image.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 14 |
15 |

悯农

16 |

锄禾日当午，汗滴禾下土

17 |

谁知盘中餐，粒粒皆辛苦

18 |
19 | 20 | -------------------------------------------------------------------------------- /.vuepress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/.vuepress/public/favicon.ico -------------------------------------------------------------------------------- /.vuepress/public/pay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/.vuepress/public/pay.jpg -------------------------------------------------------------------------------- /.vuepress/public/qrcode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/.vuepress/public/qrcode.jpg -------------------------------------------------------------------------------- /.vuepress/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Sitemap: https://shanyue.tech/sitemap.xml 3 | 4 | User-agent: Baiduspider 5 | Disallow: /op/openvpn.html 6 | -------------------------------------------------------------------------------- /.vuepress/public/we.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/.vuepress/public/we.jpg -------------------------------------------------------------------------------- /.vuepress/public/we.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/.vuepress/public/we.png -------------------------------------------------------------------------------- /.vuepress/public/wechat.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/.vuepress/public/wechat.jpeg -------------------------------------------------------------------------------- /.vuepress/theme/components/DropdownTransition.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 29 | 34 | -------------------------------------------------------------------------------- /.vuepress/theme/components/QR.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | 16 | 35 | -------------------------------------------------------------------------------- /.vuepress/theme/layouts/404.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 27 | -------------------------------------------------------------------------------- /.vuepress/theme/noopModule.js: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /.vuepress/theme/qr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/.vuepress/theme/qr.jpg -------------------------------------------------------------------------------- /.vuepress/theme/qr2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/.vuepress/theme/qr2.jpg -------------------------------------------------------------------------------- /.vuepress/theme/styles/arrow.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | .arrow 4 | display inline-block 5 | width 0 6 | height 0 7 | &.up 8 | border-left 4px solid transparent 9 | border-right 4px solid transparent 10 | border-bottom 6px solid $arrowBgColor 11 | &.down 12 | border-left 4px solid transparent 13 | border-right 4px solid transparent 14 | border-top 6px solid $arrowBgColor 15 | &.right 16 | border-top 4px solid transparent 17 | border-bottom 4px solid transparent 18 | border-left 6px solid $arrowBgColor 19 | &.left 20 | border-top 4px solid transparent 21 | border-bottom 4px solid transparent 22 | border-right 6px solid $arrowBgColor 23 | -------------------------------------------------------------------------------- /.vuepress/theme/styles/config.styl: -------------------------------------------------------------------------------- 1 | $contentClass = '.theme-default-content' 2 | -------------------------------------------------------------------------------- /.vuepress/theme/styles/custom-blocks.styl: -------------------------------------------------------------------------------- 1 | .custom-block 2 | .custom-block-title 3 | font-weight 600 4 | margin-bottom -0.4rem 5 | &.tip, &.warning, &.danger 6 | padding .1rem 1.5rem 7 | border-left-width .5rem 8 | border-left-style solid 9 | margin 1rem 0 10 | &.tip 11 | background-color #f3f5f7 12 | border-color #42b983 13 | &.warning 14 | background-color rgba(255,229,100,.3) 15 | border-color darken(#ffe564, 35%) 16 | color darken(#ffe564, 70%) 17 | .custom-block-title 18 | color darken(#ffe564, 50%) 19 | a 20 | color $textColor 21 | &.danger 22 | background-color #ffe6e6 23 | border-color darken(red, 20%) 24 | color darken(red, 70%) 25 | .custom-block-title 26 | color darken(red, 40%) 27 | a 28 | color $textColor 29 | 30 | 31 | -------------------------------------------------------------------------------- /.vuepress/theme/styles/mobile.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | $mobileSidebarWidth = $sidebarWidth * 0.82 4 | 5 | // narrow desktop / iPad 6 | @media (max-width: $MQNarrow) 7 | .sidebar 8 | font-size 15px 9 | width $mobileSidebarWidth 10 | .page 11 | padding-left $mobileSidebarWidth 12 | 13 | // wide mobile 14 | @media (max-width: $MQMobile) 15 | .sidebar 16 | top 0 17 | padding-top $navbarHeight 18 | transform translateX(-100%) 19 | transition transform .2s ease 20 | .page 21 | padding-left 0 22 | .theme-container 23 | &.sidebar-open 24 | .sidebar 25 | transform translateX(0) 26 | &.no-navbar 27 | .sidebar 28 | padding-top: 0 29 | 30 | // narrow mobile 31 | @media (max-width: $MQMobileNarrow) 32 | h1 33 | font-size 1.9rem 34 | {$contentClass} 35 | div[class*="language-"] 36 | margin 0.85rem -1.5rem 37 | border-radius 0 38 | -------------------------------------------------------------------------------- /.vuepress/theme/styles/toc.styl: -------------------------------------------------------------------------------- 1 | .table-of-contents 2 | .badge 3 | vertical-align middle 4 | -------------------------------------------------------------------------------- /.vuepress/theme/styles/wrapper.styl: -------------------------------------------------------------------------------- 1 | $wrapper 2 | max-width $contentWidth 3 | margin 0 auto 4 | padding 2rem 2.5rem 5 | @media (max-width: $MQNarrow) 6 | padding 2rem 7 | @media (max-width: $MQMobileNarrow) 8 | padding 1.5rem 9 | 10 | -------------------------------------------------------------------------------- /assets/fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/fallback.png -------------------------------------------------------------------------------- /assets/git.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/git.jpeg -------------------------------------------------------------------------------- /assets/graphql-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/graphql-logo.jpg -------------------------------------------------------------------------------- /assets/http-lm-factor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/http-lm-factor.jpg -------------------------------------------------------------------------------- /assets/https-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/https-0.png -------------------------------------------------------------------------------- /assets/https-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/https-1.png -------------------------------------------------------------------------------- /assets/https-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/https-2.png -------------------------------------------------------------------------------- /assets/https-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/https-3.png -------------------------------------------------------------------------------- /assets/https-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/https-4.png -------------------------------------------------------------------------------- /assets/https-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/https-5.png -------------------------------------------------------------------------------- /assets/https-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/https-6.png -------------------------------------------------------------------------------- /assets/jq-juejin-sort.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/jq-juejin-sort.jpg -------------------------------------------------------------------------------- /assets/jq-juejin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/jq-juejin.jpg -------------------------------------------------------------------------------- /assets/lodash-get.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/lodash-get.png -------------------------------------------------------------------------------- /assets/optional-chain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/optional-chain.jpg -------------------------------------------------------------------------------- /assets/response.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/response.jpg -------------------------------------------------------------------------------- /assets/run-21.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/run-21.jpeg -------------------------------------------------------------------------------- /assets/walk.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/assets/walk.jpeg -------------------------------------------------------------------------------- /book/TCP-IP-Illustrated-Volume-1/2-internet-address.md: -------------------------------------------------------------------------------- 1 | # Internet 地址结构 2 | 3 | ## 术语 4 | 5 | + `IANA`: `The Internet Assigned Numbers Authority`，互联网数字分配机构，管IP地址的 6 | + `ISP`: `Internet Service Provider`，互联网服务提供商，卖宽带的，有移动，联通，电信 7 | + `AS`: `Autonomous System`，自治系统 8 | 9 | ## IP 地址的表示 10 | 11 | 12 | 13 | ## CIDR 14 | 15 | `CIDR` 即 `Classless Inter-Domain Routing`，无类别域间路由，表示 IP 地址段 16 | 17 | 比如 `198.128.128.192/27` 代表地址段 `198.128.128.192` ~ `198.128.128.223`，而在以前，它属于 C 段地址，只能表示为 `198.128.128.0/24` 18 | 19 | ## 特殊用途地址 20 | 21 | 常用的私网地址有三段 22 | 23 | + `10.0.0.0/8` 24 | + `172.16.0.0/12` 25 | + `192.168.0.0/16` 26 | 27 | 还有一段经常在路由表里出现的地址 28 | 29 | + `169.254.0.0/16` 30 | -------------------------------------------------------------------------------- /book/TCP-IP-Illustrated-Volume-1/3-data-link.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/book/TCP-IP-Illustrated-Volume-1/3-data-link.md -------------------------------------------------------------------------------- /book/TCP-IP-Illustrated-Volume-1/4-arp.md: -------------------------------------------------------------------------------- 1 | # 地址解析协议 2 | 3 | -------------------------------------------------------------------------------- /bug/Readme.md: -------------------------------------------------------------------------------- 1 | # 虫子集 2 | 3 | 测试环境及生产环境中遇到的那些有关前端，后端及运维的虫子 (BUG) 4 | 5 | ## 防虫器 6 | 7 | + [谈测试]() 8 | + [当线上出现问题时如何定位]() 9 | + [如何得知 develop 分支是一个干净的分支]() 10 | + [如何回滚服务]() 11 | + [如何快速定位异常]() 12 | + [如何优化慢接口]() 13 | 14 | ## 虫卵集 15 | 16 | > 发生在开发环境的问题 17 | 18 | + [koa 中的 ctx.req 与 ctx.request]() 19 | + [Clipboard API 与 devtools 问题]() 20 | + [df 被 hang 住，无法查看磁盘使用情况](./df-hang.md) 21 | + [k8s 部署 ES 时，挂载目录权限问题](./es-failed.md) 22 | + [Unexpected end of JSON input while parsing near '...oyNMOOPIvOSSv8aveUYxO'](./npm-error.md) 23 | + [npm package missing file]() 24 | 25 | ## 幼虫集 26 | 27 | > 发生在测试环境的问题 28 | 29 | + [上游服务不存在或未响应](./upstream.md) 30 | + [sentry 429 rate-limit](./sentry-429.md) 31 | + [Vary: Origin 与 cors]() 32 | 33 | ## 羽化集 34 | 35 | > 关于生产环境的性能优化 36 | 37 | + [ORM 层分页查询过慢优化](./perf-orm-pagination.md) 38 | 39 | ## 成虫集 40 | 41 | > 关于生产环境中的问题 42 | 43 | + [最新手机号无法注册问题]() 44 | + [node 8 -> node 10]() 45 | + [循环引用所造成的 OOM]() 46 | + [上线未生效](上线未生效) 47 | -------------------------------------------------------------------------------- /bug/assets/elk-db-low-query.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/bug/assets/elk-db-low-query.png -------------------------------------------------------------------------------- /bug/assets/sentry-rate-limit-org.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/bug/assets/sentry-rate-limit-org.png -------------------------------------------------------------------------------- /bug/assets/sentry-rate-limit-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/bug/assets/sentry-rate-limit-project.png -------------------------------------------------------------------------------- /bug/assets/sentry-rate-limit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/bug/assets/sentry-rate-limit.png -------------------------------------------------------------------------------- /bug/axios-error-context-miss.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/bug/axios-error-context-miss.md -------------------------------------------------------------------------------- /bug/df-hang.md: -------------------------------------------------------------------------------- 1 | date: 2020-04-10 20:00 2 | 3 | --- 4 | 5 | # df 被 hang 住，无法查看磁盘使用情况 6 | 7 | ## 情景再现 8 | 9 | 在 `centos7` 中，当使用 `df` 命令查看磁盘空间时被 hang 住，时隔两周决定处理这个问题 10 | 11 | ## 捉虫 12 | 13 | 1. `df` 命令 `hanging` 14 | 1. `strace df`，查看系统调用，发现阻塞在了 `stat("/proc/sys/fs/binfmt_misc")` 15 | 1. `mount | grep binfmt`，查看挂载情况，输出 `systemd-1 on /proc/sys/fs/binfmt_misc type autofs (rw,relatime,fd=31,pgrp=1,timeout=300,minproto=5,maxproto=5,direct) 16 | ` 17 | ### 补充知识 18 | 19 | 1. `df`: 查看磁盘使用情况 20 | 1. `strace`: 查看某命令的系统调用 21 | 22 | ## 原因 23 | 24 | `proc-sys-fs-binfmt_misc.automount` 与 `proc-sys-fs-binfmt_misc.mount` 这两个之间存在竞争条件 25 | 26 | ## 解决 27 | 28 | ``` bash 29 | $ systemctl restart proc-sys-fs-binfmt_misc.mount 30 | ``` 31 | 32 | ### 参考 33 | 34 | 1. [解决CentOS 7 df命令卡住问题](https://www.jianshu.com/p/7e71b5248cb3) 35 | 1. [why is df hanging](https://unix.stackexchange.com/questions/21199/why-is-df-hanging) 36 | 1. [centos7 系统 df hang 问题处理说明](https://www.colabug.com/2018/0607/3072371/) 37 | -------------------------------------------------------------------------------- /bug/es-index.md: -------------------------------------------------------------------------------- 1 | # ES 中索引未建立 2 | -------------------------------------------------------------------------------- /bug/form-data-412.md: -------------------------------------------------------------------------------- 1 | Error: Request failed with status code 412 2 | -------------------------------------------------------------------------------- /bug/meta.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "sideTitle": "df hanging", 4 | "path": "df-hang", 5 | "category": "虫卵集" 6 | }, 7 | { 8 | "sideTitle": "npm i 失败", 9 | "path": "npm-error" 10 | }, 11 | { 12 | "sideTitle": "pngquant 构建失败", 13 | "path": "imagemin-pngquant-install-error" 14 | }, 15 | { 16 | "sideTitle": "tailwindcss 升级失败", 17 | "path": "tailwindcss-upgrade" 18 | }, 19 | { 20 | "sideTitle": "Sentry 限流", 21 | "path": "sentry-429", 22 | "category": "幼虫集" 23 | }, 24 | { 25 | "sideTitle": "Mac Git 文件大小写敏感", 26 | "path": "mac-git-ignorecase" 27 | }, 28 | { 29 | "sideTitle": "上游服务不存在", 30 | "path": "upstream-miss" 31 | } 32 | ] 33 | -------------------------------------------------------------------------------- /bug/node-module-turndown.md: -------------------------------------------------------------------------------- 1 | asdf 2 | -------------------------------------------------------------------------------- /bug/node-visibility.md: -------------------------------------------------------------------------------- 1 | asf 2 | -------------------------------------------------------------------------------- /bug/upstream-miss.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-03-15 18:00 3 | 4 | --- 5 | 6 | # 上游服务不存在或未响应 7 | 8 | ## 情景再现 9 | 10 | 当日产品反馈在测试环境中某个请求变红 (status code: 400) 11 | 12 | ## 捉虫 13 | 14 | 1. 该请求为 GET，拿到 curl 进行多次重放，bug 复现 15 | 1. sentry 顺利接收异常，获取到错误码 16 | 1. 异常为自定义异常，未携带原始异常 (originalError) 17 | 1. 在本地启动后端服务，curl 重放，bug 复现 18 | 1. **检索代码**，根据路由及错误码定位到异常位置: 一个请求考试服务(内部服务)的接口 19 | 1. 打印该考试服务异常请求的 http request/response，reponse 为 502，上游服务不存在 20 | 21 | ## 原因 22 | 23 | 内部服务无疑应该是最健壮最稳定的服务，为什么会不存在？ 24 | 25 | **原因是该考试服务对个别业务后端开启了分支环境，通过在 k8s 中为分支新建 service 来部署，而这些业务后端直接请求考试服务的分支环境。** 26 | 27 | 而运维同学在近一天中清理了测试环境许多无用的分支环境（避免过多资源消耗），造成误杀。 28 | 29 | ## 解决 30 | 31 | 对考试服务切对应分支，git push，CICD 中自动部署分支环境，解决问题。 32 | 33 | ## 反思 34 | 35 | 从定位到解决问题，花费了近两个小时，而排查时间本可以更短。 36 | 37 | **而瓶颈处在于需要在本地调试服务，检索代码，定位异常，这大大加大了排查问题的时间** 38 | 39 | 直接原因是自定义异常中丢失了原始异常信息(originalError)，从而丢失了上下文信息，如 uri/request/response，需要在本地调试来获取这些丢失的上下文 40 | 41 | -------------------------------------------------------------------------------- /business/C-line.md: -------------------------------------------------------------------------------- 1 | 2019-10-10 19:23 2 | 3 | --- 4 | 5 | # C 线及用户增长 6 | 7 | -------------------------------------------------------------------------------- /business/Readme.md: -------------------------------------------------------------------------------- 1 | # 业务与技术 2 | 3 | + [前端如何在业务中提升自己](./learn-in-business.md) 4 | + [新人如何快速熟悉业务](./business-get-started.md) 5 | + [如何为你的测试环境制造假数据](./dev-data-create.md) 6 | + [在线教育考试系统业务分析](./exam.md) -------------------------------------------------------------------------------- /business/arrange.md: -------------------------------------------------------------------------------- 1 | # 在线教育中技术与业务疑难问题之排课系统 2 | -------------------------------------------------------------------------------- /business/assets/difficulty-q.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/business/assets/difficulty-q.jpg -------------------------------------------------------------------------------- /business/assets/exam-arch.drawio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/business/assets/exam-arch.drawio.png -------------------------------------------------------------------------------- /business/assets/exam-business.drawio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/business/assets/exam-business.drawio.png -------------------------------------------------------------------------------- /business/assets/exam-er.drawio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/business/assets/exam-er.drawio.png -------------------------------------------------------------------------------- /business/assets/exam-system.drawio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/business/assets/exam-system.drawio.png -------------------------------------------------------------------------------- /business/assets/exam-xmind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/business/assets/exam-xmind.png -------------------------------------------------------------------------------- /business/assets/middle-q.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/business/assets/middle-q.jpg -------------------------------------------------------------------------------- /business/assets/save-pdf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/business/assets/save-pdf.png -------------------------------------------------------------------------------- /business/assets/score.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/business/assets/score.jpg -------------------------------------------------------------------------------- /business/assets/simple-q.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/business/assets/simple-q.jpg -------------------------------------------------------------------------------- /business/better-doc.md: -------------------------------------------------------------------------------- 1 | # 比读源码更重要的是去读文档 2 | -------------------------------------------------------------------------------- /business/demo/fingerprint.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 29 | 30 | -------------------------------------------------------------------------------- /business/demo/pagevisibility.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | hello, world. 10 | 21 | 22 | -------------------------------------------------------------------------------- /business/edu.md: -------------------------------------------------------------------------------- 1 | # 在线教育 2 | -------------------------------------------------------------------------------- /business/exam-time.md: -------------------------------------------------------------------------------- 1 | date: 2020-07-16 16:30 2 | 3 | --- 4 | 5 | # 在线教育中技术与业务疑难问题之考试系统中的时间控制 6 | 7 | 直接说需求吧 8 | 9 | ## 服务端实现 10 | 11 | ``` js 12 | async function getTimeLeft (sheetId, sectionId) { 13 | // 如果求学生做整套试卷的剩余时间 14 | if (!sectionId) { 15 | const sheet = await Sheet.findById(sheetId) 16 | // 计算距离开始考试时间过了多久 17 | return now - sheet.startTime 18 | } 19 | 20 | const key = `Sheet:${sheetId}:Section:${sectionId}:TimeLeft` 21 | return redis.get(key) 22 | } 23 | 24 | async function setTimeLeft (sheetId, sectionId, seconds) { 25 | const key = `Sheet:${sheetId}:Section:${sectionId}:TimeLeft` 26 | if (!seconds) { 27 | const paper = await Paper.findBySheetId(sheetId) 28 | const section = await Section.findById(sectionId) 29 | seconds = section.totalTime 30 | } 31 | await redis.set(key, seconds, 'EX', '1d') 32 | } 33 | ``` -------------------------------------------------------------------------------- /business/product-fineness.md: -------------------------------------------------------------------------------- 1 | # 业务的复杂度与稳定性思考 2 | 3 | > 系统复杂性提高，会增加 BUG 的几率。 4 | -------------------------------------------------------------------------------- /business/question.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | --- 4 | 5 | # 在线教育中技术与业务疑难问题之题库系统 6 | -------------------------------------------------------------------------------- /business/tl-todo.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/business/tl-todo.md -------------------------------------------------------------------------------- /c/.gitignore: -------------------------------------------------------------------------------- 1 | *.out 2 | -------------------------------------------------------------------------------- /c/Readme.md: -------------------------------------------------------------------------------- 1 | # 一个服务端工程师的 C 语言基础 2 | 3 | + hello, world 4 | + 基本数据类型 5 | + 指针 6 | + 进程与守护进程 7 | + POSIX Thread 编程 8 | + 进程，线程与内存，CPU监控 9 | + socket 编程 10 | + select 与 epoll -------------------------------------------------------------------------------- /c/code/control.c: -------------------------------------------------------------------------------- 1 | #include 2 | 3 | int main() { 4 | int arr[5] = {1, 2, 3, 4, 5}; 5 | int i; 6 | for (i=0; i<5; i++) { 7 | printf("%d\n", i); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /c/code/exec.c: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | 5 | int main(void) { 6 | printf("entering main process---\n"); 7 | execl("/bin/ls", "ls", "-l", NULL); 8 | printf("exiting main process ----\n"); 9 | return 0; 10 | } 11 | -------------------------------------------------------------------------------- /c/code/fork.c: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include 5 | 6 | int main () 7 | { 8 | __pid_t fpid; 9 | fpid = fork(); 10 | if (fpid == 0) { 11 | printf("子进程: %d\n", getpid()); 12 | } else { 13 | printf("父进程: %d\n", getpid()); 14 | } 15 | printf("进程: %d\n", getpid()); 16 | return 0; 17 | } 18 | -------------------------------------------------------------------------------- /c/code/hello.c: -------------------------------------------------------------------------------- 1 | #include 2 | 3 | void print() { 4 | puts("hello, world"); 5 | return; 6 | } 7 | 8 | int main() { 9 | print(); 10 | return 0; 11 | } 12 | -------------------------------------------------------------------------------- /c/code/pointer.c: -------------------------------------------------------------------------------- 1 | #include 2 | 3 | int main() { 4 | int *p; 5 | 6 | printf("size: %d", sizeof(p)); 7 | } 8 | -------------------------------------------------------------------------------- /c/code/thread.c: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | 5 | void *run(void *arg) { 6 | int id = *((int *) arg); 7 | printf("Word %d\n", id); 8 | sleep(10 * id); 9 | } 10 | 11 | int main() { 12 | pthread_t tid[10]; 13 | int id[10]; 14 | 15 | for (int i = 0; i < 10; i++) { 16 | id[i] = i; 17 | pthread_create(&tid[i], NULL, run, (void *)&id[i]); 18 | } 19 | for (int i = 0; i< 10; i++) { 20 | pthread_join(tid[i], NULL); 21 | printf("Work Finish: %d\n", i); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /c/code/thread_basic.c: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | void * run(void *arg) { 5 | printf("hello, world\n"); 6 | } 7 | 8 | int main() { 9 | pthread_t thread; 10 | 11 | pthread_create(&thread, NULL, run, NULL); 12 | pthread_join(thread, NULL); 13 | } 14 | -------------------------------------------------------------------------------- /c/code/type.c: -------------------------------------------------------------------------------- 1 | #include 2 | 3 | struct Point { 4 | int x; 5 | int y; 6 | }; 7 | 8 | int main() { 9 | // number 10 | int a = 3; 11 | float b = 4; 12 | printf("a=%d, b=%f\n", a, b); 13 | 14 | // array 15 | int list[] = {1, 2, 3, 4, 5}; 16 | printf("list[3]=%d\n", list[3]); 17 | 18 | // string 19 | char s[] = "hello, world"; 20 | char c = 'c'; 21 | printf("s=%s, c=%c\n", s, c); 22 | 23 | // pointer 24 | int *p = &a; 25 | printf("p=%d\n", *p); 26 | 27 | struct Point point = {3, 4}; 28 | printf("P(%d, %d)\n", point.x, point.y); 29 | 30 | struct Point *pp = &point; 31 | printf("P(%d, %d)\n", pp->x, pp->y); 32 | } 33 | -------------------------------------------------------------------------------- /c/code/void.c: -------------------------------------------------------------------------------- 1 | #include 2 | 3 | int main() { 4 | void *p; 5 | 6 | // 使用它装一个整数 7 | int a = 3; 8 | p = &a; 9 | printf("%d", *(int *)p); 10 | 11 | // 使用它装一个字符串 12 | char s[] = "hello, world"; 13 | p = s; 14 | printf("%s", p); 15 | return 0; 16 | } 17 | -------------------------------------------------------------------------------- /c/pointer.md: -------------------------------------------------------------------------------- 1 | ## 数组 -------------------------------------------------------------------------------- /c/process.md: -------------------------------------------------------------------------------- 1 | ## 内存空间 2 | 3 | ## 文件描述符 4 | 5 | ## 代码段和数据段 6 | 7 | + data 8 | + code 9 | 10 | https://www.softprayog.in/programming/posix-threads-programming-in-c 11 | -------------------------------------------------------------------------------- /c/type.md: -------------------------------------------------------------------------------- 1 | https://www.cnblogs.com/lulipro/p/7460206.html -------------------------------------------------------------------------------- /code/Promise-race/Readme.md: -------------------------------------------------------------------------------- 1 | ``` js 2 | ``` 3 | -------------------------------------------------------------------------------- /code/Promise-race/demo.js: -------------------------------------------------------------------------------- 1 | Promise.fakeRace = ps => { 2 | return new Promise((resolve, reject) => { 3 | for (let i = 0; i < ps.length; i++) { 4 | ps.then(resolve).catch(reject) 5 | } 6 | }) 7 | } 8 | 9 | Promise.race([3, 4]) 10 | -------------------------------------------------------------------------------- /code/Readme.md: -------------------------------------------------------------------------------- 1 | # 代码解析或实现 2 | -------------------------------------------------------------------------------- /code/apollo-react/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | ## SSR 6 | 7 | ```javascript 8 | window.__APOLLO_STATE__ = JSON.stringify(client.cache.extract()) 9 | 10 | const client = new ApolloClient({ 11 | cache: new InMemoryCache().restore(window.__APOLLO_STATE__), 12 | link, 13 | }) 14 | ``` 15 | 16 | ## ReactDOM.renderToString(App) 17 | 18 | ## ApolloReact.renderToStringWithData(App) 19 | -------------------------------------------------------------------------------- /code/clone-deep/index.js: -------------------------------------------------------------------------------- 1 | function is(value, type) { 2 | return {}.toString.call(value) === `[object ${type}]` 3 | } 4 | 5 | function isRegExp (value) { 6 | return is(value, 'ExgExp') 7 | } 8 | 9 | function isDate (value) { 10 | return is(value, 'Date') 11 | } 12 | 13 | function isPromise (value) { 14 | return is(value, 'Promise') 15 | } 16 | 17 | function isArray (value) { 18 | return Array.isArray(value) 19 | } 20 | 21 | function clone (value) { 22 | if (typeof value !== 'object') { 23 | return value 24 | } 25 | if (isArray(value)) { 26 | return value.map(x => clone(x)) 27 | } 28 | if (isPromise(value)) { 29 | return value 30 | } 31 | } -------------------------------------------------------------------------------- /code/graphql-tag/demo.js: -------------------------------------------------------------------------------- 1 | const gql = require('graphql-tag') 2 | 3 | const query = gql` 4 | { 5 | poem (id: 10) { 6 | id 7 | title 8 | } 9 | } 10 | ` 11 | 12 | console.log(query) 13 | -------------------------------------------------------------------------------- /code/jsonp/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /code/jsonp/server.js: -------------------------------------------------------------------------------- 1 | const http = require('http') 2 | const url = require('url') 3 | const qs = require('querystring') 4 | 5 | const server = http.createServer((req, res) => { 6 | const { pathname, query } = url.parse(req.url) 7 | const params = qs.parse(query) 8 | 9 | const data = { name: 'shanyue', id: params.id } 10 | 11 | if (params.callback) { 12 | str = `${params.callback}(${JSON.stringify(data)})` 13 | res.end(str) 14 | } else { 15 | res.end() 16 | } 17 | 18 | }) 19 | 20 | server.listen(10010, () => console.log('Done')) 21 | 22 | -------------------------------------------------------------------------------- /code/meta.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "sideTitle": "JSONP", 4 | "path": "jsonp/" 5 | }, 6 | { 7 | "sideTitle": "Promise", 8 | "path": "promise/" 9 | }, 10 | { 11 | "sideTitle": "Promise.map", 12 | "path": "promise-map/" 13 | }, 14 | { 15 | "sideTitle": "graphql-tag", 16 | "path": "graphql-tag/" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /code/promise-all/demo.js: -------------------------------------------------------------------------------- 1 | function pAll (promises) { 2 | return new Promise((resolve, reject) => { 3 | const r = [] 4 | const len = promises.length 5 | let count = 0 6 | for (let i = 0; i < len; i++) { 7 | Promise.resolve(promises[i]).then(o => { 8 | r[i] = o; 9 | if (++count === len) { 10 | resolve(r) 11 | } 12 | }).catch(e => reject(e)) 13 | } 14 | }) 15 | } 16 | 17 | const sleep = (seconds) => new Promise(resolve => setTimeout(() => resolve(seconds), seconds)) 18 | 19 | pAll([1, 2, 3]).then(o => console.log(o)) 20 | pAll([ 21 | sleep(3000), 22 | sleep(2000), 23 | sleep(1000) 24 | ]).then(o => console.log(o)) 25 | pAll([ 26 | sleep(3000), 27 | sleep(2000), 28 | sleep(1000), 29 | Promise.reject(10000) 30 | ]).then(o => console.log(o)).catch(e => console.log(e, '<- Error')) -------------------------------------------------------------------------------- /db/Readme.md: -------------------------------------------------------------------------------- 1 | # 数据库基础与性能优化 2 | 3 | > 这里数据库主要介绍 Postgres 4 | 5 | + [在 Docker 环境下快速安装 Postgres]() 6 | + [SQL 必知必会]() 7 | + [如何更高效地管理多个数据库](./multi-db.md) 8 | + [如何创建一个高性能的索引](./index.md) 9 | + [如何监控数据库中的慢查询](./slow-query.md) 10 | + [你的数据库查询为什么这么慢: Explain](./explain.md) 11 | + [你只需要查询你所需要的数据](./on-demand.md) 12 | + [数据库设计中自由与约束: 范式](./nf.md) 13 | + [你什么时候需要手动设置隔离级](./isolate.md) 14 | + [如何保障高并发下的数据一致性: MVCC]() 15 | + [高并发下数据库可能出现的种种问题]() 16 | + [如何写出高性能的 SQL 查询]() 17 | + [你应该为字符串选择什么样的数据类型](./string.md) 18 | + [当你查询数据库时需要加锁吗: 悲观锁与乐观锁]() 19 | + [你的连接数在高并发下够用了吗](./poll.md) 20 | + [当你误操作数据后应该如何恢复](./wal.md) -------------------------------------------------------------------------------- /db/index.md: -------------------------------------------------------------------------------- 1 | # 如何创建一个高性能的索引 2 | 3 | > 索引，将书刊中的内容或项目分类摘录，标明页数，按一定次序排列，附在一书之后，或单独编印成册，以便读者查阅，旧称通检或备检。 4 | 5 | 索引最初指一本书的目录，你可以快速定位到你要检索的内容，而不必逐页翻找。 6 | 7 | 而在数据库中，索引的关键字是 `index` 或者 `key`。创建一个合理的索引能够大幅提升检索效率，对查询性能的影响至关重要。如果你没有感觉到它对查询性能的重大影响，有可能是因为你们的数据亮太小了，如同一本十页的书，不需要使用目录也可以快速定位到你要检索的内容。 8 | 9 | 之所以索引能够给数据库查询性能带来重大影响，源自于索引的数据结构: `B+ Tree` 以及 `Hash`。从这里，我们可以看出来你所学到的数据结构也是有用武之地，而非屠龙之术。根据这两种数据结构，索引分为两大类，它们分别适用于不同的业务场景。 10 | 11 | + B+ tree 12 | + Hash 13 | + GiST: 空间向量 14 | + SP-GiST 15 | + GIN: 文档索引，倒排 16 | + BRIN 17 | 18 | 19 | ## B+ Tree 与 B Tree 索引 20 | 21 | `B Tree` 索引实际上采用的数据结构是 `B+ Tree`，以下是关于 `B+ Tree` 的数据结构。 22 | 23 | > 那它为什么不采用查询性能更高的二叉树，而偏偏选择多叉树的 `B+ Tree` 呢？ 24 | 25 | ### 索引过程 26 | 27 | ## B Tree 索引及其限制 28 | 29 | 有时，你对表添加索引后，但对查询性能的影响微乎其微。这很可能源于你对 `B+ Tree` 的了解不够充分。 30 | 31 | ## 聚簇索引 32 | 33 | -------------------------------------------------------------------------------- /db/nf.md: -------------------------------------------------------------------------------- 1 | # 数据库设计中的自由与约束 2 | 3 | 数据库设计时，遵从不同的规范要求设计合理的关系型数据库，这些不同的规范要求被称为不同的范式，越高的范式数据库冗余越小。 4 | 5 | 目前最常用的范式有第一方式(`1NF`)，第二范式(`2NF`)，第三范式(`3NF`)与第四方式(`4NF`)，它们的数据冗余逐级减小，简而言之，`1NF` 拥有最多的冗余数据。 6 | 7 | ## 使用范式设计一个学生与班级的数据库 8 | 9 | 以一个最简化的数据库举例：学生的属性姓名及学号，班级的属性有班级名及班级编号 10 | 11 | ### 1NF 12 | 13 | ``` yaml 14 | - 202001, 张三, 100, 高三一班 15 | - 202002, 李四, 100, 高三一班 16 | - 202003, 王五, 100, 高三一班 17 | - 202004, 三藏，100, 西游一班 18 | - 202005, 悟空，100, 西游一班 19 | - 202006, 八戒，100, 西游一班 20 | ``` 21 | 22 | 自由度与约束来讲极其不合理 23 | 24 | 会不会出现 25 | 26 | ### 2NF 27 | 28 | ### 3NF 29 | 30 | ## 过高的范式与灵活性 31 | 32 | 理想主义者敲代码有时会很难受：越高的约束有时意味着更少的自由度，更弱的灵活性。 33 | -------------------------------------------------------------------------------- /db/on-demand.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/db/on-demand.md -------------------------------------------------------------------------------- /db/poll.md: -------------------------------------------------------------------------------- 1 | # 2 | 3 | ## 一个用户是消耗一个连接吗？ 4 | 5 | ## 连接池 6 | 7 | ## 最多能有多少个连接 -------------------------------------------------------------------------------- /db/slow-query.md: -------------------------------------------------------------------------------- 1 | # 如何监控数据库中的慢查询 2 | 3 | > 意义：性能，调优，索引，explain 4 | 5 | ## 慢查询 6 | 7 | ## postgres 中的慢查询日志 8 | 9 | > 例如查询执行时间超过1秒的SQL？ 10 | 11 | ### pg_stat_activity 12 | 13 | ## 慢查询的监控与报警 14 | 15 | > 报警？ -------------------------------------------------------------------------------- /db/string.md: -------------------------------------------------------------------------------- 1 | # 在 postgres 中应该为字符串类型选择什么样的数据类型 2 | 3 | 4 | 5 | ## 有哪些字符串相关数据类型 6 | 7 | + char 8 | + varchar 9 | + text 10 | 11 | ## 它们都有什么特点 12 | 13 | ## 只分配真正需要的空间？ 14 | 15 | ## ENUM 16 | 17 | ## 性能 18 | 19 | Different from other database systems, in PostgreSQL, there is no performance difference among three character types. In most situation, you should use text or varchar, and varchar(n) if you want PostgreSQL to check for the length limit. 20 | 21 | ## 参考 22 | 23 | + [](https://www.postgresqltutorial.com/postgresql-char-varchar-text/) -------------------------------------------------------------------------------- /douyin/2021-company.md: -------------------------------------------------------------------------------- 1 | 大家好，我是山月。 2 | 3 | 今天给大家推荐一份榜单: **死亡公司数据库**。 4 | 5 | ![](https://cdn.jsdelivr.net/gh/shfshanyue/assets/2022-01-19/clipboard-0330.455220.webp) 6 | 7 | 这是榜单的一部分，筛选的是北京地区教育行业按存活时长排序的公司名单。 8 | 9 | 从中可以看到较为闻名的*巨人教育*，这么大的公司也倒闭了，不禁感叹。话说，山月以前在北京魏公村租房时，附近还有一家巨人教育的门店。 10 | 11 | ![](https://cdn.jsdelivr.net/gh/shfshanyue/assets/2022-01-19/clipboard-8396.8e4638.webp) 12 | 13 | 通过点击还可查看倒闭详情，从中可以看出巨人教育的倒闭原因是资金链断裂和监管原因。 14 | 15 | 这不禁让我想到了我的前东家，也是教育行业，在疫情和政策原因下江河日下，人均工位面积越来越大。然而裁了几次也没有把我裁掉，没有赔偿真是伤心。 16 | 17 | 该网站的地址是: [死亡公司清单](https://www.itjuzi.com/deathCompany)。可左下角点击查看。 18 | 19 | --- 20 | 21 | 最后，山月最近开始做起了 UP 主，刷 B 站也越来越多，甚至把抖音都给戒掉了。 22 | 23 | 强烈推荐一个 UP: [沙盘上的战争](https://space.bilibili.com/612194373)。 24 | 25 | 今天刷了一天的老电视剧*长征*，看完还不过瘾，没想到在 B 站搜到了这个良心 UP，一下午时间沉浸其中从*四度赤水*刷到了*陕北会师*。 26 | 27 | ![](https://cdn.jsdelivr.net/gh/shfshanyue/assets/2022-01-19/clipboard-3912.57bc62.webp) 28 | 29 | --- 30 | 31 | -------------------------------------------------------------------------------- /douyin/Readme.md: -------------------------------------------------------------------------------- 1 | 1. vue的基础知识学完了，开始项目吗？ 2 | 1. 学node都要学那些东西 3 | 1. 外包去吗 4 | 1. 项目总是跑不起来咋办，郁闷 5 | 1. 前端怎么进阶，基本的框架很熟练了 6 | 1. 刚转行的怎么写简历 7 | 1. node+ts 教程 8 | 9 | ![](https://cdn.jsdelivr.net/gh/shfshanyue/assets/2022-01-13/clipboard-2381.893547.webp) -------------------------------------------------------------------------------- /douyin/apifox-echo.md: -------------------------------------------------------------------------------- 1 | # 通过 Apifox Echo 学习 HTTP 测试 2 | 3 | 在 HTTP 缓存中，可以通过 Cache-Control 响应头中的 max-age 指令配置强缓存。 4 | 5 | 比如一年的强缓存时间：Cache-Control: max-age=16536000。 6 | 7 | 我们通过 Apifox 的 API Test 验证某条资源是否配置了一年强缓存。 8 | 9 | 即通过验证某条资源的响应头是否包含了 Cache-Control: max-age=16536000。 10 | 11 | 当然，也可以通过浏览器控制台的网络面板来进行测试。 12 | 13 | 那假设某一条资源被设置为了一年的强缓存时间，但是在 CDN 中已被缓存了九个月，此时在浏览器中只能被缓存三个月。 14 | 15 | 此时浏览器接收到该资源，通过 Cache-Control 响应头，得知强缓存时间仍然为一年时间。 16 | 17 | 此时应如何解决该问题？ 18 | 19 | 而在 HTTP 响应头中，age 用以记录该资源在代理服务器缓存的时间。 20 | 21 | 如此通过 maxAge - age 便可以计算出该资源在浏览器中应该缓存的时间。 22 | 23 | 如果我们每秒向 CDN 请求一次某强缓存资源，则该资源的 Age 应该递增加一。 24 | 25 | 我们继续通过 Apifox 的 API Test 验证每次的 Age 值。 -------------------------------------------------------------------------------- /douyin/bundle.md: -------------------------------------------------------------------------------- 1 | # 打包器是如何对资源进行打包的 2 | 3 | 大家好，我是山月。 4 | 5 | 今天的前端一分钟关于打包器的运行时分析。 6 | 7 | 在 webpack 或者 rollup 中，js、css 以及图片，**皆为模块**。 8 | 9 | 我们可以将所有资源打包为一个 **bundle.js**。 10 | 11 | 以 rollup 为例，对以下两个文件进行打包。 12 | 13 | 在 index.js 中，引入了模块 name.js。 14 | 15 | 使用 rollup 打包，直接**把所有模块平铺展开**即可。 16 | 17 | 而以 webpack 为例，它将生成一段**运行时代码**。 18 | 19 | 主要有两种数据结构。 20 | 21 | 第一，__webpack_modules__，维护一个所有模块的数组。 22 | 23 | 将入口模块解析为 AST，根据 AST 深度优先搜索所有的模块，并构建出这个模块数组。 24 | 25 | 每个模块都由一个包裹函数 (module, module.exports, __webpack_require__) 对模块进行包裹构成。 26 | 27 | 第二，__webpack_require__(moduleId)，手动实现模块加载器 28 | 29 | 对已加载过的模块进行缓存，对未加载过的模块，执行 id 定位到 __webpack_modules__ 中的包裹函数，执行并返回 module.exports，并缓存 30 | 31 | 关于以上所述的包裹函数，如果你写过 node.js，会发现它与 commonjs 的包裹函数是何等地相似。 32 | -------------------------------------------------------------------------------- /douyin/caption.md: -------------------------------------------------------------------------------- 1 | 大家好，我是山月。 2 | 3 | 我的模拟面试终于有了文字版了。 4 | 5 | 我为我的模拟面试添加了字幕检索功能，文字版模拟面试可在我的前端面试每日一题网站中找到。 6 | 7 | 一旦我出了一期模拟面试，可通过大概浏览一遍文字版来决定是否继续观看。 8 | 9 | 而对于面试中的重点问题，也可以通过左侧的时间一键定位到视频所在进度的位置。 10 | 11 | 对于以后的所有模拟面试，都会添加字幕检索功能，需要模拟面试的同学简历快到碗里来。 12 | 13 | 唯一美中不足的是，每次修正字幕文件太费时间，需要花费三四倍的视频时间，因此字幕有可能只有一半，但是对于视频中的重点内容肯定是有字幕的。 14 | 15 | 我的字幕文件维护在我的 Github 中，如果有小伙伴想补充字幕，可向我提交 PR。 16 | 17 | -------------------------------------------------------------------------------- /douyin/get.md: -------------------------------------------------------------------------------- 1 | # 如何安全获取对象的属性 2 | 3 | 大家好，我是山月。 4 | 5 | 在日常开发中，应该如何安全获取对象属性？ 6 | 7 | 我们可以直接通过嵌套属性直接进行获取，但是很有可能会报错，造成应用白屏。 8 | 9 | 我们可以使用逻辑判断，逐步进行获取，但问题是代码太长。 10 | 11 | 一个优雅的方式，就是使用 lodash get 进行获取。 12 | 13 | 而在当前的 ES2020 中，我们可以使用可选链操作符优雅获取。 14 | 15 | 可选链操作符允许读取位于对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。 -------------------------------------------------------------------------------- /douyin/http-cache.md: -------------------------------------------------------------------------------- 1 | # HTTP Cache 2 | 3 | 大家好，我是山月。 4 | 5 | 在 HTTP 中，可通过控制 http 响应头，来控制 http 客户端的资源缓存。 6 | 7 | 可分为两大类，强缓存和协商缓存。 8 | 9 | 强缓存通过响应头 Cache-Control 中 max-age 等指令进行控制。 10 | 11 | max-age 可设置强缓存时间周期，在该周期内，将直接从客户端缓存获取资源，而不会向服务器发送请求。 12 | 13 | 协商缓存通过响应头 ETag 与 Last-Modified 进行控制。 14 | 15 | 它每次发送请求时，需要进行缓存新鲜度校验，如果资源过旧，将直接从响应中获取，否则从客户端缓存中进行获取。 16 | 17 | 新鲜度校验，通过请求头 If-None-Match 与响应头 ETag 进行对比，或者请求头 If-Modified-Since 与响应头 Last-Modifed 进行对比。 18 | 19 | 一般来说，我们对经构建工具打包后，带有 hash 的资源进行一年的强缓存。 20 | 21 | 而对不带 hash 的资源进行协商缓存控制，注意协商缓存需配置 Cache-Control 为 max-age=0，或者 no-cache。 22 | 23 | 否则一个没有设置 Cache-Control 的静态资源，将会根据 Date 与 Last-Modified，计算出强缓存时间。 24 | 25 | 我们可以通过谷歌浏览器中开发者工具中的网络面板，查看其 Javascript、CSS 等资源的响应头，来确认是否配置了正确的缓存策略。 26 | -------------------------------------------------------------------------------- /douyin/picture.md: -------------------------------------------------------------------------------- 1 | # 无版权图片 2 | 3 | 大家好，我是山月。 4 | 5 | 在设计及开发过程中，无不需要一些漂亮的资源，山月今天推荐几款适合于程序员及设计的无版权高清图片网站。 6 | 7 | ## Unsplash 8 | 9 | 你可以在这里检索到各种各样高分辨率图片资源。 10 | 11 | 最重要的是，对于程序员而言，它提供了 SDK 及各种编程语言的库允许你进行接入。 12 | 13 | 更难为可贵的是，它除了 SDK 外还有丰富的文档。 14 | 15 | 你可以通过以下代码随机获取一张图片。 16 | 17 | 于是，我使用它做了一个网站，随机一只猫。每次刷新即可获取一张全新的猫。 18 | 19 | ## Pexels 20 | 21 | 有一款与 Unsplash 功能相同的网站，叫做 Pexels，此处山月就不再赘述。 22 | 23 | ## Undraw 24 | 25 | 在当前网页设计中，大量素材都是矢量图。 26 | 27 | 那我们就可以通过 Undraw 来获取 SVG 格式的素材，并使用 Sketch、Figma 等进行创作。 -------------------------------------------------------------------------------- /douyin/promise.md: -------------------------------------------------------------------------------- 1 | # Promise 的演进 2 | 3 | 大家好，我是山月。 4 | 5 | 今天的前端一分钟是关于 Promise 的演进。 6 | 7 | 假设有一个函数，可以异步获取某个用户的朋友。 8 | 9 | 那我们如何获取张三的朋友的朋友的朋友的朋友。 10 | 11 | 最原始的方式，可以采取 callback 层层回调进行获取。但是它有一个致命的缺点：回调层数太长。 12 | 13 | 我们可以使用 Promise 链式调用进行改进。 14 | 15 | 在 ES7 之后，我们还可以使用 async/await 采用同步的方式调用 Promise。 -------------------------------------------------------------------------------- /duanzi/bianque.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/duanzi/bianque.md -------------------------------------------------------------------------------- /duanzi/ping-an.md: -------------------------------------------------------------------------------- 1 | # 我在圣诞夜里敲代码，你在大豪宅里吃喝玩乐，我们都有美好的未来 2 | 3 | 快过年了，不要再讨论什么webpack、vue源码、微前端之类的了。 4 | 5 | 你带你的破电脑回到家并不能给你带来任何实质性作用。 6 | 7 | 朋友们兜里掏大把钱吃喝玩乐，你默默的在家里摆弄你的破烂框架。 8 | 9 | 亲戚朋友吃饭问你收获了什么，你说我做了个框架，把vue、react、angular优点都结合了一遍。 10 | 11 | 亲戚们懵逼了，你还在心里默默嘲笑他们。 12 | 13 | 笑他们不懂你的轮子、不懂你的算法、不懂你的封装，也笑他们连个复杂点的密码都记不住。 14 | 15 | 你父母的同事都在说自己的子女年的收获，儿子买了个房，女儿买了个车，姑娘升职加薪了。 16 | 17 | 你的父母默默无言，说我的儿子搞了个破电脑，开起来嗡嗡响。 18 | 19 | 家里电表走得越来越快了，你却一天到晚想的是怎么封装一个牛逼的组件。 20 | 21 | 你的和有钱人的差距就是你的格局一直在于代码，而你的身边的人会想怎么挣钱。 22 | 23 | 你一天到晚看那个破文档，封装什么UI组件，什么 switch、button、avtar 日历组件，github早就一堆。 24 | 25 | 但是你还是乐此不彼的写着自己的另外一套，因为你会觉得这是你自己写的不一样，实际上毛的用处都没有。 26 | 27 | 时间轮回，一年又一年，你还在想着新技术出来了，继续学习什么 vite，什么webpack5。 28 | 29 | 而你身边的人在考虑啥时候买第二套房子，什么时候生二胎，你还在捣鼓你的破代码。 30 | 31 | 你身边的人说他看起来好像只狗啊。 -------------------------------------------------------------------------------- /extensions/api.md: -------------------------------------------------------------------------------- 1 | + [browser.runtime.onMessage.addListener](https://developer.chrome.com/docs/extensions/reference/runtime/#event-onMessage) 2 | + [browser.runtime.sendMessage](https://developer.chrome.com/docs/extensions/reference/runtime/#method-sendMessage) 3 | + [browser.storage.sync.get]() 4 | + [browser.contextMenus.create]() 5 | + [browser.commands.onCommand.addListener]() 6 | + [browser.contextMenus.onClicked.addListener]() 7 | + [browser.tabs.query]() 8 | + [browser.tabs.executeScript]() -------------------------------------------------------------------------------- /flutter-guide/launch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/flutter-guide/launch.jpg -------------------------------------------------------------------------------- /flutter-guide/material1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/flutter-guide/material1.jpg -------------------------------------------------------------------------------- /flutter-guide/material2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/flutter-guide/material2.jpg -------------------------------------------------------------------------------- /frontend-engineering/assets/ast.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/ast.jpg -------------------------------------------------------------------------------- /frontend-engineering/assets/ast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/ast.png -------------------------------------------------------------------------------- /frontend-engineering/assets/cypress.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/cypress.gif -------------------------------------------------------------------------------- /frontend-engineering/assets/eslint-tip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/eslint-tip.jpg -------------------------------------------------------------------------------- /frontend-engineering/assets/eslint-vscode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/eslint-vscode.jpg -------------------------------------------------------------------------------- /frontend-engineering/assets/eslint.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/eslint.jpg -------------------------------------------------------------------------------- /frontend-engineering/assets/http-cache-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/http-cache-2.png -------------------------------------------------------------------------------- /frontend-engineering/assets/http-cache-control.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/http-cache-control.jpg -------------------------------------------------------------------------------- /frontend-engineering/assets/http-cache.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/http-cache.png -------------------------------------------------------------------------------- /frontend-engineering/assets/http-lm-factor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/http-lm-factor.jpg -------------------------------------------------------------------------------- /frontend-engineering/assets/node_modules.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/node_modules.jpg -------------------------------------------------------------------------------- /frontend-engineering/assets/npm-i.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/npm-i.png -------------------------------------------------------------------------------- /frontend-engineering/assets/npm-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/npm-search.png -------------------------------------------------------------------------------- /frontend-engineering/assets/npm-trend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/npm-trend.png -------------------------------------------------------------------------------- /frontend-engineering/assets/npm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /frontend-engineering/assets/render.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/render.jpg -------------------------------------------------------------------------------- /frontend-engineering/assets/storybook.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/storybook.gif -------------------------------------------------------------------------------- /frontend-engineering/assets/uglify-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/assets/uglify-code.png -------------------------------------------------------------------------------- /frontend-engineering/bundle-js.md: -------------------------------------------------------------------------------- 1 | # 资源是如何打包的 2 | 3 | 以下代码是 `sum.js` 与 `index.js` 两个代码。 4 | 5 | ``` js 6 | // sum.js 7 | function sum (x, y) { 8 | return x + y; 9 | } 10 | 11 | module.exports = sum 12 | 13 | // index.js 14 | const sum = require('./sum') 15 | 16 | sum(3, 4) 17 | ``` 18 | 19 | 以下代码是打包后的代码。 20 | 21 | ``` js 22 | const modules = { 23 | './sum': (module) => { 24 | function sum (x, y) { 25 | return x + y; 26 | } 27 | 28 | module.exports = sum 29 | }, 30 | '.': (module) => { 31 | const sum = require('./sum') 32 | 33 | sum(3, 4) 34 | } 35 | } 36 | 37 | function require(id) { 38 | const module = {} 39 | modules[id](module) 40 | return module.exports 41 | } 42 | 43 | require('.') 44 | ``` 45 | 46 | ## 如何生成 modules 47 | 48 | -------------------------------------------------------------------------------- /frontend-engineering/canary.md: -------------------------------------------------------------------------------- 1 | # 前端中的AB测试与流量控制 2 | -------------------------------------------------------------------------------- /frontend-engineering/cdn-and-metrics.md: -------------------------------------------------------------------------------- 1 | # 8s 定律 2 | 3 | 路径拥堵 4 | 5 | 中心服务器，去中心，低延迟，分布式 6 | 7 | CDN cache L2 / CDN cachd L1 8 | 9 | DCDN/SCDN 10 | 11 | DNS/TCP/SSL/TTFB 12 | 13 | mtr/traceroute/httpstat/17测 14 | 15 | ETag 16 | X-Cache: HIT 17 | X-Swift-CacheTime: 3600 18 | X-Swift-SaveTime: 3600 19 | -------------------------------------------------------------------------------- /frontend-engineering/config-in-packagejson.md: -------------------------------------------------------------------------------- 1 | 1. browserslist 2 | 1. .browserslistrc 3 | 1. BROWSERSLIST 环境变量 4 | 1. DEFAULT -------------------------------------------------------------------------------- /frontend-engineering/demo/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "compress": {} 3 | } 4 | -------------------------------------------------------------------------------- /frontend-engineering/demo/sum.js: -------------------------------------------------------------------------------- 1 | function sum (a, b) { 2 | return a + b; 3 | } 4 | 5 | var hello = "hello" 6 | var world = "world" 7 | function sum (a, b) { 8 | return a + b; 9 | } 10 | function add(first, second) { return first + second; } 11 | 12 | !b && !c && !d && !e 13 | -------------------------------------------------------------------------------- /frontend-engineering/extract-css.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/extract-css.md -------------------------------------------------------------------------------- /frontend-engineering/index-html-and-http-cache.md: -------------------------------------------------------------------------------- 1 | # index.html 与 http 缓存控制 2 | 3 | 假设在此之前你已对 http 缓存非常了解，很显然，当我们对静态资源设置 `Cache-Control: max-age=7200` 时，浏览器在两个小时之内将通过缓存读取静态资源，而并不会再次发送请求。 4 | 5 | 假设我们网站的目录如下，在 `index.html` 中会引用 `main.js` 和 `main.css`，拥有网站 js，css，html 经典的静态资源， 6 | 7 | + `index.html` 8 | + `main.js` 9 | + `main.css` 10 | 11 | 那假设我们对所有静态资源设置均设置成 `Cache-Control: max-age=7200` 会怎么样？ 12 | 13 | `main.js` 和 `main.css` 肯定会有两个小时的强制缓存，那 `index.html` 呢？ 14 | 15 | ## index.html 16 | -------------------------------------------------------------------------------- /frontend-engineering/monorepo.md: -------------------------------------------------------------------------------- 1 | # monorepo 的发展 2 | 3 | `monorepo` 即一个 repo，多个 package。 4 | 5 | + lerna 6 | 7 | + npm v7 8 | + yarn 9 | + pnpm 10 | 11 | + react 12 | + vue 13 | + babel 14 | + eslint 15 | 16 | ## node 的模块加载原理 17 | 18 | 当 node 19 | 20 | ## npm link 21 | 22 | ## npm link 23 | 24 | -------------------------------------------------------------------------------- /frontend-engineering/npm-build.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/npm-build.md -------------------------------------------------------------------------------- /frontend-engineering/npm-devtool.md: -------------------------------------------------------------------------------- 1 | # 如何 -------------------------------------------------------------------------------- /frontend-engineering/react-perf.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/react-perf.md -------------------------------------------------------------------------------- /frontend-engineering/require-resolve.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/require-resolve.md -------------------------------------------------------------------------------- /frontend-engineering/rsync-deploy.md: -------------------------------------------------------------------------------- 1 | # 部署时仅仅传输更改文件或新文件 2 | 3 | -------------------------------------------------------------------------------- /frontend-engineering/script.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/script.md -------------------------------------------------------------------------------- /frontend-engineering/sourcemap.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/frontend-engineering/sourcemap.md -------------------------------------------------------------------------------- /frontend-engineering/tech-sensitive.md: -------------------------------------------------------------------------------- 1 | # 如何提高对技术的敏感度 2 | 3 | -------------------------------------------------------------------------------- /geo/Readme.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/geo/Readme.md -------------------------------------------------------------------------------- /geo/assets/1600px-World_Time_Zones_Map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/geo/assets/1600px-World_Time_Zones_Map.png -------------------------------------------------------------------------------- /go/hello.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/go/hello.md -------------------------------------------------------------------------------- /graphql-guide/cache.md: -------------------------------------------------------------------------------- 1 | 1. 2 | -------------------------------------------------------------------------------- /graphql-guide/client-cache.md: -------------------------------------------------------------------------------- 1 | + network-only 2 | + store-and-network 3 | + store-or-network 4 | + store-only 5 | 6 | + 仅网络 7 | + 网络优先 8 | + 缓存优先 9 | + 仅缓存 10 | -------------------------------------------------------------------------------- /graphql-guide/graphql-and-ssr.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/graphql-guide/graphql-and-ssr.md -------------------------------------------------------------------------------- /graphql-guide/ts.md: -------------------------------------------------------------------------------- 1 | # GraphQL 与 Typescript 类型增强 2 | 3 | ## TS 的 anyscript 之殇 4 | 5 | 6 | -------------------------------------------------------------------------------- /growth/Readme.md: -------------------------------------------------------------------------------- 1 | # 以技术手段而促用户增长 2 | 3 | ## 案例篇 4 | 5 | + [如何开发第一个微信机器人](./wechaty-start.md) 6 | + [使用公众号开发进行网站向公众号的导流](./blog-to-wechat.html) 7 | 8 | ## TODO 9 | 10 | + [移动端为当前页面生成截图并显示及保存]() 11 | + [复制文字时需要登录/附版权声明]() 12 | -------------------------------------------------------------------------------- /growth/assets/lock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/growth/assets/lock.png -------------------------------------------------------------------------------- /growth/assets/ncov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/growth/assets/ncov.png -------------------------------------------------------------------------------- /growth/meta.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "sideTitle": "一、微信机器人开发", 4 | "path": "wechaty-start", 5 | "description": "你想每天定时向你的女朋友发一句早安吗？wechaty 是一个使用 typescript 开发的机器人，我已经使用 wechaty 做了很多关于有趣的自动化的工作。", 6 | "keywords": "wechat,wechaty,微信,微信机器人,微信机器人开发" 7 | }, 8 | { 9 | "sideTitle": "二、博客引流公众号", 10 | "path": "blog-to-wechat" 11 | }, 12 | { 13 | "sideTitle": "三、自定义水印传播", 14 | "path": "dom-to-image" 15 | } 16 | ] -------------------------------------------------------------------------------- /growth/screenprint.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-06-29 19:36 3 | --- 4 | 5 | # 移动端为当前页面生成截图并显示及保存 6 | 7 | ``` js 8 | 9 | ``` -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /juejin/tu.md: -------------------------------------------------------------------------------- 1 | # 兔年 2 | 3 | 4 | 5 | ``` js 6 | ``` -------------------------------------------------------------------------------- /k8s/assets/k9s-metrics.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/k8s/assets/k9s-metrics.jpg -------------------------------------------------------------------------------- /k8s/assets/nginx-https.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/k8s/assets/nginx-https.jpg -------------------------------------------------------------------------------- /k8s/assets/nginx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/k8s/assets/nginx.png -------------------------------------------------------------------------------- /k8s/conf/letsencrypt-prod.yaml: -------------------------------------------------------------------------------- 1 | apiVersion: cert-manager.io/v1alpha2 2 | kind: Issuer 3 | metadata: 4 | name: letsencrypt-prod 5 | spec: 6 | acme: 7 | # The ACME server URL 8 | server: https://acme-v02.api.letsencrypt.org/directory 9 | # Email address used for ACME registration 10 | email: xianger94@gmail.com 11 | # Name of a secret used to store the ACME account private key 12 | privateKeySecretRef: 13 | name: letsencrypt-prod 14 | # Enable the HTTP-01 challenge provider 15 | solvers: 16 | - http01: 17 | ingress: 18 | class: nginx 19 | -------------------------------------------------------------------------------- /k8s/conf/pg-pv.yaml: -------------------------------------------------------------------------------- 1 | apiVersion: v1 2 | kind: PersistentVolume 3 | metadata: 4 | name: mysql-pv-volume 5 | labels: 6 | type: local 7 | spec: 8 | storageClassName: manual 9 | capacity: 10 | storage: 20Gi 11 | accessModes: 12 | - ReadWriteOnce 13 | hostPath: 14 | path: "/mnt/data" 15 | --- 16 | apiVersion: v1 17 | kind: PersistentVolumeClaim 18 | metadata: 19 | name: mysql-pv-claim 20 | spec: 21 | storageClassName: manual 22 | accessModes: 23 | - ReadWriteOnce 24 | resources: 25 | requests: 26 | storage: 20Gi 27 | -------------------------------------------------------------------------------- /k8s/deploy-drone.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "k8s在github上易用轻量的持续集成方案: helm 结合 drone" 3 | keywords: helm,drone,k8s,github,ci 4 | date: 2019-10-31 21:00 5 | tags: 6 | - k8s 7 | - devops 8 | 9 | --- 10 | 11 | 一般小型公司的持续集成方案会选择: `gitlab` + `gitlab CI`，当然部分公司也会选择 `jenkins`。 12 | 13 | 选择 `gitlab CI` 的原因很简单，因为使用了 `gitlab CE` 作为代码托管平台。那为什么选择了 `gitlab` 作为代码托管呢， `gitlab CE` 是免费版(社区版)，对于昂贵的 toB 软件来说，一家公司至少省了几十万的开销，而且支持自建平台，搭在自家的服务器中，安全性得到了保证。 14 | 15 | 而对比 `gitlab` 的同一类产品，世界最大的同性社交网站 `github` 来说，随着微软的收购，`github` 也越来越开放了，它不仅免费开放了私有仓库，现在也可以通过 `github action` 来做简单的 CI。 16 | 17 | 对于个人，自有开发者以及小型公司来说，拥有免费仓库的 `github` 也是一个不错的选择。 18 | 19 | [drone](https://drone.io/) 是基于容器的构建服务，配置简单且免费，在 github 上也有 20K star。如果你的仓库主要都在 github，你会喜欢上它的 20 | 21 | > 随着 github action 的发展，github + github-action 也是个人以及小型公司可选的持续集成方案，不过由于它属于公共构建服务的缘故，镜像构建以及镜像拉取速度会是一个问题，这要取舍 22 | -------------------------------------------------------------------------------- /k8s/deploy-fe-with-helm.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/k8s/deploy-fe-with-helm.md -------------------------------------------------------------------------------- /k8s/elastic-stack.md: -------------------------------------------------------------------------------- 1 | Prerequisites 2 | Kubernetes 1.12+ 3 | Helm 2.12+ or Helm 3.0-beta3+ 4 | PV provisioner support in the underlying infrastructure 5 | Installing the Chart 6 | To install the chart with the release name my-release: 7 | 8 | ``` bash 9 | $ helm repo add bitnami https://charts.bitnami.com/bitnami 10 | $ helm install es bitnami/elasticsearch 11 | ``` 12 | -------------------------------------------------------------------------------- /k8s/gitlab.md: -------------------------------------------------------------------------------- 1 | # gitlab 在 k8s 中的部署及注意事项 2 | 3 | + [gitlab charts](https://docs.gitlab.com/charts/) 4 | -------------------------------------------------------------------------------- /k8s/helm/es/values.yaml: -------------------------------------------------------------------------------- 1 | global: 2 | storageClass: local-storage 3 | kibanaEnabled: true 4 | master: 5 | replicas: 1 6 | data: 7 | replicas: 1 8 | -------------------------------------------------------------------------------- /k8s/helm/gitlab/values.yaml: -------------------------------------------------------------------------------- 1 | global: 2 | ingress: 3 | enabled: false 4 | nginx-ingress: 5 | enabled: false 6 | grafana: 7 | enabled: false 8 | 9 | certmanager: 10 | install: false 11 | 12 | nginx-ingress: 13 | enabled: false 14 | 15 | prometheus: 16 | install: false 17 | 18 | certmanager-issuer: 19 | email: xianger94@gmail.com 20 | -------------------------------------------------------------------------------- /k8s/helm/openvpn/create.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | if [ $# -ne 3 ] 4 | then 5 | echo "Usage: $0 " 6 | exit 7 | fi 8 | 9 | KEY_NAME=$1 10 | NAMESPACE=$2 11 | HELM_RELEASE=$3 12 | POD_NAME=$(kubectl get pods -n "$NAMESPACE" -l "app=openvpn,release=$HELM_RELEASE" -o jsonpath='{.items[0].metadata.name}') 13 | SERVICE_NAME=$(kubectl get svc -n "$NAMESPACE" -l "app=openvpn,release=$HELM_RELEASE" -o jsonpath='{.items[0].metadata.name}') 14 | SERVICE_IP=10.106.21.1 15 | kubectl -n "$NAMESPACE" exec -it "$POD_NAME" /etc/openvpn/setup/newClientCert.sh "$KEY_NAME" "$SERVICE_IP" 16 | kubectl -n "$NAMESPACE" exec -it "$POD_NAME" cat "/etc/openvpn/certs/pki/$KEY_NAME.ovpn" > "$KEY_NAME.ovpn" 17 | -------------------------------------------------------------------------------- /k8s/helm/openvpn/values.yaml: -------------------------------------------------------------------------------- 1 | service: 2 | name: openvpn 3 | type: NodePort 4 | openvpn: 5 | OVPN_K8S_POD_NETWORK: 10.244.0.0 6 | OVPN_K8S_POD_SUBNET: 255.255.0.0 7 | OVPN_K8S_SVC_NETWORK: 10.96.0.0 8 | OVPN_K8S_SVC_SUBNET: 255.240.0.0 9 | -------------------------------------------------------------------------------- /k8s/helm/sentry/values.yml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/k8s/helm/sentry/values.yml -------------------------------------------------------------------------------- /k8s/k8s-cheatsheets.md: -------------------------------------------------------------------------------- 1 | ## kubectl create secret 2 | 3 | + `docker-registry`: 创建一个给 Docker registry 使用的 secret 4 | + `generic`: 从本地 file, directory 或者 literal value 创建一个 secret 5 | + `tls`: 创建一个 TLS secret 6 | 7 | 8 | ``` bash 9 | $ kubectl create secret generic drone-server-secrets --from-literal=app="hello, world" 10 | ``` 11 | 12 | ### kubectl edit pvc 13 | 14 | `kubectl edit persistentvolumeclaims` 15 | 16 | ### kubectl get cs 17 | 18 | `kubectl get componentstatus` 19 | 20 | -------------------------------------------------------------------------------- /k8s/pvc.md: -------------------------------------------------------------------------------- 1 | # k8s 存储：PV 与 PVC 2 | 3 | 在 Docker 的容器中，使用 volumes 作为存储，但是它仅仅只是本地存储系统中的一个目录，且没有生命周期的管理。 4 | 5 | 在 k8s 中通过使用 PV 及 PVC 来对 volume 做进一步抽象。 6 | 7 | ## PV 8 | 9 | `PV` 是 k8s 集群中提供存储能力的资源，类似于 `node`。由运维人员 (administrator) 调配，也可以通过 `storage class` 来自动调配。通常可以由 `nfs` 等云存储资源提供实现 10 | 11 | 12 | ``` yaml 13 | apiVersion: v1 14 | kind: PersistentVolume 15 | metadata: 16 | name: local-redis-pv 17 | labels: 18 | type: local 19 | spec: 20 | storageClassName: local-storage 21 | capacity: 22 | storage: 10Gi 23 | accessModes: 24 | - ReadWriteOnce 25 | hostPath: 26 | path: "/mnt/k8s-data/redis" 27 | ``` 28 | 29 | ## PVC 30 | 31 | `PVC` 由用户请求 `PV` 指定大小资源及模式 (`ReadWriteOnce` 或)，如同 `pod` 向 `node` 请求 cpu/memory 资源。 32 | 33 | 34 | ## Hostpath 35 | 36 | 1. 指定当前 Host 下的磁盘 37 | 1. 没法自动调配，每次需要手动申明 PV，并指定 storageClassName 38 | 1. 每一个 PV 只能够关联一个 PVC 39 | 1. 当pod退出之后，pv/pvc 的清理也挺头疼 40 | -------------------------------------------------------------------------------- /k8s/stateful-application.md: -------------------------------------------------------------------------------- 1 | # 部署 postgres 2 | 3 | ## nfs 4 | 5 | ## PersistentVolume 与 PersistentVolumeClaim 6 | 7 | 8 | -------------------------------------------------------------------------------- /k8s/workload.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/k8s/workload.md -------------------------------------------------------------------------------- /life/10000-fans.md: -------------------------------------------------------------------------------- 1 | # 当我的公众号一万粉丝时 2 | 3 | -------------------------------------------------------------------------------- /life/2020-summary.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 2020年山月的年终总结 3 | loc: 杭州江干区 4 | date: 2021-01-12 22:44 5 | --- 6 | # 2020 年终总结 7 | 8 | 苏轼写过一首诗，用以总结自己的一生: **问汝平生功业，黄州惠州儋州**。也就是今天的湖北黄冈，广东惠州和海南儋州。 9 | 10 | 那我的2020总结起来也很简单: 11 | 12 | 北京，西安，宝鸡，天水，兰州，西宁，张掖，嘉峪关，哈密，吐鲁番，乌鲁木齐，昌吉，酒泉，武威，广元，南充，成都，眉山，乐山，宜宾，贵阳，安顺，重庆，恩施，宜昌，荆州，武汉，岳阳，长沙，湘潭，南昌，海口，绵阳，昆明，杭州。 13 | 14 | 走过最北方的是昌吉的天山天池，最南部是琼州海峡处的海口。如果说有什么遗憾的话，大概是没有带着可爱漂亮的女朋友吧。 15 | 16 | ![最北部天山天池中的小船](./assets/chang-tianchi.jpg) 17 | 18 | ![最南部琼州海峡旁的椰子树](./assets/qiong-yezi.jpg) -------------------------------------------------------------------------------- /life/assets/bazongbaheng.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/bazongbaheng.jpeg -------------------------------------------------------------------------------- /life/assets/beiwai.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/beiwai.jpg -------------------------------------------------------------------------------- /life/assets/chang-tianchi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/chang-tianchi.jpg -------------------------------------------------------------------------------- /life/assets/chang-yezi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/chang-yezi.jpg -------------------------------------------------------------------------------- /life/assets/doufunao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/doufunao.jpg -------------------------------------------------------------------------------- /life/assets/duanxiu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/duanxiu.jpg -------------------------------------------------------------------------------- /life/assets/fenghuangling.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/fenghuangling.jpg -------------------------------------------------------------------------------- /life/assets/gaotie.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/gaotie.jpeg -------------------------------------------------------------------------------- /life/assets/geek.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/geek.png -------------------------------------------------------------------------------- /life/assets/git-ncov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/git-ncov.png -------------------------------------------------------------------------------- /life/assets/graphql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/graphql.png -------------------------------------------------------------------------------- /life/assets/jianli.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/jianli.jpg -------------------------------------------------------------------------------- /life/assets/jiaoda.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/jiaoda.jpg -------------------------------------------------------------------------------- /life/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/logo.png -------------------------------------------------------------------------------- /life/assets/mdtu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/mdtu.png -------------------------------------------------------------------------------- /life/assets/minda.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/minda.jpeg -------------------------------------------------------------------------------- /life/assets/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/node.png -------------------------------------------------------------------------------- /life/assets/project.drawio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/project.drawio.png -------------------------------------------------------------------------------- /life/assets/qiong-haixia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/qiong-haixia.jpg -------------------------------------------------------------------------------- /life/assets/qiong-yezi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/qiong-yezi.jpg -------------------------------------------------------------------------------- /life/assets/star.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/star.jpeg -------------------------------------------------------------------------------- /life/assets/topo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/topo.jpg -------------------------------------------------------------------------------- /life/assets/yangtaishan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/yangtaishan.jpg -------------------------------------------------------------------------------- /life/assets/yizhijianli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/yizhijianli.png -------------------------------------------------------------------------------- /life/assets/yunmengshan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/life/assets/yunmengshan.jpg -------------------------------------------------------------------------------- /life/dog-thief.md: -------------------------------------------------------------------------------- 1 | # 偷狗贼简直不得好死 2 | 3 | 大家好，我是山月。 4 | 5 | 家里养了一条小花狗，每次出门都会屁颠屁颠跟在我后边。最近两天不见了，今天在周围地里走了两圈无人机飞了两圈也没找到。 6 | 7 | ![](https://cdn.jsdelivr.net/gh/shfshanyue/assets/2022-01-08/clipboard-2290.2479dc.webp) 8 | 9 | 如果不出意外的话，再过两三天将会生出一窝狗宝宝，我还想着小狗生下来会有几只，都是什么毛色。大概就是因为肚子太大显得很肥所以被盯上了吧。 10 | 11 | 相册里最后一张照片还是元旦时候在某个瓮里刨土，大概是想生产在里边。 12 | 13 | ![](https://cdn.jsdelivr.net/gh/shfshanyue/assets/2022-01-08/clipboard-2479.d47c1d.webp) 14 | 15 | 前几天喂了两根大骨头，没有吃，转头就在附近土里挖了个坑埋了起来。 16 | 17 | 最近几天给狗戴上了狗圈，准备栓了起来，防止把小狗生在别处。 18 | 19 | 狗圈戴好之后，想着过几天再栓吧，如果早点拴起来的话，估计也不至于被偷走了。 20 | 21 | 以前在垃圾场附近有五六条狗，今天一去看也全都不见了。据说偷狗的会有一卡车，在各个村子流动偷狗，凑够一车就运往外地。 22 | 23 | 偷狗贼简直不得好死。 24 | 25 | ![](https://cdn.jsdelivr.net/gh/shfshanyue/assets/2022-01-08/clipboard-6654.847c4c.webp) -------------------------------------------------------------------------------- /life/free.md: -------------------------------------------------------------------------------- 1 | # 工作从两点开始 2 | 3 | 在我近两年的职业生涯中，很少有在七点之后才醒过来的。起床过早就有过早的好处，今天周日，还是如同往常一样去了动物园，此时才七点多一些，动物园里这个时间点很少有人，只依稀可见几个来晨跑锻炼的。 4 | 5 | 在夏天早晨在一个公园里闲庭信步，吹着清风，颇有一番享受。苏子云："惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭，是造物者之无尽藏也"。想来住在一个公园附近实是一件幸福的事。 6 | 7 | -------------------------------------------------------------------------------- /life/learn.md: -------------------------------------------------------------------------------- 1 | # 答粉丝问: 山月，你平时是如何学习的？ 2 | 3 | 今日晚上我在 B 站直播面试题解答时，有人提问: 山月老师，你平时是怎么学习的？ 4 | 5 | 提升自己最有效的方法永远是去解决项目中的痛点问题，然而这有可能并不适合所有人。 6 | 7 | 那就退而求其次: **去熟悉你们项目**。如何熟悉项目也是一个技术活，我总结了以下步骤，用时一个月 8 | 9 | 1. 查看项目中 `package.json`，去熟悉其中的 `dependencies` 10 | + 在 npm 官方仓库中搜索每一个库，查看文档，必要时了解该库的源码 11 | + 在项目中全局搜索该库，了解该库在项目中做了什么事，解决了什么问题 12 | 1. 查看项目中 `package.json`，去熟悉其中的 `scripts` 13 | + `npm scripts` 总是与前端工程化沾点关系，如打包、测试、发包、格式化。如 `prepublishOnly` 与 `prepare` 是什么 14 | 1. 查看项目中 `package.json`，查看文档，了解所有字段的含义 15 | 1. 查看项目中的配置文件，一般高度封装的项目中就有一大堆配置文件，查看其通用配置，如 `postcss.config.js`、`tsconfig.js` 等，查看文档 16 | 1. 查看项目中的配置文件，一般高度封装的项目中就有一大堆配置文件，查看其不通用配置，如关于环境变量、CICD、部署之类，查看文档 17 | 1. 查看项目中的目录结构，查看其它文件目录的职责，如 `.gitignore`、`node_modules` 层次等 18 | 19 | 完 -------------------------------------------------------------------------------- /life/meta.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "sideTitle": "2019: 我的一天", 4 | "path": "2019-day", 5 | "category": "2019" 6 | }, 7 | { 8 | "sideTitle": "春天的花与诗", 9 | "path": "flower-in-spring" 10 | }, 11 | { 12 | "sideTitle": "北京动物园的清晨", 13 | "path": "zoo", 14 | "category": "2020" 15 | }, 16 | { 17 | "sideTitle": "2020: 年终总结", 18 | "path": "2020-summary" 19 | }, 20 | { 21 | "sideTitle": "桃花开了", 22 | "path": "taohua", 23 | "category": "2021" 24 | }, 25 | { 26 | "sideTitle": "一纸简历", 27 | "path": "yizhijianli" 28 | } 29 | ] 30 | -------------------------------------------------------------------------------- /life/side-project.md: -------------------------------------------------------------------------------- 1 | # 通过 Side Project 来学习 2 | 3 | 在三年前，我提议我们的大领导对内部 `GitLab` 做一次升级 4 | -------------------------------------------------------------------------------- /life/sunflower.md: -------------------------------------------------------------------------------- 1 | # 向日葵 2 | 3 | 北京明清故都，因此有很多名公园，颐和园是慈禧养老地，植物园是曹雪芹作书地，陶然亭是四大名亭。名园不仅需要一些****典故，更要有写花草，成片成林的花草。 4 | 5 | 四月初清明前后植物园大半个足球场区域大的郁金香就开了，各个品种的郁金香连在一起争妍斗艳。 6 | 7 | 大概牡丹象征着富贵又很好养活，几乎各地公园都有一处牡丹园，如动物园、紫竹院及玉渊潭，五月份花开，繁花似锦大富大贵。 8 | 9 | 六月份就轮到了荷花，北京的公园无不是有湖的，若有荷花，则换做荷花渡，龙潭西园、紫竹院及莲花池基本上大半个湖都是荷花了。 10 | 11 | 在北京，成片的牡丹、郁金香、荷花及月季玫瑰都几乎随处可见。那你在北京见到过一大片一大片的向日葵吗？ 12 | 13 | 我小时常见向日葵，满地的向日葵在我眼里 14 | 15 | 向日葵怎么如此好看，我近两周都沉浸在向日葵的盛世美颜中。 16 | -------------------------------------------------------------------------------- /life/sunset.md: -------------------------------------------------------------------------------- 1 | # 日落与闹钟 2 | 3 | ## 日落 4 | 5 | 北京，五月十五日，落日时间六点四十二。 6 | 7 | 小山最近换了一家公司，位于石景山某一座楼的二十层，地处荒凉，交通不便。但它有一处好：打开窗户，便是西山。燕京八景有一处是银锭观山，即在后海的银淀桥观看西山的夕阳，细想银淀观山也不过如此吧。 8 | 9 | 北京近年来空气一直很好，北方的天经常蓝灿灿的，而对于小山来说，最美好的场景不过是落日时打开窗户后的一抹夕阳，如果恰好碰到下雨，便能看到佛光普照的景象，如梦如幻。 10 | 11 | 六点四十二的落日，为了不错过这一个重要的时间点，小山定了一个闹钟提醒。 12 | 13 | 小山这么向小月解释道: 这就是为什么我有一个六点四十二的闹钟提醒。 14 | 15 | ## 闹钟 16 | 17 | 成都，十二月十五日，落日时间六点十分。 18 | 19 | 小山与小月一起手拉手走在成都的街头，多么难得的重逢，多么幸福的日子。他们一起吃了冰粉，一起吃了章鱼小丸子。 20 | 21 | -------------------------------------------------------------------------------- /life/taobao.md: -------------------------------------------------------------------------------- 1 | # 我的淘宝店 2 | 3 | 我五一期间开了淘宝店，分享一下经验与感受。 4 | 5 | 目前淘宝店大部分为代销模式，可在 1688 进货，可一键铺货到淘宝。对个人店长而言十分方便。 6 | 7 | 然而做淘宝最重要的是流量与选品(我认为)，流量就很难获取到。(不过有流量，带货也很赚钱啊) 8 | 9 | 目前新店开张，流量每天十人左右，我也比较懒，对于商品及店铺都没有丰富的详情介绍。如同 SEO 一样，这是内容的确实，这会损失一部分流量。 10 | 11 | 另外一方面是单价太低，时间成本(琐碎且无技术量)与沟通成本(与厂家与客户)太高，基本上很难持续。但是如果可以打开销量再雇人来说，还是比较划算的。(废话) 12 | 13 | 对于开店有意思的事就是在 1688 不停的去逛厂子，与厂家沟通一些细节问题，与逛淘宝的乐趣同源。 14 | 15 | 另一方面较为长进的是 `sketch` 用的愈发熟练。我戏称为淘宝开店的核心技能就是 `PS` (画图)，果然是在需求中学习，才能飞快进步。 16 | 17 | 大致就是以上，有没有同样开淘宝店的小伙伴来分享一下。 -------------------------------------------------------------------------------- /life/taohua.md: -------------------------------------------------------------------------------- 1 | # 桃花开了 2 | 3 | 桃花开了，有人在微信里与我分享。 4 | 5 | 是啊，桃花开了，可下周就要落了。桃花的花期只有两周，如今已经盛开，下周是该落了，我下意识这么回复。一回复完，我就有些失落，春华易逝，不免伤感。 6 | 7 | 前几天见到桃花，是在别人家的院子，整个农村孤零零一颗树花开，颇有点孤独的感觉。别人的院子不容易进去，也没细看。 8 | 9 | 而在上一次看到桃花，就是一年前在北京的时候，那时候我来到北京已经四年了。北京的园林绿化确实比小城市强很多，植物园与奥森漫山遍野，山桃花随处可见，甚至是在路边。 10 | 11 | 刚来到北京的时候，第一次见桃花的印象留在颐和园：阳光明媚、大片桃花、黑天鹅、长枪短炮以及夕阳下的南湖岛。这是一六年的三月，那时候还不认识桃花，就一个人胡乱对着花拍照，旁边的北京大妈科普桃花、樱花和杏花的区别，我津津有味地听着，听完还是糊里糊涂。 12 | 13 | 在北京呆久了，一个又一个春天过去，认识的花也越来越多。北京的春天以迎春始，接下来就是山桃、山杏、樱花、玉兰、丁香、海棠、牡丹、芍药。遍山的杏花在百望山、遍山的槐花在阳台山、遍山的丁香在植物园。 14 | 15 | 武大的樱花出名，在北京赏樱圣地是玉渊潭，玉渊潭在市中心，交通方便自然应该去看看。赏花聚集地如同节假日网红景点，摩肩接踵，花倒是没看到，人倒是一堆，行进速度如同早晨八点钟的龙泽、周末的八达岭。于是转而去划了船，后来也再也没有在樱花开放的时候去过玉渊潭了。 16 | 17 | 很多人喜欢樱花，樱花在这一众蔷薇科花中确实独树一帜最好辨别: 樱花的花瓣缺刻。不过樱花实在算不上漂亮，桃花就很好看，而且文化味十足。 18 | 19 | 去年今日此门中，人面桃花相映红。人面不知何处去，桃花依旧笑春风。 20 | 21 | 去年人还在北京的奥森、百望山、植物园看桃花，转眼一年过去已离开了北京。繁华的桃花不再，大概我需要出门了。 -------------------------------------------------------------------------------- /life/temp.md: -------------------------------------------------------------------------------- 1 | # XXX 在平时工作中用不到 2 | 3 | > "prepare" filename:package.json org:vuejs 4 | 5 | + 如何模糊匹配 6 | 7 | + 终端介绍 8 | 9 | -------------------------------------------------------------------------------- /life/zoo.md: -------------------------------------------------------------------------------- 1 | # 北京动物园 2 | 3 | 今年我去动物园的次数，比往年都要多，更准确点说，比我以前去的次数加起来都要多。至于原因，大致有以下三点： 4 | 5 | 1. 我办了一张北京公园年卡 6 | 1. 动物园在我附近一公里内 7 | 1. 我每天六点多就会起床 8 | 9 | 于是我几乎每天早上都会喝上一碗豆腐脑，去动物园逛一个半小时，然后上班。 10 | 11 | 我也是最近五月份机缘巧合下才养成了这个习惯：早上跑步多累呀，还不如去公园转转，不然年卡岂不白办了。我越想越有道理，就这样从不收门票的紫竹院转战到了十五块钱的动物园。机灵如我，精明如我。 12 | 13 | 现在想来动物园真是一个有趣并能乐此不疲的好地方。如果换其它的一个公园呢，如天地日月坛，玉渊潭，植物园，颐和园和陶然亭，春天百花盛开还好一些，夏冬天就很无趣了。纵植物园有曹雪芹的黄叶村，颐和园的皇家园林，陶然亭的四大名亭这样的文化及典故也无济于事。文化本来感兴趣的不多，天天感兴趣的就更少了。至于亭台楼阁，假山花圃，更无人问津。大概无所用心，略显乏味，缺乏足够的动力与正反馈，就很难每天坚持下来了。 14 | 15 | 动物园有趣有有趣在以下几点 16 | 17 | 1. 动物园太大，每次去了都能看到陌生动物，毕竟也不是所有水禽走兽都会一直呆在外边供你参观 18 | 1. 总能看到同一动物的不同神态，如果丰容工作做得好了，便能了解到一个小的生物群体关系，看他们追逐打闹，如猴山与狮虎山 19 | 1. 多识鱼虫禽兽之名也是一件很有趣的事，如同记忆路边花草，既好看的动物名字更是赏心悦目，如薮猫，银狐与狐猴 20 | 21 | 22 | 李白云：夫天地者，万物之逆旅；光阴者，百代之过客。我独自一人大早上逛动物园，岂不把两者都占尽了，一园子水禽走兽是万物，凌晨六七点乃是光阴。 23 | 24 | 苏轼云：惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭，是造物者之无尽藏也。夏天的早上沿动物园长河，吹凉风，听白鸟叫，看火烈鸟，也是无尽藏也。 25 | 26 | -------------------------------------------------------------------------------- /mac/readme.md: -------------------------------------------------------------------------------- 1 | # 从零武装你的 MAC 笔记本 -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('storage', e => { 2 | console.log(e) 3 | document.body.style.background = 'black' 4 | }) 5 | 6 | localStorage.a = 3 7 | localStorage.setItem('b', 8) 8 | 9 | setTimeout(() => { 10 | localStorage.a = 4 11 | localStorage.setItem('b', Math.random()) 12 | }, 3000) 13 | -------------------------------------------------------------------------------- /markdown/Readme.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/markdown/Readme.md -------------------------------------------------------------------------------- /markdown/highlight.md: -------------------------------------------------------------------------------- 1 | # 如何实现代码高亮 2 | 3 | ![highlight](https://cdn.jsdelivr.net/gh/shfshanyue/assets@master/src/highlight.5kxdmuqm2a00.png) 4 | 5 | ## react-syntax-highlighter 6 | 7 | 基于两大最出名的代码高亮库: 8 | 9 | 1. highlight.js 10 | 1. prisma 11 | 12 | ## highlight.js 13 | 14 | ### lowlight 15 | 16 | 适用于虚拟 DOM 的代码高亮 17 | 18 | ## prisma 19 | 20 | ### refractor 21 | 22 | ## 高亮 23 | 24 | 1. 核心代码: 把 code 进行分段 25 | 1. 编程语言关键词库 26 | 1. 主题: 如 `solarized` 27 | -------------------------------------------------------------------------------- /markdown/mermaid.md: -------------------------------------------------------------------------------- 1 | # mermaid 2 | 3 | ``` mermaid 4 | flowchart TB 5 | A(圆角) --> B[方角] 6 | B --> C 7 | C --- D 8 | D --- E 9 | D -.-> E 10 | E -->|字|F 11 | F --> A 12 | 13 | ``` 14 | 15 | ``` mermaid 16 | %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% 17 | graph TD 18 | a --> b 19 | ``` -------------------------------------------------------------------------------- /math/algebra.md: -------------------------------------------------------------------------------- 1 | # 数学中的术语及解释 2 | 3 | ## 笛卡尔坐标系 4 | 5 | 在笛卡尔坐标系中，每个点都可以使用坐标 `(x, y)` 来表示 6 | 7 | ## -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | base = "" 3 | publish = ".vuepress/dist" 4 | command = "npm run build" 5 | 6 | [[headers]] 7 | for = "/*" 8 | 9 | [headers.values] 10 | cache-control = "max-age=7200" 11 | 12 | 13 | [[headers]] 14 | for = "/assets/*" 15 | 16 | [headers.values] 17 | cache-control = "max-age=31536000" 18 | 19 | -------------------------------------------------------------------------------- /newline.txt: -------------------------------------------------------------------------------- 1 | LF 2 | CRLF 3 | END 4 | -------------------------------------------------------------------------------- /no-vps/assets/action-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/action-result.png -------------------------------------------------------------------------------- /no-vps/assets/action-secret.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/action-secret.png -------------------------------------------------------------------------------- /no-vps/assets/action-select.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/action-select.jpg -------------------------------------------------------------------------------- /no-vps/assets/action-setup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/action-setup.jpg -------------------------------------------------------------------------------- /no-vps/assets/action-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/action-start.png -------------------------------------------------------------------------------- /no-vps/assets/action-workflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/action-workflow.png -------------------------------------------------------------------------------- /no-vps/assets/ali-price.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/ali-price.png -------------------------------------------------------------------------------- /no-vps/assets/alioss-cdn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/alioss-cdn.png -------------------------------------------------------------------------------- /no-vps/assets/alioss-cname.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/alioss-cname.png -------------------------------------------------------------------------------- /no-vps/assets/alioss-domain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/alioss-domain.png -------------------------------------------------------------------------------- /no-vps/assets/alioss-https.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/alioss-https.png -------------------------------------------------------------------------------- /no-vps/assets/alioss-proxy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/alioss-proxy.png -------------------------------------------------------------------------------- /no-vps/assets/alioss-rewrite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/alioss-rewrite.png -------------------------------------------------------------------------------- /no-vps/assets/alioss-rewrites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/alioss-rewrites.png -------------------------------------------------------------------------------- /no-vps/assets/buy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/buy.jpg -------------------------------------------------------------------------------- /no-vps/assets/cdn-cache.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/cdn-cache.jpg -------------------------------------------------------------------------------- /no-vps/assets/deploy-blog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/deploy-blog.jpg -------------------------------------------------------------------------------- /no-vps/assets/dev-env.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/dev-env.png -------------------------------------------------------------------------------- /no-vps/assets/lock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/lock.png -------------------------------------------------------------------------------- /no-vps/assets/netlify-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/netlify-2.jpg -------------------------------------------------------------------------------- /no-vps/assets/netlify-build-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/netlify-build-options.jpg -------------------------------------------------------------------------------- /no-vps/assets/netlify-custom-domain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/netlify-custom-domain.jpg -------------------------------------------------------------------------------- /no-vps/assets/netlify-new-site.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/netlify-new-site.jpg -------------------------------------------------------------------------------- /no-vps/assets/netlify-ok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/netlify-ok.png -------------------------------------------------------------------------------- /no-vps/assets/netlify-repo-access.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/netlify-repo-access.jpg -------------------------------------------------------------------------------- /no-vps/assets/netlify-step2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/netlify-step2.jpg -------------------------------------------------------------------------------- /no-vps/assets/releases-overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/releases-overview.png -------------------------------------------------------------------------------- /no-vps/assets/sentry-issue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/sentry-issue.png -------------------------------------------------------------------------------- /no-vps/assets/sentry-memory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/sentry-memory.png -------------------------------------------------------------------------------- /no-vps/assets/sentry-ok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/sentry-ok.png -------------------------------------------------------------------------------- /no-vps/assets/sentry-seen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/sentry-seen.png -------------------------------------------------------------------------------- /no-vps/assets/sls.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/sls.gif -------------------------------------------------------------------------------- /no-vps/assets/tmux-help.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/tmux-help.jpg -------------------------------------------------------------------------------- /no-vps/assets/tmux-split.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/tmux-split.gif -------------------------------------------------------------------------------- /no-vps/assets/vercel-import.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/no-vps/assets/vercel-import.png -------------------------------------------------------------------------------- /no-vps/meta.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "sideTitle": "1. 博客搭建指南", 4 | "path": "if-you-want-a-blog", 5 | "category": "有可能你并不需要服务器" 6 | }, 7 | { 8 | "sideTitle": "2. Github Actions 指南", 9 | "path": "github-action-guide" 10 | }, 11 | { 12 | "sideTitle": "3. Netlify: 前端托管", 13 | "path": "deploy-fe-with-netlify" 14 | }, 15 | { 16 | "sideTitle": "4. AliOSS(国内): 前端托管", 17 | "path": "deploy-fe-with-alioss" 18 | }, 19 | { 20 | "sideTitle": "5. Serverless Framework", 21 | "path": "serverless" 22 | }, 23 | { 24 | "sideTitle": "6. Github/jsdelivr 图片资源托管", 25 | "path": "images-in-blog" 26 | }, 27 | { 28 | "sideTitle": "7. Serverless: 前端托管", 29 | "path": "serverless-fe" 30 | }, 31 | { 32 | "sideTitle": "8. Vercel: API 服务", 33 | "path": "api" 34 | }, 35 | { 36 | "sideTitle": "9. Sentry: 异常监控", 37 | "path": "sentry" 38 | } 39 | ] 40 | -------------------------------------------------------------------------------- /no-vps/project.md: -------------------------------------------------------------------------------- 1 | # 可能适合新手练手的项目 2 | 3 | + gitignore 4 | + devdocs 5 | + document (react/vue/lodash/antd) -------------------------------------------------------------------------------- /no-vps/seo.md: -------------------------------------------------------------------------------- 1 | # 网站 SEO 相关指标及优化 2 | 3 | 如果一家互联网企业涉及到 toC 的业务 4 | 5 | ## 术语 6 | 7 | ### title 8 | 9 | ### keywords 10 | 11 | ### description 12 | 13 | ## 长尾词优化 14 | 15 | -------------------------------------------------------------------------------- /no-vps/sls-view.md: -------------------------------------------------------------------------------- 1 | # timeout 2 | # sls.js 3 | # 200MB 4 | # component name 5 | -------------------------------------------------------------------------------- /node-practise/index.md: -------------------------------------------------------------------------------- 1 | 1. 使用 docker 在本地搭建一个 postgres/redis 2 | 2. 在 github 找到成语接龙数据，插入进去 3 | 3. 了解 graphql 并且 koa、graphql 结合写 server 4 | 4. 了解 postgresql，sequelize 操作数据库 5 | 5. 了解 jwt，设计认证与鉴权 6 | 6. 限流设计，用户太多访问太大，限流 7 | 7. 日志设计，接入数据 8 | 8. 部署 9 | 9. 异常与报警设计 10 | 10. 前端界面设计 11 | 10. 前端界面设计，及在线部署 12 | 11. 性能分析与调试 -------------------------------------------------------------------------------- /node/addon.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/addon.md -------------------------------------------------------------------------------- /node/assets/alert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/alert.png -------------------------------------------------------------------------------- /node/assets/cli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/cli.png -------------------------------------------------------------------------------- /node/assets/cors-simple.drawio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/cors-simple.drawio.png -------------------------------------------------------------------------------- /node/assets/cypress.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/cypress.gif -------------------------------------------------------------------------------- /node/assets/htop-pid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/htop-pid.png -------------------------------------------------------------------------------- /node/assets/koa-module.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/koa-module.jpg -------------------------------------------------------------------------------- /node/assets/koa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/koa.jpg -------------------------------------------------------------------------------- /node/assets/log-jq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/log-jq.jpg -------------------------------------------------------------------------------- /node/assets/log-requestid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/log-requestid.png -------------------------------------------------------------------------------- /node/assets/log.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/log.jpg -------------------------------------------------------------------------------- /node/assets/md-cli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/md-cli.png -------------------------------------------------------------------------------- /node/assets/module-koa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/module-koa.png -------------------------------------------------------------------------------- /node/assets/module-wrapper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/module-wrapper.png -------------------------------------------------------------------------------- /node/assets/module.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/module.png -------------------------------------------------------------------------------- /node/assets/prettier-editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/prettier-editor.png -------------------------------------------------------------------------------- /node/assets/prettier-lang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/prettier-lang.png -------------------------------------------------------------------------------- /node/assets/prettier.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/prettier.png -------------------------------------------------------------------------------- /node/assets/require-cache.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/require-cache.png -------------------------------------------------------------------------------- /node/assets/require.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/require.png -------------------------------------------------------------------------------- /node/assets/storybook.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/storybook.gif -------------------------------------------------------------------------------- /node/assets/svg-encode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/svg-encode.png -------------------------------------------------------------------------------- /node/assets/yangcong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/assets/yangcong.png -------------------------------------------------------------------------------- /node/body-parse.md: -------------------------------------------------------------------------------- 1 | # Body Parse / Raw Body 2 | 3 | 在 Node Server 中，`HTTP Request` 基于 `Readable Stream`，我们可以通过读取可读流的方式，将原始请求体读取出来。 4 | 5 | 简单粗暴的解析代码如下: 6 | 7 | ``` js 8 | const server = http.createServer((req, res) => { 9 | let body = '' 10 | req.on('data', chunk => body += chunk) 11 | req.on('end', () => { 12 | res.end(body) 13 | }) 14 | }) 15 | ``` 16 | 17 | ## gzip/brotli 解析 18 | 19 | 我们知道，为了节省带宽，在针对静态资源进行部署时，往往会做 gzip/brotli 的压缩。 20 | 21 | 从浏览器发的请求来看，也会有经过压缩的内容，此时在服务器端需要先把请求体进行解压缩。 22 | 23 | ## Content-Type 24 | 25 | -------------------------------------------------------------------------------- /node/buffer.md: -------------------------------------------------------------------------------- 1 | # raw-data 2 | -------------------------------------------------------------------------------- /node/child-process.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/child-process.md -------------------------------------------------------------------------------- /node/ci-release.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/ci-release.md -------------------------------------------------------------------------------- /node/debug-tips.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/debug-tips.md -------------------------------------------------------------------------------- /node/demo/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:12-alpine 2 | 3 | RUN node -e "Promise.reject('hello, world')" 4 | -------------------------------------------------------------------------------- /node/demo/a.out: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/demo/a.out -------------------------------------------------------------------------------- /node/demo/app-mem/index.js: -------------------------------------------------------------------------------- 1 | const Koa = require('koa') 2 | const app = new Koa() 3 | 4 | const data = Array.from(Array(1000)).map(x => 10086) 5 | 6 | app.use(async (ctx, next) => { 7 | ctx.data = data 8 | await next() 9 | }) 10 | 11 | app.use(ctx => { 12 | ctx.body = 'hello, world' 13 | }) 14 | 15 | app.listen(3200, () => console.log('Port: 3200')) 16 | -------------------------------------------------------------------------------- /node/demo/async.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const async_hooks = require('async_hooks') 3 | 4 | function log (...args) { 5 | fs.writeSync(1, args.join(' ') + '\n') 6 | } 7 | 8 | async_hooks.createHook({ 9 | init(asyncId, type, triggerAsyncId, resource) { 10 | log('Init: ', `${type}(asyncId=${asyncId}, parentAsyncId: ${triggerAsyncId})`) 11 | }, 12 | before(asyncId) { 13 | log('Before: ', asyncId) 14 | }, 15 | after(asyncId) { 16 | log('After: ', asyncId) 17 | }, 18 | destroy(asyncId) { 19 | log('Destory: ', asyncId); 20 | } 21 | }).enable() 22 | 23 | setTimeout(() => { 24 | // after 生命周期在回调函数最前边 25 | console.log('Async Before') 26 | Promise.resolve() 27 | Promise.resolve() 28 | Promise.resolve() 29 | // after 生命周期在回调函数最后边 30 | console.log('Async After') 31 | }) -------------------------------------------------------------------------------- /node/demo/compute.js: -------------------------------------------------------------------------------- 1 | function sum(a, b) { 2 | return a + b 3 | } 4 | 5 | console.log(sum(3, 4)) 6 | -------------------------------------------------------------------------------- /node/demo/cors/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /node/demo/cors/index.js: -------------------------------------------------------------------------------- 1 | const Koa = require('koa') 2 | const app = new Koa() 3 | 4 | app.use(ctx => { 5 | ctx.body = 'hello, world' 6 | }) 7 | 8 | app.listen(3200, () => console.log('Port: 3200')) 9 | -------------------------------------------------------------------------------- /node/demo/debug/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /node/demo/echo.js: -------------------------------------------------------------------------------- 1 | const http = require('http') 2 | 3 | const data = Array.from(Array(10000), x => 0).join(',') 4 | 5 | http.createServer((req, res) => { 6 | res.end(data) 7 | }).listen(3333) 8 | -------------------------------------------------------------------------------- /node/demo/error.js: -------------------------------------------------------------------------------- 1 | async function error () { 2 | throw new Error('hello, error') 3 | } 4 | 5 | error().catch(e => { 6 | console.log('hello, world') 7 | process.exitCode = 1 8 | }) 9 | 10 | // process.on('unhandledRejection', e => { 11 | // console.error(e) 12 | // }) -------------------------------------------------------------------------------- /node/demo/exec.c: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | 5 | int main(void) 6 | { 7 | printf("entering main process---\n"); 8 | execl("/usr/local/bin/node", "node", "", NULL); 9 | printf("exiting main process ----\n"); 10 | return 0; 11 | } 12 | -------------------------------------------------------------------------------- /node/demo/exec.js: -------------------------------------------------------------------------------- 1 | const { exec } = require('child_process') 2 | 3 | const p = exec('strace -o oo node', (error, stdout, stderr) => { 4 | if (error) { 5 | console.error(`exec error: ${error}`); 6 | return; 7 | } 8 | console.log(`stdout: ${stdout}`); 9 | console.error(`stderr: ${stderr}`); 10 | }) 11 | 12 | console.log(p.pid) 13 | -------------------------------------------------------------------------------- /node/demo/lib/index.js: -------------------------------------------------------------------------------- 1 | require('./utils') 2 | require('./utils') 3 | require('fs') 4 | 5 | console.log(require) -------------------------------------------------------------------------------- /node/demo/lib/utils.js: -------------------------------------------------------------------------------- 1 | console.log('Utils: ', module) 2 | 3 | -------------------------------------------------------------------------------- /node/demo/loop.c: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/demo/loop.c -------------------------------------------------------------------------------- /node/demo/module/a.js: -------------------------------------------------------------------------------- 1 | function App () { 2 | const [text, setText] = useState('') 3 | return ( 4 |
5 | { text } 6 | 7 |
8 | ) 9 | } 10 | 11 | function Button ({ text, onClick }) { 12 | return ( 13 |
14 | { text } 15 |
16 | ) 17 | } -------------------------------------------------------------------------------- /node/demo/module/b.js: -------------------------------------------------------------------------------- 1 | const o = require('./a') 2 | 3 | console.log(o) 4 | 5 | setTimeout(() => { 6 | console.log(o) 7 | }) 8 | -------------------------------------------------------------------------------- /node/demo/require/index.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | 3 | const add = (x, y) => x + y 4 | 5 | module.exports = add 6 | 7 | console.log(module, require) -------------------------------------------------------------------------------- /node/demo/require/utils.js: -------------------------------------------------------------------------------- 1 | console.log('Utils: ', module) -------------------------------------------------------------------------------- /node/demo/signal.js: -------------------------------------------------------------------------------- 1 | console.log(`Pid: ${process.pid}`) 2 | 3 | // process.on('SIGINT', () => console.log('Received: SIGINT')) 4 | // // process.on('SIGKILL', () => console.log('Received: SIGKILL')) 5 | // process.on('SIGTERM', () => console.log('Received: SIGTERM')) 6 | 7 | Promise.reject('hello, world') 8 | 9 | setTimeout(() => {}, 1000000) -------------------------------------------------------------------------------- /node/demo/spawn.js: -------------------------------------------------------------------------------- 1 | const { spawn } = require('child_process') 2 | const ls = spawn('ls', ['-lh', '/usr']) 3 | 4 | ls.stdout.on('data', (data) => { 5 | console.log(`stdout: ${data}`) 6 | }); 7 | 8 | ls.stderr.on('data', (data) => { 9 | console.error(`stderr: ${data}`) 10 | }); 11 | 12 | ls.on('close', (code) => { 13 | console.log(`child process exited with code ${code}`) 14 | }); 15 | 16 | console.log(ls.pid) 17 | -------------------------------------------------------------------------------- /node/demo/tick.js: -------------------------------------------------------------------------------- 1 | // v10 VS v12 2 | // https://blog.insiderattack.net/new-changes-to-timers-and-microtasks-from-node-v11-0-0-and-above-68d112743eb3 3 | 4 | setTimeout(() => console.log('timeout1')); 5 | setTimeout(() => { 6 | console.log('timeout2') 7 | Promise.resolve().then(() => console.log('promise resolve')) 8 | }); 9 | setTimeout(() => console.log('timeout3')); 10 | setTimeout(() => console.log('timeout4')); 11 | -------------------------------------------------------------------------------- /node/demo/tick2.js: -------------------------------------------------------------------------------- 1 | setImmediate(() => console.log('immediate1')); 2 | setImmediate(() => { 3 | console.log('immediate2') 4 | Promise.resolve().then(() => console.log('promise resolve')) 5 | }); 6 | setImmediate(() => console.log('immediate3')); 7 | setImmediate(() => console.log('immediate4')); 8 | -------------------------------------------------------------------------------- /node/env.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2021-01-12 13:06 3 | loc: 杭州江干区 4 | --- 5 | 6 | # 环境变量应该扔在哪里 7 | 8 | + Application: .env 9 | + Container: .env 10 | + CI: Gitlab CI 11 | + Kubernetes Config/Environment 12 | + Consul/Vault -------------------------------------------------------------------------------- /node/event-loop.md: -------------------------------------------------------------------------------- 1 | # Node 中的事件循环 2 | 3 | > 你只能看到你想看到的观点，面试官只想听到他所背会的面试题 4 | 5 | ## -------------------------------------------------------------------------------- /node/exec.md: -------------------------------------------------------------------------------- 1 | # 进程：exec 与 spawn -------------------------------------------------------------------------------- /node/form.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/form.md -------------------------------------------------------------------------------- /node/fs.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2021-07-13 01:18 3 | --- 4 | 5 | # FileSystem API 6 | 7 | + fsevents 8 | + fs-extra 9 | + chokidar 10 | + graceful-fs 11 | + readdirp 12 | + fstream 13 | 14 | ## 如何判断一个文件是 socket 15 | 16 | ## Stat 17 | 18 | ## Mode 19 | -------------------------------------------------------------------------------- /node/gc.md: -------------------------------------------------------------------------------- 1 | http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection 2 | 3 | -------------------------------------------------------------------------------- /node/gyp.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/gyp.md -------------------------------------------------------------------------------- /node/log-ES.md: -------------------------------------------------------------------------------- 1 | # 日志的收集 2 | 3 | + filebeat 4 | 5 | ## IOPS 6 | 7 | ## 日志所影响的CPU及内存 8 | 9 | ## `class` / `extends` 10 | 11 | ``` js 12 | function Animal (name) { 13 | this.name = name 14 | } 15 | 16 | Animal.prototype.hello = () => { 17 | console.log('hello') 18 | } 19 | 20 | function Dog (name, say) { 21 | Animal.call(this, name) 22 | this.say = say 23 | } 24 | 25 | Dog.prototype = Object.create(Animal.prototype) 26 | 27 | Reflect.defineProperty(Dog.prototype, "constructor", { 28 | value: Dog, 29 | enumerable: false, // 不可枚举 30 | writable: true 31 | }) 32 | ``` 33 | 34 | 35 | ``` js 36 | class Animal { 37 | constructor (name) { 38 | this.name = name 39 | } 40 | 41 | hello () { 42 | console.log('hello') 43 | } 44 | } 45 | 46 | class Dog extends Animal { 47 | constructor (name, say) { 48 | super(name) 49 | this.say = say 50 | } 51 | } 52 | ``` -------------------------------------------------------------------------------- /node/mq.md: -------------------------------------------------------------------------------- 1 | ## 监控 2 | 3 | + 发送消息延迟 4 | + 拉取消息延迟 5 | + 触发限流的原因 6 | + 7 | -------------------------------------------------------------------------------- /node/nexttick.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/nexttick.md -------------------------------------------------------------------------------- /node/oom.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/oom.md -------------------------------------------------------------------------------- /node/process.md: -------------------------------------------------------------------------------- 1 | # 2 | -------------------------------------------------------------------------------- /node/protolbuffer.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/protolbuffer.md -------------------------------------------------------------------------------- /node/relese-error.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/relese-error.md -------------------------------------------------------------------------------- /node/sentry.md: -------------------------------------------------------------------------------- 1 | ``` bash 2 | $ npm install @sentry/node 3 | ``` 4 | 5 | ``` js 6 | import * as Sentry from '@sentry/node'; 7 | 8 | Sentry.init({ dsn: 'https://f1dd118c70e04dc2bfbcd7296ae11f05@o274112.ingest.sentry.io/5278778' }); 9 | ``` 10 | -------------------------------------------------------------------------------- /node/system-call.md: -------------------------------------------------------------------------------- 1 | ## epoll 2 | ## clone 3 | -------------------------------------------------------------------------------- /node/timeout.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/timeout.md -------------------------------------------------------------------------------- /node/ts-and-babel.md: -------------------------------------------------------------------------------- 1 | # 如何加载 typescript 与 babel 代码 -------------------------------------------------------------------------------- /node/v8-compile-cache.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/node/v8-compile-cache.md -------------------------------------------------------------------------------- /node/web/index.md: -------------------------------------------------------------------------------- 1 | 1. HTTP 2 | 1. HTTP Callback 3 | 1. HTTP Middleware 4 | 1. HTTP Context 5 | 1. querystring 6 | 1. HTTP Route 7 | 1. base 8 | 1. prefix 9 | 1. Middleware 10 | 1. raw 11 | 1. body 12 | 1. cors 13 | 1. fast-json-stringify 14 | 1. logger 15 | -------------------------------------------------------------------------------- /note/china/Readme.md: -------------------------------------------------------------------------------- 1 | # 航拍中国笔记及各省旅游攻略整理 2 | 3 | > 你见过什么样的中国，是960万平方公里的辽阔，还是300万平方公里的澎湃？是四季轮转的天地，还是冰与火演奏的乐章？像鸟儿一样，离开地面，冲上云霄，结果超乎你的想象，前往平时无法到达的地方，看见专属于高空的奇观。俯瞰这片朝夕相处的大地，再熟悉的景象，也变了一副模样。从身边的世界到远方的家园，从自然、地理到人文、历史，50分钟的空中旅程，前所未有的极致体验，从现在开始，和我们一起，天际遨游。 -------------------------------------------------------------------------------- /note/china/anhui.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-11-19 19:00 3 | loc: 贵阳南明区 4 | 5 | --- 6 | 7 | # 安徽 8 | 9 | 关键字： 10 | 11 | + 淮河 12 | 13 | ## 黄山·黄山·黄山松 14 | 15 | > 与这群山一同，塑造成大地的盆景 16 | 17 | ## 黄山·黄山·黄山光明顶 18 | 19 | 上险峰，下幽谷 20 | 21 | ## 黄山·黄山·黄山气象站 22 | 23 | 在什么时间可以看到奇异的光 24 | 25 | ## 绩溪·豺狗狼尖 26 | 27 | 28 | ## 黟县·木坑竹海 29 | 30 | 卧虎藏龙 31 | 32 | ## 黟县·塔川村 33 | 34 | 晒秋 35 | 36 | ## 黟县·宏村 37 | 38 | 粉墙黛瓦 39 | 40 | ## 泾县·宣纸 41 | 42 | 108道工序， 43 | 44 | 描绘每个人自己心目中的山水 45 | 46 | ## 皖南·新安江 47 | 48 | ## 故道 49 | 50 | 黄河故道 51 | 52 | ## 阜阳·江淮百亿粮仓 53 | 54 | ## 当涂·大公圩 55 | 56 | ## 淮河铁路大桥 57 | 58 | ## 临淮岗大坝 59 | 60 | ## 焦岗湖 61 | 62 | ## 淮南·水上漂浮式光伏电站 63 | 64 | ## 小孤山 65 | 66 | ## 安庆·振风塔 67 | 68 | 徽班进京 69 | 70 | ## 芜湖·芜湖港 71 | 72 | ## 马鞍山·马鞍山港 73 | 74 | ## 宣城·扬子鳄 75 | 76 | ## 绩溪·皖浙天路 77 | 78 | ## 天柱山 79 | 80 | ## 大别山天堂寨 -------------------------------------------------------------------------------- /note/china/chongqing.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-11-28 19:00 3 | loc: 贵阳南明区 4 | 5 | --- 6 | 7 | # 重庆 8 | 9 | 5A 景点: 10 | 11 | + 重庆大足石刻景区 12 | + 重庆巫山小三峡—小小三峡 13 | + 武隆喀斯特旅游区（天生三桥、仙女山、芙蓉洞) 14 | + 南川金佛山景区 15 | + 重庆酉阳桃花源景区 16 | + 黑山谷景区 17 | + 重庆市江津四面山景区 18 | + 云阳龙缸景区 19 | + 彭水县阿依河景区 20 | 21 | 主城九区: 渝中区、江北区、南岸区、沙坪坝区、九龙坡区、大渡口区、渝北区、巴南区、北碚区 22 | 23 | ## 沙坪坝·磁器口 24 | 25 | ## 渝中·洪崖洞 26 | 27 | ## 武隆·天坑地缝 (自) (5A) 28 | 29 | ## 南川·金佛山 (自) (5A) 30 | 31 | ## 武隆·芙蓉洞 32 | 33 | ## 江津四面山 -------------------------------------------------------------------------------- /note/china/hebei.md: -------------------------------------------------------------------------------- 1 | # 河北 2 | 3 | 十一市 4 | 5 | ## 燕山 6 | 7 | ## 秦皇岛·山海关·老龙头 8 | 9 | > 万里长城，唯有此处入海 10 | 11 | ## 秦皇岛·三道关长城 12 | 13 | > 14 | 15 | ## 承德·滦平·金山岭长城 16 | 17 | ## 承德·避暑山庄 18 | 19 | ## 承德·木兰围场 (5A) 20 | 21 | ## 沧州·京杭大运河沧州段 22 | 23 | ## 唐山·唐山地震遗址公园 24 | 25 | ## 唐山·曹妃甸 26 | 27 | ## 秦皇岛·海边图书馆 28 | 29 | ## 秦皇岛·昌黎·沙丘美术馆 30 | 31 | ## 张家口·宣化·宣化城市葡萄园 32 | 33 | ## 茶山 34 | 35 | ## 保定·阜平· 36 | 37 | ## 石家庄·平山·西柏坡 (5A) (重) 38 | 39 | ## 石家庄·赞皇·嶂石岩 (风) (4A) 40 | 41 | > 百里赤壁、丹崖长墙 42 | 43 | 嶂石岩地貌为我国三大旅游砂岩地貌(丹霞地貌、张家界地貌与嶂石岩地貌)之一 44 | 45 | ## 邯郸·涉县·旱作梯田 46 | 47 | ## 廊坊·香河·百年渡口 48 | 49 | ## 首都环线高速 50 | 51 | ## 保定·安新·白洋淀 (5A) 52 | 53 | ## 石家庄·正定·正定古城 54 | 55 | ## 红松洼 56 | 57 | ## 塞罕坝 58 | 59 | > 塞罕坝，可理解为美丽的高岭，从一棵树，到一片森林。 60 | 61 | ## 62 | 63 | 马铃薯，从五百公斤到三千五百公斤的辉煌战绩 64 | 65 | ## 老掌沟 66 | 67 | ## 崇礼 -------------------------------------------------------------------------------- /note/china/hubei.md: -------------------------------------------------------------------------------- 1 | # 湖北 2 | 3 | ## 恩施·利川·腾龙洞 (4A) 4 | 5 | ## 恩施·恩施·恩施大峡谷 (5A) 6 | 7 | ## 恩施·恩施·土司城 (4A) 8 | 9 | ## 恩施·巴东·神龙溪 10 | 11 | ## 宜昌·夷陵·三峡大坝 (5A) 12 | 13 | ## 宜昌·夷陵·三峡大瀑布 (4A) 14 | 15 | ## 宜昌·夷陵·西陵峡 (4A) 16 | 17 | ## 宜昌·夷陵·三游洞 (4A) 18 | 19 | ## 宜昌·长阳·清江画廊 (5A) 20 | 21 | ## 襄阳·襄城·古隆中 (5A) 22 | 23 | ## 荆州·荆州古城 (4A) 24 | 25 | ## 荆州·荆州博物馆 (4A) 26 | 27 | ## 咸宁·赤壁古战场 (5A) 28 | 29 | ## 武汉·黄鹤楼 30 | 31 | ## 武汉·东湖 32 | 33 | ## 武汉·武汉市革命博物馆 34 | 35 | ## 武汉·武汉博物馆 36 | 37 | ## 荆州·荆州博物馆 38 | 39 | -------------------------------------------------------------------------------- /note/china/jiangxi.md: -------------------------------------------------------------------------------- 1 | # 江西 2 | 3 | ## 九江·庐山 4 | 5 | ## 鄱阳湖 6 | 7 | ## 庐山·牯岭镇 8 | 9 | ## 庐山·白鹿洞书院 10 | 11 | ## 庐山西海 12 | 13 | ## 婺源 14 | 15 | ## 婺源·秋溪村 16 | 17 | ## 婺源·菊径村 18 | 19 | ## 婺源·鸳鸯湖 20 | 21 | > 宜居的地方，不仅让人类留恋，还吸引动物纷至沓来 22 | 23 | ## 婺源·晓起村 24 | 25 | > 因酷似熊猫，小腿白笋又称为熊猫鸟 26 | 27 | ## 婺源·篁岭 28 | 29 | > 晒秋 30 | 31 | ## 南昌·安义古村 32 | 33 | > 为了让空气流通，人们在屋子上方留出个口子，取名天井 34 | 35 | ## 吉安·钧源村 36 | 37 | ## 抚州·南丰县 38 | 39 | 40 | ## 抚州·南丰·南丰傩舞 41 | 42 | ## 三清山···女神峰·巨蟒出山·玉灵观 43 | 44 | > 亿万年的海陆浮沉，塑造了三清山百变的怪石 45 | 46 | ## 上饶·铅山··· 47 | 48 | ## 龙虎山 49 | 50 | 悬棺 51 | 52 | ## 井冈山 53 | 54 | ## 赣江支流 -------------------------------------------------------------------------------- /note/china/jilin.md: -------------------------------------------------------------------------------- 1 | # 吉林 2 | 3 | ## 长白山 4 | 5 | ## 天池 6 | 7 | 最大的火山口湖，世界上最深的高山湖泊，不具备鱼类生存条件 8 | 9 | ## 四海龙湾 10 | 11 | ## 龙岗火山群 12 | 13 | ## 瞭望塔 14 | 15 | ## 和龙市 16 | 17 | ## 珲春敬信湿地 18 | 19 | ## 向海湿地 20 | 21 | ## 一汽 22 | 23 | ## 净月潭 -------------------------------------------------------------------------------- /note/china/meta.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "河北航拍中国笔记及旅游攻略补充", 4 | "sideTitle": "河北", 5 | "path": "hebei" 6 | }, 7 | { 8 | "title": "新疆航拍中国笔记及旅游攻略补充", 9 | "sideTitle": "新疆", 10 | "path": "xinjiang" 11 | }, 12 | { 13 | "title": "贵州航拍中国笔记及旅游攻略补充", 14 | "sideTitle": "贵州", 15 | "path": "guizhou" 16 | }, 17 | { 18 | "title": "安徽航拍中国笔记及旅游攻略补充", 19 | "sideTitle": "安徽", 20 | "path": "anhui" 21 | }, 22 | { 23 | "title": "山西航拍中国笔记及旅游攻略补充", 24 | "sideTitle": "山西", 25 | "path": "shanxi" 26 | }, 27 | { 28 | "title": "湖南航拍中国笔记及旅游攻略补充", 29 | "sideTitle": "湖南", 30 | "path": "hunan" 31 | } 32 | ] -------------------------------------------------------------------------------- /op/.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | *.ovpn 3 | *.json 4 | *-data 5 | log -------------------------------------------------------------------------------- /op/ansible-problem.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 带着问题学习 ansible 3 | tags: 4 | - devops 5 | - linux 6 | 7 | --- 8 | 9 | # ansible 中的细节问题 10 | 11 | 如何更快地学习某门技术？ 12 | 13 | + 学习示例，比如 ansible 可以查看 [ansible/ansible-examples](https://github.com/ansible/ansible-examples) 14 | + 带着问题来思考 15 | 16 | 于是我总结了在我初学 ansible 时所带的一些疑问 17 | 18 | ### 当某个 task 执行错误时不中断操作 19 | 20 | 添加参数 `ignore_errors: true` 21 | 22 | ```yaml 23 | - name: install pip 24 | register: pip 25 | yum: 26 | name: python-pip 27 | ignore_errors: true 28 | ``` 29 | 30 | ### 如何根据 task 执行结果来作为分支条件 31 | 32 | 使用 `register` 监听当前任务执行结果，`when` 作为分支条件 33 | 34 | ### 使用 git，file 等模块比直接使用 shell 模块的优势在哪里 35 | 36 | 幂等性。如使用 shell 的话， `git clone` 两次会有报错，而 git，file 诸多模块很好地保证了特定操作的幂等性。 37 | 38 | ### 如何在 task 中根据 linux 的发行版不同而做不同的操作 39 | -------------------------------------------------------------------------------- /op/assets/action-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/action-result.png -------------------------------------------------------------------------------- /op/assets/action-secret.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/action-secret.png -------------------------------------------------------------------------------- /op/assets/action-select.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/action-select.jpg -------------------------------------------------------------------------------- /op/assets/action-setup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/action-setup.jpg -------------------------------------------------------------------------------- /op/assets/action-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/action-start.png -------------------------------------------------------------------------------- /op/assets/action-workflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/action-workflow.png -------------------------------------------------------------------------------- /op/assets/alioss-cdn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/alioss-cdn.png -------------------------------------------------------------------------------- /op/assets/alioss-cname.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/alioss-cname.png -------------------------------------------------------------------------------- /op/assets/alioss-domain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/alioss-domain.png -------------------------------------------------------------------------------- /op/assets/alioss-https.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/alioss-https.png -------------------------------------------------------------------------------- /op/assets/alioss-proxy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/alioss-proxy.png -------------------------------------------------------------------------------- /op/assets/alioss-rewrite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/alioss-rewrite.png -------------------------------------------------------------------------------- /op/assets/alioss-rewrites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/alioss-rewrites.png -------------------------------------------------------------------------------- /op/assets/buy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/buy.jpg -------------------------------------------------------------------------------- /op/assets/cdn-cache.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/cdn-cache.jpg -------------------------------------------------------------------------------- /op/assets/ctop-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/ctop-view.png -------------------------------------------------------------------------------- /op/assets/ctop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/ctop.png -------------------------------------------------------------------------------- /op/assets/deploy-blog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/deploy-blog.jpg -------------------------------------------------------------------------------- /op/assets/dev-env.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/dev-env.png -------------------------------------------------------------------------------- /op/assets/dev.drawio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/dev.drawio.png -------------------------------------------------------------------------------- /op/assets/drone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/drone.jpg -------------------------------------------------------------------------------- /op/assets/git.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/git.jpg -------------------------------------------------------------------------------- /op/assets/grafana.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/grafana.jpg -------------------------------------------------------------------------------- /op/assets/graphql.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/graphql.jpg -------------------------------------------------------------------------------- /op/assets/htop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/htop.jpg -------------------------------------------------------------------------------- /op/assets/htop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/htop.png -------------------------------------------------------------------------------- /op/assets/linux_perf_tools_full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/linux_perf_tools_full.png -------------------------------------------------------------------------------- /op/assets/lock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/lock.png -------------------------------------------------------------------------------- /op/assets/netlify-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/netlify-2.jpg -------------------------------------------------------------------------------- /op/assets/netlify-build-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/netlify-build-options.jpg -------------------------------------------------------------------------------- /op/assets/netlify-custom-domain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/netlify-custom-domain.jpg -------------------------------------------------------------------------------- /op/assets/netlify-new-site.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/netlify-new-site.jpg -------------------------------------------------------------------------------- /op/assets/netlify-ok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/netlify-ok.png -------------------------------------------------------------------------------- /op/assets/netlify-repo-access.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/netlify-repo-access.jpg -------------------------------------------------------------------------------- /op/assets/netlify-step2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/netlify-step2.jpg -------------------------------------------------------------------------------- /op/assets/node_modules.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/node_modules.jpeg -------------------------------------------------------------------------------- /op/assets/node_modules.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/node_modules.jpg -------------------------------------------------------------------------------- /op/assets/sentry-memory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/sentry-memory.png -------------------------------------------------------------------------------- /op/assets/sentry-ok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/sentry-ok.png -------------------------------------------------------------------------------- /op/assets/tmux-help.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/tmux-help.jpg -------------------------------------------------------------------------------- /op/assets/tmux-split.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/tmux-split.gif -------------------------------------------------------------------------------- /op/assets/traefik-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/traefik-dashboard.png -------------------------------------------------------------------------------- /op/assets/traefik.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/traefik.jpg -------------------------------------------------------------------------------- /op/assets/vim-ag.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/vim-ag.gif -------------------------------------------------------------------------------- /op/assets/vim-ctrlp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/vim-ctrlp.gif -------------------------------------------------------------------------------- /op/assets/vim-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/vim-dark.png -------------------------------------------------------------------------------- /op/assets/vim-git.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/vim-git.gif -------------------------------------------------------------------------------- /op/assets/vim-goyo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/vim-goyo.png -------------------------------------------------------------------------------- /op/assets/vim-nerdtree.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/assets/vim-nerdtree.gif -------------------------------------------------------------------------------- /op/ctop.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 使用 ctop 监控容器指标 3 | keywords: docker, container, docker监控 4 | date: 2019-12-16 17:00 5 | 6 | --- 7 | 8 | # 使用 ctop 监控容器指标 9 | 10 | 如果你经常在 `linux` 下工作，那你肯定对 `top` 以及它的增强版 `htop` 非常熟悉。如果说 `top` 是管理进程的，而 `ctop` 则是管理容器的。 11 | 12 | 你可以使用它监控容器的 `CPU`/`MEM`/`IO` 以及查看容器日志，查看容器状态等。相对于 `portainer` 等工具来说，它相当轻量，极其适合在个人服务器中使用 13 | 14 | ## 安装 15 | 16 | 在 `centos` 下安装 `ctop` 17 | 18 | ``` bash 19 | $ wget https://github.com/bcicen/ctop/releases/download/v0.7.2/ctop-0.7.2-linux-amd64 -O /usr/local/bin/ctop 20 | 21 | $ chmod +x /usr/local/bin/ctop 22 | ``` 23 | 24 | ## 命令使用 25 | 26 | 直接使用 `ctop` 进入容器指标可视化界面 27 | 28 | ![容器视图](./assets/ctop.png) 29 | 30 | ``` bash 31 | ctop 32 | ``` 33 | 34 | 当进入指标可视化界面后，可以使用快捷键进行筛选，排序，检索 35 | 36 | + `q`，退出或者返回上一级 37 | + `j/k`，同vi，上下移动 38 | + `a`，展示所有容器 39 | + `l`，查看某一容器日志 40 | + `f`，对所有容器进行筛选 41 | + `s`，查看单个容器状态 42 | + `S`: 保存当前配置 43 | 44 | 以下是查看单个容器状态的截图 45 | 46 | ![单个容器状态](./assets/ctop-view.png) 47 | -------------------------------------------------------------------------------- /op/dev-log.md: -------------------------------------------------------------------------------- 1 | # 2 | 3 | ## IP 4 | 5 | ``` bash 6 | # server 7 | $ dig shanyue.tech 8 | 9 | $ curl ifconfig.me 10 | ``` -------------------------------------------------------------------------------- /op/htop.md: -------------------------------------------------------------------------------- 1 | # 使用 htop 监控进程 2 | 3 | ``` bash 4 | htop 5 | ``` -------------------------------------------------------------------------------- /op/iptables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: iptables 详解以及示例 3 | 4 | --- 5 | 6 | 7 | -------------------------------------------------------------------------------- /op/linux-awk.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: awk 命令使用及示例 3 | 4 | --- 5 | 6 | 7 | -------------------------------------------------------------------------------- /op/traefik-middleware.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/op/traefik-middleware.md -------------------------------------------------------------------------------- /post/10000.md: -------------------------------------------------------------------------------- 1 | 哔哩哔哩粉丝突破一万，前端面试重启！ 2 | 3 | 大家好，我是山月。 4 | 5 | 就在今天愚人节的凌晨零点零三分，我的哔哩哔哩粉丝数达到了一万。从截图可以看出，十二月底打破千粉大关，三个月增长了九千粉丝。 6 | 7 | ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c17b5054a9d4287aaa8c8f2a1975d10~tplv-k3u1fbpfcp-watermark.image?) 8 | 9 | 接下来，准备了一些一分钟即可讲完的前端小知识，将被我放在合集《前端一分钟》。 10 | 11 | ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/015e1bc474d044c393c320c0a224b10f~tplv-k3u1fbpfcp-watermark.image?) 12 | 13 | 我在三月份上半月的朋友圈宣布暂时停止模拟面试一段落。但是，由于得到了珠峰架构的独家赞助，模拟面试得以继续。关于珠峰架构的这个 logo，将会在我模拟面试时挂在直播间右下角。 14 | 15 | ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48cb3b182a884a17b455af769ee55645~tplv-k3u1fbpfcp-watermark.image?) 16 | 17 | 我的模拟面试一个月将会进行十次，感兴趣的同学可以添加我的微信 `shanyue-bot` 来报名了，如果报名超过十个，将会做进一步筛选。 18 | 19 | 如果不会写简历，可以在我的公众号后来回复简历二字，获取我简单做的简历内容模板。 20 | 21 | 哦对，我昨天刚在院里种了两排蜀葵，希望能发芽。 22 | 23 | ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ab5bdbfdb12497384309e431ad0396b~tplv-k3u1fbpfcp-watermark.image?) -------------------------------------------------------------------------------- /post/Grid-Layout-Common-Usage/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/Grid-Layout-Common-Usage/images/1.png -------------------------------------------------------------------------------- /post/Grid-Layout-Common-Usage/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/Grid-Layout-Common-Usage/images/2.png -------------------------------------------------------------------------------- /post/Grid-Layout-Common-Usage/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/Grid-Layout-Common-Usage/images/3.png -------------------------------------------------------------------------------- /post/Grid-Layout-Common-Usage/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/Grid-Layout-Common-Usage/images/4.png -------------------------------------------------------------------------------- /post/Grid-Layout-Common-Usage/images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/Grid-Layout-Common-Usage/images/5.png -------------------------------------------------------------------------------- /post/a-problem-about-http-cache/http-cache-decision-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/a-problem-about-http-cache/http-cache-decision-tree.png -------------------------------------------------------------------------------- /post/a-problem-about-http-cache/http-cache-hierarchy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/a-problem-about-http-cache/http-cache-hierarchy.png -------------------------------------------------------------------------------- /post/assets/101.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/101.png -------------------------------------------------------------------------------- /post/assets/204-del.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/204-del.png -------------------------------------------------------------------------------- /post/assets/204.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/204.png -------------------------------------------------------------------------------- /post/assets/206.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/206.png -------------------------------------------------------------------------------- /post/assets/307-shanyue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/307-shanyue.png -------------------------------------------------------------------------------- /post/assets/307-stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/307-stack.png -------------------------------------------------------------------------------- /post/assets/401.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/401.png -------------------------------------------------------------------------------- /post/assets/422.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/422.png -------------------------------------------------------------------------------- /post/assets/feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/feedback.png -------------------------------------------------------------------------------- /post/assets/feedback2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/feedback2.png -------------------------------------------------------------------------------- /post/assets/gatsby-vs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/gatsby-vs.png -------------------------------------------------------------------------------- /post/assets/learn-fe-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/learn-fe-css.png -------------------------------------------------------------------------------- /post/assets/learn-fe-devtools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/learn-fe-devtools.png -------------------------------------------------------------------------------- /post/assets/learn-fe-dom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/learn-fe-dom.png -------------------------------------------------------------------------------- /post/assets/learn-fe-edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/learn-fe-edit.png -------------------------------------------------------------------------------- /post/assets/learn-fe-en-plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/learn-fe-en-plugin.png -------------------------------------------------------------------------------- /post/assets/learn-fe-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/learn-fe-html.png -------------------------------------------------------------------------------- /post/assets/learn-fe-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/learn-fe-js.png -------------------------------------------------------------------------------- /post/assets/learn-fe-pwd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/learn-fe-pwd.png -------------------------------------------------------------------------------- /post/assets/learngit.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/learngit.gif -------------------------------------------------------------------------------- /post/assets/pkg-search.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/pkg-search.jpg -------------------------------------------------------------------------------- /post/assets/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/react.png -------------------------------------------------------------------------------- /post/assets/stylex-scalability2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/stylex-scalability2.png -------------------------------------------------------------------------------- /post/assets/tailwind-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/tailwind-01.png -------------------------------------------------------------------------------- /post/assets/tailwind-ci.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/tailwind-ci.png -------------------------------------------------------------------------------- /post/assets/tailwind-devtool-computed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/tailwind-devtool-computed.png -------------------------------------------------------------------------------- /post/assets/tailwind-devtool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/tailwind-devtool.png -------------------------------------------------------------------------------- /post/assets/tailwind-npm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/tailwind-npm.png -------------------------------------------------------------------------------- /post/assets/tailwind02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/tailwind02.png -------------------------------------------------------------------------------- /post/assets/vimadventure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/vimadventure.png -------------------------------------------------------------------------------- /post/assets/vimadventure的副本.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/vimadventure的副本.png -------------------------------------------------------------------------------- /post/assets/weekly-juejin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/weekly-juejin.png -------------------------------------------------------------------------------- /post/assets/weekly-leibie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/weekly-leibie.png -------------------------------------------------------------------------------- /post/assets/weekly-mulu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/weekly-mulu.png -------------------------------------------------------------------------------- /post/assets/xianyu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/xianyu.jpg -------------------------------------------------------------------------------- /post/assets/yarn-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/assets/yarn-home.png -------------------------------------------------------------------------------- /post/binary-in-frontend/transform.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/binary-in-frontend/transform.jpg -------------------------------------------------------------------------------- /post/browser-extension.md: -------------------------------------------------------------------------------- 1 | # 浏览器插件开发 2 | 3 | ## 创建 Chrome APP 4 | 5 | ``` js 6 | chrome.app.runtime.onLaunched.addListener(() => { 7 | chrome.app.window.create('index.html', { 8 | id: "clockWinID" 9 | }) 10 | }) 11 | ``` 12 | 13 | ## 设置快捷键 14 | 15 | ``` js 16 | { 17 | "commands" : { 18 | "cmdNew": { 19 | "suggested_key": { 20 | "default": "Ctrl+Shift+1" 21 | }, 22 | "global": true, 23 | "description": "Create new window" 24 | } 25 | } 26 | } 27 | ``` 28 | 29 | ## -------------------------------------------------------------------------------- /post/cache-miss-concurrent.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: node 中的缓存击穿与解决方案 3 | no-date: 2019-06-26T18:30:41+08:00 4 | thumbnail: "" 5 | categories: 6 | - 前端 7 | - 后端 8 | tags: 9 | - node 10 | --- 11 | 12 | 缓存击穿指当某个 key 的缓存失效时，此时高并发请求来临时，会产生大量 IO 操作（读读数据库或发个请求），影响性能。 13 | 14 | 高并发场景并不多见，按理来说缓存击穿也很少发生。其实不然，数据的 batch 也会造成缓存击穿。 15 | 16 | 查看以下示例，获取某个用户的信息 17 | 18 | 如果 19 | -------------------------------------------------------------------------------- /post/data-operation.md: -------------------------------------------------------------------------------- 1 | # 网站运营常见数据 2 | 3 | 自从到了一条 toC 的业务线，听得最多的三个词就是拉新，留存，转化了。为了不使自己太过跟不上队伍，来总结下一些关于运营网站的指标。 4 | 5 | ## PV/UV/DAU 6 | 7 | > 在这里说一下打点的原理：一般打点脚本会随机产生一个唯一ID (或者 UUID) 存入 cookie/local-storage 中来唯一标识一个用户，如果使用两个浏览器打开就算是两个用户了。 8 | > 但是这里又有一个问题：cookie/local-storage 可能被用户清除，造成计算误差。所以有一种根据设备以及浏览器信息生成指纹的算法，具体可以参照这个库 9 | > 另外，以上是网站环境中的 ID 生成方式，在 android/ios/小程序 中计算方式会有所变化。 10 | 11 | UV: Unique Visitor。即单位时间内网站的访问人数 12 | PV: Page View。即单位时间内网站的访问次数 13 | DAU: Daily Active User。日活跃用户数，按我理解，就是单日 UV 14 | 15 | ## 会话数 16 | 17 | > GA 的文档里有详细解释: 18 | 19 | ## 新增用户数 20 | 21 | 显而易见 22 | 23 | + 新增用户数 24 | + 日新增用户数 25 | + 日新增用户数同比/环比 26 | + 周新增用户数 27 | + 周新增用户数同比/环比 28 | + 月新增用户数 29 | + 月新增用户数同比/环比 30 | + 累计用户数 31 | 32 | ## 留存 33 | -------------------------------------------------------------------------------- /post/excel-row-column/Readme.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/excel-row-column/Readme.md -------------------------------------------------------------------------------- /post/frontend-ci-quality.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Frontend-Ci-Quality 3 | thumbnail: "" 4 | categories: 5 | - 前端 6 | - 后端 7 | tags: 8 | - node 9 | --- 10 | 11 | date: 2019-07-16T20:47:50+08:00 12 | -------------------------------------------------------------------------------- /post/https.md: -------------------------------------------------------------------------------- 1 | date: 2020-08-14 23:11 2 | 3 | --- 4 | 5 | # https 6 | 7 | ![](../assets/https-0.png) -------------------------------------------------------------------------------- /post/input-defaultvalue.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/input-defaultvalue.md -------------------------------------------------------------------------------- /post/learning-kafka/topic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/learning-kafka/topic.png -------------------------------------------------------------------------------- /post/learning-kafka/write.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/learning-kafka/write.png -------------------------------------------------------------------------------- /post/learning-spark/streaming-arch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/learning-spark/streaming-arch.png -------------------------------------------------------------------------------- /post/learning-zookeeper/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Index 3 | description: "" 4 | keywords: 5 | - 6 | thumbnail: "" 7 | categories: 8 | - 前端 9 | - 后端 10 | tags: 11 | - node 12 | --- 13 | date: 2019-04-11T11:38:43+08:00 14 | -------------------------------------------------------------------------------- /post/markdown-parser/behead.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/markdown-parser/behead.js -------------------------------------------------------------------------------- /post/node-cls/index.js: -------------------------------------------------------------------------------- 1 | const createNamespace = require('cls-hooked').createNamespace 2 | ns = createNamespace('hello, world') 3 | let userId 4 | 5 | function getUser () { 6 | return ns.get('userId') 7 | } 8 | 9 | function middleware (id) { 10 | ns.run(async () => { 11 | console.log('middleware', id) 12 | ns.set('userId', id) 13 | await next() 14 | }) 15 | } 16 | 17 | async function next () { 18 | await Promise.resolve() 19 | console.log('next:', getUser()) 20 | } 21 | 22 | function main () { 23 | middleware(100) 24 | middleware(200) 25 | middleware(300) 26 | } 27 | 28 | main() 29 | -------------------------------------------------------------------------------- /post/node-cls/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Node-Cls 3 | thumbnail: "" 4 | categories: 5 | - 前端 6 | - 后端 7 | tags: 8 | - node 9 | --- 10 | 11 | date: 2019-06-26T14:36:10+08:00 12 | -------------------------------------------------------------------------------- /post/node-cls/index2.js: -------------------------------------------------------------------------------- 1 | let userId 2 | 3 | function getUser () { 4 | return userId 5 | } 6 | 7 | async function middleware (id) { 8 | console.log('middleware', id) 9 | userId = id 10 | await next() 11 | } 12 | 13 | async function next () { 14 | await Promise.resolve() 15 | console.log('next:', getUser()) 16 | } 17 | 18 | function main () { 19 | middleware(100) 20 | middleware(200) 21 | middleware(300) 22 | } 23 | 24 | main() 25 | -------------------------------------------------------------------------------- /post/node-stream/a.js: -------------------------------------------------------------------------------- 1 | for (var i = 0; i < 5; i++) { 2 | setTimeout(function() { 3 | console.log(i); 4 | }, 1000 * i); 5 | } 6 | -------------------------------------------------------------------------------- /post/node-stream/demo.js: -------------------------------------------------------------------------------- 1 | const Readable = require('stream').Readable 2 | 3 | const src = new Readable() 4 | src.push('hello') 5 | src.push('world') 6 | src.push(null) 7 | 8 | src.pipe(process.stdout) 9 | -------------------------------------------------------------------------------- /post/node-stream/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: node 中 stream 的使用 3 | no-date: 2019-08-06T09:39:20+08:00 4 | thumbnail: "" 5 | categories: 6 | - 前端 7 | - 后端 8 | tags: 9 | - node 10 | --- 11 | 12 | 在学习 node 的 `stream` 之前，先抛出一个问题 13 | 14 | > 如何找到所有 node 的进程？ 15 | 16 | 我们一般会使用以下命令来解决这个问题 17 | 18 | ```shell 19 | $ ps -ef | grep node 20 | ``` 21 | 22 | 其中，它运行了 `ps` 和 `grep` 两个进程，它们之间通过 `|` 来衔接输入输出，而 `|` 就是管道 (`pipe`)。 23 | 24 | ## pipe (管道) 25 | 26 | `pipe` 可以把源数据从一端导向另一端 27 | 28 | ## Readable 29 | 30 | ```javascript 31 | const Readable = require('stream').Readable 32 | 33 | const src = new Readable() 34 | src.push('hello') 35 | src.push('world') 36 | src.push(null) 37 | 38 | src.pipe(process.stdout) 39 | ``` 40 | -------------------------------------------------------------------------------- /post/op/assets/memory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/op/assets/memory.png -------------------------------------------------------------------------------- /post/op/assets/ok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/op/assets/ok.png -------------------------------------------------------------------------------- /post/postgres-cheatsheet.md: -------------------------------------------------------------------------------- 1 | ## postgres cheatsheet 2 | 3 | + `\d+` 列出所有 table/sequence/view，并列出存储大小等详细信息 4 | + `\dt+` 列出所有 table，并列出存储大小等详细信息 5 | 6 | ## 系统表 7 | 8 | ### pg_tables 9 | 10 | ### pg_stat_activity 11 | 12 | ### pg_settings 13 | 14 | ## Q&A 15 | 16 | ### 如何列出所有的 function 17 | -------------------------------------------------------------------------------- /post/process-docker-and-compose.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/process-docker-and-compose.md -------------------------------------------------------------------------------- /post/processon.md: -------------------------------------------------------------------------------- 1 | # 你们都在用什么思维导图软件画图？ 2 | 3 | 大家好，我是山月。 4 | 5 | 我在之前做了一个关于前端面试题的网站，[大厂面试每日一题](https://q.shanyue.tech/)。 6 | 7 | ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a849a881d994ce580727ec53a8de894~tplv-k3u1fbpfcp-watermark.image?) 8 | 9 | 同时，计划将其中的高频面试题，构建成**前端面试路线图**，并绘制成思维导图，供广大网友参考。 10 | 11 | ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/915f4ed9bf824612bcb18938be747ded~tplv-k3u1fbpfcp-watermark.image?) 12 | 13 | 于是，我调研了诸多思维导图软件，xmind、processon、语雀等等。最终决定使用了 processon 作为目标工具，因为它组织方便，也不像 xmind 那样需要收费。 14 | 15 | 你们用哪一款思维导图软件呢？ 16 | 17 | 以下是我最近刚使用 [processon](https://processon.com/?utm_source=hulianwang) 做的两个思维导图，后续对前端面试的所有思维导图补全一下。 18 | 19 | ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab822a8909934cc08de2b55a5e58e99d~tplv-k3u1fbpfcp-watermark.image?) 20 | 21 | 对 processon 感兴趣的可以在以下地址尝试一下: 22 | 23 | -------------------------------------------------------------------------------- /post/rate-limit/leaky-bucket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/rate-limit/leaky-bucket.png -------------------------------------------------------------------------------- /post/rate-limit/token-bucket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/rate-limit/token-bucket.png -------------------------------------------------------------------------------- /post/react-component-design.md: -------------------------------------------------------------------------------- 1 | ## 设计一个 Select 组件 2 | 3 | ```jsx 4 | 9 | ``` 10 | 11 | ## 设计一个 Icon 组件 12 | 13 | ```jsx 14 | 15 | ``` 16 | 17 | ## 设计一个 Layout 组件 18 | 19 | ## 设计一个 Avator 组件 20 | 21 | ## function component 与 typescript 22 | -------------------------------------------------------------------------------- /post/redundant-static-resource.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 关于前端静态资源在 OSS 上冗余问题的解决 3 | 4 | --- 5 | 6 | ## 背景 7 | 8 | 先说前端静态资源的部署。在现有的打包方案下，为了充分利用 http 的永久缓存，打包后静态资源文件一般会戳个 hash 值。这样打包后的某个文件会长这个样子: `main.a3b4c5.js`。 9 | 10 | 又为了充分利用 CDN 对静态资源的加速，我们会把静态资源扔到对象存储 OSS 上，然后使用 CDN 对 OSS 的静态资源加速。于是，久而久之，OSS 上堆积的文件也越来越多 11 | 12 | ```txt 13 | project/static/main.a3b4c5.js 14 | project/static/main.a3b4xs.js 15 | project/static/main.axx8xs.js 16 | project/static/main.8abc09.js 17 | project/static/main.8bayd0.js 18 | ... 19 | ``` 20 | 21 | -------------------------------------------------------------------------------- /post/requestId-and-tracing/tracing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/requestId-and-tracing/tracing.jpg -------------------------------------------------------------------------------- /post/spark-streaming-programming/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 使用 Spark 进行流处理 3 | description: "" 4 | keywords: 5 | - 6 | date: 2019-04-18T11:51:26+08:00 7 | thumbnail: "" 8 | categories: 9 | - 前端 10 | - 后端 11 | tags: 12 | - node 13 | --- 14 | 15 | -------------------------------------------------------------------------------- /post/sql-and-index.md: -------------------------------------------------------------------------------- 1 | ## 2 | 3 | + `Seq Scan` 4 | + `Index Scan` 5 | 6 | 7 | 8 | ## 创建 hash 与 btree 代价那个大 9 | 10 | ## 如何为 `where a = 3 and b = 4` 创建索引 11 | 12 | ## 参考 13 | 14 | + [Postgres Using EXPLAIN page](https://www.postgresql.org/docs/9.5/using-explain.html) 15 | + [](http://www.postgresguide.com/performance/explain.html) 16 | + [Reading a Postgres EXPLAIN ANALYZE Query Plan](https://thoughtbot.com/blog/reading-an-explain-analyze-query-plan) 17 | + [Advanced Postgres Performance Tips](https://thoughtbot.com/blog/advanced-postgres-performance-tips) 18 | -------------------------------------------------------------------------------- /post/traefik-https/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 使用 Let's Encrypt 为 Traefik 制作证书并自动续期 3 | date: 2019-04-15T20:17:50+08:00 4 | categories: 5 | - 运维 6 | tags: 7 | - devops 8 | - linux 9 | --- 10 | 11 | ## 前言 12 | 13 | 你需要在 github 上找到 `certbot-auto` 并下载安装 14 | 15 | + [certbot-auto](https://github.com/certbot/certbot) 16 | 17 | ## 手动 18 | 19 | ```shell 20 | ./certbot-auto certonly -d *.xiange.tech -d *.shanyue.tech -d shanyue.tech -d xiange.tech --manual --preferred-challenges dns --server https://acme-v02.api.letsencrypt.org/directory 21 | ``` 22 | 23 | ## DNS 24 | 25 | 在 [dns-plugins](https://certbot.eff.org/docs/using.html#dns-plugins) 中选择 `cloudflare`。 26 | 27 | 28 | 29 | 30 | 31 | ## 自动续期 32 | 33 | ```shell 34 | ./certbot-auto renew 35 | ``` 36 | 37 | ## 列出证书列表 38 | 39 | ./certbot-auto certificates 40 | 41 | ## 删除证书 42 | 43 | ./certbt-auto delete 44 | -------------------------------------------------------------------------------- /post/traefik-https/screen.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/post/traefik-https/screen.jpeg -------------------------------------------------------------------------------- /post/voice.md: -------------------------------------------------------------------------------- 1 | # Audition 2 | 3 | + 采样率 4 | + 位深度 5 | + 振幅 6 | + 频率 7 | + 波形 8 | + 频谱频率选择器 9 | + 频谱音调选择器 10 | 11 | ## 格式 12 | 13 | + mp3 14 | + flac 15 | 16 | ## Audition 17 | 18 | ### 降噪 19 | 20 | ### 口水音 21 | 22 | ### 高低铺平 23 | -------------------------------------------------------------------------------- /post/watchfile.md: -------------------------------------------------------------------------------- 1 | # 如何监听文件变化 2 | 3 | -------------------------------------------------------------------------------- /post/web.md: -------------------------------------------------------------------------------- 1 | ## 当你所使用的三方包已经引用了模块 `lodash.get`，此时你再 `npm i lodash.get` 会增大打包体积吗 2 | 3 | # 前端工程化 4 | 5 | ## 减小打包体积 6 | 7 | -------------------------------------------------------------------------------- /record/Readme.md: -------------------------------------------------------------------------------- 1 | # 炳烛之明 2 | 3 | 炳烛之明来自于春秋时期的一个典故: 4 | 5 | > 晋平公问于师旷曰：“吾年七十欲学，恐已暮矣。”师旷曰：“何不炳烛乎？”平公曰：“安有为人臣而戏其君乎？”师旷曰：“盲臣安敢戏其君乎？臣闻之，少而好学，如日出之阳；壮而好学，如日中之光；老而好学，如炳烛之明。炳烛之明，孰与昧行乎？”平公曰：”善哉！“ 6 | 7 | 其核心思想就是终身学习吧，而这基本与计算机编程不谋而合。毕竟你要是很久不写前端，看到现有的前端体系也会感叹： **儿童相见不相识，笑问客从何处来**。就算你是一个前端，看到现在的 React 也会感叹 **昔别君未婚，儿女忽成行**。炳烛之明，在这块领域就是势在必行了。 8 | 9 | 关于编程学习，我相信有很多人都会记笔记，为了同步大部分人会记在印象笔记，有道笔记或者 One Note 上。抑或不满足于此而上下求索，不辞折腾的也会搭建个人维基，如 `tiddlywiki`，`dokuwiki`，用于管理自己的知识点。 10 | 11 | 而我自己则集懒怠之大成，仅以本地 markdown 记载，并编以年月。为了备份，也仅仅推到我的 github 上，后来又在我自建的 gitlab 上维护。 12 | 13 | 关于所记内容，更是语焉不详，更像是一些 TODO/TOING 此类。不过大致还是遵守着懂得越多字越多的原则：当我写了一个词 `memory` 则表示我要看看内存是什么东西了，而当我记了 `物理内存以及虚拟内存间页表过大解决方案` 就代表关于内存已经知道一点东西了。 14 | 15 | 情不知所起，现在我决定把以前瞎记的东西放到博客上进行维护，当然现在会记得比较翔实一些，而我以前的流水账则以 `Pre` 打头。 16 | 17 | -------------------------------------------------------------------------------- /seo/sitemap.md: -------------------------------------------------------------------------------- 1 | # 如何写一份更好的 Sitemap 2 | 3 | ## 文档 4 | 5 | ## 位置 6 | 7 | ## 格式 8 | 9 | ``` xml 10 | 11 | 12 | https://shanyue.tech/ 13 | 2020-12-20T08:11:30.000Z 14 | daily 15 | 16 | 17 | ``` 18 | 19 | ## 释义 20 | 21 | **官方文档：**，建议阅读 22 | -------------------------------------------------------------------------------- /serverless.yaml: -------------------------------------------------------------------------------- 1 | component: website # (必填) 引用 component 的名称，当前用到的是 tencent-website 组件 2 | name: shanyue-blog # (必填) 该 website 组件创建的实例名称 3 | 4 | inputs: 5 | src: 6 | src: . 7 | index: index.html 8 | dist: .vuepress/dist 9 | hook: npm run build 10 | # websitePath: ./ 11 | region: ap-guangzhou 12 | bucketName: my-bucket 13 | protocol: https -------------------------------------------------------------------------------- /ssr/source.md: -------------------------------------------------------------------------------- 1 | # SSR 的原理 2 | 3 | 以一个 `hello, world` 进行示例，我们从 SSR 及 CSR 的角度看它们的工作过程。 4 | 5 | ``` js 6 | function App () { 7 | return 'hello, world' 8 | } 9 | ``` 10 | 11 | SSR: 在服务器环境中直接渲染组件，计算出所需内容，并向客户端进行输出: 12 | 13 | ``` html 14 | 15 |
hello, world
16 | 17 | ``` 18 | 19 | CSR: 在浏览器环境中，实际代码如下，所需内容在浏览器中计算并渲染，伪代码如下: 20 | 21 | ``` html 22 | 23 |
24 | 28 | 29 | ``` 30 | 31 | 正因如此，**服务器渲染的流程中，浏览器可直接获取到最终的 HTML 资源，首次渲染即可得到 title、Description 及主体内容，因此更适合于 SEO。** 32 | 33 | > SEO，Search Engine Optimization，搜索引擎优化。 34 | 35 | ## React SSR 36 | 37 | -------------------------------------------------------------------------------- /test/api.md: -------------------------------------------------------------------------------- 1 | # 什么是 API 2 | 3 | API，`Application Programming Interface`。 4 | 5 | 作为程序员的角度来讲，它一般有两个方面的含义。 6 | 7 | 1. **各个语言各个模块(或第三方库)所包含的函数及用法。** 如 `ES API`，就是指 Javascript 的规范有哪些数据类型哪些函数。比如 `Array.prototype.flat` 就是 Javascript 关于数组的一个 API。当然第三方库，也可以说 API，比如 `lodash API`，`Spring API`。如果你初学前端，可以前往 [MDN](https://developer.mozilla.org/en-US/) 学习 API。 8 | 1. **服务端所提供的 HTTP (RPC) 接口。** 比如后端写了很多个接口，就可以说提供了 API，这时候就需要有 API 文档，知道应该传什么数据。写好了接口就需要使用工具调试，比如 [Apifox](https://www.apifox.cn/?utm_source=shanyue-question) 等，如果你想知道 API 长什么样子，则可以去 [数据聚合中心](https://www.apifox.cn/apihub/?utm_source=shanyue-question) 看看。 9 | 10 | ![Spring API](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d54af8486a2142079101c618583f3865~tplv-k3u1fbpfcp-watermark.image?) 11 | 12 | ![API Hub](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b7c58d3468046f5bd201462731b8e86~tplv-k3u1fbpfcp-watermark.image?) -------------------------------------------------------------------------------- /test/meta.js: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "", 4 | "sideTitle": "压缩", 5 | "path": "uglify", 6 | "group": "document" 7 | }, 8 | ] 9 | -------------------------------------------------------------------------------- /tools/cheat-sheets.md: -------------------------------------------------------------------------------- 1 | # 新站发布: 山月的前端清单 2 | 3 | [前端清单](https://cheatsheets.devtool.tech/)发布！域名 `cheatsheets.devtool.tech`，可重点记住域名前缀 `cheatsheets`，意为清单。 4 | 5 | 以下截图，先一睹为快！ 6 | 7 | ![山月的前端清单](https://cdn.jsdelivr.net/gh/shfshanyue/assets@master/20210604/image.5cqdp4mvo4s0.png) 8 | 9 | 该项目 Fork 自[cheatsheets](github.com/rstacruz/cheatsheets)，它的作者你可能没有听说过，但是你肯定对他的两个作品有所耳闻 `nprogress` 与 `pnpm`。 10 | 11 | 该项目由 `Jekyll` 书写，采用 `Liquid` 模板语法，这种语法貌似是由虾皮创作出来的，想去虾皮的可以私信我(`shanyue94`)。 12 | 13 | 传统的服务端渲染项目都是由后端模板中书写 JS/CSS/HTML，此次又体验了一番，其过程痛苦难堪，繁杂的语法，难以调试的模板简直令人崩溃。 14 | 15 | **许多人吐槽 Vue 的模板语法学习成本略高，与传统后端模板而言，Vue 的模板语法与指令可称得上精简至极，且易于调试。** 16 | 17 | 原项目包含前后端各式各样的清单，但在前端领域，数量及内容不足，如关于 ES6，缺失很多。因此我 Fork 一份，整理为专注于前端的清单，且对其中缺失部分逐一增加。 18 | 19 | ![CSS](https://cdn.jsdelivr.net/gh/shfshanyue/assets@master/20210604/image.1oiq8saoyg0w.png) 20 | 21 | 有兴趣的同学可以关注一下，也可自己动手对原项目 DIY ！ -------------------------------------------------------------------------------- /tools/daily-question.md: -------------------------------------------------------------------------------- 1 | # 个人网站日问迎来最大更新，前端工程化三十六篇即将上线 2 | 3 | 大家好，我是山月，我是[日问](https://q.shanyue.tech)的站长。日问是一个维护前端每日一题的网站，它所有的题目维护在 [Daily-Question](https://github.com/shfshanyue/Daily-Question/issues) 的 issues 中。 4 | 5 | 日问的主旨是: *每天五分钟，半年大厂中* 。确实也有不少同学通过该网站找到了心仪的工作。目前该网站已经维护了 722 道面试题，可以说是同类型面试题仓库中问题最多的仓库了。 6 | 7 | 日问网站在今天迎来了它有史以来最大的更新，根据前端方向对整体的目录结构做了更精细的调整。 8 | 9 | 同时它又增加了两个子目录: 10 | 11 | 1. 各地知名大厂目录 12 | 1. 前端面试路线图 13 | 14 | 不过目前正在初始阶段，以后将逐渐更新。 15 | 16 | 前端工程化三十六篇 17 | -------------------------------------------------------------------------------- /tools/exif.md: -------------------------------------------------------------------------------- 1 | # 山月新站发布: EXIF 预览器 2 | 3 | 大家好，我是山月。 4 | 5 | 最近写了一个有意思但无大用的小工具: [EXIF 预览器](https://devtool.tech/exif)，地址为 。 6 | 7 | ![](https://cdn.jsdelivr.net/gh/shfshanyue/assets@master/src/image.5p1nyit63u80.png) 8 | 9 | 当你拿出智能手机，对着镜子一拍，这张照片就包含了...**拍摄时间、位置、机型信息、拍摄参数等等信息**，称作这个图片的 `Metadata`。 10 | 11 | 越来越多的国产手机支持把各式各样的 `Metadata` 作为水印，同时有一些产品根据这些信息制作水印相机。其中的原理就是读取 JPEG 的 EXIF 二进制信息，找到特定位置的字节所代表的的参数意义。**JPEG 由许多 `Segement` 组成，而每个 `Segement` 以 `Marker` 打头，每一个 `Marker` 以字节 `0XFF` 打头。** 12 | 13 | EXIF 在前端业务开发中也有一些用处，如判断该照片横屏、竖屏及一些水印美化之类。 14 | 15 | 除了前端开发，还可以利用它做一些性能优化之类的事情。由于有诸多信息隐藏在照片，比如 Thumbnail 等造成照片臃肿，据统计每张 JPEG 这种 15% 的体积就是 Metadata，因此它存在潜在的性能问题。把一张照片的 EXIF 信息删掉可以减小一部分体积，从而提高加载性能。 16 | 17 | EXIF 还有哪些应用呢，欢迎评论区留言。 18 | -------------------------------------------------------------------------------- /tools/gallery.md: -------------------------------------------------------------------------------- 1 | # 山月新站发布: 微图床，将 Github 仓库作为个人专属图床 2 | 3 | 大家好，我是山月。 4 | 5 | 新站发布，先睹为快，附上链接: 。 6 | 7 | ![](https://cdn.jsdelivr.net/gh/shfshanyue/assets/2021-11-01/clipboard-8017.6e1b00.webp) 8 | 9 | 经常写文章的人有福了。 10 | 11 | 微图床，Github 个人图床工具，使用该工具支持点击上传、拖拽上传与直接从剪切板获取图片上传。原理是将图片上传到 Github，使用 `jsdelivr` 地址作为国内 CDN 加速。 12 | 13 | 该图床工具支持将图片上传到 `github` 之前进行压缩，或转为更小格式的 `webp`，从而能获得更小的图片体积。 14 | 15 | 目前一些体验还不是很流畅，文档也没有完善，争取后续补充到。目前有两点后续要做的 16 | 17 | + 补充文档 18 | + Github 仓库选择可以是下拉列表，自动获取个人所有仓库，而不是手动填写 19 | + `devtool.tech` 可整体使用 Github 登录，不过这个还很远 20 | 21 | 欢迎体验，与提出您宝贵的意见。 22 | 23 | 上次做的是一个图片压缩工具，那下次做个什么呢？ 24 | 25 | --- 26 | 27 | 下一个工具与新功能的建议欢迎留言！ 28 | -------------------------------------------------------------------------------- /tools/placeholder.md: -------------------------------------------------------------------------------- 1 | 大家好，我是山月。 2 | 3 | 最近开发了一款小工具，该小工具可通过配置宽度、高度、文本、颜色、字体及字体大小，可自动生成 SVG 格式的占位符图片。 4 | 5 | 在实际工作场景中，可实现如下需求。 6 | 7 | 1. 加载图片占位符。可供图片懒加载时使用。 8 | 2. 随机头像。对于未上传头像的用户可使用用户名首字母作为图片，比如钉钉与飞书。 9 | 10 | 而它背后，实际上是通过一个占位符 API 来完成此项需求。 11 | 12 | 我们在 Apifox 中可调试接口进行测试。 13 | 14 | 如果不传任何参数，则返回一个 800x200 的占位符图片。 15 | 16 | 如果自定义文本为 "Loading..."，则是一个加载中的占位符图片。 17 | 18 | 如果设置宽高一致，并配置前景色及其文本，则可以作为一个随机头像。 19 | -------------------------------------------------------------------------------- /tools/qrcode.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tools/qrcode.md -------------------------------------------------------------------------------- /tour/Readme.md: -------------------------------------------------------------------------------- 1 | # 山月的裸辞之行 2 | 3 | > 对酒当歌，人生几何！ 4 | > 譬如朝露，去日苦多。 -------------------------------------------------------------------------------- /tour/assets/banmian1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/banmian1.jpg -------------------------------------------------------------------------------- /tour/assets/banmian2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/banmian2.jpg -------------------------------------------------------------------------------- /tour/assets/banmian3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/banmian3.jpg -------------------------------------------------------------------------------- /tour/assets/bopibaozi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/bopibaozi.jpg -------------------------------------------------------------------------------- /tour/assets/cesuo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/cesuo.jpg -------------------------------------------------------------------------------- /tour/assets/chengduditie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/chengduditie.jpg -------------------------------------------------------------------------------- /tour/assets/danghe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/danghe.jpg -------------------------------------------------------------------------------- /tour/assets/danghefuzimao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/danghefuzimao.jpg -------------------------------------------------------------------------------- /tour/assets/danghejiumoluoshi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/danghejiumoluoshi.jpg -------------------------------------------------------------------------------- /tour/assets/dangheluwei.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/dangheluwei.jpg -------------------------------------------------------------------------------- /tour/assets/danghezhangzhi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/danghezhangzhi.jpg -------------------------------------------------------------------------------- /tour/assets/darou.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/darou.jpg -------------------------------------------------------------------------------- /tour/assets/dunhuangduilian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/dunhuangduilian.jpg -------------------------------------------------------------------------------- /tour/assets/gaibing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/gaibing.jpg -------------------------------------------------------------------------------- /tour/assets/gangzirou.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/gangzirou.jpg -------------------------------------------------------------------------------- /tour/assets/huoshao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/huoshao.jpg -------------------------------------------------------------------------------- /tour/assets/huyangmenbing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/huyangmenbing.jpg -------------------------------------------------------------------------------- /tour/assets/jiaomaji.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/jiaomaji.jpg -------------------------------------------------------------------------------- /tour/assets/jiasha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/jiasha.jpg -------------------------------------------------------------------------------- /tour/assets/kaobaozi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/kaobaozi.jpg -------------------------------------------------------------------------------- /tour/assets/kaobaozi2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/kaobaozi2.jpg -------------------------------------------------------------------------------- /tour/assets/liangfang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/liangfang.jpg -------------------------------------------------------------------------------- /tour/assets/luotuo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/luotuo.jpg -------------------------------------------------------------------------------- /tour/assets/lvrouhuangmian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/lvrouhuangmian.jpg -------------------------------------------------------------------------------- /tour/assets/menbing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/menbing.jpg -------------------------------------------------------------------------------- /tour/assets/mianbaoyangtui.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/mianbaoyangtui.jpg -------------------------------------------------------------------------------- /tour/assets/michangzi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/michangzi.jpg -------------------------------------------------------------------------------- /tour/assets/mingshashan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/mingshashan.jpg -------------------------------------------------------------------------------- /tour/assets/money.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/money.png -------------------------------------------------------------------------------- /tour/assets/naren.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/naren.jpg -------------------------------------------------------------------------------- /tour/assets/pipa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/pipa.jpg -------------------------------------------------------------------------------- /tour/assets/putao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/putao.jpg -------------------------------------------------------------------------------- /tour/assets/qiaodaima.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/qiaodaima.jpg -------------------------------------------------------------------------------- /tour/assets/shamo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/shamo.jpg -------------------------------------------------------------------------------- /tour/assets/shenniao1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/shenniao1.jpg -------------------------------------------------------------------------------- /tour/assets/shenniao2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/shenniao2.jpg -------------------------------------------------------------------------------- /tour/assets/shenniao3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/shenniao3.jpg -------------------------------------------------------------------------------- /tour/assets/shiguo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/shiguo.jpg -------------------------------------------------------------------------------- /tour/assets/suannaizongzi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/suannaizongzi.jpg -------------------------------------------------------------------------------- /tour/assets/supiyangtui.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/supiyangtui.jpg -------------------------------------------------------------------------------- /tour/assets/tianshan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/tianshan.jpg -------------------------------------------------------------------------------- /tour/assets/wangjianlou.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/wangjianlou.jpg -------------------------------------------------------------------------------- /tour/assets/wangyuanjing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/wangyuanjing.jpg -------------------------------------------------------------------------------- /tour/assets/wanyitang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/wanyitang.jpg -------------------------------------------------------------------------------- /tour/assets/wuhuaguo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/wuhuaguo.jpg -------------------------------------------------------------------------------- /tour/assets/wurenji.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/wurenji.jpg -------------------------------------------------------------------------------- /tour/assets/wurenji2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/wurenji2.jpg -------------------------------------------------------------------------------- /tour/assets/xia-changjiang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/xia-changjiang.jpg -------------------------------------------------------------------------------- /tour/assets/xia-jiaozi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/xia-jiaozi.jpg -------------------------------------------------------------------------------- /tour/assets/xia-jiebei.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/xia-jiebei.jpg -------------------------------------------------------------------------------- /tour/assets/xia-tianranta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/xia-tianranta.jpg -------------------------------------------------------------------------------- /tour/assets/xia-xianbing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/xia-xianbing.jpg -------------------------------------------------------------------------------- /tour/assets/xia-yunhe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/xia-yunhe.jpg -------------------------------------------------------------------------------- /tour/assets/xiangfeiwang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/xiangfeiwang.jpg -------------------------------------------------------------------------------- /tour/assets/xibeihuanxian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/xibeihuanxian.jpg -------------------------------------------------------------------------------- /tour/assets/xingpicha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/xingpicha.jpg -------------------------------------------------------------------------------- /tour/assets/yougao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/yougao.jpg -------------------------------------------------------------------------------- /tour/assets/yueyaquan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/yueyaquan.jpg -------------------------------------------------------------------------------- /tour/assets/zhangzhi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/zhangzhi.jpg -------------------------------------------------------------------------------- /tour/assets/zhuafan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/assets/zhuafan.jpg -------------------------------------------------------------------------------- /tour/diming.md: -------------------------------------------------------------------------------- 1 | ## 新丰 2 | 3 | ## 王府井 4 | 5 | ## 羊城 6 | 7 | ## 江城 -------------------------------------------------------------------------------- /tour/fo.md: -------------------------------------------------------------------------------- 1 | # 千年菩提路 2 | 3 | ## 第一座寺庙 4 | 5 | 汉传佛教 白马寺 6 | 藏传佛教 桑耶寺 7 | 南传佛教 8 | 9 | ## 道安与释 10 | 11 | 道安 12 | 13 | 不依国主则法事难立 14 | 15 | ## 禅法和般若 16 | 17 | ## 鸠摩罗什 18 | 19 | 西域大乘佛教的领袖 20 | 21 | 草堂寺 22 | 23 | 舌头 24 | 25 | ## 贝若扎那 26 | 27 | ## 天台宗与教观总持 28 | 29 | ## 国清寺 30 | 31 | ## 鸠摩罗什与三轮总 32 | 33 | ## 华严宗 34 | 35 | ## 玄奘与唯识宗 36 | 37 | ## 香山寺 38 | 39 | ## 大慈恩寺 40 | 41 | ## 佛教八宗 42 | 43 | ## 律宗 44 | 45 | ## 净土宗 46 | 47 | ## 香积寺 48 | 49 | ## 白马寺 50 | 51 | 中国佛教祖庭。 52 | 53 | ## 谶纬之学 54 | 55 | 两汉时期，儒家神学化的一种学说 56 | 57 | ## 汉明帝夜梦金人 58 | 59 | 刘庄夜梦金人，次日问朝曰佛陀。永平八年，天竺求佛，并在洛阳建立白马寺。 60 | 61 | ## 石辟邪 62 | 63 | -------------------------------------------------------------------------------- /tour/geo-code.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | -------------------------------------------------------------------------------- /tour/hang-ali.md: -------------------------------------------------------------------------------- 1 | # 阿里 2 | 3 | -------------------------------------------------------------------------------- /tour/hexi.md: -------------------------------------------------------------------------------- 1 | # 河西走廊纪录片笔记 2 | 3 | 繁华已随风而逝 4 | 5 | ## 白登之围 6 | 7 | ## 河西四郡 8 | 9 | 武威，张掖，酒泉，敦煌 10 | 11 | ## 扁都口 12 | 13 | 每年的七月是扁都口最漂亮的季节。 14 | 15 | 隋炀帝过扁都口，受冻 16 | 17 | ## 焉支山 18 | 19 | 祁连山支脉 20 | 21 | 霍去病过焉支山，击败匈奴，焉支山成为胜利的标志。 22 | 23 | ## 粟特人 24 | 25 | 粟特人，也被称作昭武九姓，善于手工制作，经商能力极强。 26 | 27 | 粟特钱币 28 | 29 | ## 匈奴 30 | 31 | ## 突厥 32 | 33 | ## 吐谷浑 34 | 35 | ## 五凉 36 | 37 | ## 苍慈 38 | 39 | ## 裴矩 40 | 41 | 经略西域，分化突厥 42 | 43 | ## 隋炀帝亲征吐谷浑 44 | 45 | 隋炀帝，十万人亲征吐谷浑，吐谷浑逃生青海湖，再无反击之力。 46 | 47 | ## 隋炀帝焉支山下万国博览会 48 | 49 | 50 | ## 骆驼城 -------------------------------------------------------------------------------- /tour/how-mach-in-west.md: -------------------------------------------------------------------------------- 1 | --- 2 | - date: 2020-11-10 22:17 3 | - title: 山月的裸辞旅游：十天西北之行需要花费多少钱 4 | - loc: 乐山大佛脚下 5 | - spend: 3 6 | 7 | --- 8 | 9 | # 十天的西北之行需要花费多少钱 10 | 11 | 自我裸辞之后，有很多人私信问起我这路上能花多少钱，也有很多私信的小伙伴响应我的号召，也开始了旅行。 12 | 13 | 我前往你去过的城市，沿着你的足迹，走着你走过的路。人生苦短，及时行乐。 14 | 15 | 我大概比较懒的，粉丝的详细费用清单与我差不多，我把它列出来，与我相比较，总结一番，见下图 16 | 17 | ![](./assets/money.png) 18 | 19 | ## 概述 20 | 21 | + **总计: 8589.38**，日均 860 22 | + **景点: 4014**，日均 400 23 | + **交通: 1894**，日均 189 24 | + **住宿: 1042**，日均 104 25 | + **吃饭: 869**，日均 87 26 | 27 | 我与他的费用相比，吃饭会贵些，景点及交通费会便宜些，比如我没有做骆驼和滑翔机，也没有来回飞机票，大概在 7000 左右。 28 | 29 | 关于景点则是景点的西北大环线加两天的西安之行，大致如下 30 | 31 | ![西北大环线](./assets/xibeihuanxian.jpg) 32 | 33 | ## 推荐 34 | 35 | 关于新疆、甘肃和西藏三地，我非常推荐西北大环线。 36 | 37 | 1. 这个星球上除了海洋以外的所有地形地貌，都在这条大环线上呈现：雪山，草原、湖泊、冰川、峡谷、沙漠、戈壁。 38 | 1. 没有高原反应，没有头痛欲裂，天朗气清，心情舒畅。 39 | 1. 河西走廊之地，连接中亚及欧洲的交通枢纽，沉重的历史感及汉唐强大的气息扑面而来。 -------------------------------------------------------------------------------- /tour/jiang-wei.md: -------------------------------------------------------------------------------- 1 | # 新疆味道 2 | 3 | ## 抓饭 4 | 5 | ## 红柳烤肉 6 | 7 | ## 烤包子 8 | 9 | 和田烤包子。外脆内香，颜色金黄，麦香浓郁 10 | 11 | ## 羊腿面包 12 | 13 | ## 泥巴羊脖子 14 | 15 | ## 烤蛋 -------------------------------------------------------------------------------- /tour/meta.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "新疆有哪些好吃的？", 4 | "sideTitle": "吃在新疆", 5 | "path": "jiang-eat" 6 | }, 7 | { 8 | "title": "我在敦煌的一周之景之食", 9 | "sideTitle": "吃玩敦煌", 10 | "path": "dunhuang" 11 | }, 12 | { 13 | "title": "十天西北之行需要花费多少钱", 14 | "sideTitle": "西北盘缠", 15 | "path": "how-mach-in-west" 16 | }, 17 | { 18 | "title": "成都地铁与处处可见的太阳神鸟图案", 19 | "sideTitle": "太阳神鸟", 20 | "path": "chengdu-subway" 21 | }, 22 | { 23 | "title": "宜宾之行", 24 | "sideTitle": "合江城门", 25 | "path": "yibin" 26 | }, 27 | { 28 | "title": "宜昌沿长江之行", 29 | "sideTitle": "宜昌沿江", 30 | "path": "xia-binjiang" 31 | }, 32 | { 33 | "title": "清江画廊的流水笔记", 34 | "sideTitle": "清江画廊", 35 | "path": "xia-qingjiang" 36 | } 37 | ] -------------------------------------------------------------------------------- /tour/software.md: -------------------------------------------------------------------------------- 1 | --- 2 | draft: true 3 | --- 4 | 5 | ## 旅行途中，我所用到的软件 6 | -------------------------------------------------------------------------------- /tour/xia-qingjiang.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-12-09 21:00 3 | loc: 宜昌伍家岗 4 | --- 5 | 6 | # 清江画廊流水账 7 | 8 | 十二月九日，雨，清江画廊。 9 | 10 | 清江画廊，国家5A级景区，位于宜昌*长阳*，游船是基本游乐方式。昨天游船经西陵峡至三峡大坝，因此短时间对游船不太感兴趣，但想着可以免费去个 5A 级景点打卡，今天又出发了。 11 | 12 | 长阳，一个土家族的自治县，县中一半以上都是土家族，如果想要感受土家族的民族风俗，可以去恩施州走一趟。说起土家族，渝黔湘鄂四省交界都处于山地之中，也几乎都是土家族，明清时这里由土司管理。 13 | 14 | 清江，发源于利川齐岳山，长江一级支流，在利川第一次见它时，水色如黛，如梦如幻。利川有亚洲第一大溶洞*腾龙洞*。然而我在利川的朋友向我推荐的好玩去处却是*齐岳山*。 15 | 16 | 十点登船，一路烟雨蒙蒙，云雾缭绕，在游船的过程中，我大概也明白了*画廊*的意思：*江中游船中观赏两岸风景*。另外乌江处也有乌江画廊，位于重庆。乌江大名鼎鼎，特别是在长征中*强渡乌江*，我从贵阳到了恩施，本应该有两次机会可以见到乌江，但都没有，很是遗憾。 17 | 18 | 大概路线是登船，到达岛中山*武落钟离山*，登船回到起点。武落钟离山充斥着巴人文化及相关庙宇，相传是巴人祖先*廪君*的诞生地，而巴人，相传是土家族的祖先。山很矮，二十分钟可达山顶，山顶上可以俯视清江。由于今天雾大，山上其实也没有什么好看的。 19 | 20 | 宜昌盛产柑橘，甚至市内有一个柑橘博物馆，三峡与武落钟离山上到处是柚子树，柚子树里还有诸多山雀。另外，还有一种鸟，不知道名字，和喜鹊一样大，拖着长长的尾巴，喜欢站在树梢上叫。 21 | 22 | 由于天气的原因，今天的旅行算是一般，甚至觉得不如去长江边上走走停停。还有烦恼事，丢了一副星特朗的望远镜，无比心痛，很影响明天到长江边上看老鹰。 23 | -------------------------------------------------------------------------------- /tour/zhuan.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/tour/zhuan.md -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "headers": [ 3 | { 4 | "source": "/assets/(.*)", 5 | "headers": [ 6 | { 7 | "key": "Cache-Control", 8 | "value": "max-age=31536000" 9 | } 10 | ] 11 | } 12 | ], 13 | "redirects": [ 14 | { "source": "/op/linux-monitor", "destination": "/op/linux-monitor.html", "permanent": true }, 15 | { "source": "/op/tmux-vim-setting.html", "destination": "/op/vim-setting.html", "permanent": true }, 16 | { "source": "/exit-code.html", "destination": "/node/exit-code.html", "permanent": true }, 17 | { "source": "/post/redis-case", "destination": "/post/redis-case.html", "permanent": true} 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /wasm/code/hello/hello.c: -------------------------------------------------------------------------------- 1 | #include 2 | 3 | int main() { 4 | printf("Hello World\n"); 5 | } 6 | 7 | -------------------------------------------------------------------------------- /wasm/code/hello/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/wasm/code/hello/index.js -------------------------------------------------------------------------------- /web-performance/assets/hang-exif-sudi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/web-performance/assets/hang-exif-sudi.png -------------------------------------------------------------------------------- /web-performance/assets/hang-sudi.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/web-performance/assets/hang-sudi.jpeg -------------------------------------------------------------------------------- /web-performance/assets/image-optim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/web-performance/assets/image-optim.png -------------------------------------------------------------------------------- /web-performance/assets/jpeg-metadata-size.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/web-performance/assets/jpeg-metadata-size.avif -------------------------------------------------------------------------------- /web-performance/assets/jpeg-metadata-size.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/web-performance/assets/jpeg-metadata-size.jpg -------------------------------------------------------------------------------- /web-performance/icon.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/web-performance/icon.md -------------------------------------------------------------------------------- /web-performance/image-optim.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/web-performance/image-optim.md -------------------------------------------------------------------------------- /web-performance/meta.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "sideTitle": "1. 优化实践", 4 | "path": "image-optim-with-webpack", 5 | "category": "Image" 6 | }, 7 | { 8 | "sideTitle": "2. JPEG Metadata", 9 | "path": "image-metadata" 10 | } 11 | ] -------------------------------------------------------------------------------- /webpack/chunk.md: -------------------------------------------------------------------------------- 1 | # Chunk 2 | 3 | ``` js 4 | { 5 | id: 10, 6 | hash: '4bc584b18b8ce14e108476da4c712b74', 7 | contentHash: { 8 | javascript:'c6e9ac6f0c2317138b62', 9 | 'css/mini-extract': 'edcac2701e318e0457d6', 10 | }, 11 | entryModule: module, 12 | name: 'main', 13 | 14 | getModules () {} 15 | } 16 | ``` 17 | 18 | ## ChunkGraph 19 | 20 | ``` js 21 | { 22 | 23 | } 24 | ``` 25 | 26 | ## ChunkGraphModule 27 | 28 | ``` js 29 | ``` -------------------------------------------------------------------------------- /webpack/index.md: -------------------------------------------------------------------------------- 1 | 1. LazyFunction: 一个小优化 2 | 3 | -------------------------------------------------------------------------------- /webpack/lazy.md: -------------------------------------------------------------------------------- 1 | ``` js 2 | const lazyFunction = factory => { 3 | const fac = memoize(factory); 4 | const f = /** @type {any} */ ( 5 | (...args) => { 6 | return fac()(...args); 7 | } 8 | ); 9 | return /** @type {T} */ (f); 10 | }; 11 | ``` 12 | -------------------------------------------------------------------------------- /webpack/loader.md: -------------------------------------------------------------------------------- 1 | # loader 2 | 3 | ## loader-runner 4 | 5 | [loader-runner](https://github.com/webpack/loader-runner) 6 | 7 | ### schema-utils 8 | 9 | ``` js 10 | function validate (schema) { 11 | 12 | } 13 | ``` 14 | 15 | ## Async 16 | 17 | ``` js 18 | this.async() 19 | ``` 20 | 21 | ## API 22 | 23 | + `this._compiler` 24 | + `this._compilation` 25 | + `this.resourcePath` -------------------------------------------------------------------------------- /webpack/module.md: -------------------------------------------------------------------------------- 1 | # Module 2 | 3 | ``` js 4 | { 5 | id: 10, 6 | request: '/code/src/lib/fetch.js', 7 | type: 'javascript', 8 | originalSource: 'module.exports = fetch', 9 | parser: AcornParser, 10 | 11 | buildInfo: { 12 | hash: '', 13 | }, 14 | build () { 15 | 16 | } 17 | } 18 | ``` -------------------------------------------------------------------------------- /what-happens/QA.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/what-happens/QA.md -------------------------------------------------------------------------------- /what-happens/Readme.md: -------------------------------------------------------------------------------- 1 | # what happens 2 | 3 | ## IO与中断 4 | 5 | ## URL 解析 6 | 7 | 通过 url 解析获取 hostname 8 | 9 | ```javascript 10 | // 在浏览器环境中访问 location 11 | 12 | > location.host 13 | shanyue.tech 14 | 15 | > location.protocal 16 | https 17 | ``` 18 | 19 | ## DNS 20 | 21 | 解析 hostname 对应的 IP 地址 22 | 23 | ```shell 24 | $ dig shanyue.tech +short 25 | shanyue.netlify.com. 26 | 206.189.89.118 27 | 28 | $ dig shici.xiange.tech +short 29 | 59.110.216.155 30 | ``` 31 | 32 | ## CDN 33 | 34 | 35 | + [DNS负载均衡与CDN原理结合](https://www.jianshu.com/p/05eb8365ab5f) 36 | 37 | ## UDP 38 | 39 | ## TCP 40 | 41 | ```shell 42 | ``` 43 | 44 | ## http 45 | 46 | ## https 47 | 48 | ## 49 | 50 | ## 命令 51 | 52 | ### dig 53 | 54 | ### nslookup 55 | 56 | ### host 57 | 58 | ### ss 59 | 60 | ```shell 61 | ``` 62 | 63 | ### netstat 64 | 65 | ## 时间度量 66 | 67 | ## 术语 68 | 69 | ## Q&A 70 | -------------------------------------------------------------------------------- /what-happens/arp.md: -------------------------------------------------------------------------------- 1 | # 2 | 3 | ``` bash 4 | $ arp -a 5 | ? (172.17.68.40) at ee:ff:ff:ff:ff:ff [ether] on eth0 6 | ? (10.244.0.3) at 32:df:1c:fa:4e:cc [ether] on cni0 7 | gateway (172.17.79.253) at ee:ff:ff:ff:ff:ff [ether] on eth0 8 | ? (10.244.0.2) at 7e:1e:87:f7:b8:5e [ether] on cni0 9 | ? (169.254.169.254) at on eth0 10 | ? (10.244.1.0) at 86:81:cf:32:b8:76 [ether] PERM on flannel.1 11 | ``` 12 | 13 | ## 报文 14 | 15 | 16 | -------------------------------------------------------------------------------- /what-happens/assets/TCP-handshake.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/what-happens/assets/TCP-handshake.jpeg -------------------------------------------------------------------------------- /what-happens/assets/TCPsockets.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/what-happens/assets/TCPsockets.jpg -------------------------------------------------------------------------------- /what-happens/assets/tcp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/what-happens/assets/tcp.png -------------------------------------------------------------------------------- /what-happens/http.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/what-happens/http.md -------------------------------------------------------------------------------- /what-happens/http2.md: -------------------------------------------------------------------------------- 1 | # http2 2 | 3 | 1. 如何得知该网站某资源所使用的 http 协议版本号 4 | 1. 多路复用 -> Stream/Frame 5 | 1. 首部压缩原理 -> HPACK 6 | 7 | -------------------------------------------------------------------------------- /what-happens/meta.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "sideTitle": "DNS", 4 | "path": "dns" 5 | }, 6 | { 7 | "sideTitle": "ARP", 8 | "path": "arp" 9 | }, 10 | { 11 | "sideTitle": "IP", 12 | "path": "ip" 13 | }, 14 | { 15 | "sideTitle": "TCP", 16 | "path": "tcp" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /what-happens/tls.md: -------------------------------------------------------------------------------- 1 | # TLS 2 | 3 | 1. 如何保证证书是有效的/ 撤回 OSCP Stapling 4 | 1. 如何保证CA是可信任的 / 根证书 5 | 1. 如何保证根证书是可信任的 6 | 7 | -------------------------------------------------------------------------------- /what/Readme.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/what/Readme.md -------------------------------------------------------------------------------- /words: -------------------------------------------------------------------------------- 1 | - 2 | -------------------------------------------------------------------------------- /words.md: -------------------------------------------------------------------------------- 1 | - 少用第一人称 2 | - 少用了呢 3 | 4 | - 晶莹剔透 5 | - 自由伸展 6 | - 争一点光辉 7 | - 乘客们都用非常崇敬的眼神看着那浴满爱的光辉的母亲。 8 | - 崇敬的眼神 9 | - 矫揉造作 10 | - 谆谆善诱 11 | - 博采众议 12 | -------------------------------------------------------------------------------- /zhihu/4-years-college-plan.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shfshanyue/blog/6b1d3a5fd294443d04a929621752a27e4aaf5bf1/zhihu/4-years-college-plan.md -------------------------------------------------------------------------------- /zhihu/how-to-read-source-code.md: -------------------------------------------------------------------------------- 1 | # 如何阅读源码 2 | 3 | -------------------------------------------------------------------------------- /zhihu/meta.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "sideTitle": "如何面试前端工程师", 4 | "path": "interview-fe" 5 | } 6 | ] 7 | --------------------------------------------------------------------------------