Repository: ThePrimeagen/vim-fundamentals Branch: master Commit: aed0a14eeeb6 Files: 106 Total size: 167.3 KB Directory structure: gitextract_scmncpft/ ├── .editorconfig ├── .eslintrc.json ├── .github/ │ └── workflows/ │ └── gatsby.yml ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── course-website/ │ ├── .editorconfig │ ├── .eslintrc.json │ ├── .github/ │ │ └── workflows/ │ │ └── gatsby.yml │ ├── .gitignore │ ├── .prettierrc │ ├── LICENSE │ ├── README.md │ ├── csv.js │ ├── exercise │ ├── gatsby-config.js │ ├── gatsby-node.js │ ├── lessons/ │ │ ├── adv-pitstop.md │ │ ├── advanced-movements-1.md │ │ ├── advanced-text-manipulation-1.md │ │ ├── advanced-text-manipulation-2.md │ │ ├── advanced-text-manipulation-3.md │ │ ├── are-you-ready.md │ │ ├── basic-usage.md │ │ ├── color-my-pencils.md │ │ ├── exercise-0-hjkl-x.md │ │ ├── exercise-1-dyp.md │ │ ├── exercise-2-insert.md │ │ ├── exercise-3-search-and-replace.md │ │ ├── exercise-4-macros.md │ │ ├── exercise-5-registers.md │ │ ├── exercise-6-motions.md │ │ ├── files-e.md │ │ ├── files-intro.md │ │ ├── files-marks.md │ │ ├── files-netrw.md │ │ ├── files-recap.md │ │ ├── files-remaps-1.md │ │ ├── files-remaps-2.md │ │ ├── first-plugin.md │ │ ├── intro.md │ │ ├── mid-level-recap.md │ │ ├── my-ideal.md │ │ ├── opening-vim.md │ │ ├── plugins.md │ │ ├── quickfix.md │ │ ├── some-javascript.md │ │ ├── terminology.md │ │ └── vim-my-way.md │ ├── package.json │ └── src/ │ ├── components/ │ │ ├── TOCCard.css │ │ └── TOCCard.js │ ├── layouts/ │ │ ├── index.css │ │ └── index.js │ ├── pages/ │ │ ├── 404.js │ │ ├── index.css │ │ └── index.js │ ├── templates/ │ │ └── lessonTemplate.js │ └── util/ │ └── helpers.js ├── csv.js ├── gatsby-config.js ├── gatsby-node.js ├── lessons/ │ ├── adv-pitstop.md │ ├── advanced-movements-1.md │ ├── advanced-text-manipulation-1.md │ ├── advanced-text-manipulation-2.md │ ├── advanced-text-manipulation-3.md │ ├── are-you-ready.md │ ├── basic-usage.md │ ├── color-my-pencils.md │ ├── exercise-0-hjkl-x.md │ ├── exercise-1-dyp.md │ ├── exercise-2-insert.md │ ├── exercise-3-search-and-replace.md │ ├── exercise-4-macros.md │ ├── exercise-5-registers.md │ ├── exercise-6-motions.md │ ├── files-e.md │ ├── files-intro.md │ ├── files-marks.md │ ├── files-netrw.md │ ├── files-recap.md │ ├── files-remaps-1.md │ ├── files-remaps-2.md │ ├── first-plugin.md │ ├── intro.md │ ├── mid-level-recap.md │ ├── opening-vim.md │ ├── plugins.md │ ├── quickfix.md │ ├── some-javascript.md │ ├── terminology.md │ └── vim-my-way.md ├── package.json ├── save.sh ├── src/ │ ├── components/ │ │ ├── TOCCard.css │ │ └── TOCCard.js │ ├── layouts/ │ │ ├── index.css │ │ └── index.js │ ├── pages/ │ │ ├── 404.js │ │ ├── index.css │ │ └── index.js │ ├── templates/ │ │ └── lessonTemplate.js │ └── util/ │ └── helpers.js └── todo.md ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ root = true [*] end_of_line = lf insert_final_newline = true charset = utf-8 indent_style = space indent_size = 2 ================================================ FILE: .eslintrc.json ================================================ { "extends": [ "eslint:recommended", "plugin:import/errors", "plugin:react/recommended", "plugin:jsx-a11y/recommended", "prettier", "prettier/react" ], "rules": { "react/prop-types": 0, "jsx-a11y/label-has-for": 0, "no-console": 1 }, "plugins": ["react", "import", "jsx-a11y"], "parser": "babel-eslint", "parserOptions": { "ecmaVersion": 2018, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "env": { "es6": true, "browser": true, "node": true }, "settings": { "react": { "version": "16.5.2" } } } ================================================ FILE: .github/workflows/gatsby.yml ================================================ name: Deploy Gatsby Site to GitHub Pages on: push: branches: - master jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@master - name: npm install and build run: | npm install npm run build - name: Deploy site to gh-pages branch uses: alex-page/blazing-fast-gh-pages-deploy@v1.1.0 with: repo-token: ${{ secrets.ACCESS_TOKEN }} site-directory: public ================================================ FILE: .gitignore ================================================ # Project dependencies # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git node_modules .cache/ # Build directory public/ .DS_Store yarn-error.log ================================================ FILE: .prettierrc ================================================ {} ================================================ FILE: LICENSE ================================================ ## creative commons # # Attribution-NonCommercial 4.0 International Creative Commons Corporation (“Creative Commons”) is not a law firm and does not provide legal services or legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or other relationship. Creative Commons makes its licenses and related information available on an “as-is” basis. Creative Commons gives no warranties regarding its licenses, any material licensed under their terms and conditions, or any related information. Creative Commons disclaims all liability for damages resulting from their use to the fullest extent possible. ### Using Creative Commons Public Licenses Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights holders may use to share original works of authorship and other material subject to copyright and certain other rights specified in the public license below. The following considerations are for informational purposes only, are not exhaustive, and do not form part of our licenses. * __Considerations for licensors:__ Our public licenses are intended for use by those authorized to give the public permission to use material in ways otherwise restricted by copyright and certain other rights. Our licenses are irrevocable. Licensors should read and understand the terms and conditions of the license they choose before applying it. Licensors should also secure all rights necessary before applying our licenses so that the public can reuse the material as expected. Licensors should clearly mark any material not subject to the license. This includes other CC-licensed material, or material used under an exception or limitation to copyright. [More considerations for licensors](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensors). * __Considerations for the public:__ By using one of our public licenses, a licensor grants the public permission to use the licensed material under specified terms and conditions. If the licensor’s permission is not necessary for any reason–for example, because of any applicable exception or limitation to copyright–then that use is not regulated by the license. Our licenses grant only permissions under copyright and certain other rights that a licensor has authority to grant. Use of the licensed material may still be restricted for other reasons, including because others have copyright or other rights in the material. A licensor may make special requests, such as asking that all changes be marked or described. Although not required by our licenses, you are encouraged to respect those requests where reasonable. [More considerations for the public](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensees). ## Creative Commons Attribution-NonCommercial 4.0 International Public License By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions. ### Section 1 – Definitions. a. __Adapted Material__ means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image. b. __Adapter's License__ means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License. c. __Copyright and Similar Rights__ means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights. d. __Effective Technological Measures__ means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements. e. __Exceptions and Limitations__ means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material. f. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this Public License. g. __Licensed Rights__ means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license. h. __Licensor__ means the individual(s) or entity(ies) granting rights under this Public License. i. __NonCommercial__ means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange. j. __Share__ means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them. k. __Sui Generis Database Rights__ means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world. l. __You__ means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning. ### Section 2 – Scope. a. ___License grant.___ 1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to: A. reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and B. produce, reproduce, and Share Adapted Material for NonCommercial purposes only. 2. __Exceptions and Limitations.__ For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions. 3. __Term.__ The term of this Public License is specified in Section 6(a). 4. __Media and formats; technical modifications allowed.__ The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material. 5. __Downstream recipients.__ A. __Offer from the Licensor – Licensed Material.__ Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License. B. __No downstream restrictions.__ You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material. 6. __No endorsement.__ Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i). b. ___Other rights.___ 1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise. 2. Patent and trademark rights are not licensed under this Public License. 3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes. ### Section 3 – License Conditions. Your exercise of the Licensed Rights is expressly made subject to the following conditions. a. ___Attribution.___ 1. If You Share the Licensed Material (including in modified form), You must: A. retain the following if it is supplied by the Licensor with the Licensed Material: i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated); ii. a copyright notice; iii. a notice that refers to this Public License; iv. a notice that refers to the disclaimer of warranties; v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable; B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License. 2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information. 3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable. 4. If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of the Adapted Material from complying with this Public License. ### Section 4 – Sui Generis Database Rights. Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material: a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database for NonCommercial purposes only; b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material; and c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database. For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights. ### Section 5 – Disclaimer of Warranties and Limitation of Liability. a. __Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.__ b. __To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.__ c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability. ### Section 6 – Term and Termination. a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically. b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates: 1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or 2. upon express reinstatement by the Licensor. For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License. c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License. d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License. ### Section 7 – Other Terms and Conditions. a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed. b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License. ### Section 8 – Interpretation. a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License. b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions. c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor. d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority. > Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply one of its public licenses to material it publishes and in those instances will be considered the “Licensor.” Except for the limited purpose of indicating that material is shared under a Creative Commons public license or as otherwise permitted by the Creative Commons policies published at [creativecommons.org/policies](http://creativecommons.org/policies), Creative Commons does not authorize the use of the trademark “Creative Commons” or any other trademark or logo of Creative Commons without its prior written consent including, without limitation, in connection with any unauthorized modifications to any of its public licenses or any other arrangements, understandings, or agreements concerning use of licensed material. For the avoidance of doubt, this paragraph does not form part of the public licenses. > > Creative Commons may be contacted at creativecommons.org ================================================ FILE: README.md ================================================

VIM Fundamentals Course by ThePrimeagen


As taught by ThePrimeagen for Frontend Masters

📝 Course Website: VIM Fundamentals

Fly through code faster than you thought possible using VIM! You’ll learn the basics of editing and even know how to exit VIM. Go deeper with navigation, macros, registers, find, and replaces. Then edit your vimrc plugins along with quickfix lists. Lastly, see ThePrimeagen demonstrate his ideal VIM workflow. ## License The **code** is this repo is licensed under the Apache 2.0 license. The **content** is this repo is licensed under the CC-BY-NC-4.0 license. ================================================ FILE: course-website/.editorconfig ================================================ root = true [*] end_of_line = lf insert_final_newline = true charset = utf-8 indent_style = space indent_size = 2 ================================================ FILE: course-website/.eslintrc.json ================================================ { "extends": [ "eslint:recommended", "plugin:import/errors", "plugin:react/recommended", "plugin:jsx-a11y/recommended", "prettier", "prettier/react" ], "rules": { "react/prop-types": 0, "jsx-a11y/label-has-for": 0, "no-console": 1 }, "plugins": ["react", "import", "jsx-a11y"], "parser": "babel-eslint", "parserOptions": { "ecmaVersion": 2018, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "env": { "es6": true, "browser": true, "node": true }, "settings": { "react": { "version": "16.5.2" } } } ================================================ FILE: course-website/.github/workflows/gatsby.yml ================================================ name: Deploy Gatsby Site to GitHub Pages on: push: branches: - master jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@master - name: npm install, build, and csv run: | npm install npm run build npm run csv - name: Deploy site to gh-pages branch uses: alex-page/blazing-fast-gh-pages-deploy@v1.1.0 with: repo-token: ${{ secrets.ACCESS_TOKEN }} site-directory: public ================================================ FILE: course-website/.gitignore ================================================ # Project dependencies # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git node_modules .cache/ # Build directory public/ .DS_Store yarn-error.log ================================================ FILE: course-website/.prettierrc ================================================ {} ================================================ FILE: course-website/LICENSE ================================================ ## creative commons # Attribution-NonCommercial 4.0 International Creative Commons Corporation (“Creative Commons”) is not a law firm and does not provide legal services or legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or other relationship. Creative Commons makes its licenses and related information available on an “as-is” basis. Creative Commons gives no warranties regarding its licenses, any material licensed under their terms and conditions, or any related information. Creative Commons disclaims all liability for damages resulting from their use to the fullest extent possible. ### Using Creative Commons Public Licenses Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights holders may use to share original works of authorship and other material subject to copyright and certain other rights specified in the public license below. The following considerations are for informational purposes only, are not exhaustive, and do not form part of our licenses. * __Considerations for licensors:__ Our public licenses are intended for use by those authorized to give the public permission to use material in ways otherwise restricted by copyright and certain other rights. Our licenses are irrevocable. Licensors should read and understand the terms and conditions of the license they choose before applying it. Licensors should also secure all rights necessary before applying our licenses so that the public can reuse the material as expected. Licensors should clearly mark any material not subject to the license. This includes other CC-licensed material, or material used under an exception or limitation to copyright. [More considerations for licensors](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensors). * __Considerations for the public:__ By using one of our public licenses, a licensor grants the public permission to use the licensed material under specified terms and conditions. If the licensor’s permission is not necessary for any reason–for example, because of any applicable exception or limitation to copyright–then that use is not regulated by the license. Our licenses grant only permissions under copyright and certain other rights that a licensor has authority to grant. Use of the licensed material may still be restricted for other reasons, including because others have copyright or other rights in the material. A licensor may make special requests, such as asking that all changes be marked or described. Although not required by our licenses, you are encouraged to respect those requests where reasonable. [More considerations for the public](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensees). ## Creative Commons Attribution-NonCommercial 4.0 International Public License By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions. ### Section 1 – Definitions. a. __Adapted Material__ means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image. b. __Adapter's License__ means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License. c. __Copyright and Similar Rights__ means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights. d. __Effective Technological Measures__ means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements. e. __Exceptions and Limitations__ means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material. f. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this Public License. g. __Licensed Rights__ means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license. h. __Licensor__ means the individual(s) or entity(ies) granting rights under this Public License. i. __NonCommercial__ means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange. j. __Share__ means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them. k. __Sui Generis Database Rights__ means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world. l. __You__ means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning. ### Section 2 – Scope. a. ___License grant.___ 1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to: A. reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and B. produce, reproduce, and Share Adapted Material for NonCommercial purposes only. 2. __Exceptions and Limitations.__ For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions. 3. __Term.__ The term of this Public License is specified in Section 6(a). 4. __Media and formats; technical modifications allowed.__ The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material. 5. __Downstream recipients.__ A. __Offer from the Licensor – Licensed Material.__ Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License. B. __No downstream restrictions.__ You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material. 6. __No endorsement.__ Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i). b. ___Other rights.___ 1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise. 2. Patent and trademark rights are not licensed under this Public License. 3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes. ### Section 3 – License Conditions. Your exercise of the Licensed Rights is expressly made subject to the following conditions. a. ___Attribution.___ 1. If You Share the Licensed Material (including in modified form), You must: A. retain the following if it is supplied by the Licensor with the Licensed Material: i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated); ii. a copyright notice; iii. a notice that refers to this Public License; iv. a notice that refers to the disclaimer of warranties; v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable; B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License. 2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information. 3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable. 4. If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of the Adapted Material from complying with this Public License. ### Section 4 – Sui Generis Database Rights. Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material: a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database for NonCommercial purposes only; b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material; and c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database. For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights. ### Section 5 – Disclaimer of Warranties and Limitation of Liability. a. __Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.__ b. __To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.__ c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability. ### Section 6 – Term and Termination. a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically. b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates: 1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or 2. upon express reinstatement by the Licensor. For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License. c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License. d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License. ### Section 7 – Other Terms and Conditions. a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed. b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License. ### Section 8 – Interpretation. a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License. b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions. c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor. d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority. > Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply one of its public licenses to material it publishes and in those instances will be considered the “Licensor.” Except for the limited purpose of indicating that material is shared under a Creative Commons public license or as otherwise permitted by the Creative Commons policies published at [creativecommons.org/policies](http://creativecommons.org/policies), Creative Commons does not authorize the use of the trademark “Creative Commons” or any other trademark or logo of Creative Commons without its prior written consent including, without limitation, in connection with any unauthorized modifications to any of its public licenses or any other arrangements, understandings, or agreements concerning use of licensed material. For the avoidance of doubt, this paragraph does not form part of the public licenses. > > Creative Commons may be contacted at creativecommons.org ================================================ FILE: course-website/README.md ================================================

gatsby-course-starter


A Gatsby starter to get you started creating educational materials using Markdown

## Get Started 1. `npm install --global gatsby-cli` - make sure you're on Gatsby v2+ - See [docs here](https://next.gatsbyjs.org/docs/) if you need help 1. `gatsby new course-website https://github.com/btholt/gatsby-course-starter` 1. `cd course-website` 1. `npm run dev` 1. Open http://localhost:8000 in your browser ## Lessons The crux of this site is are the lessons. Provided are two examples. Each lesson needs a [frontmattter](https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/adding-markdown-pages.md#note-on-creating-markdown-files) `path`, `order`, and `title`. Generally you should make the `path` and the file name match for ease of finding it. - `path` - needs a leading slash. This will be slug of the lesson - `title` - will be the title displayed on the Table of Contents and on the page itself - `order` - the order of which the item should appear in the table of contents. should in `` format where the number corresponds to the section it's and the letter corresponds to the order of the lesson inside the section, e.g. `3B` - `section` - the title of the section that the article is in. Only the first lesson for each section will be used. - `description` – a one-to-three sentence summary of the lesson. used for the meta tag for social shares and SEO. if no description is given, the `siteMetadata.description` for the site is used ## Config Inside of `gatsby-config.js` be sure to fill out the `siteMetadata` fields, including `title`, `subtitle`, `description`, and `keywords`. ## GitHub Pages If you do want to deploy to GitHub pages, make sure you add the name of the repo to the `pathPrefix` property in `gatsby-config.js` so that it will correctly make all the links. ## GitHub Actions This site is ready to deployed to GitHub Pages out of the box with GitHub Actions. If you do not want to deploy this to GitHub Pages, delete the `.github` directory. If you do want to deploy this to GitHub Pages with GitHub Actions, you need to do a few things. 1. Create a [personal access token](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line) with rights to read and write to repos. 1. Put that token in your repos secrets. Click the Settings tab and paste your access token in the Secrets tab with the key `ACCESS_TOKEN`. 1. Now once you commit your code, it should automatically deploy your GitHub Pages site should deploy automatically! ## Example Sites - [This repo itself](https://btholt.github.io/gatsby-course-starter/) - [Complete Intro to Containers](https://btholt.github.io/complete-intro-to-containers/) - [Complete Intro to React v5](https://btholt.github.io/complete-intro-to-react-v5/) - [Complete Intro to Web Dev v2](https://btholt.github.io/intro-to-web-dev-v2/) - [Four Semesters of Computer Science in Five Hours Part II](https://btholt.github.io/four-semesters-of-cs-part-two/) ## CSV If you run `npm run csv`, a CSV will be generated with all the various lessons' frontmatter outputted to `public/lessons.csv`. You can change the path by changing the `OUTPUT_CSV_PATH` environment variable. Another CSV will be output to `public/links.csv` where it pull all the links out of each lesson and put them into a CSV. This path can be modified by setting the `LINKS_CSV_PATH` environment variable. ## License The **code** is this repo is licensed under the Apache 2.0 license. I include the CC-BY-NC-4.0 license for the content; this is what I recommend you license your **content** under: anyone can use and share the content but they cannot sell it; only you can. ================================================ FILE: course-website/csv.js ================================================ const fs = require("fs").promises; const path = require("path"); const fm = require("front-matter"); const isUrl = require("is-url-superb"); const parseLinks = require("parse-markdown-links"); const { sorter } = require("./src/util/helpers"); const mdDir = process.env.MARKDOWN_DIR || path.join(__dirname, "lessons/"); const outputPath = process.env.OUTPUT_CSV_PATH || path.join(__dirname, "public/lessons.csv"); const linksOutputPath = process.env.LINKS_CSV_PATH || path.join(__dirname, "public/links.csv"); async function createCsv() { console.log(`making the markdown files into a CSV from ${mdDir}`); // get paths const allFiles = await fs.readdir(mdDir); const files = allFiles.filter(filePath => filePath.endsWith(".md")); // read paths, get buffers const buffers = await Promise.all( files.map(filePath => fs.readFile(path.join(mdDir, filePath))) ); // make buffers strings const contents = buffers.map(content => content.toString()); // make strings objects let frontmatters = contents.map(fm); // find all attribute keys const seenAttributes = new Set(); frontmatters.forEach(item => { Object.keys(item.attributes).forEach(attr => seenAttributes.add(attr)); }); const attributes = Array.from(seenAttributes.values()); if (attributes.includes("order")) { frontmatters = frontmatters.sort(sorter); } // get all data into an array let rows = frontmatters.map(item => { const row = attributes.map(attr => item.attributes[attr] ? JSON.stringify(item.attributes[attr]) : "" ); return row; }); // header row must be first row rows.unshift(attributes); // join into CSV string const csv = rows.map(row => row.join(",")).join("\n"); // write file out await fs.writeFile(outputPath, csv); console.log(`Wrote ${rows.length} rows to ${outputPath}`); // make links csv let longestLength = 0; let linksArray = frontmatters.map(row => { const links = parseLinks(row.body).filter(isUrl); longestLength = longestLength > links.length ? longestLength : links.length; const newRow = [row.attributes.order, row.attributes.title, ...links]; return newRow; }); if (longestLength) { // add title row linksArray = linksArray.map(array => { const lengthToFill = longestLength + 2 - array.length; return array.concat(Array.from({ length: lengthToFill }).fill("")); }); linksArray.unshift( ["order", "title"].concat( Array.from({ length: longestLength }).map((_, index) => `link${index}`) ) ); // join into CSV string const linksCsv = linksArray.map(row => row.join(",")).join("\n"); // write file out await fs.writeFile(linksOutputPath, linksCsv); console.log(`Wrote ${linksArray.length} rows to ${linksOutputPath}`); } } createCsv(); ================================================ FILE: course-website/exercise ================================================ --- path: "/exercise-3" title: "Search and Replace" order: "72A" section: "Search and Replace" description: "Search and Replace!" --- ## Warning DO NOT SAVE WHILE DOING THIS EXERCISE if you do, recurl down this file! ### Basic Search search for `error` by typing `/error` error Lets type a command in. :set hls ic What just happened? Re-search `error` error But you can do more! try searching `/err.*or` errooentuhoneuhnoteuhnotehuor * Notice that it matched a huge portion on top. That is because regexs will match the most it can. ### Search and Replace replace "foo" with "baz" by typing `:s/foo/baz` foo bar baz Try again but notice that it only replaces one foo at a time. foo foo foo foo replace "foo" with "baz" by typing `:s/foo/baz/g` foo foo foo foo replace "foo" with "baz" by typing `:s/foo/baz/gc` foo foo foo foo #### Ranged search & replace ```typescript function foo() { const a = "foo"; const b = [ "foo", "foo", "foo", "foo", ]; if ("foo") { return "foo"; } return "baz"; } ``` #### Full File Lets execute `:%s/foo/bar/gc`, but first exit without saving `:q!` and reopen this file #### But what about full project find and replace I am going to leave this out of this course. ================================================ FILE: course-website/gatsby-config.js ================================================ module.exports = { siteMetadata: { title: "Vim Fundamentals", subtitle: "Making vim approachable!", description: "This is a survey of vim, how it works, and how to become a sensai of vimfu.", keywords: [ "Vim", "Awesome", "Coconut Oil", "ThePrimeagen" ] }, pathPrefix: "/vim-fundamentals", plugins: [ `gatsby-plugin-sharp`, `gatsby-plugin-layout`, { resolve: `gatsby-source-filesystem`, options: { path: `${__dirname}/lessons`, name: "markdown-pages" } }, `gatsby-plugin-react-helmet`, { resolve: `gatsby-transformer-remark`, options: { plugins: [ `gatsby-remark-autolink-headers`, `gatsby-remark-copy-linked-files`, `gatsby-remark-prismjs`, { resolve: `gatsby-remark-images`, options: { maxWidth: 800, linkImagesToOriginal: true, sizeByPixelDensity: false } } ] } } ] }; ================================================ FILE: course-website/gatsby-node.js ================================================ const path = require("path"); exports.createPages = ({ actions, graphql }) => { const { createPage } = actions; const lessonTemplate = path.resolve(`src/templates/lessonTemplate.js`); return graphql(` { allMarkdownRemark( sort: { order: DESC, fields: [frontmatter___order] } limit: 1000 ) { edges { node { excerpt(pruneLength: 250) html id frontmatter { order path title } } } } } `).then(result => { if (result.errors) { return Promise.reject(result.errors); } result.data.allMarkdownRemark.edges.forEach(({ node }) => { createPage({ path: node.frontmatter.path, component: lessonTemplate }); }); }); }; ================================================ FILE: course-website/lessons/adv-pitstop.md ================================================ --- path: "/adv-pit-stop" title: "Pit Stop" order: "53A" section: "Advanced Text Manipulation" description: "There has been a lot of info. Lets recap!" --- ### The Recap Recap #### Basic Movements #### File Navigation #### Vim RC ### Moving forward We are going to step it up a notch and improve our knowledge of vim Motions. Here is the deal. You don't need to remember them all. You need to know they exist. As you get more familiar the motions and concepts that seem hard today are trivial tomorrow. ================================================ FILE: course-website/lessons/advanced-movements-1.md ================================================ --- path: "/adv-motions" title: "Advanced Motions" order: "54A" section: "Advanced Text Manipulation" description: "And you thawght you knew Motions..." --- We have already covered some of the horizontal and vertical motions, `I`/`A` and `j`/`k` are great examples of fast motions. But if that is all we had, VIM would just be lacking in luster. ### Quick Recap Motion: A command that moves the cursor. * modified with a count * 5j instead of jjjjj * modify an "action" with a movement * 5dd and d4j are "equivalent" ### There are more motions! * G and gg bottom or top respectively * do you think you can dG? lets do an exercise and go over some advanced motions! #### Example time ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-6-motions.md > exercise.md && vim exercise.md ``` ================================================ FILE: course-website/lessons/advanced-text-manipulation-1.md ================================================ --- path: "/search-and-replace" title: "Search And Replace" order: "50A" section: "Advanced Text Manipulation" description: "Search and replace. Regex licences may be required." --- Were are getting to the end game of vim. There is still so much out there, but for the sake of surveying, this is where we will end. We will cover Search and Replace, Macros, and finally registers. ### Search and Replace Lets go through a search and replace exercise. This should help us get the foundation of basic search and replace ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-3-search-and-replace.md > exercise.md && vim exercise.md ``` ================================================ FILE: course-website/lessons/advanced-text-manipulation-2.md ================================================ --- path: "/macros" title: "Macros" order: "51A" section: "Advanced Text Manipulation" description: "Macros. Yes, they seem more confusing than they are." --- This is where things can get fun. Also, they are a bit psychologically weird... Meaning, you will find yourself feeling like you don't know how to do the most basic of moves. If this happens, its ok. Its called Macro Pressure. ### What is a Macro A macro simply plays text as motions, inputs, and commands. #### Let me show you! I remember my first macro like it was yesterday..... #### Example time ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-4-macros.md > exercise.md && vim exercise.md ``` ================================================ FILE: course-website/lessons/advanced-text-manipulation-3.md ================================================ --- path: "/registers" title: "Registers" order: "52A" section: "Advanced Text Manipulation" description: "Registers. Definitely hard to imagine them not being hard." --- ### My slogan for registers > Definitely hard to imagine them not being hard. ### What is a register? It is a key -> value The `key` is a character The `value` is a string #### Example time ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-5-registers.md > exercise.md && vim exercise.md ``` ================================================ FILE: course-website/lessons/are-you-ready.md ================================================ --- path: "/are-you-ready" title: "Are You Ready?" order: "3A" description: "The final hurrah! before diving into vim!" section: "Introduction" --- At this point I hope you are ready. But I wanted to take a moment to let you know three things. * This is a journey, its not a day trip * The journey is uphill * The top of the mountain is incredible ### For the live class I stream on twitch, so feel free to ask questions at any point and I can pivot if its beneficial for all or I'll answer the question at the end of the section. ### Proper Github projects 1. Clone this presentation project down and open up the files, or go to the website and use the curl commands to open up vim. I recommend just going to the website. [Vim Fundamentals](theprimeagen.github.io/vim-fundamentals) 2. git clone https://github.com/ThePrimeagen/vim-nav-playground.git ### Clean your environment If you use vim, remove your vimrc and any plugins. We are going bare bones and working our way up. There is a basic script to stash and restore your vim env in vim-nav-playground in the tools folder. ================================================ FILE: course-website/lessons/basic-usage.md ================================================ --- path: "/basic-usage" title: "Using Vim" order: "5A" description: "Let's use vim for the first time!" section: "Basics" --- Before we start editing files, lets get familiar with some basic movements. Navigate back to the empty directory and type in the following. ```bash > vim test.js ``` You are now in `NORMAL` mode. This probably doesn't feel all that normal. And you are right, its really not that normal. ## Lets talk Modes There are a few modes that you should be aware of. * Normal * Insert * Visual * Visual Line ## My First If Statement Lets write our first if statement. Currently, you are in `NORMAL` mode. This is where you can execute commands to navigate, edit, and execute vim/sys commands. To get out of this mode, press `i` After pressing `i` you should see something like `-- INSERT --` in the bottom left hand side of vim. Now that you are in insert mode, type the following ```js if (true) { } ``` Press `` or `` (abbreviated ``) to leave `INSERT` mode and back to `NORMAL`. Goodness, isn't default vim ugly? type `:q` to quit vim. Also, don't tell anyone. ## My First Moves ### Basic navigation time to curl down our first little exercise ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-0-hjkl-x.md > exercise.md && vim exercise.md ``` ### Deleting, Yanking, and Pasting These are going to be some of your fundamental movements within vim. This is where you will see some significant speed ups compared to a conventional editor. ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-1-dyp.md > exercise.md && vim exercise.md ``` ### Insert! We are going to go over entering into insert mode ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-2-insert.md > exercise.md && vim exercise.md ``` ## Recap Lets talk about what happened. I would love to get some feedback from you. What do you think about all of this nonsense? Does it seem like to much? Or does it seem exciting? I hope you are excited. ### We learned * h,j,k,l for basic movement. * w,b for word hopping. Effectively the same as Option/Ctrl + arrow keys * yy to "copy" a line, called Yank * dd to delete, and yank, a line * p and P to paste the contents of the implicit register below / above * Most of the ways to go into insert mode! * i and a for which side of the cursor * I and A for which side of the line * o and O for belowe / above line * zz - I snuck that one in... That is a grand total of 16 different motions ================================================ FILE: course-website/lessons/color-my-pencils.md ================================================ --- path: "/color-my-pencils" title: "Color My Pencils" order: "10A" description: "Lets set some colorschemes" section: "The VimRC" --- So to change your `colorscheme` what should you do? If you answered "Help Menu!" you are a fantastic! Please execute `h: colorsc` try executing the following ``` :colorscheme ``` Pick anything that autocompletes! Much like set options, it will only persist for this vim session. Writing it to your vimrc and open up file you commonly edit and behold the beauty! These are not the only colorschemes that you can have. Plenty of plugins provide many more. ## Recap Ok. This is probably getting a bit overwhelming. A lot of this comes with practice and as you use this it becomes second nature. I'll say it again. * This is a journey, its not a day trip * The journey is uphill * The top of the mountain is incredible ### What we learned * Using the help menu. * navigating the all the set options. * Using tab and * Arrows vs and * Set options * The power to control how our editor operates through sets. * Colorschemes * How to set them and peruse them. * We learned things about motions. * dd can become dd * Moving with 10j / 10k. Wowow ### Extend it Do you think you could do anything with `y` and `p`? Could `yj` work? What does it do? Why? What about `5p`? What do you think happens? Why? ### Foundation We have built the foundation. You know about customizing your vim experience and you know how to basically move around. The only thing left is really optimizing! And there is practically an infinite amount of optimizing! ================================================ FILE: course-website/lessons/exercise-0-hjkl-x.md ================================================ --- path: "/exercise-0" title: "hjkl-x" order: "69A" section: "Misc Content" description: "This is the first exercise to try out." --- ## NOTE To use the exercises, please curl the file to your machine and edit it with vim. ## Exercise 0: Basic movement, h, j, k, l, w, b ### press j to go down ### press l to follow the line ---------------------------o " press x to delete the o " press j to go to the next action ### press l and j to follow the line and x to delete the o -+ | | +------+ | | +------+ | | +------o ### press l and j and h to follow the line and x to delete the o -+ | | +------+ | | +------+ | +------+ | | o------+ ### press l, j, h, and k to follow the line and x to delete the o -+ +------+ +------+ +-----o | | | | | | | | | | | | +------+ | | +------+ | | +------+ | | | | | | | +-------------+ ### press w to get to o and press x to delete +-+ +------+ +------+ +-----o ### b = inverse w: press w, j, and b to get to o and press x to delete +-+ +------+ +------+ +-----+ | o-+ +------+ +------+ +-----+ ### Go in circles until you feel good +------+ | | | | | | +------+------+ | | | | | | +------+ ================================================ FILE: course-website/lessons/exercise-1-dyp.md ================================================ --- path: "/exercise-1" title: "dyp" order: "70A" section: "Misc Content" description: "This is the basic movement and editing of text" --- ## NOTE To use the exercises, please curl the file to your machine and edit it with vim. ## Exercise 1: Basic Editing ### Delete a line with dd delete me 1 delete me 2 delete me 3 delete me 4 ### Yank and paste. yy to yank line, p to paste line below, P above yank me and paste below (yyp) yank me and paste above (yyP) ### Visual Mode #### Visual Mode Highlight part of this line by pressing v, then navigate around escape to leave visual mode #### Visual Line Mode Highlight this line by pressing V, then navigate around escape to leave visual mode #### Visual Mode + y / p Highlight this line by pressing V, then press y (What happened?) press p (What happened?) Highlight this point by pressing v, press wy (What happened?) press p (What happened?) Lets repeat but with d instead of y, (What happened?) ## Part 3: The relationship of y / d :h reg :reg What did we see there? yank this line What happened to the registers? ================================================ FILE: course-website/lessons/exercise-2-insert.md ================================================ --- path: "/exercise-2" title: "insert" order: "71A" section: "Misc Content" description: "Insertion! There are many ways to go into INSERT mode." --- ## Exercise 2: Insert mode There are a few ways to go into insert mode (I also am not including about another 10...) i: left side of cursor a: right side of cursor ----I: A: ----- o: insert new line below line and go into insert mode O: insert new line above line and go into insert mode lets play around ================================================ FILE: course-website/lessons/exercise-3-search-and-replace.md ================================================ --- path: "/exercise-3" title: "Search and Replace" order: "72A" section: "Misc Content" description: "Search and Replace!" --- ### Basic Search search for `error` by typing `/error` error Lets type a command in. :set hls ic What just happened? Re-search `error` error But you can do more! try searching `/err.*or` errooentuhoneuhnoteuhnotehuor * Notice that it matched a huge portion on top. That is because regexs will match the most it can. ### Search and Replace replace "foo" with "baz" by typing `:s/foo/baz` foo bar baz Try again but notice that it only replaces one foo at a time. foo foo foo foo replace "foo" with "baz" by typing `:s/foo/baz/g` foo foo foo foo replace "foo" with "baz" by typing `:s/foo/baz/gc` foo foo foo foo #### Ranged search & replace ```typescript function foo() { const a = "foo"; const b = [ "foo", "foo", "foo", "foo", ]; if ("foo") { return "foo"; } return "baz"; } ``` #### Full File Lets execute `:%s/foo/bar/gc`, but first exit without saving `:q!` and reopen this file #### But what about full project find and replace I am going to leave this out of this course. ================================================ FILE: course-website/lessons/exercise-4-macros.md ================================================ --- path: "/exercise-4" title: "Macros" order: "73A" section: "Misc Content" description: "Macros" --- // Yes I wrote this code with a macro if (someValue == "someOtherValue1") { return 1 } else if (someValue == "someOtherValue2") { return 2 } else if (someValue == "someOtherValue3") { return 3 } else if (someValue == "someOtherValue4") { return 4 } else if (someValue == "someOtherValue5") { return 5 } else if (someValue == "someOtherValue6") { return 6 } else if (someValue == "someOtherValue7") { return 7 } else if (someValue == "someOtherValue8") { return 8 } else if (someValue == "someOtherValue9") { return 9 } else if (someValue == "someOtherValue10") { return 10 } else if (someValue == "someOtherValue11") { return 11 } else if (someValue == "someOtherValue12") { return 12 } else if (someValue == "someOtherValue13") { return 13 } else if (someValue == "someOtherValue14") { return 14 } else if (someValue == "someOtherValue15") { return 15 } else if (someValue == "someOtherValue16") { return 16 } else if (someValue == "someOtherValue17") { return 17 } else if (someValue == "someOtherValue18") { return 18 } ================================================ FILE: course-website/lessons/exercise-5-registers.md ================================================ --- path: "/exercise-5" title: "Registers" order: "74A" section: "Misc Content" description: "Registers. Definitely hard to imagine them not being hard." --- ### Register Basics So lets copy the following line foo Now type in :reg Notice that `foo` appears two times. We are seeing foo twice because `foo` is in our first register and our implicit register. Our first register is denoted with 0 (0th may be better term) and implicit is ". Paste with `p` 3 times foo foo foo highlight and yank all three `foo`s. Lets resee what is in our `:reg`. Notice that we replaced our implicit register and our 0th register. Why didnt 0 become 1? Go back up to a line with foo and delete 1. What just happened? Inspect your `:reg` Delete a few more lines and re-inspect your register. What you should observe, and can be found in `:h reg` is that your implicit register `"` is _always_ the latest yank or delete. It is also what is used when pasting. We _knew_ this from our previous lesson, but now we observe why. ### How do we interact with registers? We see how our actions are side effects to the state of the registers. But what if you wanted to paste or yank explicitly? Good thing we have a clue. Notice that every register starts with `"`. Lets `:h "` So lets yank into our `a` register. Move to the line below and type `V"ay` foofoofoo Now lets inspect our registers. How do we paste from a register? ### Lets do something crazy Copy, paste, and increment the number below 3 times using a macro 1. Now lets check registers. What do you see? Is your mind blown? What does this mean we can do? ================================================ FILE: course-website/lessons/exercise-6-motions.md ================================================ --- path: "/exercise-6" title: "Advanced Motions" order: "75A" section: "Misc Content" description: "Motions 201" --- ### Change `c` is a powerful motion. You use it just like `d` but at the end of the motion you are ejected from `NORMAL` and into `INSERT`. So if you wished to delete a word and then type in a new word, `c` is a great habit to form. Lets see the difference // dd this line // cc this line ### Horizontal Movement Lets learn about!: `_`, `0`, `$`, `D`, `C`, `S`, `f`, `,`, `;`, `t`, `F`, and `T` // How would we move around on the line with "contents" if (true) { contents conTenTs contenTS } ### Vertical Movement #### Core movement Rely on relative jumps. Get good at them. If you get NeoVim, try VimBeGood #### { and } We know about search. That is a vertical movement, but its really specific. First lets talk `{` and `}` ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ##### Benefits? Class chat This next one is a bit odd #### Ctrl+u/d So lets do another type of navigation. Try pressing `` . . . . . . . . . . . . . . . . . . . . . . . . . ##### Benefits? Class chat #### [m / ]m and [M / ]M This will move by "function". It works pretty well in c languages. Move your cusor to this line and press `]m`. Try moving back and forth and try the uppercase version as well. if (foo) { some content some content some content some content function bar() { some other content some other content some other content some other content } function baz() { other content other content other content other content } } ##### Benefits? #### % Ok,.... soo this isn't a pure vertical motion. It actually is a pair jumper if (true) { content const a = [ content, content, content, ] "content" content content } Lets combine it with a motion. Delete the `const a =...` statement. ### Get zany... Lets look at the following statement, what are some ways you can delete the contents of the if statement? if (true) { line1 line2 line3 line4 line5 } I was hoping to hear `f{V%D`. That is just so sexy. `d4j` is ok. Relative jump, well done.. `5dd` meh. I would glad hand like a politician with `dd dd dd dd dd`. Just say mean things behind your back. So lets try again.. but I spiced it up. if (true) { line1 // Some distance line2 line3 line4 line5 } First, place your cursor _in_ the if statement. Where ever you want. Type `di{` i = inside #### Class Discussion What _other_ letter do you think you could try other than `i`? . . . . . . . use `` to go down... . . . . . . . . . . . . . . . . . // TODO: make a meme -- aliens.. Yes, `a` is the other. I have never heard a great reason why, but just deal with it. so lets try again. try `da{` if (true) { line1 // Some distance line2 line3 line4 line5 } well shoot... #### Class Discussion Lets solve this together if (true) { line1 // Some distance line2 line3 line4 line5 } . . . . . . . . . . For those that couldn't wait or got the answer. `va{Vd` #### Use YOUR SUPER POWERS lets redo the previous exercise except copy from one if statement and override the next if statement. How would we go about this? if (true) { line1 // Some distance line2 line3 line4 line5 } if (true) { replace_me_1 // Some distance replace_me_2 replace_me_3 replace_me_4 replace_me_5 } ================================================ FILE: course-website/lessons/files-e.md ================================================ --- path: "/files-e" title: "Files and Navigations - Edit" order: "15A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files with e." --- There are other ways to open files in vim. You are not restricted to just using the file tree. There is also `:e`. `e` is short for `edit`. Lets explore! You can always read the help menu, `:h e` but we don't need to do that! Lets reopen back up our `vim-nav-playground` project. lets type `:e `. You should see the following ![Edit and Ctrl+D](lessons/images/edit-ctrl-d.png) There is also tab completion! Try it out. `:e `. But how do we navigate the popup list? Well there are two options. There is the vim way, and the default way that most people would do. I bet you can guess which one you already know... :) Anywho, arrow keys work, but eww. `` (Ctrl+p, remember this is vim syntax). and `` mean previous and next respectively. ### Fuzzy find anyone? Yes, please! Of course there is a fuzzy finder, but those are installed as plugins. We are not quite there, so let me just show you one of them. It is called `telescope.nvim` and is available on neovim only. It has an absurd amount of features. I'll only show the fuzzy file finder. ================================================ FILE: course-website/lessons/files-intro.md ================================================ --- path: "/files" title: "Files and Navigations" order: "11A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files." --- As you imagined there is the "Vim" way to do everything. But the good news is that there are many a plugin to make this process easier. Lets start off by learning some built in vim ways and then expand from there. First, lets clone a small test repo ssh ```bash git clone git@github.com:ThePrimeagen/vim-nav-playground.git ``` https ```bash git clone https://github.com/ThePrimeagen/vim-nav-playground.git ``` navigate to `vim-nav-playground` and open up vim by opening up the directory in vim. ```bash cd vim-nav-playground vim . ``` This should be what you are seeing (bar the colorscheme) ![NetRW](./images/netrw.png) ================================================ FILE: course-website/lessons/files-marks.md ================================================ --- path: "/files-marks" title: "Files and Navigations - Marks" order: "16A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files with marks." --- ## Marks Now marks are both incredible and also confusing at the same. Effectively vim gives you the ability to mark files both globally and locally. This means with just a swift couple taps of the finger you could be in a file marked. I find marks definitely the end game of file navigation, but they are hard to do well. So lets open up 3 files in `vim-nav-playground` and mark each one. First lets open one file, `src/sockets.c`. Use your favorite way to open up this file. ``` :e src/sockets.c ``` Then mark it by typing `m` then an **uppercase** character of your choice. Repeat with `src/twitch.c` and `src/another.c` with different uppercase characters. Remember the 3 characters you chose. To navigate to the files you marked simply press `'`. So for me, I chose `G` for `sockets.c`, and to navigate there I simply press `'G`. ### Some mark theory * What marks did you choose? * Why? * Do you see some strategies? * Strategies I have heard of * My strategies ================================================ FILE: course-website/lessons/files-netrw.md ================================================ --- path: "/files-netrw" title: "Files and Navigations - NetRW" order: "12A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files with NetRW." --- NetRW is the default browsing of the filesystem plugin, and it comes with vim for years now. It is available in both Vim and NeoVim. Please navigate to `vim-nav-playground`. If you did not clone it, it can be found [here](https://github.com/ThePrimeagen/vim-nav-playground) Lets go over some basic movements. You can use all the same navigation as you would while editing, but for file navigation. ```viml vim . ``` Lets go down, `j`, to `src` and press `` (enter). Notice that it opens the folder. We see a couple of files. Lets scroll to `twitch.c` and press ``. What just happened? How do we open back up our file navigation? ```viml :Vex ``` `:Vex` stands for (V)ertical (ex)plore. Meaning, split the current view experience vertically (direction of line) and insert a netrw at current buffer location. This is pretty - ok -. Hopefully, if you are of the vim mentality, you are thinking it cannot take this many keystrokes just to do these things. I must be able to customize the netrw experience. The answer, of course, is yes to both. Lets step up our vim knowledge. ================================================ FILE: course-website/lessons/files-recap.md ================================================ --- path: "/files-recap" title: "Files and Navigations - Recap" order: "17A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files with e." --- ### Recap Wow we have learned a lot! Lets chat about what we have learned. * NetRW * `:e` * `` and `` * `` and `` for navigating pop-up lists * remaps * marks * :Vex * so % * more on %. try typing `:echo expand("%")` Or `"%p` What happened here? How are we feeling? Do you feel like you have no more room to learn? I get that we are sort of on information overload. Lets take a break and just talk about what we have learned overall. ### One more thing. Alternate File I don't think I accidentally talk about this elsewhere. ### One more thing. Jumplist I don't think I accidentally talk about this elsewhere. ================================================ FILE: course-website/lessons/files-remaps-1.md ================================================ --- path: "/files-remaps-1" title: "Files and Navigations - Remaps part 1" order: "13A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files with NetRW." --- First, lets quit our current vim experience and re-open up our vimrc. ```bash # for vim vim ~/.vimrc ``` ```bash # for neovim - this may be different depending on your flavor vim ~/.config/nvim/init.vim ``` If your path is different for neovim but you don't know what it is, execute the following in neovim to expose the path!!! ```viml " Neovim only :echo stdpath("config") ``` If you didn't save everything from the vim rc section, here is the complete vimrc thus far from [Vim My Way](/vim-my-way) and [Color My Pencils](/color-my-pencils). ```viml set scrolloff=8 set number set relativenumber set tabstop=4 softtabstop=4 set shiftwidth=4 set expandtab set smartindent " This was from the colorscheme section colorscheme desert ``` ================================================ FILE: course-website/lessons/files-remaps-2.md ================================================ --- path: "/files-remaps-2" title: "Files and Navigations - Remaps part 2" order: "14A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files with NetRW." --- ### Remaps Remaps are a powerful way to redefine your vim exerience the way you would like it. In your vim rc, add the following line ```viml let mapleader = " " nnoremap pv :Vex ``` First, what is `let mapleader = " "`. Leader is a way to set a custom key in vim that can be referenced in remaps as ``. Second, what is `nnoremap`? Well its the syntax for a remap. Lets break it down ```viml mode lhs rhs ``` #### mode lets go over the meaning of the mode. The mode is what mode (INSERT, NORMAL, VISUAL) that this remap should work in. Here is the exact breakdown of the remap. ```viml " normal mode no recursive execution map A -> B n nore map ``` #### lhs lhs is the set of keys to execute the remap. In this case `pv` or `pv`. #### rhs rhs is the command to execute after the `lhs` has been typed in. In this case we will type the command `:Vex`. Remember, `` means enter. #### Lets execute it! Ok, press `pv`, did anything happen? No, why not? Of course! Vim never executed these new changes. Lets source the file. ```viml " so = source " % = current file :so % ``` Now lets try again! did anything happen? #### Dangers of remaps It can make your system feel slow.. #### Exercise time Sourcing the vimrc kind of stinks huh? Could we remap this? Take a shot at remapping it. ```viml " I use neovim, btw nnoremap :so ~/.config/nvim/init.vim ``` Now I can simply press `` to resource my vim rc anytime I make changes. ================================================ FILE: course-website/lessons/first-plugin.md ================================================ --- path: "/your-first-plugin" title: "First Plugin" order: "60A" section: "Your First Plugin" description: "Time to learn viml." --- So... before we get started. I hate VimL. I think its gross. Its Ugly. Its all around unpleasant to write. This is the primary reason why I use NeoVim, not Vim. I can write my plugins in Lua. Lua is not bad. Its a simple language that is extremely boring, which makes it a great candidate for a scripting language of simple ui elements. --- This is meant to show you the power of Vim and its scriptability. As said, its better in Lua. We are going to walk through [Writing Vim Plugin By Łukasz Jan Niemier](https://vimways.org/2019/writing-vim-plugin/). ### Remember your VimRC? Start by executing `:h runtimepath` We need to add to the runtime path a directory to be loaded and it should contain a folder called `plugin` where we have our plugin located. ``` mkdir -p /path/to/your/plugin/folder cd /path/to/your/plugin/folder vim --cmd "set rtp+=$(pwd)" . ``` We have opened up vim and added to the runtime path at opening our current folder. This is _a_ way to do this. You can also install your plugin like any other! ``` ... In your vim rc, next to fzf ... Plug '/absolute/path/to/plugin/folder' ``` But while we are developing, we don't have to have it in either, we can just execute `:so %` (much like we did in our vim rc). #### Follow along! I'll create it now and you can follow along, PLEASE ASK QUESTIONS. ================================================ FILE: course-website/lessons/intro.md ================================================ --- path: "/intro" title: "Introduction" order: "1A" section: "Introduction" description: "The gentle introduction into vim that will blow your mind and cover you in coconut oil." --- ### Motivation Often its the little choices in our lives. ### Welcome to Vim #### But first, lets meet ED ```bash > ed my-file.ts ``` You probably feel lost, press q to get the heck out of there. (on FEM I do some actual editing) Lets do it once more, but with ex ```bash ex my-file.ts ``` ex is the improved version of ed. It also comes with Bill Joy's vi mode. Go ahead, type `vi`. Welcome to vi! The predecessor of vim. :q to get out. Some fun facts about vi mode in ex. * Was originally written by a single person, Bill Joy, in 1976. * Ram was < 1k * Emacs cost $100s. Yikes ![Emacs Leraning Curve](./images/emacs-learning.png) * hjkl are movement keys because of Bill Joy's keyboard, which apparently was the only ever made... ![Bill Joys Keyboard](./images/bill-joys-keyboard.jpeg) * Bill Joy's words of wisdom * "People don't know that vi was written for a world that doesn't exist anymore" * vi was written to edit text with a 300 buad modem. ## Why do I use vim? I think I am a lot like you. I used netbeans. I was just a regular student doing regular java binary searches in Netbeans. One time I opened up vim at the encouragement of my friend... ![When I Exit Vim](./images/exit-vim.png) I saw someone at some point use vim/emacs and it blew my mind. I wanted to be good the command line. I wanted to be fast. I wanted to be covered in that sweet organic, grass fed, free range coconut oil! So I took the journey. I started in IntelliJ with ideaVim! It was painful. I am not going to lie, I almost gave up after one hour and I accomplished nothing but being frustrated. ![Vim Learning Curve](./images/vi-learning.png) But then I decided that I was going to master the simple movements and start mastering each movement one at a time until I was the best there was. Lets get started on this journey together. Lets get vimmed out of our mind. By the end of this course, hopefully you will understand what in the world coconut oil has to do with vim. Personal note. The love of the thing and Dante. ## Set Expectations You may feel confused, so ask questions. ## Who Am I? * I make youtube videos about Vim * I stream on twitch * NeoVim Plugins * Vim Deathmatch. A battle royale like vim plugin to battle for fastest vim editing skallz (lua + docker) * Sonic Pi. Creating live beats with the help of chat. (python + ncurses + docker) * Coding for Netflix (typescript) * I work at Netflix ## Who should take this course * A (want to be) developer * Desire to be excellent and to learn * You wish to defeat complacency ## Prereqs * Unix System as I cannot help you if you are on windows and you experience and problems. I suggest Plebuntu * typing skills will directly affect your experience. * `git clone https://github.com/ThePrimeagen/vim-nav-playground.git` ## Flavors of vim * VIM - Vi IMproved * 8.1+ * NeoVim (I personally use this, wont go over anything neovim specific) * spacevim * https://spacevim.org/ * onivim2 * https://onivim.io/ ## Learning Vim * vimtutor * vim-adventures * [ThePrimeagen](https://youtube.com/ThePrimeagen)'s Youtube * 6 part series * Learning lua plugin dev * VimRC * `:h usr` ================================================ FILE: course-website/lessons/mid-level-recap.md ================================================ --- path: "/pit-stop" title: "Pit Stop" order: "20A" section: "Recap" description: "There has been a lot of info. Lets recap!" --- ### The Recap Recap #### Navigation * What are some questions and thoughts? * What do you think is the hardest part? * What part surprised you the most? * How do you feel about modes? * Do you feel that deep down excitement? * You may not know this yet, but there is some really amazing keys coming up. #### Vim RC * You only know a little bit, how will you go about improving it? * Do they feel confusing? * Does VimL look ugly (its ok, it does)? #### File Navgiation * There are tons of options * Marks are pretty OP * File tree is a bit lacking. * That telescope fuzzy finder though, huh? ================================================ FILE: course-website/lessons/my-ideal.md ================================================ --- path: "/my-ideal-setup" title: "My Ideal Setup" order: "61A" section: "My Pontifications About Vim" description: "Lets just talk shop" --- ### Saddle up partner #### How I Ideally Like to Use Vim #### Breaking up VimRC Moar? #### My Ideal File Navigation #### NeoVim Init With Lua? #### How I determine my remaps? ================================================ FILE: course-website/lessons/opening-vim.md ================================================ --- path: "/opening-vim" title: "Opening Vim" order: "4A" description: "Lets open vim for the first time!" section: "Basics" --- ## Before you do * Navigate to an empty directory (create your own). We will be doing a bit of editing. * Ensure you have no vim rc active. * If you are using vim, rename ~/.vimrc -> ~/.vimrc2 * If you are using nvim, rename ~/.config/nvim/init.vim -> ~/.config/nvim/init.vim2 ### Exercises We will be using curl to grab a few exercises throughout this class. Here is an example. #### Note Notice that i name the downloaded file then `&& vim name` ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-0-hjkl-x.md > exercise.md && vim exercise.md ``` ## One more thing before we start We are going to start from when Adam met Eve. So if you have some experience you can probably skip the next couple sections. There is always valuable information that may not know, but it may not be worth the time. When I started, vim motions were chief most important, not vim itself. This course will reverse that. Vim will be the spot light, motions will actually take a backseat. I will show you what is available though. ## Lets open vim! So you are in an empty directory, lets do this! Simply type `vim` and press enter. (Ensure you have no vim rc) ```bash > vim ``` * What are you thoughts? * What are things you expected to see? ================================================ FILE: course-website/lessons/plugins.md ================================================ --- path: "/plugins" title: "Plugins" order: "30A" section: "Plugins" description: "Lets beef up the RC!" --- Plugins! Yes vim does get better. Yes, that not so pretty language VimL is a primary vehicle in making things nice. In NeoVim you can use Lua, which is quite nice. Especially when you consider that there is a Typescript -> lua converter. Which means you can use a typed language and get type completion and create vim plugins. 42069IQ ### Get a Plugin Manager Plug! Lets follow the instructions together getting [Plug](https://github.com/junegunn/vim-plug) vim plugin manager installed ``` ... plays waiting music ... ``` ### File Navigation 2.0 Let's add a fuzzy finder, remap some things, and make it work for us. We are going to use FZF even though I Use telescope personally. The reason for this is because Telescope is neovim specific (lua) and wont work with Vim. Where as FZF has been working for some time with vim. Lets add the following lines to your vimrc ```viml call plug#begin('~/.vim/plugged') Plug 'junegunn/fzf', { 'do': { -> fzf#install() } } Plug 'junegunn/fzf.vim' call plug#end() ``` Our vimrc should look something like the following. ```viml set scrolloff=8 set number set relativenumber set tabstop=4 softtabstop=4 set shiftwidth=4 set expandtab set smartindent call plug#begin('~/.vim/plugged') Plug 'junegunn/fzf', { 'do': { -> fzf#install() } } Plug 'junegunn/fzf.vim' call plug#end() " This was from the colorscheme section colorscheme desert " Our remaps let mapleader = " " nnoremap pv :Vex nnoremap :so ~/.config/nvim/init.vim ``` Lets source our vimrc ```viml " or use your sweet remap :so % ``` Now we need to execute our plugin manager. ```viml :PlugInstall ``` ### WARNING ### My Vim Colorscheme is just a default one, its ugly Once you do this you should see the following menu ![Plug Result](./images/plug-install.png) Now we can execute `:GFiles`, lets give it a try in `vim-nav-playground`. ![FZF Result](./images/fzf-results.png) ### WHAT HAVE I TAUGHT YOU? What should we do now? * M A K E _ A _ R E M A P ```viml nnoremap :GFiles ``` ### Lets get a better colorscheme. ayu or gruvbox?? ### Recap * We got a plugin manager that makes installing plugins easy! You just need the path on github to install new ones. * We installed FZF, made a remap! then showed how awesome it is. ================================================ FILE: course-website/lessons/quickfix.md ================================================ --- path: "/quickfix" title: "Quickfix Intro" order: "40A" section: "Quickfix Lists" description: "One of the last components of the vim experience." --- Quickfix lists were very mysterious to me when I started with vim. I knew that there was a list of items and that it would pop up and if I left them I didn't know how to go back. Little did I know how useful they are, especially when navigating histories, such as git. Lets create a quick quickfix open up vim in the root of `vim-nav-playground` ```bash vim . ``` now execute ```viml :grep SOCKET_OPEN **/*.(c\|h) ``` You should see something like this: ![QuickFix Result](images/quickfix-grep-result.png) Once you press `` you will see that the results disappear and you are navigated to the first result. What should you do? The proper answer is consult the `:h quickfix` page, but since I am here, let me walk you through some actions. When dealing with a quickfix you need 3 commands primarily, `:copen`, `:cnext`, and `:cprev`. Lets try `:copen` first. Once you have executed it you should see the following. ![QuickFix Open](images/quickfix-open.png) Lets select the other option. This will cause the above buffer to navigate and the quickfix list will remain open. Oh no, how do we get back to the quickfix list? you could navigate back by executing a copen ```viml :copen ``` you could force navigate back by closing the current window. There is nothing left but going back to the remaining buffer that is open. ```viml :q ``` You can window navigate. You can start a window navigation by pressing ``. What do you think you should press next to navigate towards the quickfix menu? If you said `j` you are awesome. YES! Use your vim movements you already know! Don't you love when things come full circle! Anywho, so you can guess you can move betwixt splits by press `` and `h`, `j`, `k`, or `l`. This is great, but it kind of sucks. ### WHAT DO WE DO NOW??? If I have to say make a remap one more time. ```viml " I don't know if I love these remaps yet. I am considering doing " c(k|j|o) nnoremap :cnext nnoremap :cprev nnoremap :copen ``` ### No Internet ordering problem When practicing this presentation I kept finding myself having a problem. I didn't want to have to keep compiling and using `npm run dev`. But I wanted to practice through my presentation in order. For the most part I just dealt with it and booted everything up. But on the flight here I was unable to load the pages due to internet requirements. But!!! I could solve the ordering issue via qflist. #### getqflist and setqflist ================================================ FILE: course-website/lessons/some-javascript.md ================================================ --- path: "/some-javascript" title: "some javascript" order: "72A" section: "Misc Content" description: "This is the first exercise to try out." --- // Delete the description. // That seems slow right? // Delete // try typing, with your cursor on the first line the following. // 7dd // What does that mean about j and k? // But we have a problem down we? function foo(a, b, c) { switch (a) { case 1: return b + c; break; default: return a * b + c; } throw new Error("This should never happen"); } if (true) { console.log(foo(1, 5, 7)); } if (false) { console.log(foo(1, 5, 7)); } if (false || true) { console.log(foo(1, 5, 7)); } foo( foo(1), foo(2), foo(3)) foo( foo(4), foo(5), foo(6)) foo( foo(7), foo(8), foo(9)) ================================================ FILE: course-website/lessons/terminology.md ================================================ --- path: "/terms" title: "The Terminology" order: "2A" description: "This goes over some basic vocabulary that will be used" section: "Introduction" --- ## Files, Buffers, Windows, Splits, and Tabs We all know what files are (or so you think [LiveOverflow's Video on Files](https://www.youtube.com/watch?v=VVdmmN0su6E)) but there is a bit more when it comes to how vim handles them. ### Buffer A buffer contains the text of the file and is what you edit. `:h buffer` ### Window Contains a buffer to display. Windows can be closed but the underlying buffer can remain in memory. `:h window` ### Tabs A tab is like another viewport. You can have many windows|splits open per tab. `:h tab` ### Splits A split simply refers to splitting the viewport in N sections (various sizing and orientations available) to display windows. `:h split` ## Other Terminology ![Terms](./images/view-and-terms.png) ## Help Menu Help menu can be accessed by typing `:h`. There is _so much documentation_, that is pretty good, available. If you find yourself lost, RTFM (at least that is what they tell me). ## Motion A command that moves the cursor (taken straight from the help docs, `:h motion`). ## Abbreviations Ctrl+a will be abbreviated ``. This is also how its referenced in VimL, Vim's editor language. Enter will often be abbr as `` Tab, Escape, and space will be ``, ``, `` When you see something that starts with a `:` that means it will execute a command. ================================================ FILE: course-website/lessons/vim-my-way.md ================================================ --- path: "/vim-my-way" title: "Vim My Way" order: "9A" description: "Ok, so vim looked pretty ugly. Lets make it feel the way we want it!" section: "The VimRC" --- Ok, how much did you hate having to do the `zz`? It is annoying. Instead, lets tell vim to do it for us. ```viml :set scrolloff=8 ``` Now lets scroll around. How does it feel. SO GOOD. ---- Lets quit out of our previous vim experience and curl down this file. ``` curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/some-javascript.md > exercise.js && vim exercise.js ``` After following the delete instructions you should notice that its really hard to count how many lines of code huh? Type the following ```viml :set number ``` You will notice a new column has been added and now you have line numbers! Yeah its pretty easy to a jump, but also not all that easy. Math can be hard sometimes. ```viml " sets relative numbers :set relativenumber " turns off relative numbers :set norelativenumber ``` Wow. Much better huh? You can jump easily now. You may not be good at jumping yet, but you can see its a lot easier. Lets play around. Put your cursor on `foo` and press `v10j`. What happened? Press `V` to highlight the whole line. Ok lets leave vim, `:q` and reopen back up the file either by reexecuting the curl command or simply executing `vim exercise.js` What happened? Commands you execute only live for the session you have vim open. This is painful right? Well, actually not. There is a `.vimrc`! All is not horrible. So lets create one! Create a vimrc in the correct location with the following content. ```viml set scrolloff=8 set number set relativenumber ``` Open up vim again. Ohh yeah! This is great, but those tabs have to go (tabs vs spaces anyone?)! Add these lines to your vimrc and restart vim. ```viml set tabstop=4 softtabstop=4 set shiftwidth=4 set expandtab set smartindent ``` Now restart vim... what just happened? Pretty cool huh? ### How do you know what is available? * You can google. Sometimes that is a good thing. * `h options` * `h ` * `h ` ================================================ FILE: course-website/package.json ================================================ { "name": "gatsby-course-starter", "description": "a gatsby seed project to get your education site started", "version": "1.0.0", "author": "Brian Holt ", "dependencies": { "bootstrap": "^4.5.3", "code-mirror-themes": "^1.0.0", "front-matter": "^4.0.2", "gatsby": "^2.30.1", "gatsby-cli": "^2.17.0", "gatsby-link": "^2.9.0", "gatsby-plugin-layout": "^1.8.0", "gatsby-plugin-react-helmet": "^3.8.0", "gatsby-plugin-sharp": "^2.12.0", "gatsby-remark-autolink-headers": "^2.9.0", "gatsby-remark-copy-linked-files": "^2.8.0", "gatsby-remark-images": "^3.9.0", "gatsby-remark-prismjs": "^3.11.0", "gatsby-source-filesystem": "^2.9.0", "gatsby-transformer-remark": "^2.14.0", "is-url-superb": "^5.0.0", "parse-markdown-links": "^1.0.4", "prismjs": "^1.23.0", "react": "^17.0.1", "react-dom": "^17.0.1", "react-helmet": "^6.1.0" }, "keywords": [ "gatsby", "gatsby-starter", "course", "education" ], "license": "(CC-BY-NC-4.0 OR Apache-2.0)", "main": "n/a", "scripts": { "build": "gatsby build --prefix-paths", "csv": "node csv.js", "dev": "gatsby develop", "format": "prettier --write \"src/**/*.{js,jsx,md,css}\"", "lint": "eslint \"src/**/*.{js,jsx}\"" }, "devDependencies": { "@babel/polyfill": "^7.12.1", "babel-eslint": "^10.1.0", "core-js": "^3.8.2", "eslint": "^7.17.0", "eslint-config-prettier": "^7.1.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-react": "^7.22.0", "prettier": "^2.2.1" } } ================================================ FILE: course-website/src/components/TOCCard.css ================================================ .main-card { border: 1px solid #ccc; border-radius: 8px; width: 100%; margin: 0; overflow: hidden; background-color: white; } .lesson-title { font-size: 20px; padding: 15px 30px; } .lesson-content { padding: 0 15px 15px 15px; line-height: 1.5; } .sections-name { list-style: none; } .lesson-section-title { margin-top: 25px; } ================================================ FILE: course-website/src/components/TOCCard.js ================================================ import React from "react"; import Link from "gatsby-link"; import * as helpers from "../util/helpers"; import "./TOCCard.css"; const sortFn = helpers.sorter; const LessonCard = ({ content, title }) => { console.log(sortFn); const sections = content .map(lesson => lesson.node.frontmatter) .sort(sortFn) .reduce((acc, lesson) => { if (!acc.length) { acc.push([lesson]); return acc; } const lastSection = acc[acc.length - 1][0].section.split(",")[0]; if (lastSection === lesson.section.split(",")[0]) { acc[acc.length - 1].push(lesson); } else { acc.push([lesson]); } return acc; }, []); return (

{title}

    {sections.map(section => (

  1. {section[0].section}

      {section.map(lesson => (
    1. {lesson.title}
      2. ))}
    2. ))}
); }; export default LessonCard; ================================================ FILE: course-website/src/layouts/index.css ================================================ .gradient { background: rgb(96, 108, 136); background: linear-gradient( to bottom, rgb(96, 108, 136) 0%, rgb(63, 76, 107) 100% ); } .navbar { border-bottom: 1px solid #ccc; position: sticky; width: 100%; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; } .navbar h1 { font-size: 20px; margin: inherit; padding: inherit; font-weight: bold; } .navbar h2 { font-size: 14px; margin: inherit; padding: inherit; text-transform: uppercase; color: white; } .jumbotron.gradient { color: white; text-transform: uppercase; font-weight: bold; } .navbar-brand.navbar-brand { text-transform: uppercase; color: white; font-weight: bold; } .navbar-brand.navbar-brand:hover { color: #777; } .navbar-brand.navbar-brand:focus { color: white; } .lesson { margin: 15px; padding: 15px; background-color: #fff; border-radius: 8px; overflow: scroll; } .lesson p { clear: both; } .lesson-links { font-size: 18px; padding: 15px 0; } .next { float: right; } .prev { float: left; } .lesson-title { color: white; text-transform: uppercase; font-weight: bold; } .klipse-result { border: 1px solid #90b4fe; padding-top: 8px; position: relative; width: 100%; } .klipse-result .CodeMirror-wrap { width: 100%; border-color: transparent; } .klipse-result::before { content: "result"; background-color: white; position: absolute; top: -13px; height: 13px; } .language-htm, .language-css, .language-js, .language-json { width: 100%; } .gatsby-highlight { /* border: 1px solid black; */ padding: 4px; border-radius: 4px; display: flex; justify-content: space-between; flex-direction: column; align-items: stretch; } .CodeMirror-wrap { width: 100%; font-size: 12px; height: inherit; margin-bottom: 12px; } .CodeMirror-gutters { height: inherit !important; } .klipse-snippet > .CodeMirror { border: none; width: 100%; } .gatsby-highlight > .klipse-snippet { border: 1px solid #90b4fe; width: 100%; border-right: none; position: relative; margin-bottom: 15px; } .doggos { width: 100%; border: 1px solid #666; border-radius: 5px; } ================================================ FILE: course-website/src/layouts/index.js ================================================ import React from "react"; import Link from "gatsby-link"; import Helmet from "react-helmet"; import { graphql, StaticQuery } from "gatsby"; import "bootstrap/dist/css/bootstrap.css"; import "prismjs/themes/prism-solarizedlight.css"; import "code-mirror-themes/themes/monokai.css"; import "./index.css"; // import jpg from "../../static/posterframe.jpg"; const TemplateWrapper = props => { return ( { const frontmatter = props.data && props.data.markdownRemark ? props.data.markdownRemark.frontmatter : null; return (

{data.site.siteMetadata.title}

{!frontmatter ? null : (

{`${frontmatter.section} – ${frontmatter.title}`}

)}
{props.children}
); }} query={graphql` query HomePage($path: String!) { markdownRemark(frontmatter: { path: { eq: $path } }) { html frontmatter { path title order section description } } site { pathPrefix siteMetadata { title subtitle description keywords } } } `} /> ); }; export default TemplateWrapper; ================================================ FILE: course-website/src/pages/404.js ================================================ import React from "react"; const NotFoundPage = () => (

NOT FOUND

You just hit a route that doesn't exist... the sadness.

); export default NotFoundPage; ================================================ FILE: course-website/src/pages/index.css ================================================ body { background-color: #eee; } .index { width: 97%; max-width: 750px; margin: 0 auto; margin-top: 20px; } .index .jumbotron { } .example-table { border-collapse: separate; } .example-table td { border: 1px solid black; width: 20px; height: 20px; } .example-table .current { background-color: #fcc; } .example-table .n { border-top-color: transparent; } .example-table .s { border-bottom-color: transparent; } .example-table .e { border-right-color: transparent; } .example-table .w { border-left-color: transparent; } .lesson-content table { } .lesson-content td { border: 1px solid black; padding: 8px; } .lesson-content td input { min-width: 300px; } .lesson-flex { display: flex; flex-direction: column; justify-content: center; align-items: center; } .random-tweet { width: 100%; margin-top: 100px; } .fem-link { text-align: center; } ================================================ FILE: course-website/src/pages/index.js ================================================ import React from "react"; import { StaticQuery, graphql } from "gatsby"; import Card from "../components/TOCCard"; import "./index.css"; const IndexPage = () => ( (

{props.site.siteMetadata.title}

{props.site.siteMetadata.subtitle}

)} /> ); export default IndexPage; ================================================ FILE: course-website/src/templates/lessonTemplate.js ================================================ import React from "react"; import Link from "gatsby-link"; import { graphql } from "gatsby"; import * as helpers from "../util/helpers"; const sortFn = helpers.sorter; export default function Template(props) { let { markdownRemark, allMarkdownRemark } = props.data; // data.markdownRemark holds our post data const sections = allMarkdownRemark.edges .map(lesson => lesson.node.frontmatter) .sort(sortFn); const { frontmatter, html } = markdownRemark; const index = sections.findIndex(el => el.path === frontmatter.path); const prevLink = index > 0 ? ( {"← " + sections[index - 1].title} ) : null; const nextLink = index < sections.length - 1 ? ( {sections[index + 1].title + " →"} ) : null; return (

{frontmatter.title}

{frontmatter.date}

{prevLink} {nextLink}
); } export const pageQuery = graphql` query LessonByPath($path: String!) { markdownRemark(frontmatter: { path: { eq: $path } }) { html frontmatter { path title order section description } } allMarkdownRemark(limit: 1000) { edges { node { frontmatter { order path title } } } } } `; ================================================ FILE: course-website/src/util/helpers.js ================================================ function splitSections(str) { const validSectionTest = /^\d+[A-Z]+$/; const numbersRegex = /^\d+/; const lettersRegex = /[A-Z]+$/; if (!validSectionTest.test(str)) { throw new Error( `${str} does not match the section format. It must be , like 16A or 5F (case sensitive)` ); } return [numbersRegex.exec(str)[0], lettersRegex.exec(str)[0]]; } const getCharScore = str => str .split("") .map((char, index) => char.charCodeAt(0) * 10 ** index) .reduce((acc, score) => acc + score); function sorter(a, b) { let aOrder, bOrder; if (a.attributes && a.attributes.order) { aOrder = a.attributes.order; bOrder = b.attributes.order; } else { aOrder = a.order; bOrder = b.order; } const [aSec, aSub] = splitSections(aOrder); const [bSec, bSub] = splitSections(bOrder); // sections first if (aSec !== bSec) { return aSec - bSec; } // subsections next return getCharScore(aSub) - getCharScore(bSub); } module.exports.splitSections = splitSections; module.exports.sorter = sorter; ================================================ FILE: csv.js ================================================ const fs = require("fs").promises; const path = require("path"); const fm = require("front-matter"); const isUrl = require("is-url-superb"); const parseLinks = require("parse-markdown-links"); const { sorter } = require("./src/util/helpers"); const mdDir = process.env.MARKDOWN_DIR || path.join(__dirname, "lessons/"); const outputPath = process.env.OUTPUT_CSV_PATH || path.join(__dirname, "public/lessons.csv"); const linksOutputPath = process.env.LINKS_CSV_PATH || path.join(__dirname, "public/links.csv"); async function createCsv() { console.log(`making the markdown files into a CSV from ${mdDir}`); // get paths const allFiles = await fs.readdir(mdDir); const files = allFiles.filter(filePath => filePath.endsWith(".md")); // read paths, get buffers const buffers = await Promise.all( files.map(filePath => fs.readFile(path.join(mdDir, filePath))) ); // make buffers strings const contents = buffers.map(content => content.toString()); // make strings objects let frontmatters = contents.map(fm); // find all attribute keys const seenAttributes = new Set(); frontmatters.forEach(item => { Object.keys(item.attributes).forEach(attr => seenAttributes.add(attr)); }); const attributes = Array.from(seenAttributes.values()); if (attributes.includes("order")) { frontmatters = frontmatters.sort(sorter); } // get all data into an array let rows = frontmatters.map(item => { const row = attributes.map(attr => item.attributes[attr] ? JSON.stringify(item.attributes[attr]) : "" ); return row; }); // header row must be first row rows.unshift(attributes); // join into CSV string const csv = rows.map(row => row.join(",")).join("\n"); // write file out await fs.writeFile(outputPath, csv); console.log(`Wrote ${rows.length} rows to ${outputPath}`); // make links csv let longestLength = 0; let linksArray = frontmatters.map(row => { const links = parseLinks(row.body).filter(isUrl); longestLength = longestLength > links.length ? longestLength : links.length; const newRow = [row.attributes.order, row.attributes.title, ...links]; return newRow; }); if (longestLength) { // add title row linksArray = linksArray.map(array => { const lengthToFill = longestLength + 2 - array.length; return array.concat(Array.from({ length: lengthToFill }).fill("")); }); linksArray.unshift( ["order", "title"].concat( Array.from({ length: longestLength }).map((_, index) => `link${index}`) ) ); // join into CSV string const linksCsv = linksArray.map(row => row.join(",")).join("\n"); // write file out await fs.writeFile(linksOutputPath, linksCsv); console.log(`Wrote ${linksArray.length} rows to ${linksOutputPath}`); } } createCsv(); ================================================ FILE: gatsby-config.js ================================================ module.exports = { siteMetadata: { title: "Vim Fundamentals", subtitle: "Making vim approachable!", description: "This is a survey of vim, how it works, and how to become a sensai of vimfu.", keywords: ["Vim", "Awesome", "Coconut Oil", "ThePrimeagen"], }, pathPrefix: "vim-fundamentals", plugins: [ `gatsby-plugin-layout`, { resolve: `gatsby-source-filesystem`, options: { path: `${__dirname}/lessons`, name: "markdown-pages", }, }, `gatsby-plugin-sharp`, `gatsby-plugin-react-helmet`, { resolve: `gatsby-transformer-remark`, options: { plugins: [ `gatsby-remark-autolink-headers`, `gatsby-remark-copy-linked-files`, `gatsby-remark-prismjs`, { resolve: `gatsby-remark-images`, options: { maxWidth: 800, linkImagesToOriginal: true, sizeByPixelDensity: false, }, }, ], }, }, ], }; ================================================ FILE: gatsby-node.js ================================================ const path = require("path"); exports.createPages = ({ actions, graphql }) => { const { createPage } = actions; const lessonTemplate = path.resolve(`src/templates/lessonTemplate.js`); return graphql(` { allMarkdownRemark( sort: { order: DESC, fields: [frontmatter___order] } limit: 1000 ) { edges { node { excerpt(pruneLength: 250) html id frontmatter { order path title } } } } } `).then(result => { if (result.errors) { return Promise.reject(result.errors); } result.data.allMarkdownRemark.edges.forEach(({ node }) => { createPage({ path: node.frontmatter.path, component: lessonTemplate }); }); }); }; ================================================ FILE: lessons/adv-pitstop.md ================================================ --- path: "/pit-stop" title: "Pit Stop" order: "53A" section: "Advanced Text Manipulation" description: "There has been a lot of info. Lets recap!" --- ### The Recap Recap #### Basic Movements #### File Navigation #### Vim RC #### Advanced Text Manipulation ### Moving forward We are going to step it up a notch and improve our knowledge of vim Motions. Here is the deal. You don't need to remember them all. You need to know they exist. As you get more familiar the motions and concepts that seem hard today are trivial tomorrow. ================================================ FILE: lessons/advanced-movements-1.md ================================================ --- path: "/adv-motions" title: "Advanced Motions" order: "54A" section: "Advanced Text Manipulation" description: "And you thawght you knew Motions..." --- We have already covered some of the horizontal and vertical motions, `I`/`A` and `j`/`k` are great examples of fast motions. But if that is all we had, VIM would just be lacking in luster. ### Quick Recap Motion: A command that moves the cursor. * modified with a count * 5j instead of jjjjj * modify an "action" with a movement * 5dd and d4j are "equivalent" ### There are more motions! * G and gg bottom or top respectively * do you think you can dG? lets do an exercise and go over some advanced motions! #### Example time ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-6-motions.md > exercise.md && vim exercise.md ``` ================================================ FILE: lessons/advanced-text-manipulation-1.md ================================================ --- path: "/search-and-replace" title: "Search And Replace" order: "50A" section: "Advanced Text Manipulation" description: "Search and replace. Regex licences may be required." --- Were are getting to the end game of vim. There is still so much out there, but for the sake of surveying, this is where we will end. We will cover Search and Replace, Macros, and finally registers. ### Search and Replace Lets go through a search and replace exercise. This should help us get the foundation of basic search and replace ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-3-search-and-replace.md > exercise.md && vim exercise.md ``` ================================================ FILE: lessons/advanced-text-manipulation-2.md ================================================ --- path: "/macros" title: "Macros" order: "51A" section: "Advanced Text Manipulation" description: "Macros. Yes, they seem more confusing than they are." --- This is where things can get fun. Also, they are a bit psychologically weird... Meaning, you will find yourself feeling like you don't know how to do the most basic of moves. If this happens, its ok. Its called Macro Pressure. ### What is a Macro A macro simply plays text as motions, inputs, and commands. #### Let me show you! I remember my first macro like it was yesterday..... #### Example time ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-4-macros.md > exercise.md && vim exercise.md ``` ================================================ FILE: lessons/advanced-text-manipulation-3.md ================================================ --- path: "/registers" title: "Registers" order: "52A" section: "Advanced Text Manipulation" description: "Registers. Definitely hard to imagine them not being hard." --- ### My slogan for registers > Definitely hard to imagine them not being hard. ### What is a register? It is a key -> value The `key` is a character The `value` is a string #### Example time ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-5-registers.md > exercise.md && vim exercise.md ``` ================================================ FILE: lessons/are-you-ready.md ================================================ --- path: "/are-you-ready" title: "Are You Ready?" order: "3A" description: "The final hurrah! before diving into vim!" section: "Introduction" --- At this point I hope you are ready. But I wanted to take a moment to let you know three things. * This is a journey, its not a day trip * The journey is uphill * The top of the mountain is incredible ### For the live class I stream on twitch, so feel free to ask questions at any point and I can pivot if its beneficial for all or I'll answer the question at the end of the section. ### Proper Github projects 1. Clone this presentation project down and open up the files, or go to the website and use the curl commands to open up vim. I recommend just going to the website. 2. git clone https://github.com/ThePrimeagen/vim-nav-playground.git ### Clean your environment If you use vim, remove your vimrc and any plugins. We are going bare bones and working our way up. There is a basic script to stash and restore your vim env in vim-nav-playground in the tools folder. ================================================ FILE: lessons/basic-usage.md ================================================ --- path: "/basic-usage" title: "Using Vim" order: "5A" description: "Let's use vim for the first time!" section: "Basics" --- Before we start editing files, lets get familiar with some basic movements. Navigate back to the empty directory and type in the following. ```bash > vim test.js ``` You are now in `NORMAL` mode. This probably doesn't feel all that normal. And you are right, its really not that normal. ## Lets talk Modes There are a few modes that you should be aware of. * Normal * Insert * Visual * Visual Line ## My First If Statement Lets write our first if statement. Currently, you are in `NORMAL` mode. This is where you can execute commands to navigate, edit, and execute vim/sys commands. To get out of this mode, press `i` After pressing `i` you should see something like `-- INSERT --` in the bottom left hand side of vim. Now that you are in insert mode, type the following ```js if (true) { } ``` Press `` or `` (abbreviated ``) to leave `INSERT` mode and back to `NORMAL`. Goodness, isn't default vim ugly? type `:q` to quit vim. Also, don't tell anyone. ## My First Moves ### Basic navigation time to curl down our first little exercise ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-0-hjkl-x.md > exercise.md && vim exercise.md ``` ### Deleting, Yanking, and Pasting These are going to be some of your fundamental movements within vim. This is where you will see some significant speed ups compared to a conventional editor. ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-1-dyp.md > exercise.md && vim exercise.md ``` ### Insert! We are going to go over entering into insert mode ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-2-insert.md > exercise.md && vim exercise.md ``` ## Recap Lets talk about what happened. I would love to get some feedback from you. What do you think about all of this nonsense? Does it seem like to much? Or does it seem exciting? I hope you are excited. ### We learned * h,j,k,l for basic movement. * w,b for word hopping. Effectively the same as Option/Ctrl + arrow keys * yy to "copy" a line, called Yank * dd to delete, and yank, a line * p and P to paste the contents of the implicit register below / above * Most of the ways to go into insert mode! * i and a for which side of the cursor * I and A for which side of the line * o and O for belowe / above line * zz - I snuck that one in... That is a grand total of 16 different motions ================================================ FILE: lessons/color-my-pencils.md ================================================ --- path: "/color-my-pencils" title: "Color My Pencils" order: "10A" description: "Lets set some colorschemes" section: "The VimRC" --- So to change your `colorscheme` what should you do? If you answered "Help Menu!" you are a fantastic! Please execute `h: colorsc` try executing the following ``` :colorscheme ``` Pick anything that autocompletes! Much like set options, it will only persist for this vim session. Writing it to your vimrc and open up file you commonly edit and behold the beauty! These are not the only colorschemes that you can have. Plenty of plugins provide many more. ## Recap Ok. This is probably getting a bit overwhelming. A lot of this comes with practice and as you use this it becomes second nature. I'll say it again. * This is a journey, its not a day trip * The journey is uphill * The top of the mountain is incredible ### What we learned * Using the help menu. * navigating the all the set options. * Using tab and * Arrows vs and * Set options * The power to control how our editor operates through sets. * Colorschemes * How to set them and peruse them. * We learned things about motions. * dd can become dd * Moving with 10j / 10k. Wowow ### Extend it Do you think you could do anything with `y` and `p`? Could `yj` work? What does it do? Why? What about `5p`? What do you think happens? Why? ### Foundation We have built the foundation. You know about customizing your vim experience and you know how to basically move around. The only thing left is really optimizing! And there is practically an infinite amount of optimizing! ================================================ FILE: lessons/exercise-0-hjkl-x.md ================================================ --- path: "/exercise-0" title: "hjkl-x" order: "69A" section: "Misc Content" description: "This is the first exercise to try out." --- ## NOTE To use the exercises, please curl the file to your machine and edit it with vim. ## Exercise 0: Basic movement, h, j, k, l, w, b ### press j to go down ### press l to follow the line ---------------------------o " press x to delete the o " press j to go to the next action ### press l and j to follow the line and x to delete the o -+ | | +------+ | | +------+ | | +------o ### press l and j and h to follow the line and x to delete the o -+ | | +------+ | | +------+ | +------+ | | o------+ ### press l, j, h, and k to follow the line and x to delete the o -+ +------+ +------+ +-----o | | | | | | | | | | | | +------+ | | +------+ | | +------+ | | | | | | | +-------------+ ### press w to get to o and press x to delete +-+ +------+ +------+ +-----o ### b = inverse w: press w, j, and b to get to o and press x to delete +-+ +------+ +------+ +-----+ | o-+ +------+ +------+ +-----+ ### Go in circles until you feel good +------+ | | | | | | +------+------+ | | | | | | +------+ ================================================ FILE: lessons/exercise-1-dyp.md ================================================ --- path: "/exercise-1" title: "dyp" order: "70A" section: "Misc Content" description: "This is the basic movement and editing of text" --- ## NOTE To use the exercises, please curl the file to your machine and edit it with vim. ## Exercise 1: Basic Editing ### Delete a line with dd delete me 1 delete me 2 delete me 3 delete me 4 ### Yank and paste. yy to yank line, p to paste line below, P above yank me and paste below (yyp) yank me and paste above (yyP) ### Visual Mode #### Visual Mode Highlight part of this line by pressing v, then navigate around escape to leave visual mode #### Visual Line Mode Highlight this line by pressing V, then navigate around escape to leave visual mode #### Visual Mode + y / p Highlight this line by pressing V, then press y (What happened?) press p (What happened?) Highlight this point by pressing v, press wy (What happened?) press p (What happened?) Lets repeat but with d instead of y, (What happened?) ## Part 3: The relationship of y / d :h reg :reg What did we see there? yank this line What happened to the registers? ================================================ FILE: lessons/exercise-2-insert.md ================================================ --- path: "/exercise-2" title: "insert" order: "71A" section: "Misc Content" description: "Insertion! There are many ways to go into INSERT mode." --- ## Exercise 2: Insert mode There are a few ways to go into insert mode (I also am not including about another 10...) i: left side of cursor a: right side of cursor ----I: A: ----- o: insert new line below line and go into insert mode O: insert new line above line and go into insert mode lets play around ================================================ FILE: lessons/exercise-3-search-and-replace.md ================================================ --- path: "/exercise-3" title: "Search and Replace" order: "72A" section: "Misc Content" description: "Search and Replace!" --- ### Basic Search search for `error` by typing `/error` error Lets type a command in. :set hls ic What just happened? Re-search `error` error But you can do more! try searching `/err.*or` errooentuhoneuhnoteuhnotehuor * Notice that it matched a huge portion on top. That is because regexs will match the most it can. ### Search and Replace replace "foo" with "baz" by typing `:s/foo/baz` foo bar baz Try again but notice that it only replaces one foo at a time. foo foo foo foo replace "foo" with "baz" by typing `:s/foo/baz/g` foo foo foo foo replace "foo" with "baz" by typing `:s/foo/baz/gc` foo foo foo foo #### Ranged search & replace ```typescript function foo() { const a = "foo"; const b = [ "foo", "foo", "foo", "foo", ]; if ("foo") { return "foo"; } return "baz"; } ``` #### Full File Lets execute `:%s/foo/bar/gc`, but first exit without saving `:q!` and reopen this file #### But what about full project find and replace I am going to leave this out of this course. ================================================ FILE: lessons/exercise-4-macros.md ================================================ --- path: "/exercise-4" title: "Macros" order: "73A" section: "Misc Content" description: "Macros" --- // Yes I wrote this code with a macro if (someValue == "someOtherValue1") { return 1 } else if (someValue == "someOtherValue2") { return 2 } else if (someValue == "someOtherValue3") { return 3 } else if (someValue == "someOtherValue4") { return 4 } else if (someValue == "someOtherValue5") { return 5 } else if (someValue == "someOtherValue6") { return 6 } else if (someValue == "someOtherValue7") { return 7 } else if (someValue == "someOtherValue8") { return 8 } else if (someValue == "someOtherValue9") { return 9 } else if (someValue == "someOtherValue10") { return 10 } else if (someValue == "someOtherValue11") { return 11 } else if (someValue == "someOtherValue12") { return 12 } else if (someValue == "someOtherValue13") { return 13 } else if (someValue == "someOtherValue14") { return 14 } else if (someValue == "someOtherValue15") { return 15 } else if (someValue == "someOtherValue16") { return 16 } else if (someValue == "someOtherValue17") { return 17 } else if (someValue == "someOtherValue18") { return 18 } ================================================ FILE: lessons/exercise-5-registers.md ================================================ --- path: "/exercise-5" title: "Registers" order: "74A" section: "Misc Content" description: "Registers. Definitely hard to imagine them not being hard." --- ### Register Basics So lets copy the following line foo Now type in :reg Notice that `foo` appears two times. We are seeing foo twice because `foo` is in our first register and our implicit register. Our first register is denoted with 0 (0th may be better term) and implicit is ". Paste with `p` 3 times foo foo foo highlight and yank all three `foo`s. Lets resee what is in our `:reg`. Notice that we replaced our implicit register and our 0th register. Why didnt 0 become 1? Go back up to a line with foo and delete 1. What just happened? Inspect your `:reg` Delete a few more lines and re-inspect your register. What you should observe, and can be found in `:h reg` is that your implicit register `"` is _always_ the latest yank or delete. It is also what is used when pasting. We _knew_ this from our previous lesson, but now we observe why. ### How do we interact with registers? We see how our actions are side effects to the state of the registers. But what if you wanted to paste or yank explicitly? Good thing we have a clue. Notice that every register starts with `"`. Lets `:h "` So lets yank into our `a` register. Move to the line below and type `V"ay` foofoofoo Now lets inspect our registers. How do we paste from a register? ### Lets do something crazy Copy, paste, and increment the number below 3 times using a macro 1. Now lets check registers. What do you see? Is your mind blown? What does this mean we can do? ================================================ FILE: lessons/exercise-6-motions.md ================================================ --- path: "/exercise-6" title: "Advanced Motions" order: "75A" section: "Misc Content" description: "Motions 201" --- ### Change `c` is a powerful motion. You use it just like `d` but at the end of the motion you are ejected from `NORMAL` and into `INSERT`. So if you wished to delete a word and then type in a new word, `c` is a great habit to form. Lets see the difference // dd this line // cc this line ### Horizontal Movement Lets learn about!: `_`, `0`, `$`, `D`, `C`, `S`, `f`, `,`, `;`, `t`, `F`, and `T` // How would we move around on the line with "contents" if (true) { contents conTenTs contenTS } ### Vertical Movement #### Core movement Rely on relative jumps. Get good at them. If you get NeoVim, try VimBeGood #### { and } We know about search. That is a vertical movement, but its really specific. First lets talk `{` and `}` ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ContiguousCode ##### Benefits? Class chat This next one is a bit odd #### Ctrl+u/d So lets do another type of navigation. Try pressing `` . . . . . . . . . . . . . . . . . . . . . . . . . ##### Benefits? Class chat #### [m / ]m and [M / ]M This will move by "function". It works pretty well in c languages. Move your cusor to this line and press `]m`. Try moving back and forth and try the uppercase version as well. if (foo) { some content some content some content some content function bar() { some other content some other content some other content some other content } function baz() { other content other content other content other content } } ##### Benefits? #### % Ok,.... soo this isn't a pure vertical motion. It actually is a pair jumper if (true) { content const a = [ content, content, content, ] "content" content content } Lets combine it with a motion. Delete the `const a =...` statement. ### Get zany... Lets look at the following statement, what are some ways you can delete the contents of the if statement? if (true) { line1 line2 line3 line4 line5 } I was hoping to hear `f{V%D`. That is just so sexy. `d4j` is ok. Relative jump, well done.. `5dd` meh. I would glad hand like a politician with `dd dd dd dd dd`. Just say mean things behind your back. So lets try again.. but I spiced it up. if (true) { line1 // Some distance line2 line3 line4 line5 } First, place your cursor _in_ the if statement. Where ever you want. Type `di{` i = inside #### Class Discussion What _other_ letter do you think you could try other than `i`? . . . . . . . use `` to go down... . . . . . . . . . . . . . . . . . // TODO: make a meme -- aliens.. Yes, `a` is the other. I have never heard a great reason why, but just deal with it. so lets try again. try `da{` if (true) { line1 // Some distance line2 line3 line4 line5 } well shoot... #### Class Discussion Lets solve this together if (true) { line1 // Some distance line2 line3 line4 line5 } . . . . . . . . . . For those that couldn't wait or got the answer. `va{Vd` #### Use YOUR SUPER POWERS lets redo the previous exercise except copy from one if statement and override the next if statement. How would we go about this? if (true) { line1 // Some distance line2 line3 line4 line5 } if (true) { replace_me_1 // Some distance replace_me_2 replace_me_3 replace_me_4 replace_me_5 } ================================================ FILE: lessons/files-e.md ================================================ --- path: "/files-e" title: "Files and Navigations - Edit" order: "15A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files with e." --- There are other ways to open files in vim. You are not restricted to just using the file tree. There is also `:e`. `e` is short for `edit`. Lets explore! You can always read the help menu, `:h e` but we don't need to do that! Lets reopen back up our `vim-nav-playground` project. lets type `:e `. You should see the following ![Edit and Ctrl+D](lessons/images/edit-ctrl-d.png) There is also tab completion! Try it out. `:e `. But how do we navigate the popup list? Well there are two options. There is the vim way, and the default way that most people would do. I bet you can guess which one you already know... :) Anywho, arrow keys work, but eww. `` (Ctrl+p, remember this is vim syntax). and `` mean previous and next respectively. ### Fuzzy find anyone? Yes, please! Of course there is a fuzzy finder, but those are installed as plugins. We are not quite there, so let me just show you one of them. It is called `telescope.nvim` and is available on neovim only. It has an absurd amount of features. I'll only show the fuzzy file finder. ================================================ FILE: lessons/files-intro.md ================================================ --- path: "/files" title: "Files and Navigations" order: "11A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files." --- As you imagined there is the "Vim" way to do everything. But the good news is that there are many a plugin to make this process easier. Lets start off by learning some built in vim ways and then expand from there. First, lets clone a small test repo ssh ```bash git clone git@github.com:ThePrimeagen/vim-nav-playground.git ``` https ```bash git clone https://github.com/ThePrimeagen/vim-nav-playground.git ``` navigate to `vim-nav-playground` and open up vim by opening up the directory in vim. ```bash cd vim-nav-playground vim . ``` This should be what you are seeing (bar the colorscheme) ![NetRW](./images/netrw.png) ================================================ FILE: lessons/files-marks.md ================================================ --- path: "/files-marks" title: "Files and Navigations - Marks" order: "16A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files with marks." --- ## Marks Now marks are both incredible and also confusing at the same. Effectively vim gives you the ability to mark files both globally and locally. This means with just a swift couple taps of the finger you could be in a file marked. I find marks definitely the end game of file navigation, but they are hard to do well. So lets open up 3 files in `vim-nav-playground` and mark each one. First lets open one file, `src/sockets.c`. Use your favorite way to open up this file. ``` :e src/sockets.c ``` Then mark it by typing `m` then an **uppercase** character of your choice. Repeat with `src/twitch.c` and `src/another.c` with different uppercase characters. Remember the 3 characters you chose. To navigate to the files you marked simply press `'`. So for me, I chose `G` for `sockets.c`, and to navigate there I simply press `'G`. ### Some mark theory * What marks did you choose? * Why? * Do you see some strategies? * Strategies I have heard of * My strategies ================================================ FILE: lessons/files-netrw.md ================================================ --- path: "/files-netrw" title: "Files and Navigations - NetRW" order: "12A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files with NetRW." --- NetRW is the default browsing of the filesystem plugin, and it comes with vim for years now. It is available in both Vim and NeoVim. Please navigate to `vim-nav-playground`. If you did not clone it, it can be found [here](https://github.com/ThePrimeagen/vim-nav-playground) Lets go over some basic movements. You can use all the same navigation as you would while editing, but for file navigation. ```viml vim . ``` Lets go down, `j`, to `src` and press `` (enter). Notice that it opens the folder. We see a couple of files. Lets scroll to `twitch.c` and press ``. What just happened? How do we open back up our file navigation? ```viml :Vex ``` `:Vex` stands for (V)ertical (ex)plore. Meaning, split the current view experience vertically (direction of line) and insert a netrw at current buffer location. This is pretty - ok -. Hopefully, if you are of the vim mentality, you are thinking it cannot take this many keystrokes just to do these things. I must be able to customize the netrw experience. The answer, of course, is yes to both. Lets step up our vim knowledge. First, lets quit and re-open up our vimrc. If you don't remember, or starting here, here is our vimrc so far. [Vim My Way](/vim-my-way) [Color My Pencils](/color-my-pencils) ```viml set scrolloff=8 set number set relativenumber set tabstop=4 softtabstop=4 set shiftwidth=4 set expandtab set smartindent " This was from the colorscheme section colorscheme desert ``` ================================================ FILE: lessons/files-recap.md ================================================ --- path: "/files-recap" title: "Files and Navigations - Recap" order: "17A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files with e." --- ### Recap Wow we have learned a lot! Lets chat about what we have learned. * NetRW * `:e` * `` and `` * `` and `` for navigating pop-up lists * remaps * marks * :Vex * so % * more on %. try typing `:echo expand("%")` Or `"%p` What happened here? How are we feeling? Do you feel like you have no more room to learn? I get that we are sort of on information overload. Lets take a break and just talk about what we have learned overall. ### Some Bonus Alternate File ================================================ FILE: lessons/files-remaps-1.md ================================================ --- path: "/files-remaps-1" title: "Files and Navigations - Remaps part 1" order: "13A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files with NetRW." --- First, lets quit our current vim experience and re-open up our vimrc. ```bash # for vim vim ~/.vimrc ``` ```bash # for neovim - this may be different depending on your flavor vim ~/.config/nvim/init.vim ``` If your path is different for neovim but you don't know what it is, execute the following in neovim to expose the path!!! ```viml " Neovim only :echo stdpath("config") ``` If you didn't save everything from the vim rc section, here is the complete vimrc thus far from [Vim My Way](/vim-my-way) and [Color My Pencils](/color-my-pencils). ```viml set scrolloff=8 set number set relativenumber set tabstop=4 softtabstop=4 set shiftwidth=4 set expandtab set smartindent " This was from the colorscheme section colorscheme desert ``` ================================================ FILE: lessons/files-remaps-2.md ================================================ --- path: "/files-remaps-2" title: "Files and Navigations - Remaps part 2" order: "14A" section: "Navigation" description: "Coconut oil in hand, you are ready to navigate some files with NetRW." --- ### Remaps Remaps are a powerful way to redefine your vim exerience the way you would like it. In your vim rc, add the following line ```viml let mapleader = " " nnoremap pv :Vex ``` First, what is `let mapleader = " "`. Leader is a way to set a custom key in vim that can be referenced in remaps as ``. Second, what is `nnoremap`? Well its the syntax for a remap. Lets break it down ```viml mode lhs rhs ``` #### mode lets go over the meaning of the mode. The mode is what mode (INSERT, NORMAL, VISUAL) that this remap should work in. Here is the exact breakdown of the remap. ```viml " normal mode no recursive execution map A -> B n nore map ``` #### lhs lhs is the set of keys to execute the remap. In this case `pv` or `pv`. #### rhs rhs is the command to execute after the `lhs` has been typed in. In this case we will type the command `:Vex`. Remember, `` means enter. #### Lets execute it! Ok, press `pv`, did anything happen? No, why not? Of course! Vim never executed these new changes. Lets source the file. ```viml " so = source " % = current file :so % ``` Now lets try again! did anything happen? #### Dangers of remaps It can make your system feel slow.. #### Exercise time Sourcing the vimrc kind of stinks huh? Could we remap this? Take a shot at remapping it. ```viml " I use neovim, btw nnoremap :so ~/.config/nvim/init.vim ``` Now I can simply press `` to resource my vim rc anytime I make changes. ================================================ FILE: lessons/first-plugin.md ================================================ --- path: "/your-first-plugin" title: "First Plugin" order: "60A" section: "Your First Plugin" description: "Time to learn viml." --- So... before we get started. I hate VimL. I think its gross. Its Ugly. Its all around unpleasant to write. This is the primary reason why I use NeoVim, not Vim. I can write my plugins in Lua. Lua is not bad. Its a simple language that is extremely boring, which makes it a great candidate for a scripting language of simple ui elements. --- This is meant to show you the power of Vim and its scriptability. As said, its better in Lua. We are going to walk through [Writing Vim Plugin By Łukasz Jan Niemier](https://vimways.org/2019/writing-vim-plugin/). ### Remember your VimRC? Start by executing `:h runtimepath` We need to add to the runtime path a directory to be loaded and it should contain a folder called `plugin` where we have our plugin located. ``` mkdir -p /path/to/your/plugin/folder cd /path/to/your/plugin/folder vim --cmd "set rtp+=$(pwd)" . ``` We have opened up vim and added to the runtime path at opening our current folder. This is _a_ way to do this. You can also install your plugin like any other! ``` ... In your vim rc, next to fzf ... Plug '/absolute/path/to/plugin/folder' ``` But while we are developing, we don't have to have it in either, we can just execute `:so %` (much like we did in our vim rc). #### Follow along! I'll create it now and you can follow along, PLEASE ASK QUESTIONS. ================================================ FILE: lessons/intro.md ================================================ --- path: "/intro" title: "Introduction" order: "1A" section: "Introduction" description: "The gentle introduction into vim that will blow your mind and cover you in coconut oil." --- ### Motivation Often its the little choices in our lives. ### Welcome to Vim #### But first, lets meet ED ```bash > ed my-file.ts ``` You probably feel lost, press q to get the heck out of there. (on FEM I do some actual editing) Lets do it once more, but with ex ```bash ex my-file.ts ``` ex is the improved version of ed. It also comes with Bill Joy's vi mode. Go ahead, type `vi`. Welcome to vi! The predecessor of vim. :q to get out. Some fun facts about vi mode in ex. * Was originally written by a single person, Bill Joy, in 1976. * Ram was < 1k * Emacs cost $100s. Yikes ![Emacs Leraning Curve](./images/emacs-learning.png) * hjkl are movement keys because of Bill Joy's keyboard, which apparently was the only ever made... ![Bill Joys Keyboard](./images/bill-joys-keyboard.jpeg) * Bill Joy's words of wisdom * "People don't know that vi was written for a world that doesn't exist anymore" * vi was written to edit text with a 300 buad modem. ## Why do I use vim? I think I am a lot like you. I used netbeans. I was just a regular student doing regular java binary searches in Netbeans. One time I opened up vim at the encouragement of my friend... ![When I Exit Vim](./images/exit-vim.png) I saw someone at some point use vim/emacs and it blew my mind. I wanted to be good the command line. I wanted to be fast. I wanted to be covered in that sweet organic, grass fed, free range coconut oil! So I took the journey. I started in IntelliJ with ideaVim! It was painful. I am not going to lie, I almost gave up after one hour and I accomplished nothing but being frustrated. ![Vim Learning Curve](./images/vi-learning.png) But then I decided that I was going to master the simple movements and start mastering each movement one at a time until I was the best there was. Lets get started on this journey together. Lets get vimmed out of our mind. By the end of this course, hopefully you will understand what in the world coconut oil has to do with vim. Personal note. The love of the thing and Dante. ## Set Expectations You may feel confused, so ask questions. ## Who Am I? * I make youtube videos about Vim * I stream on twitch * NeoVim Plugins * Vim Deathmatch. A battle royale like vim plugin to battle for fastest vim editing skallz (lua + docker) * Sonic Pi. Creating live beats with the help of chat. (python + ncurses + docker) * Coding for Netflix (typescript) * I work at Netflix ## Who should take this course * A (want to be) developer * Desire to be excellent and to learn * You wish to defeat complacency ## Prereqs * Unix System as I cannot help you if you are on windows and you experience and problems. I suggest Plebuntu * typing skills will directly affect your experience. * `git clone https://github.com/ThePrimeagen/vim-nav-playground.git` ## Flavors of vim * VIM - Vi IMproved * 8.1+ * NeoVim (I personally use this, wont go over anything neovim specific) * spacevim * https://spacevim.org/ * onivim2 * https://onivim.io/ ## Learning Vim * vimtutor * vim-adventures * [ThePrimeagen](https://youtube.com/ThePrimeagen)'s Youtube * 6 part series * Learning lua plugin dev * VimRC * `:h usr` ================================================ FILE: lessons/mid-level-recap.md ================================================ --- path: "/pit-stop" title: "Pit Stop" order: "20A" section: "Recap" description: "There has been a lot of info. Lets recap!" --- ### The Recap Recap #### Navigation * What are some questions and thoughts? * What do you think is the hardest part? * What part surprised you the most? * How do you feel about modes? * Do you feel that deep down excitement? * You may not know this yet, but there is some really amazing keys coming up. #### Vim RC * You only know a little bit, how will you go about improving it? * Do they feel confusing? * Does VimL look ugly (its ok, it does)? #### File Navgiation * There are tons of options * Marks are pretty OP * File tree is a bit lacking. * That telescope fuzzy finder though, huh? ================================================ FILE: lessons/opening-vim.md ================================================ --- path: "/opening-vim" title: "Opening Vim" order: "4A" description: "Lets open vim for the first time!" section: "Basics" --- ## Before you do * Navigate to an empty directory (create your own). We will be doing a bit of editing. * Ensure you have no vim rc active. * If you are using vim, rename ~/.vimrc -> ~/.vimrc2 * If you are using nvim, rename ~/.config/nvim/init.vim -> ~/.config/nvim/init.vim2 ### Exercises We will be using curl to grab a few exercises throughout this class. Here is an example. #### Note Notice that i name the downloaded file then `&& vim name` ```bash curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-0-hjkl-x.md > exercise.md && vim exercise.md ``` ## One more thing before we start We are going to start from when Adam met Eve. So if you have some experience you can probably skip the next couple sections. There is always valuable information that may not know, but it may not be worth the time. When I started, vim motions were chief most important, not vim itself. This course will reverse that. Vim will be the spot light, motions will actually take a backseat. I will show you what is available though. ## Lets open vim! So you are in an empty directory, lets do this! Simply type `vim` and press enter. (Ensure you have no vim rc) ```bash > vim ``` * What are you thoughts? * What are things you expected to see? ================================================ FILE: lessons/plugins.md ================================================ --- path: "/plugins" title: "Plugins" order: "30A" section: "Plugins" description: "Lets beef up the RC!" --- Plugins! Yes vim does get better. Yes, that not so pretty language VimL is a primary vehicle in making things nice. In NeoVim you can use Lua, which is quite nice. Especially when you consider that there is a Typescript -> lua converter. Which means you can use a typed language and get type completion and create vim plugins. 42069IQ ### Get a Plugin Manager Plug! Lets follow the instructions together getting [Plug](https://github.com/junegunn/vim-plug) vim plugin manager installed ``` ... plays waiting music ... ``` ### File Navigation 2.0 Let's add a fuzzy finder, remap some things, and make it work for us. We are going to use FZF even though I Use telescope personally. The reason for this is because Telescope is neovim specific (lua) and wont work with Vim. Where as FZF has been working for some time with vim. Lets add the following lines to your vimrc ```viml call plug#begin('~/.vim/plugged') Plug 'junegunn/fzf', { 'do': { -> fzf#install() } } Plug 'junegunn/fzf.vim' call plug#end() ``` Our vimrc should look something like the following. ```viml set scrolloff=8 set number set relativenumber set tabstop=4 softtabstop=4 set shiftwidth=4 set expandtab set smartindent call plug#begin('~/.vim/plugged') Plug 'junegunn/fzf', { 'do': { -> fzf#install() } } Plug 'junegunn/fzf.vim' call plug#end() " This was from the colorscheme section colorscheme desert " Our remaps let mapleader = " " nnoremap pv :Vex nnoremap :so ~/.config/nvim/init.vim ``` Lets source our vimrc ```viml " or use your sweet remap :so % ``` Now we need to execute our plugin manager. ```viml :PlugInstall ``` ### WARNING ### My Vim Colorscheme is just a default one, its ugly Once you do this you should see the following menu ![Plug Result](./images/plug-install.png) Now we can execute `:GFiles`, lets give it a try in `vim-nav-playground`. ![FZF Result](./images/fzf-results.png) ### WHAT HAVE I TAUGHT YOU? What should we do now? * M A K E _ A _ R E M A P ```viml nnoremap :GFiles ``` ### Recap * We got a plugin manager that makes installing plugins easy! You just need the path on github to install new ones. * We installed FZF, made a remap! then showed how awesome it is. ================================================ FILE: lessons/quickfix.md ================================================ --- path: "/quickfix" title: "Quickfix Intro" order: "40A" section: "Quickfix Lists" description: "One of the last components of the vim experience." --- Quickfix lists were very mysterious to me when I started with vim. I knew that there was a list of items and that it would pop up and if I left them I didn't know how to go back. Little did I know how useful they are, especially when navigating histories, such as git. Lets create a quick quickfix open up vim in the root of `vim-nav-playground` ```bash vim . ``` now execute ```viml :grep SOCKET_OPEN **/*.(c\|h) ``` You should see something like this: ![QuickFix Result](images/quickfix-grep-result.png) Once you press `` you will see that the results disappear and you are navigated to the first result. What should you do? The proper answer is consult the `:h quickfix` page, but since I am here, let me walk you through some actions. When dealing with a quickfix you need 3 commands primarily, `:copen`, `:cnext`, and `:cprev`. Lets try `:copen` first. Once you have executed it you should see the following. ![QuickFix Open](images/quickfix-open.png) Lets select the other option. This will cause the above buffer to navigate and the quickfix list will remain open. Oh no, how do we get back to the quickfix list? you could navigate back by executing a copen ```viml :copen ``` you could force navigate back by closing the current window. There is nothing left but going back to the remaining buffer that is open. ```viml :q ``` You can window navigate. You can start a window navigation by pressing ``. What do you think you should press next to navigate towards the quickfix menu? If you said `j` you are awesome. YES! Use your vim movements you already know! Don't you love when things come full circle! Anywho, so you can guess you can move betwixt splits by press `` and `h`, `j`, `k`, or `l`. This is great, but it kind of sucks. ### WHAT DO WE DO NOW??? If I have to say make a remap one more time. ```viml " I don't know if I love these remaps yet. I am considering doing " c(k|j|o) nnoremap :cnext nnoremap :cprev nnoremap :copen ``` ================================================ FILE: lessons/some-javascript.md ================================================ --- path: "/some-javascript" title: "some javascript" order: "72A" section: "Misc Content" description: "This is the first exercise to try out." --- // Delete the description. // That seems slow right? // Delete // try typing, with your cursor on the first line the following. // 7dd // What does that mean about j and k? // But we have a problem down we? function foo(a, b, c) { switch (a) { case 1: return b + c; break; default: return a * b + c; } throw new Error("This should never happen"); } if (true) { console.log(foo(1, 5, 7)); } ================================================ FILE: lessons/terminology.md ================================================ --- path: "/terms" title: "The Terminology" order: "2A" description: "This goes over some basic vocabulary that will be used" section: "Introduction" --- ## Files, Buffers, Windows, Splits, and Tabs We all know what files are (or so you think [LiveOverflow's Video on Files](https://www.youtube.com/watch?v=VVdmmN0su6E)) but there is a bit more when it comes to how vim handles them. ### Buffer A buffer contains the text of the file and is what you edit. `:h buffer` ### Window Contains a buffer to display. Windows can be closed but the underlying buffer can remain in memory. `:h window` ### Tabs A tab is like another viewport. You can have many windows|splits open per tab. `:h tab` ### Splits A split simply refers to splitting the viewport in N sections (various sizing and orientations available) to display windows. `:h split` ## Other Terminology ![Terms](./images/view-and-terms.png) ## Help Menu Help menu can be accessed by typing `:h`. There is _so much documentation_, that is pretty good, available. If you find yourself lost, RTFM (at least that is what they tell me). ## Motion A command that moves the cursor (taken straight from the help docs, `:h motion`). ## Abbreviations Ctrl+a will be abbreviated ``. This is also how its referenced in VimL, Vim's editor language. Enter will often be abbr as `` Tab, Escape, and space will be ``, ``, `` When you see something that starts with a `:` that means it will execute a command. ================================================ FILE: lessons/vim-my-way.md ================================================ --- path: "/vim-my-way" title: "Vim My Way" order: "9A" description: "Ok, so vim looked pretty ugly. Lets make it feel the way we want it!" section: "The VimRC" --- Ok, how much did you hate having to do the `zz`? It is annoying. Instead, lets tell vim to do it for us. ```viml :set scrolloff=8 ``` Now lets scroll around. How does it feel. SO GOOD. ---- Lets quit out of our previous vim experience and curl down this file. ``` curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/some-javascript.md > exercise.js && vim exercise.js ``` After following the delete instructions you should notice that its really hard to count how many lines of code huh? Type the following ```viml :set number ``` You will notice a new column has been added and now you have line numbers! Yeah its pretty easy to a jump, but also not all that easy. Math can be hard sometimes. ```viml " sets relative numbers :set relativenumber " turns off relative numbers :set norelativenumber ``` Wow. Much better huh? You can jump easily now. You may not be good at jumping yet, but you can see its a lot easier. Lets play around. Put your cursor on `foo` and press `v10j`. What happened? Press `V` to highlight the whole line. Ok lets leave vim, `:q` and reopen back up the file either by reexecuting the curl command or simply executing `vim exercise.js` What happened? Commands you execute only live for the session you have vim open. This is painful right? Well, actually not. There is a `.vimrc`! All is not horrible. So lets create one! Create a vimrc in the correct location with the following content. ```viml set scrolloff=8 set number set relativenumber ``` Open up vim again. Ohh yeah! This is great, but those tabs have to go (tabs vs spaces anyone?)! Add these lines to your vimrc and restart vim. ```viml set tabstop=4 softtabstop=4 set shiftwidth=4 set expandtab set smartindent ``` Now restart vim... what just happened? Pretty cool huh? ### How do you know what is available? * You can google. Sometimes that is a good thing. * `h options` * `h ` * `h ` ================================================ FILE: package.json ================================================ { "name": "vim-fundamentals", "description": "education site for VIM fundamentals", "version": "1.0.0", "author": "Brian Holt ", "dependencies": { "bootstrap": "^5.1.3", "code-mirror-themes": "^1.0.0", "front-matter": "^4.0.2", "gatsby": "^4.6.2", "gatsby-cli": "^4.6.1", "gatsby-link": "^4.6.0", "gatsby-plugin-layout": "^3.6.0", "gatsby-plugin-react-helmet": "^5.6.0", "gatsby-plugin-sharp": "4.6.0", "gatsby-remark-autolink-headers": "^5.6.0", "gatsby-remark-copy-linked-files": "^5.6.0", "gatsby-remark-images": "^6.6.0", "gatsby-remark-prismjs": "^6.6.0", "gatsby-source-filesystem": "^4.6.0", "gatsby-transformer-remark": "^5.6.0", "is-url-superb": "^6.1.0", "parse-markdown-links": "^1.0.4", "prismjs": "^1.26.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-helmet": "^6.1.0" }, "keywords": [ "gatsby", "gatsby-starter", "course", "education" ], "license": "(CC-BY-NC-4.0 OR Apache-2.0)", "main": "n/a", "scripts": { "build": "gatsby build --prefix-paths", "csv": "node csv.js", "dev": "gatsby develop", "format": "prettier --write \"src/**/*.{js,jsx,md,css}\"", "lint": "eslint \"src/**/*.{js,jsx}\"" }, "devDependencies": { "@babel/polyfill": "^7.12.1", "babel-eslint": "^10.1.0", "core-js": "^3.21.0", "eslint": "^8.8.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.25.4", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-react": "^7.28.0", "prettier": "^2.5.1" } } ================================================ FILE: save.sh ================================================ #!/usr/bin/env bash cp -r course-website/lessons/* lessons ================================================ FILE: src/components/TOCCard.css ================================================ .main-card { border: 1px solid #ccc; border-radius: 8px; width: 100%; margin: 0; overflow: hidden; background-color: white; } .lesson-title { font-size: 20px; padding: 15px 30px; } .lesson-content { padding: 0 15px 15px 15px; line-height: 1.5; } .sections-name { list-style: none; } .lesson-section-title { margin-top: 25px; } ================================================ FILE: src/components/TOCCard.js ================================================ import React from "react"; import Link from "gatsby-link"; import * as helpers from "../util/helpers"; import "./TOCCard.css"; const sortFn = helpers.sorter; const LessonCard = ({ content, title }) => { console.log(sortFn); const sections = content .map(lesson => lesson.node.frontmatter) .sort(sortFn) .reduce((acc, lesson) => { if (!acc.length) { acc.push([lesson]); return acc; } const lastSection = acc[acc.length - 1][0].section.split(",")[0]; if (lastSection === lesson.section.split(",")[0]) { acc[acc.length - 1].push(lesson); } else { acc.push([lesson]); } return acc; }, []); return (

{title}

    {sections.map(section => (

  1. {section[0].section}

      {section.map(lesson => (
    1. {lesson.title}
      2. ))}
    2. ))}
); }; export default LessonCard; ================================================ FILE: src/layouts/index.css ================================================ .gradient { background: rgb(96, 108, 136); background: linear-gradient( to bottom, rgb(96, 108, 136) 0%, rgb(63, 76, 107) 100% ); } .navbar { border-bottom: 1px solid #ccc; position: fixed; width: 100%; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; } .navbar h1 { font-size: 20px; margin: inherit; padding: inherit; font-weight: bold; } .navbar h2, .navbar h3 { font-size: 14px; margin: inherit; padding: inherit; text-transform: uppercase; color: white; } .button { border-radius: 10px; background: black; color: white; padding: 15px 20px; display: flex; justify-content: center; align-items: center; text-decoration: none; } .button a { color: white; text-decoration: none; } .button a:hover { text-decoration: underline; } .jumbotron.gradient { color: white; text-transform: uppercase; font-weight: bold; } .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; background-color: #e9ecef; border-radius: .3rem; } @media (min-width: 576px) { .jumbotron { padding: 4rem 2rem; } } .navbar-brand.navbar-brand { text-transform: uppercase; color: white; font-weight: bold; } .navbar-brand.navbar-brand:hover { color: #777; } .navbar-brand.navbar-brand:focus { color: white; } .lesson { margin: 15px; padding: 15px; background-color: #fff; border-radius: 8px; overflow: scroll; } .lesson p { clear: both; } .lesson-links { font-size: 18px; padding: 15px 0; margin: 20px; } .next { float: right; } .prev { float: left; } .lesson-title { color: white; text-transform: uppercase; font-weight: bold; } .klipse-result { border: 1px solid #90b4fe; padding-top: 8px; position: relative; width: 100%; } .klipse-result .CodeMirror-wrap { width: 100%; border-color: transparent; } .klipse-result::before { content: "result"; background-color: white; position: absolute; top: -13px; height: 13px; } .language-htm, .language-css, .language-js, .language-json { width: 100%; } .gatsby-highlight { /* border: 1px solid black; */ padding: 4px; border-radius: 4px; display: flex; justify-content: space-between; flex-direction: column; align-items: stretch; } .CodeMirror-wrap { width: 100%; font-size: 12px; height: inherit; margin-bottom: 12px; } .CodeMirror-gutters { height: inherit !important; } .klipse-snippet > .CodeMirror { border: none; width: 100%; } .gatsby-highlight > .klipse-snippet { border: 1px solid #90b4fe; width: 100%; border-right: none; position: relative; margin-bottom: 15px; } .doggos { width: 100%; border: 1px solid #666; border-radius: 5px; } ================================================ FILE: src/layouts/index.js ================================================ import React from "react"; import Link from "gatsby-link"; import Helmet from "react-helmet"; import { graphql, StaticQuery } from "gatsby"; import "bootstrap/dist/css/bootstrap.css"; import "prismjs/themes/prism-solarizedlight.css"; import "code-mirror-themes/themes/monokai.css"; import "./index.css"; // import jpg from "../../static/posterframe.jpg"; const TemplateWrapper = props => { return ( { const frontmatter = props.data && props.data.markdownRemark ? props.data.markdownRemark.frontmatter : null; return (

{data.site.siteMetadata.title}

{!frontmatter ? null : (

{`${frontmatter.section} – ${frontmatter.title}`}

)}

VIM Course Videos ▶️ 

{props.children}
); }} query={graphql` query HomePage($path: String!) { markdownRemark(frontmatter: { path: { eq: $path } }) { html frontmatter { path title order section description } } site { pathPrefix siteMetadata { title subtitle description keywords } } } `} /> ); }; export default TemplateWrapper; ================================================ FILE: src/pages/404.js ================================================ import React from "react"; const NotFoundPage = () => (

NOT FOUND

You just hit a route that doesn't exist... the sadness.

); export default NotFoundPage; ================================================ FILE: src/pages/index.css ================================================ body { background-color: #eee; } .index { width: 97%; max-width: 750px; margin: 0 auto; margin-top: 40px; } .main { margin-top: 80px; } .example-table { border-collapse: separate; } .example-table td { border: 1px solid black; width: 20px; height: 20px; } .example-table .current { background-color: #fcc; } .example-table .n { border-top-color: transparent; } .example-table .s { border-bottom-color: transparent; } .example-table .e { border-right-color: transparent; } .example-table .w { border-left-color: transparent; } .lesson-container { max-width: 850px; margin: 0 auto; } .lesson { margin: 20px; } .lesson-content { padding: 20px; } .lesson h1 { margin: 0; padding: 20px; } .lesson-content table { } .lesson-content td { border: 1px solid black; padding: 8px; } .lesson-content td input { min-width: 300px; } .lesson-flex { display: flex; flex-direction: column; justify-content: center; align-items: center; } .random-tweet { width: 100%; margin-top: 100px; } .fem-link { text-align: center; } ================================================ FILE: src/pages/index.js ================================================ import React from "react"; import { StaticQuery, graphql } from "gatsby"; import Card from "../components/TOCCard"; import "./index.css"; const IndexPage = () => ( (

{props.site.siteMetadata.title}

{props.site.siteMetadata.subtitle}

)} /> ); export default IndexPage; ================================================ FILE: src/templates/lessonTemplate.js ================================================ import React from "react"; import Link from "gatsby-link"; import { graphql } from "gatsby"; import * as helpers from "../util/helpers"; const sortFn = helpers.sorter; export default function Template(props) { let { markdownRemark, allMarkdownRemark } = props.data; // data.markdownRemark holds our post data const sections = allMarkdownRemark.edges .map(lesson => lesson.node.frontmatter) .sort(sortFn); const { frontmatter, html } = markdownRemark; const index = sections.findIndex(el => el.path === frontmatter.path); const prevLink = index > 0 ? ( {"← " + sections[index - 1].title} ) : null; const nextLink = index < sections.length - 1 ? ( {sections[index + 1].title + " →"} ) : null; return (

{frontmatter.title}

{frontmatter.date}

{prevLink} {nextLink}
); } export const pageQuery = graphql` query LessonByPath($path: String!) { markdownRemark(frontmatter: { path: { eq: $path } }) { html frontmatter { path title order section description } } allMarkdownRemark(limit: 1000) { edges { node { frontmatter { order path title } } } } } `; ================================================ FILE: src/util/helpers.js ================================================ function splitSections(str) { const validSectionTest = /^\d+[A-Z]+$/; const numbersRegex = /^\d+/; const lettersRegex = /[A-Z]+$/; if (!validSectionTest.test(str)) { throw new Error( `${str} does not match the section format. It must be , like 16A or 5F (case sensitive)` ); } return [numbersRegex.exec(str)[0], lettersRegex.exec(str)[0]]; } const getCharScore = str => str .split("") .map((char, index) => char.charCodeAt(0) * 10 ** index) .reduce((acc, score) => acc + score); function sorter(a, b) { let aOrder, bOrder; if (a.attributes && a.attributes.order) { aOrder = a.attributes.order; bOrder = b.attributes.order; } else { aOrder = a.order; bOrder = b.order; } const [aSec, aSub] = splitSections(aOrder); const [bSec, bSub] = splitSections(bOrder); // sections first if (aSec !== bSec) { return aSec - bSec; } // subsections next return getCharScore(aSub) - getCharScore(bSub); } module.exports.splitSections = splitSections; module.exports.sorter = sorter; ================================================ FILE: todo.md ================================================ * Recap Basics * Recap Help / Options * Execution Flow