<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[The Nawaz Journal]]></title><description><![CDATA[A life long learner and tech tinkerer. Making and breaking systems. Learning from mistakes.]]></description><link>https://blog.nawaz.info</link><image><url>https://cdn.hashnode.com/res/hashnode/image/upload/v1598732229089/gj7hur1QH.png</url><title>The Nawaz Journal</title><link>https://blog.nawaz.info</link></image><generator>RSS for Node</generator><lastBuildDate>Tue, 12 May 2026 03:17:36 GMT</lastBuildDate><atom:link href="https://blog.nawaz.info/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Back to the Blog: Returning to Technical Writing After a Long Hiatus]]></title><description><![CDATA[So... I’m blogging again.
It’s been a while. Maybe longer than I’d like to admit. If you’ve ever stepped away from technical blogging or any creative outlet, you’ll understand the weird cocktail of excitement and hesitation that comes with coming bac...]]></description><link>https://blog.nawaz.info/back-to-the-blog-returning-to-technical-writing-after-a-long-hiatus</link><guid isPermaLink="true">https://blog.nawaz.info/back-to-the-blog-returning-to-technical-writing-after-a-long-hiatus</guid><category><![CDATA[Blogging]]></category><category><![CDATA[Technical writing ]]></category><category><![CDATA[journal]]></category><category><![CDATA[technology]]></category><dc:creator><![CDATA[Shah Nawaz]]></dc:creator><pubDate>Thu, 25 Dec 2025 06:00:25 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1766476179742/4c00ff65-402c-4609-8a97-3fc766905da4.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>So... I’m blogging again.</p>
<p>It’s been a while. Maybe longer than I’d like to admit. If you’ve ever stepped away from technical blogging or any creative outlet, you’ll understand the weird cocktail of excitement and hesitation that comes with coming back.</p>
<p>But here I am. And maybe you’re thinking of doing the same. So let’s talk about it.</p>
<h3 id="heading-why-i-stopped-blogging">Why I Stopped Blogging</h3>
<p>Life happens. Work got intense. Priorities shifted. The "write about this later" tab kept growing dust. Somewhere along the way, I convinced myself that I needed to have something <em>big</em>, <em>profound</em>, or <em>perfect</em> to say before hitting “publish.”</p>
<p>But here's the thing: the best blog posts aren't necessarily revolutionary. They’re real. They share <em>what you’ve learned</em>, <em>what you’re struggling with</em>, and <em>what excites you</em>. And over time, that builds something valuable for readers <em>and</em> for yourself.</p>
<h3 id="heading-why-im-starting-again">Why I’m Starting Again</h3>
<p>Because technical blogging is powerful.<br />Not in the influencer, “build a massive audience” kind of way (though that can happen too), but in the <em>personal growth</em>, <em>clarity of thought</em>, and <em>community building</em> kind of way.</p>
<p>Writing forces you to slow down, organize your ideas, and explain them clearly. That process alone sharpens your understanding like nothing else. It’s like pair programming with your past self and future readers.</p>
<p>And honestly? I miss that.</p>
<h3 id="heading-getting-back-into-the-flow">Getting Back Into the Flow</h3>
<p>If you're like me and thinking of jumping back in, here’s what’s helping me ease into it without overthinking.</p>
<h4 id="heading-1-start-small">1. <strong>Start Small.</strong></h4>
<p>You don’t need a 3,000-word deep dive on distributed systems. Write about that cool CLI trick you used this week. Or that weird bug you fixed. Or a “How I thought X worked, but it actually works like Y” post.</p>
<h4 id="heading-2-be-honest">2. <strong>Be Honest.</strong></h4>
<p>It’s okay to say, “I’m relearning this myself.” People love authenticity. You're not writing a textbook. You're writing a story. Your story.</p>
<h4 id="heading-3-focus-on-consistency-not-perfection">3. <strong>Focus on Consistency, Not Perfection.</strong></h4>
<p>One post is better than none. A short post is better than a draft that never sees the light of day. Set a low bar. You can always raise it later.</p>
<h4 id="heading-4-write-for-yourself-first">4. <strong>Write for Yourself First.</strong></h4>
<p>Even if no one reads it (spoiler: someone will), you’re creating your own reference material. And your future self will thank you.</p>
<h4 id="heading-5-reconnect-with-the-community">5. <strong>Reconnect With the Community.</strong></h4>
<p>Comment on other blogs. Share your post with friends or on dev communities. Blogging doesn’t have to be a solo act.</p>
<h3 id="heading-so-whats-next">So, What’s Next?</h3>
<p>I’m committing to writing again. Maybe weekly, maybe biweekly. I’ll write about things I’m learning, projects I’m working on, and the occasional rant about why some error messages still suck in 2025.</p>
<p>If you're thinking of coming back to blogging too, consider this your nudge. Dust off that draft folder. Hit publish. Doesn’t matter if it's perfect.</p>
<p>Just start.</p>
<hr />
<p><strong>TL;DR</strong>: It’s never too late to return to technical blogging. You don’t need to be perfect, just honest and curious. Let’s build and learn out loud. Again.</p>
]]></content:encoded></item><item><title><![CDATA[AI Agents: Unlocking Future Workflows]]></title><description><![CDATA[Introduction
In the fast-evolving world of AI, "agents" have become a buzzword, promising autonomous systems that go beyond simple chatbots. Drawing from Andrew Ng's seminal talk at Sequoia Capital's AI Ascent in March 2024, this post explores what A...]]></description><link>https://blog.nawaz.info/ai-agents-unlocking-future-workflows</link><guid isPermaLink="true">https://blog.nawaz.info/ai-agents-unlocking-future-workflows</guid><category><![CDATA[AI]]></category><category><![CDATA[agentic AI]]></category><category><![CDATA[llm]]></category><category><![CDATA[automation]]></category><category><![CDATA[software development]]></category><category><![CDATA[Productivity]]></category><dc:creator><![CDATA[Shah Nawaz]]></dc:creator><pubDate>Thu, 25 Sep 2025 16:56:14 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1758811662605/733c2b82-8ad7-49dc-9de2-f696d905f4b4.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h2 id="heading-introduction">Introduction</h2>
<p>In the fast-evolving world of AI, "agents" have become a buzzword, promising autonomous systems that go beyond simple chatbots. Drawing from Andrew Ng's seminal talk at Sequoia Capital's AI Ascent in March 2024, this post explores what AI agents really are, how they work, and why they're set to transform industries. Andrew Ng, a pioneer in deep learning, argues that agentic workflows’ iterative processes mimicking human thinking could deliver GPT-5-level performance using today's models like GPT-4. Let's dive in.</p>
<h2 id="heading-what-makes-an-ai-agent">What Makes an AI Agent?</h2>
<p>Traditional AI interactions are "non-agentic": You prompt a model like ChatGPT, and it generates a response in one go. It's impressive but limited like asking someone to write an essay without revisions.</p>
<p>Enter agentic workflows. These are looped processes where the AI plans, acts, observes, and refines. For example, to write an essay, an agent might outline, research via web tools, draft, self-critique, and revise. The result? Dramatically better outputs.</p>
<p>Ng illustrates this with benchmarks:</p>
<ul>
<li><p><strong>HumanEval (Coding)</strong>: Zero-shot GPT-4 solves 67% of problems. But wrap GPT-3.5 in an agentic loop, and it hits ~85%—surpassing the more advanced model (Evaluating Large Language Models Trained on Code, Chen et al., 2021).</p>
</li>
<li><p><strong>GSM8K (Math Problems)</strong>: Similar gains, showing agents amplify existing models.</p>
</li>
</ul>
<p>True agents aren't fully autonomous yet, but these workflows are a crucial step toward AGI.</p>
<h2 id="heading-the-four-pillars-of-agentic-design">The Four Pillars of Agentic Design</h2>
<p>Andrew Ng outlines four patterns:</p>
<ol>
<li><p><strong>Reflection</strong>: The AI reviews its own work. Prompt it to "check your code for bugs and efficiency," and it iterates. Papers like Self-Refine show GPT-4 improving itself without extra data.</p>
</li>
<li><p><strong>Tool Use</strong>: Agents call external resources. Gorilla fine-tunes models for API calls, outperforming GPT-4; MM-REACT integrates vision tools for multimodal tasks.</p>
</li>
<li><p><strong>Planning</strong>: Break tasks into steps with Chain-of-Thought prompting. It turns flat performance curves into steep gains on reasoning benchmarks.</p>
</li>
<li><p><strong>Multi-Agent Collaboration</strong>: Teams of agents specialize and debate. ChatDev simulates a company (CEO, coder, tester) to build software; multi-agent debates (e.g., GPT vs. Gemini) boost accuracy.</p>
</li>
</ol>
<p>These patterns are messy but potent. Reflection is reliable, while multi-agent can be "mind-blowing" but inconsistent.</p>
<h2 id="heading-building-and-applying-agents-today">Building and Applying Agents Today</h2>
<p>You don't need code. Tools like n8n, CrewAI, Autogen, LangChain let you prototype workflows. Ng advises focusing on fast models for more iterations. Speed enables 100x loops, potentially outpacing slower, smarter models.</p>
<p>Applications? Automate coding, research, or even game development. For businesses, this means productivity leaps; for developers, it's a new paradigm.</p>
<h2 id="heading-recommended-reading">Recommended Reading</h2>
<ol>
<li><p>Reflection</p>
<ul>
<li><p>Self-Refine: Iterate Refinement with Self-Feedback, Madaan et al. (2023)</p>
</li>
<li><p>Reflexion: Language Agents with Verbal Reinforcement Learning, Shinn et al. (2023)</p>
</li>
</ul>
</li>
<li><p>Tool Use</p>
<ul>
<li><p>Gorilla: Large Language Model Connected with Massive APIs, Patil et al. (2023)</p>
</li>
<li><p>MM-REACT: Prompting ChatGPT for Multimodal Reasoning and Action, Yang et al. (2023)</p>
</li>
</ul>
</li>
<li><p>Planning</p>
<ul>
<li><p>Chain-of-Thought Prompting Elicit Reasoning in Large Language Models, Wei et al. (2022)</p>
</li>
<li><p>HuggingGPT: Solving AI Tasks with ChatGPT and its Friends in Hugging Face, Shen et al. (2023)</p>
</li>
</ul>
</li>
<li><p>Multi-Agent Collaboration</p>
<ul>
<li><p>Communicative Agents for Software Development, Qian et al. (2023)</p>
</li>
<li><p>AutoGen: Enabling Next-Gen LLM Applications via Multi-Agent Conversation, Wu et al. (2023)</p>
</li>
</ul>
</li>
</ol>
<p>AI agents aren't hype, they're here. By embracing agentic workflows, we can unlock unprecedented potential. The set of tasks that AI can do will expand dramatically because of agentic workflows. We have to get used to delegating tasks to AI agents and patiently wait for a response.</p>
]]></content:encoded></item><item><title><![CDATA[I switched to Neovim from VSCode as my main IDE]]></title><description><![CDATA[Switching from Visual Studio Code (VSCode) to Neovim as your main IDE can be a transformative experience. While both editors have their strengths and weaknesses, many developers find that Neovim offers a unique blend of speed, customizability, and ke...]]></description><link>https://blog.nawaz.info/i-switched-to-neovim-from-vscode-as-my-main-ide</link><guid isPermaLink="true">https://blog.nawaz.info/i-switched-to-neovim-from-vscode-as-my-main-ide</guid><category><![CDATA[neovim]]></category><category><![CDATA[Productivity]]></category><category><![CDATA[IDEs]]></category><category><![CDATA[coding]]></category><category><![CDATA[lazyvim]]></category><category><![CDATA[vim]]></category><category><![CDATA[ vscode]]></category><category><![CDATA[programming]]></category><dc:creator><![CDATA[Shah Nawaz]]></dc:creator><pubDate>Tue, 17 Dec 2024 06:29:54 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1734416356275/57dc106f-24d8-44d7-82d0-93b78ea31a0e.webp" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Switching from Visual Studio Code (VSCode) to Neovim as your main IDE can be a transformative experience. While both editors have their strengths and weaknesses, many developers find that Neovim offers a unique blend of speed, customizability, and keyboard-driven efficiency that can significantly enhance their productivity. In this blog post, I will share my journey of switching to Neovim, the pros and cons of each editor, and why I chose to embrace Neovim despite the controversies and mixed opinions surrounding it.</p>
<h2 id="heading-my-journey-to-neovim"><strong>My Journey to Neovim</strong></h2>
<p>After using VSCode for more than 5 years, I found myself increasingly frustrated with its performance and the distractions that came with its extensive plugin ecosystem. While VSCode is known for its user-friendly interface and rich feature set, I felt that it was becoming more of a hindrance than a help. 5 years ago I wrote <a target="_blank" href="https://blog.nawaz.info/trying-out-vim">this</a> blog post about trying out Vim. But in practice I never picked up vim as my text editor until a year ago. I was using Vim keybindings in VSCode. Later i started looking into Neovim setups and workflows. The desire for a more streamlined and efficient coding experience led me to explore Neovim. Though I am not yet efficient in Neovim but really enjoying the learning process and using <strong>lazy.nvim</strong> made it easier for me to use.</p>
<h2 id="heading-pros-of-using-neovim"><strong>Pros of Using Neovim</strong></h2>
<ol>
<li><p><strong>Speed</strong>: One of the most significant advantages of Neovim is its speed. With a startup time of around 94 milliseconds (even with multiple plugins), it is far quicker than VSCode, which can take several seconds to launch, even without extensions. This performance boost allows me to jump into coding almost instantly.</p>
</li>
<li><p><strong>Customizability</strong>: Neovim offers unparalleled customizability. Users have complete control over their editor's appearance and functionality through configuration files. This flexibility allows me to create an environment tailored specifically to my workflow, enhancing my overall productivity.</p>
</li>
<li><p><strong>Keyboard-Centric Workflow</strong>: The modal nature of Neovim encourages a keyboard-driven approach to coding. Once familiar with the keybindings, I found that I could navigate and edit text much more efficiently than in VSCode, where reliance on the mouse can slow down productivity.</p>
</li>
<li><p><strong>Minimalism</strong>: Switching to Neovim has helped me embrace a more minimalist approach to coding. I realized that many features I thought were essential in VSCode were actually unnecessary distractions. This shift in mindset has allowed me to focus on what truly matters—writing code.</p>
</li>
<li><p><strong>Community and Resources</strong>: The Neovim community is vibrant and supportive, providing numerous resources for learning and troubleshooting. The availability of plugin managers like <strong>lazy.nvim</strong> makes it easier to manage configurations and enhance functionality without overwhelming complexity.</p>
</li>
</ol>
<h2 id="heading-cons-of-using-neovim"><strong>Cons of Using Neovim</strong></h2>
<ol>
<li><p><strong>Steep Learning Curve</strong>: Transitioning from VSCode to Neovim requires a significant investment in time and effort. Learning Vim keybindings and configuring the editor can be daunting at first, especially for those accustomed to the simplicity of point-and-click interfaces.</p>
</li>
<li><p><strong>Initial Setup Complexity</strong>: Setting up Neovim with all the desired plugins and configurations can be time-consuming. Unlike VSCode, which offers a more straightforward installation process for extensions, Neovim requires users to manually configure their environment.</p>
</li>
<li><p><strong>Missing Features</strong>: While many features available in VSCode have equivalents in Neovim, there are some functionalities that may not translate directly or require additional configuration (e.g., advanced search capabilities or integrated debugging tools).</p>
</li>
<li><p><strong>Potential Frustration</strong>: For those who are not willing to invest the time needed to learn and customize Neovim, it can lead to frustration. Some users may find themselves longing for the convenience of VSCode’s built-in features and extensions.</p>
</li>
</ol>
<h2 id="heading-why-i-chose-neovim-despite-controversies"><strong>Why I Chose Neovim Despite Controversies</strong></h2>
<p>Despite the mixed opinions surrounding Neovim—ranging from advocates praising its efficiency to critics highlighting its steep learning curve—I ultimately chose it for several reasons:</p>
<ul>
<li><p><strong>Increased Productivity</strong>: After dedicating time to learn Neovim, I found that my productivity skyrocketed compared to my time spent in VSCode. Many users report being two to five times more productive after fully embracing Neovim's capabilities.</p>
</li>
<li><p><strong>Satisfaction from Mastery</strong>: There is immense satisfaction in mastering an editor you have configured yourself. The process of customizing my environment has not only improved my workflow but also rekindled my love for programming.</p>
</li>
<li><p><strong>Performance Over Features</strong>: While VSCode offers many features out-of-the-box, I found that performance was often compromised for convenience. In contrast, Neovim’s speed and responsiveness allow me to focus on coding without lag or interruptions.</p>
</li>
<li><p><strong>Community Support</strong>: The active community around Neovim provides ample resources for learning and troubleshooting, making it easier for newcomers to get up to speed despite initial challenges.</p>
</li>
</ul>
<h2 id="heading-conclusion"><strong>Conclusion</strong></h2>
<p>Switching from VSCode to Neovim is a journey filled with challenges and triumphs. By embracing the speed, customizability, and keyboard-driven efficiency that Neovim offers, I have transformed my coding experience into one that is both productive and satisfying. While there are valid concerns about the learning curve and initial setup complexity, the long-term benefits far outweigh these drawbacks for those willing to invest the time.</p>
<p>For anyone considering making the switch, I encourage you to dive into the world of Neovim—embrace the challenge, customize your environment, and discover how this powerful editor can enhance your programming workflow.</p>
]]></content:encoded></item><item><title><![CDATA[My NextJS Setup]]></title><description><![CDATA[If you are starting out with Next.js and Server Side Rendering for the first time, then the initial project setup may take a significant amount of your time. It is not likely that you will be working with plain Next.js. You should require some toolin...]]></description><link>https://blog.nawaz.info/my-nextjs-setup</link><guid isPermaLink="true">https://blog.nawaz.info/my-nextjs-setup</guid><category><![CDATA[General Programming]]></category><category><![CDATA[JavaScript]]></category><category><![CDATA[TypeScript]]></category><category><![CDATA[React]]></category><category><![CDATA[Next.js]]></category><dc:creator><![CDATA[Shah Nawaz]]></dc:creator><pubDate>Fri, 25 Sep 2020 20:25:00 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1601065489650/mSuRjua95.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>If you are starting out with Next.js and Server Side Rendering for the first time, then the initial project setup may take a significant amount of your time. It is not likely that you will be working with plain Next.js. You should require some tooling and a manageable and scalable project structure. In this post, I will share a Next.js boilerplate structure that I am using. </p>
<p><a target="_blank" href="https://nextjs.org/">Next.js</a> is a React framework that offers Server-Side Rendering (SSR) and Static Site Generation (SSG) along with some other handy features like:</p>
<ul>
<li>Incremental Static Generation</li>
<li>TypeScript Support</li>
<li>Fast Refresh</li>
<li>Filesystem-based Routing</li>
<li>API Routes</li>
<li>Built-in CSS Support</li>
<li>Code Splitting and Bundling</li>
</ul>
<p>I will give a brief overview of my Next.js setup with TypeScript, ESLint, Jest, and TailwindCSS from scratch. This will give you a good starting point for your Next.js projects. So, If you are starting a new project in Next but you are not sure how to set it up then this post is for you. This might save you some time on the initial setup and get you up and running quickly. Let's get started.</p>
<h2 id="installing-nextjs">Installing NextJS</h2>
<p>We will use <code>create-next-app</code> to generate your Next.js application. You need to have NodeJS 10.13 or later installed. We will use <code>npm</code> as a package manager. </p>
<pre><code class="lang-shell">npx create-next-app my_next_app
</code></pre>
<p>This will create a fresh Next.js application in the <code>my_next_app</code> directory. The folder-structure of your app should look like this:</p>
<pre><code><span class="hljs-selector-tag">my_next_app</span>
├── <span class="hljs-selector-tag">node_modules</span>
├── <span class="hljs-selector-tag">package</span><span class="hljs-selector-class">.json</span>
├── <span class="hljs-selector-tag">package-lock</span><span class="hljs-selector-class">.json</span>
├── <span class="hljs-selector-tag">pages</span>
│   ├── <span class="hljs-selector-tag">api</span>
│   │   └── <span class="hljs-selector-tag">hello</span><span class="hljs-selector-class">.js</span>
│   ├── _<span class="hljs-selector-tag">app</span><span class="hljs-selector-class">.js</span>
│   └── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.js</span>
├── <span class="hljs-selector-tag">public</span>
│   ├── <span class="hljs-selector-tag">favicon</span><span class="hljs-selector-class">.ico</span>
│   └── <span class="hljs-selector-tag">vercel</span><span class="hljs-selector-class">.svg</span>
├── <span class="hljs-selector-tag">README</span><span class="hljs-selector-class">.md</span>
└── <span class="hljs-selector-tag">styles</span>
    ├── <span class="hljs-selector-tag">globals</span><span class="hljs-selector-class">.css</span>
    └── <span class="hljs-selector-tag">Home</span><span class="hljs-selector-class">.module</span><span class="hljs-selector-class">.css</span>
</code></pre><p>Now, we will change this structure a little bit. We will create a directory called <code>src</code> in the root of our project and move <code>pages</code>, <code>public</code> and <code>styles</code> directories in the <code>src</code> directory. We can also make directories like <code>components</code>, <code>helpers</code>, 'lib' etc in the <code>src</code> directory to organize everything properly. Now start our dev server.</p>
<pre><code><span class="hljs-built_in">npm</span> run dev
</code></pre><p>This will run the Next.js development server on <code>127.0.0.1:3000</code>. If everything is fine then you should see the Next.js project starter page on your <code>localhost:3000</code>.</p>
<h2 id="setting-up-typescript">Setting Up TypeScript</h2>
<p>It is very easy to set up <a target="_blank" href="https://www.typescriptlang.org/">TypeScript</a>  in your Next.js project. First, install TypeScript along with React and Node types.</p>
<pre><code><span class="hljs-built_in">npm</span> install --save-dev typescript @types/react @types/node
</code></pre><p>Now, we can change the <code>.js</code> files to <code>.ts(x)</code> files. </p>
<pre><code>src/pages/api/hello.js -&gt; hello.ts
src/pages/_app.js -&gt; _app.tsx
src/pages/index.js -&gt; index.tsx
</code></pre><p>Hope you get the idea. Now replace the content of your <code>src/pages/_app.tsx</code> with the following code:</p>
<pre><code class="lang-javascript"><span class="hljs-comment">/* 
 * _app.tsx file
 */</span>
<span class="hljs-keyword">import</span> { AppProps } <span class="hljs-keyword">from</span> <span class="hljs-string">'next/app'</span>

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params">{ Component, pageProps }: AppProps </span>)</span>{
  <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Component</span> {<span class="hljs-attr">...pageProps</span>} /&gt;</span></span>
}

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App
</code></pre>
<p>Like the above, we need to replace all the <code>js</code> code to its equivalent <code>ts</code> code. After that stop the dev server (if it's running) and start it again. Next.js will automatically detect TypeScript and generate a <code>tsconfig.json</code> file and a <code>next-env.d.ts</code> file for you. Your basic TypeScript setup is done.</p>
<h2 id="setting-up-eslint">Setting up ESLint</h2>
<p>For large TypeScript of JavaScript projects code consistency and following the best practices are very important. That's where <a target="_blank" href="https://eslint.org/">ESLint</a> comes in. To setup ESLint in your Next.js application install ESLint as a <code>devDependency</code></p>
<pre><code class="lang-shell">npm i -D eslint eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser
</code></pre>
<p>Then we have to create a <code>eslintrc.json</code> file and put the following content in it.</p>
<pre><code class="lang-json"><span class="hljs-comment">// eslintrc.json file</span>
{
  <span class="hljs-attr">"env"</span>: {
    <span class="hljs-attr">"browser"</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">"es6"</span>: <span class="hljs-literal">true</span>
  },
  <span class="hljs-attr">"extends"</span>: [
    <span class="hljs-string">"eslint:recommended"</span>,
    <span class="hljs-string">"plugin:react/recommended"</span>,
    <span class="hljs-string">"plugin:@typescript-eslint/eslint-recommended"</span>,
    <span class="hljs-string">"plugin:@typescript-eslint/recommended"</span>
  ],
  <span class="hljs-attr">"globals"</span>: {
    <span class="hljs-attr">"Atomics"</span>: <span class="hljs-string">"readonly"</span>,
    <span class="hljs-attr">"SharedArrayBuffer"</span>: <span class="hljs-string">"readonly"</span>,
    <span class="hljs-attr">"React"</span>: <span class="hljs-string">"writable"</span>
  },
  <span class="hljs-attr">"parser"</span>: <span class="hljs-string">"@typescript-eslint/parser"</span>,
  <span class="hljs-attr">"parserOptions"</span>: {
    <span class="hljs-attr">"ecmaFeatures"</span>: {
      <span class="hljs-attr">"jsx"</span>: <span class="hljs-literal">true</span>
    },
    <span class="hljs-attr">"ecmaVersion"</span>: <span class="hljs-number">2018</span>,
    <span class="hljs-attr">"sourceType"</span>: <span class="hljs-string">"module"</span>
  },
  <span class="hljs-attr">"plugins"</span>: [<span class="hljs-string">"react"</span>, <span class="hljs-string">"@typescript-eslint"</span>],
  <span class="hljs-attr">"rules"</span>: {
    <span class="hljs-attr">"react/react-in-jsx-scope"</span>: <span class="hljs-string">"off"</span>
  }
}
</code></pre>
<h2 id="setting-up-jest-for-testing">Setting up Jest for Testing</h2>
<p>Now it's time to set up the testing framework <a target="_blank" href="https://jestjs.io/en/">Jest</a>. Jest works pretty well with React and Next. First, install Jest as a <code>devDependency</code>.</p>
<pre><code class="lang-shell">npm i -D jest ts-jest babel-jest react-test-renderer @types/jest @testing-library/react @testing-library/jest-dom
</code></pre>
<p>Now, we create a <code>.babelrc</code> file with the following:</p>
<pre><code><span class="hljs-comment"># .babelrc file</span>
{
    <span class="hljs-string">"presets"</span>: [<span class="hljs-string">"next/babel"</span>]
}
</code></pre><p>Then we shall create a <code>jest.config.js</code> file with the following content:</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// jest.config.js file</span>
<span class="hljs-built_in">module</span>.exports = {
    <span class="hljs-attr">collectCoverageFrom</span>: [
      <span class="hljs-string">"**/*.{js,jsx,ts,tsx}"</span>,
      <span class="hljs-string">"!**/*.d.ts"</span>,
      <span class="hljs-string">"!**/node_modules/**"</span>,
    ],
    <span class="hljs-attr">setupFilesAfterEnv</span>: [<span class="hljs-string">"&lt;rootDir&gt;/setupTests.js"</span>],
    <span class="hljs-attr">testPathIgnorePatterns</span>: [<span class="hljs-string">"/node_modules/"</span>, <span class="hljs-string">"/.next/"</span>],
    <span class="hljs-attr">transform</span>: {
      <span class="hljs-string">"^.+\\.(js|jsx|ts|tsx)$"</span>: <span class="hljs-string">"&lt;rootDir&gt;/node_modules/babel-jest"</span>,
      <span class="hljs-string">"^.+\\.css$"</span>: <span class="hljs-string">"&lt;rootDir&gt;/config/jest/cssTransform.js"</span>,
    },
    <span class="hljs-attr">transformIgnorePatterns</span>: [
      <span class="hljs-string">"/node_modules/"</span>,
      <span class="hljs-string">"^.+\\.module\\.(css|sass|scss)$"</span>,
    ],
    <span class="hljs-attr">moduleNameMapper</span>: {
      <span class="hljs-string">"^.+\\.module\\.(css|sass|scss)$"</span>: <span class="hljs-string">"identity-obj-proxy"</span>,
    },
    <span class="hljs-comment">//additional prop from a github issue: https://github.com/zeit/next.js/issues/8663</span>
    <span class="hljs-attr">preset</span>: <span class="hljs-string">"ts-jest"</span>,
    <span class="hljs-attr">testEnvironment</span>: <span class="hljs-string">"jsdom"</span>,
    <span class="hljs-attr">globals</span>: {
      <span class="hljs-comment">// we must specify a custom tsconfig for tests because we need the typescript transform</span>
      <span class="hljs-comment">// to transform jsx into js rather than leaving it jsx such as the next build requires.  you</span>
      <span class="hljs-comment">// can see this setting in tsconfig.jest.json -&gt; "jsx": "react"</span>
      <span class="hljs-string">"ts-jest"</span>: {
        <span class="hljs-attr">tsConfig</span>: <span class="hljs-string">"tsconfig.jest.json"</span>,
      },
    },
  }
</code></pre>
<p>After that, we have to create a <code>tsconfig.jest.json</code> file like the following:</p>
<pre><code class="lang-json"><span class="hljs-comment">// tsconfig.jest.json</span>
{
    <span class="hljs-attr">"extends"</span>: <span class="hljs-string">"./tsconfig.json"</span>,
    <span class="hljs-attr">"compilerOptions"</span>: {
      <span class="hljs-attr">"jsx"</span>: <span class="hljs-string">"react"</span>
    }
}
</code></pre>
<p>Now, we have to create a <code>setupTests.js</code> file like the following:</p>
<pre><code class="lang-javascript"><span class="hljs-comment">/*
 * setupTests.js file
 */</span>
<span class="hljs-comment">// optional: configure or set up a testing framework before each test</span>
<span class="hljs-comment">// if you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`</span>

<span class="hljs-comment">// used for __tests__/testing-library.js</span>
<span class="hljs-comment">// learn more: https://github.com/testing-library/jest-dom</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">'@testing-library/jest-dom/extend-expect'</span>
</code></pre>
<p>The last file we need to create for Jest is a <code>cssTransform.js</code> in the <code>config/jest</code> directory. </p>
<pre><code class="lang-javascript"><span class="hljs-comment">/*
 * cssTransform.js file
 */</span>
<span class="hljs-built_in">module</span>.exports = {
    process() {
      <span class="hljs-keyword">return</span> <span class="hljs-string">'module.exports = {};'</span>
    },
    getCacheKey() {
      <span class="hljs-keyword">return</span> <span class="hljs-string">'cssTransform'</span>
    },
}
</code></pre>
<p>Then finally in our <code>package.json</code> file, we have to add the following two scripts.</p>
<pre><code class="lang-json"><span class="hljs-comment">// package.json file</span>
{
  ...,
  <span class="hljs-attr">"scripts"</span>: {
    ...,
    <span class="hljs-attr">"test"</span>: <span class="hljs-string">"jest --watch"</span>,
    <span class="hljs-attr">"test:ci"</span>: <span class="hljs-string">"jest --ci"</span>
  },
  ...
}
</code></pre>
<p>The Jest framework is set up now. We will add a simple test now. For this, we will create a small component and test if that component renders without any error. Here I used the <code>Avatar</code> component which simply shows an avatar image. My <code>src/components/avatar.tsx</code> file looks like the following:</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// src/components/avatar.tsx file</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Avatar</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> (
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"avatar"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/avatar.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>/&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
    )
}

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Avatar
</code></pre>
<p>We will render this component in our <code>Index</code> page which is the <code>src/pages/index.tsx</code> file. To test this component let us create a <code>src/components/__tests__/avatar.test.tsx</code> file.</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// src/components/__tests__/avatar.test.tsx file</span>
<span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>
<span class="hljs-keyword">import</span> Avatar <span class="hljs-keyword">from</span> <span class="hljs-string">"../avatar"</span>
<span class="hljs-keyword">import</span> TestRenderer <span class="hljs-keyword">from</span> <span class="hljs-string">"react-test-renderer"</span>
<span class="hljs-keyword">import</span> { cleanup } <span class="hljs-keyword">from</span> <span class="hljs-string">"@testing-library/react"</span>

afterEach(cleanup);

describe(<span class="hljs-string">'Avatar'</span>, <span class="hljs-function">() =&gt;</span> {
    it(<span class="hljs-string">'should render without throwing an error'</span>, <span class="hljs-function">() =&gt;</span> {
        <span class="hljs-keyword">const</span> testRenderer = TestRenderer.create(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Avatar</span> /&gt;</span></span>);
        expect(testRenderer.toJSON()).toMatchSnapshot();
    });
})
</code></pre>
<p>To run the test use</p>
<pre><code class="lang-shell">npm run test
</code></pre>
<h2 id="setting-up-tailwindcss">Setting up TailwindCSS</h2>
<p><a target="_blank" href="https://tailwindcss.com/">TailwindCSS</a> is a utility-first CSS framework and it works well with React and Next. We will add Tailwind as a PostCSS plugin to our project. To install TailwindCSS and PostCSS:</p>
<pre><code class="lang-shell">npm i -D tailwindcss postcss-preset-env postcss-flexbugs-fixes
</code></pre>
<p>Now, we have to create a <code>tailwind.config.js</code> file and a <code>postcss.config.js</code> file in our project root.</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// tailwind.config.js file</span>
<span class="hljs-built_in">module</span>.exports = {
  <span class="hljs-attr">future</span>: {
    <span class="hljs-attr">removeDeprecatedGapUtilities</span>: <span class="hljs-literal">true</span>,
  },
  <span class="hljs-attr">purge</span>: [<span class="hljs-string">'./src/components/**/*.{js,ts,jsx,tsx}'</span>, <span class="hljs-string">'./src/pages/**/*.{js,ts,jsx,tsx}'</span>],
  <span class="hljs-attr">theme</span>: {
    <span class="hljs-attr">extend</span>: {
      <span class="hljs-attr">colors</span>: {
        <span class="hljs-string">'accent-1'</span>: <span class="hljs-string">'#333'</span>,
      },
    },
  },
  <span class="hljs-attr">variants</span>: {},
  <span class="hljs-attr">plugins</span>: [],
}
</code></pre>
<pre><code class="lang-javascript"><span class="hljs-comment">// postcss.config.js file</span>
<span class="hljs-built_in">module</span>.exports = {
  <span class="hljs-attr">plugins</span>: [
    <span class="hljs-string">'tailwindcss'</span>,
    <span class="hljs-string">'postcss-flexbugs-fixes'</span>,
    [
      <span class="hljs-string">'postcss-preset-env'</span>,
      {
        <span class="hljs-attr">autoprefixer</span>: {
          <span class="hljs-attr">flexbox</span>: <span class="hljs-string">'no-2009'</span>,
        },
        <span class="hljs-attr">stage</span>: <span class="hljs-number">3</span>,
        <span class="hljs-attr">features</span>: {
          <span class="hljs-string">'custom-properties'</span>: <span class="hljs-literal">false</span>,
        },
      },
    ],
  ],
}
</code></pre>
<p>Now replace everything from your <code>src/styles/globals.css</code> with the following:</p>
<pre><code class="lang-css"><span class="hljs-keyword">@tailwind</span> base;

<span class="hljs-comment">/* Write your own custom base styles here */</span>

<span class="hljs-comment">/* Start purging... */</span>
<span class="hljs-keyword">@tailwind</span> components;
<span class="hljs-comment">/* Stop purging. */</span>

<span class="hljs-comment">/* Write you own custom component styles here */</span>

<span class="hljs-comment">/* Start purging... */</span>
<span class="hljs-keyword">@tailwind</span> utilities;
<span class="hljs-comment">/* Stop purging. */</span>
</code></pre>
<p>Now, import this <code>globals.css</code> file in your <code>src/pages/_app.tsx</code> file like:</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// src/pages/app.tsx file</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">'../styles/globals.css'</span>
</code></pre>
<p>We are all set up now and ready to start building our Next.js application. One final thing I want to do is to add some Tailwind utility classes to our page. Here is our <code>src/pages/index.tsx</code></p>
<pre><code class="lang-javascript"><span class="hljs-comment">// src/pages/index.tsx</span>

<span class="hljs-keyword">import</span> Head <span class="hljs-keyword">from</span> <span class="hljs-string">'next/head'</span>
<span class="hljs-keyword">import</span> Avatar <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/avatar'</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Home</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"flex h-screen items-center justify-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">Head</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>My Next App<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">Head</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">Avatar</span> /&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
  )
}
</code></pre>
<p>Finally, we are done setting up everything and testing that they are all working properly. Now, you can start building your awesome Next.js app on top of this boilerplate. You can also find the project boilerplate on <a target="_blank" href="https://github.com/shuv1824/nextjs-starter">Github</a>. Hope this will help you get started with Next.js quickly. Happy coding.</p>
]]></content:encoded></item><item><title><![CDATA[Attempt to Learn Elixir: Thinking in Elixir]]></title><description><![CDATA[Welcome to another blog post of the series Attempt to Learn Elixir. If you are reading this then I assume you have already gone through the resources shared in my  previous  post of this series. It is highly recommended that you at least go through t...]]></description><link>https://blog.nawaz.info/attempt-to-learn-elixir-thinking-in-elixir</link><guid isPermaLink="true">https://blog.nawaz.info/attempt-to-learn-elixir-thinking-in-elixir</guid><category><![CDATA[General Programming]]></category><category><![CDATA[Elixir]]></category><category><![CDATA[Functional Programming]]></category><category><![CDATA[learn coding]]></category><category><![CDATA[programming languages]]></category><dc:creator><![CDATA[Shah Nawaz]]></dc:creator><pubDate>Sat, 19 Sep 2020 19:19:22 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1600540082703/LsynudIvd.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Welcome to another blog post of the series <strong>Attempt to Learn Elixir</strong>. If you are reading this then I assume you have already gone through the resources shared in my  <a target="_blank" href="https://blog.nawaz.info/attempt-to-learn-elixir-absolute-basics">previous</a>  post of this series. It is highly recommended that you at least go through the absolute basics first. In this post, we will attempt to learn about the culture of solving problems functionally and how <strong>Elixir</strong> solves it.</p>
<h2 id="elixir-and-otp">Elixir &amp; OTP</h2>
<p>Elixir is a functional programming language. Functional languages are built with functions as first-class citizens and tend to involve a declarative style of programming, where we specify what is to be done rather than focusing on how to do it. Functions are meant to be small and simple, and bigger functions are made by composing the smaller functions together. </p>
<p>Elixir was built on top of a mighty language called <strong>Erlang</strong> which was originally designed and developed by Erricson in the mid-'80s with the aim of building their telephony software.  Elixir is a dynamically-typed language, which means data types are determined in runtime rather than compile time. Elixir code is compiled into bytecode that runs on a virtual machine. The virtual machine is called the <strong>BEAM</strong> (Bogdan's Erlang Abstract Machine) which is at the core of <strong>Erlang Open Telecom Platform (OTP)</strong>. OTP is a set of Erlang libraries and design principles providing middleware to develop massively scalable soft real-time systems with requirements on high availability. Elixir can interact with Erlang code and can call Erlang libraries if the equivalent functionality doesn't exist in an Elixir library. </p>
<p><strong>Elixir</strong> is the perfect blend of the power and robustness of <strong>Erlang</strong> and developer happiness and productivity of <strong>Ruby</strong>.</p>
<h2 id="thinking-functionally">Thinking Functionally</h2>
<p>In functional programming, data and function are strictly separated. We should divide our problem domain into smaller modules. Each module will group related functions and they are passed data as parameters and return data to the caller. One of the key concepts of functional programming is <code>Immutable Data</code>, we take the data, and pass it through a series of functions and return the result without mutating the actual data. Functions are simply data transformers. Our entire system should be made of modules that are comprised of such functions. Each module has data representation (optionally), they are called structs.</p>
<p>Let's say we have to return the number of lines, words, and characters of a file, then our approach would be, first to get the raw data of the file, then separate the lines, then for each line, compute the result. The data needs to be passed through all those stages and transformation, in other words:</p>
<pre><code class="lang-python">format_results(calculate_stats(split_lines(read(file)))
</code></pre>
<p>This looks cumbersome, but Elixir has a culture of having data as the first argument of functions, that way, we can have the pipe function, which would make it:</p>
<pre><code class="lang-elixir">file |&gt; read() |&gt; split_lines() |&gt; calculate_stats() |&gt; format_results()
</code></pre>
<p>So, it is advisable to set up our functions in such a way that data is on the first argument, the same goes with module functions that take advantage of that module's struct.</p>
<p>We should learn to understand <code>map</code>, <code>filter</code>, and <code>reduce</code> really really well. They can often save us from recursions. And let us work in a beautiful flow.</p>
<p>Patterns are amazing, think of it more like the matching games we used to play as kids, key to enjoying Elixir is understanding and embracing <code>pattern matching</code></p>
<p>Modular design where data is transformed through functions, and pipes, and patterns emerge are the key to <strong>Thinking in Elixir</strong>. To be able to think in Elixir we first need to learn to think like functional programmers. For this, we have to grasp the concept of functional programming. Below is a good article on this.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://serokell.io/blog/introduction-to-functional-programming">https://serokell.io/blog/introduction-to-functional-programming</a></div>
<h2 id="functional-paradigm">Functional Paradigm</h2>
<p>Functional programming is not only about following some rules. It is a different way of thinking about a problem or approaching a problem. It is a declarative approach where we define what needs to be done rather than how to do it. The declarative functional mindset is something we have to master before we can write meaningful functional programs. Without the proper understanding of the functional paradigm, it is very easy to abuse any functional language. That can result in inefficient code. That's why learning to write idiomatic Elixir code is the key to developing robust and performant programs which is the actual purpose of Elixir.</p>
<p>Here is a talk by Dave Thomas on <strong>Thinking in Elixir</strong>.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://www.youtube.com/watch?v=5hDVftaPQwY">https://www.youtube.com/watch?v=5hDVftaPQwY</a></div>
<p>Some key concepts of functional programming are:</p>
<ul>
<li>Data and functions are separated</li>
<li>Functions are first-class citizens</li>
<li>Functions are simply data transformers</li>
<li>Functions are small and composable</li>
<li>Data is immutable</li>
<li>Higher-order functions</li>
</ul>
<p>Watch this other talk by Dave Thomas for a better understanding.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://www.youtube.com/watch?v=A76hM3MpEKo">https://www.youtube.com/watch?v=A76hM3MpEKo</a></div>
<h2 id="conclusion">Conclusion</h2>
<p>We have come to the conclusion of this post. After getting the very basics of the Elixir language it is imperative that we spend some time with functional programming and try to conceptualize as much as we can before moving forward with intermediate Elixir. In this post, I have tried to give a brief idea about it. But there are a lot of things to learn. Try to explore by yourself and learn about each topic mentioned in this post. Follow the official  <a target="_blank" href="https://hexdocs.pm/elixir">documentation</a> ,  <a target="_blank" href="https://elixirschool.com/en/">Elixir School</a> and  <a target="_blank" href="https://pragprog.com/titles/elixir16/programming-elixir-1-6/">Programming Elixir</a> book if possible. After you are comfortable with the basic concepts of functional programming and Elixir you are ready to dig deeper into the Elixir ecosystem.</p>
]]></content:encoded></item><item><title><![CDATA[Deploy FastAPI Application on Ubuntu with Nginx, Gunicorn and Uvicorn]]></title><description><![CDATA[FastAPI is a promising new Python framework that supports concurrency and type system out of the box. It has many cool features that I like and it's fast. In this post, I will briefly go over the process of deploying a simple FastAPI application on U...]]></description><link>https://blog.nawaz.info/deploy-fastapi-application-on-ubuntu-with-nginx-gunicorn-and-uvicorn</link><guid isPermaLink="true">https://blog.nawaz.info/deploy-fastapi-application-on-ubuntu-with-nginx-gunicorn-and-uvicorn</guid><category><![CDATA[General Programming]]></category><category><![CDATA[Python]]></category><category><![CDATA[FastAPI]]></category><category><![CDATA[deployment]]></category><category><![CDATA[nginx]]></category><dc:creator><![CDATA[Shah Nawaz]]></dc:creator><pubDate>Tue, 08 Sep 2020 17:45:52 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1599587107022/6L1uykr5Q.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p><a target="_blank" href="https://fastapi.tiangolo.com/">FastAPI</a> is a promising new Python framework that supports concurrency and type system out of the box. It has many cool features that I like and it's fast. In this post, I will briefly go over the process of deploying a simple FastAPI application on Ubuntu running on an EC2 instance. This post will assume that you know and already configured quite a few things and will only focus on deploying the actual application.</p>
<h3 id="pre-requisites">Pre-requisites</h3>
<ol>
<li>First of all, you will need a running EC2 instance with Ubuntu 18.04 or later. This will also work for VPS servers like DigitalOcean or Linode.</li>
<li>If you are using EC2 instance, make sure you configured the VPC and security groups properly and your <strong>port 80</strong> is open for inbound and outbound traffic.</li>
<li>You have to have Nginx installed and running.</li>
<li>You will need Python 3.7 or above installed and any Python virtual environment tool like <strong>virtualenv</strong>, <strong>pipenv</strong>, <strong>conda</strong>, etc. installed.</li>
<li>You need to have your FastAPI application on Github/Bitbucket/Gitlab for easy deployment.</li>
</ol>
<p>After you have ensured that all of the above requirements are met you can move on to the next step. The actual deployment.</p>
<h3 id="prepare-the-application">Prepare the Application</h3>
<p>Now, SSH into the server, create and navigate to the directory that you want your application to be stored into. Say it's <code>/var/www/myapp</code>. </p>
<pre><code class="lang-shell">$ mkdir /var/www/myapp 
$ cd /var/www/myapp
</code></pre>
<p>We have to make sure that our user has proper read-write access to this directory. In this post, I will use <code>virtualenv</code> to manage a Python virtual environment. You can use whichever you like or prefer. Inside <code>/var/www/myapp</code> we have to do the following one by one:</p>
<pre><code class="lang-shell">$ virtualenv -p python3.8 venv
$ mkdir src
$ . venv/bin/activate
(venv) $ cd src
</code></pre>
<p>Once inside the src directory, we have to pull our application source code there. Our application source code should contain a <code>requirements.txt</code> file with all the dependencies unless we are using a <code>PIPFILE</code>.</p>
<pre><code class="lang-shell">(venv) $ git init
(venv) $ git remote add origin &lt;your-repo-url&gt;
(venv) $ git pull origin &lt;your-branch-name&gt;
(venv) $ pip install -r requirements.txt
(venv) $ pip install gunicorn uvicorn
</code></pre>
<h3 id="configure-nginx">Configure Nginx</h3>
<p>Now our application is ready to be run and tested. To be able to serve the application over HTTP we have to make an Nginx config for our application.</p>
<pre><code class="lang-shell">(venv) $ sudo vim /etc/nginx/sites-available/myapp
</code></pre>
<p>Put the followings on that file:</p>
<pre><code class="lang-txt">server{
       server_name &lt;your-site-name&gt;;
       location / {
           include proxy_params;
           proxy_pass http://127.0.0.1:8000;
       }
}
</code></pre>
<p>Now we save the file and exit. Then we make a symbolic link to this config file in the <code>/etc/nginx/sites-enabled</code> directory.</p>
<pre><code class="lang-shell">(venv) $ sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
</code></pre>
<p>Then we restart the Nginx service.</p>
<pre><code class="lang-shell">(venv) $ sudo systemctl restart nginx.service
</code></pre>
<p>Now we can start our uvicorn server to check if our application is working or not.</p>
<pre><code class="lang-shell">(venv) $ gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app
</code></pre>
<p>In the place of <code>main:app</code> we can use whatever is correct for our application. Now that our application is running and the proxy server is configured properly we should be able to visit the URL and see our application from a browser.</p>
<h3 id="configure-asgi-server">Configure ASGI Server</h3>
<p>Now that our application is deployed and configured properly one last thing to do is to create a service for the Gunicorn server so that it is always running and it automatically starts when the server is rebooted. We will user <code>systemd</code> to create the service.</p>
<pre><code class="lang-shell">(venv) $ deactivate
$ sudo vim /etc/systemd/system/myapp.service
</code></pre>
<p>In this new file we have to put the following:</p>
<pre><code class="lang-text">[Unit]
Description=Gunicorn instance to serve MyApp
After=network.target

[Service]
User=&lt;username&gt;
Group=www-data
WorkingDirectory=/var/www/myapp/src
Environment="PATH=/var/www/myapp/venv/bin"
ExecStart=/var/www/myapp/venv/bin/gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app

[Install]
WantedBy=multi-user.target
</code></pre>
<p>Modify the locations as of your own setup and then save and exit the file.</p>
<pre><code class="lang-shell">$ sudo systemctl start myapp.service
</code></pre>
<p>This will start our new service and our ASGI server will be running in the background.</p>
]]></content:encoded></item><item><title><![CDATA[Attempt to Learn Elixir: Absolute Basics]]></title><description><![CDATA[I came across Elixir probably two years ago. But I started looking into the basics of it from the beginning of this year. Functional programming can be intimidating to people coming from an Object-Oriented paradigm or to new programmers. We must gras...]]></description><link>https://blog.nawaz.info/attempt-to-learn-elixir-absolute-basics</link><guid isPermaLink="true">https://blog.nawaz.info/attempt-to-learn-elixir-absolute-basics</guid><category><![CDATA[General Programming]]></category><category><![CDATA[programming languages]]></category><category><![CDATA[Elixir]]></category><category><![CDATA[learning]]></category><category><![CDATA[Functional Programming]]></category><dc:creator><![CDATA[Shah Nawaz]]></dc:creator><pubDate>Sat, 29 Aug 2020 15:36:35 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1598729947184/3EBg1P9Co.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>I came across Elixir probably two years ago. But I started looking into the basics of it from the beginning of this year. Functional programming can be intimidating to people coming from an Object-Oriented paradigm or to new programmers. We must grasp the basic concepts of functional programming to efficiently learn and use a functional programming language like Elixir. Thanks to the modern and elegant syntax of Elixir we can spare the struggle of learning the syntax and focus more on the core concepts of the language. Before we start here's a nice documentary on Elixir.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://www.youtube.com/watch?v=lxYFOM3UJzo&amp;fbclid=IwAR2ybk5JwXgLkuvU7UUasQ9P3efmQTBBS2Vfjkkj55YhmZzUIU7ceKjiYvY">https://www.youtube.com/watch?v=lxYFOM3UJzo&amp;fbclid=IwAR2ybk5JwXgLkuvU7UUasQ9P3efmQTBBS2Vfjkkj55YhmZzUIU7ceKjiYvY</a></div>
<h1 id="back-to-school">Back to School</h1>
<p><a target="_blank" href="https://elixirschool.com/en/">Elixir School</a> is a good starting point for learning Elixir. It has very good official documentation also. We will find it on  <a target="_blank" href="https://hexdocs.pm/elixir">hexdocs</a>. HexDocs contains the documentation of all the Elixir packages published on  <a target="_blank" href="https://hex.pm/">Hex</a>, the package manager for the Erlang ecosystem. But we should start with Elixir School for now. 
For the fundamentals of the language like basic syntax, data types, control structure, functions, modules finish up to <strong>chapter 8</strong>. We should take our time and do not rush or skip anything. Here we will learn two of the most amazing features of Elixir - <a target="_blank" href="https://elixirschool.com/en/lessons/basics/pattern-matching/">Pattern Matching</a> and  <a target="_blank" href="https://elixirschool.com/en/lessons/basics/pipe-operator/">Pipe Operator</a>. To help with our understanding so far the following video tutorial is recommended.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://www.youtube.com/watch?v=Ni6ykhoVTks">https://www.youtube.com/watch?v=Ni6ykhoVTks</a></div>
<h1 id="functional-paradigm">Functional Paradigm</h1>
<p>Besides learning the basics of the language it is imperative that we start learning about functional programming as well. It will definitely take time to get our heads around all of these. But with consistency and perseverance, we will get there. Just do not get overwhelmed and take in a little every day. Here's a must-watch video on functional programming.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://www.youtube.com/watch?v=0if71HOyVjY">https://www.youtube.com/watch?v=0if71HOyVjY</a></div>
<p>We will get some basic ideas about functional programming from this video. It's only scratching the surface. There's much to know and internalize before being able to think <strong>functionally</strong>. For us who are coming from the object-oriented programming paradigm, it can be quite a hassle to reorient our perspective towards programming. But knowing some other programming language will surely help us understand Elixir better. </p>
<h1 id="why-elixir-matters">Why Elixir Matters?</h1>
<p>To know that we should watch the following video. It's perfectly okay to skip this but it may motivate us for the upcoming journey.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://www.youtube.com/watch?v=cWAHpvkh8Vs">https://www.youtube.com/watch?v=cWAHpvkh8Vs</a></div>
<p>Along with all the free resources, The  <a target="_blank" href="https://pragprog.com/titles/elixir16/programming-elixir-1-6/">Programming Elixir</a> book by  <a target="_blank" href="https://pragdave.me/">Dave Thomas</a> is highly recommended.</p>
<p>That's it for the first step. That was a lot to take in. But it will be easier for you all to determine if we would like to advance further with Elixir after completing all the resources mentioned here. Feel free to explore the wonderful realm of functional programming. Hope to see you in the next post.  </p>
]]></content:encoded></item><item><title><![CDATA[Attempt to Learn Elixir: The Introduction]]></title><description><![CDATA[This series of posts will hopefully reflect my own journey into the world of functional programming with Elixir.  Elixir  is the first and so far the only functional programming language I tried to learn and use. After I started learning the basics I...]]></description><link>https://blog.nawaz.info/attempt-to-learn-elixir-the-introduction</link><guid isPermaLink="true">https://blog.nawaz.info/attempt-to-learn-elixir-the-introduction</guid><category><![CDATA[General Programming]]></category><category><![CDATA[Functional Programming]]></category><category><![CDATA[Elixir]]></category><category><![CDATA[learning]]></category><category><![CDATA[programming languages]]></category><dc:creator><![CDATA[Shah Nawaz]]></dc:creator><pubDate>Tue, 25 Aug 2020 19:40:43 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1598384285032/eBsV5kMKv.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>This series of posts will hopefully reflect my own journey into the world of functional programming with Elixir.  <a target="_blank" href="https://elixir-lang.org/">Elixir</a>  is the first and so far the only functional programming language I tried to learn and use. After I started learning the basics I fell in love with this beautiful language. I was introduced to it by one of my mentors. Learning a functional programming language made me think about programming in a different way. Though I do not use functional programming for my professional works it helped me become a better programmer in so many ways.</p>
<h2 id="so-what-is-elixir">So, What is Elixir?</h2>
<p>Elixir is a dynamic, functional language designed for building scalable and maintainable applications. Elixir leverages the Erlang VM, known for running low-latency, distributed and fault-tolerant systems, while also being successfully used in web development, embedded software, data ingestion, and multimedia processing domains. It is built on top of <strong>Erlang</strong>, which is a battle-tested programming language developed by <strong>Ericsson</strong> to build massively scalable soft real-time systems with requirements on high availability. Erlang is the reason why Elixir is so mature despite its young age. It is powerful as Erlang and developer-friendly and productive as Ruby. Ruby was built for <strong>Developers' Happiness and Productivity</strong>. And Elixir syntax is heavily influenced by Ruby. So you will get productivity, performance and happiness. </p>
<p>There are a lot of cool features in Elixir. My goal is to learn as much as possible about this language and share my learnings with others. We will find out about all the cool stuff about Elixir and its ecosystem. </p>
<h2 id="first-a-big-disclaimer">First, A Big Disclaimer</h2>
<p>I am a beginner in Elixir and my goal is not to <strong>teach</strong> anybody anything. I only intend to share my understandings and some learning resources with you all. All sorts of constructive criticism and positive feedbacks are appreciated. And also this will be my own journey and may not cover all the concepts. This is not a tutorial series or crash course. If you really want to dig deeper you must do your own study and research.</p>
<h2 id="now-what-will-we-attempt">Now, What Will We Attempt?</h2>
<p>We will try to learn the following topics in the upcoming posts:</p>
<ul>
<li>Environment</li>
<li>Syntax</li>
<li>Data Structure</li>
<li>Program Design</li>
<li>Process and Concurrency Techniques</li>
<li>Generic Server Process</li>
<li>Fault-Tolerance</li>
<li>Some Advanced Topics</li>
</ul>
<h2 id="finally-conclusion-of-the-intro">Finally, Conclusion of the Intro</h2>
<p>This is not a tutorial series or course. In every post, I will share some motivation and learning materials with all of you. Perhaps this will give you some basic idea about Elixir and its ecosystem and encourage you to learn more about it. I will definitely be learning a lot from this as well. So, see you in the first post. </p>
]]></content:encoded></item><item><title><![CDATA[My First Impression of Julia]]></title><description><![CDATA[Some days ago I came across a programming language that I had no idea about before. It was announced in 2012 and since the community has grown, with over 13,000,000 downloads as of March 2020 (and is used at more than 1,500 universities)[1]. The lang...]]></description><link>https://blog.nawaz.info/my-first-impression-of-julia</link><guid isPermaLink="true">https://blog.nawaz.info/my-first-impression-of-julia</guid><category><![CDATA[General Programming]]></category><category><![CDATA[Julia]]></category><category><![CDATA[Data Science]]></category><category><![CDATA[Machine Learning]]></category><category><![CDATA[Artificial Intelligence]]></category><dc:creator><![CDATA[Shah Nawaz]]></dc:creator><pubDate>Wed, 19 Aug 2020 07:58:08 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1597823829041/U9_Oj9YZu.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Some days ago I came across a programming language that I had no idea about before. It was announced in 2012 and since the community has grown, with over 13,000,000 downloads as of March 2020 (and is used at more than 1,500 universities)[1]. The language has a very pretty name and it’s <a href="https://julialang.org/">Julia</a>. It is a high-level, high-performance, dynamic programming language actually designed to address the requirements of high-performance numerical and scientific computing while also being useful for general-purpose programming. Julia 1.0 was released in 2015 and it made its place in the ML and Data Science world in such short time. In the time of this writing the latest version of Julia is 1.4.2.</p>
<h3 id="paradigm">Paradigm</h3>
<p>Julia is a multi-paradigm programming language with Multiple Dispatch as its core. It is also Homo iconic, meaning a program written in it can be manipulated as data using the language, and thus the program's internal representation can be inferred just by reading the program itself. Thus it has powerful Metaprogramming capabilities. It combines features of imperative, functional, and object-oriented programming. Julia provides ease and expressiveness for high-level numerical computing, in the same way as languages such as R, MATLAB, and Python, but also supports general programming. To achieve this, Julia builds upon the lineage of mathematical programming languages, but also borrows much from popular dynamic languages, including Lisp, Perl, Python, Lua, and Ruby. Julia is garbage-collected, uses eager evaluation, and includes efficient libraries for floating point calculation, linear algebra, random number generation, and regular expression matching. It supports concurrent, (composable) parallel and distributed computing. A just-in-time compiler that is referred to as "just-ahead-of-time" in the Julia community is used.</p>
<h3 id="language-features">Language Features</h3>
<p>According to the official website[2], the main features of the language are:</p>
<ul>
<li><p>Multiple dispatch: providing ability to define function behavior across many combinations of argument types</p>
</li>
<li><p>Dynamic type system: types for documentation, optimization, and dispatch</p>
</li>
<li><p>Good performance, approaching that of statically-typed languages like C</p>
</li>
<li><p>A built-in package manager</p>
</li>
<li><p>Lisp-like macros and other metaprogramming facilities</p>
</li>
<li><p>Call Python functions: use the PyCall package</p>
</li>
<li><p>Call C functions directly: no wrappers or special APIs</p>
</li>
<li><p>Powerful shell-like abilities to manage other processes</p>
</li>
<li><p>Designed for parallel and distributed computing</p>
</li>
<li><p>Co-routines: lightweight green threading</p>
</li>
<li><p>User-defined types are as fast and compact as built-ins</p>
</li>
<li><p>Automatic generation of efficient, specialized code for different argument types</p>
</li>
<li><p>Elegant and extensible conversions and promotions for numeric and other types</p>
</li>
<li><p>Efficient support for Unicode, including but not limited to UTF-8</p>
</li>
</ul>
<h3 id="type-system">Type System</h3>
<p>Describing Julia in the lingo of type systems, it is: dynamic, nominative and parametric. Generic types can be parameterized, and the hierarchical relationships between types are explicitly declared, rather than implied by compatible structure. One particularly distinctive feature of Julia's type system is that concrete types may not subtype each other: all concrete types are final and may only have abstract types as their supertypes. While this might at first seem unduly restrictive, it has many beneficial consequences with surprisingly few drawbacks. It turns out that being able to inherit behavior is much more important than being able to inherit structure, and inheriting both causes significant difficulties in traditional object-oriented languages. </p>
<p>It has an automatic generation of efficient, specialized code for different argument types. In Julia, the types are run-time objects, and can also be used to convey information to the compiler. Due to the run-time type inference and a strong focus on performance from the inception of the project, Julia’s computational efficiency exceeds that of other dynamic languages. This language solves the two language problem by combining the ease of use of Python and R with the speed of C++.</p>
<p>Julia's type system is designed to be powerful and expressive, yet clear, intuitive and unobtrusive. Many Julia programmers may never feel the need to write code that explicitly uses types. Some kinds of programming, however, become clearer, simpler, faster and more robust with declared types.</p>
<h3 id="syntax-and-package-system">Syntax and Package System</h3>
<p>Among the languages that inspired Julia is Ruby, so it should come as no surprise that Julia adopted one of Ruby's more iconic features: the <code>do...end</code> block. As is the case with many other features that Julia has adopted, its implementation of <code>do...end</code> is simpler and more flexible than Ruby's. Julia is as easy to learn and use as Python.</p>
<p>Julia has a built-in package manager and includes a default registry system. Packages are most often distributed as source code hosted on GitHub, though alternatives can also be used just as well. Packages can also be installed as binaries, using artifacts. Julia's package manager is used to query and compile packages, as well as managing environments. Federated package registries are supported, allowing registries other than the official to be added locally.</p>
<h3 id="parallel-computing">Parallel Computing</h3>
<p>Julia has a high-level syntax which makes it easy and accessible language for the programmers from any background. The Julia programs are able to compile efficient native code for multiple platforms via LLVM. It can be said that this language is built for parallelism due to its primitives for parallel computing. The parallelism is divided into three main categories — Julia Co-routines (green threading), multi-threading and multi-core or distributed processing. With scientific computing in mind, this language natively implements interfaces to distribute a process across multiple cores or machines.</p>
<h3 id="efficiency">Efficiency</h3>
<p>This language can be said as the fastest high-performance open source computing language for data, analytics, algorithmic trading, machine learning, artificial intelligence, and other scientific and numeric computing applications. While popular languages like Python can be slower being an interpreted language, Julia has been designed for high-performance functions by the developers. The applications in Julia can be easily compiled to efficient native code. If you call a function in Julia it consumes a little time in the first run but when the same function has been called repeatedly, it shows a much faster outcome than other languages.</p>
<h3 id="my-thoughts-on-julia">My Thoughts on Julia</h3>
<p>I have only scratched the surface of the programming language. Surely one weekend is not enough to get a total feel of the capabilities of any language. But with the small amount of study and research I have found some very good features and reviews of Julia. It is a modern programming language designed with performance and ease of use in mind. The Ruby-like syntax is really helpful for developers to quickly pick up the language but the type system can be hard to grasp at first. If you are familiar with Lisp or even Golang you will find it relatively easy to understand and reason about. Functional programming knowledge is another good thing to have while learning Julia. The official documentation page is very descriptive and will provide you with an in-depth idea about the syntax and language features and uses. The package manager is pretty good and Julia already has more than 3000 packages available and the number is growing everyday. </p>
<p>Though the main power of Julia lies in Scientific Computation it is also a great choice for data analytics, machine learning, artificial intelligence, deep learning, computer vision etc. And one can also use it as a general purpose language. </p>
<p>I really like to learn about new and emerging technologies and try to adopt them early if I can. Many big organizations are already using Julia for building their ML or AI solutions and many universities are using it for their research work worldwide. A data scientist can highly benefit in the near future by adopting Julia now. It may not be as popular as any main stream languages today but in a few years it may become a main stream language itself. </p>
<p>Finally I would like to add this. If you want to bet on some tech for the future of data analytics and machine learning then Julia might be the right one.</p>
<h3 id="reference">Reference</h3>
<ol>
<li><p>https://en.wikipedia.org/wiki/Julia_(programming_language)</p>
</li>
<li><p>https://docs.julialang.org/en/v1/</p>
</li>
</ol>
]]></content:encoded></item><item><title><![CDATA[Trying out Vim]]></title><description><![CDATA[Vim (Vi IMproved) is a highly configurable text editor built to make creating and changing any kind of text very efficiently. It is included as "vi" with most UNIX systems and with Apple OS X.I attempted to learn Vim quite a few times before but coul...]]></description><link>https://blog.nawaz.info/trying-out-vim</link><guid isPermaLink="true">https://blog.nawaz.info/trying-out-vim</guid><category><![CDATA[vim]]></category><category><![CDATA[tools]]></category><category><![CDATA[cli]]></category><category><![CDATA[General Programming]]></category><category><![CDATA[coding]]></category><dc:creator><![CDATA[Shah Nawaz]]></dc:creator><pubDate>Wed, 12 Aug 2020 15:05:58 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1597244649420/jX9JzFN5o.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p><a target="_blank" href="https://www.vim.org/">Vim</a> (<strong>V</strong>i <strong>IM</strong>proved) is a highly configurable text editor built to make creating and changing any kind of text very efficiently. It is included as "vi" with most UNIX systems and with Apple OS X.I attempted to learn Vim quite a few times before but could not cope up with it. But recently I thought I should at least know very basic usage of Vim. So I started learning the absolute basics. Here I am putting all the basic commands and usage of Vim for any absolute beginner like me. This can be helpful to get started with Vim I think. But there is a lot of things to learn about this handy tool that will take much time and practice. One will get proficient in using Vim only by using it consistently.</p>
<p>Vim has two basic modes:</p>
<ol>
<li>One is <code>INSERT</code> mode, in which you write text as if in a normal text editor.</li>
<li>Another is <code>NORMAL</code> mode which provides you efficient ways to navigate and manipulate text. This is also called <code>Command</code> mode cause we can do various vim commands on this mode.</li>
</ol>
<p>To change between modes, use <code>ESC</code> for normal mode and <code>i</code> for insert mode.</p>
<h2 id="heading-vim-commands">VIM Commands</h2>
<div class="hn-table">
<table>
<thead>
<tr>
<td>Command</td><td>Action</td></tr>
</thead>
<tbody>
<tr>
<td>:e <em>filename</em></td><td>Open <em>filename</em> for editon</td></tr>
<tr>
<td>:w</td><td>Save file</td></tr>
<tr>
<td>:q</td><td>Exit vim</td></tr>
<tr>
<td>:q!</td><td>Quit without saving</td></tr>
<tr>
<td>:x</td><td>Save and Exit</td></tr>
<tr>
<td>:sav <em>name</em></td><td>Save current file as <em>name</em></td></tr>
<tr>
<td>.</td><td>Repeat last change made in <code>NORMAL</code> mode</td></tr>
</tbody>
</table>
</div><hr />
<h2 id="heading-cursor-movements">Cursor Movements</h2>
<ul>
<li><code>h</code> to move cursor left (←)</li>
<li><code>l</code> to move cursor right (→)</li>
<li><code>k</code> to move cursor up (↑)</li>
<li><code>j</code> to move cursor down (↓)</li>
<li><code>b</code> moves to the beginning of the word</li>
<li><code>e</code> moves to the end of the word</li>
<li><code>w</code> moves to the beginning of the next word</li>
</ul>
<h2 id="heading-number-based-movements">Number Based Movements</h2>
<p>Using a <code>number</code> before each command can execute that command that many times. e.g <code>3w</code> will move to the 3rd next word.</p>
<h2 id="heading-insert-text-repeatedly">Insert Text Repeatedly</h2>
<p>To insert the same text multiple times use <code>&lt;number&gt;i&lt;text&gt;esc</code>. e.g <code>3&lt;i&gt;go&lt;esc&gt;</code> will write <code>gogogo</code>.</p>
<h2 id="heading-find-a-character">Find a Character</h2>
<p>To find and move to the next (or previous) occurrence of a character, use <code>f</code> and <code>F</code>, e.g. <code>fo</code> finds next 'o'. You can combine f with a number. e.g. you can find 3rd occurrence of 'q' with <code>3fq</code>.</p>
<h2 id="heading-go-to-matching-parenthesis">Go to Matching Parenthesis</h2>
<p>In text that is structured with parentheses or brackets, <code>(</code> or <code>{</code> or <code>[</code>, use <code>%</code> to jump to the matching parenthesis or bracket.</p>
<h2 id="heading-startend-of-line">Start/End of Line</h2>
<p>To reach the beginning of a line, use <code>0</code>. For the end of line use <code>$</code>.</p>
<h2 id="heading-find-word-under-cursor">Find Word Under Cursor</h2>
<p>Find the next occurrence of the word under the cursor with <code>*</code>, and the previous with <code>#</code>.</p>
<h2 id="heading-go-to-line">Go to Line</h2>
<p><code>gg</code> takes you to the beginning of the file; <code>G</code> to the end. To jump directly to a specific line, give its line number along with <code>G</code>. e.g <code>5G</code> will take you to the fifth line of the file.</p>
<h2 id="heading-search-for-text">Search for Text</h2>
<p>Searching text is a vital part of any text editor. In Vim, press <code>/</code>, and give the text to search for. The search can be repeated for next and previous occurrences with <code>n</code> and <code>N</code> respectively. For advanced use cases, it's possible to use regexps that help to find the text of a particular form.</p>
<h2 id="heading-insert-new-line">Insert New Line</h2>
<p>To insert text into a new line <strong>after</strong> the current line use <code>o</code> and to insert a new line <strong>before</strong> the current line use <code>O</code>.</p>
<p>After a new line is created, the editor is set to <code>insert</code> mode.</p>
<h2 id="heading-removing-a-character">Removing a Character</h2>
<p><code>x</code> and <code>X</code> delete the character under the cursor and to the left of the cursor, respectively.</p>
<p>Also adding a <code>number</code> before <code>x</code> of <code>X</code> can perform the action that many times. e.g <code>5x</code> will remove the <strong>next</strong> five characters <strong>including</strong> the character under the cursor and <code>5X</code> will remove the <strong>previous</strong> five characters <strong>excluding</strong> the character under the cursor.</p>
<h2 id="heading-replace-a-character">Replace a Character</h2>
<p>User <code>r</code> to replace only one character under the cursor.</p>
<h2 id="heading-deleting">Deleting</h2>
<p><code>d</code> is the delete command. It can be combined it with movements, e.g. <code>dw</code> deletes the characters on the right side of the cursor up to the beginning of the next word. <code>de</code> deletes all the characters of the word on the right side of the cursor <strong>including</strong> the character under cursor. <code>db</code> will delete the previous word if the cursor is under the first letter of a word or else it will delete the characters left to the cursor upto the beginning of the word.</p>
<p>It also <strong>copies</strong> the content, so that you can <strong>paste</strong> it with <code>p</code> to another location.</p>
<p><code>dd</code> will delete the whole line.</p>
<h2 id="heading-repeat-command">Repeat Command</h2>
<p>To repeat the previous command, just use <code>.</code> (period).</p>
<h2 id="heading-replace-mode">Replace Mode</h2>
<p>Use <code>R</code> to enter <code>REPLACE</code> mode. In this mode characters under the cursor can be replaced.</p>
<h2 id="heading-visual-mode">Visual Mode</h2>
<p>Use <code>v</code> to enter the <code>VISUAL</code> mode and <code>V</code> to enter <code>VISUAL LINE</code> mode. In this mode the text can be selected by the movement keys before deciding what to do with it.</p>
<p>Selected text can be <strong>deleted/cut</strong> using <code>d</code> or <strong>copied</strong> using <code>y</code>. It can be <strong>pasted</strong> after the cursor using <code>p</code> or before the cursor using <code>P</code>.</p>
]]></content:encoded></item></channel></rss>