{"componentChunkName":"component---src-templates-blog-post-js","path":"/first-step-software-world/","result":{"data":{"site":{"siteMetadata":{"title":"😏","author":"thoamsy"}},"markdownRemark":{"id":"c1f937dd-049e-5992-869e-8fcec254cb04","html":"<p><a href=\"https://medium.freecodecamp.org/my-first-steps-into-the-world-of-software-development-and-what-they-taught-me-6ee748cffb8f\">原文, 需要翻墙</a></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 800px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/3725ce2ac53789957ff83556bc0368b6/21b4d/1*xNwbQ2Ec0xoq_DMPbxR5yw.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.49999999999999%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'400\\'%20height=\\'225\\'%3e%3cpath%20d=\\'M38%206l-2%2025c0%2016-2%2025-4%2025l-5%203c-7%205-12%204-14-2a276%20276%200%2000-5-19L4%2027c-3-7-3-6%202-11%205-6%202-11-4-8-2%200-2%2011-2%20109v108h209v-7l-1-16c-1-11%201-27%203-27%203%200%203%2012%202%2019-2%207-2%2015%201%2027v4h187V120L400%207V0h-18v3c-1%204-4%204-5%200l-1-3h-12c-12%200-13%200-13%202l-2%204c-1%202-1%202%201%204%203%203%204%209%204%2020%200%2018%200%2019-3%2024-3%204-3%204-2%206%204%204%203%2015-2%2015-2%200-3%201-4%209-1%205-2%206-4%206l-4%201c-3%203-6-2-5-9%201-5%203-6%205-4%202%201%202%201%202-3v-4l-2%202c-2%202-4%202-9%202-6%200-8-1-10-6-1-1-2-3-4-3-4-2-5-4-5-18-1-13-3-16-9-13-4%202-5%206-3%2016%201%2010%201%2013-4%2016-6%203-11%202-11-3-1-3-1-4-4-3l-10-3c-10-5-22-6-32-1-11%206-17%2015-17%2025l-1%203-1-8%201-8-6-2c-7-1-11-5-11-10l-2-7-1-8c0-3%200-4-2-4-2-1-6%201-6%203h-1l-3%201c-1%203-2-9-2-28s-1-17-1%204a423%20423%200%2001-3%2038c0%206-4%2012-6%208-2-3-3-19-3-40V0h-21l-22%201h-2L80%200H38v6m4%209a346%20346%200%2001-4%2029c0%205%200%205%207%2010l4%207c3%205%204%205%2012%204%2010-2%2012-7%203-11-4-3-7-7-7-12%200-4-1-7-6-8-1%200-2-1-1-5%201-9-5-19-8-14m116%207c-2%202-2%203-1%205v9l-1%208%203%202c6%205%206%204%205-12%200-8-1-12-2-14-2-3-2-3-4%202m222%2032l-1%201-2%203c-1%201-1%206%201%209%201%201%205%200%205-1%200-2%203-4%206-4%202%200%203-2%201-6-1-3-6-4-10-2M54%2079c-2%201-3%206-1%2013l1%2013c2%2011%206%2016%2012%2012l7-2c6-1%207-2%208-10%203-15-1-23-9-23l-10-2-6-2-2%201m168%209l-1%207-3%208-1%204c0%204%202%202%202-2l1%204%203%208c2%202%201%203-1%203-3-1-7%200-7%202s3%202%209%201c5-2%2011-1%208%200l-1%203c0%202%200%202-6%202-7-1-9%200-9%204%200%202-1%203-4%204-6%202-14%2013-17%2023-1%204-1%204%201%206l2%204c0%203%201%204%2011%204h5c0-1%2012-10%2013-9l1%204c-1%203%200%202%203-4%205-10%205-11%201-14l-2-2c1-1%200-3-1-5l-1-2-1%201c-1-1-1%200-1%202%200%204%200%204-3%203s-3-1-2-6c2-9%203-10%2010-10l5-1%204-1c9%200%208-4-1-5-4-1-4-1-3-3l8-3c6-1%207-2%201-2-6%201-11-1-13-4-2-4-3-4%2020-9%202%200%203-1%202-4%200-4-2-6-8-7l-4-2h-8l-4%201c-3%200-3%200-2-1%202-2%202-2%200-2h-6m90%205c-2%201-4%206-3%2010%202%207%206%208%208%201%202-6-1-13-5-11m-162%203c-2%202-2%202-1%206l1%204h11V94h-5l-6%202m167%2091c0%202-1%203-2%201-2-2-5-2-6%201l-1%202-2-3c-3-3-4-3-4%201%201%202%200%203-1%204-3%202-3%203%200%202%203-2%205-1%203%200l-2%203c1%201%200%202-1%202-6%201-2%2017%203%2017s6-2%205-7v-6l4-1%2014-2c2%200%200-7-2-10-1-2-3-2-4-2-2%200-3-1-3-2-1-2-1-2-1%200\\'%20fill=\\'%23d3d3d3\\'%20fill-rule=\\'evenodd\\'/%3e%3c/svg%3e'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n        <source\n          data-srcset=\"/static/3725ce2ac53789957ff83556bc0368b6/ba381/1*xNwbQ2Ec0xoq_DMPbxR5yw.webp 200w,\n/static/3725ce2ac53789957ff83556bc0368b6/7f61c/1*xNwbQ2Ec0xoq_DMPbxR5yw.webp 400w,\n/static/3725ce2ac53789957ff83556bc0368b6/d00b9/1*xNwbQ2Ec0xoq_DMPbxR5yw.webp 800w,\n/static/3725ce2ac53789957ff83556bc0368b6/92f8c/1*xNwbQ2Ec0xoq_DMPbxR5yw.webp 1200w,\n/static/3725ce2ac53789957ff83556bc0368b6/af3f0/1*xNwbQ2Ec0xoq_DMPbxR5yw.webp 1280w\"\n          sizes=\"(max-width: 800px) 100vw, 800px\"\n          type=\"image/webp\"\n        />\n        <source\n          srcset=\"/static/3725ce2ac53789957ff83556bc0368b6/772e8/1*xNwbQ2Ec0xoq_DMPbxR5yw.png 200w,\n/static/3725ce2ac53789957ff83556bc0368b6/e17e5/1*xNwbQ2Ec0xoq_DMPbxR5yw.png 400w,\n/static/3725ce2ac53789957ff83556bc0368b6/5a190/1*xNwbQ2Ec0xoq_DMPbxR5yw.png 800w,\n/static/3725ce2ac53789957ff83556bc0368b6/c1b63/1*xNwbQ2Ec0xoq_DMPbxR5yw.png 1200w,\n/static/3725ce2ac53789957ff83556bc0368b6/21b4d/1*xNwbQ2Ec0xoq_DMPbxR5yw.png 1280w\"\n          sizes=\"(max-width: 800px) 100vw, 800px\"\n          type=\"image/png\"\n        />\n        <img\n          class=\"gatsby-resp-image-image lazyload\"\n          data-src=\"/static/3725ce2ac53789957ff83556bc0368b6/5a190/1*xNwbQ2Ec0xoq_DMPbxR5yw.png\"\n          alt=\"Nervous laugh\"\n          title=\"Nervous laugh\"\n          loading=\"lazy\"\n          style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        />\n      </picture>\n  </a>\n    </span></p>\n<p>作为一个刚毕业的计算机科学学生，在课堂上学到的东西和你在真实世界看到的东西会存在<strong>断层</strong>。各种循环操作：<code class=\"language-text\">for, while, do while</code> 不在话下。你可以不费吹灰之力写一个基于命令行的井字棋(Tic-Tac-Toe)游戏. 你还可以在 X86 上直接写汇编代码!</p>\n<p>但是, 你对于 Facebook, YouTube 或者 Reddit(美国最知名的论坛) 是怎么工作的完全没有头绪. 你甚至连怎么开始都不知道. 因为你只知道一门 Python 语言, 当你 Google <em>哪些公司用 Python</em> 的时候, 你发现一些人说的: <em>“Reddit…use python for their backend.”</em> Backend(后端)? 这他妈是什么?</p>\n<p>这就是在用命令行写井字棋游戏和构建一个真实的应用程序中, 存在的巨大的空缺, 而且没人会告诉你该怎么填补这个空缺. 即使你已经学会了如何像计算机一样思考, 你还是不知道如何将你学会的东西, 用来构建一个你想构建的东西。</p>\n<blockquote>\n<p>只有主动才能让你成为你想成为的人. 不会总是有老师或者教授, 将他的模板和样例给你, 而你只需要填补这些空白. 也不总是有一个课程会教你 “下一步你该学什么”</p>\n</blockquote>\n<h2 id=\"takeaway-1\" style=\"position:relative;\"><a href=\"#takeaway-1\" aria-label=\"takeaway 1 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Takeaway #1:</h2>\n<p><strong>没有人比你更能影响你自己</strong>.\n你想学什么取决于你, 而不是有人拿着勺子一点一点的喂着你下一步该学什么, 应该自主学习, <a href=\"https://danluu.com/learning-to-program/\">Dan Luu 称这个为 meta-skill</a>, 这也是你在决定成为一个软件工程师之后最重要的技能之一.</p>\n<p>幸运的是, Google 可以帮助我们! 当你搜索 <em>How to build a website using python</em>, 你找到了这个—<a href=\"http://flask.pocoo.org/docs/0.12/\">一个精巧的小型 Web 框架</a>, 于是你打算一探究竟. 即使你还不知道什么是框架(framework). 你尝试去阅读初学者文档, 但是不知道什么是 <strong>database abstraction layer(数据库抽象层)</strong>, 于是你跳过这个直接找到了<a href=\"http://flask.pocoo.org/docs/0.12/installation/\">安装那一步</a>.</p>\n<p>最后, 你发现了那些可以自己操作的步骤 🎉! 你复制这些命令到你的终端中(terminal). 这里出现了叫做 <code class=\"language-text\">pip</code>, <code class=\"language-text\">virtualenv</code> 的东东, 管它呢, 先复制. 你花了几分钟观察到了输入这些后会发生什么, 你也终于对你的机器是怎么工作的有了一个大概的认识.</p>\n<h2 id=\"takeaway-2\" style=\"position:relative;\"><a href=\"#takeaway-2\" aria-label=\"takeaway 2 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>takeaway #2</h2>\n<p><strong>我们通过理解学习, 而不是无脑的跟着教程.</strong> 当碰到你完全不理解的东西的时候, 尝试去学习而不是放弃, 这样你将会发现这些看上去不可能完成任务是一个能让你快速成长的绝佳机会—只不过你可能要花很长时间解决它罢了 🌚</p>\n<p>Okay, 现在看上去 <code class=\"language-text\">pip</code> 好像是一个用来安装 <code class=\"language-text\">packages(包)</code> 的工具, 这样你就可以 <code class=\"language-text\">import</code>(Python 通过这条语句导入外部函数) 它们. <code class=\"language-text\">virtualenv</code> 看上去好像是一个关联你安装好的包和指定项目的方式. 你现在除了 <code class=\"language-text\">cd</code> 和 <code class=\"language-text\">mkdir</code> 外, 其他的命令行你一个都看不懂, 但是至少不再是<strong>一无所知</strong>. 到了去往<a href=\"http://flask.pocoo.org/docs/0.12/quickstart/\">快速指导</a>的时间了.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 800px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/0a68018bffc8ae99d678c36d6c218803/ad00e/41FC0083-5066-4AAE-8BFE-EC3432EF6AC8.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 65.49999999999999%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'400\\'%20height=\\'261\\'%3e%3cpath%20d=\\'M0%20131v130h94a422%20422%200%2000101-4v-3l3-6c5-6%2010-13%2010-16l2-2%201-3c0-2%200-2-2-1-5%201-3-2%202-5%206-4%209-4%204%200-4%203-4%205%200%202l11-4-4%205c-4%204-7%208-5%208l6-6c1-2%201-2%201%200s1%201%202-2c1-5%202-6%204-3v1l1%202c3%202%203%202%202%203v2c2%201%203%203%200%203l1%202%202%203v4c-1%200-2%201-1%202l-1%202v4l1%202v5l2%203c0%202%201%202%2010%202l10-1-4-10-6-19c-5-14-9-21-12-24-7-5-14-16-14-21l-1-2-1-2%204%203%205%206%202%202%201-2c1-2%202-2%203-2h4c1-2%201-2-6-4-2-1-8-10-8-11h-2l-3-1h-1l-4%202c-3%202-4%202-10%201l-6-1c-1%200%203%203%207%204s4%202%204%205c1%203%200%204-1%204-2%200-2%200-1%202v1l-1%201c1%204%200%206-2%206v1l2%201h1c2-1%205%200%205%201h1c1-2%201-2%201%200l-1%202-1%201c1%202-3%202-23%202l-25%201-18%207a1334%201334%200%2000-68%2025c-2-1-25-59-23-61l5-3h5c1%202%202%201%2011-2a6535%206535%200%200156-23c0-2%201-3%205-4l5-3-20-36c-1-1-2-1-7%201l-6%202V84l2-27h18a7505%207505%200%200040%201c1%200%203%200%204%202l2%201%201%201%201%201c2-2%204%201%204%208v12l1-3%201-3V65l3%201%204%202c4%200%207%201%207%203%201%203%206%202%207-1s1-3-1-3c-1%200-2%200-1-1h-2l-3-1-2-2h-3c-2-1-9-10-8-11l1-6c-2-7-2-20-1-21%202-2%205%202%205%207v4l4-2c3-2%205-2%207-1%203%201%203%201-1%201-8%200-11%203-11%2012l2%208v3l1%201%201-1h2v1c-2%200-1%201%202%202l5%203%206-6%206-6v-7c1-7%200-13-2-12v9c0%205%200%207-1%206l-1-3c-2%200-3-4-4-17V16l4-3c6-6%2011-1%2010%209l3%2019-2%208-2%208%2063%201h19l2%205%203%204-4-9c-3-6-4-8-3-9%202-1-2-2-11-4-10-2-9%200-5-23s3-21%209-20l5-1c1-1-38-1-147-1H0v131M352%201a328%20328%200%2001-24%202l5%201c1%201-3%202-6%202h-2c1%203%2042%201%2058-3%205-1%204-2-3-2h-28m-89%206l-6%2016a2637%202637%200%2000-9%2023l2-2%201-1v-1c-2%200%200-2%203-2%202%200%202%200%200-1l-2-2%201-2h2l2-1c-1-1%200-3%201-4v-2c-1-1%204-11%205-11l1-2c-1-1-1-1%200%200l1-1c-1-1%200-2%201-3V9l-1-2h-2m81%2011c-4%200-5%201-3%202v1h-4v3l1-1%202-1c2%200%201%202-2%203-2%200-3%201-2%202h11l10-1-4-1c-3%200-3%200-2-1s0-1-3-1h-5l2-1%204-1%206-2h5l-4%201-3%201h3c5%200%208%202%203%202-3%200-3%200-1%201h2l3%201%204%202c2%200%203%201%201%202-1%201%200%201%202%201h2l-4%201h-2l24-1c1-1%200-1-2-1-3%200-3%200-2-1%203-2%201-3-5-3h-4l3-1c3%200%204%200%203-1v-1l2%201%201%201c2-2-2-3-11-4-10%200-14-1-5-1l5-1h-31m-2%2014c-4%200-4%202-1%202%202%200%202%200%201%201-2%200-2%200%200%204%205%208%205%208-6%2014-10%204-11%205-9%206a528%20528%200%20001%2023v9h-6l-12-4c-8-4-10-5-10-2l-2%201-5%203-5%204-2%204-1%203c-2%200-2%201%201%204l2%205c0%201%201%203%205%206l1%203%201%201h1c-1%201%200%201%201%201l4%201%204%202%203%201c0%201%202%200%206-4%206-6%207-6%207-3l1-1%202-3c3-2%203%201%202%2042l-1%2044v6h-9l-58%201%206%203%2038%2021c1%201-1%204-3%208l-8%2015-4%208h56a425%20425%200%200055-2c2%201%202%201%201-2v-2l1-5v-3h-9l-10%201-2%201v-1l-4-1c-5%200-6-2-1-2h5l-5-1c-4-1-5-2-3-4l-3-1c-3%200-4-1-3-2h3l7-2c8%200%208-1%200-1l-5-1%204-2%207-1c3-1%203-1-4-1s-7%200-2-1l6-1v-1l1%201%201-1%204-1%207-2h1v5l-1%202-1%203-1%201c3%200%206%203%204%204-1%201-1%201%201%201h3v-12l-1-14v-3l1-17c0-15%200-17-2-17v-1c2%200%202-1%202-8v-8h-5l-5-1c-1-2-1-2%201-2l1%201c-1%201%201%201%203%201h5v-36l-3%201c-2%200-3%200-2-1l-3-1h-3c0-2%202-4%207-4%205-1%205-4%200-4l-3-1h3c3%200%204%200%204-2l-1-2h-4c-2%200-2%200%201-1l4-1V74l-1-31v-1c2%200%201-4-1-4l-4-1c-2-2-9-3-8-1l-2%201-3-1h-17l8-1%207-1-18%201h-10l-4-1%204-1c1-1-5-2-9-1m-41%2056c0%201%202%204%205%206%204%204%206%207%203%206h-1l2%201c4%201%205%204%205%209v2l1-3v-2l2%202%203%201v1h3l2-1h1l1-9v-8h-3l-20-5c-4-2-4-2-4%200m-199%2031c-4%201-4%202-2%202l2%201h1c2-2%205-1%206%201s-11%207-13%205v-5l1-1h-3l1%201c1%201%201%201-1%201h-5c-2%201-2%201%200%201s3%201%203%202l2%202c1%201%203%202%203%204%202%203%202%203-1%204l-3%202c0%201-1%202-3%202-4%200-4-1-7-4l-2-4-3%203c-3%202-5%203-5%201l-4-1-5-1c-2-2-2%200%200%203l2%204%202%201c1%201%201%201-1%202-5%201-7%201-3-1s0-1-6%201l-5%203%205%207%205%206-3%202c-7%203-10%204-7%204h4l-1%201c-2-1-3%200-1%202s5%201%205-2l2-1c5%201%207%200%206-1l2-2c1-1%202-1%201-2l-3%201c-2%201-3%200-3-2s1-2%203-2c1%201%202%200%202-1h-2c-2%200-2%200-2-3%200-2%200-3-2-3h-3c-1-1%203-4%205-4h4c3%202%202%204-1%204-2%200-2%200-1%201v3l1%201h4c2%200%202%200%201-1l-1-2c1%200%206%204%205%205l2%201%201%201v1c2%200%201-2-2-6-2-2-3-3-2-4v-1c-2%200-2%200-1-2v-1c-2%201-4-2-2-3s8%203%205%205v1c2%200%204-1%203-2h1l4-1c1-1%202-1%203%201l2%203-1-3c0-3%200-3%206-5%201%200%202%200%201-1l-1-2%201-1%201%202%201%201%201-1%201-1%201%201%201%202%202%201-1-2c-1-1%200-2%202-3l3-1-4%201c-3%200-3%200-5-4-4-6-4-5%203-8s7-2%2010%204l5%208%202%203v-3l-1-3c-2%200-1-2%201-4%202-1%202-1%200-4l-2-2h4l1-1c3%200%204-2%203-4h-1l-3%201-2%202-3%201h-3c-2%202-3%200-1-2l2-3-2%201c-2%203-3%202-3%200l1-2v-1h-4c0-2%200-2-6%200m268%2033c-1%201%200%201%201%201%203%200-1%203-6%204-3%201-5%202-5%204v3c-2%201-1%204%201%205l4%202%202%201c-3-4%200-16%204-15h1l4-3c2-1%203-1%202-2h-8m-237%202l-4%202-1%201h-3l-5%202-2%202%203%201h2l-3%201-2%201-3%201-3%201c0%201-1%202-2%201-2%200-2%200%201-2l4-1c1%200%203-3%202-4l-4%201-7%204-5%202h-2l-3%201-2%202c-4%200-10%203-10%204h-4l-4%202-3%201c-1%201-1%201%201%202%202%200%202%200%201%201h-3c0-2-4-2-5-1%200%201-1%202-2%201-2%200-4%201-3%203l1%203%201%203%201%201%203%2010%204%209c0%202%202%203%204%201l3-2%209-3%201-1h4a558%20558%200%200152-21h2c2%200%205-3%203-4l-4%201c-1%201-2%201-2-1-1-2-1-2%202-2l2-2-4-9v-2c0-2%200-2-2-3l-1-1v-4c-2-4-2-4-8-2M23%20199l-12%208c-1%201-1%201%201%204l2%203c0%202%2017%2024%2019%2027l3%202%2012-9%2013-9-4-6-12-16-10-12-12%208m351%202l2%202%201%205c0%203%201%205%203%205h3l1%202h1l2-1c1%200%201-3-1-5-2-1-3-1-2%201l-1%201-4-1-1-2%208-1h8l-3-3c-2-2-2-2-3-1h-1c-1-2-7-2-8-1h-3c-1-2-2-2-2-1M25%20217c-2%203-2%206%201%208%204%204%2010%201%2010-4%200-7-7-9-11-4m178%2037l-3%203c-1-1-3%202-2%203l13%201c8%200%2013%200%2012-1l-9-5-9-5-2%204\\'%20fill=\\'%23d3d3d3\\'%20fill-rule=\\'evenodd\\'/%3e%3c/svg%3e'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n        <source\n          data-srcset=\"/static/0a68018bffc8ae99d678c36d6c218803/ba381/41FC0083-5066-4AAE-8BFE-EC3432EF6AC8.webp 200w,\n/static/0a68018bffc8ae99d678c36d6c218803/7f61c/41FC0083-5066-4AAE-8BFE-EC3432EF6AC8.webp 400w,\n/static/0a68018bffc8ae99d678c36d6c218803/d00b9/41FC0083-5066-4AAE-8BFE-EC3432EF6AC8.webp 800w,\n/static/0a68018bffc8ae99d678c36d6c218803/92f8c/41FC0083-5066-4AAE-8BFE-EC3432EF6AC8.webp 1200w,\n/static/0a68018bffc8ae99d678c36d6c218803/ec897/41FC0083-5066-4AAE-8BFE-EC3432EF6AC8.webp 1366w\"\n          sizes=\"(max-width: 800px) 100vw, 800px\"\n          type=\"image/webp\"\n        />\n        <source\n          srcset=\"/static/0a68018bffc8ae99d678c36d6c218803/772e8/41FC0083-5066-4AAE-8BFE-EC3432EF6AC8.png 200w,\n/static/0a68018bffc8ae99d678c36d6c218803/e17e5/41FC0083-5066-4AAE-8BFE-EC3432EF6AC8.png 400w,\n/static/0a68018bffc8ae99d678c36d6c218803/5a190/41FC0083-5066-4AAE-8BFE-EC3432EF6AC8.png 800w,\n/static/0a68018bffc8ae99d678c36d6c218803/c1b63/41FC0083-5066-4AAE-8BFE-EC3432EF6AC8.png 1200w,\n/static/0a68018bffc8ae99d678c36d6c218803/ad00e/41FC0083-5066-4AAE-8BFE-EC3432EF6AC8.png 1366w\"\n          sizes=\"(max-width: 800px) 100vw, 800px\"\n          type=\"image/png\"\n        />\n        <img\n          class=\"gatsby-resp-image-image lazyload\"\n          data-src=\"/static/0a68018bffc8ae99d678c36d6c218803/5a190/41FC0083-5066-4AAE-8BFE-EC3432EF6AC8.png\"\n          alt=\"Just follow along and try to keep up.\"\n          title=\"Just follow along and try to keep up.\"\n          loading=\"lazy\"\n          style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        />\n      </picture>\n  </a>\n    </span></p>\n<p>你跟着教程, 运行你的程序, 感觉当你的浏览器第一次出现了 <strong>Hello, World</strong> 的时候, 你的心中会涌入一种爽到吸大麻的. 你对自己说, 这就我想要的哈哈! 滚吧, 傻逼命令行! 这确实是一小步, 但那是你第一次让浏览器听你的话, 这才是历史性的一刻.</p>\n<p>你继续, 又出现了一大堆你不理解的概念. Routes(路由)? HTTP? GET? POST? 什么是 rendering template(渲染模板)? 这些概念听上去好像有那么一点点印象, 但是你不确定到底是什么意思, 所以你停止你手头的工作去搜一下它们是什么. 就像你刚学会 <code class=\"language-text\">pip</code> 和 <code class=\"language-text\">virtualenv</code> 一样, 渐渐的你开始对你的程序怎么运行有了一个模糊的概念.</p>\n<h2 id=\"takeaway-3\" style=\"position:relative;\"><a href=\"#takeaway-3\" aria-label=\"takeaway 3 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Takeaway #3</h2>\n<p><strong>学习不断地练习.</strong> 就像任何其他的技能, 它们是需要打磨的, 熟能生巧. 抓住每一个学习的机会. 记住: success begets success.</p>\n<blockquote>\n<p>让学习成为一种习惯, 你的求知欲望应该和你的年龄身体一起成长</p>\n</blockquote>\n<p>你可以用模板来显示内容, 和其他的 HTML 和 CSS 页面一样, 只不过它们是动态的. 你可以通过定义不同的路由来控制在不同的 URL 下该显示什么. 你甚至可以用你自己的程序来抓取其他网站上的内容!</p>\n<blockquote>\n<p>译者注: 当然现在是通过前端来渲染模板了, 后端仅在要求性能的时候服务器渲染</p>\n</blockquote>\n<p>随着你渐渐地变得更加轻松, 你开始对独立学习有一种控制感和自豪感. 这可能是你在完成课堂任务的时候从未体验过的(不敢想象国外的教育 🙂). 你开始飘起来, 谁还需要学校, ╭(╯^╰)╮?</p>\n<p>随着你获得自信, 这个指导开始看上去有点…基础了. 确实, 毕竟, 这只是一个 quick start… “我可以做更酷 😎 的事情”, 你想着.</p>\n<p>于是你开始自己搞定这些. 你想之前做的一样, 用 <code class=\"language-text\">pip</code> 和 <code class=\"language-text\">virtualenv</code> 设置你的项目, 因为那是你仅仅知道的方式. 你知道如何设置模板; 你知道如何设置路由, HTTP 请求, 什么是 GET 什么是 POST. 你可能开始尝试使用第三方 API, 并且开始阅读更多的文档. 你并不是什么都懂, 但是你正在学习. 一点一点的.</p>\n<p>最后, 你终于构建了你自己的第一个独立的项目 🎉. 不是那个已经有很多年轻的开发者跟着教程走的项目, 也不是很多学生在课堂上做的项目. 而是一个, 真实的, 可以感知到的, <em>honest-to-goodness</em> 的程序, 在你构建之前, 它从未存在过. <strong>这是一中超凡的感觉!</strong></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 800px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/29114/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 41.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'400\\'%20height=\\'167\\'%3e%3cpath%20d=\\'M0%2017v18l3-1c10-1%2014%207%205%2010-4%201-4%201-1%201l5%203c0%201-4%201-10-1H0v120h131a1317%201317%200%2000154-2c5-3%206-4%201-4l-3-2%201-1%203-1%202-2c2%200%202%200%201-1v-3l-2-3c-1-1-1-1%201-1s2%200%201-1c-2-1-4-3-3-5%200-1%204-1%209%201l4%202-3%201-4%201c-2%201%201%203%204%203%202%200%204%203%202%205-1%201-1%201%201%202%203%201%209%207%207%208v2l47%201h47v-61c0-39-1-50-1-31v29h-7l-8-1h-1c0%201-7%201-15-2a26%2026%200%2000-13%200v5c1%200%201%204-1%208v4l-1%201-1-4v-3l-2%203c-2%204-6%205-11%202-2-1-2-1-4%202s-3%204-1%204l1-1h2c2%203%205%202%206%200%202-3%203-3%203%200-1%203-7%207-10%205-1-1-1-1-1%201l4%203c4%202%205%201%204-2%200-2%202-3%204-2l1%202h-1l-2%201%201%201%201%203c-1%202%200%204%201%205%205%204-2%201-18-6-24-12-35-16-36-16l-1%204c-1%203-3%204-6%202h-3c-4%205-6%205-11%201l-6-3-2%201%201%201-1%201-2%201-1%201-7%201c-4%202-8%203-9%202h-2v3l-1%203c0%202-1%201-3-1l-2-4c-1-3-3-4-3-1l-1%202-1-4-1-4-1%201c1%202-3%203-4%202v-4l-1-3c-1%200-2-1-2-3%200-3-1-4-5-4l-5-2-3%201h-2c-1-3-5-2-7%200-1%203%200%208%201%206h1v2l1%203%201%202%201%202-8%2020c-1%202-11-16-11-20l-3-5c-4-3-5-6-3-6v-2l-2-3-1-2-3-5-5-5-2-1h2v-1c-1-3%202-2%205%201l3%202%203-2%203-2-2-1c-2%200-3-1-3-2%200-2%207-4%208-3l2%201c1%201%201%201-1%201h-2l2%202%203%201%201%202c-1%201%200%202%201%203v4h2l2-1c2%201%202-5%200-6l-1-2c0-2-2%200-2%202s0%202-1%200c-2-9-5-13-7-14h-4c-1%202-3-7-2-9v-2l-1%201c-1%201-1%200-1-3%201-5-1-8-3-4l-1%201h-2l-3-2c-1-3-4-4-6-2-1%201-1%201-1-1l-1-4-1-2c0-1-2-1-6%201l-1-2-2-3c-1-2-1-2%201-4s3-2%205-1c1%202%202%202%202-2l1-5c1%200-1-3-5-6l-6-5v-5c0-7-1-10-2-4l-1%205v-5c0-4%200-5-2-5s-2%201-2%204%200%203-1%202l-2-3-2-4-2-3-2-2c-2%200-2%200-2-4l1-4h-6c-6%200-7%200-7%202h-1c0-2-4-2-60-2H0v17m61%2016c-2%205-2%206%203%206s8%202%206%204c-1%202-5%202-7%200-1-2-5-2-5-1%200%206%2013%209%2017%203%203-4-2-10-8-10-1%200-2%200-1-1h5c7%201%207-2%200-4l-6-2-4%205m18%202c-3%204-3%2011%200%2014%204%204%2014%202%2014-4%200-2-5-6-7-6-3%200-4-2-1-3l3%201c3%203%206%202%204-1s-9-4-13-1m-63%205c-3%203-2%208%200%2010%206%203%2013%200%2010-5v-2c3%200%202-2%200-3-3-3-8-2-10%200m94%203c-6%204-7%208-2%208%202%200%203%201%204%203s4%203%204%201c0-3%203-2%205%201%203%203%208%203%2010%200%203-3%201-7-3-8-4-2-4-3%200-3%205%201%206-1%203-2-6-2-8-2-9%201-2%204-1%206%203%206l4%202c0%203-3%204-5%202l-3-2c-3%200-4-3-4-7%201-6-1-7-7-2m-80%200c-1%204%200%205%203%204l3%201c2%203-2%204-5%202-2-2-3-2-3-1%200%204%207%206%2011%204l2-1c0%204%209%205%2011%203%201-3%201-9-1-10h-8c-1%202%201%203%203%202h3c1%201%201%201-1%202-2%200-3%201%200%203v2l-4-1-2-2-2-3-4-3-2-1h7c0-1%200-2-5-3-4-1-4-1-6%202m179%204c-1%201-1%201%202%201s4%201%202%202h-2c-1-1-1-1-2%201l1%202%201%203c-2%201-4%200-3-3%200-1%200-2-1-1l-2-2c-1-2-1-2-3-1-2%202-1%205%203%208l3%204%201%201%206-2%204-2c0-2-2-5-3-4l-1-1%201-1v-3c0-3-4-4-7-2m9%203l1%201%201%202c-1%204%200%205%203%205s2%202-3%202c-7%202-12%204-11%206l1%204c1%205%203%207%206%206l2-2%203-3c4%200%204%200%204-5l1-4%204%205c4%206%206%207%208%202%202-2%202-2%200-5-4-6-7-9-9-8l-2-2c-1-1-2-2-3-1l-1-2-2-2-3%201M67%2071l-5%205c-2%204-2%204-2%2014%201%2011%201%2010%202%2010v-4c0-4%202-8%205-9%203-2%206-8%206-10l-3-2c-2%200-2-1-1-3%202-1%201-2-2-1m110%205l-2%204c0%202-1%202-4%201-4-1-13%200-14%202v1l2-1h1c0%202%202%203%202%201h1l3%201h1c0%201%204%202%205%200h5l2-4v-4l-1-3-1%202m-14%2023c-4%202-3%203%204%2017l6%2014-2%203c-2%205-2%205%200%205l2%201c0%202%202%201%203-1%200-2%201-1%204%206%204%207%208%2011%207%206v-1l2-1h-1l-1-2c2-4%202-5%200-2-3%204-3%204-8-8-4-6-5-9-4-11l-1-2c-1%201-2-1-4-4-3-5-3-6-1-7%202-3%202-4-1-2-2%202-2%202-4-2-1-4-1-4%201-5l3-2c2%200%201-2-1-3l-4%201m24%204c-2%202-2%204%200%204%201%201%201%201-1%201-3%200-2%202%202%202%203%201%203%201%203%205%200%202%201%204%203%205%201%201%201%201-1%201h-2c-1%201%200%201%201%201l3%202h1l2-1c1%200%201-2-1-6v-3l-3-3c-2-2-3-3-2-4%201%200%201-1-1-2v-3l-1-1-3%202\\'%20fill=\\'%23d3d3d3\\'%20fill-rule=\\'evenodd\\'/%3e%3c/svg%3e'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n        <source\n          data-srcset=\"/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/ba381/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.webp 200w,\n/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/7f61c/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.webp 400w,\n/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/d00b9/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.webp 800w,\n/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/92f8c/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.webp 1200w,\n/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/fad48/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.webp 1600w,\n/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/882b9/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.webp 1920w\"\n          sizes=\"(max-width: 800px) 100vw, 800px\"\n          type=\"image/webp\"\n        />\n        <source\n          srcset=\"/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/772e8/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.png 200w,\n/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/e17e5/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.png 400w,\n/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/5a190/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.png 800w,\n/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/c1b63/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.png 1200w,\n/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/29007/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.png 1600w,\n/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/29114/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.png 1920w\"\n          sizes=\"(max-width: 800px) 100vw, 800px\"\n          type=\"image/png\"\n        />\n        <img\n          class=\"gatsby-resp-image-image lazyload\"\n          data-src=\"/static/c16ff7fb3d74162cf7ee97cd9ce8ca0f/5a190/5498D1B1-A326-4044-9362-F2B1BA3A7BAE.png\"\n          alt=\"You are a master builder.\"\n          title=\"You are a master builder.\"\n          loading=\"lazy\"\n          style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        />\n      </picture>\n  </a>\n    </span></p>\n<p>所以接下来呢? 现在你做好了一个应用, 怎样才能让每个人都能用到它? 到底什么是 <code class=\"language-text\">back-end</code>, 什么是 <code class=\"language-text\">front-end</code>?</p>\n<p>这是一个很好的机会，用来培养学习的渴望: 总是有更多的东西.\n有点像一个十分棒的电视节目, 你从来都觉得看都不够爽, 更重要的是: <strong>它从来不会结束!</strong> 显然, 除了不断地学习就没有其他东西能像这样了. 软件开放的每一个分支, 都是一个需要深入的全新的世界, 而且你学的更多, 就会有更多的世界为你开放.</p>\n<p>你应该意识到, 没有一个所谓的权威的方式来让你成为一个 “real” 开发者. 也没有足够的时间去精通每一个方面. 每个人成功的道路和方式都是不同的. <strong>你如何修出一条到达你想到达的地方, 那完全取决于你自己.</strong>\n\u0013</p>\n<p>这就是我第一次踏入软件开发世界的故事. 如果你还想看我第一次到底做了什么, <a href=\"https://github.com/thetimothyp/Where2Eat\">你可以查看这个.</a></p>","frontmatter":{"title":"我进入编程世界的第一步（翻译）","spoiler":null,"image":null,"date":"2018/01/16"}}},"pageContext":{"slug":"/first-step-software-world/","previous":{"fields":{"slug":"/react-component-and-element/"},"frontmatter":{"title":"Element 和 Component 的区别","image":null,"spoiler":"一个判断是否是 React 新手的概念"}},"next":{"fields":{"slug":"/deep-learning/"},"frontmatter":{"title":"Deep Learning Quick Guide（翻译）","image":null,"spoiler":null}}}}}